This guide and the live showcase are the visual authority for Formamorph. They document approved patterns; they do not authorize an app-wide redesign.

Open the live reference: run the development app, then open #dev?modal=designSystem or call window.__fmDev.goto(undefined, { modal: 'designSystem' }).

The showcase uses production components and local demonstration state. It does not save preferences or call an endpoint, and its lazy route is excluded from production builds.

Use semantic values from the app. Do not sample colors from screenshots; HDR and display processing can change them.

Cards use card rather than inventing a second panel color. Destructive, success, warning, and information states keep their semantic colors across palettes.

Purpose: Make a mixed settings form easy to scan while giving controls most of the horizontal space.

Density: Comfortable. Sections have 1.5rem between them; rows within a section have 1rem. Controls keep their production heights and typography roles.

• Group related rows with a small uppercase section title and a hairline divider.
• At sm and wider, use a 1:3 label/control grid. Right-align labels and keep controls left-aligned.
• Below sm, stack the label above the control and left-align both.
• Put a short description below its control or beside a checkbox. Keep necessary detail behind the information control.
• Use several suitable widget types. Do not convert every setting into the same control for visual uniformity.
• Use the responsive option switcher for mutually exclusive choices: segmented options at sm and wider, a select below sm.
• Keep long values inside the control column. Select triggers truncate instead of widening the row.

The live Settings reference renders the production Display and Output sections and the Mode Select. A local source built from the settings defaults backs them, so a change writes no settings and no theme. Where Settings would save a theme or load the embedding model, the reference writes a status line. The Live Sample shows the reference theme, palette, and font in its own block. The Control States card shows all six states. Open #dev?modal=designSystem&tab=settings.

• Section, row, hint, and mode copy comes from the production components, so the reference and Settings cannot drift. Reuse does not certify that copy as fully ASD-STE100 compliant.
• Unverified: the card descriptions, the Live Sample description, and the three status lines have terminology review only; vocabulary and grammar evidence is not recorded.

Purpose: Let a screen switch between Simple and Advanced, and say what each mode shows before the choice.

Use ModeSelect. Settings uses it, and so does the World Editor's desktop app bar with its own wording.

• Keep the trigger 7.5rem wide in both modes. It shows the mode's name only, so the controls beside it never shift.
• Give each mode a second line in the list. The caller supplies the lines: Settings says "Just the essentials" and "Every setting".
• Show a small primary dot on the trigger's corner while Simple hides a setting that is off its default. The dot has an accessible name and a tooltip. The caller supplies both through hiddenNotice, and passes nothing when nothing is hidden.
• Forward the ref and every extra attribute to the trigger. Tutorial notes, tour anchors and Take Me There targets land on it.
• Keep the trigger in the same place in the tree when the dot appears. A remount drops keyboard focus.

Purpose: Keep long-form source editing dense while making the rendered result one clear switch away.

Density: Compact controls, comfortable content. Toolbar buttons use the production 1.75rem control height and one-unit gaps; the editor uses the label text role (0.875rem, 1.25rem line height) with 0.75rem horizontal and 0.5rem vertical surface padding, plus a substantial scrollable work area.

• Put the field label above the toolbar so the complete toolbar can use the control row.
• Keep common inline actions visible: bold, italic, strikethrough, inline code, and blockquote.
• Group highlight, heading, list, and insertion choices as split buttons. The face runs the current action; the chevron opens the group.
• Keep each split button visually joined, including its internal divider. Put the formatting group at the left and history at the row end; one hairline separates history from the view controls.
• Put Edit and Preview in one two-option selector. The selected view uses the shared active-tab treatment.
• Use realistic content that includes headings, links, emphasis, lists, tasks, quotes, tables, and code. Keep the editing area bounded so long prose demonstrates vertical overflow.
• Keep demonstration text in local component state. A reference editor must not save authored data or call an endpoint.

The face starts with the first action in its group. Choosing a dropdown item applies it and makes it the face's current action for the rest of that mounted editor session. Toolbar presses retain editor focus and selection, so formatting applies to the selected text and leaves the transformed range selected.

At desktop widths, the toolbar stays compact and wraps only when its container requires it. A sufficiently wide full-screen editor can place Edit and Preview side by side. At mobile widths, controls wrap without horizontal page overflow; tapping the inline editing surface opens the production full-screen editor, where Edit and Preview become swipeable panes with position dots.

The live Markdown reference reuses the complete production editor. It demonstrates the compact groups, separators, split-button current actions, long-content overflow, local editing, and rendered preview without a showcase-only toolbar.

In prompt editors, a chip's prepend and append text appears inline with its exact spaces and line breaks. Show a highlighted ↵ only on otherwise empty affix lines, without adding it to the stored text. Highlight that text with the chip's color using TINT_MARK_CLASS and tintMarkStyle from previewTint.ts, the same translucent treatment used in Preview. Preserve the surrounding text color. Do not add a section label or side rule.

The highlight and pill belong to one token. Selecting either opens the chip's options; editing Prepend or Append keeps focus in that input. Removing or dragging the chip includes its affixes. Spaces retain their spacing without a colored mark; newline markers use the affix highlight. The highlight's tooltip identifies the empty-value condition, and the options explain it on mobile. Read-only presets show the same text with disabled options.

Every prompt-variable chip offers a single-line Header above any Prepend/Append controls. Use the selected Format for a level-two Markdown heading, an uppercase Simple label, or paired XML tags. Keep raw Header text in the placement. Show generated boundaries with the same conditional highlight and chip options; move, copy, or remove the whole placement together.

Chips without body formatting show Format only while Header contains nonblank text. The first Header uses Simple, independent of the preset's style. Format changes the heading and wrappers while preserving the body. Clearing Header hides Format and remembers its selection through editing and sharing. Placeholder Chips keep their existing controls.

Consecutive headed chips share one authored line break. Automatic header spacing stays attached to its chip in Edit, with a ↵ marker on otherwise empty lines, and supplies section spacing in Preview and the AI request. Header, Prepend, Append, and XML closing tags remain visible in Edit. Removing a chip from a sequence removes its empty line. A Header adds one blank line between rendered sections; a chip without a Header adds no section spacing. Blank values and the exact N/A sentinel omit the whole headed section. Content and affix whitespace remain authored text.

Persona, Location and Entities use plain text for Name, including in Preview. Disable Format for Name only when Header is blank, through the shared read-only axis pattern. Clearing Header retains Format and affixes.

Open #dev?modal=designSystem&tab=prompt-chips for the production-backed Prompt Chips reference. Its local sample covers Header, present and absent Persona values, and read-only editing without saving settings or calling a model.

