mockpit 1.2.0 → 1.3.0

package/dist/server/surfacePage.js

@@ -1,3 +1,4 @@
+import { scanFills, slotCss } from "./fills.js";
 import { CDN_ALLOWLIST, checkCdnUrl } from "./cdn.js";
 import { CORE_CSS, KITS, kitAssets } from "./kits.js";
 import { expandIcons } from "./icons.js";
@@ -63,7 +64,11 @@ const TOKENS_CSS = `
   --border-radius-lg: 12px;
   --border-radius-xl: 16px;
 }
-html { box-sizing: border-box; scrollbar-width: none; }
+/* A page that scrolls inside a host's frame stops at its own ends instead of
+   handing the rest of a swipe to the host (Safari reads the root's value), and
+   a pinch on it can't zoom the whole viewer around it. */
+html { box-sizing: border-box; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x pan-y; }
+body { overscroll-behavior: contain; }
 html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
 *, *::before, *::after { box-sizing: inherit; }
 body {
@@ -356,7 +361,7 @@ export const HIT_TEST_JS = `
 //   copy             {text}                      window.copyToClipboard (BRIDGE_JS)
 //   switch-session   {key}                       Cmd+Opt+ArrowUp/Down (BRIDGE_JS)
 //   hit-test-result  {ref, path, text, rect}     reply to hit-test (HIT_TEST_JS)
-//   parts            {version, parts, height, scroll:{x,y}, viewport:{w,h}}  (PARTS_JS)
+//   parts            {version, parts, height, scroll:{x,y}, viewport:{w,h,scrollW}}  (PARTS_JS)
 //       parts[i] = {name, label, key, box:{x,y,w,h}, visible, fixed, depth, parent, order}
 //       box is in DOCUMENT px (viewport rect + scroll), so the host draws
 //       (box − scroll) × scale, which is also right for fixed and sticky parts.
@@ -370,6 +375,23 @@ export const HIT_TEST_JS = `
 //       50/150/400/1000ms timers, and on any layout-affecting change; never
 //       twice in a row with identical content.
 //   hit              {ref, part, key}            reply to hit; part = name|null
+//   goto             {version, to}               a click on [data-goto] while the host
+//                                                has Try on (PARTS_JS); to is the
+//                                                attribute as written ("next", "prev",
+//                                                "<mock>:<state>"), ≤200 chars. The host
+//                                                honours it only while Try is on, from
+//                                                the frame on stage at its version, and
+//                                                only to a screen of this project:
+//                                                never a URL
+//   tap              {x, y}                      a finger's tap in document px (PARTS_JS);
+//                                                a drag never reports
+//   ready            {version}                   the knob runtime is listening (KNOBS_JS,
+//                                                from <head>); values can be sent now
+//   pinch            {phase, a:{x,y}, b:{x,y}}   two fingers on the page, in viewport px
+//   zoom             {x, y, dy}                  ⌘/Ctrl+scroll or a trackpad pinch, in viewport px
+//                                                (PARTS_JS); phase start|move|end. The
+//                                                page's own two-finger touches are
+//                                                cancelled: the host zooms its canvas
 //
 // host → frame
 //   hit-test   {ref, x, y}      x,y normalized 0..1 of the document box (Mark tool)
@@ -383,6 +405,9 @@ export const HIT_TEST_JS = `
 //                               overlay, forwarded)
 //   knobs      {values}         {path: value}, merged into the current values
 //                               and applied exactly like the `?k=` preamble
+//   try        {on}             Try is on or off: while on, [data-goto] elements are
+//                               outlined and a click on one reports goto instead
+//                               of reaching the page; a new document starts off
 //
 // Knobs (`/s/:id?k=`, validated by the route against the mock's declared knobs,
 // and the `knobs` command): for each path, dots become "-" in names, and
@@ -482,7 +507,8 @@ export const PARTS_JS = `
       parts: parts,
       height: document.body ? document.body.scrollHeight : document.documentElement.scrollHeight,
       scroll: { x: sx, y: sy },
-      viewport: { w: innerWidth, h: innerHeight },
+      // scrollWidth past innerWidth: the design is wider than the frame.
+      viewport: { w: innerWidth, h: innerHeight, scrollW: document.documentElement.scrollWidth },
     };
   }
   var last = '';
@@ -552,12 +578,97 @@ export const PARTS_JS = `
     mo.takeRecords();
   }
 
