# Atelier

A complete creative workspace, with room for your next good idea.

**Open `index.html`.** No account, package install, build step, API key or server is required. All fonts use the system stack, and every runtime asset lives in this folder. The sample makes no network requests to external hosts.

Atelier brings the Forma, Fieldwork and Orbit directions from Workshop's landing page into a working product. It adds three coordinated project covers, search, filters, grid/list views, favorites, project details, task checklists, new projects and JSON export. All six projects and their people are fictional.

## A two-minute first use

1. Select Fieldwork to inspect its brief, lead and next steps.
2. Search for `lighting`, or press Command/Control + K to focus search.
3. Switch to In review, then try List view.
4. Open a project, mark a step complete and add one of your own.
5. Choose New project. Your new project appears first, with a matching cover.
6. Export your workspace to keep a portable copy of your data.

On small screens, selecting a project moves to its details below the collection. Keyboard users have visible focus, labelled controls and native dialog behavior. Escape closes dialogs and returns focus; Escape in search clears the query. Motion is restrained and respects reduced-motion preferences.

## Try Workshop on it

Open this folder in your coding agent and give it **`TASK.md`**. The exercise adds an asset library while preserving the established visual direction. The existing screen should already look finished; your first task extends a desirable product.

For a separate visual comparison, open `starter/index.html`. It uses the **same JavaScript, fictional project data and controls**, with an ordinary visual treatment. This finished app and its starting treatment are authored examples. They are not a recorded agent run, a benchmark, or proof of a measured Workshop effect.

## Working source

| File | Purpose |
| --- | --- |
| `index.html` | The finished, directly runnable app and dialogs. |
| `style.css` | Layout, responsive rules, visual system and interaction states. |
| `app.js` | Search, filters, project/task editing, local persistence and export. |
| `data.js` | The six fictional projects shared by both treatments. |
| `assets/` | Original SVG artwork, the existing Fold render, and a credited photo. |
| `starter/` | The same working product with a plain starting treatment. |
| `TASK.md` | A scoped extension task for your agent. |
| `CHECKS.md` | Practical acceptance checks for that task. |
| `preview.webp` | An actual rendered screenshot of the finished workspace. |

This example uses plain HTML, CSS and JavaScript so the download opens immediately. It has no shadcn dependency. When adapting it to a React/shadcn project, retain the project's component primitives and translate the design decisions into them.

## Your local data

Projects, task completion, favorites, the selected project and grid/list preference save in this browser when local storage is available. Search and filters reset on reload. A successful checklist update immediately changes project progress; a project is completed when all of its tasks are checked.

Invalid or unavailable saved data is not overwritten. The app keeps current edits in memory and shows “Kept in this tab”; export before closing. If another tab changes the saved workspace, this tab stops saving so it does not silently replace those edits. Export this draft, then reload to read the saved version. JSON export contains data and is not an import or cloud-sync feature.

Browser behavior for `file://` storage differs. For a stable origin when testing persistence, serve this folder locally:

```sh
python3 -m http.server 4175 --bind 127.0.0.1
```

Then open `http://127.0.0.1:4175/`. To begin again, clear only the `workshop.atelier.v1` local-storage entry in your browser's developer tools after exporting any work you want to keep.

## Art and reuse

See `assets/SOURCES.md` for exact provenance. The artwork is included in the download; creating new images does not require an API call for this sample. You may use and modify the original source, data and illustrations in personal and commercial projects. The photograph retains its original license. Do not redistribute the Workshop instruction library as a competing library. Company and product names imply no affiliation or endorsement.