@12ui/design 0.2.29 → 0.2.30

package/prototype-kit/lib/runtime-check.mjs

@@ -0,0 +1,126 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+function errorText(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+async function smokeInteraction(page, selector, assertion) {
+  const locator = page.locator(selector).first();
+  if (!await locator.count()) return { present: false, ok: true };
+  try {
+    await locator.scrollIntoViewIfNeeded();
+    const point = await locator.evaluate((element) => {
+      const rect = element.getBoundingClientRect();
+      const insetX = Math.min(8, rect.width / 4);
+      const insetY = Math.min(8, rect.height / 4);
+      const points = [
+        [rect.left + rect.width / 2, rect.top + rect.height / 2],
+        [rect.left + insetX, rect.top + insetY],
+        [rect.right - insetX, rect.top + insetY],
+        [rect.left + insetX, rect.bottom - insetY],
+        [rect.right - insetX, rect.bottom - insetY],
+      ];
+      for (const [x, y] of points) {
+        const receiver = document.elementFromPoint(x, y);
+        if (receiver?.closest('[data-proto-action]') === element) return { x, y };
+      }
+      return null;
+    });
+    if (!point) return { present: true, ok: false, error: 'no pointer-reachable point' };
+    // A real pointer lands on the rendered child and bubbles to its action
+    // wrapper. locator.click() rejects that valid shape as "intercepted".
+    await page.mouse.click(point.x, point.y);
+    const opened = await page.locator(assertion).count();
+    const ok = opened === 1;
+    await page.keyboard.press('Escape');
+    return { present: true, ok, point, opened };
+  } catch (error) {
+    return { present: true, ok: false, error: errorText(error) };
+  }
+}
+
+async function checkDeepLinkBack(browser, url, pageFile) {
+  const page = await browser.newPage({ viewport: { width: 1536, height: 1024 } });
+  try {
+    await page.goto(url, { waitUntil: 'networkidle' });
+    const anchor = page.locator(`[data-proto-action="navigate"][data-proto-target^="${pageFile}#"]`).first();
+    const target = await anchor.count() ? await anchor.getAttribute('data-proto-target') : null;
+    if (!target) return { present: false, ok: true };
+    const start = page.url();
+    const beforeLength = await page.evaluate(() => history.length);
+    await page.locator(`[data-proto-action="navigate"][data-proto-target="${target}"]`).first().click();
+    await page.waitForTimeout(250);
+    const afterClick = page.url();
+    const afterLength = await page.evaluate(() => history.length);
+    await page.goBack({ waitUntil: 'domcontentloaded', timeout: 3_000 }).catch(() => null);
+    await page.waitForTimeout(150);
+    const afterBack = page.url();
+    return {
+      present: true,
+      ok: afterClick.includes('#') && afterLength > beforeLength && afterBack === start,
+      start,
+      afterClick,
+      afterBack,
+      historyLength: [beforeLength, afterLength],
+    };
+  } catch (error) {
+    return { present: true, ok: false, error: errorText(error) };
+  } finally {
+    await page.close();
+  }
+}
+
+export async function checkRuntime({ browser, baseUrl, relativeProtoPath, protoDir }) {
+  const htmlFiles = fs.readdirSync(protoDir).filter((name) => name.endsWith('.html') && name !== 'index.html').sort();
+  const pages = [];
+  const brokenTargets = [];
+  let deepLinkFile = null;
+  for (const file of htmlFiles) {
+    const pageErrors = [];
+    const consoleErrors = [];
+    const page = await browser.newPage({ viewport: { width: 1536, height: 1024 } });
+    page.on('pageerror', (error) => pageErrors.push(error.message));
+    page.on('console', (message) => { if (message.type() === 'error') consoleErrors.push(message.text()); });
+    const url = `${baseUrl}/${relativeProtoPath}/${encodeURIComponent(file)}`;
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 15_000 });
+      const boundRaw = await page.evaluate(() => document.documentElement.dataset.protoBound || null);
+      const bound = boundRaw ? JSON.parse(boundRaw) : null;
+      const duplicateIds = await page.locator('[id]').evaluateAll((nodes) => {
+        const counts = new Map();
+        for (const node of nodes) counts.set(node.id, (counts.get(node.id) || 0) + 1);
+        return [...counts].filter(([, count]) => count > 1).map(([id, count]) => ({ id, count }));
+      });
+      const targets = await page.locator('[data-proto-action="navigate"]').evaluateAll((nodes) => nodes.map((node) => node.getAttribute('data-proto-target')));
+      for (const target of targets.filter(Boolean)) {
+        const [targetFile, hash] = target.split('#');
+        if (!deepLinkFile && targetFile === file && hash) deepLinkFile = file;
+        const targetPath = path.join(protoDir, targetFile);
+        if (!fs.existsSync(targetPath)) brokenTargets.push({ page: file, target, reason: 'missing file' });
+        else if (hash && !fs.readFileSync(targetPath, 'utf8').includes(`id="${hash}"`)) brokenTargets.push({ page: file, target, reason: 'missing anchor' });
+      }
+      const dropdown = await smokeInteraction(page, '[data-proto-action="dropdown"]', '.proto-menu');
+      const modal = await smokeInteraction(page, '[data-proto-action="modal"]', '.proto-modal');
+      pages.push({ file, ok: pageErrors.length === 0 && dropdown.ok && modal.ok, bound, duplicateIds, pageErrors, consoleErrors, dropdown, modal });
+    } catch (error) {
+      pages.push({ file, ok: false, bound: null, pageErrors, consoleErrors, loadError: errorText(error) });
+    } finally {
+      await page.close();
+    }
+  }
+  let deepLinkBack = { present: false, ok: true };
+  if (deepLinkFile) {
+    const result = await checkDeepLinkBack(browser, `${baseUrl}/${relativeProtoPath}/${encodeURIComponent(deepLinkFile)}`, deepLinkFile);
+    deepLinkBack = { ...result, file: deepLinkFile };
+  }
+  return {
+    pages,
+    pageErrors: pages.reduce((sum, page) => sum + page.pageErrors.length + (page.loadError ? 1 : 0), 0),
+    consoleErrors: pages.reduce((sum, page) => sum + page.consoleErrors.length, 0),
+    duplicateIds: pages.reduce((sum, page) => sum + (page.duplicateIds?.length || 0), 0),
+    brokenTargets,
+    interactionFailures: pages.filter((page) => page.dropdown?.ok === false || page.modal?.ok === false).map((page) => page.file),
+    deepLinkBack,
+  };
+}

