@bongos/core 1.19.1062 → 1.19.1064

package/modules/hall-ui/public/tweak-editor.css

@@ -0,0 +1,437 @@
+/* modules/hall-ui/public/tweak-editor.css — the tweak editor, /builders/tweak-editor
+   (task 1004321 / BV2.TW10, goal 1000095; ADR 0341 D4 and D11).
+
+   THE PIXEL CONTRACT. docs/design/mocks/tweak-mode/Editor.dc.html is the
+   master design the owner approved, and this sheet is its inline styles, one
+   rule per element: the night studio behind, the glass top bar, the paper
+   document, the margin notes, the accent mark on a changed line, and the
+   "is in" panel. The values are the artboard's own, so the sheet is its own
+   token tier (the sky precedent, thinking.css; tests/hall_audit.mjs
+   LITERAL_EXEMPT names it). What a gate or a route forced to differ is in the
+   task's ship notes and modules/hall-ui/records/tweak-editor.md, one line each.
+
+   ONE STAGE, BOTH MODES. The artboard is the studio at night with a sheet of
+   paper over it. The paper is paper and the room is the room whatever the
+   hall's theme is, so the palette sits on the page's STAGE (main.tw-stage),
+   never on :root (the pack's :root is spliced after this sheet) and never on
+   body, so the hall chrome around the stage keeps its own light and dark.
+   The editor opens full screen (tweak-editor.js), which is the artboard. */
+
+body[data-page="tweak-editor"] .tw-stage {
+  color-scheme: dark;
+  --tw-room: #07080d;
+  --tw-frame: #14151b;
+  --tw-night: #0c1122;
+  --tw-moon: #f1e6d2;
+  --tw-floor: #0d0d12;
+  --tw-lamp: rgba(251, 149, 105, .16);
+  --tw-lamp-out: rgba(251, 149, 105, 0);
+  --tw-ink: #ffffff;
+  --tw-ink-soft: #c0c0c0;
+  --tw-ink-faint: #a8a8a8;
+  --tw-ink-dim: #8a8a90;
+  --tw-glass: rgba(255, 255, 255, .07);
+  --tw-bar-back: rgba(7, 8, 13, .84);
+  --tw-glass-lift: rgba(255, 255, 255, .12);
+  --tw-glass-edge: rgba(255, 255, 255, .16);
+  --tw-glass-rim: rgba(255, 255, 255, .2);
+  --tw-panel: rgba(255, 255, 255, .08);
+  --tw-panel-edge: rgba(255, 255, 255, .18);
+  --tw-panel-rim: rgba(255, 255, 255, .22);
+  --tw-panel-rule: rgba(255, 255, 255, .12);
+  --tw-scrim: rgba(4, 5, 9, .88);
+  --tw-drop: rgba(0, 0, 0, .55);
+  --tw-accent: #fb9569;
+  --tw-on-accent: #000000;
+  --tw-link: #fcbfa4;
+  --tw-paper: #fbfafc;
+  --tw-paper-ink: #17181a;
+  --tw-paper-soft: #55565a;
+  --tw-paper-faint: #65656a;
+  --tw-shared: #4a5bb8;
+  --tw-engineer: #a3481a;
+  --tw-line-hover: rgba(23, 24, 26, .035);
+  --tw-line-focus: rgba(251, 149, 105, .08);
+  --tw-face: var(--font-body, Manrope, "Segoe UI", system-ui, sans-serif);
+  --tw-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
+}
+
+/* The stage fills the content box: the hall's content column is a reading
+   width, and the artboard is the whole window. */
+body[data-page="tweak-editor"] .app-content { max-width: none; padding: 0; }
+body[data-page="tweak-editor"] .app-foot { display: none; }
+.tw-stage {
+  position: relative;
+  min-height: calc(100vh - var(--topbar-h, 56px));
+  padding: 28px 0 24px;
+  background: var(--tw-room);
+  color: var(--tw-ink);
+  font-family: var(--tw-face);
+  isolation: isolate;
+}
+html[data-fullscreen="on"] .tw-stage { min-height: 100vh; }
+.tw-stage a { color: var(--tw-link); }
+.tw-stage a:hover { color: var(--tw-accent); }
+.tw-stage button,
+.tw-stage textarea { font-family: inherit; }
+
+/* The room behind: the window with its moon, the floor, the lamp's glow. It
+   stays put while the paper scrolls over it (fixed, beside the rail and under
+   the top bar; the whole window in full screen), and it is clipped so it can
+   never widen the document. Positions are the artboard's, measured from the
+   centre of its 1440 frame. */
+.tw-room {
+  position: fixed;
+  top: var(--topbar-h, 56px);
+  left: var(--sidebar-w-rail, 64px);
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+html[data-fullscreen="on"] .tw-room { top: 0; left: 0; }
+.tw-window {
+  position: absolute;
+  left: calc(50% + 60px);
+  top: 86px;
+  width: 560px;
+  height: 560px;
+  box-sizing: border-box;
+  border: 16px solid var(--tw-frame);
+  border-radius: 6px;
+  background: var(--tw-night);
+  opacity: .45;
+}
+.tw-moon {
+  position: absolute;
+  left: 372px;
+  top: 64px;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--tw-moon);
+}
+.tw-floor {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 780px;
+  bottom: 0;
+  background: var(--tw-floor);
+}
+.tw-lamp {
+  position: absolute;
+  left: calc(50% + 440px);
+  top: 560px;
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--tw-lamp) 0%, var(--tw-lamp-out) 65%);
+}
+
+/* In full screen the shell's one button floats over the night room in either
+   theme, so on this page it wears the room's glass, not the hall's light ink. */
+html[data-fullscreen="on"] body[data-page="tweak-editor"] .fullscreen-toggle {
+  color: #ffffff;
+  background: rgba(255, 255, 255, .07);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
+}
+
+/* THE GLASS TOP BAR. Sticky, so the four doors stay in reach down a long page
+   and the paper passes under the glass. In full screen it steps in far enough
+   that the shell's one button (top right) never sits on it. */
+.tw-bar {
+  position: sticky;
+  top: 28px;
+  z-index: 2;
+  width: min(1200px, calc(100% - 48px));
+  margin: 0 auto;
+  box-sizing: border-box;
+  min-height: 64px;
+  padding: 0 12px 0 22px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  border-radius: 999px;
+  /* The artboard's glass (.07 white) over the room. The bar is sticky and the
+     white paper scrolls under it, where .07 glass alone turns white and its
+     white words vanish, so the glass lies on a backing of the room's own
+     black: over the room it reads exactly as the artboard's bar. */
+  background: linear-gradient(var(--tw-glass), var(--tw-glass)), var(--tw-bar-back);
+  border: 1px solid var(--tw-glass-edge);
+  backdrop-filter: blur(28px) saturate(160%);
+  -webkit-backdrop-filter: blur(28px) saturate(160%);
+  box-shadow: inset 0 1px 0 var(--tw-glass-rim);
+}
+html[data-fullscreen="on"] .tw-bar { width: min(1200px, calc(100% - 144px)); }
+/* With the chrome showing, the shell's fixed top bar holds the window's top,
+   so the stuck bar stops under it instead of sliding beneath it. */
+html:not([data-fullscreen="on"]) .tw-bar { top: calc(var(--topbar-h, 56px) + 12px); }
+.tw-stage .tw-back {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  font-size: 13.5px;
+  text-decoration: none;
+  color: var(--tw-ink-soft);
+  white-space: nowrap;
+}
+.tw-name { font-size: 15px; color: var(--tw-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tw-surface { color: var(--tw-ink-dim); }
+.tw-counter {
+  margin-left: auto;
+  font-size: 13px;
+  color: var(--tw-ink-faint);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.tw-actions { display: flex; align-items: center; gap: 14px; }
+.tw-stage .tw-btn {
+  display: inline-flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 0;
+  cursor: pointer;
+  font-size: 13.5px;
+  text-decoration: none;
+  white-space: nowrap;
+  color: var(--tw-ink);
+  background: var(--tw-glass);
+}
+.tw-stage .tw-btn:hover { color: var(--tw-ink); background: var(--tw-glass-lift); }
+.tw-stage .tw-btn--submit {
+  padding: 0 20px;
+  font-size: 14px;
+  color: var(--tw-on-accent);
+  background: var(--tw-accent);
+}
+.tw-stage .tw-btn--submit:hover { color: var(--tw-on-accent); background: var(--tw-link); }
+.tw-stage .tw-btn:disabled { cursor: default; opacity: .5; }
+.tw-stage .tw-btn:focus-visible,
+.tw-stage .tw-back:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
+
+/* THE PAPER. Every word of the page, in the order it shows them. It grows
+   with the page and the window scrolls (the hall's one-scroller seam), where
+   the artboard's fixed 860px sheet scrolled inside itself. */
+.tw-paper {
+  position: relative;
+  z-index: 1;
+  width: min(860px, calc(100% - 48px));
+  margin: 24px auto 0;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--tw-paper);
+  color: var(--tw-paper-ink);
+  box-shadow: 0 30px 80px var(--tw-drop);
+  padding: 64px 88px 72px 88px;
+}
+.tw-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 34px; }
+.tw-paper h1 {
+  margin: 0;
+  font-family: var(--tw-face);
+  font-size: 40px;
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  color: var(--tw-paper-ink);
+}
+.tw-intro { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tw-paper-soft); }
+.tw-section { margin-bottom: 26px; }
+.tw-paper h2 {
+  margin: 0 0 6px 0;
+  font-family: var(--tw-mono);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--tw-paper-faint);
+}
+.tw-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; align-items: start; }
+.tw-line {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  resize: none;
+  overflow: hidden;
+  border: 0;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin: 0 0 0 -10px;
+  font-size: 17px;
+  line-height: 1.6;
+  color: var(--tw-paper-ink);
+  background: transparent;
+}
+.tw-line:hover { background: var(--tw-line-hover); }
+.tw-line:focus { outline: none; background: var(--tw-line-focus); }
+/* The artboard's focus is the warm wash alone; the hall's focus floor wants a
+   ring a keyboard reader can find, so a hairline of the accent joins it. */
+.tw-line:focus-visible { outline: 1px solid var(--tw-accent); outline-offset: -1px; background: var(--tw-line-focus); }
+/* The accent mark: a changed line carries a small bar of the accent. */
+.tw-line--changed { box-shadow: inset 3px 0 0 var(--tw-accent); }
+.tw-line[readonly] { cursor: default; }
+.tw-line[readonly]:hover { background: transparent; }
+.tw-note { padding-top: 9px; font-size: 12px; line-height: 1.4; color: var(--tw-paper-faint); overflow-wrap: anywhere; }
+.tw-note--shared { color: var(--tw-shared); }
+.tw-note--engineer { color: var(--tw-engineer); }
+.tw-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.tw-loading { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tw-paper-soft); }
+
+/* A notice inside the paper, above the words: the page is someone else's, the
+   upload was refused, the submit named lines. Not on the artboard, which has
+   no failing state; it wears the paper's own ink and the engineer note's warm
+   brown, and its one action is a paper pill. */
+.tw-notice {
+  margin: 0 0 30px 0;
+  padding: 16px 18px;
+  border-radius: 8px;
+  background: var(--tw-line-hover);
+  box-shadow: inset 3px 0 0 var(--tw-engineer);
+  color: var(--tw-paper-ink);
+  font-size: 14.5px;
+  line-height: 1.5;
+}
+.tw-notice p { margin: 0; }
+.tw-notice ul { margin: 8px 0 0 0; padding-left: 18px; }
+.tw-notice li { margin: 2px 0; }
+.tw-notice__act {
+  margin-top: 12px;
+  height: 44px;
+  padding: 0 20px;
+  border-radius: 999px;
+  border: 0;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--tw-on-accent);
+  background: var(--tw-accent);
+}
+.tw-notice__act:focus-visible { outline: 2px solid var(--tw-paper-ink); outline-offset: 2px; }
+
+/* THE "IS IN" PANEL. Glass over the dimmed room, the next page named, and
+   three ways on. Fixed, so it sits over the whole window. The artboard's
+   scrim is .45, but the panel sits over the white PAPER, and its white and
+   grey words on paper seen through .45 fall under AA (2.9:1). At .88 the paper
+   dims to the room's own dark and every word in the panel clears 4.5:1. */
+.tw-done {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 160);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: var(--tw-scrim);
+}
+.tw-done[hidden] { display: none; }
+.tw-done__panel {
+  width: 560px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 36px;
+  border-radius: 30px;
+  background: var(--tw-panel);
+  border: 1px solid var(--tw-panel-edge);
+  backdrop-filter: blur(30px) saturate(160%);
+  -webkit-backdrop-filter: blur(30px) saturate(160%);
+  box-shadow: inset 0 1px 0 var(--tw-panel-rim), 0 40px 90px var(--tw-drop);
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.tw-done__head { display: flex; flex-direction: column; gap: 8px; }
+.tw-done__title { margin: 0; font-size: 30px; font-weight: 200; line-height: 1.2; letter-spacing: -0.03em; color: var(--tw-ink); }
+.tw-done__title:focus { outline: none; }
+.tw-done__title:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 4px; }
+.tw-done__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tw-ink-soft); }
+.tw-next { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 1px solid var(--tw-panel-rule); }
+.tw-next__label { font-family: var(--tw-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tw-ink-faint); }
+.tw-next__title { font-size: 24px; font-weight: 300; line-height: 1.3; color: var(--tw-ink); }
+.tw-next__why { font-size: 14px; line-height: 1.5; color: var(--tw-ink-soft); }
+.tw-picks { display: flex; flex-wrap: wrap; gap: 8px; }
+.tw-pick {
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  background: var(--tw-glass);
+  border: 1px solid var(--tw-glass-edge);
+  color: var(--tw-ink);
+  font-size: 13.5px;
+}
+.tw-pick:hover { background: var(--tw-glass-lift); }
+.tw-done__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.tw-take {
+  height: 48px;
+  padding: 0 26px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: 0;
+  background: var(--tw-accent);
+  color: var(--tw-on-accent);
+  font-size: 15px;
+}
+.tw-take:hover { background: var(--tw-link); }
+.tw-take:disabled { cursor: default; opacity: .5; }
+/* "pick another" is the artboard's link, drawn as a button because it opens
+   the other pages in place (the studio artboard's own "pick another"). */
+.tw-stage .tw-linkish {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  font-size: 13.5px;
+  color: var(--tw-ink-faint);
+  text-decoration: underline;
+}
+.tw-stage .tw-linkish:hover { color: var(--tw-accent); }
+.tw-stage .tw-home { margin-left: auto; }
+.tw-take:focus-visible,
+.tw-pick:focus-visible,
+.tw-stage .tw-linkish:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
+.tw-done__error { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tw-link); }
+
+/* PHONE WIDTH (not on the artboard, which is 1440 wide). The bar stops being
+   one pill and becomes a glass card of two rows: where you are and how far,
+   then the four doors, wrapping. The paper takes the width, and each margin
+   note drops under its line. */
+@media (max-width: 760px) {
+  .tw-stage { padding-top: 12px; }
+  .tw-bar,
+  html[data-fullscreen="on"] .tw-bar {
+    top: 8px;
+    width: calc(100% - 24px);
+    flex-wrap: wrap;
+    gap: 4px 12px;
+    padding: 6px 12px 12px 16px;
+    border-radius: 24px;
+  }
+  /* The shell's button floats in the top right corner in full screen. */
+  html[data-fullscreen="on"] .tw-bar { padding-right: 56px; }
+  .tw-name { flex: 1 1 0; }
+  .tw-counter { flex: 1 0 100%; margin-left: 0; }
+  .tw-actions { flex: 1 0 100%; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
+  html[data-fullscreen="on"] .tw-actions { margin-right: -44px; }
+  .tw-paper { width: calc(100% - 24px); margin-top: 16px; padding: 36px 20px 44px; }
+  .tw-paper h1 { font-size: 32px; }
+  .tw-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .tw-note { padding: 0 0 8px 0; }
+  .tw-note:empty { display: none; }
+  .tw-done__panel { padding: 28px 24px; border-radius: 24px; }
+  .tw-done__title { font-size: 26px; }
+  .tw-stage .tw-home { margin-left: 0; }
+}
+@media (max-width: 768px) { .tw-room { left: 0; } }

package/modules/hall-ui/public/tweak-editor.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<!-- data-artist="on": the studio's mode marker (studio.html). The editor is
+     the artist's own room too, entered from the studio. -->
+<html lang="en" data-artist="on">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tweak a page — {{worldName}}</title>
+  <meta name="description" content="Tweak Mode's editor: every word of one page as a single document, typed over in place and saved as you go, then submitted as one batch.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/tweak-editor.css?v=2026-09-28-tw10">
+</head>
+<!-- THE TWEAK EDITOR (task 1004321 / BV2.TW10, goal 1000095; ADR 0341 D4 and
+     D11). docs/design/mocks/tweak-mode/Editor.dc.html is the master design:
+     the glass top bar, one paper document holding every word of the page in
+     page order, typed over in place and autosaved, the margin notes, the
+     accent mark and "was:" on a changed line, and the "is in" panel with take
+     next, pick another and back to the studio. Every difference a gate or a
+     route forced is listed in modules/hall-ui/records/tweak-editor.md.
+
+     Which page: ?page=<page id> (landing:index). With none, the page the
+     caller holds (GET /copy-desk/next's resume). The reads and writes are
+     copy-desk's: GET and PUT /copy-desk/pages/:pageId/draft, the .docx pair,
+     the submit, GET /copy-desk/next and the claim "take next" posts.
+
+     data-fullscreen-switch: the shell's full-screen switch (task 1004327). The
+     artboard is the editor over the whole window, so the editor opens full
+     screen the first time (tweak-editor.js), and the switch is remembered. -->
+<body data-page="tweak-editor" data-page-title="Tweak a page" data-fullscreen-switch>
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+
+      <main id="hall-main" class="tw-stage">
+        <!-- The studio at night, dimmed behind the paper. -->
+        <div class="tw-room" aria-hidden="true">
+          <div class="tw-window"><div class="tw-moon"></div></div>
+          <div class="tw-floor"></div>
+          <div class="tw-lamp"></div>
+        </div>
+
+        <!-- A <div>, not a <header>: the shell's top bar is the page's one
+             <header> (the kit's one-header-main-h1 floor). -->
+        <div class="tw-bar" id="tw-bar">
+          <a class="tw-back" href="/builders/studio">← studio</a>
+          <span class="tw-name"><span id="tw-name">Tweak a page</span> <span class="tw-surface" id="tw-surface"></span></span>
+          <span class="tw-counter" id="tw-counter" aria-live="polite"></span>
+          <div class="tw-actions">
+            <a class="tw-btn" id="tw-open" href="/builders/studio" target="_blank" rel="noopener">open the page ↗</a>
+            <button class="tw-btn" id="tw-download" type="button" disabled>download .docx</button>
+            <button class="tw-btn" id="tw-upload" type="button" disabled>upload .docx</button>
+            <input id="tw-file" type="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden>
+            <button class="tw-btn tw-btn--submit" id="tw-submit" type="button" disabled>submit page</button>
+          </div>
+        </div>
+
+        <article class="tw-paper" id="tw-paper" aria-labelledby="tw-title">
+          <div class="tw-head">
+            <h1 id="tw-title">Tweak a page</h1>
+            <p class="tw-intro">Every word on the page, in the order it shows them. Type over anything, or download it, work in Word, and upload it back.</p>
+          </div>
+          <div class="tw-notice" id="tw-notice" role="status" hidden></div>
+          <div id="tw-doc">
+            <p class="tw-loading">Reading the page…</p>
+          </div>
+        </article>
+
+        <!-- Submit: "<page> is in", then next up. Hidden until the submit lands. -->
+        <div class="tw-done" id="tw-done" hidden>
+          <div class="tw-done__panel" role="dialog" aria-modal="true" aria-labelledby="tw-done-title">
+            <div class="tw-done__head">
+              <h2 class="tw-done__title" id="tw-done-title" tabindex="-1">The page is in.</h2>
+              <p class="tw-done__sub">It comes back to your studio once it is applied, and nothing ships until you have seen it.</p>
+            </div>
+            <div class="tw-next" id="tw-next">
+              <span class="tw-next__label">next up</span>
+              <span class="tw-next__title" id="tw-next-title">Finding the next page…</span>
+              <span class="tw-next__why" id="tw-next-why"></span>
+            </div>
+            <p class="tw-done__error" id="tw-done-error" role="alert" hidden></p>
+            <div class="tw-done__acts">
+              <button class="tw-take" id="tw-take" type="button" disabled>take next</button>
+              <button class="tw-linkish" id="tw-pick" type="button" aria-expanded="false" aria-controls="tw-picks" hidden>pick another</button>
+              <a class="tw-linkish tw-home" href="/builders/studio">back to the studio</a>
+            </div>
+            <div class="tw-picks" id="tw-picks" hidden></div>
+          </div>
+        </div>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell.js?v=2026-09-27-fullscreen"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
+<script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw10"></script>
+<script src="/builders/tweak-editor.js?v=2026-09-28-tw10"></script>
+</body>
+</html>