mockpit 1.2.0 → 1.3.0

package/dist/server/sqlStore.js

@@ -1,4 +1,4 @@
-import { collectAssetIds, collectAttachedIds, DEFAULT_PROJECT, DEFAULT_VARIANT, hashAssetId, HISTORY_LIMIT, htmlSurface, MAX_WORKSPACE_ASSET_BYTES, newId, normalizeSurfaceIds, projectFromCwd, reservedAgent, selectEvictions, slugify, stripNul, summarizeProjects, } from "./types.js";
+import { collectAssetIds, collectAttachedIds, DEFAULT_PROJECT, DEFAULT_VARIANT, hashAssetId, HISTORY_LIMIT, htmlSurface, MAX_WORKSPACE_ASSET_BYTES, newId, normalizeSurfaceIds, projectFromCwd, reservedAgent, sameScreen, selectEvictions, slugify, stripNul, summarizeProjects, } from "./types.js";
 function parseJson(raw, fallback) {
     if (typeof raw !== "string" || !raw)
         return fallback;
@@ -14,7 +14,7 @@ const POST_COLUMNS = `
   variant TEXT NOT NULL, status TEXT NOT NULL DEFAULT 'open', title TEXT NOT NULL,
   surfaces TEXT NOT NULL, knobs TEXT, slots TEXT NOT NULL DEFAULT '[]',
   createdAt TEXT NOT NULL, updatedAt TEXT NOT NULL, version INTEGER NOT NULL,
-  curFrom INTEGER, curPrompt TEXT, curAuthor TEXT`;
+  curFrom INTEGER, curPrompt TEXT, curAuthor TEXT, note TEXT`;
 // Store implementation on SQLite — a Durable Object's `ctx.storage.sql` in the
 // Worker, or node:sqlite via an adapter on Node (see server/sqliteStorage.ts).
 // One workspace = one database, so plain SQL with no tenant columns.
@@ -71,7 +71,8 @@ export class SqlStore {
         id TEXT PRIMARY KEY, project TEXT NOT NULL, slug TEXT NOT NULL, title TEXT NOT NULL,
         kind TEXT NOT NULL DEFAULT 'component', states TEXT NOT NULL DEFAULT '[]',
         asks TEXT NOT NULL DEFAULT '[]', knobs TEXT NOT NULL DEFAULT '{}', draft TEXT,
-        sessionId TEXT, createdAt TEXT NOT NULL, updatedAt TEXT NOT NULL
+        sessionId TEXT, createdAt TEXT NOT NULL, updatedAt TEXT NOT NULL,
+        widths TEXT NOT NULL DEFAULT '[]'
       );
       CREATE TABLE IF NOT EXISTS posts (${POST_COLUMNS});
       CREATE TABLE IF NOT EXISTS post_versions (
@@ -95,6 +96,11 @@ export class SqlStore {
       CREATE TABLE IF NOT EXISTS settings (
         key TEXT PRIMARY KEY, value TEXT NOT NULL
       );
+      CREATE TABLE IF NOT EXISTS flows (
+        project TEXT NOT NULL, name TEXT NOT NULL, steps TEXT NOT NULL DEFAULT '[]',
+        createdAt TEXT NOT NULL, updatedAt TEXT NOT NULL,
+        PRIMARY KEY (project, name)
+      );
     `);
         this.addMissing("sessions", {
             agentSeq: "INTEGER NOT NULL DEFAULT 0",
@@ -102,8 +108,22 @@ export class SqlStore {
             key: "TEXT",
             agentActiveAt: "TEXT",
         });
+        this.addMissing("mocks", { widths: "TEXT NOT NULL DEFAULT '[]'", resolvedAt: "TEXT" });
         if (legacy)
             this.migrateLegacy();
+        // After the legacy lift, which rebuilds posts from POST_COLUMNS alone.
+        const pinned = this.columns("posts").has("acceptedVersion");
+        this.addMissing("posts", {
+            note: "TEXT",
+            forkedFrom: "TEXT",
+            starred: "INTEGER NOT NULL DEFAULT 0",
+            acceptedVersion: "INTEGER",
+            hiddenVersions: "TEXT",
+        });
+        // Before the pin, accepted meant "its latest": freeze that as the version in use.
+        if (!pinned) {
+            this.sql.exec("UPDATE posts SET acceptedVersion = version WHERE status = 'accepted'");
+        }
         this.createIndexes();
     }
     createIndexes() {
@@ -396,14 +416,17 @@ export class SqlStore {
             states: parseJson(r.states, []),
             asks: parseJson(r.asks, []),
             knobs: parseJson(r.knobs, {}),
+            widths: parseJson(r.widths, []),
             draft: parseJson(r.draft, null),
             sessionId: r.sessionId ?? null,
+            resolvedAt: r.resolvedAt ?? null,
             createdAt: r.createdAt,
             updatedAt: r.updatedAt,
         };
     }
     rowToPost(r, history) {
         const knobs = parseJson(r.knobs, null);
+        const hidden = parseJson(r.hiddenVersions, []);
         return {
             id: r.id,
             sessionId: r.sessionId,
@@ -418,7 +441,15 @@ export class SqlStore {
             version: r.version,
             history,
             ...(knobs ? { knobs } : {}),
-            slots: parseJson(r.slots, []),
+            ...(r.note == null ? {} : { note: r.note }),
+            // The column keeps its first name, from when embeds were called slots.
+            embeds: parseJson(r.slots, []),
+            ...(r.forkedFrom == null ? {} : { forkedFrom: parseJson(r.forkedFrom, null) }),
+            ...(r.starred ? { starred: true } : {}),
+            ...(r.status === "accepted" && r.acceptedVersion != null
+                ? { acceptedVersion: r.acceptedVersion }
+                : {}),
+            ...(hidden.length ? { hiddenVersions: hidden } : {}),
             ...(r.curFrom == null ? {} : { from: r.curFrom }),
             ...(r.curPrompt == null ? {} : { prompt: r.curPrompt }),
             ...(r.curAuthor == null ? {} : { author: r.curAuthor }),
@@ -585,12 +616,14 @@ export class SqlStore {
             states: (input.states ?? []).map((s) => stripNul(s)),
             asks: [],
             knobs: input.knobs ?? {},
+            widths: input.widths ?? [],
             draft: null,
             sessionId: input.sessionId ?? null,
+            resolvedAt: null,
             createdAt: now,
             updatedAt: now,
         };
-        this.sql.exec("INSERT INTO mocks (id, project, slug, title, kind, states, asks, knobs, draft, sessionId, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, '[]', ?, NULL, ?, ?, ?)", mock.id, mock.project, mock.slug, mock.title, mock.kind, JSON.stringify(mock.states), JSON.stringify(mock.knobs), mock.sessionId, mock.createdAt, mock.updatedAt);
+        this.sql.exec("INSERT INTO mocks (id, project, slug, title, kind, states, asks, knobs, widths, draft, sessionId, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?, ?, '[]', ?, ?, NULL, ?, ?, ?)", mock.id, mock.project, mock.slug, mock.title, mock.kind, JSON.stringify(mock.states), JSON.stringify(mock.knobs), JSON.stringify(mock.widths), mock.sessionId, mock.createdAt, mock.updatedAt);
         return mock;
     }
     async updateMock(id, patch) {
@@ -604,26 +637,80 @@ export class SqlStore {
             ...(patch.states !== undefined && { states: patch.states.map((s) => stripNul(s)) }),
             ...(patch.asks !== undefined && { asks: patch.asks }),
             ...(patch.knobs !== undefined && { knobs: patch.knobs }),
+            ...(patch.widths !== undefined && { widths: patch.widths }),
             ...(patch.sessionId !== undefined && { sessionId: patch.sessionId }),
+            ...(patch.resolvedAt !== undefined && { resolvedAt: patch.resolvedAt }),
             updatedAt: new Date().toISOString(),
         };
-        this.sql.exec("UPDATE mocks SET title = ?, kind = ?, states = ?, asks = ?, knobs = ?, sessionId = ?, updatedAt = ? WHERE id = ?", next.title, next.kind, JSON.stringify(next.states), JSON.stringify(next.asks), JSON.stringify(next.knobs), next.sessionId, next.updatedAt, id);
+        this.sql.exec("UPDATE mocks SET title = ?, kind = ?, states = ?, asks = ?, knobs = ?, widths = ?, sessionId = ?, resolvedAt = ?, updatedAt = ? WHERE id = ?", next.title, next.kind, JSON.stringify(next.states), JSON.stringify(next.asks), JSON.stringify(next.knobs), JSON.stringify(next.widths), next.sessionId, next.resolvedAt, next.updatedAt, id);
         if (patch.asks !== undefined)
             this.invalidateAssetRefs();
         return next;
     }
     async removeMock(id) {
-        if (!(await this.getMock(id)))
+        const mock = await this.getMock(id);
+        if (!mock)
             return false;
         this.atomic(() => {
             this.sql.exec("DELETE FROM comments WHERE mockId = ?", id);
             this.sql.exec("DELETE FROM post_versions WHERE postId IN (SELECT id FROM posts WHERE mockId = ?)", id);
             this.sql.exec("DELETE FROM posts WHERE mockId = ?", id);
             this.sql.exec("DELETE FROM mocks WHERE id = ?", id);
+            for (const flow of this.flowsOf(mock.project)) {
+                const steps = flow.steps.filter((x) => x.mock !== mock.slug);
+                if (steps.length !== flow.steps.length)
+                    this.writeFlow(flow, steps);
+            }
         });
         this.invalidateAssetRefs();
         return true;
     }
+    // --- flows ---
+    flowsOf(project) {
+        return this.sql
+            .exec("SELECT * FROM flows WHERE project = ? ORDER BY createdAt, rowid", project)
+            .toArray()
+            .map((r) => ({
+            project: r.project,
+            name: r.name,
+            steps: parseJson(r.steps, []),
+            createdAt: r.createdAt,
+            updatedAt: r.updatedAt,
+        }));
+    }
+    // An emptied flow is deleted rather than kept as a name with nothing to walk.
+    writeFlow(flow, steps) {
+        if (steps.length === 0) {
+            this.sql.exec("DELETE FROM flows WHERE project = ? AND name = ?", flow.project, flow.name);
+            return null;
+        }
+        const next = { ...flow, steps, updatedAt: new Date().toISOString() };
+        this.sql.exec("INSERT INTO flows (project, name, steps, createdAt, updatedAt) VALUES (?, ?, ?, ?, ?) ON CONFLICT(project, name) DO UPDATE SET steps = excluded.steps, updatedAt = excluded.updatedAt", next.project, next.name, JSON.stringify(next.steps), next.createdAt, next.updatedAt);
+        return next;
+    }
+    async listFlows(project) {
+        return this.flowsOf(project);
+    }
+    async placeFlowStep(project, name, screen, step) {
+        const clean = { mock: stripNul(screen.mock), state: stripNul(screen.state) };
+        const label = stripNul(name);
+        return this.atomic(() => {
+            const now = new Date().toISOString();
+            const flow = this.flowsOf(project).find((f) => f.name === label) ?? {
+                project,
+                name: label,
+                steps: [],
+                createdAt: now,
+                updatedAt: now,
+            };
+            const steps = flow.steps.filter((x) => !sameScreen(x, clean));
+            if (step > 0)
+                steps.splice(Math.min(step, steps.length + 1) - 1, 0, clean);
+            if (steps.length === 0 && flow.steps.length === 0)
+                return null;
+            return this.writeFlow(flow, steps);
+        });
+    }
     async putDraft(mockId, draft) {
         const mock = await this.getMock(mockId);
         if (!mock)
@@ -692,12 +779,14 @@ export class SqlStore {
             version: 1,
             history: [],
             ...(input.knobs ? { knobs: input.knobs } : {}),
-            slots: input.slots ?? [],
+            ...(stripNul(input.note ?? "").trim() ? { note: stripNul(input.note ?? "").trim() } : {}),
+            embeds: input.embeds ?? [],
+            ...(input.forkedFrom ? { forkedFrom: input.forkedFrom } : {}),
             ...(input.from === undefined ? {} : { from: input.from }),
             ...(input.prompt === undefined ? {} : { prompt: stripNul(input.prompt) }),
             ...(input.author === undefined ? {} : { author: stripNul(input.author) }),
         };
-        this.sql.exec("INSERT INTO posts (id, sessionId, mockId, state, variant, status, title, surfaces, knobs, slots, createdAt, updatedAt, version, curFrom, curPrompt, curAuthor) VALUES (?, ?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, 1, ?, ?, ?)", post.id, post.sessionId, post.mock, post.state, post.variant, post.title, JSON.stringify(post.surfaces), post.knobs ? JSON.stringify(post.knobs) : null, JSON.stringify(post.slots), post.createdAt, post.updatedAt, post.from ?? null, post.prompt ?? null, post.author ?? null);
+        this.sql.exec("INSERT INTO posts (id, sessionId, mockId, state, variant, status, title, surfaces, knobs, slots, createdAt, updatedAt, version, curFrom, curPrompt, curAuthor, note, forkedFrom) VALUES (?, ?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, 1, ?, ?, ?, ?, ?)", post.id, post.sessionId, post.mock, post.state, post.variant, post.title, JSON.stringify(post.surfaces), post.knobs ? JSON.stringify(post.knobs) : null, JSON.stringify(post.embeds), post.createdAt, post.updatedAt, post.from ?? null, post.prompt ?? null, post.author ?? null, post.note ?? null, post.forkedFrom ? JSON.stringify(post.forkedFrom) : null);
         this.touch(input.sessionId);
         this.touchMock(post.mock, now);
         this.addAssetRefs(post.surfaces);
@@ -719,13 +808,17 @@ export class SqlStore {
                 ...(post.prompt === undefined ? {} : { prompt: post.prompt }),
                 ...(post.author === undefined ? {} : { author: post.author }),
             };
+            // The version in use is kept past the limit: export and embeds resolve to it.
+            const pin = post.acceptedVersion ?? -1;
             const history = [...post.history, archived];
-            if (history.length > HISTORY_LIMIT)
-                history.shift();
+            const prunable = history.filter((h) => h.version !== pin);
+            if (prunable.length > HISTORY_LIMIT)
+                history.splice(history.indexOf(prunable[0]), 1);
             const title = patch.title !== undefined ? stripNul(patch.title).trim() || post.title : post.title;
             const surfaces = patch.surfaces !== undefined ? normalizeSurfaceIds(patch.surfaces) : post.surfaces;
             const knobs = patch.knobs === undefined ? post.knobs : (patch.knobs ?? undefined);
-            const slots = patch.slots ?? post.slots;
+            const note = patch.note === undefined ? post.note : stripNul(patch.note).trim() || undefined;
+            const embeds = patch.embeds ?? post.embeds;
             const state = patch.state === undefined ? post.state : patch.state;
             const version = post.version + 1;
             const updatedAt = new Date().toISOString();
@@ -733,22 +826,23 @@ export class SqlStore {
             const from = patch.from ?? post.version;
             const prompt = stripNul(patch.prompt ?? "");
             const author = patch.author === undefined ? null : stripNul(patch.author);
-            this.sql.exec("UPDATE posts SET title = ?, surfaces = ?, knobs = ?, slots = ?, state = ?, updatedAt = ?, version = ?, curFrom = ?, curPrompt = ?, curAuthor = ? WHERE id = ? AND version = ?", title, JSON.stringify(surfaces), knobs ? JSON.stringify(knobs) : null, JSON.stringify(slots), state, updatedAt, version, from, prompt, author, id, post.version);
+            this.sql.exec("UPDATE posts SET title = ?, surfaces = ?, knobs = ?, note = ?, slots = ?, state = ?, updatedAt = ?, version = ?, curFrom = ?, curPrompt = ?, curAuthor = ? WHERE id = ? AND version = ?", title, JSON.stringify(surfaces), knobs ? JSON.stringify(knobs) : null, note ?? null, JSON.stringify(embeds), state, updatedAt, version, from, prompt, author, id, post.version);
             const affected = this.sql.exec("SELECT changes() AS n").one().n;
             if (affected > 0) {
                 this.insertVersion(id, archived);
-                this.sql.exec("DELETE FROM post_versions WHERE postId = ? AND version <= ?", id, version - 1 - HISTORY_LIMIT);
+                this.sql.exec("DELETE FROM post_versions WHERE postId = ? AND version <= ? AND version != ?", id, version - 1 - HISTORY_LIMIT, pin);
                 this.touch(post.sessionId);
                 this.touchMock(post.mock, updatedAt);
                 if (patch.surfaces !== undefined)
                     this.addAssetRefs(surfaces);
-                const { knobs: _knobs, author: _author, ...rest } = post;
+                const { knobs: _knobs, note: _note, author: _author, ...rest } = post;
                 return {
                     ...rest,
                     title,
                     surfaces,
                     ...(knobs ? { knobs } : {}),
-                    slots,
+                    ...(note ? { note } : {}),
+                    embeds,
                     state,
                     version,
                     updatedAt,
@@ -772,12 +866,36 @@ export class SqlStore {
         this.invalidateAssetRefs();
         return true;
     }
-    async setPostStatus(id, status) {
+    async setPostStatus(id, status, acceptedVersion) {
         const post = await this.getPost(id);
         if (!post)
             return null;
-        this.sql.exec("UPDATE posts SET status = ? WHERE id = ?", status, id);
-        return { ...post, status };
+        const pin = status === "accepted" ? (acceptedVersion ?? post.version) : null;
+        this.sql.exec("UPDATE posts SET status = ?, acceptedVersion = ? WHERE id = ?", status, pin, id);
+        const { acceptedVersion: _, ...rest } = post;
+        return pin === null ? { ...rest, status } : { ...rest, status, acceptedVersion: pin };
+    }
+    async setPostStarred(id, starred) {
+        const post = await this.getPost(id);
+        if (!post)
+            return null;
+        this.sql.exec("UPDATE posts SET starred = ? WHERE id = ?", starred ? 1 : 0, id);
+        const { starred: _, ...rest } = post;
+        return starred ? { ...rest, starred: true } : rest;
+    }
+    async setVersionHidden(id, version, hidden) {
+        const post = await this.getPost(id);
+        if (!post)
+            return null;
+        const set = new Set(post.hiddenVersions ?? []);
+        if (hidden)
+            set.add(version);
+        else
+            set.delete(version);
+        const list = [...set].sort((a, b) => a - b);
+        this.sql.exec("UPDATE posts SET hiddenVersions = ? WHERE id = ?", list.length ? JSON.stringify(list) : null, id);
+        const { hiddenVersions: _, ...rest } = post;
+        return list.length ? { ...rest, hiddenVersions: list } : rest;
     }
     // --- comments ---
     async listComments(query) {
@@ -864,12 +982,20 @@ export class SqlStore {
                 postVersion: input.payload.version,
                 payload: input.payload,
             });
-            this.sql.exec("UPDATE mocks SET asks = ?, draft = NULL WHERE id = ?", JSON.stringify(input.asks), input.mockId);
-            for (const id of input.accept) {
-                this.sql.exec("UPDATE posts SET status = 'accepted' WHERE id = ? AND mockId = ?", id, input.mockId);
+            this.sql.exec(input.keepDraft
+                ? "UPDATE mocks SET asks = ? WHERE id = ?"
+                : "UPDATE mocks SET asks = ?, draft = NULL WHERE id = ?", JSON.stringify(input.asks), input.mockId);
+            if (input.resolvedAt !== undefined) {
+                this.sql.exec("UPDATE mocks SET resolvedAt = ?, updatedAt = ? WHERE id = ?", input.resolvedAt, input.resolvedAt, input.mockId);
+            }
+            for (const { id, version } of input.accept) {
+                this.sql.exec("UPDATE posts SET status = 'accepted', acceptedVersion = ? WHERE id = ? AND mockId = ?", version, id, input.mockId);
             }
             for (const id of input.archive) {
-                this.sql.exec("UPDATE posts SET status = 'archived' WHERE id = ? AND mockId = ?", id, input.mockId);
+                this.sql.exec("UPDATE posts SET status = 'archived', acceptedVersion = NULL WHERE id = ? AND mockId = ?", id, input.mockId);
+            }
+            for (const id of input.drop ?? []) {
+                this.sql.exec("UPDATE posts SET status = 'dropped', acceptedVersion = NULL WHERE id = ? AND mockId = ?", id, input.mockId);
             }
             this.invalidateAssetRefs();
             return comment;

package/dist/server/surfacePage.d.ts

@@ -3,8 +3,8 @@ import type { DesignSettings } from "./types.ts";
 import { type Mode, type Theme } from "./themes.ts";
 export declare const BRIDGE_JS = "\nwindow.sendPrompt = function (text) {\n  parent.postMessage({ __mockpit: true, type: 'send-prompt', text: String(text) }, '*');\n};\nwindow.openLink = function (url) {\n  parent.postMessage({ __mockpit: true, type: 'open-link', url: String(url) }, '*');\n};\nwindow.copyToClipboard = function (text) {\n  parent.postMessage({ __mockpit: true, type: 'copy', text: String(text) }, '*');\n};\ndocument.addEventListener('click', function (e) {\n  var a = e.target && e.target.closest ? e.target.closest('a[href]') : null;\n  if (a && /^https?:/.test(a.href)) { e.preventDefault(); window.openLink(a.href); }\n});\n// Cmd+Option+Up/Down switches sessions in the sidebar, but keydowns fire in\n// whichever document holds focus \u2014 once the user clicks into a surface, this\n// sandboxed iframe swallows them. Forward just that combo to the host.\ndocument.addEventListener('keydown', function (e) {\n  if (!e.metaKey || !e.altKey || e.ctrlKey || e.shiftKey) return;\n  if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n  e.preventDefault();\n  parent.postMessage({ __mockpit: true, type: 'switch-session', key: e.key }, '*');\n});\n// Report content height to the parent so it can size this iframe, while\n// breaking a feedback loop that can peg a CPU core.\n//\n// The loop: the parent sets the iframe's height to whatever we report, but some\n// content's height *inverts* with the frame's height \u2014 a scrollbar that appears\n// at height A reflows the content to height B, then disappears at B and reflows\n// back to A (or any 100vh / percentage-derived layout). The ResizeObserver then\n// fires on every flip, so reported heights alternate A, B, A, B... forever. With\n// a cheap surface that's a brief blip; with a heavy one (a big syntax-highlighted\n// diff/markdown surface) each relayout is expensive and the tab sits at 100% CPU\n// until the surface unmounts.\n//\n// A plain h !== __lastH guard can't stop this: in a 2-cycle every value differs\n// from the one immediately before it. So we remember the previous height too and\n// defer a return to it *if it recurs faster than a human could* (< 250ms) \u2014 that's\n// the runaway. The deferred pass keeps one trailing re-measure and reports the\n// taller height in the pair, so an ordinary font/image reflow can't leave the\n// frame permanently clipped.\nvar __lastH = 0;\nvar __prevH = 0;\nvar __lastT = 0;\nvar __seenH = 0;\nvar __trailTimer = 0;\nvar __trailH = 0;\nvar __FLIP_MS = 250;\nvar __TRAIL_MS = 350;\nfunction __now() {\n  return typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();\n}\nfunction __measureHeight() {\n  return document.body\n    ? document.body.scrollHeight\n    : document.documentElement.scrollHeight;\n}\nfunction __postHeight(h, t) {\n  __prevH = __lastH;\n  __lastH = h;\n  __lastT = t;\n  parent.postMessage({ __mockpit: true, type: 'resize', height: h }, '*');\n}\nfunction __clearTrailing() {\n  if (__trailTimer && typeof clearTimeout !== 'undefined') clearTimeout(__trailTimer);\n  __trailTimer = 0;\n  __trailH = 0;\n}\nfunction __flushTrailing() {\n  __trailTimer = 0;\n  var measured = __measureHeight();\n  if (measured > 0) __seenH = measured;\n  var target = Math.max(__trailH || 0, measured || 0);\n  __trailH = 0;\n  if (target <= 0 || target === __lastH) return;\n  __postHeight(target, __now());\n}\nfunction __scheduleTrailing(h, reset) {\n  __trailH = Math.max(__trailH || 0, h || 0, __lastH || 0);\n  if (__trailTimer) {\n    if (!reset) return;\n    if (typeof clearTimeout !== 'undefined') clearTimeout(__trailTimer);\n  }\n  __trailTimer = setTimeout(__flushTrailing, __TRAIL_MS);\n}\nfunction __report() {\n  var h = __measureHeight();\n  if (h <= 0) return; // no content yet\n  var changed = h !== __seenH;\n  __seenH = h;\n  if (h === __lastH) return; // unchanged\n  var t = __now();\n  if (h === __prevH && (__trailTimer || t - __lastT < __FLIP_MS)) {\n    __scheduleTrailing(h, true); // rapid A<->B flip: defer one settled report\n    return;\n  }\n  __clearTrailing();\n  __postHeight(h, t);\n}\nif (document.readyState === 'complete') __report();\nelse window.addEventListener('load', function () { requestAnimationFrame(__report); });\nsetTimeout(__report, 60);\nsetTimeout(__report, 350);\nsetTimeout(__report, 1500);\nsetTimeout(__report, 3000);\nsetTimeout(__report, 6000);\nsetTimeout(__report, 10000);\nif (document.fonts && document.fonts.ready && document.fonts.ready.then) {\n  document.fonts.ready.then(function () { __report(); });\n}\nif (window.ResizeObserver) {\n  window.__ssRO = new ResizeObserver(__report);\n  window.__ssRO.observe(document.documentElement);\n  if (document.body) window.__ssRO.observe(document.body);\n}\n";
 export declare const HIT_TEST_JS = "\n(function () {\n  var MAX_DEPTH = 6;\n  var MAX_TEXT = 60;\n  function docBox() {\n    var w = document.documentElement.clientWidth || 1;\n    var h = (document.body && document.body.scrollHeight) || document.documentElement.scrollHeight || 1;\n    return { w: w, h: h };\n  }\n  function ident(v) { return typeof v === 'string' && /^[A-Za-z][\\w-]*$/.test(v); }\n  function cssPath(el) {\n    var parts = [];\n    while (el && el.nodeType === 1 && el !== document.body && el !== document.documentElement) {\n      var tag = el.tagName.toLowerCase();\n      if (ident(el.id)) { parts.unshift(tag + '#' + el.id); break; }\n      var sel = tag;\n      var cls = (el.getAttribute('class') || '').split(/\\s+/).filter(ident).slice(0, 2);\n      if (cls.length) sel += '.' + cls.join('.');\n      var p = el.parentElement;\n      if (p) {\n        var sibs = [];\n        for (var i = 0; i < p.children.length; i++) {\n          if (p.children[i].tagName === el.tagName) sibs.push(p.children[i]);\n        }\n        if (sibs.length > 1) sel += ':nth-of-type(' + (sibs.indexOf(el) + 1) + ')';\n      }\n      parts.unshift(sel);\n      if (parts.length >= MAX_DEPTH) break;\n      el = p;\n    }\n    return parts.join(' > ');\n  }\n  function firstLine(el) {\n    var t = (el.innerText || el.textContent || '').replace(/\\s+/g, ' ').trim();\n    var line = t.split('\\n')[0].trim();\n    return line.length > MAX_TEXT ? line.slice(0, MAX_TEXT - 1) + '\\u2026' : line;\n  }\n  window.addEventListener('message', function (e) {\n    if (e.source !== parent || parent === window) return;\n    var d = e.data;\n    if (!d || d.__mockpit !== true || d.type !== 'hit-test') return;\n    var box = docBox();\n    var px = Math.max(0, Math.min(1, Number(d.x) || 0)) * box.w;\n    var py = Math.max(0, Math.min(1, Number(d.y) || 0)) * box.h;\n    var el = document.elementFromPoint(px - (window.scrollX || 0), py - (window.scrollY || 0));\n    var reply = { __mockpit: true, type: 'hit-test-result', ref: d.ref, path: '', text: '', rect: [0, 0, 0, 0] };\n    if (el && el.nodeType === 1) {\n      var r = el.getBoundingClientRect();\n      reply.path = cssPath(el);\n      reply.text = firstLine(el);\n      reply.rect = [\n        (r.left + (window.scrollX || 0)) / box.w,\n        (r.top + (window.scrollY || 0)) / box.h,\n        r.width / box.w,\n        r.height / box.h,\n      ];\n    }\n    parent.postMessage(reply, '*');\n  });\n})();\n";
-export declare const PARTS_JS = "\n(function () {\n  if (window.parent === window) return;\n  var HL = 'mockpit-part-hl';\n  var MAX_PARTS = 200;\n  var MAX_TEXT = 200;\n  var doc = window.__mockpitDoc || {};\n  var version = typeof doc.version === 'number' ? doc.version : null;\n  function text(v) { return v == null ? null : String(v).slice(0, MAX_TEXT); }\n  function isFixed(el) {\n    for (var n = el; n && n.nodeType === 1; n = n.parentElement) {\n      if (getComputedStyle(n).position === 'fixed') return true;\n    }\n    return false;\n  }\n  function collect() {\n    var sx = window.scrollX || 0, sy = window.scrollY || 0;\n    var els = document.querySelectorAll('[data-part]');\n    var parts = [];\n    for (var i = 0; i < els.length && parts.length < MAX_PARTS; i++) {\n      var el = els[i];\n      var name = text(el.getAttribute('data-part'));\n      if (!name) continue;\n      var r = el.getBoundingClientRect();\n      var depth = 0;\n      for (var p = el.parentElement; p; p = p.parentElement) if (p.hasAttribute('data-part')) depth++;\n      var outer = el.parentElement && el.parentElement.closest('[data-part]');\n      parts.push({\n        name: name,\n        label: text(el.getAttribute('data-part-label')) || name,\n        key: text(el.getAttribute('data-part-key')),\n        box: { x: r.left + sx, y: r.top + sy, w: r.width, h: r.height },\n        visible: (r.width > 0 || r.height > 0) && getComputedStyle(el).visibility !== 'hidden',\n        fixed: isFixed(el),\n        depth: depth,\n        parent: outer ? text(outer.getAttribute('data-part')) : null,\n        order: i,\n      });\n    }\n    return {\n      version: version,\n      parts: parts,\n      height: document.body ? document.body.scrollHeight : document.documentElement.scrollHeight,\n      scroll: { x: sx, y: sy },\n      viewport: { w: innerWidth, h: innerHeight },\n    };\n  }\n  var last = '';\n  var timer = 0;\n  // setTimeout, not rAF: a hidden cross-origin frame may have rendering (and\n  // with it rAF and ResizeObserver) throttled, but timers still run.\n  function schedule() {\n    if (timer) return;\n    timer = setTimeout(function () {\n      timer = 0;\n      var m = collect();\n      var key = JSON.stringify(m);\n      if (key === last) return;\n      last = key;\n      m.__mockpit = true;\n      m.type = 'parts';\n      parent.postMessage(m, '*');\n    }, 0);\n  }\n\n  var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;\n  var observed = typeof WeakSet !== 'undefined' ? new WeakSet() : null;\n  function observeAll() {\n    if (!ro || !observed) return;\n    // html/body too: a non-part sibling growing moves parts without resizing them.\n    var els = [document.documentElement, document.body].concat([].slice.call(document.querySelectorAll('[data-part]')));\n    for (var i = 0; i < els.length; i++) {\n      var el = els[i];\n      if (el && !observed.has(el)) { observed.add(el); ro.observe(el); }\n    }\n  }\n  var moTimer = 0;\n  var mo = new MutationObserver(function () {\n    clearTimeout(moTimer);\n    moTimer = setTimeout(function () { observeAll(); schedule(); }, 40);\n  });\n  mo.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });\n\n  // Transforms and transitions move boxes without resizing or mutating anything.\n  document.addEventListener('animationend', schedule, true);\n  document.addEventListener('transitionend', schedule, true);\n  window.addEventListener('scroll', schedule, { passive: true });\n  window.addEventListener('resize', schedule);\n  if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule);\n  observeAll();\n  schedule();\n  // WebKit: RO's initial callback may never fire in a sandboxed frame.\n  function settle() {\n    schedule();\n    [50, 150, 400, 1000].forEach(function (ms) { setTimeout(schedule, ms); });\n  }\n  if (document.readyState === 'complete') settle();\n  else window.addEventListener('load', settle);\n\n  function setHighlight(names) {\n    var on = document.querySelectorAll('.' + HL);\n    for (var i = 0; i < on.length; i++) on[i].classList.remove(HL);\n    if (names && names.length) {\n      var want = {};\n      for (var k = 0; k < names.length && k < MAX_PARTS; k++) want[String(names[k])] = true;\n      var els = document.querySelectorAll('[data-part]');\n      for (var j = 0; j < els.length; j++) {\n        if (want[els[j].getAttribute('data-part')] === true) els[j].classList.add(HL);\n      }\n    }\n    // Our own class flip must not look like the agent's page changing.\n    mo.takeRecords();\n  }\n\n  window.addEventListener('message', function (e) {\n    if (e.source !== parent) return;\n    var d = e.data;\n    if (!d || d.__mockpit !== true) return;\n    if (d.type === 'highlight') setHighlight(Array.isArray(d.parts) ? d.parts : []);\n    else if (d.type === 'clear') setHighlight(null);\n    else if (d.type === 'scroll') window.scrollBy(Number(d.dx) || 0, Number(d.dy) || 0);\n    else if (d.type === 'hit') {\n      var el = document.elementFromPoint(\n        (Number(d.x) || 0) - (window.scrollX || 0),\n        (Number(d.y) || 0) - (window.scrollY || 0)\n      );\n      var part = el && el.closest ? el.closest('[data-part]') : null;\n      parent.postMessage({\n        __mockpit: true,\n        type: 'hit',\n        ref: d.ref,\n        part: part ? text(part.getAttribute('data-part')) : null,\n        key: part ? text(part.getAttribute('data-part-key')) : null,\n      }, '*');\n    }\n  });\n})();\n";
-export declare const KNOBS_JS = "\n(function () {\n\nvar __kPathRe = /^[A-Za-z_][\\w-]{0,63}(\\.[A-Za-z_][\\w-]{0,63}){0,3}$/;\nvar __kTokenRe = /^[#\\w(),.%/+-][#\\w\\s(),.%/+-]*$/;\nfunction __kName(path) { return path.replace(/\\./g, '-'); }\nfunction __kCssString(s) {\n  return '\"' + s.replace(/[\\\\\"]/g, function (c) { return '\\\\' + c; })\n    .replace(/[\\u0000-\\u001f\\u007f]/g, function (c) { return '\\\\' + c.charCodeAt(0).toString(16) + ' '; }) + '\"';\n}\nfunction __kCss(v) {\n  if (typeof v === 'number') return isFinite(v) ? String(v) : null;\n  if (typeof v === 'boolean') return v ? '1' : '0';\n  if (typeof v === 'string') return __kTokenRe.test(v) ? v : __kCssString(v);\n  return null;\n}\nfunction __kVars(path, v) {\n  var name = __kName(path);\n  if (v && typeof v === 'object' && !Array.isArray(v)) {\n    var out = [];\n    for (var f in v) {\n      if (!Object.prototype.hasOwnProperty.call(v, f) || !/^[A-Za-z_][\\w-]{0,63}$/.test(f)) continue;\n      var c = __kCss(v[f]);\n      if (c !== null) out.push([name + '-' + f, c]);\n    }\n    return out;\n  }\n  var css = __kCss(v);\n  return css === null ? [] : [[name, css]];\n}\nfunction __kAttr(v) {\n  if (typeof v === 'number') return isFinite(v) ? String(v) : null;\n  if (typeof v === 'boolean') return v ? 'true' : 'false';\n  if (typeof v === 'string') return v;\n  return null;\n}\n\n  var doc = window.__mockpitDoc || {};\n  var current = {};\n  function own(o, k) { return Object.prototype.hasOwnProperty.call(o, k); }\n  function bind(path, v) {\n    var els = document.querySelectorAll('[data-k-bind]');\n    for (var i = 0; i < els.length; i++) {\n      if (els[i].getAttribute('data-k-bind') !== path) continue;\n      els[i].textContent = v && typeof v === 'object' ? JSON.stringify(v) : String(v);\n    }\n  }\n  function apply(values, live) {\n    var root = document.documentElement;\n    for (var path in values) {\n      if (!own(values, path) || !__kPathRe.test(path)) continue;\n      var v = values[path];\n      if (v === null || v === undefined) continue;\n      current[path] = v;\n      if (live) {\n        var vars = __kVars(path, v);\n        if (!vars.length) root.style.removeProperty('--k-' + __kName(path));\n        for (var i = 0; i < vars.length; i++) root.style.setProperty('--k-' + vars[i][0], vars[i][1]);\n        var attr = __kAttr(v);\n        if (attr === null) root.removeAttribute('data-k-' + __kName(path));\n        else root.setAttribute('data-k-' + __kName(path), attr);\n      }\n      bind(path, v);\n    }\n    window.dispatchEvent(new CustomEvent('mockpit:knobs', {\n      detail: { values: JSON.parse(JSON.stringify(current)) },\n    }));\n  }\n  function initial() { apply(doc.knobs && typeof doc.knobs === 'object' ? doc.knobs : {}, false); }\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initial);\n  else initial();\n  window.addEventListener('message', function (e) {\n    if (e.source !== parent || parent === window) return;\n    var d = e.data;\n    if (!d || d.__mockpit !== true || d.type !== 'knobs') return;\n    if (d.values && typeof d.values === 'object' && !Array.isArray(d.values)) apply(d.values, true);\n  });\n})();\n";
+export declare const PARTS_JS = "\n(function () {\n  if (window.parent === window) return;\n  var HL = 'mockpit-part-hl';\n  var MAX_PARTS = 200;\n  var MAX_TEXT = 200;\n  var doc = window.__mockpitDoc || {};\n  var version = typeof doc.version === 'number' ? doc.version : null;\n  function text(v) { return v == null ? null : String(v).slice(0, MAX_TEXT); }\n  function isFixed(el) {\n    for (var n = el; n && n.nodeType === 1; n = n.parentElement) {\n      if (getComputedStyle(n).position === 'fixed') return true;\n    }\n    return false;\n  }\n  function collect() {\n    var sx = window.scrollX || 0, sy = window.scrollY || 0;\n    var els = document.querySelectorAll('[data-part]');\n    var parts = [];\n    for (var i = 0; i < els.length && parts.length < MAX_PARTS; i++) {\n      var el = els[i];\n      var name = text(el.getAttribute('data-part'));\n      if (!name) continue;\n      var r = el.getBoundingClientRect();\n      var depth = 0;\n      for (var p = el.parentElement; p; p = p.parentElement) if (p.hasAttribute('data-part')) depth++;\n      var outer = el.parentElement && el.parentElement.closest('[data-part]');\n      parts.push({\n        name: name,\n        label: text(el.getAttribute('data-part-label')) || name,\n        key: text(el.getAttribute('data-part-key')),\n        box: { x: r.left + sx, y: r.top + sy, w: r.width, h: r.height },\n        visible: (r.width > 0 || r.height > 0) && getComputedStyle(el).visibility !== 'hidden',\n        fixed: isFixed(el),\n        depth: depth,\n        parent: outer ? text(outer.getAttribute('data-part')) : null,\n        order: i,\n      });\n    }\n    return {\n      version: version,\n      parts: parts,\n      height: document.body ? document.body.scrollHeight : document.documentElement.scrollHeight,\n      scroll: { x: sx, y: sy },\n      // scrollWidth past innerWidth: the design is wider than the frame.\n      viewport: { w: innerWidth, h: innerHeight, scrollW: document.documentElement.scrollWidth },\n    };\n  }\n  var last = '';\n  var timer = 0;\n  // setTimeout, not rAF: a hidden cross-origin frame may have rendering (and\n  // with it rAF and ResizeObserver) throttled, but timers still run.\n  function schedule() {\n    if (timer) return;\n    timer = setTimeout(function () {\n      timer = 0;\n      var m = collect();\n      var key = JSON.stringify(m);\n      if (key === last) return;\n      last = key;\n      m.__mockpit = true;\n      m.type = 'parts';\n      parent.postMessage(m, '*');\n    }, 0);\n  }\n\n  var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;\n  var observed = typeof WeakSet !== 'undefined' ? new WeakSet() : null;\n  function observeAll() {\n    if (!ro || !observed) return;\n    // html/body too: a non-part sibling growing moves parts without resizing them.\n    var els = [document.documentElement, document.body].concat([].slice.call(document.querySelectorAll('[data-part]')));\n    for (var i = 0; i < els.length; i++) {\n      var el = els[i];\n      if (el && !observed.has(el)) { observed.add(el); ro.observe(el); }\n    }\n  }\n  var moTimer = 0;\n  var mo = new MutationObserver(function () {\n    clearTimeout(moTimer);\n    moTimer = setTimeout(function () { observeAll(); schedule(); }, 40);\n  });\n  mo.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });\n\n  // Transforms and transitions move boxes without resizing or mutating anything.\n  document.addEventListener('animationend', schedule, true);\n  document.addEventListener('transitionend', schedule, true);\n  window.addEventListener('scroll', schedule, { passive: true });\n  window.addEventListener('resize', schedule);\n  if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule);\n  observeAll();\n  schedule();\n  // WebKit: RO's initial callback may never fire in a sandboxed frame.\n  function settle() {\n    schedule();\n    [50, 150, 400, 1000].forEach(function (ms) { setTimeout(schedule, ms); });\n  }\n  if (document.readyState === 'complete') settle();\n  else window.addEventListener('load', settle);\n\n  function setHighlight(names) {\n    var on = document.querySelectorAll('.' + HL);\n    for (var i = 0; i < on.length; i++) on[i].classList.remove(HL);\n    if (names && names.length) {\n      var want = {};\n      for (var k = 0; k < names.length && k < MAX_PARTS; k++) want[String(names[k])] = true;\n      var els = document.querySelectorAll('[data-part]');\n      for (var j = 0; j < els.length; j++) {\n        if (want[els[j].getAttribute('data-part')] === true) els[j].classList.add(HL);\n      }\n    }\n    // Our own class flip must not look like the agent's page changing.\n    mo.takeRecords();\n  }\n\n  // Try: the host lets the user click through the design; an element marked\n  // data-goto moves them to another screen. Only the host knows what that\n  // names, so the frame just reports it, and the click goes no further.\n  var trying = false;\n  function setTrying(on) {\n    trying = on;\n    document.documentElement.classList.toggle('mockpit-try', on);\n    mo.takeRecords();\n  }\n  window.addEventListener('click', function (e) {\n    if (!trying) return;\n    var t = e.target && e.target.closest ? e.target.closest('[data-goto]') : null;\n    if (!t) return;\n    e.preventDefault();\n    e.stopPropagation();\n    parent.postMessage({\n      __mockpit: true,\n      type: 'goto',\n      version: version,\n      to: text(t.getAttribute('data-goto')),\n    }, '*');\n  }, true);\n\n  // A finger's tap, in document px, for a host that lets touches through to the\n  // page (its canvas, where the page scrolls natively). A drag is a scroll: the\n  // browser cancels the pointer or it moves too far. A mouse clicks the host's\n  // own overlay instead, so it never reports here.\n  var tapAt = null;\n  window.addEventListener('pointerdown', function (e) {\n    tapAt = e.isPrimary && e.pointerType !== 'mouse' ? { x: e.clientX, y: e.clientY, t: Date.now() } : null;\n  }, true);\n  window.addEventListener('pointercancel', function () { tapAt = null; }, true);\n  window.addEventListener('pointerup', function (e) {\n    var a = tapAt;\n    tapAt = null;\n    if (!a || !e.isPrimary) return;\n    if (Math.abs(e.clientX - a.x) > 10 || Math.abs(e.clientY - a.y) > 10 || Date.now() - a.t > 600) return;\n    parent.postMessage({\n      __mockpit: true,\n      type: 'tap',\n      x: e.clientX + (window.scrollX || 0),\n      y: e.clientY + (window.scrollY || 0),\n    }, '*');\n  }, true);\n\n  // Two fingers are the host's: a page laid on its canvas takes one-finger\n  // scrolls itself, but a pinch zooms the canvas, not this page or the browser.\n  var pinching = false;\n  function pinch(phase, e) {\n    var t = e.touches;\n    parent.postMessage({\n      __mockpit: true,\n      type: 'pinch',\n      phase: phase,\n      a: t[0] ? { x: t[0].clientX, y: t[0].clientY } : null,\n      b: t[1] ? { x: t[1].clientX, y: t[1].clientY } : null,\n    }, '*');\n  }\n  window.addEventListener('touchstart', function (e) {\n    if (e.touches.length !== 2) return;\n    e.preventDefault();\n    pinching = true;\n    pinch('start', e);\n  }, { capture: true, passive: false });\n  window.addEventListener('touchmove', function (e) {\n    if (!pinching || e.touches.length < 2) return;\n    e.preventDefault();\n    pinch('move', e);\n  }, { capture: true, passive: false });\n  function release(e) {\n    if (!pinching || e.touches.length >= 2) return;\n    pinching = false;\n    pinch('end', e);\n  }\n  window.addEventListener('touchend', release, true);\n  window.addEventListener('touchcancel', release, true);\n  // \u2318/Ctrl+scroll and a trackpad pinch (ctrl+wheel) are the host's too: they\n  // zoom the canvas around the pointer, never this page or the browser.\n  window.addEventListener('wheel', function (e) {\n    if (!e.ctrlKey && !e.metaKey) return;\n    e.preventDefault();\n    parent.postMessage({ __mockpit: true, type: 'zoom', x: e.clientX, y: e.clientY, dy: e.deltaY }, '*');\n  }, { capture: true, passive: false });\n\n  window.addEventListener('message', function (e) {\n    if (e.source !== parent) return;\n    var d = e.data;\n    if (!d || d.__mockpit !== true) return;\n    if (d.type === 'highlight') setHighlight(Array.isArray(d.parts) ? d.parts : []);\n    else if (d.type === 'clear') setHighlight(null);\n    else if (d.type === 'try') setTrying(d.on === true);\n    else if (d.type === 'scroll') window.scrollBy(Number(d.dx) || 0, Number(d.dy) || 0);\n    else if (d.type === 'hit') {\n      var el = document.elementFromPoint(\n        (Number(d.x) || 0) - (window.scrollX || 0),\n        (Number(d.y) || 0) - (window.scrollY || 0)\n      );\n      var part = el && el.closest ? el.closest('[data-part]') : null;\n      parent.postMessage({\n        __mockpit: true,\n        type: 'hit',\n        ref: d.ref,\n        part: part ? text(part.getAttribute('data-part')) : null,\n        key: part ? text(part.getAttribute('data-part-key')) : null,\n      }, '*');\n    }\n  });\n})();\n";
+export declare const KNOBS_JS = "\n(function () {\n\nvar __kPathRe = /^[A-Za-z_][\\w-]{0,63}(\\.[A-Za-z_][\\w-]{0,63}){0,3}$/;\nvar __kTokenRe = /^[#\\w(),.%/+-][#\\w\\s(),.%/+-]*$/;\nfunction __kName(path) { return path.replace(/\\./g, '-'); }\nfunction __kCssString(s) {\n  return '\"' + s.replace(/[\\\\\"]/g, function (c) { return '\\\\' + c; })\n    .replace(/[\\u0000-\\u001f\\u007f]/g, function (c) { return '\\\\' + c.charCodeAt(0).toString(16) + ' '; }) + '\"';\n}\nfunction __kCss(v) {\n  if (typeof v === 'number') return isFinite(v) ? String(v) : null;\n  if (typeof v === 'boolean') return v ? '1' : '0';\n  if (typeof v === 'string') return __kTokenRe.test(v) ? v : __kCssString(v);\n  return null;\n}\nfunction __kVars(path, v) {\n  var name = __kName(path);\n  if (v && typeof v === 'object' && !Array.isArray(v)) {\n    var out = [];\n    for (var f in v) {\n      if (!Object.prototype.hasOwnProperty.call(v, f) || !/^[A-Za-z_][\\w-]{0,63}$/.test(f)) continue;\n      var c = __kCss(v[f]);\n      if (c !== null) out.push([name + '-' + f, c]);\n    }\n    return out;\n  }\n  var css = __kCss(v);\n  return css === null ? [] : [[name, css]];\n}\nfunction __kAttr(v) {\n  if (typeof v === 'number') return isFinite(v) ? String(v) : null;\n  if (typeof v === 'boolean') return v ? 'true' : 'false';\n  if (typeof v === 'string') return v;\n  return null;\n}\n\n  var doc = window.__mockpitDoc || {};\n  var current = {};\n  function own(o, k) { return Object.prototype.hasOwnProperty.call(o, k); }\n  function bind(path, v) {\n    var els = document.querySelectorAll('[data-k-bind]');\n    for (var i = 0; i < els.length; i++) {\n      if (els[i].getAttribute('data-k-bind') !== path) continue;\n      els[i].textContent = v && typeof v === 'object' ? JSON.stringify(v) : String(v);\n    }\n  }\n  function apply(values, live) {\n    var root = document.documentElement;\n    for (var path in values) {\n      if (!own(values, path) || !__kPathRe.test(path)) continue;\n      var v = values[path];\n      if (v === null || v === undefined) continue;\n      current[path] = v;\n      if (live) {\n        var vars = __kVars(path, v);\n        if (!vars.length) root.style.removeProperty('--k-' + __kName(path));\n        for (var i = 0; i < vars.length; i++) root.style.setProperty('--k-' + vars[i][0], vars[i][1]);\n        var attr = __kAttr(v);\n        if (attr === null) root.removeAttribute('data-k-' + __kName(path));\n        else root.setAttribute('data-k-' + __kName(path), attr);\n      }\n      bind(path, v);\n    }\n    window.dispatchEvent(new CustomEvent('mockpit:knobs', {\n      detail: { values: JSON.parse(JSON.stringify(current)) },\n    }));\n  }\n  // The URL's values are already on <html>; a live command may also have come\n  // in before the body existed, so both are bound once it does.\n  function initial() {\n    var start = doc.knobs && typeof doc.knobs === 'object' ? doc.knobs : {};\n    for (var k in start) if (own(start, k) && !own(current, k)) current[k] = start[k];\n    apply(current, false);\n  }\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initial);\n  else initial();\n  // Runs from <head>, before the page's own markup and anything slow it loads\n  // (a web font, a CDN stylesheet), so the host can send values at once rather\n  // than wait for the first parts report, which those can hold back.\n  if (parent !== window) parent.postMessage({ __mockpit: true, type: 'ready', version: doc.version }, '*');\n  window.addEventListener('message', function (e) {\n    if (e.source !== parent || parent === window) return;\n    var d = e.data;\n    if (!d || d.__mockpit !== true || d.type !== 'knobs') return;\n    if (d.values && typeof d.values === 'object' && !Array.isArray(d.values)) apply(d.values, true);\n  });\n})();\n";
 export declare function knobCss(v: unknown): string | null;
 export declare function knobVars(path: string, v: unknown): [string, string][];
 export declare function knobAttr(v: unknown): string | null;
@@ -13,6 +13,10 @@ export declare function knobPreamble(version: number | undefined, knobs: Record<
     htmlTag: string;
     headScript: string;
 };
+export declare function knobAttributes(knobs: Record<string, unknown> | undefined): {
+    attrs: string;
+    values: Record<string, unknown>;
+};
 export interface StaticAsset {
     path: string;
     contentType: string;