@sixb/core 0.1.21 → 0.1.22

package/src/artifacts/frames/kit.ts

@@ -64,12 +64,12 @@ export const FRAME_DEFAULT_THEMES = {
 const LIGHT = FRAME_DEFAULT_THEMES.light.tokens
 
 /**
- * The kit the frame injects into a deck: the stage that shows one slide or all of them, the slide
- * type scale, the layouts a slide picks by class, the slide chrome, and a few components. It reads
- * the app's theme tokens, which the app sends into the frame, with the light defaults until they
- * arrive. Everything sits in cascade layers, so the deck's own CSS, unlayered, always wins.
+ * What every frame's kit starts from: the theme's tokens, with the light defaults until the app's
+ * arrive, and the document's base. The rules a layout adds sit in the same layer, and everything
+ * sits in cascade layers, so an artifact's own CSS, unlayered, always wins.
  */
-export const FRAME_KIT_CSS = `
+function kit(rules: string): string {
+  return `
 @layer sixb-kit, sixb-theme;
 
 @layer sixb-kit {
@@ -77,23 +77,34 @@ export const FRAME_KIT_CSS = `
 ${Object.entries(LIGHT)
   .map(([name, value]) => `    ${name}: ${value};`)
   .join("\n")}
-    --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}}
+`
+}
+
+/**
+ * A deck's kit: the stage that shows one slide or all of them, the slide type scale, the layouts a
+ * slide picks by class, the slide chrome, and a few components.
+ */
+export const 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,
@@ -388,5 +399,171 @@ ${Object.entries(LIGHT)
     font-size: 18px;
     font-weight: 600;
   }
-}
-`
+`)
+
+/**
+ * A page's kit: what makes plain HTML read as a finished page in the app's theme. A measured type
+ * scale; tables, forms, and buttons drawn like the app's; a centered column for `<main>`; and a
+ * few components a page picks by class: `.lede`, `.eyebrow`, `.card`, `.grid`, `.stat`, `.tag`,
+ * `.callout`. Every rule sits in the kit's layer, so a page's own CSS wins wherever it differs.
+ */
+export const 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); }
+`)

package/src/artifacts/frames/probe.ts

@@ -1,14 +1,16 @@
-/** A problem the layout probe found on a slide, where it is on the slide, and its text. */
+/** A problem the layout probe found on a slide or a page, where it is, and its text. */
 export interface LayoutProblem {
   readonly code:
     | "outside"
     | "footer"
+    | "wide"
     | "overlap"
     | "clipped"
     | "small_text"
+    | "small_target"
     | "contrast"
     | "broken_image"
-  /** In the slide's 1280×720 pixels. */
+  /** In the slide's 1280×720 pixels, or the page's from its top left. */
   readonly rect: {
     readonly x: number
     readonly y: number
@@ -28,28 +30,37 @@ export interface LayoutProblem {
 }
 
 /**
- * Measures the slide the frame shows, laid out at its own size (`sixb-fill`), and returns what a
- * reader would find wrong with it. Run in the page as its own source, `(${layoutProbe})(3)`, so it
- * names nothing outside itself.
+ * Measures a slide the frame shows, laid out at its own size (`sixb-fill`), or the whole page, and
+ * returns what a reader would find wrong with it. Run in the frame as its own source,
+ * `(${layoutProbe})(3)` or `(${layoutProbe})("page")`, so it names nothing outside itself.
  *
- * - `outside`: text or an image past the slide's edge, which the slide cuts off.
- * - `footer`: text or an image over the footer's rule, the source, or the number.
+ * - `outside` (a slide): text or an image past the slide's edge, which the slide cuts off.
+ * - `footer` (a slide): text or an image over the footer's rule, the source, or the number.
+ * - `wide` (a page): text or an image past the window's right edge, outside any box that scrolls
+ *   sideways, which makes the whole page scroll sideways.
  * - `overlap`: text drawn over other text, line box on line box.
  * - `clipped`: text its own box cuts off.
- * - `small_text`: text under 18px as drawn, an SVG's scaled with it.
+ * - `small_text`: text under 18px on a slide, 12px on a page, as drawn, an SVG's scaled with it.
+ * - `small_target` (a page): a button, field, or other control under 24px either way.
  * - `contrast`: text under WCAG AA against the solid colors painted under it, its own box's,
  *   any box it overlaps, and an SVG shape's fill (4.5:1, or 3:1 from 24px, or 18.66px bold); text
  *   over an image or a gradient is not judged.
  * - `broken_image`: an image of the deck's own that did not load.
  *
- * Another artifact's chart or image is a box here, sized as the deck sizes it: it is measured as
- * one, and its content is the app's.
+ * Another artifact's chart or image is a box here, sized as its host sizes it: it is measured as
+ * one, and its content is the app's. A page is measured where the viewport shows it, so the check
+ * sizes the viewport to the page first.
  */
-export function layoutProbe(slideNumber: number): LayoutProblem[] {
+export function layoutProbe(scope: number | "page"): LayoutProblem[] {
   const MAX_PER_CODE = 8
-  const slide = document.querySelectorAll<HTMLElement>("section.slide")[slideNumber - 1]
+  const page = scope === "page"
+  const slide = page
+    ? document.body
+    : document.querySelectorAll<HTMLElement>("section.slide")[scope - 1]
   if (!slide) return []
-  const box = slide.getBoundingClientRect()
+  const box = page
+    ? document.documentElement.getBoundingClientRect()
+    : slide.getBoundingClientRect()
   const problems: LayoutProblem[] = []
   const counts = new Map<string, number>()
   const selector = (element: Element) =>
@@ -108,10 +119,11 @@ export function layoutProbe(slideNumber: number): LayoutProblem[] {
     (element) => (element.textContent ?? "").trim() !== "" && shown(element)
   )
 
-  // Past the slide's edge, or over the footer. The outermost offender stands for what it holds.
+  // Past the slide's edge, or over the footer; on a page, past the window's right edge. The
+  // outermost offender stands for what it holds.
   const footer = getComputedStyle(slide, "::after")
   const footerTop =
-    footer.content === "none" || footer.display === "none"
+    page || footer.content === "none" || footer.display === "none"
       ? Number.POSITIVE_INFINITY
       : box.bottom -
         Number.parseFloat(footer.bottom) -
@@ -119,9 +131,23 @@ export function layoutProbe(slideNumber: number): LayoutProblem[] {
         Number.parseFloat(footer.lineHeight) -
         Number.parseFloat(footer.borderTopWidth)
   const outside: Element[] = []
+  // A box that scrolls sideways holds what is wider than the window, as a wide table's does.
+  const scrolls = (element: 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 ||
@@ -214,14 +240,20 @@ export function layoutProbe(slideNumber: number): LayoutProblem[] {
     1,
   ]
   /**
-   * The solid color painted under an element's text, or null over an image or a gradient: every
+   * The solid color painted under an element's text, or null over an image or a gradient, or out
+   * of the window: every
    * box under its center, top to bottom, its own and its ancestors' and any it overlaps, until an
    * opaque one.
    */
   const background = (element: Element): [number, number, number, number] | null => {
     const layers: [number, number, number, number][] = []
     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
+    // Out of the window, as a wide table's far cells are in the box it scrolls in, nothing is
+    // under the point to measure.
+    if (x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight) return null
+    const stack = document.elementsFromPoint(x, y)
     // An SVG's text is not hit between its glyphs: then everything under the point counts.
     const start = Math.max(0, stack.indexOf(element))
     const under = stack.slice(start)
@@ -278,7 +310,7 @@ export function layoutProbe(slideNumber: number): LayoutProblem[] {
   ]
   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)
@@ -297,6 +329,22 @@ export function layoutProbe(slideNumber: number): LayoutProblem[] {
     }
   }
 
+  // A control a finger or a pointer can miss: WCAG's 24px minimum target, on a page.
+  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)),
+        })
+      }
+    }
+  }
+
   // An image from another artifact is the app's to load, not the deck's.
   for (const image of Array.from(
     slide.querySelectorAll<HTMLImageElement>("img:not([data-sixb-ref])")

package/src/artifacts/frames/protocol.ts

@@ -1,10 +1,11 @@
-import { ARTIFACT_LIMITS } from "../limits"
+import { ARTIFACT_LIMITS, ARTIFACT_STATE_LIMITS } from "../limits"
+import { isArtifactQueryName } from "../queries"
 import { ARTIFACT_THEME_TOKENS } from "../theme"
 
 /**
- * Messages between the app and a deck in its sandboxed frame. The app asks; the frame answers
- * each request by its id, and tells the app what happened inside it as events. Later abilities
- * are new methods and events, not a new protocol.
+ * Messages between the app and an artifact in its sandboxed frame: a deck, or a page. The app
+ * asks; the frame answers each request by its id, and tells the app what happened inside it as
+ * events. Later abilities are new methods and events, not a new protocol.
  */
 export const FRAME_PROTOCOL = "sixb-frame/1"
 
@@ -40,6 +41,15 @@ export type FrameRequest =
     >
   | FrameRequestOf<"goto", { readonly slide: number }>
   | FrameRequestOf<"mode", { readonly mode: DeckMode }>
+  /** Scrolls a page by a wheel turned over what the app draws on it. */
+  | FrameRequestOf<"scroll", { readonly x: number; readonly y: number }>
+  /** Loads the entry again, as a page whose data was reset starts over. */
+  | FrameRequestOf<"reload", Record<string, never>>
+  /**
+   * A query the page read has new rows: the objects it reads changed. The page reads them with
+   * `sixb.query(name)` again; the app sends it only for the queries that frame has read.
+   */
+  | FrameRequestOf<"query.changed", { readonly name: string }>
 
 interface FrameRequestOf<Method extends string, Params> {
   readonly protocol: typeof FRAME_PROTOCOL
@@ -57,7 +67,8 @@ export interface FrameResponse {
 
 /** What happened inside the frame. */
 export type FrameEvent =
-  | FrameEventOf<"ready", { readonly slides: number }>
+  /** The frame has laid out its entry: a deck says how many slides it has. */
+  | FrameEventOf<"ready", { readonly slides?: number }>
   /** The reader picked a slide in the overview. */
   | FrameEventOf<"select", { readonly slide: number }>
   /** A key the app handles, pressed while the frame had focus. */
@@ -65,14 +76,24 @@ export type FrameEvent =
   /** A link to another artifact, which opens where the reader is. */
   | FrameEventOf<"open", { readonly address: string }>
   /**
-   * Where the shown slide's `<sixb-embed>` boxes are, for the app to draw each over the frame: in
-   * the frame's pixels, with the scale the slide is drawn at. Empty in the overview, where an
-   * embed stays a placeholder, as it does in a filled frame, which never reports.
+   * A link to a web page, which the app opens in a new tab: the frame cannot open windows itself.
+   * Only `http:` and `https:` addresses.
+   */
+  | FrameEventOf<"link", { readonly url: string }>
+  /**
+   * Where the `<sixb-embed>` boxes in view are, for the app to draw each over the frame: in the
+   * frame's pixels, with the scale they are drawn at. A deck reports the shown slide's, and none in
+   * the overview, where an embed stays a placeholder, as it does in a filled frame, which never
+   * reports; a page reports those near its view as it scrolls, at its own scale.
    */
   | FrameEventOf<"embeds", { readonly embeds: readonly FrameEmbed[] }>
+  /** A page's height as laid out at the frame's width, so a document can size the frame to it. */
+  | FrameEventOf<"size", { readonly height: number }>
 
-/** One `<sixb-embed>` on the shown slide. */
+/** One `<sixb-embed>` the frame shows. */
 export interface FrameEmbed {
+  /** The element's own id while the page is loaded: the same as it scrolls out and back. */
+  readonly id: number
   readonly address: string
   readonly rect: {
     readonly x: number
@@ -80,7 +101,10 @@ export interface FrameEmbed {
     readonly width: number
     readonly height: number
   }
-  /** The slide's scale: the embed is drawn at `rect / scale`, then scaled with the slide. */
+  /**
+   * The scale it is drawn at: a slide's, where the embed is laid out at `rect / scale` and scaled
+   * with the slide; 1 on a page.
+   */
   readonly scale: number
 }
 
@@ -90,6 +114,104 @@ interface FrameEventOf<Event extends string, Params> {
   readonly params: Params
 }
 
+/**
+ * What the frame asks of the app, numbered so the app's `result` answers it: a page keeping data
+ * with `sixb.state`, or reading one of its version's queries with `sixb.query`. The app answers
+ * only its own frame, for the artifact and the version it shows.
+ */
+export type FrameCall =
+  | FrameCallOf<"state.get", { readonly key: string }>
+  | FrameCallOf<"state.set", { readonly key: string; readonly value: unknown }>
+  | FrameCallOf<"state.delete", { readonly key: string }>
+  | FrameCallOf<"state.keys", Record<string, never>>
+  /** Runs `queries/<name>.json` as the reader; the value is the query route's JSON. */
+  | FrameCallOf<"query.run", { readonly name: string }>
+
+interface FrameCallOf<Method extends string, Params> {
+  readonly protocol: typeof FRAME_PROTOCOL
+  readonly call: number
+  readonly method: Method
+  readonly params: Params
+}
+
+/** The app's answer to one call: its value, or why it failed. */
+export interface FrameCallResult {
+  readonly protocol: typeof FRAME_PROTOCOL
+  readonly result: number
+  readonly value?: unknown
+  readonly error?: string
+}
+
+/**
+ * A message from a frame as a call, or null when it is not one. A page's scripts write what it
+ * posts, so the shapes are checked here, and a value is checked for size as JSON, as storage will
+ * count it, before the app sends it anywhere.
+ */
+export function parseFrameCall(data: unknown): FrameCall | null {
+  if (!isRecord(data) || data.protocol !== FRAME_PROTOCOL || !isRecord(data.params)) return null
+  if (!Number.isSafeInteger(data.call) || Number(data.call) < 0) return null
+  const call = Number(data.call)
+  const { params } = data
+  const key = params.key
+  const keyed = isStateKey(key)
+  switch (data.method) {
+    case "state.get":
+    case "state.delete":
+      return keyed
+        ? ({ protocol: FRAME_PROTOCOL, call, method: data.method, params: { key } } as FrameCall)
+        : null
+    case "state.set": {
+      if (!keyed || !("value" in params)) return null
+      const json = jsonText(params.value)
+      if (json === undefined || utf8Bytes(json) > ARTIFACT_STATE_LIMITS.maxValueBytes) return null
+      return {
+        protocol: FRAME_PROTOCOL,
+        call,
+        method: "state.set",
+        params: { key, value: params.value },
+      }
+    }
+    case "state.keys":
+      return { protocol: FRAME_PROTOCOL, call, method: "state.keys", params: {} }
+    case "query.run": {
+      // The client puts the name in the URL's path, as it does a key.
+      const { name } = params
+      if (typeof name !== "string" || !isArtifactQueryName(name)) return null
+
+      return { protocol: FRAME_PROTOCOL, call, method: "query.run", params: { name } }
+    }
+    default:
+      return null
+  }
+}
+
+/**
+ * A key the app can send: the client puts it in the URL's path, where `.` and `..` would name
+ * another route, `..` the artifact itself.
+ */
+function isStateKey(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    value.length > 0 &&
+    value.length <= ARTIFACT_STATE_LIMITS.maxKeyLength &&
+    !/\p{Cc}/u.test(value) &&
+    value !== "." &&
+    value !== ".."
+  )
+}
+
+function jsonText(value: unknown): string | undefined {
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return undefined
+  }
+}
+
+function utf8Bytes(text: string): number {
+  return new TextEncoder().encode(text).byteLength
+}
+
 /** Keys the frame passes to the app, so a deck navigates the same with focus in it or not. */
 export const DECK_KEYS = [
   "ArrowLeft",
@@ -120,6 +242,7 @@ export function parseFrameEvent(data: unknown): FrameEvent | null {
   const { params } = data
   switch (data.event) {
     case "ready":
+      if (params.slides === undefined) return event("ready", {})
       return isCount(params.slides) ? event("ready", { slides: params.slides }) : null
     case "select":
       return isCount(params.slide) && params.slide > 0
@@ -131,16 +254,25 @@ export function parseFrameEvent(data: unknown): FrameEvent | null {
         : null
     case "open":
       return isAddress(params.address) ? event("open", { address: params.address }) : null
+    case "link":
+      return isWebAddress(params.url) ? event("link", { url: params.url }) : null
     case "embeds": {
       const { embeds } = params
       if (!Array.isArray(embeds) || embeds.length > ARTIFACT_LIMITS.maxReferences) return null
       const parsed: FrameEmbed[] = []
+      const ids = new Set<number>()
       for (const embed of embeds) {
         if (!isRecord(embed) || !isAddress(embed.address) || !isRecord(embed.rect)) return null
+
+        // Two embeds with one id would be one element drawn twice.
+        if (!isCount(embed.id) || ids.has(embed.id)) return null
+        ids.add(embed.id)
+
         const { x, y, width, height } = embed.rect
         if (![x, y, width, height, embed.scale].every(Number.isFinite)) return null
         if (Number(width) < 0 || Number(height) < 0 || Number(embed.scale) <= 0) return null
         parsed.push({
+          id: embed.id,
           address: embed.address,
           rect: { x: Number(x), y: Number(y), width: Number(width), height: Number(height) },
           scale: Number(embed.scale),
@@ -148,11 +280,18 @@ export function parseFrameEvent(data: unknown): FrameEvent | null {
       }
       return event("embeds", { embeds: parsed })
     }
+    case "size":
+      return Number.isFinite(params.height) && Number(params.height) >= 0
+        ? event("size", { height: Math.min(Number(params.height), MAX_HEIGHT) })
+        : null
     default:
       return null
   }
 }
 
+/** The most a page reports as its height: more is a page that grows with its frame. */
+const MAX_HEIGHT = 100_000
+
 function event<Name extends FrameEvent["event"]>(
   name: Name,
   params: Extract<FrameEvent, { event: Name }>["params"]
@@ -172,3 +311,18 @@ function isCount(value: unknown): value is number {
 function isAddress(value: unknown): value is string {
   return typeof value === "string" && value.length <= 2048
 }
+
+/** The longest web address the app opens: longer than any link a page needs. */
+const MAX_URL_LENGTH = 8192
+
+/** An absolute `http:` or `https:` address, as the frame resolves a link's. */
+function isWebAddress(value: unknown): value is string {
+  if (typeof value !== "string" || value.length > MAX_URL_LENGTH) return false
+
+  try {
+    const { protocol } = new URL(value)
+    return protocol === "http:" || protocol === "https:"
+  } catch {
+    return false
+  }
+}