Codex

How every full-screen tool — a workbench — is built. Unlike the other page classes there is no kit yet: the class has one full instance, and a shell extracted from a single sample is premature abstraction. This law records the structure that instance proved and the rulings a second instance must follow; extract the kit when it arrives. The living examples are Icon Studio (/icon-studio, the full form) and Showcase (/showcase, the stage-only form). Compositions (/labs/compositions) is the catalogue form: stage, material strip and a library rail, with no inspector. Its route group is (workbench) so its established /labs URL does not change.

A page earns chromeless full-viewport treatment when the interaction is canvas-centric — the user manipulates one artifact and wants every pixel for it. Icon Studio (an icon recipe under continuous adjustment) and Showcase (a card framed for screen recording) qualify; a dashboard or a data view never does — density is not the same thing as canvas-centricity.

The cost of leaving the (app) shell is real: no sidebar, no app header, no settings drawer. A workbench therefore must carry its own survival kit — a return path ("← Back to app") and a theme toggle in its own toolbar, because nothing else will provide them.

┌──────────────────────── Toolbar ────────────────────────┐
│ identity · view controls …… export · back · theme       │
├──────────┬──────────────────────────────┬───────────────┤
│ Library  │            Stage             │   Inspector   │
│ (rail)   │        (the artifact)        │  (properties) │
└──────────┴──────────────────────────────┴───────────────┘

Pick left, tune right is the load-bearing ruling — the split every drawing app converges on. An asset picker in the inspector, or a property slider in the rail, is the class's central anti-pattern.

The catalogue form (Compositions) pairs a finished layout with a material; geometry and copy stay fixed, so it drops the full inspector and gives the stage the leading left position. The right-hand library chooses type and preset; the strip below the stage chooses material. This is the explicit exception to rail placement, not to responsibilities: the rail loads whole designs. Its explicitly authorized Gradient curve adjustment lives in a separate section for opted-in presets, without creating an editor. It does not yet create a second full three-zone instance, so it does not trigger extracting a shared workbench shell.

The stage-only form (Showcase) drops both rails: toolbar + stage, with the few knobs it has (width preset, surface, replay) living in the toolbar. That is the degenerate case of the same anatomy, not a different class.

• One document. A single state object (Icon Studio's Recipe) is the document; toolbar, rail and inspector all patch it, and the stage renders it. Zone-local state is allowed only for view concerns (zoom, backdrop) — never for anything the export depends on.
• Viewport discipline. Root is min-h-dvh flex-col and locks to lg:h-dvh lg:overflow-hidden; each zone scrolls internally. Below lg the zones stack stage first (the artifact is why the user came), rails after.
• Export is WYSIWYG. Serialize the node the stage actually rendered (clone the live SVG), never re-render for export — the moment export has its own render path, it can disagree with the screen.
• Chromeless, not lawless. The route lives outside (app) but the design system still applies in full: theme tokens, elevation, the icon family, toasts on every export/copy.
• A forced theme must stay reversible. Showcase forces dark on mount (recording is a dark-mode activity) — via the global theme so portals match, guarded so it fires once, with the toggle left in the toolbar to flip back.

1. Route it outside (app); give the toolbar the return link and the theme toggle before anything else.
2. Define the document type and its patch; wire rail (load) and inspector (tune) through it.
3. Compose the inspector from the studio kit's rows; keep asset pickers in the rail.
4. Lock the viewport per the discipline above; check each zone scrolls on its own.
5. Export by serializing the stage. Register the route (nav under Tools, or deliberate absence) and extend the feature ledger.
6. When this creates the class's second full instance, extract the shell into src/components/workbench/ and update this law.

• A workbench inside the (app) shell, scrolling the whole page.
• Asset picking in the inspector, or property tuning in the rail.
• Document state scattered across zones (an export that depends on a rail's local useState is corrupted).
• An export path that re-renders instead of serializing the stage.
• A chromeless route with no return path or no theme toggle.
• Chromeless used as a style choice for a page that is not canvas-centric.