+  // Try: the host lets the user click through the design; an element marked
+  // data-goto moves them to another screen. Only the host knows what that
+  // names, so the frame just reports it, and the click goes no further.
+  var trying = false;
+  function setTrying(on) {
+    trying = on;
+    document.documentElement.classList.toggle('mockpit-try', on);
+    mo.takeRecords();
+  }
+  window.addEventListener('click', function (e) {
+    if (!trying) return;
+    var t = e.target && e.target.closest ? e.target.closest('[data-goto]') : null;
+    if (!t) return;
+    e.preventDefault();
+    e.stopPropagation();
+    parent.postMessage({
+      __mockpit: true,
+      type: 'goto',
+      version: version,
+      to: text(t.getAttribute('data-goto')),
+    }, '*');
+  }, true);
+
+  // A finger's tap, in document px, for a host that lets touches through to the
+  // page (its canvas, where the page scrolls natively). A drag is a scroll: the
+  // browser cancels the pointer or it moves too far. A mouse clicks the host's
+  // own overlay instead, so it never reports here.
+  var tapAt = null;
+  window.addEventListener('pointerdown', function (e) {
+    tapAt = e.isPrimary && e.pointerType !== 'mouse' ? { x: e.clientX, y: e.clientY, t: Date.now() } : null;
+  }, true);
+  window.addEventListener('pointercancel', function () { tapAt = null; }, true);
+  window.addEventListener('pointerup', function (e) {
+    var a = tapAt;
+    tapAt = null;
+    if (!a || !e.isPrimary) return;
+    if (Math.abs(e.clientX - a.x) > 10 || Math.abs(e.clientY - a.y) > 10 || Date.now() - a.t > 600) return;
+    parent.postMessage({
+      __mockpit: true,
+      type: 'tap',
+      x: e.clientX + (window.scrollX || 0),
+      y: e.clientY + (window.scrollY || 0),
+    }, '*');
+  }, true);
+
+  // Two fingers are the host's: a page laid on its canvas takes one-finger
+  // scrolls itself, but a pinch zooms the canvas, not this page or the browser.
+  var pinching = false;
+  function pinch(phase, e) {
+    var t = e.touches;
+    parent.postMessage({
+      __mockpit: true,
+      type: 'pinch',
+      phase: phase,
+      a: t[0] ? { x: t[0].clientX, y: t[0].clientY } : null,
+      b: t[1] ? { x: t[1].clientX, y: t[1].clientY } : null,
+    }, '*');
+  }
+  window.addEventListener('touchstart', function (e) {
+    if (e.touches.length !== 2) return;
+    e.preventDefault();
+    pinching = true;
+    pinch('start', e);
+  }, { capture: true, passive: false });
+  window.addEventListener('touchmove', function (e) {
+    if (!pinching || e.touches.length < 2) return;
+    e.preventDefault();
+    pinch('move', e);
+  }, { capture: true, passive: false });
+  function release(e) {
+    if (!pinching || e.touches.length >= 2) return;
+    pinching = false;
+    pinch('end', e);
+  }
+  window.addEventListener('touchend', release, true);
+  window.addEventListener('touchcancel', release, true);
+  // ⌘/Ctrl+scroll and a trackpad pinch (ctrl+wheel) are the host's too: they
+  // zoom the canvas around the pointer, never this page or the browser.
+  window.addEventListener('wheel', function (e) {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    parent.postMessage({ __mockpit: true, type: 'zoom', x: e.clientX, y: e.clientY, dy: e.deltaY }, '*');
+  }, { capture: true, passive: false });
+
   window.addEventListener('message', function (e) {
     if (e.source !== parent) return;
     var d = e.data;
     if (!d || d.__mockpit !== true) return;
     if (d.type === 'highlight') setHighlight(Array.isArray(d.parts) ? d.parts : []);
     else if (d.type === 'clear') setHighlight(null);
+    else if (d.type === 'try') setTrying(d.on === true);
     else if (d.type === 'scroll') window.scrollBy(Number(d.dx) || 0, Number(d.dy) || 0);
     else if (d.type === 'hit') {
       var el = document.elementFromPoint(
@@ -612,9 +723,19 @@ ${KNOB_VALUE_JS}
       detail: { values: JSON.parse(JSON.stringify(current)) },
     }));
   }
