@krizaka/ui 2.5.0 → 2.8.0

package/dist/terminal-replay.js

@@ -0,0 +1,231 @@
+"use client";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/terminal-replay/terminal-replay.tsx
+import * as React from "react";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var PlayGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, fill: true, children: /* @__PURE__ */ jsx("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" }) });
+var PauseGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, fill: true, children: [
+  /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1" })
+] });
+var CheckGlyph = (p) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var RetryGlyph = (p) => /* @__PURE__ */ jsxs(Glyph, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 12a8 8 0 1 0 2.3-5.7L4 8.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 4v4.5h4.5" })
+] });
+
+// src/terminal-replay/terminal-replay.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TONE = {
+  muted: "text-fg-secondary",
+  accent: "text-fg-accent",
+  success: "text-fg-success",
+  warning: "text-fg-warning",
+  danger: "text-fg-danger"
+};
+var line = (entry) => typeof entry === "string" ? { text: entry } : entry;
+function advance(steps, pos, timing) {
+  const current = steps[pos.step];
+  if (!current) return null;
+  const output = current.output ?? [];
+  if (pos.chars < current.command.length) {
+    const pause = current.command[pos.chars] === " " ? timing.typing * 2 : timing.typing;
+    return [{ ...pos, chars: pos.chars + 1 }, pause];
+  }
+  if (pos.lines < output.length) return [{ ...pos, lines: pos.lines + 1 }, pos.lines === 0 ? timing.line * 4 : timing.line];
+  if (pos.step < steps.length - 1) return [{ step: pos.step + 1, chars: 0, lines: 0 }, timing.step];
+  return null;
+}
+function TerminalReplay({
+  steps,
+  label,
+  title,
+  prompt = "$",
+  playLabel,
+  pauseLabel,
+  replayLabel,
+  copyLabel,
+  copiedLabel,
+  typingSpeed = 34,
+  lineDelay = 70,
+  stepDelay = 900,
+  rows = 18,
+  autoPlay = true,
+  className,
+  style,
+  ...props
+}) {
+  const root = React.useRef(null);
+  const screenRef = React.useRef(null);
+  const [phase, setPhase] = React.useState("final");
+  const [pos, setPos] = React.useState({ step: 0, chars: 0, lines: 0 });
+  const [visible, setVisible] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  React.useEffect(() => {
+    const el = root.current;
+    if (!el || !autoPlay || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    setPhase("idle");
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        const seen = Boolean(entry?.isIntersecting);
+        setVisible(seen);
+        if (seen) setPhase((current) => current === "idle" ? "playing" : current);
+      },
+      { threshold: 0.35 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [autoPlay]);
+  const ended = phase === "playing" && !advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });
+  const state = ended ? "done" : phase;
+  React.useEffect(() => {
+    if (phase !== "playing" || !visible) return;
+    const next = advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });
+    if (!next) return;
+    const timer = setTimeout(() => setPos(next[0]), next[1]);
+    return () => clearTimeout(timer);
+  }, [phase, visible, pos, steps, typingSpeed, lineDelay, stepDelay]);
+  React.useEffect(() => {
+    const el = screenRef.current;
+    if (el && state === "playing") el.scrollTop = el.scrollHeight;
+  }, [pos, state]);
+  React.useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1800);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const whole = state === "final" || state === "done";
+  const shown = whole ? steps.length - 1 : pos.step;
+  const toggle = () => {
+    if (state === "playing") setPhase("paused");
+    else if (state === "paused" || state === "idle") setPhase("playing");
+    else {
+      setVisible(true);
+      setPos({ step: 0, chars: 0, lines: 0 });
+      setPhase("playing");
+    }
+  };
+  const control = state === "playing" ? { text: pauseLabel, Glyph: PauseGlyph } : state === "done" ? { text: replayLabel, Glyph: RetryGlyph } : { text: playLabel, Glyph: PlayGlyph };
+  const commands = steps.map((s) => s.command).join("\n");
+  const transcript = steps.map((s) => [`${prompt} ${s.command}`, ...(s.output ?? []).map((o) => line(o).text)].join("\n")).join("\n\n");
+  return /* @__PURE__ */ jsxs2(
+    "figure",
+    {
+      ref: root,
+      "data-state": state,
+      "data-autoplay": autoPlay ? "" : void 0,
+      className: cn("kz-replay overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-md", className),
+      style: { "--kz-replay-rows": rows, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2("figcaption", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary", children: [
+          /* @__PURE__ */ jsxs2("span", { "aria-hidden": true, className: "flex shrink-0 gap-1.5", children: [
+            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
+            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" }),
+            /* @__PURE__ */ jsx2("span", { className: "h-2.5 w-2.5 rounded-full bg-border-strong" })
+          ] }),
+          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate font-mono", children: title }),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: toggle,
+              className: "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
+              children: [
+                /* @__PURE__ */ jsx2(control.Glyph, { className: "h-3.5 w-3.5" }),
+                control.text
+              ]
+            }
+          ),
+          copyLabel && /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: () => navigator.clipboard?.writeText(commands).then(() => setCopied(true)),
+              "data-copied": copied ? "" : void 0,
+              className: "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring",
+              children: [
+                copied ? /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx2(CopyGlyph, {}),
+                /* @__PURE__ */ jsx2("span", { "aria-live": "polite", children: copied ? copiedLabel ?? copyLabel : copyLabel })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ref: screenRef,
+            role: "region",
+            "aria-label": label,
+            tabIndex: 0,
+            className: "kz-replay-screen relative overflow-auto bg-surface-0 px-4 py-3 font-mono text-[0.8125rem] leading-relaxed text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { "aria-hidden": true, className: "kz-replay-live", children: [
+                steps.slice(0, state === "idle" ? 0 : shown + 1).map((step, i) => {
+                  const current = !whole && i === shown;
+                  const typed = current ? step.command.slice(0, pos.chars) : step.command;
+                  const output = (step.output ?? []).slice(0, current ? pos.lines : void 0);
+                  const typing = current && pos.chars < step.command.length;
+                  return /* @__PURE__ */ jsxs2("div", { className: i > 0 ? "mt-3" : void 0, children: [
+                    /* @__PURE__ */ jsxs2("div", { className: "whitespace-pre", children: [
+                      /* @__PURE__ */ jsxs2("span", { className: "text-fg-accent select-none", children: [
+                        prompt,
+                        " "
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { className: "font-medium", children: typed }),
+                      typing && /* @__PURE__ */ jsx2("span", { className: "kz-replay-caret" })
+                    ] }),
+                    output.map((entry, j) => {
+                      const { text, tone } = line(entry);
+                      return /* @__PURE__ */ jsx2("div", { className: cn("min-h-[1lh] whitespace-pre", tone ? TONE[tone] : "text-fg"), children: text }, j);
+                    })
+                  ] }, i);
+                }),
+                (state === "idle" || whole) && /* @__PURE__ */ jsxs2("div", { className: cn("whitespace-pre", state !== "idle" && "mt-3"), children: [
+                  /* @__PURE__ */ jsxs2("span", { className: "text-fg-accent select-none", children: [
+                    prompt,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx2("span", { className: "kz-replay-caret" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2("pre", { className: "sr-only", children: transcript })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CopyGlyph() {
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M5 15V6a2 2 0 0 1 2-2h8" })
+  ] });
+}
+export {
+  TerminalReplay
+};
+//# sourceMappingURL=terminal-replay.js.map

package/dist/terminal-replay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/terminal-replay/terminal-replay.tsx","../src/glyphs.tsx"],"sourcesContent":["// Client (a timer, an observer). A terminal session played back: each command is typed at the prompt, its output\n// arrives line by line, the screen follows the last line like a real terminal. What a reader sees without the motion\n// is the session itself: the server renders it whole (no JavaScript, reduced motion and assistive technology all get\n// the full transcript), the screen has a fixed height (no layout shift while it plays), the replay starts when it\n// scrolls into view, waits while it is off screen, and pauses or replays on demand (WCAG 2.2.2). A bounded chain of\n// timeouts, never a permanent animation frame.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, PauseGlyph, PlayGlyph, RetryGlyph } from \"../glyphs\";\n\n/** The colour of an output line — the tokens' text roles, all AA on the screen: secondary, accent, success, warning, danger. */\nexport type TerminalTone = \"muted\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n\nexport interface TerminalLine {\n  /** The line as the program printed it (no colour codes). */\n  text: string;\n  /** Its colour, when the program coloured it. */\n  tone?: TerminalTone;\n}\n\nexport interface TerminalStep {\n  /** What is typed at the prompt (`npx orazaka install`). */\n  command: string;\n  /** What it printed, line by line. */\n  output?: readonly (string | TerminalLine)[];\n}\n\nexport type TerminalReplayProps = Omit<React.ComponentProps<\"figure\">, \"children\" | \"title\"> & {\n  /** The session, in order. */\n  steps: readonly TerminalStep[];\n  /** The accessible name of the screen (“Terminal session: install, start, dev”) — passed translated. */\n  label: string;\n  /** The window's title, shown in its bar (`~/projects — zsh`). */\n  title?: React.ReactNode;\n  /**\n   * What the prompt shows before each command.\n   * @default \"$\"\n   */\n  prompt?: string;\n  /** The play button's words (the replay is waiting or paused). */\n  playLabel: string;\n  /** The pause button's words (the replay is running). */\n  pauseLabel: string;\n  /** The replay button's words (the session is shown whole). */\n  replayLabel: string;\n  /** The copy button's words: it copies the commands, one per line. Without it, no copy button. */\n  copyLabel?: string;\n  /** What the copy button says once the commands are copied (announced politely). */\n  copiedLabel?: string;\n  /**\n   * Milliseconds per typed character.\n   * @default 34\n   */\n  typingSpeed?: number;\n  /**\n   * Milliseconds between two output lines.\n   * @default 70\n   */\n  lineDelay?: number;\n  /**\n   * Milliseconds between a command's last line and the next command.\n   * @default 900\n   */\n  stepDelay?: number;\n  /**\n   * The screen's height, in lines; longer sessions scroll.\n   * @default 18\n   */\n  rows?: number;\n  /**\n   * Plays the first time it scrolls into view. `false`: the session rests whole until the reader presses play.\n   * @default true\n   */\n  autoPlay?: boolean;\n};\n\ntype Phase = \"final\" | \"idle\" | \"playing\" | \"paused\" | \"done\";\ninterface Position {\n  step: number;\n  chars: number;\n  lines: number;\n}\n\nconst TONE: Record<TerminalTone, string> = {\n  muted: \"text-fg-secondary\",\n  accent: \"text-fg-accent\",\n  success: \"text-fg-success\",\n  warning: \"text-fg-warning\",\n  danger: \"text-fg-danger\",\n};\n\nconst line = (entry: string | TerminalLine): TerminalLine => (typeof entry === \"string\" ? { text: entry } : entry);\n\n/** The next position of the replay and how long to wait for it; null at the end of the session. */\nfunction advance(steps: readonly TerminalStep[], pos: Position, timing: { typing: number; line: number; step: number }): [Position, number] | null {\n  const current = steps[pos.step];\n  if (!current) return null;\n  const output = current.output ?? [];\n  if (pos.chars < current.command.length) {\n    // A space is a beat longer: the rhythm of someone typing, not of a printer.\n    const pause = current.command[pos.chars] === \" \" ? timing.typing * 2 : timing.typing;\n    return [{ ...pos, chars: pos.chars + 1 }, pause];\n  }\n  if (pos.lines < output.length) return [{ ...pos, lines: pos.lines + 1 }, pos.lines === 0 ? timing.line * 4 : timing.line];\n  if (pos.step < steps.length - 1) return [{ step: pos.step + 1, chars: 0, lines: 0 }, timing.step];\n  return null;\n}\n\n/** A terminal session played back: commands typed at the prompt, their output line by line — or the whole session at rest. */\nexport function TerminalReplay({\n  steps,\n  label,\n  title,\n  prompt = \"$\",\n  playLabel,\n  pauseLabel,\n  replayLabel,\n  copyLabel,\n  copiedLabel,\n  typingSpeed = 34,\n  lineDelay = 70,\n  stepDelay = 900,\n  rows = 18,\n  autoPlay = true,\n  className,\n  style,\n  ...props\n}: TerminalReplayProps) {\n  const root = React.useRef<HTMLElement>(null);\n  const screenRef = React.useRef<HTMLDivElement>(null);\n  // The server renders the session whole; the client takes it over unless the reader asked for less motion.\n  const [phase, setPhase] = React.useState<Phase>(\"final\");\n  const [pos, setPos] = React.useState<Position>({ step: 0, chars: 0, lines: 0 });\n  const [visible, setVisible] = React.useState(false);\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    const el = root.current;\n    if (!el || !autoPlay || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    setPhase(\"idle\");\n    // Starts the first time it is seen; off screen, it waits where it is.\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        const seen = Boolean(entry?.isIntersecting);\n        setVisible(seen);\n        if (seen) setPhase((current) => (current === \"idle\" ? \"playing\" : current));\n      },\n      { threshold: 0.35 },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [autoPlay]);\n\n  const ended = phase === \"playing\" && !advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n  // The end of the session is where the replay stands, not an event: derived, never set from an effect.\n  const state: Phase = ended ? \"done\" : phase;\n\n  React.useEffect(() => {\n    if (phase !== \"playing\" || !visible) return;\n    const next = advance(steps, pos, { typing: typingSpeed, line: lineDelay, step: stepDelay });\n    if (!next) return;\n    const timer = setTimeout(() => setPos(next[0]), next[1]);\n    return () => clearTimeout(timer);\n  }, [phase, visible, pos, steps, typingSpeed, lineDelay, stepDelay]);\n\n  // The screen follows the last line while it plays, like a terminal.\n  React.useEffect(() => {\n    const el = screenRef.current;\n    if (el && state === \"playing\") el.scrollTop = el.scrollHeight;\n  }, [pos, state]);\n\n  React.useEffect(() => {\n    if (!copied) return;\n    const timer = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(timer);\n  }, [copied]);\n\n  const whole = state === \"final\" || state === \"done\";\n  const shown = whole ? steps.length - 1 : pos.step;\n  const toggle = () => {\n    if (state === \"playing\") setPhase(\"paused\");\n    else if (state === \"paused\" || state === \"idle\") setPhase(\"playing\");\n    else {\n      // Played on demand — also under reduced motion: the reader asked for it. Off screen it would wait: it is on screen.\n      setVisible(true);\n      setPos({ step: 0, chars: 0, lines: 0 });\n      setPhase(\"playing\");\n    }\n  };\n  const control =\n    state === \"playing\"\n      ? { text: pauseLabel, Glyph: PauseGlyph }\n      : state === \"done\"\n        ? { text: replayLabel, Glyph: RetryGlyph }\n        : { text: playLabel, Glyph: PlayGlyph };\n  const commands = steps.map((s) => s.command).join(\"\\n\");\n  const transcript = steps.map((s) => [`${prompt} ${s.command}`, ...(s.output ?? []).map((o) => line(o).text)].join(\"\\n\")).join(\"\\n\\n\");\n\n  return (\n    <figure\n      ref={root}\n      data-state={state}\n      data-autoplay={autoPlay ? \"\" : undefined}\n      className={cn(\"kz-replay overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-md\", className)}\n      style={{ \"--kz-replay-rows\": rows, ...style } as React.CSSProperties}\n      {...props}\n    >\n      <figcaption className=\"flex items-center gap-3 border-b border-border-subtle bg-surface-2 px-3 py-2 text-xs text-fg-secondary\">\n        <span aria-hidden className=\"flex shrink-0 gap-1.5\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-border-strong\" />\n        </span>\n        <span className=\"min-w-0 flex-1 truncate font-mono\">{title}</span>\n        <button\n          type=\"button\"\n          onClick={toggle}\n          className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n        >\n          <control.Glyph className=\"h-3.5 w-3.5\" />\n          {control.text}\n        </button>\n        {copyLabel && (\n          <button\n            type=\"button\"\n            onClick={() => navigator.clipboard?.writeText(commands).then(() => setCopied(true))}\n            data-copied={copied ? \"\" : undefined}\n            className=\"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 font-medium text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph />}\n            <span aria-live=\"polite\">{copied ? (copiedLabel ?? copyLabel) : copyLabel}</span>\n          </button>\n        )}\n      </figcaption>\n      <div\n        ref={screenRef}\n        role=\"region\"\n        aria-label={label}\n        tabIndex={0}\n        className=\"kz-replay-screen relative overflow-auto bg-surface-0 px-4 py-3 font-mono text-[0.8125rem] leading-relaxed text-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      >\n        <div aria-hidden className=\"kz-replay-live\">\n          {steps.slice(0, state === \"idle\" ? 0 : shown + 1).map((step, i) => {\n            const current = !whole && i === shown;\n            const typed = current ? step.command.slice(0, pos.chars) : step.command;\n            const output = (step.output ?? []).slice(0, current ? pos.lines : undefined);\n            const typing = current && pos.chars < step.command.length;\n            return (\n              <div key={i} className={i > 0 ? \"mt-3\" : undefined}>\n                <div className=\"whitespace-pre\">\n                  <span className=\"text-fg-accent select-none\">{prompt} </span>\n                  <span className=\"font-medium\">{typed}</span>\n                  {typing && <span className=\"kz-replay-caret\" />}\n                </div>\n                {output.map((entry, j) => {\n                  const { text, tone } = line(entry);\n                  return (\n                    <div key={j} className={cn(\"min-h-[1lh] whitespace-pre\", tone ? TONE[tone] : \"text-fg\")}>\n                      {text}\n                    </div>\n                  );\n                })}\n              </div>\n            );\n          })}\n          {(state === \"idle\" || whole) && (\n            <div className={cn(\"whitespace-pre\", state !== \"idle\" && \"mt-3\")}>\n              <span className=\"text-fg-accent select-none\">{prompt} </span>\n              <span className=\"kz-replay-caret\" />\n            </div>\n          )}\n        </div>\n        <pre className=\"sr-only\">{transcript}</pre>\n      </div>\n    </figure>\n  );\n}\n\n/** Two sheets, one over the other: copy. Drawn here, like the other glyphs of the primitives (decorative). */\nfunction CopyGlyph() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden focusable=\"false\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n      <path d=\"M5 15V6a2 2 0 0 1 2-2h8\" />\n    </svg>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";;;;;;AAMA,YAAY,WAAW;;;ACGnB,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,YAAY,CAAC,MACxB,oBAAC,SAAO,GAAG,GAAG,MAAI,MAChB,8BAAC,UAAK,GAAE,kFAAiF,GAC3F;AAEK,IAAM,aAAa,CAAC,MACzB,qBAAC,SAAO,GAAG,GAAG,MAAI,MAChB;AAAA,sBAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,KAAI,QAAO,MAAK,IAAG,KAAI;AAAA,EAC/C,oBAAC,UAAK,GAAE,MAAK,GAAE,KAAI,OAAM,KAAI,QAAO,MAAK,IAAG,KAAI;AAAA,GAClD;AAyCK,IAAM,aAAa,CAAC,MACzB,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAqCK,IAAM,aAAa,CAAC,MACzB,qBAAC,SAAO,GAAG,GACT;AAAA,sBAAC,UAAK,GAAE,iCAAgC;AAAA,EACxC,oBAAC,UAAK,GAAE,gBAAe;AAAA,GACzB;;;AD0FM,SACE,OAAAA,MADF,QAAAC,aAAA;AA7HR,IAAM,OAAqC;AAAA,EACzC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,IAAM,OAAO,CAAC,UAAgD,OAAO,UAAU,WAAW,EAAE,MAAM,MAAM,IAAI;AAG5G,SAAS,QAAQ,OAAgC,KAAe,QAAmF;AACjJ,QAAM,UAAU,MAAM,IAAI,IAAI;AAC9B,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,SAAS,QAAQ,UAAU,CAAC;AAClC,MAAI,IAAI,QAAQ,QAAQ,QAAQ,QAAQ;AAEtC,UAAM,QAAQ,QAAQ,QAAQ,IAAI,KAAK,MAAM,MAAM,OAAO,SAAS,IAAI,OAAO;AAC9E,WAAO,CAAC,EAAE,GAAG,KAAK,OAAO,IAAI,QAAQ,EAAE,GAAG,KAAK;AAAA,EACjD;AACA,MAAI,IAAI,QAAQ,OAAO,OAAQ,QAAO,CAAC,EAAE,GAAG,KAAK,OAAO,IAAI,QAAQ,EAAE,GAAG,IAAI,UAAU,IAAI,OAAO,OAAO,IAAI,OAAO,IAAI;AACxH,MAAI,IAAI,OAAO,MAAM,SAAS,EAAG,QAAO,CAAC,EAAE,MAAM,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,EAAE,GAAG,OAAO,IAAI;AAChG,SAAO;AACT;AAGO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,OAAa,aAAoB,IAAI;AAC3C,QAAM,YAAkB,aAAuB,IAAI;AAEnD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAgB,OAAO;AACvD,QAAM,CAAC,KAAK,MAAM,IAAU,eAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,EAAE,CAAC;AAC9E,QAAM,CAAC,SAAS,UAAU,IAAU,eAAS,KAAK;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAS,KAAK;AAEhD,EAAM,gBAAU,MAAM;AACpB,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,MAAM,CAAC,YAAY,OAAO,WAAW,kCAAkC,EAAE,QAAS;AACvF,aAAS,MAAM;AAEf,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,CAAC,KAAK,MAAM;AACX,cAAM,OAAO,QAAQ,OAAO,cAAc;AAC1C,mBAAW,IAAI;AACf,YAAI,KAAM,UAAS,CAAC,YAAa,YAAY,SAAS,YAAY,OAAQ;AAAA,MAC5E;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AACA,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,UAAU,aAAa,CAAC,QAAQ,OAAO,KAAK,EAAE,QAAQ,aAAa,MAAM,WAAW,MAAM,UAAU,CAAC;AAEnH,QAAM,QAAe,QAAQ,SAAS;AAEtC,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU,aAAa,CAAC,QAAS;AACrC,UAAM,OAAO,QAAQ,OAAO,KAAK,EAAE,QAAQ,aAAa,MAAM,WAAW,MAAM,UAAU,CAAC;AAC1F,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,WAAW,MAAM,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AACvD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,SAAS,KAAK,OAAO,aAAa,WAAW,SAAS,CAAC;AAGlE,EAAM,gBAAU,MAAM;AACpB,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,UAAU,UAAW,IAAG,YAAY,GAAG;AAAA,EACnD,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,EAAM,gBAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AACrD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,UAAU,WAAW,UAAU;AAC7C,QAAM,QAAQ,QAAQ,MAAM,SAAS,IAAI,IAAI;AAC7C,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,UAAW,UAAS,QAAQ;AAAA,aACjC,UAAU,YAAY,UAAU,OAAQ,UAAS,SAAS;AAAA,SAC9D;AAEH,iBAAW,IAAI;AACf,aAAO,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,EAAE,CAAC;AACtC,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACA,QAAM,UACJ,UAAU,YACN,EAAE,MAAM,YAAY,OAAO,WAAW,IACtC,UAAU,SACR,EAAE,MAAM,aAAa,OAAO,WAAW,IACvC,EAAE,MAAM,WAAW,OAAO,UAAU;AAC5C,QAAM,WAAW,MAAM,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,IAAI;AACtD,QAAM,aAAa,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,MAAM,IAAI,EAAE,OAAO,IAAI,IAAI,EAAE,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,MAAM;AAEpI,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe,WAAW,KAAK;AAAA,MAC/B,WAAW,GAAG,4FAA4F,SAAS;AAAA,MACnH,OAAO,EAAE,oBAAoB,MAAM,GAAG,MAAM;AAAA,MAC3C,GAAG;AAAA,MAEJ;AAAA,wBAAAA,MAAC,gBAAW,WAAU,0GACpB;AAAA,0BAAAA,MAAC,UAAK,eAAW,MAAC,WAAU,yBAC1B;AAAA,4BAAAD,KAAC,UAAK,WAAU,6CAA4C;AAAA,YAC5D,gBAAAA,KAAC,UAAK,WAAU,6CAA4C;AAAA,YAC5D,gBAAAA,KAAC,UAAK,WAAU,6CAA4C;AAAA,aAC9D;AAAA,UACA,gBAAAA,KAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA,UAC3D,gBAAAC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cAEV;AAAA,gCAAAD,KAAC,QAAQ,OAAR,EAAc,WAAU,eAAc;AAAA,gBACtC,QAAQ;AAAA;AAAA;AAAA,UACX;AAAA,UACC,aACC,gBAAAC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,UAAU,WAAW,UAAU,QAAQ,EAAE,KAAK,MAAM,UAAU,IAAI,CAAC;AAAA,cAClF,eAAa,SAAS,KAAK;AAAA,cAC3B,WAAU;AAAA,cAET;AAAA,yBAAS,gBAAAD,KAAC,cAAW,WAAU,eAAc,IAAK,gBAAAA,KAAC,aAAU;AAAA,gBAC9D,gBAAAA,KAAC,UAAK,aAAU,UAAU,mBAAU,eAAe,YAAa,WAAU;AAAA;AAAA;AAAA,UAC5E;AAAA,WAEJ;AAAA,QACA,gBAAAC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,UAAU;AAAA,YACV,WAAU;AAAA,YAEV;AAAA,8BAAAA,MAAC,SAAI,eAAW,MAAC,WAAU,kBACxB;AAAA,sBAAM,MAAM,GAAG,UAAU,SAAS,IAAI,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM,MAAM;AACjE,wBAAM,UAAU,CAAC,SAAS,MAAM;AAChC,wBAAM,QAAQ,UAAU,KAAK,QAAQ,MAAM,GAAG,IAAI,KAAK,IAAI,KAAK;AAChE,wBAAM,UAAU,KAAK,UAAU,CAAC,GAAG,MAAM,GAAG,UAAU,IAAI,QAAQ,MAAS;AAC3E,wBAAM,SAAS,WAAW,IAAI,QAAQ,KAAK,QAAQ;AACnD,yBACE,gBAAAA,MAAC,SAAY,WAAW,IAAI,IAAI,SAAS,QACvC;AAAA,oCAAAA,MAAC,SAAI,WAAU,kBACb;AAAA,sCAAAA,MAAC,UAAK,WAAU,8BAA8B;AAAA;AAAA,wBAAO;AAAA,yBAAC;AAAA,sBACtD,gBAAAD,KAAC,UAAK,WAAU,eAAe,iBAAM;AAAA,sBACpC,UAAU,gBAAAA,KAAC,UAAK,WAAU,mBAAkB;AAAA,uBAC/C;AAAA,oBACC,OAAO,IAAI,CAAC,OAAO,MAAM;AACxB,4BAAM,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK;AACjC,6BACE,gBAAAA,KAAC,SAAY,WAAW,GAAG,8BAA8B,OAAO,KAAK,IAAI,IAAI,SAAS,GACnF,kBADO,CAEV;AAAA,oBAEJ,CAAC;AAAA,uBAbO,CAcV;AAAA,gBAEJ,CAAC;AAAA,iBACC,UAAU,UAAU,UACpB,gBAAAC,MAAC,SAAI,WAAW,GAAG,kBAAkB,UAAU,UAAU,MAAM,GAC7D;AAAA,kCAAAA,MAAC,UAAK,WAAU,8BAA8B;AAAA;AAAA,oBAAO;AAAA,qBAAC;AAAA,kBACtD,gBAAAD,KAAC,UAAK,WAAU,mBAAkB;AAAA,mBACpC;AAAA,iBAEJ;AAAA,cACA,gBAAAA,KAAC,SAAI,WAAU,WAAW,sBAAW;AAAA;AAAA;AAAA,QACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,YAAY;AACnB,SACE,gBAAAC,MAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MAAC,WAAU,SACpK;AAAA,oBAAAD,KAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,IAChD,gBAAAA,KAAC,UAAK,GAAE,2BAA0B;AAAA,KACpC;AAEJ;","names":["jsx","jsxs"]}

package/dist/toc.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+type TocProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** The navigation's name and visible label: `On this page`. */
+    label: string;
+    /** The sections, in order: the id of each section's title and its words. */
+    items: readonly {
+        id: string;
+        label: React.ReactNode;
+    }[];
+};
+/** The sections of the page, the one being read marked. */
+declare function Toc({ label, items, className, ...props }: TocProps): React.JSX.Element;
+type TocLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** The table of contents (a `Toc`). */
+    toc: React.ReactNode;
+    /** The page's sections. */
+    children: React.ReactNode;
+};
+/** A reading page: the table of contents in a sticky column on the left, the sections beside it (one column on a phone). */
+declare function TocLayout({ toc, children, className, ...props }: TocLayoutProps): React.JSX.Element;
+
+export { Toc, TocLayout, type TocLayoutProps, type TocProps };

package/dist/toc.js

@@ -0,0 +1,39 @@
+"use client";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/toc/toc.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Toc({ label, items, className, ...props }) {
+  const [active, setActive] = React.useState(items[0]?.id);
+  React.useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return;
+    const targets = items.map((i) => document.getElementById(i.id)).filter((el) => el !== null);
+    const io = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible[0]) setActive(visible[0].target.id);
+      },
+      { rootMargin: "-15% 0px -70% 0px" }
+    );
+    targets.forEach((t) => io.observe(t));
+    return () => io.disconnect();
+  }, [items]);
+  return /* @__PURE__ */ jsxs("nav", { className: cn("kz-toc", className), "aria-label": label, ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: "kz-label", children: label }),
+    /* @__PURE__ */ jsx("ol", { children: items.map((i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `#${i.id}`, "aria-current": active === i.id ? "location" : void 0, onClick: () => setActive(i.id), children: i.label }) }, i.id)) })
+  ] });
+}
+function TocLayout({ toc, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("kz-toc-layout", className), ...props, children: [
+    /* @__PURE__ */ jsx("aside", { className: "kz-toc-aside", children: toc }),
+    /* @__PURE__ */ jsx("div", { className: "kz-toc-main", children })
+  ] });
+}
+export {
+  Toc,
+  TocLayout
+};
+//# sourceMappingURL=toc.js.map

