@dataimago/ui 0.1.0-alpha.35 → 0.1.0-alpha.42

package/README.md

@@ -21,6 +21,18 @@ Current public exports:
 - `<Logo>` — manifest-driven mark renderer backed by `@dataimago/brand`.
 - `<BrandAnimation>` — decorative brand animation with reduced-motion poster fallback.
 - `<NavbarLogo>` — animated navbar mark with reduced-motion poster fallback.
+- `<CaptionedVideo>` — a video with the video-foundry's caption treatment drawn over it (frosted panel, word tone, MathML), from a release's `captions.<lang>.json`; the WebVTT file stays as the hidden native track and the fallback text. Fullscreen takes the whole player so the captions come along. `<CaptionLayer>` draws one moment of it (pure presentation), and the caption functions (`pageAt`, `wordTone`, `captionLook`, …) match the foundry's burned-in treatment (the foundry imports them once this ships; #407). Needs `@dataimago/css` loaded for the palette, `--font-family-sans` and the self-hosted Noto Sans Math.
+
+```tsx
+<CaptionedVideo
+  src="/research/liwld/video/liwld-draft-16x9.mp4"
+  poster="/research/liwld/video/liwld-draft-16x9.poster.png"
+  captions="/research/liwld/video/liwld-draft-16x9.captions.en.json"
+  fallbackCaptions="/research/liwld/video/liwld-draft-16x9.captions.en.vtt"
+  chapters="/research/liwld/video/liwld-draft-16x9.chapters.en.vtt"
+  title="Growth without linkage"
+/>
+```
 
 ```tsx
 import { BrandAnimation, Button, Logo, NavbarLogo } from '@dataimago/ui';

package/dist/index.cjs

@@ -33,6 +33,10 @@ var index_exports = {};
 __export(index_exports, {
   BrandAnimation: () => BrandAnimation,
   Button: () => Button,
+  CAPTIONS_SCHEMA: () => CAPTIONS_SCHEMA,
+  CAPTIONS_STORAGE_KEY: () => CAPTIONS_STORAGE_KEY,
+  CaptionLayer: () => CaptionLayer,
+  CaptionedVideo: () => CaptionedVideo,
   CopulaLockup: () => CopulaLockup,
   Logo: () => Logo,
   LogoMonogram: () => LogoMonogram,
@@ -43,13 +47,20 @@ __export(index_exports, {
   THEME_STORAGE_KEY: () => THEME_STORAGE_KEY,
   ThemeScript: () => ThemeScript,
   ThemeToggle: () => ThemeToggle,
+  captionLook: () => captionLook,
+  isCaptionTrack: () => isCaptionTrack,
   nextThemePreference: () => nextThemePreference,
+  pageAt: () => pageAt,
+  paletteVar: () => paletteVar,
   readThemePreference: () => readThemePreference,
   resolveTheme: () => resolveTheme,
   setThemePreference: () => setThemePreference,
+  splitMath: () => splitMath,
   themeInitScript: () => themeInitScript,
+  toneColor: () => toneColor,
   useResolvedTheme: () => useResolvedTheme,
-  useThemePreference: () => useThemePreference
+  useThemePreference: () => useThemePreference,
+  wordTone: () => wordTone
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -661,10 +672,581 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function ThemeScript({ nonce }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
 }
+
+// src/video/CaptionedVideo.tsx
+var import_react2 = require("react");
+
+// src/video/CaptionLayer.tsx
+var import_react = require("react");
+
+// src/video/captions.ts
+var CAPTIONS_SCHEMA = "dataimago.video_captions.v1";
+function pageAt(pages, t) {
+  let lo = 0, hi = pages.length - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1, p = pages[mid];
+    if (t < p.start) hi = mid - 1;
+    else if (t >= p.end) lo = mid + 1;
+    else return p;
+  }
+  return void 0;
+}
+function wordTone(at, t, span) {
+  if (span <= 0) return t >= at ? 1 : 0;
+  return Math.min(1, Math.max(0, (t - at) / span));
+}
+function toneColor(tone, ink, inkMute) {
+  if (tone >= 1) return ink;
+  if (tone <= 0) return inkMute;
+  return `color-mix(in srgb, ${ink} ${Math.round(tone * 100)}%, ${inkMute})`;
+}
+function splitMath(text) {
+  const m = text.match(/^(.*?)\$([^$\s]+)\$(.*)$/);
+  return m ? { before: m[1], tex: m[2], after: m[3] } : null;
+}
+function paletteVar(token) {
+  return /^color\.palette\.[a-z]+\.\d{2,3}$/.test(token) ? `var(--${token.replace(/\./g, "-")})` : null;
+}
+function captionLook(treatment, o) {
+  const { size, scale, ink, paper } = o;
+  const halo = [2, 6, 14, 24].map((r) => `0 0 ${r * scale}px ${paper}`).join(", ");
+  const panel = treatment === "boxed" ? { background: ink, padding: "0.35em 0.7em", borderRadius: 4 * scale } : treatment === "frosted" ? {
+    background: `color-mix(in srgb, ${paper} 82%, transparent)`,
+    backdropFilter: `blur(${14 * scale}px)`,
+    WebkitBackdropFilter: `blur(${14 * scale}px)`,
+    padding: "0.5em 0.95em",
+    borderRadius: size * 0.6,
+    boxShadow: `0 ${size * 0.15}px ${size * 0.8}px color-mix(in srgb, ${ink} 10%, transparent)`,
+    border: `${Math.max(1, scale)}px solid color-mix(in srgb, ${ink} 8%, transparent)`
+  } : { padding: "0.2em 0.4em", textShadow: halo };
+  const text = {
+    fontFamily: o.family,
+    fontWeight: treatment === "boxed" ? 400 : o.weight,
+    fontSize: size,
+    lineHeight: o.lineHeight,
+    textAlign: "center",
+    letterSpacing: treatment === "boxed" ? 0 : "0.005em",
+    ...treatment === "boxed" ? { color: paper } : {}
+  };
+  return { panel, text, lift: treatment === "frosted" ? Math.round(size * 0.95) : 0, toned: treatment !== "boxed" };
+}
+
+// src/video/mathml.ts
+var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+var ELEMENTS = /* @__PURE__ */ new Set([
+  "math",
+  "mrow",
+  "mi",
+  "mn",
+  "mo",
+  "ms",
+  "mtext",
+  "mspace",
+  "msub",
+  "msup",
+  "msubsup",
+  "mfrac",
+  "msqrt",
+  "mroot",
+  "mover",
+  "munder",
+  "munderover",
+  "mtable",
+  "mtr",
+  "mtd",
+  "mpadded",
+  "mphantom",
+  "mstyle",
+  "menclose",
+  "semantics",
+  "annotation"
+]);
+var ATTRIBUTES = /* @__PURE__ */ new Set([
+  "display",
+  "mathvariant",
+  "stretchy",
+  "fence",
+  "separator",
+  "form",
+  "lspace",
+  "rspace",
+  "accent",
+  "accentunder",
+  "movablelimits",
+  "largeop",
+  "symmetric",
+  "minsize",
+  "maxsize",
+  "width",
+  "height",
+  "depth",
+  "voffset",
+  "linethickness",
+  "columnalign",
+  "rowalign",
+  "columnspacing",
+  "rowspacing",
+  "scriptlevel",
+  "displaystyle",
+  "notation",
+  "encoding"
+]);
+function rebuild(node, doc) {
+  if (node.nodeType === Node.TEXT_NODE) return doc.createTextNode(node.textContent ?? "");
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  const el = node;
+  const tag = el.localName;
+  if (el.namespaceURI !== MATHML_NS || !ELEMENTS.has(tag)) return null;
+  if (tag === "annotation") return null;
+  const out = doc.createElementNS(MATHML_NS, tag);
+  for (const a of Array.from(el.attributes)) {
+    if (!ATTRIBUTES.has(a.name)) continue;
+    out.setAttribute(a.name, a.value);
+  }
+  for (const child of Array.from(el.childNodes)) {
+    const c = rebuild(child, doc);
+    if (c) out.appendChild(c);
+  }
+  return out;
+}
+var cache = /* @__PURE__ */ new Map();
+function safeMathML(markup, doc = document) {
+  if (!cache.has(markup)) {
+    const parsed = new DOMParser().parseFromString(`<!doctype html><body>${markup}`, "text/html");
+    const root = parsed.body.firstElementChild;
+    const math = root && root.localName === "math" ? rebuild(root, doc) : null;
+    cache.set(markup, math);
+  }
+  const hit = cache.get(markup);
+  return hit ? hit.cloneNode(true) : null;
+}
+
+// src/video/CaptionLayer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var INK = "var(--color-palette-ink-900)";
+var INK_MUTE = "var(--color-palette-ink-500)";
+var PAPER = "var(--color-palette-stone-50)";
+var MathSpan = ({ markup, tex }) => {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    const host = ref.current;
+    if (!host) return;
+    const math = safeMathML(markup, host.ownerDocument);
+    if (!math) {
+      host.textContent = tex;
+      return;
+    }
+    math.style.fontFamily = "var(--font-family-math)";
+    math.style.fontStyle = "normal";
+    host.replaceChildren(math);
+  }, [markup, tex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ref, style: { whiteSpace: "nowrap" } });
+};
+var CaptionLayer = ({ track, time, width, reducedMotion = true, clearance = 0, page: given }) => {
+  const page = given === void 0 ? pageAt(track.pages, time) : given;
+  const scale = width / track.frame.width;
+  const size = track.frame.fontSize * scale;
+  const { safe } = track.frame;
+  const c = track.style.colors;
+  const ink = (c && paletteVar(c.ink)) ?? INK, inkMute = (c && paletteVar(c.inkMute)) ?? INK_MUTE, paper = (c && paletteVar(c.paper)) ?? PAPER;
+  const look = captionLook(track.style.treatment, {
+    size,
+    scale,
+    weight: track.style.weight,
+    lineHeight: track.style.lineHeight,
+    family: "var(--font-family-sans)",
+    ink,
+    paper
+  });
+  const toned = look.toned && !reducedMotion && given === void 0;
+  const lines = page ? page.lines.map((_, li) => page.words.filter((w) => w.line === li)) : [];
+  const plain = page ? page.lines.map((l) => l.replace(/\$([^$\s]+)\$/g, "$1")).join(" ") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-caption-text": "", lang: track.lang || void 0, style: { position: "absolute", width: 1, height: 1, margin: -1, padding: 0, overflow: "hidden", clip: "rect(0 0 0 0)", clipPath: "inset(50%)", whiteSpace: "nowrap", border: 0 }, children: plain }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }, children: page ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: {
+      position: "absolute",
+      left: safe.left * scale,
+      right: safe.right * scale,
+      bottom: Math.max(safe.bottom * scale + look.lift, clearance),
+      display: "flex",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { ...look.panel, ...look.text }, children: lines.map((ws, li) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: ws.map((w, wi) => {
+      const m = splitMath(w.text);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: look.toned ? { color: toned ? toneColor(wordTone(w.at, time, track.style.toneSeconds), ink, inkMute) : ink } : void 0, children: [
+        m && w.math ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          m.before,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MathSpan, { markup: w.math, tex: m.tex }),
+          m.after
+        ] }) : w.text,
+        wi < ws.length - 1 ? " " : ""
+      ] }, wi);
+    }) }, li)) }) }) : null })
+  ] });
+};
+
+// src/video/CaptionedVideo.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CAPTIONS_STORAGE_KEY = "dataimago:video-captions";
+var readCaptionsChoice = () => {
+  try {
+    return window.localStorage.getItem(CAPTIONS_STORAGE_KEY) !== "off";
+  } catch {
+    return true;
+  }
+};
+var writeCaptionsChoice = (on) => {
+  try {
+    window.localStorage.setItem(CAPTIONS_STORAGE_KEY, on ? "on" : "off");
+  } catch {
+  }
+};
+var num = (x) => typeof x === "number" && Number.isFinite(x);
+var strings = (x) => Array.isArray(x) && x.every((y) => typeof y === "string");
+function isCaptionTrack(x) {
+  const t = x;
+  if (!t || typeof t !== "object" || t.schema !== CAPTIONS_SCHEMA) return false;
+  const f = t.frame, st = t.style;
+  if (!f || !num(f.width) || f.width <= 0 || !num(f.height) || f.height <= 0 || !num(f.fontSize) || f.fontSize <= 0 || !f.safe || !["top", "right", "bottom", "left"].every((k) => num(f.safe[k]))) return false;
+  if (!st || !["editorial", "frosted", "boxed"].includes(st.treatment) || !num(st.weight) || !num(st.toneSeconds) || !num(st.lineHeight)) return false;
+  if (st.colors !== void 0 && !(st.colors && [st.colors.paper, st.colors.ink, st.colors.inkMute].every((x2) => typeof x2 === "string" && paletteVar(x2)))) return false;
+  return Array.isArray(t.pages) && t.pages.length > 0 && t.pages.every((p, i) => p && num(p.start) && num(p.end) && p.start < p.end && (i === 0 || p.start >= t.pages[i - 1].end) && strings(p.lines) && p.lines.length > 0 && Array.isArray(p.words) && p.words.length > 0 && p.words.every((w) => w && typeof w.text === "string" && num(w.at) && Number.isInteger(w.line) && w.line >= 0 && w.line < p.lines.length && (w.math === void 0 || typeof w.math === "string")));
+}
+function cueLines(cue) {
+  let text = "";
+  const walk = (n) => {
+    if (n.nodeType === Node.TEXT_NODE) text += n.textContent ?? "";
+    else if (n.localName === "br") text += "\n";
+    else n.childNodes.forEach(walk);
+  };
+  walk(cue.getCueAsHTML());
+  return text.split("\n").map((l) => l.trim()).filter(Boolean);
+}
+var CONTROLS_HOLD_MS = 2500;
+var CONTROLS_HEIGHT = 56;
+var usePrefersReducedMotion3 = () => {
+  const [reduced, setReduced] = (0, import_react2.useState)(true);
+  (0, import_react2.useEffect)(() => {
+    const q = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!q) {
+      setReduced(false);
+      return;
+    }
+    setReduced(q.matches);
+    const on = () => setReduced(q.matches);
+    q.addEventListener("change", on);
+    return () => q.removeEventListener("change", on);
+  }, []);
+  return reduced;
+};
+var buttonStyle = {
+  font: "inherit",
+  fontFamily: "var(--font-family-sans)",
+  fontWeight: 600,
+  fontSize: 13,
+  lineHeight: 1,
+  color: "var(--color-palette-paper-50)",
+  background: "color-mix(in srgb, var(--color-palette-ink-900) 72%, transparent)",
+  border: "1px solid color-mix(in srgb, var(--color-palette-paper-50) 35%, transparent)",
+  borderRadius: 4,
+  padding: "6px 9px",
+  cursor: "pointer",
+  pointerEvents: "auto",
+  // the house floor for touch targets ([[accessibility-beyond-compliance]]), as ThemeToggle
+  minWidth: 48,
+  minHeight: 48
+};
+var NATIVE_FULLSCREEN_RULE = [
+  "video[data-dataimago-captioned-video]::-webkit-media-controls-fullscreen-button { display: none; }",
+  "video[data-dataimago-captioned-video]::-webkit-media-controls-toggle-closed-captions-button { display: none; }"
+].join("\n");
+var nativeRuleAdded = false;
+function hideNativeFullscreenButton() {
+  if (nativeRuleAdded || typeof document === "undefined" || !("adoptedStyleSheets" in document)) return;
+  try {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(NATIVE_FULLSCREEN_RULE);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    nativeRuleAdded = true;
+  } catch {
+  }
+}
+var CaptionedVideo = ({
+  src,
+  poster,
+  captions,
+  fallbackCaptions,
+  chapters,
+  title,
+  lang = "en",
+  className,
+  style
+}) => {
+  const wrapRef = (0, import_react2.useRef)(null);
+  const stageRef = (0, import_react2.useRef)(null);
+  const videoRef = (0, import_react2.useRef)(null);
+  const trackRef = (0, import_react2.useRef)(null);
+  const chaptersRef = (0, import_react2.useRef)(null);
+  const [track, setTrack] = (0, import_react2.useState)(null);
+  const [failed, setFailed] = (0, import_react2.useState)(false);
+  const [cue, setCue] = (0, import_react2.useState)(null);
+  const [time, setTime] = (0, import_react2.useState)(0);
+  const [width, setWidth] = (0, import_react2.useState)(0);
+  const [on, setOn] = (0, import_react2.useState)(true);
+  const [full, setFull] = (0, import_react2.useState)(false);
+  const [paused, setPaused] = (0, import_react2.useState)(true);
+  const [active, setActive] = (0, import_react2.useState)(false);
+  const [focusWithin, setFocusWithin] = (0, import_react2.useState)(false);
+  const reducedMotion = usePrefersReducedMotion3();
+  (0, import_react2.useEffect)(() => setOn(readCaptionsChoice()), []);
+  (0, import_react2.useEffect)(() => {
+    let live = true;
+    setTrack(null);
+    setFailed(false);
+    fetch(captions, { credentials: "same-origin" }).then((r) => r.ok ? r.json() : Promise.reject(new Error(String(r.status)))).then((j) => {
+      if (!live) return;
+      if (isCaptionTrack(j)) setTrack(j);
+      else setFailed(true);
+    }).catch(() => {
+      if (live) setFailed(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, [captions]);
+  (0, import_react2.useEffect)(() => {
+    const el = trackRef.current, t = el?.track;
+    if (!el || !t) return;
+    const change = () => {
+      const c = t.activeCues?.[0];
+      const lines = c ? cueLines(c) : [];
+      setCue(c ? { start: c.startTime, end: c.endTime, lines, words: lines.flatMap((l, line) => l.split(" ").map((w) => ({ text: w, at: c.startTime, line }))) } : null);
+    };
+    t.addEventListener("cuechange", change);
+    el.addEventListener("load", change);
+    t.mode = nativeViewRef.current && onRef.current ? "showing" : "hidden";
+    change();
+    return () => {
+      t.removeEventListener("cuechange", change);
+      el.removeEventListener("load", change);
+    };
+  }, [fallbackCaptions]);
+  (0, import_react2.useEffect)(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    let raf = 0;
+    const tick = () => {
+      setTime(v.currentTime);
+      raf = requestAnimationFrame(tick);
+    };
+    const sync = () => {
+      setPaused(v.paused);
+      setTime(v.currentTime);
+      cancelAnimationFrame(raf);
+      if (!v.paused && !v.ended) raf = requestAnimationFrame(tick);
+    };
+    const events = ["play", "playing", "pause", "seeking", "seeked", "timeupdate", "ended", "emptied", "loadstart", "loadedmetadata"];
+    for (const e of events) v.addEventListener(e, sync);
+    sync();
+    return () => {
+      cancelAnimationFrame(raf);
+      for (const e of events) v.removeEventListener(e, sync);
+    };
+  }, [src]);
+  (0, import_react2.useEffect)(() => {
+    const el = stageRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const [nativeView, setNativeView] = (0, import_react2.useState)(false);
+  const nativeViewRef = (0, import_react2.useRef)(false), onRef = (0, import_react2.useRef)(true);
+  nativeViewRef.current = nativeView;
+  onRef.current = on;
+  (0, import_react2.useEffect)(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    let fs = false, pip = false;
+    const update = () => setNativeView(fs || pip);
+    const change = () => {
+      setFull(document.fullscreenElement === wrapRef.current);
+      fs = document.fullscreenElement === v;
+      update();
+    };
+    const flag = (set, x) => () => {
+      set(x);
+      update();
+    };
+    const handlers = [
+      [document, "fullscreenchange", change],
+      [v, "webkitbeginfullscreen", flag((x) => {
+        fs = x;
+      }, true)],
+      [v, "webkitendfullscreen", flag((x) => {
+        fs = x;
+      }, false)],
+      [v, "enterpictureinpicture", flag((x) => {
+        pip = x;
+      }, true)],
+      [v, "leavepictureinpicture", flag((x) => {
+        pip = x;
+      }, false)]
+    ];
+    for (const [t, e, h] of handlers) t.addEventListener(e, h);
+    return () => {
+      for (const [t, e, h] of handlers) t.removeEventListener(e, h);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    const want = nativeView && on ? "showing" : "hidden";
+    const hold = () => {
+      const t = trackRef.current?.track;
+      if (t && t.mode !== want) t.mode = want;
+    };
+    hold();
+    v.textTracks.addEventListener("change", hold);
+    trackRef.current?.addEventListener("load", hold);
+    const el = trackRef.current;
+    return () => {
+      v.textTracks.removeEventListener("change", hold);
+      el?.removeEventListener("load", hold);
+    };
+  }, [nativeView, on, fallbackCaptions]);
+  (0, import_react2.useEffect)(hideNativeFullscreenButton, []);
+  (0, import_react2.useEffect)(() => {
+    const t = chaptersRef.current?.track;
+    if (t) t.mode = "hidden";
+  }, [chapters]);
+  const holdRef = (0, import_react2.useRef)(0);
+  const wake = (0, import_react2.useCallback)(() => {
+    setActive(true);
+    window.clearTimeout(holdRef.current);
+    holdRef.current = window.setTimeout(() => setActive(false), CONTROLS_HOLD_MS);
+  }, []);
+  (0, import_react2.useEffect)(() => () => window.clearTimeout(holdRef.current), []);
+  const toggleCaptions = (0, import_react2.useCallback)(() => setOn((x) => {
+    writeCaptionsChoice(!x);
+    return !x;
+  }), []);
+  const toggleFullscreen = (0, import_react2.useCallback)(() => {
+    const wrap = wrapRef.current, v = videoRef.current;
+    if (document.fullscreenElement === wrap) {
+      void document.exitFullscreen();
+      return;
+    }
+    if (wrap?.requestFullscreen) {
+      wrap.requestFullscreen().catch(() => v?.webkitEnterFullscreen?.());
+      return;
+    }
+    v?.webkitEnterFullscreen?.();
+  }, []);
+  const onKey = (e) => {
+    const t = e.target;
+    if (e.altKey || e.ctrlKey || e.metaKey || t.isContentEditable || t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) return;
+    if (e.key === "c" || e.key === "C") {
+      e.preventDefault();
+      toggleCaptions();
+    }
+    if (e.key === "f" || e.key === "F") {
+      e.preventDefault();
+      toggleFullscreen();
+    }
+  };
+  const controlsUp = paused || active || focusWithin;
+  const showLayer = on && width > 0 && !nativeView && (track !== null || cue !== null || failed);
+  const layerTrack = track ?? { ...FALLBACK_FRAME, lang };
+  const frame = layerTrack.frame;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      ref: wrapRef,
+      className,
+      onPointerMove: wake,
+      onFocus: () => {
+        setFocusWithin(true);
+        wake();
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocusWithin(false);
+      },
+      onKeyDown: onKey,
+      style: {
+        position: "relative",
+        display: full ? "flex" : "block",
+        alignItems: "center",
+        justifyContent: "center",
+        background: full ? "var(--color-palette-ink-900)" : void 0,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref: stageRef, style: { position: "relative", width: full ? `min(100vw, calc(100vh * ${frame.width / frame.height}))` : "100%", aspectRatio: `${frame.width} / ${frame.height}` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "video",
+          {
+            ref: videoRef,
+            src,
+            poster,
+            controls: true,
+            controlsList: "nofullscreen",
+            "data-dataimago-captioned-video": "",
+            playsInline: true,
+            preload: "metadata",
+            "aria-label": title,
+            style: { display: "block", width: "100%", height: "100%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("track", { ref: trackRef, kind: "captions", src: fallbackCaptions, srcLang: lang, label: "Captions", default: true }),
+              chapters ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("track", { ref: chaptersRef, kind: "chapters", src: chapters, srcLang: lang, label: "Chapters" }) : null
+            ]
+          }
+        ),
+        showLayer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          CaptionLayer,
+          {
+            track: layerTrack,
+            time,
+            width,
+            reducedMotion,
+            clearance: controlsUp ? CONTROLS_HEIGHT : 0,
+            page: track ? void 0 : cue
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
+          position: "absolute",
+          top: 8,
+          right: 8,
+          display: "flex",
+          gap: 6,
+          pointerEvents: "none",
+          // hidden once faded: an invisible button must not take a click or a Tab stop
+          opacity: controlsUp ? 1 : 0,
+          visibility: controlsUp ? "visible" : "hidden",
+          transition: reducedMotion ? void 0 : controlsUp ? "opacity 200ms" : "opacity 200ms, visibility 0s linear 200ms"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", style: buttonStyle, "aria-pressed": on, "aria-label": "CC (captions)", title: "Captions (c)", onClick: toggleCaptions, onFocus: wake, children: "CC" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", style: buttonStyle, "aria-pressed": full, "aria-label": full ? "Exit full screen" : "Full screen", title: "Full screen (f)", onClick: toggleFullscreen, onFocus: wake, children: full ? "Exit" : "Full" })
+        ] })
+      ] })
+    }
+  );
+};
+var FALLBACK_FRAME = {
+  schema: CAPTIONS_SCHEMA,
+  work: "",
+  version: "",
+  lang: "en",
+  pages: [],
+  style: { profile: "dataimago-v1", treatment: "frosted", weight: 500, toneSeconds: 0, lineHeight: 1.28 },
+  frame: { width: 1920, height: 1080, fontSize: 44, safe: { top: 72, right: 96, bottom: 72, left: 96 } }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BrandAnimation,
   Button,
+  CAPTIONS_SCHEMA,
+  CAPTIONS_STORAGE_KEY,
+  CaptionLayer,
+  CaptionedVideo,
   CopulaLockup,
   Logo,
   LogoMonogram,
@@ -675,12 +1257,19 @@ function ThemeScript({ nonce }) {
   THEME_STORAGE_KEY,
   ThemeScript,
   ThemeToggle,
+  captionLook,
+  isCaptionTrack,
   nextThemePreference,
+  pageAt,
+  paletteVar,
   readThemePreference,
   resolveTheme,
   setThemePreference,
+  splitMath,
   themeInitScript,
+  toneColor,
   useResolvedTheme,
-  useThemePreference
+  useThemePreference,
+  wordTone
 });
 //# sourceMappingURL=index.cjs.map