mockpit 0.0.0-stage → 1.0.0

package/dist/server/sqliteStorage.d.ts

@@ -0,0 +1,2 @@
+import type { SqlStorage } from "./types.ts";
+export declare function createSqliteStorage(path?: string): SqlStorage;

package/dist/server/sqliteStorage.js

@@ -0,0 +1,90 @@
+import { mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+// node:sqlite emits a one-time ExperimentalWarning when the builtin loads. It's
+// stable enough for us (the store-contract suite runs SqlStore against it), so
+// drop just that line while loading it, then restore the default handler. The
+// import is dynamic so the patch is in place first — a static `import` is
+// instantiated before any module body runs, too early to intercept. Every other
+// warning is untouched.
+const defaultEmitWarning = process.emitWarning;
+process.emitWarning = function patched(warning, ...rest) {
+    const message = typeof warning === "string" ? warning : warning.message;
+    if (/\bSQLite is an experimental feature\b/.test(message))
+        return;
+    defaultEmitWarning(warning, ...rest);
+};
+// finally so the original handler is restored even if the import rejects (e.g.
+// a Node build without node:sqlite) — otherwise the patch would leak and
+// silently swallow later SQLite warnings from elsewhere.
+let DatabaseSync;
+try {
+    ({ DatabaseSync } = await import("node:sqlite"));
+}
+finally {
+    process.emitWarning = defaultEmitWarning;
+}
+function makeCursor(rows) {
+    return {
+        toArray: () => rows,
+        one: () => {
+            if (rows.length !== 1)
+                throw new Error(`Expected exactly one row, got ${rows.length}`);
+            return rows[0];
+        },
+    };
+}
+// A `SqlStorage` (the slice of a Durable Object's SQL API that SqlStore uses)
+// backed by Node's built-in node:sqlite. Lets the SAME SqlStore run locally
+// that runs on the Worker DO, so the two deploys exercise one storage code
+// path. `:memory:` (the default) backs the store-contract suite; a file path is
+// the real local store.
+export function createSqliteStorage(path = ":memory:") {
+    if (path !== ":memory:") {
+        // node:sqlite won't create missing parent directories — it just fails with
+        // "unable to open database file", so a first run would always crash.
+        mkdirSync(dirname(path), { recursive: true });
+    }
+    const db = new DatabaseSync(path);
+    if (path !== ":memory:") {
+        // WAL + NORMAL: durable across a crash, far fewer fsyncs than the default
+        // — the right tradeoff for a single-process local server.
+        db.exec("PRAGMA journal_mode = WAL");
+        db.exec("PRAGMA synchronous = NORMAL");
+    }
+    return {
+        exec(query, ...bindings) {
+            // Schema DDL (multi-statement) and transaction control can't be run as a
+            // bound prepared statement — hand them to db.exec() directly. Everything
+            // else is a single prepared statement, matching the DO's exec(). The
+            // `bindings.length === 0` guard relies on SqlStore never issuing a
+            // zero-binding query that contains a literal `;` (it inlines no values —
+            // every dynamic value is a bound `?`), so a semicolon only ever means DDL.
+            const control = bindings.length === 0 &&
+                (/;\s*\S/.test(query) || /^\s*(BEGIN|COMMIT|ROLLBACK)\b/i.test(query));
+            if (control) {
+                db.exec(query);
+                return makeCursor([]);
+            }
+            // node:sqlite binds blobs as Uint8Array; the SqlStorage contract passes
+            // them as ArrayBuffer — adapt so BLOB columns round-trip.
+            const params = bindings.map((b) => (b instanceof ArrayBuffer ? new Uint8Array(b) : b));
+            const rows = db.prepare(query).all(...params);
+            return makeCursor(rows);
+        },
+        transactionSync(fn) {
+            // Already inside one (a store method composing another): join it.
+            if (db.isTransaction)
+                return fn();
+            db.exec("BEGIN");
+            try {
+                const result = fn();
+                db.exec("COMMIT");
+                return result;
+            }
+            catch (err) {
+                db.exec("ROLLBACK");
+                throw err;
+            }
+        },
+    };
+}

package/dist/server/surfacePage.d.ts

@@ -0,0 +1,48 @@
+import { type IconResolver } from "./icons.ts";
+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 function knobCss(v: unknown): string | null;
+export declare function knobVars(path: string, v: unknown): [string, string][];
+export declare function knobAttr(v: unknown): string | null;
+export declare const KNOB_VALUE_SOURCE = "\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";
+export declare function knobPreamble(version: number | undefined, knobs: Record<string, unknown> | undefined): {
+    htmlTag: string;
+    headScript: string;
+};
+export interface StaticAsset {
+    path: string;
+    contentType: string;
+    body: string;
+}
+export declare const STATIC_ASSET_PREFIX = "/asset/";
+export declare const staticAsset: (path: string) => StaticAsset | null;
+export declare const escapeHtml: (s: string) => string;
+export declare function renderSandboxedPart(doc: {
+    body: string;
+    css: string;
+    origin: string;
+    theme?: Theme | string;
+    mode?: Mode;
+}): string;
+export declare function renderMermaidPage(doc: {
+    mermaid: string;
+    origin: string;
+    theme?: Theme | string;
+    mode?: Mode;
+}): string;
+export declare function renderHtmlPage(doc: {
+    title: string;
+    html: string;
+    origin: string;
+    theme?: Theme | string;
+    mode?: Mode;
+    kits?: string[];
+    design?: DesignSettings | null;
+    version?: number;
+    knobs?: Record<string, unknown>;
+    resolveIcon?: IconResolver;
+}): string;