package/dist/toc.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toc/toc.tsx"],"sourcesContent":["// Client (one IntersectionObserver). The table of contents of a reading page (blocks.css): sticky beside the content on\n// a wide screen, a row of chips that scrolls sideways on a phone. The section being read is marked (`aria-current`).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type TocProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The navigation's name and visible label: `On this page`. */\n  label: string;\n  /** The sections, in order: the id of each section's title and its words. */\n  items: readonly { id: string; label: React.ReactNode }[];\n};\n\n/** The sections of the page, the one being read marked. */\nexport function Toc({ label, items, className, ...props }: TocProps) {\n  const [active, setActive] = React.useState(items[0]?.id);\n  React.useEffect(() => {\n    if (typeof IntersectionObserver === \"undefined\") return;\n    const targets = items.map((i) => document.getElementById(i.id)).filter((el): el is HTMLElement => el !== null);\n    const io = new IntersectionObserver(\n      (entries) => {\n        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);\n        if (visible[0]) setActive(visible[0].target.id);\n      },\n      { rootMargin: \"-15% 0px -70% 0px\" },\n    );\n    targets.forEach((t) => io.observe(t));\n    return () => io.disconnect();\n  }, [items]);\n  return (\n    <nav className={cn(\"kz-toc\", className)} aria-label={label} {...props}>\n      <p className=\"kz-label\">{label}</p>\n      <ol>\n        {items.map((i) => (\n          <li key={i.id}>\n            <a href={`#${i.id}`} aria-current={active === i.id ? \"location\" : undefined} onClick={() => setActive(i.id)}>\n              {i.label}\n            </a>\n          </li>\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\nexport type TocLayoutProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** The table of contents (a `Toc`). */\n  toc: React.ReactNode;\n  /** The page's sections. */\n  children: React.ReactNode;\n};\n\n/** A reading page: the table of contents in a sticky column on the left, the sections beside it (one column on a phone). */\nexport function TocLayout({ toc, children, className, ...props }: TocLayoutProps) {\n  return (\n    <div className={cn(\"kz-toc-layout\", className)} {...props}>\n      <aside className=\"kz-toc-aside\">{toc}</aside>\n      <div className=\"kz-toc-main\">{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AA4BnB,SACE,KADF;AAhBG,SAAS,IAAI,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAa;AACnE,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAS,MAAM,CAAC,GAAG,EAAE;AACvD,EAAM,gBAAU,MAAM;AACpB,QAAI,OAAO,yBAAyB,YAAa;AACjD,UAAM,UAAU,MAAM,IAAI,CAAC,MAAM,SAAS,eAAe,EAAE,EAAE,CAAC,EAAE,OAAO,CAAC,OAA0B,OAAO,IAAI;AAC7G,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,YAAY;AACX,cAAM,UAAU,QAAQ,OAAO,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,mBAAmB,MAAM,EAAE,mBAAmB,GAAG;AAC1H,YAAI,QAAQ,CAAC,EAAG,WAAU,QAAQ,CAAC,EAAE,OAAO,EAAE;AAAA,MAChD;AAAA,MACA,EAAE,YAAY,oBAAoB;AAAA,IACpC;AACA,YAAQ,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC;AACpC,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,CAAC;AACV,SACE,qBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAG,cAAY,OAAQ,GAAG,OAC9D;AAAA,wBAAC,OAAE,WAAU,YAAY,iBAAM;AAAA,IAC/B,oBAAC,QACE,gBAAM,IAAI,CAAC,MACV,oBAAC,QACC,8BAAC,OAAE,MAAM,IAAI,EAAE,EAAE,IAAI,gBAAc,WAAW,EAAE,KAAK,aAAa,QAAW,SAAS,MAAM,UAAU,EAAE,EAAE,GACvG,YAAE,OACL,KAHO,EAAE,EAIX,CACD,GACH;AAAA,KACF;AAEJ;AAUO,SAAS,UAAU,EAAE,KAAK,UAAU,WAAW,GAAG,MAAM,GAAmB;AAChF,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAClD;AAAA,wBAAC,WAAM,WAAU,gBAAgB,eAAI;AAAA,IACrC,oBAAC,SAAI,WAAU,eAAe,UAAS;AAAA,KACzC;AAEJ;","names":[]}

package/dist/video-player.js

@@ -17,7 +17,7 @@ import {
   PlayGlyph,
   RetryGlyph,
   VolumeGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/video-player/video-player.tsx
 import * as React from "react";