bedrock-flows 0.7.1

package/template/public/lightbox.js

@@ -0,0 +1,87 @@
+// Lightbox — shared image viewer for the prototype harness (comment
+// attachments in the screen/wireflow panels and the dashboard queue).
+// Self-contained: injects its own styles, exposes window.bfLightbox.open(url,
+// alt, caption). Click backdrop / press Esc / click × to close; the image fits the
+// viewport and stays crisp at its native size when smaller. Top window only.
+(function () {
+  if (window.self !== window.top) return;
+  if (window.bfLightbox) return;
+
+  var ov = null;
+  var imgEl = null;
+  var capEl = null;
+  var prevOverflow = '';
+
+  function injectStyle() {
+    if (document.getElementById('bf-lightbox-style')) return;
+    var s = document.createElement('style');
+    s.id = 'bf-lightbox-style';
+    s.textContent =
+      '.bf-lightbox{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;background:rgba(8,11,18,.82);backdrop-filter:blur(2px);cursor:zoom-out}' +
+      '.bf-lightbox.is-open{display:flex}' +
+      '.bf-lightbox img{max-width:94vw;max-height:80vh;display:block;border-radius:4px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#fff;cursor:default}' +
+      '.bf-lightbox__close{position:fixed;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}' +
+      '.bf-lightbox__close:hover{background:rgba(255,255,255,.24)}' +
+      '.bf-lightbox__figure{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:94vw;cursor:default}' +
+      '.bf-lightbox__caption{max-width:70ch;max-height:22vh;overflow-y:auto;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.08);color:#e7ecf3;font:13px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:center;white-space:pre-wrap}' +
+      '.bf-lightbox__caption[hidden]{display:none}';
+    document.head.appendChild(s);
+  }
+
+  function build() {
+    injectStyle();
+    ov = document.createElement('div');
+    ov.className = 'bf-lightbox';
+    ov.setAttribute('role', 'dialog');
+    ov.setAttribute('aria-modal', 'true');
+    ov.setAttribute('aria-label', 'Image preview');
+    var figure = document.createElement('div');
+    figure.className = 'bf-lightbox__figure';
+    imgEl = document.createElement('img');
+    imgEl.alt = '';
+    capEl = document.createElement('div');
+    capEl.className = 'bf-lightbox__caption';
+    capEl.hidden = true;
+    var close = document.createElement('button');
+    close.type = 'button';
+    close.className = 'bf-lightbox__close';
+    close.setAttribute('aria-label', 'Close image preview');
+    close.textContent = '×';
+    close.addEventListener('click', closeBox);
+    figure.appendChild(imgEl);
+    figure.appendChild(capEl);
+    ov.appendChild(figure);
+    ov.appendChild(close);
+    // Backdrop click closes; clicking the image itself does not.
+    ov.addEventListener('click', function (e) {
+      if (e.target === ov) closeBox();
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && ov.classList.contains('is-open')) {
+        e.preventDefault();
+        closeBox();
+      }
+    });
+    document.body.appendChild(ov);
+  }
+
+  function openBox(url, alt, caption) {
+    if (!ov) build();
+    imgEl.src = url;
+    imgEl.alt = alt || 'Attached image';
+    capEl.textContent = caption || '';
+    capEl.hidden = !caption;
+    prevOverflow = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden'; // scroll lock
+    ov.classList.add('is-open');
+  }
+
+  function closeBox() {
+    if (!ov) return;
+    ov.classList.remove('is-open');
+    imgEl.src = '';
+    document.documentElement.style.overflow = prevOverflow;
+  }
+
+  window.bfLightbox = { open: openBox, close: closeBox };
+})();

package/template/public/proto-chrome.css