package/prototype-kit/lib/shells.mjs

@@ -0,0 +1,68 @@
+function edgeDistance(shell) {
+  if (shell.region === 'sidebar') return shell.box[0];
+  if (shell.region === 'header') return shell.box[1];
+  if (shell.region === 'footer') return -(shell.box[1] + shell.box[3]);
+  return 0;
+}
+
+function compareShells(a, b) {
+  return Number(b.semantic) - Number(a.semantic)
+    || edgeDistance(a) - edgeDistance(b)
+    || b.items - a.items
+    || b.share - a.share
+    || b.box[2] * b.box[3] - a.box[2] * a.box[3];
+}
+
+export function selectOneShellPerRegion(shells) {
+  const regions = new Map();
+  for (const shell of shells) {
+    const list = regions.get(shell.region) || [];
+    list.push(shell);
+    regions.set(shell.region, list);
+  }
+  const selected = [];
+  const dropped = [];
+  for (const list of regions.values()) {
+    list.sort(compareShells);
+    selected.push(list[0]);
+    dropped.push(...list.slice(1));
+  }
+  return { selected, dropped };
+}
+
+export function isWithinShell(ancestorIds, shellIds) {
+  return ancestorIds.some((id) => shellIds.has(id));
+}
+
+export function shellOverlapRatio(a, b) {
+  if (!a?.box || !b?.box) return 0;
+  const [ax, ay, aw, ah] = a.box;
+  const [bx, by, bw, bh] = b.box;
+  const width = Math.max(0, Math.min(ax + aw, bx + bw) - Math.max(ax, bx));
+  const height = Math.max(0, Math.min(ay + ah, by + bh) - Math.max(ay, by));
+  return width * height / Math.max(1, Math.min(aw * ah, bw * bh));
+}
+
+export function shouldSuppressDroppedShell(ambiguity) {
+  return shellOverlapRatio({ box: ambiguity.droppedBox }, { box: ambiguity.keptBox }) >= 0.8;
+}
+
+export function qualifiesShellCandidate(shell, viewportWidth) {
+  if (!shell.region) return false;
+  if ((shell.region === 'header' || shell.region === 'footer') && shell.box[2] < 0.5 * viewportWidth) return false;
+  return shell.share >= 0.5 || (shell.semantic && shell.region === 'sidebar' && shell.items >= 3);
+}
+
+export function compareCanonicalShells(a, b) {
+  return Number(b.share >= 0.5) - Number(a.share >= 0.5)
+    || b.matches - a.matches
+    || Number(b.isSource) - Number(a.isSource)
+    || b.share * b.items - a.share * a.items;
+}
+
+export function shouldTransplantShell(ownBox, canonicalBox) {
+  if (!ownBox || !canonicalBox) return false;
+  const dimensionRatio = (a, b) => Math.min(a, b) / Math.max(1, a, b);
+  return dimensionRatio(ownBox[2], canonicalBox[2]) >= 0.75
+    && dimensionRatio(ownBox[3], canonicalBox[3]) >= 0.75;
+}