-  function initial() { apply(doc.knobs && typeof doc.knobs === 'object' ? doc.knobs : {}, false); }
+  // The URL's values are already on <html>; a live command may also have come
+  // in before the body existed, so both are bound once it does.
+  function initial() {
+    var start = doc.knobs && typeof doc.knobs === 'object' ? doc.knobs : {};
+    for (var k in start) if (own(start, k) && !own(current, k)) current[k] = start[k];
+    apply(current, false);
+  }
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initial);
   else initial();
+  // Runs from <head>, before the page's own markup and anything slow it loads
+  // (a web font, a CDN stylesheet), so the host can send values at once rather
+  // than wait for the first parts report, which those can hold back.
+  if (parent !== window) parent.postMessage({ __mockpit: true, type: 'ready', version: doc.version }, '*');
   window.addEventListener('message', function (e) {
     if (e.source !== parent || parent === window) return;
     var d = e.data;
@@ -680,6 +801,16 @@ const scriptJson = (v) => JSON.stringify(v)
 // knobCss (quoted unless plain tokens) and then escapeHtml as the style
 // attribute, and the JSON through scriptJson.
 export function knobPreamble(version, knobs) {
+    const { attrs, values } = knobAttributes(knobs);
+    return {
+        htmlTag: `<html lang="en"${attrs}>`,
+        headScript: `<script>window.__mockpitDoc=${scriptJson({ version: version ?? null, knobs: values })};</script>`,
+    };
+}
+// Knob values as an element's `data-k-*` attributes and `--k-*` style vars, the
+// same marks the preamble puts on <html>; an embedded component's wrapper
+// carries its own settled values this way.
+export function knobAttributes(knobs) {
     const attrs = [];
     const vars = [];
     const values = {};
@@ -694,14 +825,11 @@ export function knobPreamble(version, knobs) {
             vars.push(`--k-${name}:${css}`);
     }
     const style = vars.length ? ` style="${escapeHtml(vars.join(";"))}"` : "";
-    return {
-        htmlTag: `<html lang="en"${attrs.join("")}${style}>`,
-        headScript: `<script>window.__mockpitDoc=${scriptJson({ version: version ?? null, knobs: values })};</script>`,
-    };
+    return { attrs: `${attrs.join("")}${style}`, values };
 }
 // Our own highlight, shipped in the base stylesheet so turning it on is a class
 // flip rather than a DOM insertion the parts observer would report.
-const PART_HIGHLIGHT_CSS = `.mockpit-part-hl{outline:2px solid #8b7bff !important;outline-offset:2px}`;
+const PART_HIGHLIGHT_CSS = `.mockpit-part-hl{outline:2px solid #8b7bff !important;outline-offset:2px}html.mockpit-try [data-goto]{outline:2px dashed #3fb27f !important;outline-offset:3px;cursor:pointer}`;
 // Tailwind's browser build, pinned to a major (jsdelivr is already on the CDN
 // allowlist, so this needs no CSP widening). Injected only when a project's
 // design settings say `kit: "tailwind"`, i.e. the repo itself is a Tailwind
@@ -1074,6 +1202,9 @@ export function renderHtmlPage(doc) {
         ]),
         `<style>${design.css}${colorSchemeCss(doc.mode)}</style>`,
     ].join("\n");
