@sixb/core 0.1.19 → 0.1.21

package/dist/artifacts/frames/index.js

@@ -0,0 +1,892 @@
+// @bun
+import {
+  isArtifactAddress2,
+  parseArtifactAddress2
+} from "../../chunk-mjddfa7k.js";
+import {
+  ArtifactRequestError2,
+  decodeHtmlEntities,
+  SLIDES_ENTRY2,
+  FRAME_ASSET_PREFIX
+} from "../../chunk-48qjhh6v.js";
+import"../../chunk-wkv3h3q7.js";
+import"../../chunk-a3faa34j.js";
+// 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',
+  "--font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+  "--font-mono": '"SF Mono", "Geist Mono", "JetBrains Mono", ui-monospace, monospace'
+};
+var FRAME_DEFAULT_THEMES = {
+  light: {
+    dark: false,
+    tokens: {
+      "--background": "#fafafa",
+      "--foreground": "#101010",
+      "--card": "#ffffff",
+      "--card-foreground": "#101010",
+      "--muted": "#f4f4f4",
+      "--muted-foreground": "#5f5f5f",
+      "--primary": "#0a0a0a",
+      "--primary-foreground": "#ffffff",
+      "--accent": "#f0f0f0",
+      "--accent-foreground": "#202020",
+      "--border": "#e2e2e2",
+      "--chart-1": "#101010",
+      "--chart-2": "#404040",
+      "--chart-3": "#737373",
+      "--chart-4": "#a3a3a3",
+      "--chart-5": "#d4d4d4",
+      ...FONTS,
+      "--radius": "0.5rem"
+    }
+  },
+  dark: {
+    dark: true,
+    tokens: {
+      "--background": "#0a0a0a",
+      "--foreground": "#f4f4f4",
+      "--card": "#141414",
+      "--card-foreground": "#f4f4f4",
+      "--muted": "#1c1c1c",
+      "--muted-foreground": "#8a8a8a",
+      "--primary": "#f4f4f4",
+      "--primary-foreground": "#0a0a0a",
+      "--accent": "#1c1c1c",
+      "--accent-foreground": "#f4f4f4",
+      "--border": "#262626",
+      "--chart-1": "#f4f4f4",
+      "--chart-2": "#c4c4c4",
+      "--chart-3": "#8a8a8a",
+      "--chart-4": "#5f5f5f",
+      "--chart-5": "#404040",
+      ...FONTS,
+      "--radius": "0.5rem"
+    }
+  }
+};
+var LIGHT = FRAME_DEFAULT_THEMES.light.tokens;
+var FRAME_KIT_CSS = `
+@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;
+  }
+
+  /*
+   * 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,
+   * wins over everything else in the kit, so these alone are important: an important declaration
+   * in a layer wins over every unlayered one, a deck's own important ones included. Otherwise a
+   * deck that sets display on its closing slide shows it under every other, and one that sets its
+   * body's background repaints the stage.
+   */
+  html.sixb-deck section.slide { width: 1280px !important; height: 720px !important; flex: none !important; }
+
+  /* One slide at a time, scaled to fit and centered on the stage. */
+  html.sixb-deck:not([data-mode="overview"]),
+  html.sixb-deck:not([data-mode="overview"]) body { height: 100% !important; overflow: hidden !important; }
+  html.sixb-deck:not([data-mode="overview"]) body {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: grid !important;
+    place-items: center !important;
+    background: var(--sixb-stage) !important;
+  }
+  html.sixb-deck:not([data-mode="overview"]) section.slide { zoom: var(--sixb-scale) !important; }
+  html.sixb-deck:not([data-mode="overview"]) section.slide:not([data-current]) { display: none !important; }
+  html.sixb-deck[data-mode="slide"] section.slide {
+    border-radius: calc(10px / var(--sixb-scale)) !important;
+    box-shadow: 0 0 0 calc(1px / var(--sixb-scale)) var(--sixb-stage-border) !important;
+  }
+  /* Filled, the slide is the whole frame, as a thumbnail or an embed shows it; presented, it
+     fills the page on black. */
+  html.sixb-deck:is([data-mode="fill"], [data-mode="present"]) section.slide {
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+  html.sixb-deck[data-mode="present"] body { background: #000 !important; }
+
+  /* Every slide in a grid. */
+  html.sixb-deck[data-mode="overview"],
+  html.sixb-deck[data-mode="overview"] body { height: 100% !important; overflow: auto !important; }
+  html.sixb-deck[data-mode="overview"] body {
+    margin: 0 !important;
+    display: grid !important;
+    grid-template-columns: repeat(var(--sixb-columns), max-content) !important;
+    justify-content: center !important;
+    align-content: start !important;
+    gap: 16px !important;
+    padding: 16px !important;
+    background: var(--sixb-stage) !important;
+  }
+  html.sixb-deck[data-mode="overview"] section.slide {
+    zoom: var(--sixb-overview-scale) !important;
+    cursor: pointer;
+    border-radius: calc(6px / var(--sixb-overview-scale)) !important;
+    box-shadow: 0 0 0 calc(1px / var(--sixb-overview-scale)) var(--sixb-stage-border) !important;
+  }
+  html.sixb-deck[data-mode="overview"] section.slide[data-current] {
+    box-shadow: 0 0 0 calc(1px / var(--sixb-overview-scale)) var(--sixb-stage-foreground) !important;
+    outline: calc(2px / var(--sixb-overview-scale)) solid var(--sixb-stage-foreground) !important;
+    outline-offset: calc(2px / var(--sixb-overview-scale)) !important;
+  }
+
+  /*
+   * A slide: 1280\xD7720. Its footer, a rule with the source and the slide's number, sits in the
+   * bottom padding, so content never runs into it.
+   */
+  section.slide {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    width: 1280px;
+    height: 720px;
+    flex: none;
+    padding: 72px 96px 140px;
+    overflow: hidden;
+    background: var(--background);
+    color: var(--foreground);
+    font-size: 28px;
+    line-height: 1.4;
+  }
+
+  /* Type: nothing on a slide is smaller than 18px. */
+  section.slide :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
+  section.slide h1 { font-size: 72px; line-height: 1; font-weight: 650; letter-spacing: -0.035em; }
+  section.slide h2 { max-width: 1000px; font-size: 46px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; }
+  section.slide h3 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
+  section.slide p { margin: 0; max-width: 34em; }
+  section.slide :is(ul, ol) {
+    margin: 0;
+    padding-left: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    font-size: 30px;
+    line-height: 1.35;
+    letter-spacing: -0.01em;
+  }
+  section.slide li { padding-left: 6px; }
+  section.slide li::marker { color: var(--muted-foreground); }
+  section.slide strong { font-weight: 600; }
+  section.slide a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 5px; }
+  section.slide small, section.slide .note { font-size: 20px; color: var(--muted-foreground); }
+  section.slide img, section.slide svg, section.slide video { max-width: 100%; max-height: 100%; }
+  /* A figure's default 40px margins would squeeze a chart and its labels below the type floor. */
+  section.slide figure { margin: 0; }
+  section.slide code { font-family: var(--font-mono); font-size: 0.85em; }
+
+  /* Chrome: a label above the heading (two spans sit at either end), and the footer. */
+  section.slide .eyebrow {
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    margin: 0;
+    max-width: none;
+    font-size: 20px;
+    line-height: 1.3;
+    letter-spacing: 0.01em;
+    color: var(--muted-foreground);
+  }
+  section.slide .eyebrow + :is(h1, h2) { margin-top: -12px; }
+  section.slide::after {
+    content: attr(data-number);
+    position: absolute;
+    left: 96px;
+    right: 96px;
+    bottom: 64px;
+    padding-top: 22px;
+    border-top: 1px solid var(--border);
+    text-align: right;
+    font-size: 18px;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+  }
+  section.slide.no-number::after { content: ""; }
+  section.slide.no-number:not(:has(.source))::after { display: none; }
+  section.slide .source {
+    position: absolute;
+    left: 96px;
+    right: calc(96px + 3em);
+    bottom: 64px;
+    z-index: 1;
+    max-width: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 18px;
+    line-height: 1.4;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+  }
+
+  /* Layouts. */
+  section.slide.title > .eyebrow { margin-bottom: auto; }
+  section.slide.title h1 { margin-top: 0; font-size: 132px; line-height: 0.92; letter-spacing: -0.04em; max-width: 9em; }
+  section.slide.title > p:not(.eyebrow, .source) { font-size: 36px; line-height: 1.25; letter-spacing: -0.01em; color: var(--muted-foreground); max-width: 24em; text-wrap: balance; }
+
+  section.slide.section { justify-content: flex-end; }
+  section.slide.section h2 { font-size: 72px; line-height: 1; letter-spacing: -0.035em; max-width: 13em; }
+
+  section.slide.split {
+    display: grid;
+    grid-template-columns: 5fr 6fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 80px;
+    row-gap: 28px;
+  }
+  section.slide.split:has(> .eyebrow) { grid-template-rows: auto auto 1fr; }
+  section.slide.split > :is(h1, h2, .eyebrow) { grid-column: 1 / -1; }
+  section.slide.split > * { min-width: 0; min-height: 0; }
+  section.slide.split > :not(h1, h2, .eyebrow) { align-self: center; }
+
+  section.slide.stat > .value { margin-top: auto; }
+  section.slide.stat .value {
+    font-size: 144px;
+    line-height: 0.9;
+    font-weight: 600;
+    letter-spacing: -0.045em;
+    font-variant-numeric: tabular-nums;
+    color: var(--primary);
+  }
+  section.slide.stat .label { font-size: 26px; line-height: 1.35; color: var(--muted-foreground); }
+  section.slide.stat .stats {
+    margin-top: auto;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 64px;
+    padding-bottom: 16px;
+  }
+  section.slide.stat .stats > * {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding-top: 28px;
+    border-top: 2px solid var(--foreground);
+  }
+  section.slide.stat .stats:has(> :nth-child(3)) .value { font-size: 96px; }
+  section.slide.stat .stats:has(> :nth-child(4)) .value { font-size: 80px; }
+
+  section.slide.quote { justify-content: center; }
+  section.slide.quote blockquote {
+    margin: 0;
+    font-family: var(--font-serif);
+    font-size: 52px;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+    max-width: 22em;
+    text-wrap: balance;
+  }
+  section.slide.quote cite { font-style: normal; font-size: 24px; color: var(--muted-foreground); }
+
+  section.slide.image > :is(img, figure) { flex: 1; min-height: 0; margin: 0; object-fit: contain; }
+  section.slide.image.bleed { padding: 0; }
+  section.slide.image.bleed > img { width: 100%; height: 100%; object-fit: cover; }
+  section.slide.image.bleed::after, section.slide.image.bleed .source { display: none; }
+
+  section.slide.chart > :is(figure, svg, img, .chart) { flex: 1; min-height: 0; margin: 0; }
+  section.slide.chart figure { display: flex; flex-direction: column; gap: 20px; }
+  section.slide.chart figure > :is(svg, img) { flex: 1; min-height: 0; width: 100%; }
+  section.slide figcaption { font-size: 20px; color: var(--muted-foreground); }
+
+  section.slide.table table { width: 100%; border-collapse: collapse; font-size: 26px; font-variant-numeric: tabular-nums; }
+  section.slide.table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
+  section.slide.table :is(th, td):first-child { padding-left: 0; }
+  section.slide.table :is(th, td):last-child { padding-right: 0; }
+  section.slide.table th { font-size: 20px; font-weight: 500; color: var(--muted-foreground); }
+  section.slide.table :is(th, td).num, section.slide.table :is(th, td)[data-numeric] { text-align: right; }
+
+  /*
+   * Another artifact on the slide: the app draws it over this box, sized by the deck's CSS like
+   * any block. Until it does, and in a thumbnail, the box shows where it goes.
+   */
+  sixb-embed {
+    display: block;
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+    background: color-mix(in oklab, var(--muted) 80%, transparent);
+  }
+  sixb-embed[title]::after {
+    content: attr(title);
+    position: absolute;
+    inset: auto 24px 20px;
+    font-size: 20px;
+    color: var(--muted-foreground);
+  }
+  section.slide.chart > sixb-embed,
+  section.slide.chart figure > sixb-embed { flex: 1; min-height: 0; aspect-ratio: auto; }
+  /* An image from another artifact its reader cannot see. */
+  section.slide img[data-sixb-ref="unavailable"] {
+    display: block;
+    min-width: 160px;
+    min-height: 90px;
+    border-radius: 12px;
+    background: var(--muted);
+  }
+
+  /* Components. */
+  section.slide .legend {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px 24px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 20px;
+    line-height: 1.3;
+    letter-spacing: 0;
+    color: var(--muted-foreground);
+  }
+  section.slide .legend > * { display: flex; align-items: center; gap: 8px; padding: 0; }
+  section.slide .legend > *::before {
+    content: "";
+    width: 0.8em;
+    height: 0.8em;
+    border-radius: 2px;
+    background: var(--swatch, var(--chart-1));
+  }
+  section.slide .callout {
+    padding: 24px 28px;
+    border-radius: var(--radius);
+    background: var(--muted);
+    font-size: 26px;
+  }
+  section.slide .tag {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background: var(--muted);
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+`;
+
+// src/artifacts/frames/runtime.ts
+function frameRuntime() {
+  const PROTOCOL = "sixb-frame/1";
+  const WIDTH = 1280;
+  const HEIGHT = 720;
+  const KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "PageUp",
+    "PageDown",
+    "Home",
+    "End",
+    " ",
+    "Escape"
+  ];
+  const root = document.documentElement;
+  const start = new URLSearchParams(window.location.hash.slice(1));
+  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 fit = () => {
+    const columns = window.innerWidth < 720 ? 2 : window.innerWidth < 1100 ? 3 : 4;
+    const gap = 16;
+    const margin = root.dataset.mode === "fill" || root.dataset.mode === "present" ? 0 : Math.min(32, window.innerWidth * 0.04);
+    root.style.setProperty("--sixb-scale", String(Math.min((window.innerWidth - margin * 2) / WIDTH, (window.innerHeight - margin * 2) / HEIGHT)));
+    root.style.setProperty("--sixb-columns", String(columns));
+    root.style.setProperty("--sixb-overview-scale", String((window.innerWidth - gap * (columns + 1)) / columns / WIDTH));
+  };
+  let reported = "";
+  let reporting = false;
+  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 rect = element.getBoundingClientRect();
+        return {
+          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)
+        return;
+      reported = next;
+      post({ event: "embeds", params: { embeds } });
+    });
+  };
+  const show = (slide) => {
+    const all = slides();
+    current = Math.min(Math.max(1, Math.round(slide) || 1), Math.max(1, all.length));
+    all.forEach((element, index) => {
+      element.toggleAttribute("data-current", index + 1 === current);
+    });
+    if (root.dataset.mode === "overview") {
+      all[current - 1]?.scrollIntoView({ block: "nearest" });
+    }
+    reportEmbeds();
+  };
+  const handle = (method, params) => {
+    switch (method) {
+      case "theme": {
+        const tokens = params.tokens ?? {};
+        const declarations = Object.entries(tokens).filter(([name, value]) => /^--[a-z0-9-]+$/.test(name) && typeof value === "string" && !/[;{}<]/.test(value)).map(([name, value]) => `${name}: ${value};`);
+        for (const [stage, token] of [
+          ["--sixb-stage", "--muted"],
+          ["--sixb-stage-border", "--border"],
+          ["--sixb-stage-foreground", "--foreground"]
+        ]) {
+          const value = declarations.find((declaration) => declaration.startsWith(`${token}:`));
+          if (value)
+            declarations.push(`${stage}${value.slice(token.length)}`);
+        }
+        let style = document.getElementById("sixb-theme");
+        if (!style) {
+          style = document.createElement("style");
+          style.id = "sixb-theme";
+          document.head.append(style);
+        }
+        style.textContent = `@layer sixb-theme { :root { ${declarations.join(" ")} color-scheme: ${params.dark === true ? "dark" : "light"}; } }`;
+        root.classList.toggle("dark", params.dark === true);
+        return;
+      }
+      case "goto":
+        show(Number(params.slide));
+        return;
+      case "mode":
+        if (root.dataset.mode === "fill")
+          return;
+        root.dataset.mode = params.mode === "overview" || params.mode === "present" ? params.mode : "slide";
+        fit();
+        show(current);
+        return;
+      default:
+        throw new Error(`Unknown method '${method}'.`);
+    }
+  };
+  window.addEventListener("message", (event) => {
+    if (event.source !== window.parent)
+      return;
+    const data = event.data;
+    if (!data || data.protocol !== PROTOCOL || typeof data.id !== "number")
+      return;
+    if (typeof data.method !== "string")
+      return;
+    try {
+      handle(String(data.method), data.params ?? {});
+      post({ id: data.id });
+    } catch (error) {
+      post({ id: data.id, error: error instanceof Error ? error.message : String(error) });
+    }
+  });
+  window.addEventListener("keydown", (event) => {
+    if (event.metaKey || event.ctrlKey || event.altKey)
+      return;
+    const target = event.target;
+    if (target?.closest("input, textarea, select, [contenteditable]"))
+      return;
+    if (!KEYS.includes(event.key))
+      return;
+    event.preventDefault();
+    post({ event: "key", params: { key: event.key } });
+  });
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    const link = target?.closest("a[href]");
+    if (link) {
+      const href = link.getAttribute("href") ?? "";
+      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;
+    }
+    if (root.dataset.mode !== "overview")
+      return;
+    const slide = target?.closest("section.slide");
+    if (!slide)
+      return;
+    post({ event: "select", params: { slide: slides().indexOf(slide) + 1 } });
+  });
+  window.addEventListener("resize", () => {
+    fit();
+    reportEmbeds();
+  });
+  const ready = () => {
+    slides().forEach((element, index) => {
+      element.dataset.number = String(index + 1);
+    });
+    fit();
+    show(current);
+    post({ event: "ready", params: { slides: slides().length } });
+    const resized = new ResizeObserver(reportEmbeds);
+    for (const element of Array.from(document.querySelectorAll("section.slide > *, sixb-embed"))) {
+      resized.observe(element);
+    }
+    window.addEventListener("load", reportEmbeds);
+    document.fonts?.ready.then(reportEmbeds);
+  };
+  if (document.readyState === "loading")
+    document.addEventListener("DOMContentLoaded", ready);
+  else
+    ready();
+}
+
+// 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}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) {
+  for (const selector of ["head", "html"]) {
+    let injected = false;
+    const rewritten = new HTMLRewriter().on(selector, {
+      element(element) {
+        if (injected)
+          return;
+        injected = true;
+        element.prepend(INJECTED, { html: true });
+      }
+    }).transform(html);
+    if (injected)
+      return rewritten;
+  }
+  const doctype = /^\s*<!doctype[^>]*>/i.exec(html)?.[0] ?? "";
+  return `${doctype}${INJECTED}${html.slice(doctype.length)}`;
+}
+var FRAME_REFERENCE_PREFIX = `${FRAME_ASSET_PREFIX}ref/`;
+function frameReferencePath(target) {
+  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}`;
+}
+function rewriteFrameReferences(html, targets) {
+  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;
+      if (path) {
+        element.setAttribute("src", path);
+        element.setAttribute("data-sixb-ref", "");
+      } else {
+        element.removeAttribute("src");
+        element.setAttribute("data-sixb-ref", "unavailable");
+      }
+    }
+  }).transform(html);
+}
+// src/artifacts/frames/grants.ts
+import { createHash, randomBytes } from "crypto";
+var ARTIFACT_FRAME_ROUTE_PREFIX = "/api/artifact-frames/";
+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.`);
+  }
+  const createdAt = input.now ?? new Date;
+  const expiresAt = new Date(createdAt.getTime() + FRAME_LIFETIME_MS);
+  const token = randomBytes(32).toString("base64url");
+  await input.storage.createFrameGrant({
+    projectId: input.projectId,
+    tokenHash: hashToken(token),
+    artifactId: version.artifactId,
+    version: version.version,
+    targets: input.read ? await frameTargets(version, input.read) : [],
+    createdAt,
+    expiresAt
+  });
+  return { path: `${ARTIFACT_FRAME_ROUTE_PREFIX}${token}/`, expiresAt };
+}
+async function frameTargets(version, read) {
+  const targets = [];
+  for (const reference of version.references) {
+    if (reference.as !== "embed" || targets.some((target) => target.address === reference.address)) {
+      continue;
+    }
+    const address = parseArtifactAddress2(reference.address);
+    if (!address?.path)
+      continue;
+    const target = await read(address.artifactId, address.version ?? "latest").catch(() => null);
+    if (!target?.files.some((file) => file.path === address.path))
+      continue;
+    targets.push({
+      address: reference.address,
+      artifactId: target.artifactId,
+      version: target.version
+    });
+  }
+  return targets;
+}
+async function resolveArtifactFrame(input) {
+  if (!TOKEN_PATTERN.test(input.token))
+    return null;
+  const grant = await input.storage.findFrameGrant({
+    projectId: input.projectId,
+    tokenHash: hashToken(input.token)
+  });
+  if (!grant || grant.expiresAt <= (input.now ?? new Date))
+    return null;
+  const version = await input.storage.getVersion({
+    projectId: input.projectId,
+    artifactId: grant.artifactId,
+    version: grant.version
+  });
+  return version?.outline.kind === "slides" ? { version, targets: grant.targets } : null;
+}
+function hashToken(token) {
+  return createHash("sha256").update(token).digest("hex");
+}
+// src/artifacts/frames/probe.ts
+function layoutProbe(slideNumber) {
+  const MAX_PER_CODE = 8;
+  const slide = document.querySelectorAll("section.slide")[slideNumber - 1];
+  if (!slide)
+    return [];
+  const box = 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(".");
+  const report = (code, element, details = {}) => {
+    const count = counts.get(code) ?? 0;
+    if (count >= MAX_PER_CODE)
+      return;
+    counts.set(code, count + 1);
+    problems.push({
+      code,
+      rect: at(element.getBoundingClientRect()),
+      selector: selector(element),
+      ...details,
+      text: details.text ?? describe(element)
+    });
+  };
+  const at = (rect) => ({
+    x: Math.round(rect.left - box.left),
+    y: Math.round(rect.top - box.top),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height)
+  });
+  const describe = (element) => (element instanceof HTMLElement ? element.innerText : element.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 60) || element.tagName.toLowerCase();
+  const shown = (element) => {
+    const style = getComputedStyle(element);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
+      return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  };
+  const ownText = (element) => Array.from(element.childNodes).some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim() !== "");
+  const media = (element) => /^(img|svg|canvas|video|picture|table|sixb-embed)$/i.test(element.tagName);
+  const elements = Array.from(slide.querySelectorAll("*")).filter((element) => !element.closest("svg *, .source") && shown(element));
+  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 outside = [];
+  for (const element of content) {
+    if (outside.some((parent) => parent.contains(element)))
+      continue;
+    const rect = element.getBoundingClientRect();
+    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);
+    } else if (rect.bottom > footerTop + 1 && rect.top < box.bottom) {
+      outside.push(element);
+      report("footer", element);
+    }
+  }
+  const lines = content.filter((element) => ownText(element) && !outside.some((parent) => parent.contains(element))).map((element) => {
+    const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight);
+    const rects = [];
+    for (const node of Array.from(element.childNodes)) {
+      if (node.nodeType !== Node.TEXT_NODE || (node.textContent ?? "").trim() === "")
+        continue;
+      const range = document.createRange();
+      range.selectNodeContents(node);
+      for (const rect of Array.from(range.getClientRects())) {
+        if (rect.width === 0)
+          continue;
+        const inset = Number.isFinite(lineHeight) && rect.height > lineHeight ? (rect.height - lineHeight) / 2 : 0;
+        rects.push(new DOMRect(rect.x, rect.y + inset, rect.width, rect.height - inset * 2));
+      }
+    }
+    return { element, rects };
+  });
+  const crosses = (a, b) => Math.min(a.right, b.right) - Math.max(a.left, b.left) > 3 && Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 3;
+  const overlapping = new Set;
+  for (const [index, a] of lines.entries()) {
+    for (const b of lines.slice(index + 1)) {
+      if (overlapping.has(a.element) || overlapping.has(b.element))
+        continue;
+      if (a.rects.some((rectA) => b.rects.some((rectB) => crosses(rectA, rectB)))) {
+        overlapping.add(a.element);
+        overlapping.add(b.element);
+        report("overlap", b.element, { other: describe(a.element) });
+      }
+    }
+  }
+  for (const element of elements) {
+    if (outside.some((parent) => parent.contains(element) || element.contains(parent)))
+      continue;
+    const style = getComputedStyle(element);
+    const clips = /hidden|clip/.test(`${style.overflowX} ${style.overflowY}`);
+    if (!clips || (element.textContent ?? "").trim() === "")
+      continue;
+    const wraps = style.textOverflow === "ellipsis" && style.whiteSpace === "nowrap";
+    if (!wraps && (element.scrollHeight > element.clientHeight + 2 || element.scrollWidth > element.clientWidth + 2)) {
+      report("clipped", element);
+    }
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  const rgba = (color) => {
+    if (!context)
+      return null;
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = "rgba(0, 0, 0, 0)";
+    context.fillStyle = color;
+    context.fillRect(0, 0, 1, 1);
+    const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data;
+    return [r, g, b, a / 255];
+  };
+  const over = (top, under) => [
+    top[0] * top[3] + under[0] * (1 - top[3]),
+    top[1] * top[3] + under[1] * (1 - top[3]),
+    top[2] * top[3] + under[2] * (1 - top[3]),
+    1
+  ];
+  const background = (element) => {
+    const layers = [];
+    const rect = element.getBoundingClientRect();
+    const stack = document.elementsFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    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));
+    for (const node of under) {
+      if (pictures.includes(node))
+        return null;
+      if (pictures.some((picture) => node.contains(picture)))
+        continue;
+      const style = getComputedStyle(node);
+      const shape = node instanceof SVGGeometryElement;
+      const paint = shape ? style.fill : style.backgroundColor;
+      if (!shape && style.backgroundImage !== "none" || paint.startsWith("url("))
+        return null;
+      const color = rgba(paint);
+      if (color && shape)
+        color[3] *= Number.parseFloat(style.fillOpacity) || 0;
+      if (color && color[3] > 0) {
+        layers.push(color);
+        if (color[3] >= 0.99)
+          break;
+      }
+    }
+    return layers.reduceRight((under, top) => over(top, under), [255, 255, 255, 1]);
+  };
+  const luminance = ([r, g, b]) => {
+    const channel = (value = 0) => {
+      const c = value / 255;
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+  };
+  const hex = (color) => `#${color.slice(0, 3).map((value) => Math.round(value).toString(16).padStart(2, "0")).join("")}`;
+  const texts = [
+    ...content.filter((element) => ownText(element)).map((element) => {
+      const style = getComputedStyle(element);
+      return { element, size: Number.parseFloat(style.fontSize), ink: style.color };
+    }),
+    ...svgText.map((element) => {
+      const style = getComputedStyle(element);
+      const scale = element.getScreenCTM()?.a ?? 1;
+      return { element, size: Number.parseFloat(style.fontSize) * scale, ink: style.fill };
+    })
+  ];
+  for (const { element, size, ink } of texts) {
+    if (outside.some((parent) => parent.contains(element)))
+      continue;
+    if (size < 17.5) {
+      report("small_text", element, { size: Math.round(size * 10) / 10 });
+    }
+    const color = rgba(ink);
+    const behind = background(element);
+    if (!color || color[3] === 0 || !behind)
+      continue;
+    const solid = over(color, behind);
+    const [light, dark] = [luminance(solid), luminance(behind)].sort((a, b) => b - a);
+    const ratio = ((light ?? 0) + 0.05) / ((dark ?? 0) + 0.05);
+    const bold = Number.parseInt(getComputedStyle(element).fontWeight, 10) >= 700;
+    const needed = size >= 24 || bold && size >= 18.66 ? 3 : 4.5;
+    if (ratio < needed) {
+      report("contrast", element, {
+        ratio: Math.round(ratio * 100) / 100,
+        colors: [hex(solid), hex(behind)]
+      });
+    }
+  }
+  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" });
+    }
+  }
+  return problems;
+}
+export {
+  ARTIFACT_FRAME_ROUTE_PREFIX,
+  FRAME_ASSETS,
+  FRAME_DEFAULT_THEMES,
+  FRAME_REFERENCE_PREFIX,
+  SLIDES_ENTRY2 as SLIDES_ENTRY,
+  createArtifactFrame,
+  injectFrameAssets,
+  layoutProbe,
+  resolveArtifactFrame,
+  rewriteFrameReferences
+};
+
+//# debugId=87504D80B2F871CF64756E2164756E21