@@ -0,0 +1,596 @@
+/* Phone-frame containment for toast/snackbar — production uses
+   position:fixed (correct for a real device viewport), but inside the
+   402×874 phone preview that lands at the BROWSER viewport bottom-right,
+   off the phone. Scope the override to `.is-phone-frame` (set on <html>
+   by screen.njk when phoneFrame=true) so production behaviour is
+   untouched. */
+html.is-phone-frame body { position: relative; }
+html.is-phone-frame .toast,
+html.is-phone-frame .snackbar { position: absolute !important; }
+
+/*
+ * Prototype chrome — top + bottom harness bars that wrap every prototype
+ * sub-page. Not part of any DS component; harness scaffolding only.
+ *
+ * Chrome is hidden by default on every sub-page (iframed or standalone) so
+ * the screen looks like the real product. Press `.` to toggle visibility,
+ * `Esc` to hide. A tiny dot in the bottom-left acts as a discoverable
+ * affordance and click target.
+ *
+ * The legacy `.is-embedded` class is still added when the page is iframed
+ * (kept for future use); the default-hidden state already covers it.
+ *
+ * Layout note: when visible, the bars sit in normal flow at the top and
+ * bottom of <body> and *push the page content down/up* — they no longer
+ * overlay it. This keeps fixed elements inside the prototype (sidebars,
+ * headers) from being clipped by the harness bars when the designer
+ * presses `.` to inspect them. <body> is a flex column with a min-height
+ * of 100vh so the inner content still fills the viewport when chrome is
+ * hidden.
+ */
+
+/* === Body layout ======================================================== */
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+/* Whatever sits between the two bars stretches to fill the space. The
+   `> :not(...)` selector is intentionally broad — any direct child that
+   isn't the harness chrome behaves like the page content slot. */
+/*
+ * Default growth behavior for direct body children: fill the column. The
+ * base rule uses a low-specificity universal selector so per-class
+ * overrides below can win without resorting to !important. The harness
+ * chrome bars opt out via their own class rule.
+ */
+body > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.proto-topbar,
+.proto-bottombar { flex: 0 0 auto; }
+
+/* These blocks are now inside .proto-content, so no per-class flex
+   overrides are needed. .proto-content itself fills the gap between the
+   harness bars; its children stack at natural height by default. */
+
+/* === Stage wrapper ===================================================== *
+ * `.proto-stage` wraps the topbar, the page content slot, and the
+ * bottombar. Body is the outer flex column (above), but the same logic
+ * needs to apply *inside* the stage so the content slot fills the gap
+ * between the two harness bars. Without this, pages whose content is
+ * shorter than the viewport leave whitespace below the bottombar — the
+ * sticky `bottom: 0` doesn't help when the bar is already at its
+ * natural document position with room to spare beneath. */
+.proto-stage {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+.proto-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.proto-stage > .proto-topbar,
+.proto-stage > .proto-bottombar { flex: 0 0 auto; }
+
+/* === Bars =============================================================== */
+
+/* Chrome tokens — re-mapped under prefers-color-scheme: dark below. The
+   prototype content (everything between the top and bottom harness bars)
+   does NOT use these — it stays in the DS's own light palette so designs
+   look like the real product regardless of the user's system theme. */
+:root {
+  --proto-chrome-bg: #fff;
+  --proto-chrome-pill-bg: #f8fafc;
+  --proto-chrome-text: #0f172a;
+  --proto-chrome-text-muted: #64748b;
+  --proto-chrome-border: #e5e7eb;
+  --proto-chrome-nav-bg: #fff;
+  /* Height the topbar / bottombar occupy at the viewport edges. The
+     comments panel (position:fixed) insets by these so it never tucks
+     under the chrome bars. Zeroed when the chrome is hidden/embedded. */
+  --proto-topbar-h: 45px;
+  --proto-bottombar-h: 45px;
+}
+/* Honors the shared manual theme override (data-theme on <html>, set
+   from the dashboard/wireflow user menu) and falls back to the OS. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --proto-chrome-bg: #0f172a;
+    --proto-chrome-pill-bg: #1e293b;
+    --proto-chrome-text: #f1f5f9;
+    --proto-chrome-text-muted: #94a3b8;
+    --proto-chrome-border: #334155;
+    --proto-chrome-nav-bg: #1e293b;
+  }
+}
+:root[data-theme='dark'] {
+  --proto-chrome-bg: #0f172a;
+  --proto-chrome-pill-bg: #1e293b;
+  --proto-chrome-text: #f1f5f9;
+  --proto-chrome-text-muted: #94a3b8;
+  --proto-chrome-border: #334155;
+  --proto-chrome-nav-bg: #1e293b;
+}
+
+.proto-topbar,
+.proto-bottombar {
+  position: sticky;
+  /* Sit above any in-prototype modal/backdrop. The harness chrome is
+     review tooling — Back / Continue and the page-states dropdown must
+     stay reachable even when the product UI under test pops a dialog. */
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  background: var(--proto-chrome-bg);
+  padding: 8px 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  flex-shrink: 0;
+}
+
+.proto-topbar {
+  top: 0;
+  /* Back link + step pill anchored left so the right edge stays free for
+     the comments sidebar. */
+  justify-content: flex-start;
+  gap: 12px;
+  border-bottom: 1px solid var(--proto-chrome-border);
+}
+
+.proto-bottombar {
+  bottom: 0;
+  /* Three columns: spacer · centered nav · right-aligned comments toggle.
+     Centering the Back/Continue feels more intentional than left-pinned
+     and leaves room for a right-side action without overlap. */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  border-top: 1px solid var(--proto-chrome-border);
+}
+.proto-bottombar > .proto-nav { grid-column: 2; justify-self: center; }
+.proto-bottombar > .proto-bottombar__right {
+  grid-column: 3;
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* === Viewport control + preview pane =================================== *
+ * The Bedrock breakpoint control, inline at the right of the topbar. Picking
+ * a width swaps the content slot for a width-constrained iframe (.proto-preview)
+ * so real CSS media queries fire — injected by the script in screen.njk. */
+.proto-viewport {
+  margin-left: auto; /* push to the right edge of the topbar */
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+}
+/* Main half — quick desktop/mobile toggle. */
+.proto-viewport__main {
+  width: 28px;
+  height: 26px;
+  padding: 0;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--proto-chrome-pill-bg);
+  border: 1px solid var(--proto-chrome-border);
+  border-right: none;
+  border-radius: 6px 0 0 6px;
+  color: var(--proto-chrome-text);
+  cursor: pointer;
+}
+.proto-viewport__main svg { width: 15px; height: 15px; display: block; }
+.proto-viewport__main:hover { background: var(--proto-chrome-border); }
+.proto-viewport__main.is-active {
+  background: var(--proto-chrome-text);
+  border-color: var(--proto-chrome-text);
+  color: var(--proto-chrome-bg);
+}
+/* Caret half — a <summary> toggling the breakpoint menu. */
+.proto-viewport__menu { position: relative; display: inline-flex; }
+.proto-viewport__caret {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  width: 16px;
+  height: 26px;
+  padding: 0;
+  background: var(--proto-chrome-pill-bg);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 0 6px 6px 0;
+  color: var(--proto-chrome-text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.proto-viewport__caret::-webkit-details-marker { display: none; }
+.proto-viewport__caret::marker { content: ''; }
+.proto-viewport__caret:hover,
+.proto-viewport__menu[open] .proto-viewport__caret { background: var(--proto-chrome-border); color: var(--proto-chrome-text); }
+/* Breakpoint dropdown. */
+.proto-viewport__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 1001;
+  min-width: 190px;
+  padding: 4px;
+  background: var(--proto-chrome-nav-bg);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.proto-viewport__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  border-radius: 6px;
+  color: var(--proto-chrome-text);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+.proto-viewport__item:hover { background: var(--proto-chrome-pill-bg); }
+.proto-viewport__item.is-active { background: var(--proto-chrome-text); color: var(--proto-chrome-bg); }
+.proto-viewport__item-icon { display: inline-flex; flex: 0 0 auto; }
+.proto-viewport__item-icon svg { width: 16px; height: 16px; display: block; }
+.proto-viewport__item-label { flex: 1; }
+.proto-viewport__item-w { color: var(--proto-chrome-text-muted); font-variant-numeric: tabular-nums; }
+.proto-viewport__item.is-active .proto-viewport__item-w { color: inherit; opacity: 0.75; }
+/* Breakpoints outside the flow's intended viewport range — still clickable
+   (the range is advisory), just visibly demoted. */
+.proto-viewport__item.is-out-of-range > * { opacity: 0.4; }
+.proto-viewport__item.is-out-of-range:hover > * { opacity: 0.7; }
+/* Intended-range footer under the breakpoint list. */
+.proto-viewport__range {
+  margin-top: 3px;
+  padding: 6px 8px 4px;
+  border-top: 1px solid var(--proto-chrome-border);
+  font-size: 10.5px;
+  color: var(--proto-chrome-text-muted);
+  white-space: nowrap;
+}
+.proto-viewport__range span { opacity: 0.7; font-variant-numeric: tabular-nums; }
+.proto-viewport__btn:hover { color: var(--proto-chrome-text); }
+.proto-viewport__btn.is-active {
+  background: var(--proto-chrome-text);
+  border-color: var(--proto-chrome-text);
+  color: var(--proto-chrome-bg);
+}
+
+.proto-preview { display: none; }
+.proto-stage.is-previewing > .proto-content { display: none; }
+.proto-stage.is-previewing > .proto-preview {
+  display: flex;
+  /* A definite height so a frame set to height:100% (breakpoints with no
+     declared height, e.g. desktop/tablet) actually fills the pane instead of
+     collapsing — the .proto-stage flex chain bottoms out at an auto-height
+     body, so a percentage height has nothing to resolve against otherwise.
+     Sits between the two sticky 45px chrome bars. */
+  height: calc(100vh - var(--proto-topbar-h) - var(--proto-bottombar-h));
+  align-items: flex-start;
+  justify-content: center;
+  overflow: auto;
+  padding: 16px;
+  background: #e5e7eb;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .proto-stage.is-previewing > .proto-preview { background: #111; }
+}
+:root[data-theme='dark'] .proto-stage.is-previewing > .proto-preview { background: #111; }
+.proto-preview__frame {
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+  max-width: 100%;
+  flex: 0 0 auto;
+}
+.proto-preview__iframe { display: block; width: 100%; height: 100%; border: none; }
+/* Right-edge drag handle to resize the preview container. */
+.proto-preview__resize {
+  position: absolute;
+  top: 0;
+  right: -6px;
+  width: 12px;
+  height: 100%;
+  z-index: 2;
+  cursor: ew-resize;
+  touch-action: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.proto-preview__resize::before {
+  content: '';
+  width: 4px;
+  height: 44px;
+  border-radius: 2px;
+  background: rgba(15, 23, 42, 0.25);
+}
+.proto-preview__resize:hover::before { background: rgba(15, 23, 42, 0.55); }
+/* Live dimension readout, centered at the top of the frame. Transient: shown
+   (.is-on, toggled by the resize/breakpoint code) only while the size is
+   changing, then faded out so it doesn't cover the screen under review. */
+.proto-preview__size {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.7);
+  color: #fff;
+  font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.proto-preview__size.is-on { opacity: 1; }
+/* Amber readout while the frame sits outside the intended viewport range. */
+.proto-preview__size.is-out-of-range { background: rgba(180, 83, 9, 0.85); }
+
+/* === Children of the bars =============================================== */
+
+.proto-pill {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--proto-chrome-text-muted);
+  background: var(--proto-chrome-pill-bg);
+  padding: 4px 10px;
+  border-radius: 999px;
+}
+
+.proto-home {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--proto-chrome-text-muted);
+  background: var(--proto-chrome-pill-bg);
+  text-decoration: none;
+  padding: 4px 10px 4px 8px;
+  border-radius: 999px;
+}
+.proto-home__icon { flex: none; display: block; }
+.proto-home:hover { color: var(--proto-chrome-text); }
+
+/* Page-states dropdown — sits in the topbar after the step pill. Only
+   rendered when the page has 2+ states (sibling `<base>--<state>.njk`
+   files or declared URL-param states via `pageParamStates`). Uses
+   <details>/<summary> so open/close needs no JS. */
+.proto-states {
+  position: relative;
+  margin-left: 4px;
+}
+.proto-states__summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 10px;
+  font-size: 11px;
+  background: var(--proto-chrome-nav-bg);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 6px;
+  color: var(--proto-chrome-text);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.proto-states__summary::-webkit-details-marker { display: none; }
+.proto-states__summary:hover { background: var(--proto-chrome-pill-bg); }
+.proto-states__label {
+  color: var(--proto-chrome-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+}
+.proto-states__value {
+  font-weight: 500;
+}
+.proto-states__caret { font-size: 9px; opacity: 0.7; }
+.proto-states__panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--proto-chrome-bg);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+  /* Sit above any in-prototype dialog/modal overlay. The harness chrome
+     is review tooling — it must always be reachable, even when the
+     product UI under test has popped a modal at z-index ~100-200. */
+  z-index: 1000;
+}
+.proto-states__item {
+  display: block;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--proto-chrome-text);
+  text-decoration: none;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.proto-states__item:hover {
+  background: var(--proto-chrome-pill-bg);
+  color: var(--proto-chrome-text);
+}
+.proto-states__item.is-active {
+  background: var(--proto-chrome-pill-bg);
+  color: var(--proto-chrome-text);
+  font-weight: 500;
+}
+.proto-states__item.is-active::before {
+  content: '✓ ';
+  color: var(--proto-chrome-text-muted);
+}
+
+.proto-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.proto-nav a {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0 14px;
+  font-size: 12px;
+  line-height: 1;
+  background: var(--proto-chrome-nav-bg);
+  color: var(--proto-chrome-text);
+  text-decoration: none;
+  border-radius: 6px;
+  border: 1px solid var(--proto-chrome-border);
+}
+.proto-nav a:hover { background: var(--proto-chrome-pill-bg); }
+/* Primary navigation (Continue) shares the chrome's neutral palette —
+   it's prototype-harness chrome, not a product CTA, so it must not look
+   like a brand action. The chrome stays grey-on-grey, with a slightly
+   darker fill so Continue still reads as the primary action. */
+.proto-nav a.primary {
+  background: var(--proto-chrome-text);
+  color: var(--proto-chrome-bg);
+  border-color: var(--proto-chrome-text);
+}
+.proto-nav a.primary:hover {
+  background: var(--proto-chrome-text-muted);
+  border-color: var(--proto-chrome-text-muted);
+}
+
+/* === Phone-frame mode ===================================================
+   Pages that render a phone-shaped body (e.g. 402×874 in F-002) opt in by
+   setting `{% set phoneFrame = true %}` before extending screen.njk, which
+   adds `is-phone-frame` to <html>. In this mode:
+     - <html> becomes a centering flex container so the phone-sized body
+       sits in the middle of the viewport with the html background
+       (slate-300) showing on all sides.
+     - The harness bars detach from normal flow and pin to the viewport
+       top/bottom, full-width, so they sit *outside* the phone frame
+       instead of being squeezed inside its 402px column.
+   The standard sticky-in-flow behavior is unchanged for desktop pages. */
+.is-phone-frame {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+/* Clamp the phone body to its declared size so inner scrollable regions
+   (overflow-y: auto children) actually scroll instead of the body growing.
+   height wins over per-page min-height because .is-phone-frame body has
+   higher specificity than the bare `body` rule in {% block styles %}.
+   width is clamped too so the standalone screen renders as a 402px phone
+   column (the wireflow node cell enforces this on its own, but a directly
+   opened screen has no cell — without this it stretches to the full
+   viewport and looks like the desktop layout). */
+.is-phone-frame body {
+  width: 402px;
+  height: 874px;
+  overflow: hidden;
+}
+.is-phone-frame .proto-topbar,
+.is-phone-frame .proto-bottombar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: auto;
+}
+.is-phone-frame .proto-topbar { top: 0; }
+.is-phone-frame .proto-bottombar { bottom: 0; }
+
+/* === Hidden states ====================================================== */
+
+.is-embedded .proto-topbar,
+.is-embedded .proto-bottombar,
+.is-chrome-hidden .proto-topbar,
+.is-chrome-hidden .proto-bottombar { display: none !important; }
+
+/* Bars gone → the comments panel can use the full viewport height. */
+.is-embedded,
+.is-chrome-hidden {
+  --proto-topbar-h: 0px;
+  --proto-bottombar-h: 0px;
+}
+
+/* === Phone chrome compaction ============================================ *
+ * On an actual touch device the chrome competes with a small screen, so it
+ * slims down: the viewport preview control disappears (the device IS the
+ * viewport), and the step pill drops its "Step" prefix — "2 of 5 · <title>"
+ * (the title stays; it's the useful part). */
+@media (pointer: coarse) {
+  .proto-viewport { display: none; }
+  .proto-pill__prefix { display: none; }
+}
+
+/* === Copy-to-Figma button (bottombar right) ============================== *
+ * Visual parity with .screen-viewlocal / .screen-comments-toggle so the
+ * three sit as a clean group at the bottom-right of the harness chrome.
+ * Lives in proto-chrome.css (not screen-comments.css) because it's harness
+ * scaffolding, unrelated to comments.
+ */
+.screen-figma-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  background: var(--proto-chrome-nav-bg);
+  color: var(--proto-chrome-text);
+  border: 1px solid var(--proto-chrome-border);
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.screen-figma-copy:hover:not(:disabled) { background: var(--proto-chrome-pill-bg); }
+.screen-figma-copy:disabled { opacity: 0.7; cursor: progress; }
+/* Busy: swap the clipboard icon for a small spinner so the in-flight state
+   reads as deliberate progress instead of a stalled control. */
+.screen-figma-copy.is-busy svg { display: none; }
+.screen-figma-copy.is-busy::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  border: 2px solid var(--proto-chrome-border);
+  border-top-color: var(--proto-chrome-text);
+  border-radius: 50%;
+  animation: figma-copy-spin 0.7s linear infinite;
+}
+@keyframes figma-copy-spin { to { transform: rotate(360deg); } }
+.screen-figma-copy.is-done {
+  background: var(--proto-chrome-text);
+  color: var(--proto-chrome-bg);
+  border-color: var(--proto-chrome-text);
+}
+.screen-figma-copy.is-error {
+  border-color: #dc2626;
+  color: #dc2626;
+}
+@media (max-width: 720px) { .screen-figma-copy { display: none !important; } }