package/prototype-kit/lib/static-server.mjs

@@ -0,0 +1,40 @@
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+
+const TYPES = new Map([
+  ['.css', 'text/css; charset=utf-8'],
+  ['.html', 'text/html; charset=utf-8'],
+  ['.js', 'text/javascript; charset=utf-8'],
+  ['.json', 'application/json; charset=utf-8'],
+  ['.png', 'image/png'],
+  ['.svg', 'image/svg+xml'],
+  ['.webp', 'image/webp'],
+]);
+
+export async function startStaticServer(root) {
+  const absoluteRoot = path.resolve(root);
+  const server = http.createServer((request, response) => {
+    const pathname = decodeURIComponent(new URL(request.url, 'http://localhost').pathname);
+    const candidate = path.resolve(absoluteRoot, '.' + pathname);
+    if (candidate !== absoluteRoot && !candidate.startsWith(absoluteRoot + path.sep)) {
+      response.writeHead(403).end('forbidden');
+      return;
+    }
+    let file = candidate;
+    try {
+      if (fs.statSync(file).isDirectory()) file = path.join(file, 'index.html');
+      const body = fs.readFileSync(file);
+      response.writeHead(200, { 'content-type': TYPES.get(path.extname(file)) || 'application/octet-stream' });
+      response.end(body);
+    } catch {
+      response.writeHead(404).end('not found');
+    }
+  });
+  await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
+  const address = server.address();
+  return {
+    baseUrl: `http://127.0.0.1:${address.port}`,
+    close: () => new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve())),
+  };
+}

package/prototype-kit/lib/text.mjs

