[mortondev]

The fourth of the stack that builds a new design engine for the portal. This one adds the Appearance tab, where a person edits the design draft, previews it and publishes it, and a Labs switch to turn the engine on. With the switch off, nothing changes.

Labs

Settings › Labs gains a switch for the new portal design, next to Copilot on Home, with its label and description in all 13 catalogues.

Appearance

On the design engine, Settings › Portal opens on Appearance. Today's menu and welcome message sit under a Navigation tab until they move into the design. A workspace on the legacy theme keeps the page it has always had.

• Brand: mode; the accent, background and text colours, with cards, raised surfaces, secondary text and borders behind a toggle; dark colours; heading and body fonts; heading weight; corners.
• Sections: menu style, card style, density, filter side and page width.
• Drawn tiles: every choice is a tile that draws what it does.
• Saving: the draft saves on the server shortly after each change, so leaving the page loses nothing and needs no confirmation.
• Preview: the admin resolves the draft with the code the server uses and posts the CSS, the data-qb-* attributes and the fonts into the frame, so the preview cannot drift from what visitors get. The frame applies them over the saved design and puts the saved values back when the draft ends. Light and dark follow the design's mode.
• Draft bar: it reads "Draft · N changes, not live", counted against what visitors see now. It offers to discard the draft or review it.
• Review and publish: lists each change with its value now and in the draft and notes the colours the solver adjusted. It refuses a design whose text cannot be read, and publishes with an optional note. A draft overtaken by another publish is refused with a message rather than overwriting it.
• History: lists the published versions and restores one after a confirmation. A restore publishes it as the newest version and keeps any draft in progress.

The editor state now carries live, the design visitors see now, which the REST response documents too.

None of this reaches visitors: the Settings › Portal loader imports the design queries only on the design engine (a loader's imports ship in the entry chunk), and the preview frame's design channel loads only when the first draft design arrives.

Screens

Checked in a real browser against the production build on the bench database: Brand, Sections with three changes applied in the preview (pill menu, raised cards, compact density), and Review and publish listing them. No console errors.

Verification

• Typecheck, lint, the production build and the server-function manifest check pass.
• Unit suite: 22,293 passed. The one failure, a settings mutation test that timed out under full-suite load, passes on its own.
• New tests:
  • the draft hook saves once after changes settle, counts changes against the live design, saves a pending change before publishing, and reports a refused publish;
  • the view shows a change in the preview and the draft bar at once, and publishes it with its note;
  • the frame applies a draft design's CSS and attributes, accepts only data-qb-* attributes, and restores the saved values;
  • the diff lists changed leaves.

[mortondev]

Condensed into #878. The stack is now five PRs, #878 to #882; this branch is kept as it was.