+    // Slots (fills.ts): only the chosen fill of each shows, keyed on the knob
+    // attribute; with no value yet, the default fill.
+    const fillCss = slotCss(scanFills(doc.html).slots);
     return `<!doctype html>
 ${htmlTag}
 <head>
@@ -1082,7 +1213,9 @@ ${htmlTag}
 <meta http-equiv="Content-Security-Policy" content="${buildCsp(doc.origin)}">
 <title>${escapeHtml(doc.title)}</title>
 ${preamble.headScript}
+${scriptTag(doc.origin, KNOBS_PATH)}
 ${styles}
+${fillCss ? `<style>${fillCss}</style>` : ""}
 ${design.headScripts}
 ${kits.flatMap((k) => (k.script ? [`<script src="${escapeHtml(k.script)}" defer></script>`] : [])).join("\n")}
 </head>
@@ -1091,7 +1224,6 @@ ${SVG_DEFS}
 ${expandIcons(doc.html, doc.resolveIcon ?? (() => null)).html}
 ${scriptTag(doc.origin, BRIDGE_PATH)}
 ${scriptTag(doc.origin, HIT_TEST_PATH)}
-${scriptTag(doc.origin, KNOBS_PATH)}
 ${scriptTag(doc.origin, PARTS_PATH)}
 ${kit.js ? `<script>${kit.js}</script>` : ""}
 </body>

package/dist/server/themes.d.ts

@@ -2,6 +2,8 @@ export interface Accent {
     bg: string;
     text: string;
     border: string;
+    solid?: string;
+    onSolid?: string;
 }
 export interface Palette {
     bg: string;

package/dist/server/themes.js

@@ -21,6 +21,8 @@ function viewerVars(p) {
         "border-2": p.border2,
         accent: p.info.text,
         "accent-bg": p.info.bg,
+        "accent-solid": p.info.solid ?? p.info.text,
+        "on-accent": p.info.onSolid ?? "#fff",
         hover: p.hover,
         danger: p.danger.text,
     };
@@ -111,7 +113,14 @@ export const DIALKIT = {
         border: "#e6e6e6",
         border2: "#d6d6d6",
         hover: "#ebebeb",
-        info: { bg: "rgba(37, 99, 235, 0.1)", text: "#2563eb", border: "#2563eb" },
+        // White on #2563eb is already 5.2:1, so the fill is the accent itself.
+        info: {
+            bg: "rgba(37, 99, 235, 0.1)",
+            text: "#2563eb",
+            border: "#2563eb",
+            solid: "#2563eb",
+            onSolid: "#fff",
+        },
         success: { bg: "rgba(43, 147, 72, 0.12)", text: "#2b9348", border: "#2b9348" },
         warning: { bg: "#fff8e6", text: "#e8590c", border: "#f0e0b8" },
         danger: { bg: "rgba(220, 38, 38, 0.1)", text: "#dc2626", border: "#dc2626" },
@@ -126,7 +135,14 @@ export const DIALKIT = {
         border: "#242424",
         border2: "#3a3a3a",
         hover: "#262626",
-        info: { bg: "rgba(139, 123, 255, 0.16)", text: "#8b7bff", border: "#8b7bff" },
+        // #8b7bff under white text is 3.3:1; the same hue, darker, is 5.0:1.
+        info: {
+            bg: "rgba(139, 123, 255, 0.16)",
+            text: "#8b7bff",
+            border: "#8b7bff",
+            solid: "#6b5ae0",
+            onSolid: "#fff",
+        },
         success: { bg: "rgba(74, 222, 128, 0.14)", text: "#4ade80", border: "#4ade80" },
         warning: { bg: "#2a2312", text: "#e8590c", border: "#4a3c1c" },
         danger: { bg: "rgba(248, 113, 113, 0.14)", text: "#f87171", border: "#f87171" },
@@ -238,10 +254,14 @@ function pick(vars, names) {
     return null;
 }
 function accentFrom(vars, bg, text, border, fallback) {
+    const ink = pick(vars, text);
     return {
         bg: pick(vars, bg) ?? fallback.bg,
-        text: pick(vars, text) ?? fallback.text,
+        text: ink ?? fallback.text,
         border: pick(vars, border) ?? fallback.border,
+        // The default's solid pair belongs to the default's ink; a repo's own ink
+        // fills with itself.
+        ...(ink ? {} : { solid: fallback.solid, onSolid: fallback.onSolid }),
     };
 }
 function paletteFrom(vars, fallback) {

package/dist/server/types.d.ts

@@ -197,14 +197,22 @@ export interface PadValue {
 }
 export type KnobValue = number | boolean | string | PadValue | SpringKnob | EasingKnob;
 export type MockKind = "page" | "component";
-export type PostStatus = "open" | "accepted" | "archived";
+export type PostStatus = "open" | "accepted" | "archived" | "dropped";
+export declare const isLive: (status: PostStatus) => boolean;
+export declare const inUseVersion: (post: Pick<Post, "status" | "version" | "acceptedVersion">) => number;
+export declare function postAtVersion(post: Post, version: number): Post | null;
+export declare function versionAt(post: Pick<Post, "version" | "history">, n: number): number;
 export interface AskOption {
     id: string;
     label: string;
     variant?: string;
+    version?: number;
     set?: Record<string, KnobValue>;
 }
 export type AskAnswer = string | string[];
+export declare const optionState: (ask: Pick<Ask, "state">, mock: {
+    states: string[];
+}) => string | null;
 export interface Ask {
     id: string;
     text: string;
@@ -213,11 +221,13 @@ export interface Ask {
     part?: string;
     options: AskOption[];
     multi?: boolean;
+    after?: string;
     answer?: AskAnswer;
     other?: string;
     note?: string;
     otherImages?: string[];
     noteImages?: string[];
+    dismissed?: true;
     at: string;
 }
 export declare const OTHER_ID = "other";
@@ -242,6 +252,7 @@ export interface ReplyDecision {
     kind: "accept" | "revise" | "drop";
     state: string | null;
     variant: string;
+    version?: number;
 }
 export interface Draft {
     version: number;
@@ -268,6 +279,9 @@ export interface Reply {
     noteImages?: Record<string, string[]>;
     text?: string;
     decision?: ReplyDecision;
+    resolved?: {
+        dismissed: string[];
+    };
 }
 export interface Mock {
     id: string;
@@ -278,15 +292,18 @@ export interface Mock {
     states: string[];
     asks: Ask[];
     knobs: Knobs;
+    widths: number[];
     draft: Draft | null;
     sessionId: string | null;
+    resolvedAt: string | null;
     createdAt: string;
     updatedAt: string;
 }
-export interface Slot {
+export interface Embed {
     slug: string;
     variant: string;
     version: number;
+    pinned?: true;
 }
 export interface PostVersion {
     version: number;
@@ -297,6 +314,10 @@ export interface PostVersion {
     prompt?: string;
     author?: string;
 }
+export interface ForkRef {
+    variant: string;
+    version: number;
+}
 export interface Post {
     id: string;
     sessionId: string;
@@ -311,11 +332,28 @@ export interface Post {
     version: number;
     history: PostVersion[];
     knobs?: Knobs;
-    slots: Slot[];
+    note?: string;
+    embeds: Embed[];
+    forkedFrom?: ForkRef;
+    starred?: true;
+    acceptedVersion?: number;
+    hiddenVersions?: number[];
     from?: number;
     prompt?: string;
     author?: string;
 }
+export interface FlowStep {
+    mock: string;
+    state: string | null;
+}
+export interface Flow {
+    project: string;
+    name: string;
+    steps: FlowStep[];
+    createdAt: string;
+    updatedAt: string;
+}
+export declare const sameScreen: (a: FlowStep, b: FlowStep) => boolean;
 export interface ProjectSummary {
     name: string;
     mocks: number;
@@ -470,6 +508,7 @@ export interface CreateMockInput {
     kind?: MockKind;
     states?: string[];
     knobs?: Knobs;
+    widths?: number[];
     sessionId?: string | null;
 }
 export interface UpdateMockInput {
@@ -478,7 +517,9 @@ export interface UpdateMockInput {
     states?: string[];
     asks?: Ask[];
     knobs?: Knobs;
+    widths?: number[];
     sessionId?: string | null;
+    resolvedAt?: string | null;
 }
 export interface CreatePostInput {
     sessionId: string;
@@ -488,7 +529,9 @@ export interface CreatePostInput {
     title?: string;
     surfaces: Surface[];
     knobs?: Knobs;
-    slots?: Slot[];
+    note?: string;
+    embeds?: Embed[];
+    forkedFrom?: ForkRef;
     from?: number;
     prompt?: string;
     author?: string;
@@ -497,7 +540,8 @@ export interface UpdatePostInput {
     title?: string;
     surfaces?: Surface[];
     knobs?: Knobs | null;
-    slots?: Slot[];
+    note?: string;
+    embeds?: Embed[];
     from?: number;
     prompt?: string;
     author?: string;
@@ -528,8 +572,14 @@ export interface CommitReplyInput {
     text: string;
     payload: Reply;
     asks: Ask[];
-    accept: string[];
+    accept: {
+        id: string;
+        version: number;
+    }[];
     archive: string[];
+    drop?: string[];
+    resolvedAt?: string;
+    keepDraft?: true;
 }
 export interface PostQuery {
     mockId?: string;
@@ -554,6 +604,8 @@ export interface Store {
     createMock(input: CreateMockInput): Promise<Mock>;
     updateMock(id: string, patch: UpdateMockInput): Promise<Mock | null>;
     removeMock(id: string): Promise<boolean>;
+    listFlows(project: string): Promise<Flow[]>;
+    placeFlowStep(project: string, name: string, screen: FlowStep, step: number): Promise<Flow | null>;
     putDraft(mockId: string, draft: Draft | null): Promise<Mock | null>;
     listPosts(query?: PostQuery): Promise<Post[]>;
     countPostsBySession(): Promise<Map<string, number>>;
@@ -562,7 +614,9 @@ export interface Store {
     createPost(input: CreatePostInput): Promise<Post | null>;
     updatePost(id: string, patch: UpdatePostInput): Promise<Post | null>;
     removePost(id: string): Promise<boolean>;
-    setPostStatus(id: string, status: PostStatus): Promise<Post | null>;
+    setPostStatus(id: string, status: PostStatus, acceptedVersion?: number): Promise<Post | null>;
+    setPostStarred(id: string, starred: boolean): Promise<Post | null>;
+    setVersionHidden(id: string, version: number, hidden: boolean): Promise<Post | null>;
     listComments(query: CommentQuery): Promise<Comment[]>;
     createComment(input: CreateCommentInput): Promise<Comment | null>;
     removeComment(id: string): Promise<Comment | null>;
@@ -600,10 +654,18 @@ export declare function projectFromCwd(cwd: string | null | undefined): string |
 export declare const htmlSurface: (html: string, kits?: unknown) => HtmlSurface;
 export declare const askAnswered: (a: Pick<Ask, "answer" | "other" | "note">) => boolean;
 export declare const openAsks: (mock: Pick<Mock, "asks">) => Ask[];
-export declare function builtinAskIds(mock: Pick<Mock, "asks" | "states">, posts: Pick<Post, "mock" | "state" | "variant" | "status">[], mockId: string): string[];
-export declare const builtinAskCount: (mock: Pick<Mock, "asks" | "states">, posts: Pick<Post, "mock" | "state" | "variant" | "status">[], mockId: string) => number;
-export declare const openCount: (mock: Pick<Mock, "id" | "asks" | "states">, posts: Pick<Post, "mock" | "state" | "variant" | "status">[]) => number;
-export declare function draftedCount(mock: Pick<Mock, "id" | "asks" | "states" | "draft">, posts: Pick<Post, "mock" | "state" | "variant" | "status">[]): number | null;
+export declare function builtinAskIds(mock: Pick<Mock, "asks" | "states"> & {
+    resolvedAt?: string | null;
+}, posts: Pick<Post, "mock" | "state" | "variant" | "status">[], mockId: string): string[];
+export declare const builtinAskCount: (mock: Pick<Mock, "asks" | "states"> & {
+    resolvedAt?: string | null;
+}, posts: Pick<Post, "mock" | "state" | "variant" | "status">[], mockId: string) => number;
+export declare const openCount: (mock: Pick<Mock, "id" | "asks" | "states"> & {
+    resolvedAt?: string | null;
+}, posts: Pick<Post, "mock" | "state" | "variant" | "status">[]) => number;
+export declare function draftedCount(mock: Pick<Mock, "id" | "asks" | "states" | "draft"> & {
+    resolvedAt?: string | null;
+}, posts: Pick<Post, "mock" | "state" | "variant" | "status">[]): number | null;
 export declare const BUILTIN_ASK_ID = "variant";
 export declare function builtinAsk(mock: Pick<Mock, "states">, posts: Pick<Post, "state" | "variant">[], id: string): Ask | undefined;
 export declare function summarizeProjects(mocks: Mock[], sessions: Session[], posts?: Post[]): ProjectSummary[];

package/dist/server/types.js

@@ -51,6 +51,42 @@ export function isSurfaceKind(kind) {
 export function isSandboxedSurfaceKind(kind) {
     return isSurfaceKind(kind) && SURFACE_KIND_METADATA[kind].sandboxed;
 }
+// Still in the running: what the user can choose between.
+export const isLive = (status) => status === "open" || status === "accepted";
+// The version a variant is resolved at when nothing names one: the version in
+// use when accepted, else its latest.
+export const inUseVersion = (post) => post.status === "accepted" ? (post.acceptedVersion ?? post.version) : post.version;
+// A variant as it stood at one of its versions (current or retained), or null
+// when that version is gone.
+export function postAtVersion(post, version) {
+    if (version === post.version)
+        return post;
+    const old = post.history.find((h) => h.version === version);
+    if (!old)
+        return null;
+    const { from: _f, prompt: _p, author: _a, ...rest } = post;
+    return {
+        ...rest,
+        version: old.version,
+        title: old.title,
+        surfaces: old.surfaces,
+        updatedAt: old.at,
+        ...(old.from === undefined ? {} : { from: old.from }),
+        ...(old.prompt === undefined ? {} : { prompt: old.prompt }),
+        ...(old.author === undefined ? {} : { author: old.author }),
+    };
+}
+// The variant's newest version not after mock version `n` — what the stage
+// showed when a draft or reply was bound to n (the viewer's frameVersion).
+export function versionAt(post, n) {
+    const versions = [post.version, ...post.history.map((h) => h.version)];
+    const fit = versions.filter((v) => v <= n);
+    return fit.length ? Math.max(...fit) : Math.min(...versions);
+}
+// The state a version option names a version in: the ask's state, else the
+// mock's first (`ask` accepts version options without a state only while the
+// mock has one).
+export const optionState = (ask, mock) => ask.state ?? mock.states[0] ?? null;
 // The viewer's write-in option on every ask. Reserved, so a delivered
 // `{id: "other", other: true}` choice never shadows an option the agent declared.
 export const OTHER_ID = "other";
@@ -58,6 +94,7 @@ export const OTHER_ID = "other";
 // for a reviewer on a phone who would rather not type: like, dislike, or
 // "more like this". Rides as a part comment, so it travels in the one reply.
 export const REACTIONS = ["up", "down", "more"];
+export const sameScreen = (a, b) => a.mock === b.mock && a.state === b.state;
 export const HISTORY_LIMIT = 20;
 // "user" is the reserved trust label for genuine human comments. A session
 // agent with that name could otherwise have its programmatic comments delivered
@@ -152,15 +189,18 @@ export const htmlSurface = (html, kits) => ({
 // An open ask is one no reply has answered yet: a write-in or a note alone
 // answers it too ("Neither, because…").
 export const askAnswered = (a) => a.answer !== undefined || a.other !== undefined || a.note !== undefined;
-export const openAsks = (mock) => mock.asks.filter((a) => !askAnswered(a));
+export const openAsks = (mock) => mock.asks.filter((a) => !askAnswered(a) && !a.dismissed);
 // How many built-in "Which one?" asks the viewer shows: one mock-wide when every
 // state needs one and the live names line up, else one per needing state. Same
 // rule as viewer/src/logic.ts builtinAsks, so Home, `read` and `pending` count
 // the question the user actually sees. Answering it archives the losers, which
 // is what makes it stop counting.
 export function builtinAskIds(mock, posts, mockId) {
+    // Resolving closed the choice along with every other open question.
+    if (mock.resolvedAt)
+        return [];
     const live = (state) => posts
-        .filter((p) => p.mock === mockId && p.state === state && p.status !== "archived")
+        .filter((p) => p.mock === mockId && p.state === state && isLive(p.status))
         .map((p) => p.variant);
     const needs = (state) => {
         const names = live(state);

package/dist/server/viewerRequest.d.ts

@@ -0,0 +1,2 @@
+export declare const VIEWER_CLIENT = "viewer";
+export declare function isViewerRequest(request: Request): boolean;

package/dist/server/viewerRequest.js

@@ -0,0 +1,14 @@
+// Whether a request comes from the trusted viewer, the page this server
+// served: only it may act as the user (drafts, replies, user comments).
+// Fetch Metadata says so directly, but browsers omit it on plain http away
+// from localhost (a LAN or tailnet address), where the viewer then looked
+// like any other client and every draft call failed. The viewer also names
+// itself with a custom header, which a cross-origin caller cannot send: that
+// header forces a CORS preflight, and this server answers none, so a sandboxed
+// surface (opaque origin) or another site is refused by the browser itself.
+export const VIEWER_CLIENT = "viewer";
+export function isViewerRequest(request) {
+    if (request.headers.get("sec-fetch-site") === "same-origin")
+        return true;
+    return request.headers.get("x-mockpit-client") === VIEWER_CLIENT;
+}