@@ -0,0 +1,20 @@
+export function normalizeText(value) {
+  return String(value || '')
+    .normalize('NFKC')
+    .toLowerCase()
+    .replace(/[’']/g, "'")
+    .replace(/[^\p{L}\p{N}&+ ]/gu, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+export function stemToken(token) {
+  if (!/^[a-z]+$/.test(token)) return token;
+  return token.replace(/ies$/, 'y').replace(/s$/, '');
+}
+
+export function slugText(value) {
+  return normalizeText(value)
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/^-|-$/g, '') || 'untitled';
+}

package/prototype-kit/runtime/proto.css

@@ -0,0 +1,46 @@
+/* Prototype runtime chrome. Colours/fonts come from CSS variables set from the page's own tokens. */
+.proto-clickable { cursor: pointer; }
+.proto-clickable:hover { background-color: rgba(0, 0, 0, 0.035); }
+p.proto-clickable:hover { text-decoration: underline; text-underline-offset: 3px; }
+
+#proto-overlay-root { position: absolute; inset: 0; z-index: 2147483000; pointer-events: none; }
+#proto-overlay-root > * { pointer-events: auto; }
+
+.proto-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 20, 0.28); display: flex; align-items: center; justify-content: center; animation: proto-fade 140ms ease-out; }
+.proto-backdrop-clear { background: transparent; animation: none; }
+
+.proto-menu { position: absolute; background: var(--proto-surface); border: 1px solid var(--proto-border); border-radius: calc(var(--proto-radius) * 0.6); box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); padding: 6px; font-family: var(--proto-font); animation: proto-pop 120ms ease-out; }
+.proto-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 9px 12px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--proto-text); cursor: pointer; white-space: nowrap; }
+.proto-menu-item:hover { background: rgba(0,0,0,0.05); }
+.proto-menu-item:first-child { color: var(--proto-heading); font-weight: 500; }
+
+.proto-modal { width: 440px; max-width: calc(100vw - 48px); background: var(--proto-surface); border: 1px solid var(--proto-border); border-radius: var(--proto-radius); box-shadow: 0 24px 64px rgba(0,0,0,0.16); padding: 28px 28px 22px; font-family: var(--proto-font); animation: proto-pop 160ms ease-out; }
+.proto-modal-title { font-size: 20px; font-weight: 600; color: var(--proto-heading); margin: 0 0 10px; line-height: 1.25; }
+.proto-modal-body { font-size: 14px; line-height: 1.55; color: var(--proto-text); margin: 0 0 8px; }
+.proto-modal-detail { font-size: 14px; line-height: 1.5; color: var(--proto-muted); margin: 0 0 8px; font-style: italic; }
+.proto-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+.proto-btn { font: inherit; font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
+.proto-btn-primary { background: var(--proto-button); color: #fff; }
+.proto-btn-primary:hover { filter: brightness(1.08); }
+.proto-btn-ghost { background: transparent; color: var(--proto-text); border-color: var(--proto-border); }
+.proto-btn-ghost:hover { background: rgba(0,0,0,0.04); }
+
+.proto-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: var(--proto-heading); color: #fff; font-family: var(--proto-font); font-size: 14px; padding: 10px 16px; border-radius: 999px; opacity: 0; transition: opacity 200ms, transform 200ms; z-index: 2147483001; pointer-events: none; }
+.proto-toast-in { opacity: 1; transform: translate(-50%, 0); }
+
+.proto-field-text { outline: none; cursor: text; min-width: 40px; }
+.proto-field-text.proto-field-active { color: var(--proto-heading) !important; }
+.proto-field-text:empty::before { content: attr(data-placeholder); color: inherit; opacity: 0.6; }
+
+.proto-holding-block { position: absolute; font-family: var(--proto-font); }
+.proto-holding-title { font-weight: 600; color: var(--proto-heading); margin: 0 0 8px; letter-spacing: -0.01em; }
+.proto-holding-sub { font-size: 15px; line-height: 1.5; color: var(--proto-muted); margin: 0 0 28px; max-width: 560px; }
+.proto-holding-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.proto-holding-card { background: var(--proto-surface); border: 1px solid var(--proto-border); border-radius: var(--proto-radius); padding: 20px; min-height: 140px; }
+.proto-holding-card-title { font-size: 14px; font-weight: 600; color: var(--proto-heading); margin: 0 0 10px; }
+.proto-holding-card-line { height: 10px; border-radius: 5px; background: rgba(0,0,0,0.06); margin: 8px 0; }
+.proto-holding-card-line.short { width: 60%; }
+.proto-holding-note { margin-top: 24px; font-size: 12px; color: var(--proto-muted); }
+
+@keyframes proto-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes proto-pop { from { opacity: 0; transform: translateY(4px) scale(0.985); } to { opacity: 1; transform: none; } }

package/prototype-kit/runtime/proto.js

@@ -0,0 +1,173 @@
+// Prototype runtime: binds data-proto-* actions, hydrates copy from the content layer, renders dropdowns/modals.
+(() => {
+  if (document.documentElement.dataset.protoRuntime === 'bound') return;
+  document.documentElement.dataset.protoRuntime = 'bound';
+  const cfg = JSON.parse(document.getElementById('proto-state').textContent);
+  const T = cfg.tokens;
+  const qs = new URLSearchParams(location.search);
+  const contentSet = qs.get('content') || '';
+  const keepQuery = contentSet ? `?content=${encodeURIComponent(contentSet)}` : '';
+
+  // ---- content layer: replace text nodes from content/<state>.json (or content-<set>/)
+  async function hydrate() {
+    if (!cfg.contentFile) return;
+    const dir = contentSet ? `content-${contentSet}` : 'content';
+    try {
+      const res = await fetch(`${dir}/${cfg.contentFile}`, { cache: 'no-store' });
+      if (!res.ok) return;
+      const data = await res.json();
+      let changed = 0;
+      for (const [id, text] of Object.entries(data)) {
+        const el = document.getElementById(id);
+        if (!el || el.textContent === text) continue;
+        el.textContent = text; changed++;
+      }
+      document.documentElement.dataset.protoContent = `${dir}:${changed}`;
+    } catch (e) { /* file:// or missing set: keep baked-in copy */ }
+  }
+
+  // ---- overlay primitives, styled from the page's own tokens
+  const root = document.createElement('div');
+  root.id = 'proto-overlay-root';
+  document.body.appendChild(root);
+  const style = document.documentElement.style;
+  style.setProperty('--proto-font', T.bodyFont ? `'${T.bodyFont}', sans-serif` : 'inherit');
+  style.setProperty('--proto-text', T.bodyColor || '#222');
+  style.setProperty('--proto-muted', T.mutedColor || '#777');
+  style.setProperty('--proto-heading', T.headingColor || '#111');
+  style.setProperty('--proto-accent', T.accent || '#222');
+  style.setProperty('--proto-surface', T.surfaceBg && T.surfaceBg !== 'rgba(0, 0, 0, 0)' ? T.surfaceBg : '#fff');
+  style.setProperty('--proto-border', (T.cardBorder || '1px rgb(230,230,230)').replace(/^\S+\s/, ''));
+  style.setProperty('--proto-radius', T.cardRadius || '12px');
+  style.setProperty('--proto-button', T.buttonBg && T.buttonBg !== 'rgb(255, 255, 255)' ? T.buttonBg : (T.accent || '#222'));
+
+  function closeAll() { root.innerHTML = ''; }
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeAll(); });
+
+  function openDropdown(trigger, options, labelEl) {
+    closeAll();
+    const r = trigger.getBoundingClientRect();
+    const menu = document.createElement('div');
+    menu.className = 'proto-menu';
+    menu.style.left = `${r.left + window.scrollX}px`;
+    menu.style.top = `${r.bottom + window.scrollY + 6}px`;
+    menu.style.minWidth = `${Math.max(160, r.width)}px`;
+    for (const opt of options) {
+      const item = document.createElement('button');
+      item.className = 'proto-menu-item';
+      item.textContent = opt;
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (labelEl) labelEl.textContent = opt;
+        closeAll();
+      });
+      menu.appendChild(item);
+    }
+    root.appendChild(menu);
+    const backdrop = document.createElement('div');
+    backdrop.className = 'proto-backdrop proto-backdrop-clear';
+    backdrop.addEventListener('click', closeAll);
+    root.insertBefore(backdrop, menu);
+  }
+
+  function openModal({ title, body, confirm, detail }) {
+    closeAll();
+    const backdrop = document.createElement('div');
+    backdrop.className = 'proto-backdrop';
+    backdrop.addEventListener('click', (e) => { if (e.target === backdrop) closeAll(); });
+    const modal = document.createElement('div');
+    modal.className = 'proto-modal';
+    modal.innerHTML = `
+      <h2 class="proto-modal-title"></h2>
+      <p class="proto-modal-body"></p>
+      ${detail ? '<p class="proto-modal-detail"></p>' : ''}
+      <div class="proto-modal-actions">
+        <button class="proto-btn proto-btn-ghost" data-act="cancel">Cancel</button>
+        <button class="proto-btn proto-btn-primary" data-act="confirm"></button>
+      </div>`;
+    modal.querySelector('.proto-modal-title').textContent = title || 'Confirm';
+    modal.querySelector('.proto-modal-body').textContent = body || '';
+    if (detail) modal.querySelector('.proto-modal-detail').textContent = detail;
+    modal.querySelector('[data-act="confirm"]').textContent = confirm || 'Confirm';
+    modal.querySelector('[data-act="cancel"]').addEventListener('click', closeAll);
+    modal.querySelector('[data-act="confirm"]').addEventListener('click', () => {
+      toast(`${confirm || 'Done'} — ${title || ''}`.trim());
+      closeAll();
+    });
+    backdrop.appendChild(modal);
+    root.appendChild(backdrop);
+    modal.querySelector('[data-act="confirm"]').focus();
+  }
+
+  function toast(text) {
+    const t = document.createElement('div');
+    t.className = 'proto-toast';
+    t.textContent = text;
+    document.body.appendChild(t);
+    requestAnimationFrame(() => t.classList.add('proto-toast-in'));
+    setTimeout(() => { t.classList.remove('proto-toast-in'); setTimeout(() => t.remove(), 300); }, 1800);
+  }
+
+  // ---- bind actions
+  const bound = { navigate: 0, dropdown: 0, modal: 0, field: 0 };
+  for (const el of document.querySelectorAll('[data-proto-action]')) {
+    const action = el.dataset.protoAction;
+    el.classList.add('proto-clickable');
+    if (action === 'navigate') {
+      bound.navigate++;
+      el.addEventListener('click', (e) => {
+        e.preventDefault(); e.stopPropagation();
+        const tgt = el.dataset.protoTarget;
+        const [file, hash] = tgt.split('#');
+        if (hash && location.pathname.endsWith('/' + file)) { const t = document.getElementById(hash); if (t) { t.scrollIntoView({ behavior: 'smooth', block: 'start' }); history.pushState({ protoAnchor: hash }, '', '#' + hash); return; } }
+        location.href = file + keepQuery + (hash ? '#' + hash : '');
+      });
+    } else if (action === 'dropdown') {
+      const options = JSON.parse(el.dataset.protoOptions || '[]');
+      if (new Set(options.map((option) => String(option).trim().toLocaleLowerCase())).size < 3) {
+        el.dataset.protoSuppressed = 'invalid-dropdown';
+        continue;
+      }
+      bound.dropdown++;
+      const labelEl = el.dataset.protoLabel ? document.getElementById(el.dataset.protoLabel) : null;
+      el.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openDropdown(el, options, labelEl); });
+    } else if (action === 'modal') {
+      bound.modal++;
+      const modal = JSON.parse(el.dataset.protoModal || '{}');
+      el.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openModal(modal); });
+    }
+  }
+
+  // ---- fields: the placeholder text becomes editable; Enter submits to a modal
+  for (const el of document.querySelectorAll('[data-proto-field]')) {
+    const textEl = el.dataset.protoField ? document.getElementById(el.dataset.protoField) : null;
+    if (!textEl) continue;
+    bound.field++;
+    const placeholder = textEl.textContent;
+    const submitLabel = el.dataset.protoSubmit || 'Send';
+    textEl.contentEditable = 'true';
+    textEl.spellcheck = false;
+    textEl.classList.add('proto-field-text');
+    textEl.dataset.placeholder = placeholder;
+    textEl.addEventListener('focus', () => { if (textEl.textContent === placeholder) { textEl.textContent = ''; textEl.classList.add('proto-field-active'); } });
+    textEl.addEventListener('blur', () => { if (!textEl.textContent.trim()) { textEl.textContent = placeholder; textEl.classList.remove('proto-field-active'); } });
+    textEl.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return;
+      e.preventDefault();
+      const value = textEl.textContent.trim();
+      if (!value) return;
+      openModal({ title: submitLabel, body: el.dataset.protoSubmitBody || 'Received. This is a prototype, so nothing was sent.', detail: `“${value}”`, confirm: 'OK' });
+      textEl.blur();
+    });
+    el.addEventListener('click', (e) => { if (e.target !== textEl) { textEl.focus(); } });
+    for (const btn of document.querySelectorAll(`[data-proto-submit-for="${textEl.id}"]`)) {
+      btn.classList.add('proto-clickable');
+      btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); textEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); });
+    }
+  }
+  // same-page anchors: scroll to the target viewport section
+  if (location.hash) { const t = document.querySelector(location.hash); if (t) t.scrollIntoView({ block: 'start' }); }
+
+  document.documentElement.dataset.protoBound = JSON.stringify(bound);
+  hydrate();
+})();

