@sixb/core 0.1.21 → 0.1.22

package/dist/artifacts/frames/index.js

@@ -2,15 +2,23 @@
 import {
   isArtifactAddress2,
   parseArtifactAddress2
-} from "../../chunk-mjddfa7k.js";
+} from "../../chunk-3fqxbn31.js";
 import {
   ArtifactRequestError2,
   decodeHtmlEntities,
-  SLIDES_ENTRY2,
+  HTML_ENTRY2,
   FRAME_ASSET_PREFIX
-} from "../../chunk-48qjhh6v.js";
+} from "../../chunk-qx00vjrj.js";
 import"../../chunk-wkv3h3q7.js";
+import"../../chunk-hz5d43gn.js";
+import {
+  serializeExpandedObject2
+} from "../../chunk-az47zep4.js";
 import"../../chunk-a3faa34j.js";
+// src/artifacts/serialize-query.ts
+function serializeArtifactQueryResult(result) {
+  return result.kind === "objects" ? { ...result, objects: result.objects.map(serializeExpandedObject2) } : result;
+}
 // src/artifacts/frames/kit.ts
 var FONTS = {
   "--font-sans": '"SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif',
@@ -66,30 +74,37 @@ var FRAME_DEFAULT_THEMES = {
   }
 };
 var LIGHT = FRAME_DEFAULT_THEMES.light.tokens;