Built-in Placeholders (Player Name, Character Name) keep the chip shape and accent. Each carries a leading Sparkles icon from BuiltinMark in the palette, the { menu, and the field.

A blueprint chip keeps the chip shape and its placeholder's accent. It carries a leading LayoutTemplate icon, the Blueprint element icon, from BlueprintMark in the same three places. Link2 keeps the linked-copy meaning. The showcase's Blueprint Chips card shows it.

• The palette and the { menu list them first, under a quiet Built-in heading.
• A placed Built-in chip opens no Chip Options. Its tooltip says what it becomes.
• A palette chip that the focused field refuses stays in place, dimmed, so the strip doesn't reflow.

Preview reads each Built-in chip by one rule:

The Prompt Chips reference's placeholder palette sits over a sample entity, Oren, so it lists both Built-in chips. Its Entity Description field belongs to Oren, and its Preview shows Character Name as Oren. Description and Notes are world text, so Character Name stays dimmed while one of them holds focus.

Drag a palette chip into an editable field to create one placement at the drop caret. Drag a placed chip within its field to move it, including its conditional text. Click insertion remains available at the remembered caret. Undo and Redo restore each committed operation.

Both use the same drag image, insertion indicator, drop handling, and cleanup. Cancellation and unsupported drops preserve the document. Read-only fields and Preview reject edits; placed chips do not move between fields or token families.

The Prompt Chips reference includes production prompt and placeholder editors with local state. Use its empty Notes field to check palette targeting, and its Read-Only control to check protected states. Shared behavior lives in the drag source, field registration, and drop handling. Both real screens run the same browser contract.

• The Built-in Placeholder chips Preview rule and the reference note use short active sentences and the guide's terms: entity, owner, label, Preview.
• “Entity Description” is a field label in title case. “Oren” and “Oren keeps the lamp lit.” are sample content and keep their own voice.
• Unverified: the rest of this pattern's copy predates this review and has terminology review only.

Purpose: Let readers scan community creations through their artwork while keeping the name, author, summary, social proof, and secondary actions easy to find.

Density: Compact. Artwork dominates the first impression; the details beneath it fit a description, one three-part count row, and up to two rows of tags before an overflow disclosure.

• Keep the creation title and author on its thumbnail over the shared title scrim. A long title expands to three lines on hover and keeps its full value in a tooltip when clipped.
• Put a concise description below the art, then align likes, downloads, and comments across one row.
• Put tags after counts. Show two rows in the resting card and disclose the remainder on hover rather than making every card taller.
• Keep the contextual download control in the art’s top-right corner. Other secondary actions remain in their established contextual placements.
• Give entities and Avatars the split layout. Their art is tall, so it sits at 2:3 on the left and the text sits on the right. The title and author move to the top of the art, and the art’s actions move to its bottom-right corner. A split card is about twice as wide, so the Entity and Avatar grids show three per row on wide screens, two on medium screens and one on phones.
• Give an entity or Avatar with no image its Morph art (EntityPlaceholderArt): its first letter in goo, in a hue picked from its id. Never a gray box or an icon.
• Give an entity or Avatar listing that the server flags as a stand-in its Morph art too. The card never fetches or shows the stored file.
• Use controlled callbacks in the showcase. The reference never opens a listing, publishes, downloads, deletes, or changes a like outside its local state.

At desktop widths, cards form a two-column reference grid. At narrower widths they stack at one column while preserving the image-first order, count row, wrapping tags, and minimum touch targets. Title expansion and image actions retain keyboard access; a focused image action becomes visible with the shared focus ring even without hover.

The live Community cards reference uses the production card and shell with neutral, controlled fixtures. It covers long titles, descriptions, tags, counts, selected likes, pending actions, keyboard focus, and update affordances without touching community data. The Like Counts row shows a public, a private, and a hidden count, and a hidden count that stays pressable. One Avatar card shows the split layout. Another Avatar card is a flagged stand-in and shows Morph art. Two entity cards show Morph art: one has no image, and one is a flagged stand-in with a stored thumbnail.

• The flagged stand-in line in Composition and the reference description use short active sentences and the guide's terms: entity, Morph art, stand-in.
• The stand-in fixture's name, description, and tags are sample content and keep their own voice.
• Unverified: the rest of this section's copy predates this review and has terminology review only.

Purpose: Search and replace across a structured editor without taking over the editing workspace.

Density: Compact. The bar has two layouts. The floating bar keeps its search, options, counter, navigation, and close actions on one row, and replace expands beneath search. The docked field holds search, counter, navigation, and an expand button in one 32px row in an app bar. Neither layout changes the surrounding editor layout.

• Place the bar over the upper-left of a bounded editor workspace. Keep enough document context visible to show which field receives the current match.
• Join Match Case and Match Whole Word to the search input. Their pressed fills show option state without adding separate labels to the row.
• While a box holds text, show its clear X after any cell whose width changes with the text, and before fixed cells. In the floating bar it sits before the match toggles and the mode swap; in the docked field it follows the badge and the counter and precedes the match navigation. Find's X is Clear Search; the text Replace box's X is Clear Replace. Clearing keeps the bar open and its layout as it is.
• Keep Previous Match, Next Match, and Close Find as separate actions. Do not combine navigation into one split control.
• Put replacement in an expandable second row. Align its input with search and keep Replace and Replace All together at the row end.
• Show the match position and total beside navigation at desktop widths. Move the counter below the controls on narrow screens so the search input keeps useful width.
• Show the current tab, item, and field as a compact breadcrumb when room permits. The editor itself remains the visible source of truth for replacement results.
• Confirm Replace All before changing text. Keep the result notice factual and based on the completed action.

Docked layout (the World Editor's desktop app bar):

• The field holds a search icon, the input, the counter, Previous Match and Next Match as cells, and Show options and replace as the last cell. It searches as you type.
• An option that is on shows as its icon in the field, in a tinted button before the counter. Selecting it expands the bar.
• Expanding grows the full bar over the header from the field's position: 36rem wide, centered on the field, with its search input where the field was. The field's slot keeps its width and height, so the header never reflows.
• The expanded bar always shows the replace row and the current-field breadcrumb. Its disclosure is Collapse to search, and its close action is Close Search.
• The query and the options carry across expand and collapse.

On mobile, the production editor opens Find with Ctrl+F and Find and Replace with Ctrl+H. The search input receives focus when the floating bar opens. Enter moves to the next match, Shift+Enter moves to the previous match, and Escape closes the bar. Expanding Replace and selecting navigation actions leave focus on the action that ran. A host must return focus to a stable opener when the bar closes; the live reference demonstrates that behavior.

On desktop, the World Editor's app bar holds the docked Search World field (see Surface App Bar). It never takes focus when it mounts.

• Ctrl+F focuses the field. Ctrl+H focuses it and expands it. Ctrl+F while expanded focuses the expanded field and leaves it expanded.
• Expanding and collapsing move focus to the field of the layout now shown.
• Escape and Close Search clear the search, collapse the bar, and drop the match marker. Focus returns to the control the author was in before Ctrl+F or Ctrl+H. When the author clicked or tabbed into the search instead, focus stays in the cleared field.
• The recorded control is dropped when focus leaves the search. The Replace All confirmation and the placeholder picker count as part of the search.

At desktop widths, the floating bar shows the counter and current-field breadcrumb; the World Editor uses it only on mobile. The docked layout is desktop only. The expanded bar never grows wider than the window, less 2rem. At mobile widths, it uses the same controls and grouping, moves the counter beneath the main row, hides the breadcrumb, and stays inside the editor width. The editor context stacks its section list above the local fields without horizontal page overflow. Long queries and document values remain constrained by their inputs.

The live Find reference uses the production bar and matching code against local component state. Search, navigation, option changes, and replacements update a realistic sample document without using authored-world storage or the clipboard. Its Reference Layout control switches between the floating bar and the docked field in a sample app bar. In the docked layout, Find acts as Ctrl+F and Find and Replace acts as Ctrl+H.

The new description states the reference purpose. Action labels use the production Find and Replace terminology, and dynamic status text reports the selected field or the completed local action. Sample names and prose are authored content and keep their own voice. Accessible names receive the same role review as visible controls. Standalone label-fragment grammar remains unverified under the Writing Guide, and reuse here does not certify the existing production Find, replacement, confirmation, or notice copy as fully ASD-STE100 compliant.

Purpose: Give every search, find, and filter box the same look and the same one-step clear.

Density: Matches the input it replaces. The default field is 40px high. The sm field is 32px high, for compact rows.

• 🔎 Icon first. A search icon sits at the start of every search field. It tells a search box from a text field.
• ✖️ Clear Search X. The X shows only while the box holds text. An empty box keeps no slot for it, so a narrow field keeps its width for text.
• ↩️ Clear. Selecting the X empties the box, applies the empty search at once, and returns the cursor to the box.
• ⌨️ Escape. Escape never clears the field. The field blocks the browser's own Escape clear, so only the host acts: a dialog still closes, and a host that collapses on Escape still does.
• 🚫 Native cancel. The browser's own cancel button never shows, so a box never has two X's.
• 🧱 Other trailing cells. When a host adds its own controls along the right edge, the X follows any cell whose width changes with the text, such as a match counter, and precedes fixed cells. The X then keeps one position while the author types.
• ♿ Accessible name. The X is Clear Search everywhere. The input keeps the searchbox role. A picker's command input keeps its combobox role.
• 🖱️ Pickers. In a command picker the X is mouse-only and stays out of the Tab order. The picker selects the highlighted item on Enter, so a focused X would pick instead of clear. Backspace clears from the keyboard.

Open #dev?modal=designSystem&tab=search-field for both heights in both themes.

Clear Search follows AP title case. The placeholder repeats the field's accessible name, such as Search Places.

Purpose: Help an author choose a stat Code Template, supply its parameters, inspect the generated code, and insert the result.

Density: Dense and task-focused. The dialog reserves one bounded window for a categorized library and a scrollable detail pane. Fields use the production control height and compact two-column grid where width permits; the generated code remains close to the parameters that change it.

• Put Built-In and My Templates in a categorized sidebar at desktop widths. Use one template selector on mobile so the detail pane keeps useful width.
• Draw each library row with CompactSelectionRow and its check mark off. The selected template takes the primary fill; a hovered one takes the neutral hover, so the two never share a color. The Settings Tools list uses the same row.
• Keep the selected template's name and explanation above its parameter form. Use the template declaration as the source of fields and defaults.
• Put required stat choices and numeric parameters in the same form. Pick a stat, trait, entity or placeholder with the Breadcrumb Picker. Keep a short fixed set, such as a daypart, in a Select. Show validation beside the affected field and connect it to the control's accessible description.
• Update the generated code preview as parameter values change. Keep the preview bounded and scrollable for long code.
• Freeze the footer below the scrolling panes. Keep Duplicate or Edit and Delete beside Insert Code according to template ownership.
• Disable Insert Code while any slot is missing or invalid. Ask for confirmation before replacing existing stat code.

At desktop widths, the fixed-height dialog uses a 15rem library beside the detail pane. The panes scroll independently, so long template names, explanations, forms, and generated code do not move the footer. At mobile widths, the dialog fills the usable viewport, replaces the sidebar with a selector, stacks parameter fields, and keeps actions wrapping within the footer.

The live Code Templates reference passes neutral sample stats and an in-memory personal-template repository to the production dialog. Insert Code updates a visible local sample target. Duplicate, edit, delete, import, and export remain available, but their reads, writes, and file transfers stay inside the mounted reference and never use the author's template database or files.

New reference instructions name the visible “Open Code Templates” action and local outcome messages report only completed demonstration changes. Code Template, stat, parameter, and generated code retain their product or technical meanings; sample stat names and template prose are authored demonstration content. Accessible labels keep validation in descriptions rather than changing field names. Standalone label-fragment grammar and complete technical-term admission remain unverified under the Writing Guide. Reuse does not certify the existing production dialog copy as fully ASD-STE100 compliant, and code tokens and stat sandbox semantics are unchanged.

Purpose: Edit spatial relationships while keeping nested containment distinct from authored travel.

Density: Compact floating controls around a large, bounded work area. Group frames contain their children; labels and arrows share the remaining space rather than becoming a separate list.

Opening, zooming, or fitting the canvas never rewrites manual positions. Auto Arrange acts on the selected Group, or a selected child's Group; Auto Arrange All acts recursively when nothing is selected. Preserve these scopes and the existing drag/nesting and touch gestures. These are authoring commands, not background layout behavior.

The reference keeps the embedded canvas inside a bounded editor panel. At desktop widths, fullscreen places search at the upper left, tool groups along the top, zoom controls at the lower left, and the minimap at the lower right. On phones, the toolbar scrolls horizontally and search moves beneath it. Use full screen and search/reveal when the whole-map overview makes names too small to read.

The reference preserves production density and panel placement. Dense labels can overlap the graph, and the floating Connection inspector can cover other controls at narrow widths; close it to return to those controls. These are reference limitations to review, not patterns to copy into new surfaces without judgment. Theme, palette, font, reduced-motion handling, and touch behavior come from production. Detailed checks and writing limits live in the review record.

Purpose: Keep related actions close to the item they affect without crowding its resting surface.

Rule:

• Every row is one of two kinds. A row that answers "which one?" belongs to a titled set. A row that does something belongs to a flat action set.
• A title is the flyout handle. A titled set can fold into a flyout. The title becomes the flyout label.
• Action rows never fold. They carry an icon to stay apart from set rows.
• Separators divide kinds, not topics.
• Arranging sections, such as Tile Size and grouping, come first.
• The item's own actions form the final section. Check for Updates, Publish, and the default-persona action are item actions.
• Each item action carries an icon. Delete is last in the final section.
• A context-dependent action section sits where the fixed action section sits. It keeps its icons.

Density: Compact. Menu rows use the production label size and padding; section labels use the smaller meta role. The group shortcuts are bounded, so ordinary menus do not need scrolling.

• Start with the reversible preference section. Tile Size uses one radio group and keeps the selected-size checkmark visible.
• Align destination text with the action-label column, without repeating folder icons. Keep full accessible names and truncate shortcuts on one line; the picker exposes their full text.
• Label the grouping section Add To Group. Show the first three eligible Groups in existing order, excluding the current Group before taking three.
• Follow shortcuts with FolderPlus + Create New Group… and FolderSearch + Add To Group…. The full chooser is last in this section. Keep explanations in the dialog or help.
• Separate meaning changes with semantic separators: preference, grouping, and the item's own actions.
• End with the item's own actions. Each tab offers only the actions that apply to its items.
• Put Delete last in that section. Keep its production trash icon and destructive color. Delete opens the existing confirmation.
• Keep Group names in their authored voice. Group tiles retain Open Group and Delete Group; assigned items retain Remove From Group in a separate section.

On desktop, right-click a tile or focus it and use Shift+F10 or the Context Menu key. Arrow keys move through actions, Enter activates one, and Escape closes the menu and restores focus to the tile. A primary click outside dismisses the menu without activating what is underneath.

On a touch screen, press and hold the tile. Moving the held finger far enough to begin a drag closes the menu; tapping outside dismisses it. Radix positions the bounded menu inside viewport edges. At short heights, enlarged text, or zoom, the shared ScrollArea keeps every action reachable with the same arrowless scrollbar as the picker.

The live reference uses the production menu against the production entity card face. The sample is a persona entity, so its final section shows Check for Updates, the default-persona action, and Delete. Tile size, Group selection, Group creation, removal, update checks, the default persona, deletion, and restoration stay in mounted React state. The sample never reads or writes Main Menu preferences, library records, storage, account data, or authored worlds.

• Unverified: “Right-click the sample entity. On a touch screen, press and hold the sample entity. For keyboard access, focus the sample entity. Press Shift+F10 or the Context Menu key.” gives one action per sentence and names its target, but complete technical-term admission for “Right-click,” “touch screen,” “keyboard,” Shift+F10, and Context Menu is not recorded.
• Unverified: “Restore the local sample to continue.” states the next local step, and “Restore Sample” names its action. “Grouped library tile actions” is a compact selector phrase. Vocabulary and grammar evidence is not recorded.
• Unverified: status cases are “The tile size is small/medium/large.”, “The sample group is {Group name}.” or “The sample is not in a group.”, “Check for Updates has not run.” or “Check for Updates ran on the local sample.”, “The sample is/is not the default persona.”, and “The local sample is available/deleted.” Each is one statement in the present or past simple tense. Vocabulary and grammar evidence is not recorded; interpolated Group names are user-authored fixtures and retain their own voice.
• Unverified: the accessible label “Sample entity: Mara Venn” has terminology and formatting review only; standalone label-fragment grammar is outside the listed evidence. “Mara Venn” is a fixture name and keeps its own voice.

Tile Size, Add To Group, Create New Group, Remove From Group, Check for Updates, Set as Default Persona, Clear Default Persona, Default, Delete, Delete Character, Cancel, and Confirm reuse production copy so the reference and Main Menu cannot drift. The confirmation says “character” where the terminology rule says “entity”; the reference keeps it for parity. Reuse does not certify those labels or the confirmation as fully ASD-STE100 compliant. In particular, the existing Delete label remains unchanged for production parity; this ticket does not perform the app-wide terminology decision that would be required before replacing it.

Use it when an item's action goes somewhere the player may not expect. Today that is an AI request: the line names the endpoint that gets it.

Composition:

• The label comes first. A muted line in the meta size sits under it: "Sends to Default · default".
• The line truncates on one row. The menu keeps its width.
• Items with nothing to add keep one line. Do not add a blank second line to line them up.
• The line is described, not named. The item's aria-label is the label alone, and aria-description carries the line.
• A button has no room for the line, so its tooltip shows it under the label instead. Send and the World Editor's generate buttons do this.

Production mapping:

Re-generate Narration, Re-generate Stats, Re-generate Choices, and Write Scene Tags carry the line, in the turn's More menu and its right-click menu.

States:

Writing review: the line follows STE. It is one fixed form, "Sends to · ", with the preset and model names in their own spelling. It never explains the request or repeats the label.

Purpose: Choose one destination from a simple list without reserving room for absent controls.

Use CompactSelectionRow for simple choices. Its production values are the authority: 32px minimum height, 8px horizontal and 6px vertical padding, with no inter-row gap. Typography and wrapped names can increase row height. Do not add empty grip, icon, metadata, or action columns. Rich editor and save rows keep their useful controls and distinct density.

On mobile, preserve the same text-first row and minimum height. Wrapping increases the touch area instead of clipping names. Sorting and secondary row actions belong to richer lists, not this pattern.

Purpose: Keep an unbounded destination list out of the quick-action menu.

LibraryGroupPicker composes the shared Dialog, Input, CompactSelectionRow, ScrollArea, and DialogFooter. It names the affected item, focuses Find a Group after menu teardown, and shows all Groups in their existing order. Search filters names without sorting. The current assignment has selected styling and a check; choosing it closes without an assignment write.

• Choosing another row moves the item by stable Group ID and closes the dialog. Existing duplicate names remain distinct destinations.
• Cancel, Close, and Escape leave the library unchanged and return focus to the opener. A grid that loses its original tile provides a focus fallback.
• Create New Group… opens the naming form from either entry point. Blank names and trimmed case-insensitive duplicates are rejected; corrections can be submitted with Create Group.
• Keep search and footer outside the bounded destination pane. The pane uses the shared 10px arrowless scrollbar and reserved gutter. At exceptionally short heights or enlarged text, the outer shared scroller also reveals dialog controls.
• Keep Cancel before Create in markup and together in the footer. The shared mobile footer stacks the affirmative action above Cancel; desktop places Cancel to its left.

Open #dev?modal=designSystem&tab=context-menu&subtab=picker or use subtab=create for the naming form. These routes use local demonstration state and production components. They do not change stored library data or ship a prototype route.

New functional labels and error/status sentences follow the Writing Guide by role. Authored names retain their voice. The review record records behavior evidence and unresolved STE limits; brevity does not certify label grammar.

Purpose: Pick one item from a list of world content, and show where each item lives.

When to use it: Lists of world content (stats, traits, entities, placeholders) use the Breadcrumb Picker. A short fixed option set, such as a daypart, keeps Select.

It differs from the Searchable Group Picker. That pattern is a Dialog for an unbounded destination list with create and rename. The Breadcrumb Picker is a popover form control.

• Trigger. A field that looks like a Select trigger. It shows the picked name, or the slot's prompt such as "Pick a trait…". A caller can supply its own trigger, such as an outline button. That popover has a fixed width of 20rem.
• Search. The search field always shows. It matches a row's name and its full breadcrumb, with no sorting.
• Rows. Rows keep the order of the matching editor tab. A group is never a row. It shows only as a breadcrumb segment.
• Hint. A row can carry a right-aligned hint that is not a location. A hint never collapses and has no tooltip.
• Caller page. A caller can replace the list with its own page, such as Add Requirement's owner page.
• Check column. A picker with a value reserves a check column. Every row that holds the value shows a check.

• The name comes first and keeps its width up to about 65% of the row. Past that it truncates.
• The breadcrumb sits right-aligned in meta text and truncates.
• One or two segments show in full. Three or more show as First › … › Last. The rule counts segments, never width.
• A hover tooltip on the row shows the full path. A row with no breadcrumb has no tooltip.
• A world row with no group shows World. A list with no groups, such as stats, shows no breadcrumb.

Arrow keys move through rows, Enter picks the row, and Escape closes the picker with no change. A field trigger's popover matches the trigger width, with a minimum of 16rem, and stays inside the viewport. Long lists scroll inside the popover.

Open #dev?modal=designSystem&tab=breadcrumb-picker. The reference uses sample traits and local state. It never reads or writes a world.

Prompts such as "Pick a trait…" and the "Nothing to pick" and "No matches" lines are functional copy with no period. Sample names are authored content and keep their own voice. This review is local. It does not certify STE compliance.

Purpose: Preserve the information and actions needed to identify, edit, order, and manage complex items.

Density: Content-led. Rich rows can use the World Editor's 56px floor, inter-row spacing, grip, metadata, selection, and actions. Save rows grow when names wrap and keep their timestamp, game time, reorder grip, and actions. Do not compress either family into the 32px compact-selection pattern.

Keep controls that change the collection outside its scrolling pane when they must remain reachable. The live Save/Load reference keeps Save Name and Save above the list; the World Editor reference keeps the selected item's editor beside or below the list. Do not nest a second vertical scroller merely to imitate a scrollbar.

At desktop widths, an editor list can sit beside its detail controls, and the two reference families can share a two-column showcase row. At mobile widths, the references stack. The selected-item editor follows its list, while Save Name and Save stack above the save pane. Long authored names truncate only where a trailing editor control must remain visible; save names wrap because their metadata and actions identify a distinct saved state. Keep every action inside the card width and retain useful touch targets.

The Rich Lists reference uses the same production row components as World Editor and Save/Load. Its fixtures contain long names, realistic types, timestamps, game time, and an Autosave. It never reads or writes authored worlds, saved games, IndexedDB, local storage, files, or endpoints.

The reference descriptions, control labels, dynamic status, and accessible action names were reviewed by role through the Writing Guide. Authored character, location, and save names retain their voices. Standalone label grammar, complete technical-term admission, reused production copy, and dynamic substitutions remain unverified; the review record records those limits.

Use ScrollArea for bounded vertical content when it preserves the surface's behavior. It is the shared World Editor appearance: a 10px vertical track, rounded theme-derived thumb, no up/down chevrons, and an 11px viewport gutter so the overlay thumb does not obscure content.

• Keep one vertical scrolling owner per pane. Preserve wheel, touch, keyboard, and focus-reveal behavior.
• Give the pane a definite height, a flex-resolved height, or a maximum height on the ScrollArea itself. The root is a flex column, so its viewport stops at that height. A maximum height on an ancestor works only through a flex column down to the ScrollArea, such as flex-1 min-h-0 on it.
• Keep search, primary inputs, and footer actions outside the list viewport when they must remain reachable while the collection scrolls.
• Preserve horizontal scrolling where content requires it. The shared viewport assumes vertical content and forces its content wrapper to block layout; do not apply it blindly to code, tables, or other horizontal scrollers.
• Native text editors, editable regions, canvases, virtualizers, drag lists, and popover-hosted scrollers can have selection, autoscroll, wheel-lock, or focus contracts. Match the appearance only where supported, and do not wrap them in a nested ScrollArea to hide native chrome.
• Use type="always" when the scrollbar itself communicates that a bounded reference can scroll. Other production surfaces can retain the component's normal visibility behavior.
• Set focusable when the pane holds only text, such as a policy or a code view. Keyboard users can then tab to the pane and scroll it with the arrow keys.
• Put a fixed or absolute frame on a wrapper element. Radix sets the root's position inline, so a position class on ScrollArea has no effect.

The scrollbar and list inventory groups remaining native and specialized surfaces by limitation. It is follow-up scope, not authorization for an app-wide migration.

A test, scrollGuard.test.ts, fails when a source file under src holds a native overflow scroller (overflow-auto, overflow-y-auto, overflow-x-auto, overflow-scroll, or the inline style). The file passes only when it carries one allow comment. Importing ScrollArea exempts nothing, so a file that mixes both needs the comment too. The check works per file, so one comment covers every native scroller in that file. Put the comment on its own line. The end of the file keeps it clear of other edits:

// scroll-guard: allow popover-list: popover-hosted; dialog scroll lock can intercept wheel input

The name after allow is one row of the table below. The text after the colon says why this file relies on it.

Remove the comment when the file holds no native scroller.

Purpose: Make acceptance predictable by keeping a negative action before its affirmative partner.

Density: Compact. Keep the pair together in the footer action area; unrelated navigation or utility actions need their own justified grouping.

• Order a pair as negative | affirmative: Cancel or decline on the left, then acceptance or continuation on the right.
• Keep the pair together. Do not place unrelated controls between the negative and affirmative actions.
• Treat placement and color as separate semantics. A destructive affirmative action keeps the destructive variant in the right-hand confirmation position.
• Preserve existing labels and operation semantics. This rule changes neither what an action does nor whether it requires confirmation.
• Put the negative action before the affirmative action in keyboard order. Do not use visual ordering to create a keyboard sequence that disagrees with the controls.

At sm and wider, the shared footer renders the negative action on the left and the affirmative action on the right. Below sm, the shared reverse-column layout puts the affirmative action above the negative action. Keep negative-first DOM order so Tab reaches Cancel or decline before acceptance or continuation at every size. When a footer intentionally constrains available width, add reverse wrapping to that footer so long labels or enlarged text put the affirmative line above the negative line. Buttons keep their labels intact, and the footer must remain inside the dialog without horizontal page overflow.

Closing through Cancel, Escape, or the close control changes no data and returns focus to a valid opener. Confirmation changes only the operation named by the dialog. The live reference keeps both outcomes in mounted sample state and never writes authored worlds, saves, library data, or settings.

The live Footer Actions reference demonstrates Cancel | Create Group and Cancel | Delete with production dialogs and footer controls. A constrained example uses the established Download and Embed — Works Offline label to demonstrate wrapping. Create Group starts disabled, keyboard focus moves through the negative-first action order, and the destructive example preserves its semantic treatment.

The reference descriptions and local status messages were reviewed by copy role against the Writing Guide. Behavior claims were exercised against the isolated callbacks. Standalone label grammar, complete vocabulary admission, and reused production labels remain unverified; the review record lists those limits. Reuse does not certify the production copy as fully ASD-STE100 compliant.

Keep setting descriptions verb-first or in second person, no more than 12 words, with no period on a one-sentence line. Put necessary additional detail behind HintInfo. Do not claim ASD-STE100 compliance from length or tone alone; use the vocabulary, grammar, meaning, and evidence process in the Writing Guide.

A field reads top to bottom as label, help, control. The label names the field. The Hint sits directly under the label and says what the field does, in one line, using only labels and registered terms as the Writing Guide's help-line test requires. The control comes last. A HintInfo goes beside the label, never under the control. A control never has a Hint after it, so a reader always knows what a field is before reaching it, and a tall control never pushes its own explanation out of view.

Two placements sit beside a control instead of above it:

• A checkbox row puts its caption after the box and its Hint inline after the caption, as the trait panel's Enabled by Default does.
• A status line under a list, such as an entry count or a band's covered range, is not help. It stays after what it reports on.

Apply that guide by role to all approved patterns: settings labels and information, markdown toolbar names and instructions, card action names and status messages, Find controls and status text, Code Template fields, validation and actions, and context-menu instructions, action labels and local status. Accessible text receives the same review as visible text. World introductions, creation titles, descriptions, tags, and sample Group names are authored content; these samples retain their own voice. Existing production copy is not certified by reuse in the showcase.

The foundation's review record records copy findings, evidence limits, and the two workflow demonstrations. Existing-screen alignment remains separate work.

Purpose: Split one editor detail panel's fields into named tabs, so a long panel fits one screen without hiding anything behind a scroll.

Rule:

• The strip is one row of equal columns. Every tab gets the same width, whatever its label's length.
• Each tab carries an icon and a name. The name is always on aria-label, so it reaches assistive technology and role queries whether or not it is drawn.
• The label gives way to its icon wherever the pane is narrow. The icon never shrinks.
• The strip is named, because the editor's own strip is on the same screen and can carry a tab of the same name.
• The strip is a fixed header row. Only the tab's body scrolls, below it, so the tabs never leave the panel.
• Mode-only tabs are filtered out of the registry before the strip renders, not disabled in place.

Density: Compact. The strip is 40px tall at every width. Labels use the production label role; hiding one does not change the strip's height, so the panel below it does not move.

• One registry per panel holds the tabs in order, with the value, name, icon, and any mode flag. The strip renders from it and the dev-router ledger is guarded against it.
• The chosen tab belongs to the editor, not the panel. These panels remount per selected item, so panel-held state would reset down the list.
• When the chosen tab is unavailable in the current mode, the panel shows its first tab.

Each panel groups its fields by what kind of thing they are:

The library entity editor lifts Traits and Placeholders onto its own top strip, so its Entity sub-strip shows Profile, Descriptions, and Openings.

Two panels can lose their strip: Simple mode leaves the stat panel and the dictionary entry panel a single tab, which is no choice to offer, so each renders that body bare.

The dictionary entry panel splits by cadence rather than height. The panel is not tall, but its matching rules are set once and then sit between the keywords and the value on every later visit. Details holds Name, Trigger Keywords, and Value; Matching holds the rules. Whole Words and Case-Sensitive stay on Details on purpose: they are the only two matching switches Simple mode shows, they modify the keywords they sit under, and keeping them there is what leaves Simple one tab.

It is also the only one of the five with two hosts. The World Editor holds its tab in the editor's per-panel slot; the library's dictionary editor has no such slot and holds it in modal state for as long as the modal is open.

A tab name may repeat across panels, and may match a tab on the editor's own strip. The strip's own name keeps them apart: the trait panel's Stats tab and the editor's Stats tab both read as "Stats", and only "Trait Fields" says which strip you are on.

The pane holding these panels is not monotonic in viewport width. Below md the panel is the full-width detail sheet. At md the editor splits and the panel takes half of it. A 767px window therefore gives the panel about 715px, and an 820px window gives it about 347px.

So the label steps on at sm, off at md, and on again at xl. The entity strip's five tabs get 63px each in a 375px sheet. "Placeholders", the longest label, is 106px wide with its icon. Two tabs in the same sheet get 157px each, which is why the dictionary entry strip is the one case the label would fit. It hides anyway, because a strip that keeps its labels at a width where its neighbors drop theirs reads as a different control.

The same shortfall returns in the half-width pane between md and xl: the five tabs get 62px at 768px, 68px at 820px, and 88px at 1024px. At xl they get 114px, so "Placeholders" fits with less side padding. Between sm and md they get 116px to 141px.

A container query would state this directly. @tailwindcss/container-queries is not a dependency, and these two breakpoints track the layout's own md switch exactly.

The library entity editor is the one host with other breakpoints. Its strip sits beside a Tags column, so the strip is narrow until lg and then only widens. It passes labelClassName="hidden lg:inline" to PanelTabsList. The library-editor-widths.spec.ts check fails if a drawn label overflows its trigger.

The live reference renders four of the five production strips against their own registries. It leaves the stat panel out because that strip's width case is the trait panel's, three equal columns, and the reference exists to show the widths. It holds the chosen tab in mounted React state and never reads or writes authored worlds, saves, library data, or preferences.

• Tab names come from the four production registries, so the reference and the editor cannot drift. Reuse does not certify those names as fully ASD-STE100 compliant.
• Unverified: the section headings "Six Tabs" (entity), "Five Tabs" (location), "A Tab Name the Editor Also Uses", and "Two Tabs, Two Hosts", and the four Meta lines, have terminology review only; vocabulary and grammar evidence is not recorded.
• Unverified: the entity bodies for Traits and Openings, "The entity's own traits and groups, each one opening on the editor's Traits tab" and "The entity's openings, drawn when a player starts at one of its locations", and the location body for Openings, "The location's openings, drawn when a game starts at this location", have terminology review against the production tab contents only; vocabulary and grammar evidence is not recorded.

Purpose: Pick a view's top-level tab on mobile from one bar that names where you are, so the tab list takes no room until you open it.

Rule:

• The bar is full width, under the header. It shows a tree icon, the label Sections, the current tab's name at the right, and a chevron that turns when open.
• Opening it expands the tab list below the bar with a grid-rows reveal. The body is inert while closed.
• The landing tab is a lone row at the top. A plain line splits each group from the one before it, with no caption, so the order and splits match the Nav Rail. A group with no visible tab draws nothing.
• A pick closes the bar and returns focus to it.
• The list is a real tab list in a vertical tab root with manual activation, so the arrow keys move through the open list without picking.

Density: Comfortable. Each row is 44px tall, a touch target.

• One registry holds the tabs in order, each with its value, name, icon and group, and the groups in order. The landing tab has no group. A helper returns the landing slot first, then the groups one mode shows, and drops the empty ones.
• The disclosure is shared with the Enter World Categories bar, so both screens open and close the same way. Both lists share the selected and hover states.
• Desktop uses the Nav Rail in the list card, fed the same groups. The bar is mobile-only.

The World Editor groups its tabs this way:

Community Creations has no landing tab. It groups Worlds, Entities, Dictionaries and Avatars, then Prompts, then Contest while a contest exists.

The group names are registry ids. The bar and the rail draw none of them. Each host names its tab list and gives the folding body its own id.

The live reference draws the production registry as the Sections bar, with a Simple and Advanced switch. It holds its tab and mode in mounted React state and never reads or writes authored worlds, saves, library data, or preferences.

• Tab names come from the production registry, so the reference and the editor cannot drift.
• Unverified: the reference's tab bodies and description have terminology review only; vocabulary and grammar evidence is not recorded.

Purpose: Navigate a surface's top-level sections from a rail inside the surface, so navigation reads as part of the panel and the section count can grow.

Rule:

• The rail is the first column inside the surface it drives, below the surface's full-width header. It spans that column's full height.
• It is a real vertical tab list. Each row is a tab named by its label, and the arrow keys move along the rail. The host's panels stay where they are.
• Groups draw in order, split by a plain line. A group with no tab draws nothing, not even its line. No group has a caption.
• The active tab takes the primary fill, the primary foreground text and medium weight, with a bar in the foreground color on the rail's edge. The others are muted, and a hovered one takes the accent background, so hover and selected never look alike.
• A toggle at the bottom collapses the rail to icons and expands it to icons with labels. The rail starts expanded. Each surface remembers its choice on this device. A failed read or write falls back to expanded with no error.
• When the host has no room, the rail draws collapsed and the toggle is disabled. The stored choice does not change, so the rail expands again when room returns.
• A collapsed row names its tab in a flyout on hover or keyboard focus. The flyout is the shared tooltip, with its delay. Focus that a click brings and a tap show no flyout. The disabled toggle still names itself on hover.
• When something replaces the panels, the rail stays drawn with every tab disabled. The selection is kept.

Density: Compact. The rail is 52px collapsed and 192px expanded, and each row is 36px tall.

• One row layout serves both states. The 18px icon sits 11px in, which centers it in the collapsed rail. The label clips in its own box as the rail narrows; no row changes layout.
• The width animates over 200 ms on cubic-bezier(0.2, 0, 0, 1). Labels stay mounted and fade on the same duration and curve. With reduced motion, both change at once.
• Each tab's accessible name is its label, which stays mounted in both states. The flyout does not name the tab again, and the icon is hidden from assistive technology. The toggle is named Collapse or Expand and reports its expanded state.
• The host's tab root wraps the rail and the panels with vertical orientation. The root owns the selection; the rail takes the active value only for its edge bar.
• The rail takes the same groups as the mobile Sections bar, so the two draw the same order and splits.

The rail is desktop-only. On mobile the Sections bar takes its place under the header. Below a host's width threshold the rail draws collapsed without a change to the stored choice. The World Editor's threshold is a 544px list card, the room its widest list toolbar needs beside the expanded rail.

The live reference draws the World Editor's registry as the rail beside sample panels, with No Room and Disabled options. It remembers its expanded state under its own key, formamorph.designSystem.navRail, and never reads or writes authored worlds, saves, library data, or a real surface's choice.

• Tab names come from the production registry, so the reference and the editor cannot drift.
• Collapse and Expand are labels in Title Case.
• Unverified: the reference's tab bodies, description, and option labels have terminology review only; vocabulary and grammar evidence is not recorded.

Purpose: Put a surface's identity, its everyday tools and its whole-surface actions in one row above everything they act on.

Rule:

• The bar spans the window above the surface's panels. Anything that belongs to the bar, such as the Authoring Tour bar, sits under it.
• Left to right: back, the title, then the surface's subject; the search field; the mode; the surface actions; the primary action last.
• The search field sits on the window's center line when space allows, and never overlaps the side columns. The bar splits into three equal columns, and the field is at most 26rem wide.
• The end column always fits its controls. When it needs more than a third of the bar, the field narrows to a floor of 10rem and moves off center.
• A plain line splits the mode from the actions after it.
• The bar shows no save-state text beside Save. The Save face is the only save signal: it shows Save, Saving…, Saved or Failed.
• The subject follows the title after a 12px muted chevron, in the body role, muted. A blank subject shows the title alone, with no chevron. A long subject truncates with "…" before the center group, and a cut-off one shows its full text in the shared tooltip.
• A list card's footer under the bar holds only the open tab's own actions, and draws nothing on a tab with none.

Density: Compact. The row uses the shared surface-header geometry: 12px sides, centered in 56px.

• The World Editor reads: back, World Editor, a chevron, the world's name; the Search World field; the History pill; the Mode Select; Optimize Images as an icon button in Advanced; the Test Bench; Save with its menu.
• The title is the surface's name. The world is the surface's subject, so its name follows the title. No tab's open item ever does.
• Save is a split button. The face saves, and the chevron opens a menu that holds Export World and the Autosave checkbox in both modes. A checkbox row toggles in place and leaves the menu open.
• Every Save label stacks in one grid cell, so the face is as wide as Saving… in every state. Saved uses the full success fill with success-foreground text and icon. After about 2 s it eases over 700ms to the muted Save. Failed uses the destructive fill and does not fade.
• A polite live region beside Save announces Saving, Saved and Save failed. Mobile's icon-only face swaps its icon the same way.
• Optimize Images shows a spinner while it runs, and its tooltip shows the progress.
• Tour anchors, tutorial notes and Take Me There targets ride the controls they always named.

The bar is desktop-only. On mobile the surface keeps its card header, and its footer keeps the world actions within thumb reach.

The live reference draws the World Editor's bar over sample controls and a sample world name. Its Save runs a short sample save through every state; Make a Change gives it something to save, and Fail Saves makes the next save fail. Every control changes only the reference's own state, and it never reads or writes authored worlds, saves, library data, or storage.

• The world's name is the author's text, shown as typed after trimming.
• Unverified: the reference's description has terminology review only; vocabulary and grammar evidence is not recorded.

Purpose: Let an author step back and forward through the edits to the open document, and jump to any earlier point, from the surface's app bar.

✅ Approved on the editor history bar prototype (variant B on desktop, variant A's header on mobile), 2026-10-07. The two-line row was approved on the history labels prototype, 2026-10-08.

Density: Compact. Each face is 32px tall.

Rule:

• Desktop: one split pill. Three faces joined edge to edge: Undo, Redo, and a chevron that opens History. The faces are ghost buttons that share one outline and one set of rounded outer corners.
• Undo and Redo disable at the ends of the history. Their tooltips name the chord: Undo (Ctrl+Z) and Redo (Ctrl+Y or Ctrl+Shift+Z). The chevron's tooltip is History.
• While the list is open the chevron reads pressed: the secondary fill, with aria-pressed.
• Mobile: one History icon in the header, between the mode select and the Test Bench. Its popover head holds Undo and Redo as icon buttons, so the header keeps its room.
• The popover opens under the control, aligned to its end. It is not portaled, so the list scrolls inside a dialog host.
• Set the list in the menu row style. It holds the fixed head row World opened, one row per Step with its label, the Saved marker after the Step that was saved, and the undone Steps dimmed below the current one.
• A row with a record name has two lines. Line one is the name in italics, then the field as a small bordered chip. Line two is the verb and type at the meta size.
• Only the name truncates. The verb, the type and the chip always show in full.
• Mute the verb and type with opacity, not a gray color. Opacity stacks with an undone row's dimming, so a muted part never looks brighter than its row.
• A row with no name has one line: the verb, the type and the field chip, not muted. A labeled batch shows its label.
• The row's accessible name is the whole label in its natural order, such as "Edit Entity Mara: Player Description".
• A cut-off row has its own tip, not the shared Tip. It opens on the left on hover and on keyboard focus, and shows the same parts in the same order. The name wraps and the chip wraps under it, 18rem wide at most. A row that shows in full opens none. The tip adds nothing to the accessible name.
• The popover is 20rem wide, at most 90% of the window.
• Mark the current row with the accent fill and a Now tag. Mark the head with the fill only.
• A click on a row moves the document to that point and keeps the list open. The click handler does nothing else.
• The list scrolls in its own box, at most half the window tall, and brings the current row into view.

Desktop shows the pill at the head of the app bar's end slot, before the mode select. Mobile shows the icon in the header row. Both read the same history. Open #dev?modal=worldEditor&history=open for the list in the editor, or #dev?modal=designSystem&tab=history-controls for the isolated reference.

The live reference draws both layouts over one sample history, with buttons to add a Step, mark the cursor as saved, and reset. It never reads or writes a world, a save, or storage.

• Step labels are the editor's text: the action, the type, the record's name and the field when one changed.
• Unverified: the reference's description and button labels have terminology review only; vocabulary and grammar evidence is not recorded.

Purpose: Show one turn of the story the same way in the Pages and Chat layouts, so a turn's actions and its scene image controls cannot differ between them.

Rule:

• One card renders a turn's narration in both layouts. The card owns its surface, its right-click menu, and its action row.
• One action list feeds the row and the menu. Every row icon is also a menu item, and More opens that menu for the menu-only actions. Generate Scene Image is available only in More and the context menu in Pages and Chat.
• The row is absent while the turn streams and when the list is empty. It does not show disabled icons in place of a live turn.
• Re-generate Stats sits to the right of Edit Stats in the Stats panel, with a tooltip on each button. It also remains in the narration menus. The panel disables regeneration on past turns and while a reply or scene render is running.
• A turn with no scene image shows no plate. There is no empty box.
• Choices in Pages are unnumbered rows. Choices in Chat are unsent bubbles. Both take the same press handlers. Re-generate Choices waits for the latest turn to have narration; it remains available after a turn returns no choices. Jump to Latest stays hidden before the opening narration.

Density: Comfortable. The card uses the narration text size the player sets. The action row and the plate controls are compact icon buttons with tooltips.

The three parts, in reading order for Pages:

• The action row starts with the turn number, then the icon actions, then More for the menu-only actions.
• The action line in Pages is the player's text with a left rule in the primary color and the muted foreground. It is upright, so the player's italics and quote color show. It has its own right-click menu, and that event does not reach the card's menu.
• A right-click on selected text keeps the browser menu.
• The plate takes its box size from the image header, so the text below does not move when the image decodes.

The card and the rows fill the narration column at every width. Long choice text wraps inside its row. The action row stays on one line; the full latest-page row, four icons and More, fits the card in a 375px window. The plate is at most 18rem tall and never wider than the card.

On a touch screen, a long press opens the card's menu, and a long press on a choice row appends it. The plate controls show when focus is on one of them, so Tab from the image reaches them without a pointer.

The live reference renders the production card, plate, action line, rows, and Stats panel pair with the production action lists. The latest page shows the action line above the narration, with its own menu. The pair appears on both pages: both actions work on the latest turn, and both are disabled on the past turn. Its handlers write to a local status line. It never calls an endpoint, draws an image, or reads or writes a save.

• Action labels come from the action builders, and the plate's names come from ScenePlate, so the reference and the game cannot drift. Reuse does not certify those labels as fully ASD-STE100 compliant.
• Unverified: the headings "Latest Page" and "Past Page", their two Meta lines, the status line, and Restore Images have terminology review only; vocabulary and grammar evidence is not recorded.
• The pair's labels and tooltips come from StatsActions, and the action line's menu from playerBubbleActions, so the reference and the game cannot drift.
• Unverified: the description's "Right-click a card or the action line for its menu", the past page's "The Stats panel actions are disabled", and the "Stats Panel" label have terminology review only; vocabulary and grammar evidence is not recorded. The sample action text is creative prose and exempt.

Purpose: Show a script's question or message as part of the turn, not as a window over it.

Rule:

• A prompt is a line in the turn column under the narration. It has the action line's left rule in the primary color and italic text.
• The control sits under the question. The actions are text links: Cancel on every prompt, and OK where the answer takes more than one press.
• A confirm, and a single ask with up to four options, are pill buttons. One press answers.
• A single ask with five or more options is the production dropdown. OK sends the pick and stays disabled until there is one.
• A multiple ask is pill buttons that toggle, then OK. An empty pick is an answer.
• An ask for text is the production text field, then OK. Enter submits, an empty field included.
• The prompt takes focus when it opens. Escape cancels while focus is inside it. There is no global Escape.
• A tell is the same line with the text alone. It stays with its turn and pages with it. After an answer, a prompt leaves the column.
• A toast is the app toast. The line is never a dialog.

Density: Compact. The line uses text-label. The field and the dropdown are 2rem tall.

Pages spans the narration column. Chat centers the line at bubble width, 85% of the column. Pills wrap onto more rows. A long question wraps; it never truncates.

The live reference opens the production line in a store of its own under a sample turn, in either layout. Its status line shows what the sample script read. It never reaches play or a save.

• Unverified: "Choose One", the reference description, its sample labels, and its status lines have terminology review only; vocabulary and grammar evidence is not recorded. The sample questions are creative prose and exempt.

Purpose: Show the active prompt section while retaining the surrounding prompt list.

• Use the production PromptNavigationRail in Settings.
• The active destination uses the shared CompactSelectionRow primary fill and foreground, with showCheck={false}.
• An open parent has a quiet accent tint and medium weight while a child is selected. Clicking the parent opens Anatomy and makes that parent the active destination.
• Indent child rows and use the smaller text-meta size without a connector line. Keep only the current prompt's children open.
• Use uppercase section headings with hairline dividers. Rows wrap long names and retain the shared inset focus ring.
• The rail stays a flex column with a bounded, shrinkable viewport. Long lists scroll independently of the editor; contain wheel scrolling at the rail's ends.
• Below md, Settings uses its combined prompt/section selector instead of the rail.
• aria-current="true" identifies only the current destination. Navigation buttons do not expose toggle states.

The live reference uses the production rail with all prompt labels and local selection state in a short container. Open #dev?modal=designSystem&tab=prompt-navigation. The reference's mobile section selector previews the current prompt's sections; Settings retains its complete combined selector.

Prompt and section labels reuse the production registry. The reference's title and selector label name their controls; it adds no instructional prose.

Purpose: Pick one entity from the world's entity groups without leaving the Traits tab.

This pattern differs from two others on purpose. Its entity list sits inside the + menu, unlike the Searchable Group Picker, because each level stays short. Its rows keep a check column in a held-state flyout, unlike Compact Selection Lists, so entity rows and group rows align.

• 🧭 One level at a time. The flyout shows one entity group level. A group row carries a folder icon and a trailing chevron, and opens that group's level. A group with no entity anywhere below it has no row.
• ⬅️ Back row. Above the rows, a Back row with an arrow names the level you're on. It returns one level. On the top level of a menu drill-in, it names the menu row that opened the list and returns to the menu.
• 👤 Custom Persona icon. The entity with the Custom Persona mark sits in its Entities-tab place and carries its own icon.
• ✅ Check column. A flyout that shows held state starts every row with a check column, so group rows and entity rows align. A held entity reads checked and dimmed, and can't be picked.
• 💬 Refusal reason. A held row carries a tip that says why it can't be picked: "Already links Trust", "Already owns Trust", "Already links Body, which holds Trust". A menu that doesn't list the entity starts the line with its name ("Bram already links Trust"). The row stays reachable by keyboard, and screen readers read the reason. A touch screen shows no tip.
• Rows use the menu's row size and padding. Long names wrap. The list scrolls inside the popover when it outgrows the space.

Open #dev?modal=designSystem&tab=owner-flyouts. The reference uses sample entities and local state. It never reads or writes a world.

The same levels work on desktop and on a phone. Nothing opens to the side, so a narrow panel never clips a level. Each level's Back row takes focus as it opens.

Purpose: Show which fields of a link or copy differ from its blueprint, and return them to it.

• ↺ Field Reset. An overridden field ends its label row in a ghost Reset button with a rotate icon. A field that reads its blueprint live has no Reset. Each Reset's accessible name adds the field, such as "Reset Requires".
• ⚠️ Stale marker. When the blueprint changed a field after the override was made, a warning-colored "Blueprint changed" line with a warning icon sits just left of that field's Reset. It shows on the details panel only, never in the tree.
• 🧊 Frozen footer. Below every panel tab, Reset to Blueprint sits on the left and is unavailable while nothing is overridden. The host's own actions, such as Link To… and Edit Blueprint, sit on the right.
• Read-only fields keep their normal look, with editing off.

Purpose: Edit a two-way Connection's two Travel Hints, one for each direction, or use one hint for both.

• 📚 Two stacked boxes. Each box edits one direction and carries that direction in its label. A link copies the top box into the bottom box.
• 🔗 Vertical link toggle. A ghost button sits to the right of both boxes and spans their full height. Its icon, turned upright, is a chain (link) when linked and a broken chain (unlink) when unlinked. Its tooltip names what a click does: Link Travel Hints or Unlink Travel Hints.
• 🔒 Linked. The top box writes both directions. The bottom box is read-only, muted, and shows the top box's text. Screen readers hear that it copies the first Travel Hint.
• ✏️ Unlinked. Both boxes are editable. Unlinking restores the text the bottom box had before the last link.
• ➡️ One-way. One box and no toggle. Switching to two-way adds the second box, linked.

The link state is never saved. The pair opens linked when both hints are equal, and reads the state again when the hints change somewhere else, such as an undo.

Open #dev?modal=designSystem&tab=travel-hints for linked, unlinked, and one-way samples in local state. The Locations tab's quay-to-garden pair has different hints, so its arrow labels sit on their outer sides.

Purpose: Keep help in view while the player works. The window is not a dialog: it does not dim the app, it does not take the keyboard, and it stays usable above every dialog.

📝 Proposal. The user approved these patterns on the ticket 14 prototype (2026-10-01). The table at the end shows which ones production has today.

Density: Compact. The title bar is 40px tall. Lists use the Compact Selection Lists rows.

• 🏷️ Help tab. A launcher that stays flat against one of the four screen edges and is round on its inner side. Its label reads top to bottom on the right edge, bottom to top on the left edge, and left to right on the top and the bottom. It is never upside down. A press opens or closes the window. A drag, or an arrow key while the tab has focus, moves it. The tab shows the accent fill while the window is open.
• 🪟 Floating window. A title bar with the name, Wide View, Open Guide, a ⋮ menu and Close. Wide View keeps one icon and stays lit while on. Open Guide shows the Guide full screen: the rail with the search field and the contents beside the reader. The window waits under it, and both share one view, so the open section carries both ways. The menu holds Clear Conversation, the Chat Style radio items (Auto, Bubble, Minimal, Full), the Mascot Position radio items (Beside, Below, Auto), Open Guide, Open Wiki, AI Context and Settings, in that order in every chrome. Open Wiki asks first in a small dialog, with a Don't Ask Again checkbox, then opens the wiki page of the section the reader shows, or the wiki home. The full-screen Guide has the same Open Wiki button in its header. Only the framed window has the title bar button. The mobile-size sheet and the bubble chrome leave out Mascot Position: the sheet draws no mascot, and Bubble places the mascot itself. It renders in the window's layer, and hangs from the corner of the button that has room, so it always comes from the button. Close is a bare X in the dialog style. A dialog opened from the menu closes the window and reopens it on close. The title bar moves the window. A grip at the bottom right corner resizes it. The window stays whole on the screen. Only the tab snaps to an edge.
• ↔️ Two widths. Narrow (400px) shows one part at a time behind three tabs: Ask, Search and Guide. Wide (720px) shows a rail with search and contents beside the conversation or the reader. Wide View swaps them, and the grip crosses the same line at 560px. The conversation, the search text and the open section carry over.
• 💬 Conversation. A scrolling log of questions and answers above the question field. It stays at its end while an answer comes in, unless the player scrolled up. The question field is one line and grows with its text while focused, as the game's action box does.
• 🙋 Question bubble. The player's question, right-aligned on muted, with an 8-unit left margin so it never spans the full width.
• 📝 Answer. Markdown through the streaming renderer, with no bubble. A Meta line says Stopped under an answer the player ended.
• 📋 Code block. A fence in an answer or a guide page is the highlighted block with a ghost icon button, Copy, at the right of its header row. Copy confirms with a Copied tip above the button, in the tooltip style, that fades out after about a second. It also opens on tap and on keyboard activation, and a failed copy shows Couldn't copy the same way. No toast shows. An answer's block also has Insert, a ghost icon button beside Copy. It opens an inline menu with the open stat's name as a Meta header and two ghost rows, Before the AI and After the AI, that the arrow keys move between. The row the fence's slot tag names has the accent fill and focus when the popover opens. With no stat panel open, Insert is dimmed with aria-disabled and a tip that says what to open. The panel's replace confirm makes the window step aside as the window's own dialogs do. Code blocks outside the window have no controls.
• 🔗 Source link. A small bordered chip under an answer: the page in the muted color, a chevron, then the section in the foreground color. Chips wrap, under a Meta label Sources. A press opens the section in the reader.
• ⌨️ Question field. A two-row text area with an icon button beside it. The button is Send, and it is Stop in the outline variant while an answer comes in. While a game turn generates, Send is unavailable and a helper line under the field says why.
• 🔎 Search result row. The section name at label weight, the page as Meta, and a two-line excerpt in the helper role. The wide rail leaves out the excerpt.
• 📖 Reader. The page as Meta, the section name, the body, then an On This Page list. In the narrow layout a Contents row above it goes back to the list. In the wide layout a Back to Conversation row above it shows the conversation again.
• 📚 Contents. One collapsible row per page, with its sections as Compact Selection Lists rows.

Under Chat Style Minimal, the window drops its frame and shows three separate pieces over the app: the mascot, the column and the reader. A style change while the window is open swaps the chrome in place, with no zoom. The column and the reader take presses. The mascot does not. A press in a gap between the pieces reaches the app.

• 💊 Pill. The chrome on top. A round, bordered background pill at the top right of the column, with a drag grip, the ⋮ menu, Show Head Only and Close. On a mobile-size screen the pill has no grip and no head button. The grip moves all three pieces. Every button is round, bare and muted-foreground, and fills with accent on hover.
• 🧍 Mascot piece. Left of the column, as tall as the column, at the base's aspect, with its feet on the column's bottom edge. It has no box, no border and no shadow. The head view is the same piece, cropped by the Mask, left of the pill. It is 96px tall on a desktop and 64px on a mobile-size screen.
• 💬 Column. The conversation as bubbles over the app, up to 400px wide, with no frame, no title bar and no tabs. Older bubbles fade out at the top. No scroll bar shows. The framed window's corner grip sits in a strip under the ask pill, clear of Send, and resizes the column.
• 🙋 Question bubble. On the primary fill with primary-foreground text, right-aligned, with a flat bottom right corner and a 40px left margin. The framed window's question bubble uses muted.
• 📝 Answer bubble. The answer sits in a bubble on popover with a border, left-aligned, with a flat bottom left corner and a 24px right margin. The framed window draws its answer with no bubble.
• ⌨️ Ask pill. The question field and Send in one rounded pill, in the shadow-lg role, with the inset focus ring around the whole pill.
• 📖 Reader piece. Right of the column, 8px away, as tall as the column. A popover card with a border and a Close Reader button in its own top bar. It closes alone. The column and the mascot stay.
• 🌫️ Shadow. The pill, the bubbles and the reader have shadow-md, which separates them from the app. The ask pill has shadow-lg. The mascot has none.
• 🧍 Mascot beside the frame. Under Full with the mascot on, the whole mascot stands left of the framed window, as tall as it, with its feet on the frame's bottom edge. The head view does not apply. The mobile sheet draws no mascot under Full.
• 📱 On a mobile-size screen. The sheet fills the screen over a dim, blurred backdrop. The bubbles sit on the backdrop, and the head view is left of the pill. A source name opens the guide section in the wiki, not in a reader piece.

Under Chat Style Bubble, or Auto with the mascot on, the mascot speaks the newest answer. Bubble places the minimal chrome's pieces, tokens, radii, shadows and Backdrop around the mascot. The tail and the strip are its only additions. With the mascot off, or on the mobile sheet, it draws the minimal chrome.

• 💬 Answer bubble. The assistant bubble with no tail corner, and a tail of the same popover fill and border that points at the mascot's head. Its bottom edge sits at the bottom of the head. It fits the answer up to the screen margin, then scrolls in a ScrollArea. While it scrolls, the whole bubble fades out at the top, box and all, as the minimal column's bubbles do. It holds the answer and the open Thinking text.
• 🎚️ Strip. Under the bubble: round background chevron buttons at both ends, and between them the Thinking toggle, a Sources button that opens the source links in a popover, and Take Me There. Sources takes the Thinking toggle's leading chevron, which turns up toward the popover while it is open.
• 🙋 Question and ask pill. The question bubble, read-only, then the ask pill, level with the mascot's feet.
• 💊 Pill. Over the mascot's head, inside its bounds. The mascot's body moves the window too. The chat grip sets the chat's room, as the minimal grip sets its box. It sits on the room's corner that faces the most open space. The Backdrop fills the room, and the bubble fits its answer at the room's bottom. The tail draws under the bubble. The mascot's own grip sits on its top corner on the bubble side and sets its Scale.
• 🫥 Pill fade. The pill and the mascot's grip show when the window opens and hide after one second, with a 300ms opacity fade. The fade masks the whole bubble piece, box included. The chat grip sits outside the bubble, so it stays in view. They return while the pointer is over the mascot or a piece, while keyboard focus is inside a piece, and while the ⋮ menu is open. A hidden piece takes no presses. On a touch screen they stay up. With reduced motion, they show and hide with no transition.
• 🪞 Sides. The bubble stands on the mascot's side that faces the screen's middle. Past the middle, the group mirrors with no transition.
• 🧑 Head view. One column: the bubble with its tail down, the head and the pill, the strip, the question, the ask pill.

The tab and the window render in the shielded layer, one host on <body> at z-65. That is above dialogs, popovers and selects (z-50), and under the chip typeahead (z-70) and tooltips (z-80).

• A dialog, an alert dialog and a drawer treat a press or focus in the layer as inside them. They do not close and do not take focus back.
• An overlay that the window opens must render inside the layer: use portal={false}. An overlay portaled to <body> lands under the window.
• Escape belongs to the dialog behind the window. It never closes the window.

The window zooms from 75% and fades in over 200ms, and goes back over 150ms. The fixed point of the zoom is the center of the Help tab. Reduced motion shows and hides it at once. Put transition-none beside the duration classes: a duration-* class also sets the transition duration, and a drag would then ease each step.

The mobile sheet slides in from the edge that holds the Help tab, with the same durations.

Open #dev?modal=designSystem&tab=formaquestion for the tab on each edge, a sample window, a sample mobile sheet and the three pieces of the minimal chrome in local state. The samples have no AI: a question you send there shows the docs search state. Open #dev?modal=formaquestion on any screen for the real one.

Below the md breakpoint the window is a full-screen sheet in the narrow layout.

• The sheet and the tab fill the visible area (.app-viewport), so the on-screen keyboard shrinks the sheet and moves the tab up with the app.
• The sheet has no frame lines, no Wide View, no drag and no resize, and stores no place. Its title bar is 48px, and Close fills that height as a 48px touch target.
• The sheet pads for the system bars with the safe-area insets.
• Focus goes to the sheet, not to the search field, so no keyboard opens until the player selects a field.
• The tab hides while the sheet is open, and focus returns to it on close.
• The Android back action closes the sheet or the window before any dialog under it. Escape still never closes it.

A pattern that is not built gets its composition and its reference here when its production component lands.

Help, Formaquestion, Ask, Search, Guide, Wide View, Open Guide, Open Wiki, Close, Close Guide, Contents, Back to Conversation, On This Page, Introduction, Ask a Question, Send, Stop, Stopped, Sources, Nearest Sections, Clear, Try Again, Show Head Only, Show Full Mascot, Close Reader, Copy and Insert are labels in Title Case. The hints and status lines are one sentence with no period. The not-from-the-guide notice is two sentences, so each has a period. The line above the docs search in a conversation is two sentences, so each has a period. With no matching section it is one sentence. The tab's tooltip is two sentences, so each has a period. Docs text in the reader is authored content and keeps its own voice. This review is local; it does not certify STE compliance.

Purpose: Search and filter a paged list with only the controls a reader uses most on the row.

Density: Compact. One row holds search, the main filters, and a Filters button. Less-used filters wait in a popover.

• 🔎 Search first. The search bar grows to fill the row. Its clear button returns the full list at once.
• 🎛️ Main filters next. Each viewer keeps its most-used filters on the row at fixed widths.
• 🧰 Filters last. An outline button with a filter-list icon, the Filters label, and a count badge. Actions such as a file button follow it.
• 🔢 Badge. It counts the hidden filters that differ from their defaults. No badge shows when all are at their defaults. A changed filter on the row never counts.
• 📋 Popover. It aligns to the button's end and renders inline, not portaled. The hidden filters sit in it as labeled selects. A divider follows, then a ghost Reset Filters button with a rotate icon at the left.
• ↩️ Reset. It returns every filter to its default, the ones on the row included, and goes back to page 1. It keeps the search text. It is disabled when every filter is at its default.
• ♿ Accessible name. The button is More Filters, or More Filters, N changed while the badge shows.

At sm and wider, everything shares one row. Below sm:

• Search takes its own row.
• The staff Status and Sort share two equal columns.
• Filters shows its icon only, with the badge on its top-right corner.
• The file button shows its icon only. Its label stays for screen readers.

Open #dev?modal=designSystem&tab=filter-row for the staff and user rows in local state.

The labels follow AP title case: Filters, More Filters, and Reset Filters. The count in the accessible name changes with the state, so it is status text, not a lecture. The select names keep their production wording.

Supporter Flair marks an account that supports the project on Patreon. It is a proposal until the user approves it. No surface uses it yet.

• 🎨 Two tier tokens. --supporter is magenta. --supporter-plus is purple. Both stay the same in every palette, so a palette never blurs a tier against its own primary color.
• 🏷️ Badges. A pill with an icon. Supporter has a heart on a light tint. Supporter+ has a heart with a plus, a stronger tint, and an outline, so the tiers differ by shape and not only by hue.
• 🔤 Names. The name takes its tier color. Use no other change to the name.
• 🖼️ Profile Image ring. A ring in the tier color with a gap to the image, drawn inside the image's own footprint so the element keeps its size and no container clips it. The ring is 1 pixel at the two small sizes, 2 pixels at the middle sizes, and 3 pixels at the largest size.
• 🧭 Beside staff. The staff badges stay square text tags in blue, green, and the palette's primary. A pill with an icon never reads as a staff tag.

• Show the flair wherever other people see a name: listings, comments, feedback, and profiles.
• Show no flair on a staff account. The staff badge wins.
• Show no flair on a stored name snapshot, such as a contest podium.
• Do not use the tier colors for anything else. They mean support and nothing more.

The name color and the ring are static. They have no hover, focus, or disabled state.

The heart on the badge beats: two pulses in 600 ms, on the icon only. It beats once when the badge first shows for an account in a page load, and again each time the pointer or focus enters the badge. At rest nothing moves. Reduced motion skips the first beat and keeps the hover beat. A name that opens a profile keeps the focus ring of UserName.

Each token meets 4.5:1 as text on the background, card, popover, muted, accent, and secondary surface of every palette, in both modes. It meets the same ratio under its strongest badge tint. supporterTokens.test.ts reads src/index.css and checks every palette. The High Contrast accent and secondary fills are mid grays that no hue clears, so the check skips those two.

The Admin badge takes the palette's primary color. In Rose and Bubble Gum the primary is near the Supporter+ hue, so the two tags can look alike there. The outline and the icon keep them apart.

Open #dev?modal=designSystem&tab=supporter-flair for the light and dark panels side by side.

The badge labels are Supporter and Supporter+. Copy says Profile Image, never avatar.

Purpose: Pick a preset and act on it with the same controls on every preset surface.

Density: Compact. One row holds the label, the preset select and the actions. A reachability badge sits under the row, and the Reset and Compare pair sits with its prompt.

• 🏷️ Label and select. The label reads Preset. The select lists the presets, then a separator, then Add New Preset… as its last row. It has no Import row. A surface that picks the preset elsewhere, such as the Formaquestion Endpoint tab, shows a heading in place of the label and select.
• 🔘 Icons at md and up. Each action is a ghost icon button with a tooltip. Destructive actions sit left of the select, with Delete outermost. File actions sit right of it. A panel that opens full screen ends the file actions with View full screen, which reads Exit full screen while the panel is full screen.
• ⋯ One menu below md. A single Preset Actions button holds every action. File actions come first, then a separator, then the destructive ones in red.
• ✋ Confirm first. Reset and Delete open a confirm that names the preset. A surface whose Reset Undo or Cancel can revert, such as the Formaquestion Mascot tab, resets with no confirm. A surface can title its own confirm. Cancel returns focus to the icon, or to the Preset Actions button when the menu opened the confirm.
• 🟢 Badge. An endpoint preset select shows whether its server answers, under the select. The row carries one dot, one line and Recheck.
• ↩️ Reset and Compare. The pair sits right-aligned, Reset left of Compare. One prompt on screen puts it in the modal footer. Stacked prompts put a smaller pair at the right of each label row.

An endpoint preset has no Import or Export, because the file would carry an API token. A built-in preset keeps only Duplicate, Import, Export and View full screen where the surface offers them. A surface that passes no handler for an action drops that action from both widths.

Build a new preset header from presetHeaderActions and PresetHeader. Do not draw a row of buttons by hand.

• The header switches at md. PresetHeader takes layout="wide" or layout="narrow" to pin one form. Only the reference uses it, so both forms show at one viewport size.
• The select takes the free width and shrinks first. The label, the icons and the ⋯ button keep their size.
• The Reset and Compare pair on a label row wraps under the label when the row is too narrow, and stays right-aligned. It never covers the label.
• A badge line stays on one row. A long line truncates, and Recheck keeps its size.

The probe asks for a model list or node info and never sends a prompt, so no check costs credits. Open #dev?modal=designSystem&tab=preset-header for the header in both widths, every badge state, and the pair in the modal footer and on label rows. The sample actions change only local text.

The labels are Preset, Duplicate, Rename, Import, Export, Publish, Reset, Delete, Preset Actions, Add New Preset…, Recheck and Compare, all in Title Case. View full screen and Exit full screen keep the sentence case of the editor's own full-screen toggles. An icon's tooltip is its label, unless the surface passes a longer tip: the Mascot tab's tips say what each action does, such as "Make an editable copy of this mascot". The Reset and Compare tooltips are one sentence with no period. The badge lines are status text: one word or phrase, and the missing model name changes with the preset. Each confirm names what it changes, the preset or the prompt, and says "This can't be undone." The reference sample text and status lines were checked against the Writing Guide by copy role. This review does not certify the production confirm text as ASD-STE100 compliant.

Purpose: Point the eye at one row after a Take Me There landing, or after a link that jumps to a setting, such as the Mascot tab's off-state link to General. The ring runs once and stops.

✅ Approved. The user approved this pattern in the reference (2026-10-04). Production: Take Me There landings in the Settings dialog, on the game screen (the action box, the page buttons and the Export Story format buttons) and in the World Editor, the jump from a prompt's anatomy to a Messages field, and the Mascot tab's off-state link to the Mascot row of Formaquestion Settings → General.

Density: None of its own. The ring draws in a layer above the page and changes no layout.

• 🎯 One row. The ring goes on the whole row: the label, the control and its hint. It never goes on a section or a tab.
• ⭕ Ring. A 2px border in the row's ring color, 4px outside the row. It draws in a fixed layer above the row's own layer, never on the row, so it moves nothing and no scroll area cuts it. It grows by transform and fades by opacity, so it runs on the compositor, sub-pixel, and a busy main thread never stalls it.
• 🧭 Placement. The layer reads the row's place each frame, so the ring follows a row that scrolls or moves. A row in a dialog gets a ring above that dialog. The layer is cut to each of the row's scroll areas widened by 10px, so a ring whose row scrolls away leaves with it.
• ⏱️ Pulse. 1500ms in all. The ring holds for the first 40%, then grows to 10px out and fades to clear. It runs once, and the layer goes when the animation ends.
• ♿ Reduced motion. The same ring, still, for the same 1500ms. Then it goes away at once.
• 🛑 Canceled. When the row hides or leaves the page, or the landing is canceled mid-pulse, the ring goes at once.
• 🖱️ Inert. The layer takes no pointer events and no focus, and screen readers skip it.
• ⌨️ Focus. The landing focuses the row's control, not the label's ⓘ button. A row of buttons focuses its first enabled button, or its first live link button, such as a pager's. Where a control draws a select and a segmented group and hides one per width, focus goes to the one on screen. The control's own inset focus ring then sits inside the landing ring.
• 🔁 Repeat. A second landing on the same row restarts the pulse from the start.
• 📏 Room. A target row keeps a 12px scroll margin, so a scroll to an edge leaves the ring's reach on screen.

pulseLanding reads the system's reduced-motion setting, and a caller can pass reducedMotion to choose. It returns a cancel for unmount.

Open #dev?modal=designSystem&tab=landing-pulse for a sample Settings tab in both themes. Pick a Target Row, check Reduced Motion for the still ring, then press Play Landing in either theme.

• At sm and wider, the ring wraps the label column and the control column as one row.
• Below sm, the row stacks, and the ring wraps the label, the control and the hint.
• The ring and its pulse are the same at every width.

The pattern adds no player-facing text. The reference labels Play Landing, Target Row and Reduced Motion are Title Case. The row labels and hints come from the production Settings copy. The card description is one sentence with a period, as the other references have. This review is local; it does not certify STE compliance.

Purpose: Tell the author that one editor panel stopped working, in that panel's place, while the rest of the editor stays live.

✅ Approved. The user approved this pattern from a mock (2026-10-06). Production: the World Editor's tab bodies, detail panel, Locations Canvas and Test Bench.

Density: Comfortable. The card is centered in the space of the panel it replaces and takes no more than 24rem.

• ⚠️ Icon. A warning triangle in the warning color, above the title.
• 🔤 Title. "This Panel Stopped Working" in title size and semibold.
• 📝 Line. "Your unsaved edits are kept. Try again, or view the details to report the problem." in the muted text color.
• 🔘 Buttons. View Details is outline and Try Again is the primary button, side by side. They wrap on a narrow panel.
• 🧱 Surface. A bordered card with a 1.5rem pad, inside a 0.75rem pad that keeps it off the panel edge. The panel's own frame stays.
• ♿ Announced. The card has role="alert", so a screen reader reads it when it replaces the panel.

• 🔁 Try Again remounts the panel. A panel that throws again shows the card again.
• 🔎 View Details opens the Error Details dialog on the panel's error, with its component stack. The dialog has Copy and Report Bug.
• 🧭 A different item clears the card. The detail panel's card goes away when the author selects another item or tab.
• 💾 Edits stay. Edits live in the data provider, not in the panel, so Try Again loses none of them.
• 🚫 Not for the whole app. A crash above the editor shows the full-screen recovery screen, which has the same composition and the title "Formamorph Stopped Working".

Open #dev?modal=designSystem&tab=panel-crash-card for the card in both themes, beside a list at desktop width and alone at phone width.

Purpose: Show every setting of one placed chip in a centered dialog, and for a prompt chip, show the text it sends beside the settings.

📝 Proposal. The layout was settled with the user in the Chip Options spec (rulings Q1, Q18, Q19 and Q20). The user has not yet approved it in the showcase. Production already uses it, so approval is the next step.

Density: Compact. One short row per setting, 5.5rem for the name and the rest for the control.

• 🪟 Dialog. A centered Dialog with the app's content shell. It stays centered on every screen size and scrolls inside, at most 85dvh tall. It nests in the dialog it opens from, such as Settings or the entity editor.
• 🏷️ Header. The title is Chip Options. The description line holds the chip's color swatch and its label.
• ↔️ Two panes for a prompt chip. The rows sit on the left at about 1.15 parts, and What the AI Reads sits on the right at 1 part. The dialog is max-w-3xl.
• 📄 One column for the rest. Placeholder chips and Tool argument chips show the rows alone, in max-w-md.
• 📏 Rows. The name sits in a fixed column, and the control fills the rest. A pick-one setting is a segmented control up to three options, and a dropdown from four. A pick-many setting is a group of inline checkboxes with labels, never pills.
• 🔒 Lock groups. The last checked piece of a group, such as Stat Detail, stays checked and disabled.
• 🌫️ Moot rows. A row that has no effect under the current picks is disabled, and its tooltip says why.
• 💬 Help. An option's help is the tooltip of its segment or dropdown item. A checkbox's help is the tooltip of its label. A read-only control's help says why it is shut.
• ➖ Placement. Label, Header, Prepend and Append sit below a rule.
• 🔘 Footer. Re-Pick… and Edit Value sit right-aligned under a rule, only where the chip has them. Re-Pick… swaps the body for the picker, with a Back control.
• 📖 What the AI Reads. A title over a bordered box on a muted fill. The box holds the chip's value as the prompt sends it. Header, Prepend and Append show one shade dimmer.
• 💡 Hover and focus. A control lights the text it produces with a primary tint, and every line without it dims. A piece such as Range lights only its own part of the stat line. A control that produces no text, such as Scope or Format, lights nothing.
• 📊 Real data first. The pane reads the live scene in a game, the authored world in the World Editor and the sample scene in Settings. It never carries its own data.

Build a new chip setting as an axis in the registry. Do not draw a control in the dialog by hand.

• Below sm the panes stack, with the rows above What the AI Reads.
• The dialog never grows past 85dvh. The body scrolls inside, and the footer stays in view.
• A row's control shrinks first. The name keeps its column.

The title is Chip Options. The pane title is What the AI Reads. The rows are Only With, Include and Stat Detail, in Title Case, as are Scope, Content, Format, Label, Header, Prepend and Append. Help lines follow the Writing Guide: verb first, with no on and off preamble. This review is local; it does not certify STE compliance.

Open #dev?modal=designSystem&tab=chip-options for the dialog on an Entities chip, a Stats chip and a placeholder chip, with an Editable switch. Open #dev?modal=chipOptions for the dialog inside Settings, on a canned Entities chip.

Purpose: Explain the name under the pointer or caret in a code editor, and list every place the world's code uses a stat.

✅ Approved. The user approved the look as a Design System pattern in the Code Hover Cards spec (ruling Q19; Q4 and Q24 settled the completion pane and the pinned list). Production: stat code, Tool scripts and the stat code template dialog.

Density: Compact. The card is 22.5rem wide, or the screen width less 2rem. Every section pads 0.625rem across and 0.375rem down, and one rule divides the sections.

• 🔤 Signature. The kind in muted text in parentheses, then the path in the code font, then the type: (stat) owner.stats.Health: Stat. A global or Blueprint item names its scope with its kind: (global stat) stats.Fatigue: Stat, (global trait), (Blueprint stat), (world placeholder). A method reads roll(max): number. A declared name has no type.
• 🏷️ Access badge. A pill at the right of the signature, for a name a write can reach or not. Read-Only is muted. Writable and Writable After This Run use the code string color.
• 📝 Description. Muted text, three lines at most. The Open link reaches the full text.
• 🧾 World Details. A two-column list: the label in muted text, the value in the card's text color. A row at its default value is left out. A value can run over several lines, such as one Requirement Row per line. One Owners row lists who owns the item, You first; a global item or a world placeholder has none. A nested placeholder adds a Parent Placeholder row. The self card's Stat row names a global or Blueprint stat's scope: "Health (global stat)".
• 🎲 Allowed Values. The heading in muted text, then one line per value in the code font, with ×weight after it. A weight-0 value shows at half strength. A list stops at 12 values, then reads "and N more" in the muted text.
• 🪪 Default. A slot's start value, on one line with its label.
• 🔗 Links. One row of text links at the bottom, in the info color: Open, Find All Uses, Go to Line N and Read in the Guide. A host that cannot act on a link leaves it out. The completion pane shows only Read in the Guide.
• 📦 Box. A 1px border line, a 0.375rem radius, the popover fill and a soft shadow. A hover and a pinned list use this box. The completion pane has the same border, radius and fill, without the shadow.
• 📌 Find All Uses. A click on the link pins the card. A second box hangs 0.25rem below it, with a heading such as "3 Uses". A row reads "Stat · Before · Line 3", or "Entity › Stat · After · Line 7". A Blueprint box that no entity runs carries a muted No Owners tag. The list scrolls past 14rem. An empty list reads "No uses in stat code".

• 🖱️ Hover. A hover opens the card after the standard delay and keeps it open while the pointer is on it.
• ⌨️ Keyboard. Ctrl+K Ctrl+I (Cmd on macOS) opens the card for the name at the caret. A screen reader hears the card through a live region.
• 👆 Touch. A tap that places the caret on a name opens the card after a short pause. Typing closes it.
• 📃 Completion list. The info pane beside the selected option draws the same card, always open.
• ⎋ Escape. Escape closes the card and stops there. With no card open, it passes through, so full screen still closes on it.
• 🚫 Hidden links. The template dialog, the Tool editor and the library editor hide Open and Find All Uses.
• 👁️ Live editors only. A read-only code preview, such as a Guide code fence, shows no card.

Build a new card row in the card model. Do not draw a row in the DOM by hand.

• The card never grows past the screen width less 2rem. A long path or value wraps.
• The reference stacks its samples in one column per theme, and the two themes sit side by side from lg.

Every label is AP title case, and both parts of a hyphenated label are capitalized: Starts At, Shown To, Find All Uses, Read-Only, Writable After This Run. Descriptions use the Writing Guide voice. A single sentence has no period. This review is local; it does not certify STE compliance.

Open #dev?modal=designSystem&tab=code-card for a global, a stat, a trait, a placeholder, a Read-Only name and a declared name, then a pinned card with its list and an empty list, in both themes. The controls only report what they do.

The project design-system skill routes UI changes and prototypes here. Use the applicable named pattern and its production components, then inspect the result through the live reference. Agents verify established patterns themselves and report desktop/mobile states, theme/font inheritance, interaction results, and static evidence.

For a new pattern, add a reference to the showcase registry and show it inside a representative Formamorph app screen at desktop and mobile sizes. The showcase is where the user approves it. Until the approval note is on its section here, the pattern is a proposal and no production surface adopts it.

The reference navigation uses equal flexible columns that wrap into additional rows. Every tab keeps enough width for its label, so all references remain readable and reachable without horizontal page scrolling.

The live shell renders DESIGN_SYSTEM_REFERENCES from DesignSystemShowcase.tsx. Add one definition with an ID, label, description, and production-backed component; the reference navigation and responsive shell update from that registry.

Add a matching ## Pattern: section here with its purpose, density, desktop/mobile behavior, component mapping, and applicable states. Mark it a proposal until the user approves it in the showcase, then record the approval on the section before any production surface adopts it.

Keep the guide and registry synchronized when an approved reference changes; retain the existing shell and shared semantic values.