package/prototype-kit/score-labels.mjs

@@ -0,0 +1,42 @@
+// Score Luna label rounds against gold. Usage: node score-labels.mjs <model.json> <gold.json> <results-dir>...
+import fs from 'node:fs';
+import path from 'node:path';
+const [modelFile, goldFile, ...dirs] = process.argv.slice(2);
+const model = JSON.parse(fs.readFileSync(modelFile, 'utf8'));
+const gold = JSON.parse(fs.readFileSync(goldFile, 'utf8'));
+const norm = (s) => (s || '').toLowerCase().replace(/[^a-z0-9&]+/g, ' ').trim();
+function key(a) {
+  if (!a || !a.action) return 'missing';
+  if (a.action === 'navigate') return 'navigate:' + (a.target || '');
+  return a.action;
+}
+function matches(got, acceptable) {
+  for (const acc of acceptable) {
+    if (acc === got) return true;
+    if (acc === 'navigate:holding:*' && /^navigate:holding:/.test(got)) return true;
+    if (/^navigate:holding:/.test(acc) && /^navigate:holding:/.test(got) && norm(acc.slice(17)) === norm(got.slice(17))) return true;
+  }
+  return false;
+}
+for (const dir of dirs) {
+  const tot = { n: 0, ok: 0, missing: 0, byKind: {}, wrong: [] };
+  for (const s of model.states) {
+    const g = gold[s.stateId]; if (!g) continue;
+    const f = path.join(dir, s.stateId + '.json'); if (!fs.existsSync(f)) continue;
+    const acts = JSON.parse(fs.readFileSync(f, 'utf8')).actions || [];
+    const prefix = 'viewport-' + s.sectionId.split('-').slice(1).join('-') + '-';
+    for (const [suffix, acceptable] of Object.entries(g)) {
+      const id = prefix + suffix;
+      const c = s.candidates.find((x) => x.id === id);
+      const kind = c ? c.kind : 'other';
+      const a = acts.find((x) => x.id === id);
+      const got = key(a);
+      tot.n++; tot.byKind[kind] = tot.byKind[kind] || { n: 0, ok: 0 }; tot.byKind[kind].n++;
+      if (got === 'missing') tot.missing++;
+      if (matches(got, acceptable)) { tot.ok++; tot.byKind[kind].ok++; } else tot.wrong.push(`${s.stateId} ${suffix} [${kind}] got=${got} want=${acceptable.join('|')}`);
+    }
+  }
+  console.log(`\n== ${dir}: ${tot.ok}/${tot.n} acceptable (${(100 * tot.ok / tot.n).toFixed(1)}%), missing=${tot.missing}`);
+  for (const [k, v] of Object.entries(tot.byKind)) console.log(`   ${k.padEnd(9)} ${v.ok}/${v.n}`);
+  for (const w of tot.wrong) console.log('   x ' + w);
+}

