@sixb/core 0.1.20 → 0.1.22

package/dist/artifacts/frames/index.js

@@ -0,0 +1,1285 @@
+// @bun
+import {
+  isArtifactAddress2,
+  parseArtifactAddress2
+} from "../../chunk-3fqxbn31.js";
+import {
+  ArtifactRequestError2,
+  decodeHtmlEntities,
+  HTML_ENTRY2,
+  FRAME_ASSET_PREFIX
+} 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',
+  "--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;
+function kit(rules) {
+  return `
+@layer sixb-kit, sixb-theme;
+
+@layer sixb-kit {
+  :root {
+${Object.entries(LIGHT).map(([name, value]) => `    ${name}: ${value};`).join(`
+`)}
+  }
+
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    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,
+   * 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;
+  }
+`);
+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() {
+  const PROTOCOL = "sixb-frame/1";
+  const WIDTH = 1280;
+  const HEIGHT = 720;
+  const KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "PageUp",
+    "PageDown",
+    "Home",
+    "End",
+    " ",
+    "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));
+  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;
+    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 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 = 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 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)
+        return;
+      reported = next;
+      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));
+    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);
+        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";
+        fit();
+        show(current);
+        return;
+      default:
+        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")
+      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 (!deck || 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 (href.startsWith("#") || event.defaultPrevented)
+        return;
+      event.preventDefault();
+      if (/^artifact:/i.test(href.trim())) {
+        post({ event: "open", params: { address: href.trim() } });
+        return;
+      }
+      const url = webAddress(href);
+      if (url)
+        post({ event: "link", params: { url } });
+      return;
+    }
+    if (!deck || 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", () => {
+    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);
+    });
+    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}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"
+  }
+};
+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, {
+      element(element) {
+        if (injected)
+          return;
+        injected = true;
+        element.prepend(assets, { html: true });
+      }
+    }).transform(html);
+    if (injected)
+      return rewritten;
+  }
+  const doctype = /^\s*<!doctype[^>]*>/i.exec(html)?.[0] ?? "";
+  return `${doctype}${assets}${html.slice(doctype.length)}`;
+}
+var FRAME_REFERENCE_PREFIX = `${FRAME_ASSET_PREFIX}ref/`;
+function frameReferencePath(target, entry) {
+  const file = parseArtifactAddress2(target.address)?.path;
+  if (!file)
+    return null;
+  const path = file.split("/").map(encodeURIComponent).join("/");
+  return `${rootOf(entry)}${FRAME_REFERENCE_PREFIX}${target.artifactId}@${target.version}/${path}`;
+}
+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, entry) : 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/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/";
+var FRAME_LIFETIME_MS = 60 * 60 * 1000;
+var TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
+async function createArtifactFrame(input) {
+  const { version } = input;
+  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);
+  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 && 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(scope) {
+  const MAX_PER_CODE = 8;
+  const page = scope === "page";
+  const slide = page ? document.body : document.querySelectorAll("section.slide")[scope - 1];
+  if (!slide)
+    return [];
+  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(".");
+  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 = 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);
+    } 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 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));
+    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 < (page ? 11.5 : 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)]
+      });
+    }
+  }
+  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" });
+    }
+  }
+  return problems;
+}
+export {
+  ARTIFACT_FRAME_ROUTE_PREFIX,
+  FRAME_ASSETS,
+  FRAME_DEFAULT_THEMES,
+  FRAME_REFERENCE_PREFIX,
+  HTML_ENTRY2 as HTML_ENTRY,
+  createArtifactFrame,
+  frameEntries,
+  frameLayout,
+  injectFrameAssets,
+  layoutProbe,
+  resolveArtifactFrame,
+  rewriteFrameReferences,
+  serializeArtifactQueryResult
+};
+
+//# debugId=A2752CC6A0BC7D6F64756E2164756E21