-var FRAME_KIT_CSS = `
+function kit(rules) {
+  return `
 @layer sixb-kit, sixb-theme;
 
 @layer sixb-kit {
   :root {
 ${Object.entries(LIGHT).map(([name, value]) => `    ${name}: ${value};`).join(`
 `)}
-    --sixb-scale: 1;
-    --sixb-overview-scale: 0.25;
-    --sixb-columns: 4;
-    --sixb-stage: ${LIGHT["--muted"]};
-    --sixb-stage-border: ${LIGHT["--border"]};
-    --sixb-stage-foreground: ${LIGHT["--foreground"]};
   }
 
   *, *::before, *::after { box-sizing: border-box; }
   html, body { margin: 0; padding: 0; }
   body {
-    background: var(--muted);
     color: var(--foreground);
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
   }
 
+${rules}}
+`;
+}
+var FRAME_DECK_CSS = kit(`  :root {
+    --sixb-scale: 1;
+    --sixb-overview-scale: 0.25;
+    --sixb-columns: 4;
+    --sixb-stage: ${LIGHT["--muted"]};
+    --sixb-stage-border: ${LIGHT["--border"]};
+    --sixb-stage-foreground: ${LIGHT["--foreground"]};
+  }
+  body { background: var(--muted); }
+
   /*
    * The stage: a slide's size and scale, which slides show, and the stage around them, in the
    * app's colors (--sixb-stage and its kin, which only the app's theme sets). A deck's own CSS, unlayered,
@@ -384,8 +399,167 @@ ${Object.entries(LIGHT).map(([name, value]) => `    ${name}: ${value};`).join(`
     font-size: 18px;
     font-weight: 600;
   }
-}
-`;
+`);
+var FRAME_PAGE_CSS = kit(`  html { color-scheme: light; }
+  html.dark { color-scheme: dark; }
+  body {
+    background: var(--background);
+    font-size: 15px;
+    line-height: 1.6;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* A page reads in a centered column with room around it, narrower on a phone. */
+  main { display: block; max-width: 1120px; margin: 0 auto; padding: 40px 32px 56px; }
+  @media (max-width: 640px) { main { padding: 24px 16px 40px; } }
+
+  /* Type. */
+  :is(h1, h2, h3, h4) { margin: 0 0 0.5em; color: var(--foreground); text-wrap: balance; }
+  h1 { font-size: 32px; line-height: 1.15; font-weight: 650; letter-spacing: -0.025em; }
+  h2 { margin-top: 1.6em; font-size: 21px; line-height: 1.25; font-weight: 620; letter-spacing: -0.015em; }
+  h3 { margin-top: 1.4em; font-size: 16px; line-height: 1.35; font-weight: 600; }
+  h4 { font-size: 14px; font-weight: 600; }
+  :is(h1, h2, h3, h4):first-child { margin-top: 0; }
+  @media (max-width: 640px) { h1 { font-size: 26px; } h2 { font-size: 19px; } }
+  p { margin: 0 0 1em; text-wrap: pretty; }
+  .lede { max-width: 42em; margin-bottom: 1.6em; font-size: 17px; line-height: 1.55; color: var(--muted-foreground); }
+  .eyebrow {
+    margin: 0 0 8px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  small, .muted, .note { color: var(--muted-foreground); }
+  small, .note { font-size: 13px; }
+  a { color: var(--foreground); text-decoration-color: color-mix(in oklab, var(--foreground) 35%, transparent); text-underline-offset: 3px; }
+  a:hover { text-decoration-color: currentColor; }
+  strong { font-weight: 600; }
+  hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); }
+  :is(ul, ol) { margin: 0 0 1em; padding-left: 1.25em; }
+  li + li { margin-top: 0.25em; }
+  code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 5px; background: var(--muted); }
+  pre { margin: 0 0 1em; padding: 14px 16px; overflow-x: auto; border-radius: var(--radius); background: var(--muted); font-size: 13px; line-height: 1.5; }
+  pre code { padding: 0; background: none; }
+  img, svg, video, canvas { max-width: 100%; }
+  img, video { height: auto; }
+
+  /* Tables: hairline rows, quiet headers, numbers aligned. Wide ones scroll in their box. */
+  table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
+  :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
+  th { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-foreground); white-space: nowrap; }
+  :is(th, td):first-child { padding-left: 0; }
+  :is(th, td):last-child { padding-right: 0; }
+  :is(th, td).num, :is(th, td)[data-numeric] { text-align: right; white-space: nowrap; }
+  .table-scroll { overflow-x: auto; }
+
+  /* Forms and buttons, drawn like the app's. */
+  label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 550; }
+  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
+    width: 100%;
+    min-height: 36px;
+    padding: 7px 10px;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px);
+    background: var(--card);
+    color: var(--foreground);
+    font: inherit;
+    font-size: 14px;
+    line-height: 1.4;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 0.03);
+    transition: border-color 0.12s, box-shadow 0.12s;
+  }
+  :is(input, select, textarea):focus-visible {
+    outline: none;
+    border-color: color-mix(in oklab, var(--foreground) 45%, var(--border));
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--foreground) 12%, transparent);
+  }
+  input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
+  textarea { min-height: 88px; resize: vertical; }
+  button, .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 0 14px;
+    border: 1px solid transparent;
+    border-radius: calc(var(--radius) - 2px);
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 550;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.12s, border-color 0.12s, opacity 0.12s;
+  }
+  :is(button, .button):hover { background: color-mix(in oklab, var(--primary) 88%, var(--background)); }
+  :is(button, .button):focus-visible { outline: 2px solid var(--ring, var(--foreground)); outline-offset: 2px; }
+  :is(button, .button):disabled { opacity: 0.5; cursor: default; }
+  :is(button, .button).secondary { border-color: var(--border); background: var(--card); color: var(--foreground); }
+  :is(button, .button).secondary:hover { background: var(--muted); }
+  :is(button, .button).ghost { background: transparent; color: var(--foreground); }
+  :is(button, .button).ghost:hover { background: var(--muted); }
+  fieldset { margin: 0 0 16px; padding: 0; border: 0; }
+  .field { margin-bottom: 16px; }
+
+  /* Components. */
+  .card {
+    padding: 20px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--card);
+    color: var(--card-foreground);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+  }
+  .card > :last-child { margin-bottom: 0; }
+  /* Cards stack with room between them; in a grid or a row, its gap spaces them. */
+  .card { margin-bottom: 16px; }
+  :is(.grid, .row) > .card { margin-bottom: 0; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; margin-bottom: 24px; }
+  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+  .stat .label { font-size: 13px; color: var(--muted-foreground); }
+  .stat .value { margin-top: 4px; font-size: 30px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+  .stat .delta { margin-top: 6px; font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 9px;
+    border-radius: 999px;
+    background: var(--muted);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.6;
+    white-space: nowrap;
+  }
+  .callout { margin: 0 0 1em; padding: 14px 16px; border-radius: var(--radius); background: var(--muted); }
+  .callout > :last-child { margin-bottom: 0; }
+
+  /*
+   * Another artifact on the page: the app draws it over this box, sized by the page's CSS like any
+   * block. Until it does, the box shows where it goes.
+   */
+  sixb-embed {
+    display: block;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    margin-bottom: 1em;
+    border-radius: var(--radius);
+    background: var(--muted);
+  }
+  sixb-embed[title]::after {
+    content: attr(title);
+    position: absolute;
+    inset: auto 16px 12px;
+    font-size: 13px;
+    color: var(--muted-foreground);
+  }
+  img[data-sixb-ref="unavailable"] { display: block; min-width: 120px; min-height: 68px; border-radius: var(--radius); background: var(--muted); }
+`);
 
 // src/artifacts/frames/runtime.ts
 function frameRuntime() {
@@ -404,13 +578,28 @@ function frameRuntime() {
     " ",
     "Escape"
   ];
+  const MAX_KEY_LENGTH = 128;
+  const MAX_VALUE_BYTES = 65536;
+  const QUERY_NAME = /^[a-z0-9][a-z0-9-]{0,63}$/;
   const root = document.documentElement;
+  const script = document.currentScript;
+  const deck = script?.getAttribute("data-sixb-layout") !== "page";
   const start = new URLSearchParams(window.location.hash.slice(1));
-  root.classList.add("sixb-deck");
-  root.dataset.mode = start.has("sixb-fill") ? "fill" : "slide";
+  if (deck) {
+    root.classList.add("sixb-deck");
+    root.dataset.mode = start.has("sixb-fill") ? "fill" : "slide";
+  }
   let current = Number(start.get("sixb-slide")) || 1;
   const slides = () => Array.from(document.querySelectorAll("section.slide"));
   const post = (message) => window.parent.postMessage({ protocol: PROTOCOL, ...message }, "*");
+  const webAddress = (href) => {
+    try {
+      const url = new URL(href, document.baseURI);
+      return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+    } catch {
+      return null;
+    }
+  };
   const fit = () => {
     const columns = window.innerWidth < 720 ? 2 : window.innerWidth < 1100 ? 3 : 4;
     const gap = 16;
@@ -421,21 +610,36 @@ function frameRuntime() {
   };
   let reported = "";
   let reporting = false;
+  const ids = new WeakMap;
+  let lastId = 0;
+  const idOf = (element) => {
+    const known = ids.get(element);
+    if (known !== undefined)
+      return known;
+    lastId += 1;
+    ids.set(element, lastId);
+    return lastId;
+  };
   const reportEmbeds = () => {
     if (reporting || root.dataset.mode === "fill")
       return;
     reporting = true;
     requestAnimationFrame(() => {
       reporting = false;
-      const scale = Number(root.style.getPropertyValue("--sixb-scale")) || 1;
-      const slide = root.dataset.mode === "overview" ? undefined : slides()[current - 1];
-      const embeds = Array.from(slide?.querySelectorAll("sixb-embed[src]") ?? []).map((element) => {
+      const scale = deck ? Number(root.style.getPropertyValue("--sixb-scale")) || 1 : 1;
+      const scope = deck ? root.dataset.mode === "overview" ? undefined : slides()[current - 1] : document;
+      const near = (rect) => deck || rect.bottom > -window.innerHeight && rect.top < window.innerHeight * 2;
+      const embeds = Array.from(scope?.querySelectorAll("sixb-embed[src]") ?? []).flatMap((element) => {
+        const id = idOf(element);
         const rect = element.getBoundingClientRect();
-        return {
-          address: (element.getAttribute("src") ?? "").trim(),
-          rect: { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
-          scale
-        };
+        return near(rect) ? [
+          {
+            id,
+            address: (element.getAttribute("src") ?? "").trim(),
+            rect: { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+            scale
+          }
+        ] : [];
       });
       const next = JSON.stringify(embeds);
       if (next === reported)
@@ -444,6 +648,18 @@ function frameRuntime() {
       post({ event: "embeds", params: { embeds } });
     });
   };
+  let height = -1;
+  const reportSize = () => {
+    const body = document.body;
+    if (deck || !body)
+      return;
+    const style = getComputedStyle(body);
+    const next = Math.ceil(Math.max(body.scrollHeight, body.getBoundingClientRect().height) + (Number.parseFloat(style.marginTop) || 0) + (Number.parseFloat(style.marginBottom) || 0));
+    if (next === height)
+      return;
+    height = next;
+    post({ event: "size", params: { height } });
+  };
   const show = (slide) => {
     const all = slides();
     current = Math.min(Math.max(1, Math.round(slide) || 1), Math.max(1, all.length));
@@ -477,12 +693,32 @@ function frameRuntime() {
         }
         style.textContent = `@layer sixb-theme { :root { ${declarations.join(" ")} color-scheme: ${params.dark === true ? "dark" : "light"}; } }`;
         root.classList.toggle("dark", params.dark === true);
+        window.dispatchEvent(new CustomEvent("sixb:theme", { detail: { dark: params.dark === true } }));
         return;
       }
       case "goto":
+        if (!deck)
+          throw new Error("Only a deck has slides.");
         show(Number(params.slide));
         return;
+      case "reload":
+        setTimeout(() => window.location.reload());
+        return;
+      case "query.changed": {
+        const name = String(params.name);
+        if (!QUERY_NAME.test(name))
+          throw new Error(`Unknown query '${name}'.`);
+        window.dispatchEvent(new CustomEvent("sixb:query", { detail: { name } }));
+        return;
+      }
+      case "scroll":
+        if (deck)
+          throw new Error("Only a page scrolls.");
+        window.scrollBy({ left: Number(params.x) || 0, top: Number(params.y) || 0 });
+        return;
       case "mode":
+        if (!deck)
+          throw new Error("Only a deck has modes.");
         if (root.dataset.mode === "fill")
           return;
         root.dataset.mode = params.mode === "overview" || params.mode === "present" ? params.mode : "slide";
@@ -493,10 +729,88 @@ function frameRuntime() {
         throw new Error(`Unknown method '${method}'.`);
     }
   };
+  const calls = new Map;
+  let called = 0;
+  const alone = window.parent === window;
+  const memory = new Map;
+  const call = (method, params) => {
+    if (alone) {
+      const key = String(params.key);
+      const kept = memory.get(key);
+      switch (method) {
+        case "state.get":
+          return Promise.resolve(kept === undefined ? undefined : JSON.parse(kept));
+        case "state.set":
+          memory.set(key, JSON.stringify(params.value));
+          return Promise.resolve(undefined);
+        case "state.delete":
+          return Promise.resolve(memory.delete(key));
+        default:
+          return Promise.resolve([...memory.keys()].sort());
+      }
+    }
+    called += 1;
+    const id = called;
+    return new Promise((resolve, reject) => {
+      calls.set(id, { resolve, reject });
+      post({ call: id, method, params });
+    });
+  };
+  const checkKey = (key) => {
+    if (typeof key !== "string" || key.length === 0 || key.length > MAX_KEY_LENGTH || key === "." || key === "..") {
+      throw new TypeError(`sixb.state: a key is text of 1 to ${MAX_KEY_LENGTH} characters.`);
+    }
+    return key;
+  };
+  const state = {
+    get: (key) => Promise.resolve().then(() => call("state.get", { key: checkKey(key) })),
+    set: (key, value) => Promise.resolve().then(() => {
+      const json = JSON.stringify(value);
+      if (json === undefined) {
+        throw new TypeError("sixb.state: a value is JSON: text, a number, true or false, null, a list, or an object.");
+      }
+      if (new TextEncoder().encode(json).byteLength > MAX_VALUE_BYTES) {
+        throw new RangeError(`sixb.state: a value is at most ${MAX_VALUE_BYTES / 1024} KB as JSON.`);
+      }
+      return call("state.set", { key: checkKey(key), value: JSON.parse(json) }).then(() => {});
+    }),
+    delete: (key) => Promise.resolve().then(() => call("state.delete", { key: checkKey(key) })),
+    keys: () => call("state.keys", {})
+  };
+  const readQueryFile = async (name) => {
+    const base = script?.src || new URL("__sixb/runtime.js", window.location.href).href;
+    const response = await fetch(new URL(`queries/${name}.json`, base));
+    if (response.ok)
+      return response.json();
+    if (response.status === 404) {
+      throw new Error(`[Sixb] No query '${name}' in this page's version.`);
+    }
+    const body = await response.json().catch(() => null);
+    throw new Error(typeof body?.error === "string" ? body.error : `[Sixb] Query '${name}' could not be read.`);
+  };
+  const query = (name) => Promise.resolve().then(() => {
+    if (typeof name !== "string" || !QUERY_NAME.test(name)) {
+      throw new TypeError("sixb.query: a query's name is that of its file, queries/<name>.json: lowercase letters, digits and hyphens.");
+    }
+    return alone ? readQueryFile(name) : call("query.run", { name });
+  });
+  Object.defineProperty(window, "sixb", {
+    value: Object.freeze({ state: Object.freeze(state), query }),
+    enumerable: true
+  });
   window.addEventListener("message", (event) => {
     if (event.source !== window.parent)
       return;
     const data = event.data;
+    if (data && data.protocol === PROTOCOL && typeof data.result === "number") {
+      const pending = calls.get(data.result);
+      calls.delete(data.result);
+      if (typeof data.error === "string")
+        pending?.reject(new Error(data.error));
+      else
+        pending?.resolve(data.value);
+      return;
+    }
     if (!data || data.protocol !== PROTOCOL || typeof data.id !== "number")
       return;
     if (typeof data.method !== "string")
@@ -509,7 +823,7 @@ function frameRuntime() {
     }
   });
   window.addEventListener("keydown", (event) => {
-    if (event.metaKey || event.ctrlKey || event.altKey)
+    if (!deck || event.metaKey || event.ctrlKey || event.altKey)
       return;
     const target = event.target;
     if (target?.closest("input, textarea, select, [contenteditable]"))
@@ -524,16 +838,19 @@ function frameRuntime() {
     const link = target?.closest("a[href]");
     if (link) {
       const href = link.getAttribute("href") ?? "";
+      if (href.startsWith("#") || event.defaultPrevented)
+        return;
+      event.preventDefault();
       if (/^artifact:/i.test(href.trim())) {
-        event.preventDefault();
         post({ event: "open", params: { address: href.trim() } });
-      } else if (!href.startsWith("#")) {
-        link.target = "_blank";
-        link.rel = "noopener noreferrer";
+        return;
       }
+      const url = webAddress(href);
+      if (url)
+        post({ event: "link", params: { url } });
       return;
     }
-    if (root.dataset.mode !== "overview")
+    if (!deck || root.dataset.mode !== "overview")
       return;
     const slide = target?.closest("section.slide");
     if (!slide)
@@ -541,10 +858,29 @@ function frameRuntime() {
     post({ event: "select", params: { slide: slides().indexOf(slide) + 1 } });
   });
   window.addEventListener("resize", () => {
-    fit();
+    if (deck)
+      fit();
     reportEmbeds();
   });
   const ready = () => {
+    if (!deck) {
+      post({ event: "ready", params: {} });
+      window.addEventListener("scroll", reportEmbeds, { passive: true });
+      const resized = new ResizeObserver(() => {
+        reportSize();
+        reportEmbeds();
+      });
+      resized.observe(document.documentElement);
+      if (document.body)
+        resized.observe(document.body);
+      window.addEventListener("load", () => {
+        reportSize();
+        reportEmbeds();
+      });
+      reportSize();
+      reportEmbeds();
+      return;
+    }
     slides().forEach((element, index) => {
       element.dataset.number = String(index + 1);
     });
@@ -566,15 +902,22 @@ function frameRuntime() {
 
 // src/artifacts/frames/assets.ts
 var FRAME_ASSETS = {
-  [`${FRAME_ASSET_PREFIX}kit.css`]: { body: FRAME_KIT_CSS, type: "text/css; charset=utf-8" },
+  [`${FRAME_ASSET_PREFIX}deck.css`]: { body: FRAME_DECK_CSS, type: "text/css; charset=utf-8" },
+  [`${FRAME_ASSET_PREFIX}page.css`]: { body: FRAME_PAGE_CSS, type: "text/css; charset=utf-8" },
   [`${FRAME_ASSET_PREFIX}runtime.js`]: {
     body: `(${frameRuntime.toString()})()
 `,
     type: "text/javascript; charset=utf-8"
   }
 };
-var INJECTED = `<link rel="stylesheet" href="${FRAME_ASSET_PREFIX}kit.css"><script src="${FRAME_ASSET_PREFIX}runtime.js"></script>`;
-function injectFrameAssets(html) {
+function injected(layout, base) {
+  return `<link rel="stylesheet" href="${base}${FRAME_ASSET_PREFIX}${layout}.css"><script src="${base}${FRAME_ASSET_PREFIX}runtime.js" data-sixb-layout="${layout}"></script>`;
+}
+function rootOf(entry) {
+  return "../".repeat(entry.split("/").length - 1);
+}
+function injectFrameAssets(html, layout, entry = "index.html") {
+  const assets = injected(layout, rootOf(entry));
   for (const selector of ["head", "html"]) {
     let injected = false;
     const rewritten = new HTMLRewriter().on(selector, {
@@ -582,31 +925,31 @@ function injectFrameAssets(html) {
         if (injected)
           return;
         injected = true;
-        element.prepend(INJECTED, { html: true });
+        element.prepend(assets, { html: true });
       }
     }).transform(html);
     if (injected)
       return rewritten;
   }
   const doctype = /^\s*<!doctype[^>]*>/i.exec(html)?.[0] ?? "";
-  return `${doctype}${INJECTED}${html.slice(doctype.length)}`;
+  return `${doctype}${assets}${html.slice(doctype.length)}`;
 }
 var FRAME_REFERENCE_PREFIX = `${FRAME_ASSET_PREFIX}ref/`;
-function frameReferencePath(target) {
+function frameReferencePath(target, entry) {
   const file = parseArtifactAddress2(target.address)?.path;
   if (!file)
     return null;
   const path = file.split("/").map(encodeURIComponent).join("/");
-  return `${FRAME_REFERENCE_PREFIX}${target.artifactId}@${target.version}/${path}`;
+  return `${rootOf(entry)}${FRAME_REFERENCE_PREFIX}${target.artifactId}@${target.version}/${path}`;
 }
-function rewriteFrameReferences(html, targets) {
+function rewriteFrameReferences(html, targets, entry = "index.html") {
   return new HTMLRewriter().on("img[src]", {
     element(element) {
       const source = decodeHtmlEntities(element.getAttribute("src") ?? "").trim();
       if (!isArtifactAddress2(source))
         return;
       const target = targets.find((candidate) => candidate.address === source);
-      const path = target ? frameReferencePath(target) : null;
+      const path = target ? frameReferencePath(target, entry) : null;
       if (path) {
         element.setAttribute("src", path);
         element.setAttribute("data-sixb-ref", "");
@@ -617,6 +960,21 @@ function rewriteFrameReferences(html, targets) {
     }
   }).transform(html);
 }
+// src/artifacts/frames/entries.ts
+var FRAME_LAYOUTS = {
+  slides: "deck",
+  page: "page",
+  canvas: "page"
+};
+function frameLayout(kind) {
+  return FRAME_LAYOUTS[kind] ?? null;
+}
+function frameEntries(version) {
+  if (version.outline.kind === "canvas") {
+    return version.outline.items.flatMap((item) => item.type === "board" ? [item.file] : []);
+  }
+  return frameLayout(version.outline.kind) ? [version.entry] : [];
+}
 // src/artifacts/frames/grants.ts
 import { createHash, randomBytes } from "crypto";
 var ARTIFACT_FRAME_ROUTE_PREFIX = "/api/artifact-frames/";
@@ -624,8 +982,8 @@ var FRAME_LIFETIME_MS = 60 * 60 * 1000;
 var TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
 async function createArtifactFrame(input) {
   const { version } = input;
-  if (version.outline.kind !== "slides") {
-    throw new ArtifactRequestError2("artifact_kind_mismatch", `[Sixb] Only a deck opens in a frame; '${version.artifactId}' is a ${version.outline.kind}. Read its files instead.`);
+  if (!frameLayout(version.outline.kind)) {
+    throw new ArtifactRequestError2("artifact_kind_mismatch", `[Sixb] '${version.artifactId}' is a ${version.outline.kind}, which does not open in a frame. Read its files instead.`);
   }
   const createdAt = input.now ?? new Date;
   const expiresAt = new Date(createdAt.getTime() + FRAME_LIFETIME_MS);
@@ -675,18 +1033,19 @@ async function resolveArtifactFrame(input) {
     artifactId: grant.artifactId,
     version: grant.version
   });
-  return version?.outline.kind === "slides" ? { version, targets: grant.targets } : null;
+  return version && frameLayout(version.outline.kind) ? { version, targets: grant.targets } : null;
 }
 function hashToken(token) {
   return createHash("sha256").update(token).digest("hex");
 }
 // src/artifacts/frames/probe.ts
-function layoutProbe(slideNumber) {
+function layoutProbe(scope) {
   const MAX_PER_CODE = 8;
-  const slide = document.querySelectorAll("section.slide")[slideNumber - 1];
+  const page = scope === "page";
+  const slide = page ? document.body : document.querySelectorAll("section.slide")[scope - 1];
   if (!slide)
     return [];
-  const box = slide.getBoundingClientRect();
+  const box = page ? document.documentElement.getBoundingClientRect() : slide.getBoundingClientRect();
   const problems = [];
   const counts = new Map;
   const selector = (element) => element instanceof SVGElement && element.tagName.toLowerCase() !== "svg" ? `svg ${element.tagName.toLowerCase()}` : [element.tagName.toLowerCase(), ...Array.from(element.classList).slice(0, 2)].join(".");
@@ -724,12 +1083,26 @@ function layoutProbe(slideNumber) {
   const content = elements.filter((element) => ownText(element) || media(element));
   const svgText = Array.from(slide.querySelectorAll("svg text")).filter((element) => (element.textContent ?? "").trim() !== "" && shown(element));
   const footer = getComputedStyle(slide, "::after");
-  const footerTop = footer.content === "none" || footer.display === "none" ? Number.POSITIVE_INFINITY : box.bottom - Number.parseFloat(footer.bottom) - Number.parseFloat(footer.paddingTop) - Number.parseFloat(footer.lineHeight) - Number.parseFloat(footer.borderTopWidth);
+  const footerTop = page || footer.content === "none" || footer.display === "none" ? Number.POSITIVE_INFINITY : box.bottom - Number.parseFloat(footer.bottom) - Number.parseFloat(footer.paddingTop) - Number.parseFloat(footer.lineHeight) - Number.parseFloat(footer.borderTopWidth);
   const outside = [];
+  const scrolls = (element) => {
+    for (let node = element.parentElement;node && node !== slide; node = node.parentElement) {
+      if (/auto|scroll/.test(getComputedStyle(node).overflowX))
+        return true;
+    }
+    return false;
+  };
   for (const element of content) {
     if (outside.some((parent) => parent.contains(element)))
       continue;
     const rect = element.getBoundingClientRect();
+    if (page) {
+      if (rect.right > window.innerWidth + 1 && !scrolls(element)) {
+        outside.push(element);
+        report("wide", element);
+      }
+      continue;
+    }
     if (rect.left < box.left - 1 || rect.top < box.top - 1 || rect.right > box.right + 1 || rect.bottom > box.bottom + 1) {
       outside.push(element);
       report("outside", element);
@@ -803,7 +1176,11 @@ function layoutProbe(slideNumber) {
   const background = (element) => {
     const layers = [];
     const rect = element.getBoundingClientRect();
-    const stack = document.elementsFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    if (x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight)
+      return null;
+    const stack = document.elementsFromPoint(x, y);
     const start = Math.max(0, stack.indexOf(element));
     const under = stack.slice(start);
     const pictures = under.filter((node) => /^(img|picture|video|canvas)$/i.test(node.tagName));
@@ -850,7 +1227,7 @@ function layoutProbe(slideNumber) {
   for (const { element, size, ink } of texts) {
     if (outside.some((parent) => parent.contains(element)))
       continue;
-    if (size < 17.5) {
+    if (size < (page ? 11.5 : 17.5)) {
       report("small_text", element, { size: Math.round(size * 10) / 10 });
     }
     const color = rgba(ink);
@@ -869,6 +1246,19 @@ function layoutProbe(slideNumber) {
       });
     }
   }
+  if (page) {
+    const controls = slide.querySelectorAll('button, select, textarea, summary, [role="button"], a.button, input:not([type="hidden"], [type="checkbox"], [type="radio"])');
+    for (const control of Array.from(controls)) {
+      if (!shown(control))
+        continue;
+      const rect = control.getBoundingClientRect();
+      if (rect.width < 23.5 || rect.height < 23.5) {
+        report("small_target", control, {
+          size: Math.round(Math.min(rect.width, rect.height))
+        });
+      }
+    }
+  }
   for (const image of Array.from(slide.querySelectorAll("img:not([data-sixb-ref])"))) {
     if (image.getAttribute("src") && image.complete && image.naturalWidth === 0) {
       report("broken_image", image, { text: image.getAttribute("src") ?? "img" });
@@ -881,12 +1271,15 @@ export {
   FRAME_ASSETS,
   FRAME_DEFAULT_THEMES,
   FRAME_REFERENCE_PREFIX,
-  SLIDES_ENTRY2 as SLIDES_ENTRY,
+  HTML_ENTRY2 as HTML_ENTRY,
   createArtifactFrame,
+  frameEntries,
+  frameLayout,
   injectFrameAssets,
   layoutProbe,
   resolveArtifactFrame,
-  rewriteFrameReferences
+  rewriteFrameReferences,
+  serializeArtifactQueryResult
 };
 
-//# debugId=87504D80B2F871CF64756E2164756E21
+//# debugId=A2752CC6A0BC7D6F64756E2164756E21