Layout

Generators combine two questions — what goes on the canvas (left) and what does it look like (right) — into one of five layouts. The platform's own generators cover all five; yours starts from the template closest to it.

The five templates

If you cannot decide between 3 and 4, there is one question: is anything adjusted after generating? If yes, 3. If the result is final, 4.

Each template comes in two forms. The skeleton (<layout>.skeleton.html) is the structure plus the full stylesheet with the script block removed — read this one when you write markup, because nothing in it competes with the layout and the tokens for attention. The runnable form (the same URL without .skeleton) has the behaviour inlined as well, for seeing the example work; what its controls do is a demo, not the spec. Both are a single HTML file with no second file to copy alongside.

Every control in it works — reset, the unit toggle, drag-to-change on numeric fields, zoom, the select, collapse, the Fabrication Tips walkthrough, the second-level views. The export button is the one stand-in: it says what the platform would do. Try them below, then download one and drop it into your project.

Regions

Rails are fixed width. The canvas absorbs every resize: when the window gets wider, the parameters rail does not.

Docked regions have no gap and no radius between them — a docked rail meets the canvas at a single 1px stroke-default line. The floating rail is the one exception: a white card, 12px radius, shadow-100, inset 16px from the canvas's top, start and bottom edges.

Left rails collapse to a 40px pill in the canvas's top-start corner (rail title plus the panel icon), and the canvas grows. In layout 5 the panel collapses by clicking the already-selected tool.

The parameters rail is always 320px and always the same three bands:

• Header row — unit toggle at the start, Reset at the end
• Middle — a scrolling stack of property cards
• Footer — the export button, pinned so nobody has to scroll to find it

Derived results (usage, part count, duration) are annotations on the canvas, or one card at the bottom of the stack. They never get a column of their own.

The four corners of the canvas

The canvas carries four overlays and nothing else: view tabs at the top centre, the Fabrication Tips capsule at the top end, the zoom cluster at the bottom start. The fourth is export, and it appears at the bottom end only when there is no parameters rail. Overlays do not move on hover.

Zoom is a free value, not a set of steps: the wheel and a two-finger pinch scale the canvas continuously and anchor on the pointer, dragging the canvas pans it, the readout is a menu button whose menu lists a few levels as shortcuts, and fit measures the canvas and re-centres. Which levels the menu lists, and how far the range goes, is yours to decide.

A lead rail can hold a second level: "View all" on a section, or the history row at the rail's foot, replaces the rail's content with a back row and a three-column grid of 90px tiles. The canvas does not change and no dialog opens; Back is the only way out.

Property cards

Parameters are grouped by object or by function into property cards: white, stroke-divider border, an 8px radius on all four corners and shadow-100, stacked 12px apart on the bg-subtlest panel. A card is a header row plus the field rows under it. The header row is one <button aria-expanded> across the full width, title at the start and disclosure chevron at the end. The card itself is a <section> pointed at that header with aria-labelledby.

Cards with few parameters stay open; cards with many may start collapsed. Collapsing changes two things and nothing else: hidden on the body, and the chevron's rotation. No height animation.

A field row is label ⋯ control, 8px vertical and 16px horizontal padding, label in text-primary, control aligned to the end. The kind of value decides the control: a number takes a 92px input, a choice a 110px select, a range a slider with the number beside it, on/off a switch, a colour a 24px swatch.

Flow and states

The layout has to make the flow obvious: pick or input → configure → generate → review → export. Live-preview generators redraw as a slider moves, so they have no generate step; adding a Generate button to one is a defect.

The preview has three states and all three need designing:

• Empty — examples or a hint, never a blank rectangle
• Computing — a stage name, a number, and a way to cancel; never an indefinite spinner
• Done — zoom, pan, compare, regenerate

Errors belong beside the control that caused them, together with the next action. A toast at the top of the screen is where errors go to be missed.

Sizing and scrolling

Your width is the region the platform allocates, not the viewport, so adapt with container queries. Below 960px the three regions stack, canvas first and rails after, and the export button stays pinned to the bottom.

Rails scroll inside themselves with thin scrollbars. Never introduce horizontal scrolling, and never nest one scroll container inside another. A panel that fills its space and scrolls needs both flex: 1 and min-height: 0. flex: 1 makes it grow; min-height: 0 lets it shrink below its content. Without the second, a flex child keeps its default min-height: auto, refuses to shrink, and overflows instead of scrolling. Every scroll container in the templates carries the pair.