package/prototype-kit/tests/README.md

@@ -0,0 +1,28 @@
+# Prototype break-test harness
+
+All commands are offline unless a command explicitly invokes the existing Luna
+label fan. The population runner is intentionally serial: one stored branch is
+inventoried, analysed, built, and browser-checked before the next begins.
+
+Discover unique stored outputs (exact aliases are retained on each row):
+
+```sh
+node discover-runs.mjs <root>... --out <manifest.json>
+```
+
+Generated inventories, prototypes, screenshots, and result JSON belong in the
+study's `work/` or `evidence/` directories, never in `tests/`.
+
+Run the full population, one stored output at a time:
+
+```sh
+node population-sweep.mjs \
+  --manifest <manifest.json> \
+  --work-dir <generated-work-dir> \
+  --results <results.jsonl>
+```
+
+The JSONL is append-only and resumable by run fingerprint. A row records the
+failed stage or, for successful builds, real/holding page counts, action counts,
+runtime page errors, broken targets, shell-size residuals, and same-page
+deep-link/back behavior.

package/prototype-kit/tests/adversarial-runtime.mjs

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+import { startStaticServer } from '../lib/static-server.mjs';
+
+const outIndex = process.argv.indexOf('--out');
+const outFile = outIndex >= 0 ? process.argv[outIndex + 1] : null;
+const kitDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), '..');
+const server = await startStaticServer(kitDir);
+const browser = await chromium.launch();
+
+const doublePage = await browser.newPage();
+await doublePage.goto(`${server.baseUrl}/tests/fixtures/runtime/double.html`, { waitUntil: 'networkidle' });
+await doublePage.locator('#open').click();
+const doubleBinding = {
+  overlayRoots: await doublePage.locator('#proto-overlay-root').count(),
+  modals: await doublePage.locator('.proto-modal').count(),
+};
+await doublePage.close();
+
+const nestedPage = await browser.newPage();
+await nestedPage.goto(`${server.baseUrl}/tests/fixtures/runtime/nested.html`, { waitUntil: 'networkidle' });
+await nestedPage.locator('#child').click();
+const nestedBinding = {
+  modals: await nestedPage.locator('.proto-modal').count(),
+  menus: await nestedPage.locator('.proto-menu').count(),
+};
+await nestedPage.close();
+
+const dropdownPage = await browser.newPage();
+await dropdownPage.goto(`${server.baseUrl}/tests/fixtures/runtime/invalid-dropdown.html`, { waitUntil: 'networkidle' });
+await dropdownPage.locator('#invalid').click();
+const invalidOpened = await dropdownPage.locator('.proto-menu').count();
+await dropdownPage.locator('#valid').click();
+const dropdownGuard = {
+  invalidOpened,
+  validOpened: await dropdownPage.locator('.proto-menu').count(),
+  bound: JSON.parse(await dropdownPage.locator('html').getAttribute('data-proto-bound')),
+};
+await dropdownPage.close();
+
+const hoverPage = await browser.newPage();
+await hoverPage.goto(`${server.baseUrl}/tests/fixtures/runtime/hover-stack.html`, { waitUntil: 'networkidle' });
+await hoverPage.locator('#stacked-button').click();
+const stackedOpened = await hoverPage.locator('.proto-modal').count();
+await hoverPage.keyboard.press('Escape');
+await hoverPage.locator('#plain').click();
+const hoverStacking = { stackedOpened, plainOpened: await hoverPage.locator('.proto-modal').count() };
+await hoverPage.close();
+
+const historyPage = await browser.newPage();
+const historyStart = `${server.baseUrl}/tests/fixtures/runtime/history.html`;
+await historyPage.goto(historyStart, { waitUntil: 'networkidle' });
+const beforeLength = await historyPage.evaluate(() => history.length);
+await historyPage.locator('#jump').click();
+await historyPage.waitForTimeout(150);
+const afterClick = historyPage.url();
+const afterLength = await historyPage.evaluate(() => history.length);
+await historyPage.goBack({ waitUntil: 'domcontentloaded', timeout: 2_000 }).catch(() => null);
+await historyPage.waitForTimeout(150);
+const deepLinkBack = {
+  start: historyStart,
+  afterClick,
+  afterBack: historyPage.url(),
+  historyLength: [beforeLength, afterLength],
+};
+await historyPage.locator('#next').click();
+await historyPage.waitForURL('**/history-destination.html');
+const afterPageClick = historyPage.url();
+await historyPage.goBack({ waitUntil: 'domcontentloaded', timeout: 2_000 });
+const pageBack = { afterPageClick, afterBack: historyPage.url() };
+await historyPage.close();
+
+await browser.close();
+await server.close();
+const result = { doubleBinding, nestedBinding, dropdownGuard, hoverStacking, deepLinkBack, pageBack };
+if (process.argv.includes('--assert')) {
+  assert.deepEqual(doubleBinding, { overlayRoots: 1, modals: 1 }, 'runtime must bind exactly once when injected twice');
+  assert.deepEqual(nestedBinding, { modals: 1, menus: 0 }, 'the innermost action must stop a parent binding from also firing');
+  assert.deepEqual(dropdownGuard, { invalidOpened: 0, validOpened: 1, bound: { navigate: 0, dropdown: 1, modal: 0, field: 0 } }, 'invalid dropdowns must stay inert while real dropdowns bind');
+  assert.deepEqual(hoverStacking, { stackedOpened: 1, plainOpened: 1 }, 'hover styling must not reorder either overlapping or ordinary actions');
+  assert.equal(afterLength, beforeLength + 1, 'same-page navigation must add one history entry');
+  assert.equal(deepLinkBack.afterBack, historyStart, 'browser Back must return to the pre-anchor URL');
+  assert.equal(pageBack.afterBack, historyStart, 'browser Back must return from a different prototype page');
+}
+const json = JSON.stringify(result, null, 2) + '\n';
+if (outFile) fs.writeFileSync(outFile, json);
+process.stdout.write(json);