mockpit 1.2.0 → 2.0.0

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;

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) {