@dataimago/ui 0.1.0-alpha.4 → 0.1.0-alpha.43

package/dist/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -30,10 +31,36 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 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,
   LogoMonogramBg: () => LogoMonogramBg,
-  LogoWordmark: () => LogoWordmark
+  LogoWordmark: () => LogoWordmark,
+  NavbarLogo: () => NavbarLogo,
+  THEME_ATTRIBUTE: () => THEME_ATTRIBUTE,
+  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,
+  wordTone: () => wordTone
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -249,11 +276,1068 @@ function LogoWordmark({
     }
   );
 }
+
+// src/brand/Logo.tsx
+var import_brand = require("@dataimago/brand");
+
+// src/brand/decorative.ts
+function silenceSvg(markup) {
+  return markup.replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, "").replace(/<svg\b([^>]*)>/i, (_m, attrs) => {
+    const kept = attrs.replace(/\srole="[^"]*"/i, "").replace(/\saria-label="[^"]*"/i, "").replace(/\saria-labelledby="[^"]*"/i, "");
+    return `<svg${kept} aria-hidden="true" focusable="false">`;
+  });
+}
+function isDecorative(ariaHidden) {
+  return ariaHidden === true || ariaHidden === "true";
+}
+
+// src/brand/Logo.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Logo({ name, variant = "PATH", width, style, ...rest }) {
+  const key = `${name}_${variant}`;
+  let markup = import_brand.svgs[key];
+  if (!markup) {
+    console.warn(`[@dataimago/ui] <Logo>: unknown mark "${key}".`);
+    return null;
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/brand/CopulaLockup.tsx
+var import_brand2 = require("@dataimago/brand");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BADGE = 16 / 32;
+var GAP = 19.7 / 32;
+var CROP = 10 / 32;
+var VISUALLY_HIDDEN = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1
+};
+var round = (n) => Math.round(n * 100) / 100;
+function pathEntry(id) {
+  return import_brand2.manifest.find((e) => e.id === id && e.variant === "PATH");
+}
+var plainLink = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { ...props, children });
+function CopulaLockup({
+  property,
+  propertyLabel,
+  propertyHref = "/",
+  dataimago = "shown",
+  brandHref = "https://dataimago.ai",
+  height = 32,
+  linkClassName,
+  badgeClassName,
+  renderLink = plainLink,
+  style,
+  ...rest
+}) {
+  const prop = pathEntry(property);
+  const brand = pathEntry("dataimago");
+  if (!prop || !brand) {
+    console.warn(`[@dataimago/ui] <CopulaLockup>: unknown mark "${property}".`);
+    return null;
+  }
+  const shown = dataimago === "shown";
+  const badge = BADGE * height;
+  const reach = GAP * height - badge / 2;
+  const crop = -CROP * height;
+  const width = (e) => round(e.w * height / e.h);
+  const trailing = (prop.w - prop.ink.x2) * height / prop.h;
+  const leading = brand.ink.x1 * height / brand.h;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "span",
+    {
+      style: { alignItems: "center", display: "inline-flex", flexWrap: "wrap", rowGap: 4, ...style },
+      ...rest,
+      children: [
+        renderLink({
+          href: propertyHref,
+          "aria-label": propertyLabel,
+          className: linkClassName,
+          // The crop only centres the cap-height band on the badge; alone (hidden),
+          // the mark keeps its full box so nothing next to it can overlap it.
+          style: {
+            display: "inline-flex",
+            marginBlock: shown ? crop : 0,
+            marginRight: shown ? round(reach - trailing) : 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Logo, { name: property, "aria-hidden": true, width: width(prop) })
+        }),
+        shown ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: badgeClassName, style: { display: "inline-flex" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Logo, { name: "is_badge", variant: "CUTOUT", "aria-hidden": true, width: round(badge) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: VISUALLY_HIDDEN, children: "is" })
+          ] }),
+          renderLink({
+            href: brandHref,
+            "aria-label": "dataimago",
+            className: linkClassName,
+            style: { display: "inline-flex", marginBlock: crop, marginLeft: round(reach - leading) },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Logo, { name: "dataimago", "aria-hidden": true, width: width(brand) })
+          })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/brand/BrandAnimation.tsx
+var React2 = __toESM(require("react"), 1);
+var import_brand3 = require("@dataimago/brand");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React2.useState(true);
+  React2.useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function BrandAnimation({
+  name,
+  width,
+  style,
+  ...rest
+}) {
+  const reduced = usePrefersReducedMotion();
+  const entry = import_brand3.animationManifest.find((a) => a.id === name);
+  let markup = import_brand3.animations[name];
+  if (!entry || !markup) {
+    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation "${name}".`);
+    return null;
+  }
+  if (reduced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Logo,
+      {
+        name: entry.poster.id,
+        variant: entry.poster.variant,
+        width,
+        style,
+        ...rest
+      }
+    );
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/brand/NavbarLogo.tsx
+var React3 = __toESM(require("react"), 1);
+var import_brand4 = require("@dataimago/brand");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function usePrefersReducedMotion2() {
+  const [reduced, setReduced] = React3.useState(true);
+  React3.useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function NavbarLogo({ name, width, style, ...rest }) {
+  const reduced = usePrefersReducedMotion2();
+  const entry = import_brand4.navbarManifest.find((n) => n.id === name);
+  let markup = import_brand4.navbarLogos[name];
+  if (!entry || !markup) {
+    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark "${name}".`);
+    return null;
+  }
+  if (reduced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Logo,
+      {
+        name: entry.poster.id,
+        variant: entry.poster.variant,
+        width,
+        style,
+        ...rest
+      }
+    );
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/theme/ThemeToggle.tsx
+var React5 = __toESM(require("react"), 1);
+
+// src/theme/theme.ts
+var React4 = __toESM(require("react"), 1);
+var THEME_STORAGE_KEY = "dataimago-theme";
+var THEME_ATTRIBUTE = "data-bs-theme";
+var CHANGE_EVENT = "dataimago:themechange";
+var themeInitScript = `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}catch(e){}})();`;
+function isPreference(value) {
+  return value === "system" || value === "light" || value === "dark";
+}
+function readThemePreference() {
+  if (typeof window === "undefined") return "system";
+  try {
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isPreference(stored) ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+function applyAttribute(preference) {
+  const root = document.documentElement;
+  if (preference === "system") root.removeAttribute(THEME_ATTRIBUTE);
+  else root.setAttribute(THEME_ATTRIBUTE, preference);
+}
+function setThemePreference(preference) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preference === "system") window.localStorage.removeItem(THEME_STORAGE_KEY);
+    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);
+  } catch {
+  }
+  applyAttribute(preference);
+  window.dispatchEvent(new Event(CHANGE_EVENT));
+}
+function resolveTheme() {
+  if (typeof document === "undefined") return "light";
+  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);
+  if (forced === "light" || forced === "dark") return forced;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function syncAttribute() {
+  applyAttribute(readThemePreference());
+}
+function subscribePreference(onChange) {
+  syncAttribute();
+  const onStorage = (e) => {
+    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;
+    applyAttribute(readThemePreference());
+    onChange();
+  };
+  window.addEventListener(CHANGE_EVENT, onChange);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    window.removeEventListener(CHANGE_EVENT, onChange);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+function subscribeResolved(onChange) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [THEME_ATTRIBUTE]
+  });
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", onChange);
+  window.addEventListener(CHANGE_EVENT, onChange);
+  syncAttribute();
+  return () => {
+    observer.disconnect();
+    media.removeEventListener("change", onChange);
+    window.removeEventListener(CHANGE_EVENT, onChange);
+  };
+}
+function useThemePreference() {
+  const preference = React4.useSyncExternalStore(
+    subscribePreference,
+    readThemePreference,
+    () => "system"
+  );
+  return [preference, setThemePreference];
+}
+function useResolvedTheme() {
+  return React4.useSyncExternalStore(subscribeResolved, resolveTheme, () => "light");
+}
+
+// src/theme/ThemeToggle.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_LABELS = {
+  name: "Theme",
+  system: "System",
+  light: "Light",
+  dark: "Dark"
+};
+function systemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function nextThemePreference(shown, system) {
+  const next = shown === "dark" ? "light" : "dark";
+  return next === system ? "system" : next;
+}
+var noSubscribe = () => () => {
+};
+function useHydrated() {
+  return React5.useSyncExternalStore(noSubscribe, () => true, () => false);
+}
+function Icon({ theme }) {
+  const common = {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    focusable: false
+  };
+  if (theme === "dark") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { ...common, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })
+  ] });
+}
+function ThemeToggle({ labels, className = "", style, ...rest }) {
+  const [preference, setPreference] = useThemePreference();
+  const resolved = useResolvedTheme();
+  const hydrated = useHydrated();
+  const shown = hydrated ? resolved : void 0;
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const label = shown ? `${text.name}: ${text[shown]}${preference === "system" ? ` (${text.system})` : ""}` : text.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      ...rest,
+      className: ["di-ui-theme-toggle", className].filter(Boolean).join(" "),
+      "aria-label": label,
+      title: label,
+      "data-theme-preference": preference,
+      "data-theme": shown,
+      style: {
+        alignItems: "center",
+        background: "var(--di-theme-toggle-bg, transparent)",
+        border: 0,
+        borderRadius: "var(--radius-md, 0.5rem)",
+        color: "var(--di-theme-toggle-fg, inherit)",
+        cursor: "pointer",
+        display: "inline-flex",
+        height: "48px",
+        justifyContent: "center",
+        padding: 0,
+        transition: "background-color 150ms ease",
+        width: "48px",
+        ...style
+      },
+      type: "button",
+      onClick: () => setPreference(nextThemePreference(resolveTheme(), systemTheme())),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { display: "inline-flex", visibility: shown ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { theme: shown ?? "light" }) })
+    }
+  );
+}
+
+// src/theme/ThemeScript.tsx
+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)(null);
+  (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 linkStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 48,
+  minHeight: 48,
+  padding: "0 8px",
+  color: "var(--color-palette-ink-900)",
+  textUnderlineOffset: "0.2em"
+};
+var videoOnlyFullscreen = () => typeof navigator !== "undefined" && /iPhone|iPod/.test(navigator.userAgent);
+var gateStyle = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "min(90%, 26rem)",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 10,
+  padding: "14px 18px",
+  textAlign: "center",
+  fontFamily: "var(--font-family-sans)",
+  fontSize: 15,
+  lineHeight: 1.4,
+  color: "var(--color-palette-ink-900)",
+  background: "var(--color-palette-stone-50)",
+  border: "1px solid var(--color-palette-ink-200)",
+  borderRadius: 6
+};
+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,
+  reducedSrc,
+  storyboard,
+  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 prefersReduced = usePrefersReducedMotion3();
+  const reducedMotion = prefersReduced !== false;
+  const [chosen, setChosen] = (0, import_react2.useState)(false);
+  const noticeId = (0, import_react2.useId)();
+  const gated = prefersReduced === true && !reducedSrc && !chosen;
+  const videoSrc = prefersReduced && reducedSrc ? reducedSrc : prefersReduced === null && reducedSrc ? void 0 : src;
+  (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);
+    };
+  }, [videoSrc]);
+  (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), []);
+  (0, import_react2.useEffect)(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.addEventListener("play", wake);
+    return () => v.removeEventListener("play", wake);
+  }, [wake]);
+  const toggleCaptions = (0, import_react2.useCallback)(() => setOn((x) => {
+    writeCaptionsChoice(!x);
+    return !x;
+  }), []);
+  const toggleFullscreen = (0, import_react2.useCallback)(() => {
+    const wrap = wrapRef.current;
+    const v = videoRef.current;
+    if (document.fullscreenElement === wrap) {
+      void document.exitFullscreen();
+      return;
+    }
+    if (v?.webkitDisplayingFullscreen) {
+      v.webkitExitFullscreen?.();
+      return;
+    }
+    if (!wrap?.requestFullscreen || !document.fullscreenEnabled || videoOnlyFullscreen()) {
+      v?.webkitEnterFullscreen?.();
+      return;
+    }
+    wrap.requestFullscreen().catch(() => 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,
+      onPointerDown: 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: videoSrc,
+            poster,
+            controls: !gated,
+            controlsList: "nofullscreen",
+            "data-dataimago-captioned-video": "",
+            playsInline: true,
+            preload: "metadata",
+            "aria-label": title,
+            "aria-hidden": gated || void 0,
+            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,
+        gated ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", "aria-labelledby": noticeId, style: gateStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: noticeId, style: { margin: 0 }, children: "This video is animated throughout." }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...buttonStyle, pointerEvents: "auto" },
+              onClick: () => {
+                setChosen(true);
+                void videoRef.current?.play().catch(() => {
+                });
+              },
+              children: "Play the video"
+            }
+          ),
+          storyboard ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: storyboard, style: linkStyle, children: "View the storyboard instead" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: {
+          position: "absolute",
+          top: 8,
+          right: 8,
+          display: gated ? "none" : "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,
   LogoMonogramBg,
-  LogoWordmark
+  LogoWordmark,
+  NavbarLogo,
+  THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY,
+  ThemeScript,
+  ThemeToggle,
+  captionLook,
+  isCaptionTrack,
+  nextThemePreference,
+  pageAt,
+  paletteVar,
+  readThemePreference,
+  resolveTheme,
+  setThemePreference,
+  splitMath,
+  themeInitScript,
+  toneColor,
+  useResolvedTheme,
+  useThemePreference,
+  wordTone
 });
 //# sourceMappingURL=index.cjs.map