@dataimago/ui 0.1.0-alpha.20 → 0.1.0-alpha.34

package/dist/index.cjs

@@ -33,6 +33,7 @@ var index_exports = {};
 __export(index_exports, {
   BrandAnimation: () => BrandAnimation,
   Button: () => Button,
+  CopulaLockup: () => CopulaLockup,
   Logo: () => Logo,
   LogoMonogram: () => LogoMonogram,
   LogoMonogramBg: () => LogoMonogramBg,
@@ -302,10 +303,94 @@ function Logo({ name, variant = "PATH", width, style, ...rest }) {
   );
 }
 
-// src/brand/BrandAnimation.tsx
-var React2 = __toESM(require("react"), 1);
+// 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,
+  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", { 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(() => {
@@ -324,14 +409,14 @@ function BrandAnimation({
   ...rest
 }) {
   const reduced = usePrefersReducedMotion();
-  const entry = import_brand2.animationManifest.find((a) => a.id === name);
-  let markup = import_brand2.animations[name];
+  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_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Logo,
       {
         name: entry.poster.id,
@@ -345,7 +430,7 @@ function BrandAnimation({
   if (width != null) {
     markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "span",
     {
       style: { display: "inline-flex", ...style },
@@ -357,8 +442,8 @@ function BrandAnimation({
 
 // src/brand/NavbarLogo.tsx
 var React3 = __toESM(require("react"), 1);
-var import_brand3 = require("@dataimago/brand");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_brand4 = require("@dataimago/brand");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function usePrefersReducedMotion2() {
   const [reduced, setReduced] = React3.useState(true);
   React3.useEffect(() => {
@@ -372,14 +457,14 @@ function usePrefersReducedMotion2() {
 }
 function NavbarLogo({ name, width, style, ...rest }) {
   const reduced = usePrefersReducedMotion2();
-  const entry = import_brand3.navbarManifest.find((n) => n.id === name);
-  let markup = import_brand3.navbarLogos[name];
+  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_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Logo,
       {
         name: entry.poster.id,
@@ -394,7 +479,7 @@ function NavbarLogo({ name, width, style, ...rest }) {
     markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
   }
   if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       style: { display: "inline-flex", ...style },
@@ -492,7 +577,7 @@ function useResolvedTheme() {
 }
 
 // src/theme/ThemeToggle.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_LABELS = {
   name: "Theme",
   system: "System",
@@ -525,11 +610,11 @@ function Icon({ theme }) {
     focusable: false
   };
   if (theme === "dark") {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime8.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.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_runtime8.jsxs)("svg", { ...common, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.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" })
+  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 }) {
@@ -539,7 +624,7 @@ function ThemeToggle({ labels, className = "", style, ...rest }) {
   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_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       ...rest,
@@ -565,20 +650,21 @@ function ThemeToggle({ labels, className = "", style, ...rest }) {
       },
       type: "button",
       onClick: () => setPreference(nextThemePreference(resolveTheme(), systemTheme())),
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { display: "inline-flex", visibility: shown ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { theme: shown ?? "light" }) })
+      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_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ThemeScript({ nonce }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BrandAnimation,
   Button,
+  CopulaLockup,
   Logo,
   LogoMonogram,
   LogoMonogramBg,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/decorative.ts","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx","../src/theme/ThemeToggle.tsx","../src/theme/theme.ts","../src/theme/ThemeScript.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n\n// Brand assets (outlined-path SVG components — no font dependency at render).\n// See packages/ui/src/brand/Logos.stories.tsx for visual reference.\nexport { LogoMonogram } from './brand/LogoMonogram.js';\nexport type { LogoMonogramProps } from './brand/LogoMonogram.js';\nexport { LogoMonogramBg } from './brand/LogoMonogramBg.js';\nexport type { LogoMonogramBgProps } from './brand/LogoMonogramBg.js';\nexport { LogoWordmark } from './brand/LogoWordmark.js';\nexport type { LogoWordmarkProps } from './brand/LogoWordmark.js';\n\n// Manifest-driven marks from @dataimago/brand (the logo-foundry output).\nexport { Logo } from './brand/Logo.js';\nexport type { LogoProps } from './brand/Logo.js';\n\n// Decorative brand animations from @dataimago/brand (the animation-foundry).\n// Client component: enforces the prefers-reduced-motion poster fallback.\nexport { BrandAnimation } from './brand/BrandAnimation.js';\nexport type { BrandAnimationProps } from './brand/BrandAnimation.js';\n\n// Animated navbar marks from @dataimago/brand (the animation-foundry navbar set).\n// Client component: mount/hover replay + prefers-reduced-motion poster fallback.\nexport { NavbarLogo } from './brand/NavbarLogo.js';\nexport type { NavbarLogoProps } from './brand/NavbarLogo.js';\n\n// Light/dark theme: the reader's choice on <html data-bs-theme>, which the house\n// tokens obey over the operating system. Client component + hooks.\nexport { ThemeToggle } from './theme/ThemeToggle.js';\nexport { nextThemePreference } from './theme/ThemeToggle.js';\nexport type { ThemeToggleProps, ThemeToggleLabels } from './theme/ThemeToggle.js';\nexport { ThemeScript } from './theme/ThemeScript.js';\nexport type { ThemeScriptProps } from './theme/ThemeScript.js';\nexport {\n  THEME_ATTRIBUTE,\n  THEME_STORAGE_KEY,\n  readThemePreference,\n  resolveTheme,\n  setThemePreference,\n  themeInitScript,\n  useResolvedTheme,\n  useThemePreference,\n} from './theme/theme.js';\nexport type { ResolvedTheme, ThemePreference } from './theme/theme.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'di-ui-button--primary',\n  secondary: 'di-ui-button--secondary',\n  ghost:     'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'di-ui-button--sm',\n  md: 'di-ui-button--md',\n  lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n  alignItems: 'center',\n  borderRadius: 'var(--radius-md, 0.5rem)',\n  borderStyle: 'solid',\n  borderWidth: '1px',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n  fontWeight: 'var(--font-weight-medium, 500)',\n  gap: 'var(--spacing-sm, 0.5rem)',\n  justifyContent: 'center',\n  textDecoration: 'none',\n  transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n  primary: {\n    backgroundColor: 'var(--color-interactive-primary)',\n    borderColor: 'var(--color-interactive-primary)',\n    color: 'var(--color-content-inverse)',\n  },\n  secondary: {\n    backgroundColor: 'var(--color-surface-elevated)',\n    borderColor: 'var(--color-border-moderate)',\n    color: 'var(--color-content-primary)',\n  },\n  ghost: {\n    backgroundColor: 'transparent',\n    borderColor: 'transparent',\n    color: 'var(--color-content-secondary)',\n  },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n  sm: {\n    fontSize: 'var(--font-size-small, 0.875rem)',\n    minHeight: '2rem',\n    padding: '0.375rem 0.75rem',\n  },\n  md: {\n    fontSize: 'var(--font-size-base, 1rem)',\n    minHeight: '2.5rem',\n    padding: '0.625rem 1rem',\n  },\n  lg: {\n    fontSize: 'var(--font-size-readable, 1.125rem)',\n    minHeight: '3rem',\n    padding: '0.75rem 1.25rem',\n  },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'di-ui-button',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        style={{\n          ...baseStyle,\n          ...variantStyles[variant],\n          ...sizeStyles[size],\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n *   <LogoMonogram size={48} aria-label=\"dataimago\" />\n *   <span style={{ color: 'var(--color-interactive-primary)' }}>\n *     <LogoMonogram size={32} />\n *   </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n  size?: number | string;\n  /**\n   * Accessible name announced by screen readers. Set to `undefined` (or pass\n   * `aria-hidden` directly) when the mark is purely decorative.\n   */\n  title?: string;\n}\n\nexport function LogoMonogram({\n  size = 24,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      fill=\"currentColor\"\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* 'i' (imago) glyph */}\n      <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n      {/* 'a' (data) glyph */}\n      <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n  size?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoMonogramBg({\n  size = 32,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramBgProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"40\"\n        ry=\"40\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* 'a' (data) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n      />\n      {/* 'i' (imago) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n  width?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoWordmark({\n  width = 240,\n  title = 'dataimago',\n  ...rest\n}: LogoWordmarkProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 150\"\n      width={width}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"5\"\n        ry=\"5\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* \"data\" — outlined glyphs, white fill */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n      />\n      {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n  name: LogoId;\n  /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n  variant?: LogoVariant;\n  /**\n   * Render width (px number or any CSS length). Height scales proportionally\n   * via the SVG viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n  const key = `${name}_${variant}` as LogoKey;\n  let markup = svgs[key];\n\n  if (!markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n    return null;\n  }\n\n  if (width != null) {\n    // Set width + drop height so the viewBox preserves the aspect ratio.\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // The SVG is generated, font-free, and carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","/**\n * Make an inlined brand SVG silent to assistive technology.\n *\n * The generated marks carry `role=\"img\"`, an `aria-label` and a `<title>` so\n * they can stand alone. Inside a link that is already named, consumers pass\n * `aria-hidden` to the wrapper. VoiceOver in Safari ignored that wrapper and\n * read the SVG's title AND the text of its interior `<style>` block (the CSS)\n * aloud. That was the first thing heard on every dissertation.ai page, found in\n * the maintainer's AT pass, 2026-10-04. So a decorative mark is silenced on the\n * `<svg>` itself: aria-hidden + focusable=false, no role/label/title.\n */\nexport function silenceSvg(markup: string): string {\n  return markup\n    .replace(/<title\\b[^>]*>[\\s\\S]*?<\\/title>/gi, '')\n    .replace(/<svg\\b([^>]*)>/i, (_m, attrs: string) => {\n      const kept = attrs\n        .replace(/\\srole=\"[^\"]*\"/i, '')\n        .replace(/\\saria-label=\"[^\"]*\"/i, '')\n        .replace(/\\saria-labelledby=\"[^\"]*\"/i, '');\n      return `<svg${kept} aria-hidden=\"true\" focusable=\"false\">`;\n    });\n}\n\n/** True when the caller marked the mark decorative (`aria-hidden` truthy). */\nexport function isDecorative(ariaHidden: unknown): boolean {\n  return ariaHidden === true || ariaHidden === 'true';\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  animations,\n  animationManifest,\n  type AnimationId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n  name: AnimationId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the animation's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n  name,\n  width,\n  style,\n  ...rest\n}: BrandAnimationProps) {\n  const reduced = usePrefersReducedMotion();\n  const entry = animationManifest.find((a) => a.id === name);\n  let markup = animations[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the brand mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  navbarLogos,\n  navbarManifest,\n  type NavbarLogoId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n  name: NavbarLogoId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n *   - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n *     start apart and the `i` slides onto the `a`. Plays once on mount; replays\n *     on pointer-enter via a remount (`replayKey`).\n *   - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n *     accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *   - `dream` (promoted dream marks, `tools/dream-foundry/drop.mjs promote`):\n *     a self-contained CSS hover gesture like liftwash; the poster is the mark's\n *     own static form (`dream_<slug>` / `DREAM`). Ink is `currentColor`.\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n  const reduced = usePrefersReducedMotion();\n\n  const entry = navbarManifest.find((n) => n.id === name);\n  let markup = navbarLogos[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the superimposed mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  // (The reduced-motion branch above goes through <Logo>, which does the same.)\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  // The SVG is fully self-driving: it plays the assemble once on mount (its\n  // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n  // CSS — no remount/replay logic here (remounting is what caused the teleport).\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // Self-contained, font-free SVG; carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","import * as React from 'react';\nimport {\n  resolveTheme,\n  useResolvedTheme,\n  useThemePreference,\n  type ResolvedTheme,\n  type ThemePreference,\n} from './theme.js';\n\nexport interface ThemeToggleLabels {\n  /** What the control sets, read before the theme in effect (\"Theme: Light\"). */\n  name: string;\n  /** Added when the theme follows the operating system (\"Theme: Light (System)\"). */\n  system: string;\n  light: string;\n  dark: string;\n}\n\nexport interface ThemeToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type'> {\n  /** Accessible and tooltip text; pass the property's own wording. */\n  labels?: Partial<ThemeToggleLabels>;\n}\n\nconst DEFAULT_LABELS: ThemeToggleLabels = {\n  name: 'Theme',\n  system: 'System',\n  light: 'Light',\n  dark: 'Dark',\n};\n\n/** The operating system's theme. */\nfunction systemTheme(): ResolvedTheme {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * The choice one click makes: the other theme, stored as \"system\" when that is\n * the operating system's own, so the page goes back to following it.\n */\nexport function nextThemePreference(shown: ResolvedTheme, system: ResolvedTheme): ThemePreference {\n  const next: ResolvedTheme = shown === 'dark' ? 'light' : 'dark';\n  return next === system ? 'system' : next;\n}\n\nconst noSubscribe = () => () => {};\n\n/**\n * False in the server markup and during hydration, true after. The theme in\n * effect is only known on the client (the server snapshot is always light), so\n * until then the button claims no theme: its name is the bare `name` and its\n * icon is hidden, keeping the 48px box.\n */\nfunction useHydrated(): boolean {\n  return React.useSyncExternalStore(noSubscribe, () => true, () => false);\n}\n\nfunction Icon({ theme }: { theme: ResolvedTheme }) {\n  const common = {\n    width: 20,\n    height: 20,\n    viewBox: '0 0 24 24',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 1.75,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    'aria-hidden': true,\n    focusable: false,\n  };\n  if (theme === 'dark') {\n    return (\n      <svg {...common}>\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <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\" />\n    </svg>\n  );\n}\n\n/**\n * Light/dark toggle for an app navbar: one button, and one click always flips\n * the theme on screen. The page follows the operating system until the first\n * click; a click that lands on the system's own theme goes back to following\n * it (no stored choice), and the other theme is stored and set as\n * `data-bs-theme` on the root, which the house tokens obey. The icon shows the\n * theme in effect: a sun in light, a moon in dark.\n *\n * A 48px target (the dataimago touch floor). The icon is `currentColor`.\n * Inline styles would beat a consumer's `:hover` rule, so the two colours a\n * navbar restyles read custom properties instead: set `--di-theme-toggle-fg`\n * and `--di-theme-toggle-bg` on `.di-ui-theme-toggle` (and its `:hover`).\n * Pair it with `<ThemeScript />` in `<head>` so a stored choice applies before\n * first paint.\n */\nexport function ThemeToggle({ labels, className = '', style, ...rest }: ThemeToggleProps) {\n  const [preference, setPreference] = useThemePreference();\n  const resolved = useResolvedTheme();\n  const hydrated = useHydrated();\n  const shown = hydrated ? resolved : undefined;\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const label = shown\n    ? `${text.name}: ${text[shown]}${preference === 'system' ? ` (${text.system})` : ''}`\n    : text.name;\n  return (\n    <button\n      {...rest}\n      className={['di-ui-theme-toggle', className].filter(Boolean).join(' ')}\n      aria-label={label}\n      title={label}\n      data-theme-preference={preference}\n      data-theme={shown}\n      style={{\n        alignItems: 'center',\n        background: 'var(--di-theme-toggle-bg, transparent)',\n        border: 0,\n        borderRadius: 'var(--radius-md, 0.5rem)',\n        color: 'var(--di-theme-toggle-fg, inherit)',\n        cursor: 'pointer',\n        display: 'inline-flex',\n        height: '48px',\n        justifyContent: 'center',\n        padding: 0,\n        transition: 'background-color 150ms ease',\n        width: '48px',\n        ...style,\n      }}\n      // After the spread, so the control never submits a form or loses its flip.\n      type=\"button\"\n      // Live reads, not the rendered snapshot: a click always flips what is on screen.\n      onClick={() => setPreference(nextThemePreference(resolveTheme(), systemTheme()))}\n    >\n      <span style={{ display: 'inline-flex', visibility: shown ? 'visible' : 'hidden' }}>\n        <Icon theme={shown ?? 'light'} />\n      </span>\n    </button>\n  );\n}\n","import * as React from 'react';\n\n/**\n * Light/dark theme preference for dataimago apps.\n *\n * The house tokens (`@dataimago/tokens`) follow the operating system through\n * `prefers-color-scheme` and yield to an explicit `data-bs-theme` on the root:\n * `light` or `dark` forces that theme, no attribute means \"follow the system\".\n * This module owns that attribute: it reads and stores the reader's choice,\n * applies it, and reports the theme actually in effect (for canvas and WebGL\n * surfaces that cannot read CSS variables).\n *\n * The choice is a per-browser convenience in localStorage. Every read and write\n * is guarded: in a private window or with storage blocked the page simply\n * follows the system.\n */\n\nexport type ThemePreference = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport const THEME_STORAGE_KEY = 'dataimago-theme';\nexport const THEME_ATTRIBUTE = 'data-bs-theme';\n\n/** Fired on `window` whenever `setThemePreference` changes the choice. */\nconst CHANGE_EVENT = 'dataimago:themechange';\n\n/**\n * Inline this in `<head>` before any stylesheet paints, so a stored choice is\n * on the root before first paint (no flash of the other theme). The server\n * markup cannot know the choice, so the consumer also puts\n * `suppressHydrationWarning` on `<html>`. From a React server layout, render\n * `<ThemeScript />` instead: this package is a client bundle, so a server\n * component cannot import the string itself.\n *\n * ```tsx\n * <html lang=\"en\" suppressHydrationWarning>\n *   <head><ThemeScript /></head>\n * ```\n */\nexport const themeInitScript =\n  `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});` +\n  `if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}` +\n  `catch(e){}})();`;\n\nfunction isPreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/** The stored choice, or `'system'` when there is none (or storage is unavailable). */\nexport function readThemePreference(): ThemePreference {\n  if (typeof window === 'undefined') return 'system';\n  try {\n    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);\n    return isPreference(stored) ? stored : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction applyAttribute(preference: ThemePreference): void {\n  const root = document.documentElement;\n  if (preference === 'system') root.removeAttribute(THEME_ATTRIBUTE);\n  else root.setAttribute(THEME_ATTRIBUTE, preference);\n}\n\n/** Store, apply and announce a choice. `'system'` clears the stored choice. */\nexport function setThemePreference(preference: ThemePreference): void {\n  if (typeof window === 'undefined') return;\n  try {\n    if (preference === 'system') window.localStorage.removeItem(THEME_STORAGE_KEY);\n    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);\n  } catch {\n    // Storage blocked: the choice still applies to this page view.\n  }\n  applyAttribute(preference);\n  window.dispatchEvent(new Event(CHANGE_EVENT));\n}\n\n/** The theme in effect: the root attribute when set, otherwise the system's. */\nexport function resolveTheme(): ResolvedTheme {\n  if (typeof document === 'undefined') return 'light';\n  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);\n  if (forced === 'light' || forced === 'dark') return forced;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * Put the stored choice on the root. `ThemeScript` does this before first\n * paint when it is server-rendered; this covers an app without it (or one that\n * inserts it on the client, where an inline script never runs). Idempotent.\n */\nfunction syncAttribute(): void {\n  applyAttribute(readThemePreference());\n}\n\nfunction subscribePreference(onChange: () => void): () => void {\n  syncAttribute();\n  // Another tab changed the choice: follow it here too.\n  const onStorage = (e: StorageEvent) => {\n    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;\n    applyAttribute(readThemePreference());\n    onChange();\n  };\n  window.addEventListener(CHANGE_EVENT, onChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    window.removeEventListener(CHANGE_EVENT, onChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\nfunction subscribeResolved(onChange: () => void): () => void {\n  // Watch first, then restore: the observer reports the restored attribute,\n  // so a canvas surface hears about a stored choice applied on mount.\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE],\n  });\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener('change', onChange);\n  window.addEventListener(CHANGE_EVENT, onChange);\n  syncAttribute();\n  return () => {\n    observer.disconnect();\n    media.removeEventListener('change', onChange);\n    window.removeEventListener(CHANGE_EVENT, onChange);\n  };\n}\n\n/**\n * The reader's choice and a setter. Server render and hydration see\n * `'system'`; the stored choice arrives right after.\n */\nexport function useThemePreference(): [ThemePreference, (p: ThemePreference) => void] {\n  const preference = React.useSyncExternalStore(\n    subscribePreference,\n    readThemePreference,\n    () => 'system' as const,\n  );\n  return [preference, setThemePreference];\n}\n\n/**\n * The theme in effect, for surfaces that cannot read CSS variables (canvas,\n * WebGL maps). Follows the toggle and, under \"system\", the operating system.\n * Server render and hydration see `'light'`.\n */\nexport function useResolvedTheme(): ResolvedTheme {\n  return React.useSyncExternalStore(subscribeResolved, resolveTheme, () => 'light' as const);\n}\n","import * as React from 'react';\nimport { themeInitScript } from './theme.js';\n\nexport interface ThemeScriptProps {\n  /** Content-Security-Policy nonce, when the app sets one. */\n  nonce?: string;\n}\n\n/**\n * Renders `themeInitScript` as an inline `<script>`, so a stored choice is on\n * the root before first paint. Use this from a server layout: this package is\n * a client bundle, so a server component cannot import the plain string, but\n * it can render this component. Put it in `<head>` and add\n * `suppressHydrationWarning` to `<html>` (the script changes its attributes\n * before React hydrates).\n */\nexport function ThemeScript({ nonce }: ThemeScriptProps) {\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeInitScript }} />;\n}\n"],"mappings":"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","names":["Button","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","React","import_brand","import_jsx_runtime","React","import_brand","import_jsx_runtime","usePrefersReducedMotion","React","React","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/decorative.ts","../src/brand/CopulaLockup.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx","../src/theme/ThemeToggle.tsx","../src/theme/theme.ts","../src/theme/ThemeScript.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n\n// Brand assets (outlined-path SVG components — no font dependency at render).\n// See packages/ui/src/brand/Logos.stories.tsx for visual reference.\nexport { LogoMonogram } from './brand/LogoMonogram.js';\nexport type { LogoMonogramProps } from './brand/LogoMonogram.js';\nexport { LogoMonogramBg } from './brand/LogoMonogramBg.js';\nexport type { LogoMonogramBgProps } from './brand/LogoMonogramBg.js';\nexport { LogoWordmark } from './brand/LogoWordmark.js';\nexport type { LogoWordmarkProps } from './brand/LogoWordmark.js';\n\n// Manifest-driven marks from @dataimago/brand (the logo-foundry output).\nexport { Logo } from './brand/Logo.js';\nexport type { LogoProps } from './brand/Logo.js';\n\n// The copula lockup, \"<property> is dataimago\" (or the property alone, in stealth).\nexport { CopulaLockup } from './brand/CopulaLockup.js';\nexport type { CopulaLockupProps, CopulaLinkProps } from './brand/CopulaLockup.js';\n\n// Decorative brand animations from @dataimago/brand (the animation-foundry).\n// Client component: enforces the prefers-reduced-motion poster fallback.\nexport { BrandAnimation } from './brand/BrandAnimation.js';\nexport type { BrandAnimationProps } from './brand/BrandAnimation.js';\n\n// Animated navbar marks from @dataimago/brand (the animation-foundry navbar set).\n// Client component: mount/hover replay + prefers-reduced-motion poster fallback.\nexport { NavbarLogo } from './brand/NavbarLogo.js';\nexport type { NavbarLogoProps } from './brand/NavbarLogo.js';\n\n// Light/dark theme: the reader's choice on <html data-bs-theme>, which the house\n// tokens obey over the operating system. Client component + hooks.\nexport { ThemeToggle } from './theme/ThemeToggle.js';\nexport { nextThemePreference } from './theme/ThemeToggle.js';\nexport type { ThemeToggleProps, ThemeToggleLabels } from './theme/ThemeToggle.js';\nexport { ThemeScript } from './theme/ThemeScript.js';\nexport type { ThemeScriptProps } from './theme/ThemeScript.js';\nexport {\n  THEME_ATTRIBUTE,\n  THEME_STORAGE_KEY,\n  readThemePreference,\n  resolveTheme,\n  setThemePreference,\n  themeInitScript,\n  useResolvedTheme,\n  useThemePreference,\n} from './theme/theme.js';\nexport type { ResolvedTheme, ThemePreference } from './theme/theme.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'di-ui-button--primary',\n  secondary: 'di-ui-button--secondary',\n  ghost:     'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'di-ui-button--sm',\n  md: 'di-ui-button--md',\n  lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n  alignItems: 'center',\n  borderRadius: 'var(--radius-md, 0.5rem)',\n  borderStyle: 'solid',\n  borderWidth: '1px',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n  fontWeight: 'var(--font-weight-medium, 500)',\n  gap: 'var(--spacing-sm, 0.5rem)',\n  justifyContent: 'center',\n  textDecoration: 'none',\n  transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n  primary: {\n    backgroundColor: 'var(--color-interactive-primary)',\n    borderColor: 'var(--color-interactive-primary)',\n    color: 'var(--color-content-inverse)',\n  },\n  secondary: {\n    backgroundColor: 'var(--color-surface-elevated)',\n    borderColor: 'var(--color-border-moderate)',\n    color: 'var(--color-content-primary)',\n  },\n  ghost: {\n    backgroundColor: 'transparent',\n    borderColor: 'transparent',\n    color: 'var(--color-content-secondary)',\n  },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n  sm: {\n    fontSize: 'var(--font-size-small, 0.875rem)',\n    minHeight: '2rem',\n    padding: '0.375rem 0.75rem',\n  },\n  md: {\n    fontSize: 'var(--font-size-base, 1rem)',\n    minHeight: '2.5rem',\n    padding: '0.625rem 1rem',\n  },\n  lg: {\n    fontSize: 'var(--font-size-readable, 1.125rem)',\n    minHeight: '3rem',\n    padding: '0.75rem 1.25rem',\n  },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'di-ui-button',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        style={{\n          ...baseStyle,\n          ...variantStyles[variant],\n          ...sizeStyles[size],\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n *   <LogoMonogram size={48} aria-label=\"dataimago\" />\n *   <span style={{ color: 'var(--color-interactive-primary)' }}>\n *     <LogoMonogram size={32} />\n *   </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n  size?: number | string;\n  /**\n   * Accessible name announced by screen readers. Set to `undefined` (or pass\n   * `aria-hidden` directly) when the mark is purely decorative.\n   */\n  title?: string;\n}\n\nexport function LogoMonogram({\n  size = 24,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      fill=\"currentColor\"\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* 'i' (imago) glyph */}\n      <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n      {/* 'a' (data) glyph */}\n      <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n  size?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoMonogramBg({\n  size = 32,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramBgProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"40\"\n        ry=\"40\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* 'a' (data) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n      />\n      {/* 'i' (imago) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n  width?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoWordmark({\n  width = 240,\n  title = 'dataimago',\n  ...rest\n}: LogoWordmarkProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 150\"\n      width={width}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"5\"\n        ry=\"5\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* \"data\" — outlined glyphs, white fill */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n      />\n      {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n  name: LogoId;\n  /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n  variant?: LogoVariant;\n  /**\n   * Render width (px number or any CSS length). Height scales proportionally\n   * via the SVG viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n  const key = `${name}_${variant}` as LogoKey;\n  let markup = svgs[key];\n\n  if (!markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n    return null;\n  }\n\n  if (width != null) {\n    // Set width + drop height so the viewBox preserves the aspect ratio.\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // The SVG is generated, font-free, and carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","/**\n * Make an inlined brand SVG silent to assistive technology.\n *\n * The generated marks carry `role=\"img\"`, an `aria-label` and a `<title>` so\n * they can stand alone. Inside a link that is already named, consumers pass\n * `aria-hidden` to the wrapper. VoiceOver in Safari ignored that wrapper and\n * read the SVG's title AND the text of its interior `<style>` block (the CSS)\n * aloud. That was the first thing heard on every dissertation.ai page, found in\n * the maintainer's AT pass, 2026-10-04. So a decorative mark is silenced on the\n * `<svg>` itself: aria-hidden + focusable=false, no role/label/title.\n */\nexport function silenceSvg(markup: string): string {\n  return markup\n    .replace(/<title\\b[^>]*>[\\s\\S]*?<\\/title>/gi, '')\n    .replace(/<svg\\b([^>]*)>/i, (_m, attrs: string) => {\n      const kept = attrs\n        .replace(/\\srole=\"[^\"]*\"/i, '')\n        .replace(/\\saria-label=\"[^\"]*\"/i, '')\n        .replace(/\\saria-labelledby=\"[^\"]*\"/i, '');\n      return `<svg${kept} aria-hidden=\"true\" focusable=\"false\">`;\n    });\n}\n\n/** True when the caller marked the mark decorative (`aria-hidden` truthy). */\nexport function isDecorative(ariaHidden: unknown): boolean {\n  return ariaHidden === true || ariaHidden === 'true';\n}\n","import * as React from 'react';\nimport { manifest, type LogoId } from '@dataimago/brand';\nimport { Logo } from './Logo';\n\n/** A link the lockup renders; pass one to route through a framework link (e.g. next/link). */\nexport interface CopulaLinkProps {\n  href: string;\n  'aria-label': string;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nexport interface CopulaLockupProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The property's wordmark id, e.g. `dissertation_ai`. Its PATH variant is drawn. */\n  property: LogoId;\n  /** Accessible name of the property link, e.g. `dissertation-ai`. */\n  propertyLabel: string;\n  /** Where the property mark links. Defaults to `/`. */\n  propertyHref?: string;\n  /**\n   * `shown` (default): \"<property> is dataimago\". `hidden`: the property mark\n   * alone, with no badge, no dataimago wordmark and no link to dataimago, for\n   * apps that keep dataimago out of view while it is in stealth.\n   */\n  dataimago?: 'shown' | 'hidden';\n  /** Where the dataimago wordmark links. Defaults to https://dataimago.ai. */\n  brandHref?: string;\n  /** Wordmark height in px. Defaults to 32; the badge and spacing scale with it. */\n  height?: number;\n  /** Class for each link (colour and hover); both links share one treatment. */\n  linkClassName?: string;\n  /** Render the links with a framework component. Defaults to a plain `<a>`. */\n  renderLink?: (props: CopulaLinkProps) => React.ReactNode;\n}\n\n// At the 32px reference size (the dissertation-ai footer, tuned by eye in\n// 2026-07 and checked with getBBox): the badge is 16px, each wordmark's ink edge\n// sits 19.7px from the badge centre, and each wordmark is cropped 10px top and\n// bottom so the cap-height band, not the canvas, is what centres on the badge.\nconst BADGE = 16 / 32;\nconst GAP = 19.7 / 32;\nconst CROP = 10 / 32;\n\nconst VISUALLY_HIDDEN: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n};\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nfunction pathEntry(id: LogoId) {\n  return manifest.find((e) => e.id === id && e.variant === 'PATH');\n}\n\nconst plainLink = ({ children, ...props }: CopulaLinkProps) => <a {...props}>{children}</a>;\n\n/**\n * The copula lockup, \"dissertation-ai **is** dataimago\": the property wordmark,\n * the `is_badge` disc and the dataimago wordmark, each wordmark its own link\n * (wiki/connections/is-copula-coupling.md). The badge is a mark, not a link: at\n * 16px it is below the 24px pointer-target floor (WCAG 2.5.8), so it is read as\n * \"is\" and the philosophy page stays reachable from the nav.\n *\n * Spacing is ink-symmetric about the badge centre, computed from each mark's\n * `ink` box in the @dataimago/brand manifest, so any property mark lines up\n * without hand-tuned margins. Geometry is inline style (no Tailwind), so a\n * consumer on plain CSS can use it too. Colour is `currentColor`: set `color`.\n */\nexport function CopulaLockup({\n  property,\n  propertyLabel,\n  propertyHref = '/',\n  dataimago = 'shown',\n  brandHref = 'https://dataimago.ai',\n  height = 32,\n  linkClassName,\n  renderLink = plainLink,\n  style,\n  ...rest\n}: CopulaLockupProps) {\n  const prop = pathEntry(property);\n  const brand = pathEntry('dataimago');\n  if (!prop || !brand) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <CopulaLockup>: unknown mark \"${property}\".`);\n    return null;\n  }\n\n  const shown = dataimago === 'shown';\n  const badge = BADGE * height;\n  const reach = GAP * height - badge / 2;\n  const crop = -CROP * height;\n  const width = (e: { w: number; h: number }) => round((e.w * height) / e.h);\n  // A wordmark's own whitespace between its canvas edge and its ink, in px.\n  const trailing = ((prop.w - prop.ink.x2) * height) / prop.h;\n  const leading = (brand.ink.x1 * height) / brand.h;\n\n  return (\n    <span\n      style={{ alignItems: 'center', display: 'inline-flex', flexWrap: 'wrap', rowGap: 4, ...style }}\n      {...rest}\n    >\n      {renderLink({\n        href: propertyHref,\n        'aria-label': propertyLabel,\n        className: linkClassName,\n        // The crop only centres the cap-height band on the badge; alone (hidden),\n        // the mark keeps its full box so nothing next to it can overlap it.\n        style: {\n          display: 'inline-flex',\n          marginBlock: shown ? crop : 0,\n          marginRight: shown ? round(reach - trailing) : 0,\n        },\n        children: <Logo name={property} aria-hidden width={width(prop)} />,\n      })}\n      {shown ? (\n        <>\n          <span style={{ display: 'inline-flex' }}>\n            <Logo name=\"is_badge\" variant=\"CUTOUT\" aria-hidden width={round(badge)} />\n            <span style={VISUALLY_HIDDEN}>is</span>\n          </span>\n          {renderLink({\n            href: brandHref,\n            'aria-label': 'dataimago',\n            className: linkClassName,\n            style: { display: 'inline-flex', marginBlock: crop, marginLeft: round(reach - leading) },\n            children: <Logo name=\"dataimago\" aria-hidden width={width(brand)} />,\n          })}\n        </>\n      ) : null}\n    </span>\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  animations,\n  animationManifest,\n  type AnimationId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n  name: AnimationId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the animation's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n  name,\n  width,\n  style,\n  ...rest\n}: BrandAnimationProps) {\n  const reduced = usePrefersReducedMotion();\n  const entry = animationManifest.find((a) => a.id === name);\n  let markup = animations[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the brand mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  navbarLogos,\n  navbarManifest,\n  type NavbarLogoId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n  name: NavbarLogoId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n *   - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n *     start apart and the `i` slides onto the `a`. Plays once on mount; replays\n *     on pointer-enter via a remount (`replayKey`).\n *   - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n *     accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *   - `dream` (promoted dream marks, `tools/dream-foundry/drop.mjs promote`):\n *     a self-contained CSS hover gesture like liftwash; the poster is the mark's\n *     own static form (`dream_<slug>` / `DREAM`). Ink is `currentColor`.\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n  const reduced = usePrefersReducedMotion();\n\n  const entry = navbarManifest.find((n) => n.id === name);\n  let markup = navbarLogos[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the superimposed mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  // (The reduced-motion branch above goes through <Logo>, which does the same.)\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  // The SVG is fully self-driving: it plays the assemble once on mount (its\n  // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n  // CSS — no remount/replay logic here (remounting is what caused the teleport).\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // Self-contained, font-free SVG; carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","import * as React from 'react';\nimport {\n  resolveTheme,\n  useResolvedTheme,\n  useThemePreference,\n  type ResolvedTheme,\n  type ThemePreference,\n} from './theme.js';\n\nexport interface ThemeToggleLabels {\n  /** What the control sets, read before the theme in effect (\"Theme: Light\"). */\n  name: string;\n  /** Added when the theme follows the operating system (\"Theme: Light (System)\"). */\n  system: string;\n  light: string;\n  dark: string;\n}\n\nexport interface ThemeToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type'> {\n  /** Accessible and tooltip text; pass the property's own wording. */\n  labels?: Partial<ThemeToggleLabels>;\n}\n\nconst DEFAULT_LABELS: ThemeToggleLabels = {\n  name: 'Theme',\n  system: 'System',\n  light: 'Light',\n  dark: 'Dark',\n};\n\n/** The operating system's theme. */\nfunction systemTheme(): ResolvedTheme {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * The choice one click makes: the other theme, stored as \"system\" when that is\n * the operating system's own, so the page goes back to following it.\n */\nexport function nextThemePreference(shown: ResolvedTheme, system: ResolvedTheme): ThemePreference {\n  const next: ResolvedTheme = shown === 'dark' ? 'light' : 'dark';\n  return next === system ? 'system' : next;\n}\n\nconst noSubscribe = () => () => {};\n\n/**\n * False in the server markup and during hydration, true after. The theme in\n * effect is only known on the client (the server snapshot is always light), so\n * until then the button claims no theme: its name is the bare `name` and its\n * icon is hidden, keeping the 48px box.\n */\nfunction useHydrated(): boolean {\n  return React.useSyncExternalStore(noSubscribe, () => true, () => false);\n}\n\nfunction Icon({ theme }: { theme: ResolvedTheme }) {\n  const common = {\n    width: 20,\n    height: 20,\n    viewBox: '0 0 24 24',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 1.75,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    'aria-hidden': true,\n    focusable: false,\n  };\n  if (theme === 'dark') {\n    return (\n      <svg {...common}>\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <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\" />\n    </svg>\n  );\n}\n\n/**\n * Light/dark toggle for an app navbar: one button, and one click always flips\n * the theme on screen. The page follows the operating system until the first\n * click; a click that lands on the system's own theme goes back to following\n * it (no stored choice), and the other theme is stored and set as\n * `data-bs-theme` on the root, which the house tokens obey. The icon shows the\n * theme in effect: a sun in light, a moon in dark.\n *\n * A 48px target (the dataimago touch floor). The icon is `currentColor`.\n * Inline styles would beat a consumer's `:hover` rule, so the two colours a\n * navbar restyles read custom properties instead: set `--di-theme-toggle-fg`\n * and `--di-theme-toggle-bg` on `.di-ui-theme-toggle` (and its `:hover`).\n * Pair it with `<ThemeScript />` in `<head>` so a stored choice applies before\n * first paint.\n */\nexport function ThemeToggle({ labels, className = '', style, ...rest }: ThemeToggleProps) {\n  const [preference, setPreference] = useThemePreference();\n  const resolved = useResolvedTheme();\n  const hydrated = useHydrated();\n  const shown = hydrated ? resolved : undefined;\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const label = shown\n    ? `${text.name}: ${text[shown]}${preference === 'system' ? ` (${text.system})` : ''}`\n    : text.name;\n  return (\n    <button\n      {...rest}\n      className={['di-ui-theme-toggle', className].filter(Boolean).join(' ')}\n      aria-label={label}\n      title={label}\n      data-theme-preference={preference}\n      data-theme={shown}\n      style={{\n        alignItems: 'center',\n        background: 'var(--di-theme-toggle-bg, transparent)',\n        border: 0,\n        borderRadius: 'var(--radius-md, 0.5rem)',\n        color: 'var(--di-theme-toggle-fg, inherit)',\n        cursor: 'pointer',\n        display: 'inline-flex',\n        height: '48px',\n        justifyContent: 'center',\n        padding: 0,\n        transition: 'background-color 150ms ease',\n        width: '48px',\n        ...style,\n      }}\n      // After the spread, so the control never submits a form or loses its flip.\n      type=\"button\"\n      // Live reads, not the rendered snapshot: a click always flips what is on screen.\n      onClick={() => setPreference(nextThemePreference(resolveTheme(), systemTheme()))}\n    >\n      <span style={{ display: 'inline-flex', visibility: shown ? 'visible' : 'hidden' }}>\n        <Icon theme={shown ?? 'light'} />\n      </span>\n    </button>\n  );\n}\n","import * as React from 'react';\n\n/**\n * Light/dark theme preference for dataimago apps.\n *\n * The house tokens (`@dataimago/tokens`) follow the operating system through\n * `prefers-color-scheme` and yield to an explicit `data-bs-theme` on the root:\n * `light` or `dark` forces that theme, no attribute means \"follow the system\".\n * This module owns that attribute: it reads and stores the reader's choice,\n * applies it, and reports the theme actually in effect (for canvas and WebGL\n * surfaces that cannot read CSS variables).\n *\n * The choice is a per-browser convenience in localStorage. Every read and write\n * is guarded: in a private window or with storage blocked the page simply\n * follows the system.\n */\n\nexport type ThemePreference = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport const THEME_STORAGE_KEY = 'dataimago-theme';\nexport const THEME_ATTRIBUTE = 'data-bs-theme';\n\n/** Fired on `window` whenever `setThemePreference` changes the choice. */\nconst CHANGE_EVENT = 'dataimago:themechange';\n\n/**\n * Inline this in `<head>` before any stylesheet paints, so a stored choice is\n * on the root before first paint (no flash of the other theme). The server\n * markup cannot know the choice, so the consumer also puts\n * `suppressHydrationWarning` on `<html>`. From a React server layout, render\n * `<ThemeScript />` instead: this package is a client bundle, so a server\n * component cannot import the string itself.\n *\n * ```tsx\n * <html lang=\"en\" suppressHydrationWarning>\n *   <head><ThemeScript /></head>\n * ```\n */\nexport const themeInitScript =\n  `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});` +\n  `if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}` +\n  `catch(e){}})();`;\n\nfunction isPreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/** The stored choice, or `'system'` when there is none (or storage is unavailable). */\nexport function readThemePreference(): ThemePreference {\n  if (typeof window === 'undefined') return 'system';\n  try {\n    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);\n    return isPreference(stored) ? stored : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction applyAttribute(preference: ThemePreference): void {\n  const root = document.documentElement;\n  if (preference === 'system') root.removeAttribute(THEME_ATTRIBUTE);\n  else root.setAttribute(THEME_ATTRIBUTE, preference);\n}\n\n/** Store, apply and announce a choice. `'system'` clears the stored choice. */\nexport function setThemePreference(preference: ThemePreference): void {\n  if (typeof window === 'undefined') return;\n  try {\n    if (preference === 'system') window.localStorage.removeItem(THEME_STORAGE_KEY);\n    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);\n  } catch {\n    // Storage blocked: the choice still applies to this page view.\n  }\n  applyAttribute(preference);\n  window.dispatchEvent(new Event(CHANGE_EVENT));\n}\n\n/** The theme in effect: the root attribute when set, otherwise the system's. */\nexport function resolveTheme(): ResolvedTheme {\n  if (typeof document === 'undefined') return 'light';\n  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);\n  if (forced === 'light' || forced === 'dark') return forced;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * Put the stored choice on the root. `ThemeScript` does this before first\n * paint when it is server-rendered; this covers an app without it (or one that\n * inserts it on the client, where an inline script never runs). Idempotent.\n */\nfunction syncAttribute(): void {\n  applyAttribute(readThemePreference());\n}\n\nfunction subscribePreference(onChange: () => void): () => void {\n  syncAttribute();\n  // Another tab changed the choice: follow it here too.\n  const onStorage = (e: StorageEvent) => {\n    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;\n    applyAttribute(readThemePreference());\n    onChange();\n  };\n  window.addEventListener(CHANGE_EVENT, onChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    window.removeEventListener(CHANGE_EVENT, onChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\nfunction subscribeResolved(onChange: () => void): () => void {\n  // Watch first, then restore: the observer reports the restored attribute,\n  // so a canvas surface hears about a stored choice applied on mount.\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE],\n  });\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener('change', onChange);\n  window.addEventListener(CHANGE_EVENT, onChange);\n  syncAttribute();\n  return () => {\n    observer.disconnect();\n    media.removeEventListener('change', onChange);\n    window.removeEventListener(CHANGE_EVENT, onChange);\n  };\n}\n\n/**\n * The reader's choice and a setter. Server render and hydration see\n * `'system'`; the stored choice arrives right after.\n */\nexport function useThemePreference(): [ThemePreference, (p: ThemePreference) => void] {\n  const preference = React.useSyncExternalStore(\n    subscribePreference,\n    readThemePreference,\n    () => 'system' as const,\n  );\n  return [preference, setThemePreference];\n}\n\n/**\n * The theme in effect, for surfaces that cannot read CSS variables (canvas,\n * WebGL maps). Follows the toggle and, under \"system\", the operating system.\n * Server render and hydration see `'light'`.\n */\nexport function useResolvedTheme(): ResolvedTheme {\n  return React.useSyncExternalStore(subscribeResolved, resolveTheme, () => 'light' as const);\n}\n","import * as React from 'react';\nimport { themeInitScript } from './theme.js';\n\nexport interface ThemeScriptProps {\n  /** Content-Security-Policy nonce, when the app sets one. */\n  nonce?: string;\n}\n\n/**\n * Renders `themeInitScript` as an inline `<script>`, so a stored choice is on\n * the root before first paint. Use this from a server layout: this package is\n * a client bundle, so a server component cannot import the plain string, but\n * it can render this component. Put it in `<head>` and add\n * `suppressHydrationWarning` to `<html>` (the script changes its attributes\n * before React hydrates).\n */\nexport function ThemeScript({ nonce }: ThemeScriptProps) {\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeInitScript }} />;\n}\n"],"mappings":"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","names":["Button","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_brand","import_jsx_runtime","React","import_brand","import_jsx_runtime","React","import_brand","import_jsx_runtime","usePrefersReducedMotion","React","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -147,6 +147,50 @@ interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
  */
 declare function Logo({ name, variant, width, style, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | null;
 
+/** A link the lockup renders; pass one to route through a framework link (e.g. next/link). */
+interface CopulaLinkProps {
+    href: string;
+    'aria-label': string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+interface CopulaLockupProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** The property's wordmark id, e.g. `dissertation_ai`. Its PATH variant is drawn. */
+    property: LogoId;
+    /** Accessible name of the property link, e.g. `dissertation-ai`. */
+    propertyLabel: string;
+    /** Where the property mark links. Defaults to `/`. */
+    propertyHref?: string;
+    /**
+     * `shown` (default): "<property> is dataimago". `hidden`: the property mark
+     * alone, with no badge, no dataimago wordmark and no link to dataimago, for
+     * apps that keep dataimago out of view while it is in stealth.
+     */
+    dataimago?: 'shown' | 'hidden';
+    /** Where the dataimago wordmark links. Defaults to https://dataimago.ai. */
+    brandHref?: string;
+    /** Wordmark height in px. Defaults to 32; the badge and spacing scale with it. */
+    height?: number;
+    /** Class for each link (colour and hover); both links share one treatment. */
+    linkClassName?: string;
+    /** Render the links with a framework component. Defaults to a plain `<a>`. */
+    renderLink?: (props: CopulaLinkProps) => React.ReactNode;
+}
+/**
+ * The copula lockup, "dissertation-ai **is** dataimago": the property wordmark,
+ * the `is_badge` disc and the dataimago wordmark, each wordmark its own link
+ * (wiki/connections/is-copula-coupling.md). The badge is a mark, not a link: at
+ * 16px it is below the 24px pointer-target floor (WCAG 2.5.8), so it is read as
+ * "is" and the philosophy page stays reachable from the nav.
+ *
+ * Spacing is ink-symmetric about the badge centre, computed from each mark's
+ * `ink` box in the @dataimago/brand manifest, so any property mark lines up
+ * without hand-tuned margins. Geometry is inline style (no Tailwind), so a
+ * consumer on plain CSS can use it too. Colour is `currentColor`: set `color`.
+ */
+declare function CopulaLockup({ property, propertyLabel, propertyHref, dataimago, brandHref, height, linkClassName, renderLink, style, ...rest }: CopulaLockupProps): react_jsx_runtime.JSX.Element | null;
+
 interface BrandAnimationProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */
     name: AnimationId;
@@ -299,4 +343,4 @@ interface ThemeScriptProps {
  */
 declare function ThemeScript({ nonce }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
 
-export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps, type ResolvedTheme, THEME_ATTRIBUTE, THEME_STORAGE_KEY, type ThemePreference, ThemeScript, type ThemeScriptProps, ThemeToggle, type ThemeToggleLabels, type ThemeToggleProps, nextThemePreference, readThemePreference, resolveTheme, setThemePreference, themeInitScript, useResolvedTheme, useThemePreference };
+export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CopulaLinkProps, CopulaLockup, type CopulaLockupProps, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps, type ResolvedTheme, THEME_ATTRIBUTE, THEME_STORAGE_KEY, type ThemePreference, ThemeScript, type ThemeScriptProps, ThemeToggle, type ThemeToggleLabels, type ThemeToggleProps, nextThemePreference, readThemePreference, resolveTheme, setThemePreference, themeInitScript, useResolvedTheme, useThemePreference };

package/dist/index.d.ts

@@ -147,6 +147,50 @@ interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
  */
 declare function Logo({ name, variant, width, style, ...rest }: LogoProps): react_jsx_runtime.JSX.Element | null;
 
+/** A link the lockup renders; pass one to route through a framework link (e.g. next/link). */
+interface CopulaLinkProps {
+    href: string;
+    'aria-label': string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+interface CopulaLockupProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** The property's wordmark id, e.g. `dissertation_ai`. Its PATH variant is drawn. */
+    property: LogoId;
+    /** Accessible name of the property link, e.g. `dissertation-ai`. */
+    propertyLabel: string;
+    /** Where the property mark links. Defaults to `/`. */
+    propertyHref?: string;
+    /**
+     * `shown` (default): "<property> is dataimago". `hidden`: the property mark
+     * alone, with no badge, no dataimago wordmark and no link to dataimago, for
+     * apps that keep dataimago out of view while it is in stealth.
+     */
+    dataimago?: 'shown' | 'hidden';
+    /** Where the dataimago wordmark links. Defaults to https://dataimago.ai. */
+    brandHref?: string;
+    /** Wordmark height in px. Defaults to 32; the badge and spacing scale with it. */
+    height?: number;
+    /** Class for each link (colour and hover); both links share one treatment. */
+    linkClassName?: string;
+    /** Render the links with a framework component. Defaults to a plain `<a>`. */
+    renderLink?: (props: CopulaLinkProps) => React.ReactNode;
+}
+/**
+ * The copula lockup, "dissertation-ai **is** dataimago": the property wordmark,
+ * the `is_badge` disc and the dataimago wordmark, each wordmark its own link
+ * (wiki/connections/is-copula-coupling.md). The badge is a mark, not a link: at
+ * 16px it is below the 24px pointer-target floor (WCAG 2.5.8), so it is read as
+ * "is" and the philosophy page stays reachable from the nav.
+ *
+ * Spacing is ink-symmetric about the badge centre, computed from each mark's
+ * `ink` box in the @dataimago/brand manifest, so any property mark lines up
+ * without hand-tuned margins. Geometry is inline style (no Tailwind), so a
+ * consumer on plain CSS can use it too. Colour is `currentColor`: set `color`.
+ */
+declare function CopulaLockup({ property, propertyLabel, propertyHref, dataimago, brandHref, height, linkClassName, renderLink, style, ...rest }: CopulaLockupProps): react_jsx_runtime.JSX.Element | null;
+
 interface BrandAnimationProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */
     name: AnimationId;
@@ -299,4 +343,4 @@ interface ThemeScriptProps {
  */
 declare function ThemeScript({ nonce }: ThemeScriptProps): react_jsx_runtime.JSX.Element;
 
-export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps, type ResolvedTheme, THEME_ATTRIBUTE, THEME_STORAGE_KEY, type ThemePreference, ThemeScript, type ThemeScriptProps, ThemeToggle, type ThemeToggleLabels, type ThemeToggleProps, nextThemePreference, readThemePreference, resolveTheme, setThemePreference, themeInitScript, useResolvedTheme, useThemePreference };
+export { BrandAnimation, type BrandAnimationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CopulaLinkProps, CopulaLockup, type CopulaLockupProps, Logo, LogoMonogram, LogoMonogramBg, type LogoMonogramBgProps, type LogoMonogramProps, type LogoProps, LogoWordmark, type LogoWordmarkProps, NavbarLogo, type NavbarLogoProps, type ResolvedTheme, THEME_ATTRIBUTE, THEME_STORAGE_KEY, type ThemePreference, ThemeScript, type ThemeScriptProps, ThemeToggle, type ThemeToggleLabels, type ThemeToggleProps, nextThemePreference, readThemePreference, resolveTheme, setThemePreference, themeInitScript, useResolvedTheme, useThemePreference };

package/dist/index.js

@@ -250,13 +250,97 @@ function Logo({ name, variant = "PATH", width, style, ...rest }) {
   );
 }
 
+// src/brand/CopulaLockup.tsx
+import { manifest } from "@dataimago/brand";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "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 manifest.find((e) => e.id === id && e.variant === "PATH");
+}
+var plainLink = ({ children, ...props }) => /* @__PURE__ */ jsx6("a", { ...props, children });
+function CopulaLockup({
+  property,
+  propertyLabel,
+  propertyHref = "/",
+  dataimago = "shown",
+  brandHref = "https://dataimago.ai",
+  height = 32,
+  linkClassName,
+  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__ */ jsxs4(
+    "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__ */ jsx6(Logo, { name: property, "aria-hidden": true, width: width(prop) })
+        }),
+        shown ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsxs4("span", { style: { display: "inline-flex" }, children: [
+            /* @__PURE__ */ jsx6(Logo, { name: "is_badge", variant: "CUTOUT", "aria-hidden": true, width: round(badge) }),
+            /* @__PURE__ */ jsx6("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__ */ jsx6(Logo, { name: "dataimago", "aria-hidden": true, width: width(brand) })
+          })
+        ] }) : null
+      ]
+    }
+  );
+}
+
 // src/brand/BrandAnimation.tsx
 import * as React2 from "react";
 import {
   animations,
   animationManifest
 } from "@dataimago/brand";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function usePrefersReducedMotion() {
   const [reduced, setReduced] = React2.useState(true);
   React2.useEffect(() => {
@@ -282,7 +366,7 @@ function BrandAnimation({
     return null;
   }
   if (reduced) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       Logo,
       {
         name: entry.poster.id,
@@ -296,7 +380,7 @@ function BrandAnimation({
   if (width != null) {
     markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "span",
     {
       style: { display: "inline-flex", ...style },
@@ -312,7 +396,7 @@ import {
   navbarLogos,
   navbarManifest
 } from "@dataimago/brand";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function usePrefersReducedMotion2() {
   const [reduced, setReduced] = React3.useState(true);
   React3.useEffect(() => {
@@ -333,7 +417,7 @@ function NavbarLogo({ name, width, style, ...rest }) {
     return null;
   }
   if (reduced) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Logo,
       {
         name: entry.poster.id,
@@ -348,7 +432,7 @@ function NavbarLogo({ name, width, style, ...rest }) {
     markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
   }
   if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       style: { display: "inline-flex", ...style },
@@ -446,7 +530,7 @@ function useResolvedTheme() {
 }
 
 // src/theme/ThemeToggle.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   name: "Theme",
   system: "System",
@@ -479,11 +563,11 @@ function Icon({ theme }) {
     focusable: false
   };
   if (theme === "dark") {
-    return /* @__PURE__ */ jsx8("svg", { ...common, children: /* @__PURE__ */ jsx8("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+    return /* @__PURE__ */ jsx9("svg", { ...common, children: /* @__PURE__ */ jsx9("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
   }
-  return /* @__PURE__ */ jsxs4("svg", { ...common, children: [
-    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ jsx8("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" })
+  return /* @__PURE__ */ jsxs5("svg", { ...common, children: [
+    /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx9("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 }) {
@@ -493,7 +577,7 @@ function ThemeToggle({ labels, className = "", style, ...rest }) {
   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__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       ...rest,
@@ -519,19 +603,20 @@ function ThemeToggle({ labels, className = "", style, ...rest }) {
       },
       type: "button",
       onClick: () => setPreference(nextThemePreference(resolveTheme(), systemTheme())),
-      children: /* @__PURE__ */ jsx8("span", { style: { display: "inline-flex", visibility: shown ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx8(Icon, { theme: shown ?? "light" }) })
+      children: /* @__PURE__ */ jsx9("span", { style: { display: "inline-flex", visibility: shown ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx9(Icon, { theme: shown ?? "light" }) })
     }
   );
 }
 
 // src/theme/ThemeScript.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function ThemeScript({ nonce }) {
-  return /* @__PURE__ */ jsx9("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
+  return /* @__PURE__ */ jsx10("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
 }
 export {
   BrandAnimation,
   Button,
+  CopulaLockup,
   Logo,
   LogoMonogram,
   LogoMonogramBg,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/decorative.ts","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx","../src/theme/ThemeToggle.tsx","../src/theme/theme.ts","../src/theme/ThemeScript.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'di-ui-button--primary',\n  secondary: 'di-ui-button--secondary',\n  ghost:     'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'di-ui-button--sm',\n  md: 'di-ui-button--md',\n  lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n  alignItems: 'center',\n  borderRadius: 'var(--radius-md, 0.5rem)',\n  borderStyle: 'solid',\n  borderWidth: '1px',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n  fontWeight: 'var(--font-weight-medium, 500)',\n  gap: 'var(--spacing-sm, 0.5rem)',\n  justifyContent: 'center',\n  textDecoration: 'none',\n  transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n  primary: {\n    backgroundColor: 'var(--color-interactive-primary)',\n    borderColor: 'var(--color-interactive-primary)',\n    color: 'var(--color-content-inverse)',\n  },\n  secondary: {\n    backgroundColor: 'var(--color-surface-elevated)',\n    borderColor: 'var(--color-border-moderate)',\n    color: 'var(--color-content-primary)',\n  },\n  ghost: {\n    backgroundColor: 'transparent',\n    borderColor: 'transparent',\n    color: 'var(--color-content-secondary)',\n  },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n  sm: {\n    fontSize: 'var(--font-size-small, 0.875rem)',\n    minHeight: '2rem',\n    padding: '0.375rem 0.75rem',\n  },\n  md: {\n    fontSize: 'var(--font-size-base, 1rem)',\n    minHeight: '2.5rem',\n    padding: '0.625rem 1rem',\n  },\n  lg: {\n    fontSize: 'var(--font-size-readable, 1.125rem)',\n    minHeight: '3rem',\n    padding: '0.75rem 1.25rem',\n  },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'di-ui-button',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        style={{\n          ...baseStyle,\n          ...variantStyles[variant],\n          ...sizeStyles[size],\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n *   <LogoMonogram size={48} aria-label=\"dataimago\" />\n *   <span style={{ color: 'var(--color-interactive-primary)' }}>\n *     <LogoMonogram size={32} />\n *   </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n  size?: number | string;\n  /**\n   * Accessible name announced by screen readers. Set to `undefined` (or pass\n   * `aria-hidden` directly) when the mark is purely decorative.\n   */\n  title?: string;\n}\n\nexport function LogoMonogram({\n  size = 24,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      fill=\"currentColor\"\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* 'i' (imago) glyph */}\n      <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n      {/* 'a' (data) glyph */}\n      <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n  size?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoMonogramBg({\n  size = 32,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramBgProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"40\"\n        ry=\"40\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* 'a' (data) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n      />\n      {/* 'i' (imago) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n  width?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoWordmark({\n  width = 240,\n  title = 'dataimago',\n  ...rest\n}: LogoWordmarkProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 150\"\n      width={width}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"5\"\n        ry=\"5\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* \"data\" — outlined glyphs, white fill */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n      />\n      {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n  name: LogoId;\n  /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n  variant?: LogoVariant;\n  /**\n   * Render width (px number or any CSS length). Height scales proportionally\n   * via the SVG viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n  const key = `${name}_${variant}` as LogoKey;\n  let markup = svgs[key];\n\n  if (!markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n    return null;\n  }\n\n  if (width != null) {\n    // Set width + drop height so the viewBox preserves the aspect ratio.\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // The SVG is generated, font-free, and carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","/**\n * Make an inlined brand SVG silent to assistive technology.\n *\n * The generated marks carry `role=\"img\"`, an `aria-label` and a `<title>` so\n * they can stand alone. Inside a link that is already named, consumers pass\n * `aria-hidden` to the wrapper. VoiceOver in Safari ignored that wrapper and\n * read the SVG's title AND the text of its interior `<style>` block (the CSS)\n * aloud. That was the first thing heard on every dissertation.ai page, found in\n * the maintainer's AT pass, 2026-10-04. So a decorative mark is silenced on the\n * `<svg>` itself: aria-hidden + focusable=false, no role/label/title.\n */\nexport function silenceSvg(markup: string): string {\n  return markup\n    .replace(/<title\\b[^>]*>[\\s\\S]*?<\\/title>/gi, '')\n    .replace(/<svg\\b([^>]*)>/i, (_m, attrs: string) => {\n      const kept = attrs\n        .replace(/\\srole=\"[^\"]*\"/i, '')\n        .replace(/\\saria-label=\"[^\"]*\"/i, '')\n        .replace(/\\saria-labelledby=\"[^\"]*\"/i, '');\n      return `<svg${kept} aria-hidden=\"true\" focusable=\"false\">`;\n    });\n}\n\n/** True when the caller marked the mark decorative (`aria-hidden` truthy). */\nexport function isDecorative(ariaHidden: unknown): boolean {\n  return ariaHidden === true || ariaHidden === 'true';\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  animations,\n  animationManifest,\n  type AnimationId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n  name: AnimationId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the animation's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n  name,\n  width,\n  style,\n  ...rest\n}: BrandAnimationProps) {\n  const reduced = usePrefersReducedMotion();\n  const entry = animationManifest.find((a) => a.id === name);\n  let markup = animations[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the brand mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  navbarLogos,\n  navbarManifest,\n  type NavbarLogoId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n  name: NavbarLogoId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n *   - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n *     start apart and the `i` slides onto the `a`. Plays once on mount; replays\n *     on pointer-enter via a remount (`replayKey`).\n *   - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n *     accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *   - `dream` (promoted dream marks, `tools/dream-foundry/drop.mjs promote`):\n *     a self-contained CSS hover gesture like liftwash; the poster is the mark's\n *     own static form (`dream_<slug>` / `DREAM`). Ink is `currentColor`.\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n  const reduced = usePrefersReducedMotion();\n\n  const entry = navbarManifest.find((n) => n.id === name);\n  let markup = navbarLogos[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the superimposed mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  // (The reduced-motion branch above goes through <Logo>, which does the same.)\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  // The SVG is fully self-driving: it plays the assemble once on mount (its\n  // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n  // CSS — no remount/replay logic here (remounting is what caused the teleport).\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // Self-contained, font-free SVG; carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","import * as React from 'react';\nimport {\n  resolveTheme,\n  useResolvedTheme,\n  useThemePreference,\n  type ResolvedTheme,\n  type ThemePreference,\n} from './theme.js';\n\nexport interface ThemeToggleLabels {\n  /** What the control sets, read before the theme in effect (\"Theme: Light\"). */\n  name: string;\n  /** Added when the theme follows the operating system (\"Theme: Light (System)\"). */\n  system: string;\n  light: string;\n  dark: string;\n}\n\nexport interface ThemeToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type'> {\n  /** Accessible and tooltip text; pass the property's own wording. */\n  labels?: Partial<ThemeToggleLabels>;\n}\n\nconst DEFAULT_LABELS: ThemeToggleLabels = {\n  name: 'Theme',\n  system: 'System',\n  light: 'Light',\n  dark: 'Dark',\n};\n\n/** The operating system's theme. */\nfunction systemTheme(): ResolvedTheme {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * The choice one click makes: the other theme, stored as \"system\" when that is\n * the operating system's own, so the page goes back to following it.\n */\nexport function nextThemePreference(shown: ResolvedTheme, system: ResolvedTheme): ThemePreference {\n  const next: ResolvedTheme = shown === 'dark' ? 'light' : 'dark';\n  return next === system ? 'system' : next;\n}\n\nconst noSubscribe = () => () => {};\n\n/**\n * False in the server markup and during hydration, true after. The theme in\n * effect is only known on the client (the server snapshot is always light), so\n * until then the button claims no theme: its name is the bare `name` and its\n * icon is hidden, keeping the 48px box.\n */\nfunction useHydrated(): boolean {\n  return React.useSyncExternalStore(noSubscribe, () => true, () => false);\n}\n\nfunction Icon({ theme }: { theme: ResolvedTheme }) {\n  const common = {\n    width: 20,\n    height: 20,\n    viewBox: '0 0 24 24',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 1.75,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    'aria-hidden': true,\n    focusable: false,\n  };\n  if (theme === 'dark') {\n    return (\n      <svg {...common}>\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <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\" />\n    </svg>\n  );\n}\n\n/**\n * Light/dark toggle for an app navbar: one button, and one click always flips\n * the theme on screen. The page follows the operating system until the first\n * click; a click that lands on the system's own theme goes back to following\n * it (no stored choice), and the other theme is stored and set as\n * `data-bs-theme` on the root, which the house tokens obey. The icon shows the\n * theme in effect: a sun in light, a moon in dark.\n *\n * A 48px target (the dataimago touch floor). The icon is `currentColor`.\n * Inline styles would beat a consumer's `:hover` rule, so the two colours a\n * navbar restyles read custom properties instead: set `--di-theme-toggle-fg`\n * and `--di-theme-toggle-bg` on `.di-ui-theme-toggle` (and its `:hover`).\n * Pair it with `<ThemeScript />` in `<head>` so a stored choice applies before\n * first paint.\n */\nexport function ThemeToggle({ labels, className = '', style, ...rest }: ThemeToggleProps) {\n  const [preference, setPreference] = useThemePreference();\n  const resolved = useResolvedTheme();\n  const hydrated = useHydrated();\n  const shown = hydrated ? resolved : undefined;\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const label = shown\n    ? `${text.name}: ${text[shown]}${preference === 'system' ? ` (${text.system})` : ''}`\n    : text.name;\n  return (\n    <button\n      {...rest}\n      className={['di-ui-theme-toggle', className].filter(Boolean).join(' ')}\n      aria-label={label}\n      title={label}\n      data-theme-preference={preference}\n      data-theme={shown}\n      style={{\n        alignItems: 'center',\n        background: 'var(--di-theme-toggle-bg, transparent)',\n        border: 0,\n        borderRadius: 'var(--radius-md, 0.5rem)',\n        color: 'var(--di-theme-toggle-fg, inherit)',\n        cursor: 'pointer',\n        display: 'inline-flex',\n        height: '48px',\n        justifyContent: 'center',\n        padding: 0,\n        transition: 'background-color 150ms ease',\n        width: '48px',\n        ...style,\n      }}\n      // After the spread, so the control never submits a form or loses its flip.\n      type=\"button\"\n      // Live reads, not the rendered snapshot: a click always flips what is on screen.\n      onClick={() => setPreference(nextThemePreference(resolveTheme(), systemTheme()))}\n    >\n      <span style={{ display: 'inline-flex', visibility: shown ? 'visible' : 'hidden' }}>\n        <Icon theme={shown ?? 'light'} />\n      </span>\n    </button>\n  );\n}\n","import * as React from 'react';\n\n/**\n * Light/dark theme preference for dataimago apps.\n *\n * The house tokens (`@dataimago/tokens`) follow the operating system through\n * `prefers-color-scheme` and yield to an explicit `data-bs-theme` on the root:\n * `light` or `dark` forces that theme, no attribute means \"follow the system\".\n * This module owns that attribute: it reads and stores the reader's choice,\n * applies it, and reports the theme actually in effect (for canvas and WebGL\n * surfaces that cannot read CSS variables).\n *\n * The choice is a per-browser convenience in localStorage. Every read and write\n * is guarded: in a private window or with storage blocked the page simply\n * follows the system.\n */\n\nexport type ThemePreference = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport const THEME_STORAGE_KEY = 'dataimago-theme';\nexport const THEME_ATTRIBUTE = 'data-bs-theme';\n\n/** Fired on `window` whenever `setThemePreference` changes the choice. */\nconst CHANGE_EVENT = 'dataimago:themechange';\n\n/**\n * Inline this in `<head>` before any stylesheet paints, so a stored choice is\n * on the root before first paint (no flash of the other theme). The server\n * markup cannot know the choice, so the consumer also puts\n * `suppressHydrationWarning` on `<html>`. From a React server layout, render\n * `<ThemeScript />` instead: this package is a client bundle, so a server\n * component cannot import the string itself.\n *\n * ```tsx\n * <html lang=\"en\" suppressHydrationWarning>\n *   <head><ThemeScript /></head>\n * ```\n */\nexport const themeInitScript =\n  `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});` +\n  `if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}` +\n  `catch(e){}})();`;\n\nfunction isPreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/** The stored choice, or `'system'` when there is none (or storage is unavailable). */\nexport function readThemePreference(): ThemePreference {\n  if (typeof window === 'undefined') return 'system';\n  try {\n    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);\n    return isPreference(stored) ? stored : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction applyAttribute(preference: ThemePreference): void {\n  const root = document.documentElement;\n  if (preference === 'system') root.removeAttribute(THEME_ATTRIBUTE);\n  else root.setAttribute(THEME_ATTRIBUTE, preference);\n}\n\n/** Store, apply and announce a choice. `'system'` clears the stored choice. */\nexport function setThemePreference(preference: ThemePreference): void {\n  if (typeof window === 'undefined') return;\n  try {\n    if (preference === 'system') window.localStorage.removeItem(THEME_STORAGE_KEY);\n    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);\n  } catch {\n    // Storage blocked: the choice still applies to this page view.\n  }\n  applyAttribute(preference);\n  window.dispatchEvent(new Event(CHANGE_EVENT));\n}\n\n/** The theme in effect: the root attribute when set, otherwise the system's. */\nexport function resolveTheme(): ResolvedTheme {\n  if (typeof document === 'undefined') return 'light';\n  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);\n  if (forced === 'light' || forced === 'dark') return forced;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * Put the stored choice on the root. `ThemeScript` does this before first\n * paint when it is server-rendered; this covers an app without it (or one that\n * inserts it on the client, where an inline script never runs). Idempotent.\n */\nfunction syncAttribute(): void {\n  applyAttribute(readThemePreference());\n}\n\nfunction subscribePreference(onChange: () => void): () => void {\n  syncAttribute();\n  // Another tab changed the choice: follow it here too.\n  const onStorage = (e: StorageEvent) => {\n    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;\n    applyAttribute(readThemePreference());\n    onChange();\n  };\n  window.addEventListener(CHANGE_EVENT, onChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    window.removeEventListener(CHANGE_EVENT, onChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\nfunction subscribeResolved(onChange: () => void): () => void {\n  // Watch first, then restore: the observer reports the restored attribute,\n  // so a canvas surface hears about a stored choice applied on mount.\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE],\n  });\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener('change', onChange);\n  window.addEventListener(CHANGE_EVENT, onChange);\n  syncAttribute();\n  return () => {\n    observer.disconnect();\n    media.removeEventListener('change', onChange);\n    window.removeEventListener(CHANGE_EVENT, onChange);\n  };\n}\n\n/**\n * The reader's choice and a setter. Server render and hydration see\n * `'system'`; the stored choice arrives right after.\n */\nexport function useThemePreference(): [ThemePreference, (p: ThemePreference) => void] {\n  const preference = React.useSyncExternalStore(\n    subscribePreference,\n    readThemePreference,\n    () => 'system' as const,\n  );\n  return [preference, setThemePreference];\n}\n\n/**\n * The theme in effect, for surfaces that cannot read CSS variables (canvas,\n * WebGL maps). Follows the toggle and, under \"system\", the operating system.\n * Server render and hydration see `'light'`.\n */\nexport function useResolvedTheme(): ResolvedTheme {\n  return React.useSyncExternalStore(subscribeResolved, resolveTheme, () => 'light' as const);\n}\n","import * as React from 'react';\nimport { themeInitScript } from './theme.js';\n\nexport interface ThemeScriptProps {\n  /** Content-Security-Policy nonce, when the app sets one. */\n  nonce?: string;\n}\n\n/**\n * Renders `themeInitScript` as an inline `<script>`, so a stored choice is on\n * the root before first paint. Use this from a server layout: this package is\n * a client bundle, so a server component cannot import the plain string, but\n * it can render this component. Put it in `<head>` and add\n * `suppressHydrationWarning` to `<html>` (the script changes its attributes\n * before React hydrates).\n */\nexport function ThemeScript({ nonce }: ThemeScriptProps) {\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeInitScript }} />;\n}\n"],"mappings":"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","names":["Button","jsx","jsx","jsxs","jsx","jsxs","jsx","React","jsx","React","jsx","usePrefersReducedMotion","React","React","jsx","jsxs","jsx"]}
+{"version":3,"sources":["../src/Button.tsx","../src/brand/LogoMonogram.tsx","../src/brand/LogoMonogramBg.tsx","../src/brand/LogoWordmark.tsx","../src/brand/Logo.tsx","../src/brand/decorative.ts","../src/brand/CopulaLockup.tsx","../src/brand/BrandAnimation.tsx","../src/brand/NavbarLogo.tsx","../src/theme/ThemeToggle.tsx","../src/theme/theme.ts","../src/theme/ThemeScript.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'di-ui-button--primary',\n  secondary: 'di-ui-button--secondary',\n  ghost:     'di-ui-button--ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'di-ui-button--sm',\n  md: 'di-ui-button--md',\n  lg: 'di-ui-button--lg',\n};\n\nconst baseStyle: React.CSSProperties = {\n  alignItems: 'center',\n  borderRadius: 'var(--radius-md, 0.5rem)',\n  borderStyle: 'solid',\n  borderWidth: '1px',\n  cursor: 'pointer',\n  display: 'inline-flex',\n  fontFamily: 'var(--font-family-sans, system-ui, sans-serif)',\n  fontWeight: 'var(--font-weight-medium, 500)',\n  gap: 'var(--spacing-sm, 0.5rem)',\n  justifyContent: 'center',\n  textDecoration: 'none',\n  transition: 'background-color 150ms ease, border-color 150ms ease, color 150ms ease',\n};\n\nconst variantStyles: Record<ButtonVariant, React.CSSProperties> = {\n  primary: {\n    backgroundColor: 'var(--color-interactive-primary)',\n    borderColor: 'var(--color-interactive-primary)',\n    color: 'var(--color-content-inverse)',\n  },\n  secondary: {\n    backgroundColor: 'var(--color-surface-elevated)',\n    borderColor: 'var(--color-border-moderate)',\n    color: 'var(--color-content-primary)',\n  },\n  ghost: {\n    backgroundColor: 'transparent',\n    borderColor: 'transparent',\n    color: 'var(--color-content-secondary)',\n  },\n};\n\nconst sizeStyles: Record<ButtonSize, React.CSSProperties> = {\n  sm: {\n    fontSize: 'var(--font-size-small, 0.875rem)',\n    minHeight: '2rem',\n    padding: '0.375rem 0.75rem',\n  },\n  md: {\n    fontSize: 'var(--font-size-base, 1rem)',\n    minHeight: '2.5rem',\n    padding: '0.625rem 1rem',\n  },\n  lg: {\n    fontSize: 'var(--font-size-readable, 1.125rem)',\n    minHeight: '3rem',\n    padding: '0.75rem 1.25rem',\n  },\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to semantic CSS variables published by @dataimago/css\n * so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', style, type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'di-ui-button',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        style={{\n          ...baseStyle,\n          ...variantStyles[variant],\n          ...sizeStyles[size],\n          ...style,\n        }}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n","import * as React from 'react';\n\n/**\n * <LogoMonogram /> — the dataimago 'a + i' superimposed monogram, transparent\n * background. Glyphs are outlined paths (no font dependency at render time);\n * fill defaults to `currentColor` so the mark inherits from the surrounding\n * text color and respects light/dark theme switches automatically.\n *\n * Symbolism: 'a' (data, agency) superimposed with 'i' (imago, AI) — the\n * fusion is the brand's central idea. See wiki/principles/visual-identity.md\n * (Stage L follow-up) for the full brand-mark rationale.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_1_PATH.svg\n *\n * Usage:\n *   <LogoMonogram size={48} aria-label=\"dataimago\" />\n *   <span style={{ color: 'var(--color-interactive-primary)' }}>\n *     <LogoMonogram size={32} />\n *   </span>\n */\n\nexport interface LogoMonogramProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px (or any CSS length). Default: 24. Width and height match. */\n  size?: number | string;\n  /**\n   * Accessible name announced by screen readers. Set to `undefined` (or pass\n   * `aria-hidden` directly) when the mark is purely decorative.\n   */\n  title?: string;\n}\n\nexport function LogoMonogram({\n  size = 24,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      fill=\"currentColor\"\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* 'i' (imago) glyph */}\n      <path d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\" />\n      {/* 'a' (data) glyph */}\n      <path d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\" />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoMonogramBg /> — the dataimago 'a + i' monogram with a rounded accent\n * backplate. White letters on the brand-accent role\n * (var(--color-interactive-accent), iteration-2 sky-blue).\n *\n * Use this variant on neutral surfaces where the no-background monogram\n * would lack presence — favicons, app icons, social-media avatars, or any\n * branded chrome where the mark should read as a self-contained badge.\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   ai_monogram_supreme_bg_1_PATH.svg\n *\n * Theming: the background uses var(--color-interactive-accent), which\n * resolves via theme-colors.json's mode-aware role mapping — accent-500\n * (#1f618d) on light surfaces, accent-300 (#3498DB) on dark. The letter\n * fill is hard-set to white; both accent stops have AA-or-better contrast\n * with white letters (light-mode 6.66:1 AA, dark-mode 3.15:1 AA-large for\n * the dot-and-stem heading-size letters used in the monogram). The\n * literal-fallback in this component is light-mode (#1f618d, sky-blue\n * iteration-2) for rare non-CSS-aware contexts. Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoMonogramBg size={64} aria-label=\"dataimago\" />\n */\n\nexport interface LogoMonogramBgProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Render size in px. Default: 32 (favicon-sized). Width and height match. */\n  size?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoMonogramBg({\n  size = 32,\n  title = 'dataimago',\n  ...rest\n}: LogoMonogramBgProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 480\"\n      width={size}\n      height={size}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"40\"\n        ry=\"40\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* 'a' (data) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 325.70312,176.01562 303.04687,360 h -43.16406 l 2.53906,-19.92188 Q 234.6875,364.29687 205,364.29687 q -36.52344,0 -59.57031,-24.80468 -23.04688,-24.80469 -23.04688,-64.25782 0,-45.50781 26.36719,-74.60937 26.75781,-29.10156 68.55469,-29.10156 19.72656,0 33.59375,6.44531 14.0625,6.44531 28.71093,22.26562 l 2.92969,-24.21875 z m -52.53906,86.71875 q 0,-24.41406 -14.0625,-39.64843 -14.0625,-15.42969 -36.32812,-15.42969 -24.21875,0 -40.625,18.94531 -16.40625,19.14063 -16.40625,46.875 0,24.21875 13.67187,39.64844 13.67188,15.42969 35.15625,15.42969 23.82813,0 41.21094,-19.33594 17.38281,-19.72656 17.38281,-46.48438 z\"\n      />\n      {/* 'i' (imago) glyph in white */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 337.3457,97.089844 q 0,8.906246 -6.49414,15.400386 -6.49414,6.49415 -15.58594,6.49415 -9.09179,0 -15.77148,-6.67969 Q 293,105.25391 293,96.162109 q 0,-9.091797 6.30859,-15.40039 6.49414,-6.494141 15.40039,-6.494141 9.0918,0 15.77149,6.865234 6.86523,6.679688 6.86523,15.957032 z M 324.54297,180.21484 303.01953,355 h -41.00586 l 21.52344,-174.78516 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\n\n/**\n * <LogoWordmark /> — the full \"dataimago\" wordmark with the 'ai' overlap.\n * White letters on a rounded accent backplate, themed via\n * var(--color-interactive-accent).\n *\n * Use this variant for primary brand surfaces: site headers, document\n * letterheads, large-format presentations, business materials. For compact\n * contexts (favicons, social avatars) use <LogoMonogramBg /> instead; for\n * inline use within prose use <LogoMonogram /> with currentColor.\n *\n * The wordmark preserves the philosophical idea of the brand: the visible\n * superposition of 'a' (data, human agency) and 'i' (imago, AI) creates a new\n * unified glyph that is neither pure human nor pure artificial — genuine\n * collaboration. See wiki/principles/visual-identity.md (Stage L follow-up).\n *\n * Source artwork: outlined-path SVG from\n * FOUNDATIONS/background/04_dataimago_Content/Design_Assets/logos/\n *   dataimago_supreme_1_PATH.svg\n *\n * Theming: the backplate uses var(--color-interactive-accent), which resolves\n * via theme-colors.json's mode-aware role mapping — accent-500 (#1f618d) on\n * light surfaces, accent-300 (#3498DB) on dark. The literal-fallback in this\n * component is light-mode (#1f618d, sky-blue iteration-2) for the rare cases\n * where the SVG is consumed without CSS-variable resolution (printed PDFs from\n * raw SVG, third-party platforms that strip CSS). Iteration-1's copper-red\n * fallback (#b54a27) was retired in iteration-2-B.2; see\n * wiki/decisions/iteration-2-blue-accent.md for the rationale.\n *\n * Usage:\n *   <LogoWordmark width={240} aria-label=\"dataimago\" />\n *\n * The wordmark's natural aspect ratio is 480x150 (~3.2:1). Pass `width` and\n * height auto-scales, or pass both explicitly.\n */\n\nexport interface LogoWordmarkProps extends React.SVGAttributes<SVGSVGElement> {\n  /** Width in px. Default: 240. Height auto-scales to the 480:150 ratio. */\n  width?: number | string;\n  /** Accessible name. Set undefined or pass aria-hidden for decorative use. */\n  title?: string;\n}\n\nexport function LogoWordmark({\n  width = 240,\n  title = 'dataimago',\n  ...rest\n}: LogoWordmarkProps) {\n  const a11yProps = title ? { role: 'img' as const } : { 'aria-hidden': true as const };\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 480 150\"\n      width={width}\n      aria-label={title}\n      {...a11yProps}\n      {...rest}\n    >\n      {title ? <title>{title}</title> : null}\n      {/* Rounded accent backplate — themed via --color-interactive-accent\n          (mode-aware: accent-500 #1f618d on light, accent-300 #3498DB on dark).\n          Literal fallback is the light-mode canonical for non-CSS consumers. */}\n      <rect\n        width=\"100%\"\n        height=\"100%\"\n        rx=\"5\"\n        ry=\"5\"\n        fill=\"var(--color-interactive-accent, #1f618d)\"\n      />\n      {/* \"data\" — outlined glyphs, white fill */}\n      <path\n        fill=\"#ffffff\"\n        d=\"M 104.80469,35.621094 97.492187,95 h -7.734375 l 0.421875,-3.550781 q -2.882812,2.566406 -4.992187,3.480468 -2.074219,0.84375 -5.132813,0.84375 -6.960937,0 -11.390625,-4.605468 -4.429687,-4.640625 -4.429687,-11.953125 0,-7.804688 4.851562,-12.972657 4.851563,-5.167968 12.199219,-5.167968 3.761719,0 6.328125,1.300781 2.671875,1.335937 5.589844,4.535156 L 97.035156,35.621094 Z M 92.007812,77 q 0,-4.21875 -2.601562,-6.820313 -2.601563,-2.601562 -6.820313,-2.601562 -4.570312,0 -7.558593,3.410156 -2.988282,3.410156 -2.988282,8.613281 0,4.394532 2.566407,7.066407 2.566406,2.636718 6.820312,2.636718 4.429688,0 7.488281,-3.585937 Q 92.007812,82.203125 92.007812,77 Z M 145.51562,61.882812 141.4375,95 h -7.76953 l 0.45703,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72265,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.74609,-13.429687 4.81641,-5.238281 12.33985,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46093,7.136719 2.46094,2.777344 6.32813,2.777344 4.28906,0 7.41797,-3.480469 3.1289,-3.550781 3.1289,-8.367188 z M 163.79687,69.089844 160.59766,95 h -7.76954 l 3.19922,-25.910156 h -4.39453 l 0.87891,-7.207032 h 4.39453 l 1.89844,-15.363281 h 7.76953 l -1.89844,15.363281 h 7.17188 l -0.87891,7.207032 z M 211.29297,61.882812 207.21484,95 h -7.76953 l 0.45703,-3.585938 q -4.99218,4.359375 -10.33593,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04687,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52735,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53907,-2.777344 -4.35937,0 -7.3125,3.410156 -2.95312,3.445313 -2.95312,8.4375 0,4.359375 2.46094,7.136719 2.46093,2.777344 6.32812,2.777344 4.28906,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z\"\n      />\n      {/* \"imago\" — outlined glyphs, white fill, superimposed at the 'a/i' overlap */}\n      <path\n        fill=\"#ffffff\"\n        d=\"m 213.40234,46.132812 q 0,1.6875 -1.23047,2.917969 -1.23046,1.230469 -2.95312,1.230469 -1.72266,0 -2.98828,-1.265625 Q 205,47.679687 205,45.957031 q 0,-1.722656 1.19531,-2.917969 1.23047,-1.230468 2.91797,-1.230468 1.72266,0 2.98828,1.300781 1.30078,1.265625 1.30078,3.023437 z m -2.42578,15.75 L 206.89844,95 h -7.76953 l 4.07812,-33.117188 z m 18.87891,0 -0.35156,3.09375 q 3.9375,-3.9375 9.10546,-3.9375 3.12891,0 4.81641,1.160157 1.6875,1.089843 3.02344,4.113281 4.92187,-5.238281 10.61719,-5.238281 9.84375,0 9.84375,9.035156 0,0.914062 -0.17579,2.566406 -0.14062,1.652344 -0.42187,4.078125 L 264.0625,95 h -7.76953 l 2.39062,-19.160156 Q 259,73.167969 259,71.902344 q 0,-4.324219 -4.35938,-4.324219 -1.72265,0 -2.98828,0.527344 -1.26562,0.492187 -2.17968,1.582031 -0.87891,1.054687 -1.47657,2.777344 -0.5625,1.6875 -0.8789,4.042968 L 244.86719,95 h -7.76953 l 2.42578,-19.652344 q 0.3164,-2.671875 0.3164,-3.65625 0,-4.113281 -4.46484,-4.113281 -6.46875,0 -7.55859,8.964844 L 225.53125,95 h -7.76953 l 4.07812,-33.117188 z m 81.63281,0 L 307.41016,95 h -7.76954 l 0.45704,-3.585938 q -4.99219,4.359375 -10.33594,4.359375 -6.57422,0 -10.72266,-4.464843 -4.14844,-4.464844 -4.14844,-11.566407 0,-8.191406 4.7461,-13.429687 4.8164,-5.238281 12.33984,-5.238281 3.55078,0 6.04688,1.160156 2.53125,1.160156 5.16797,4.007812 l 0.52734,-4.359375 z m -9.45703,15.609375 q 0,-4.394531 -2.53125,-7.136718 -2.53125,-2.777344 -6.53906,-2.777344 -4.35938,0 -7.3125,3.410156 -2.95313,3.445313 -2.95313,8.4375 0,4.359375 2.46094,7.136719 2.46094,2.777344 6.32812,2.777344 4.28907,0 7.41797,-3.480469 3.12891,-3.550781 3.12891,-8.367188 z m 53.57812,-15.609375 -4.07812,33.363282 q -0.38672,2.988281 -0.87891,5.203126 -0.45703,2.21484 -1.05468,3.72656 -1.23047,3.09375 -3.65625,5.3086 -4.71094,4.21875 -12.23438,4.21875 -7.76953,0 -12.58594,-4.07813 -2.46093,-2.03906 -3.44531,-4.64062 -0.98437,-2.39063 -0.98437,-6.714849 h 7.52343 q 0.28125,4.675779 2.39063,6.785159 2.10937,2.14453 6.53906,2.14453 4.78125,0 7.27734,-2.56641 2.4961,-2.53125 3.16407,-8.085935 l 0.5625,-4.535156 q -4.92188,3.761718 -10.33594,3.761718 -6.75,0 -11.14453,-4.605468 -4.39453,-4.710938 -4.39453,-11.742188 0,-7.910156 5.09765,-13.113281 5.13282,-5.238281 12.83203,-5.238281 3.69141,0 5.97657,1.089843 2.49609,1.054688 5.16797,3.832032 l 0.49218,-4.113282 z m -8.92968,15.714844 q 0,-4.5 -2.74219,-7.242187 -2.74219,-2.777344 -7.17188,-2.777344 -4.60546,0 -7.66406,3.375 -3.02344,3.339844 -3.02344,8.402344 0,4.429687 2.60157,7.242187 2.63672,2.707031 6.96093,2.707031 4.81641,0 7.91016,-3.304687 3.12891,-3.339844 3.12891,-8.402344 z m 52.3125,0.527344 q 0,7.59375 -5.27344,12.761719 -5.23828,5.167968 -12.9375,5.167968 -8.05078,0 -13.14844,-4.886718 Q 362.5,86.246094 362.5,78.722656 q 0,-7.699219 5.30859,-12.796875 5.34375,-5.132812 13.35938,-5.132812 7.875,0 12.83203,4.851562 4.99219,4.78125 4.99219,12.480469 z m -7.83985,-0.386719 q 0,-4.78125 -2.77734,-7.558594 -2.77734,-2.882812 -7.27734,-2.882812 -4.67579,0 -7.73438,3.199219 -3.05859,3.234375 -3.05859,8.121093 0,4.921875 2.88281,7.910157 2.88281,3.058593 7.45312,3.058593 4.57032,0 7.52344,-3.339843 2.98828,-3.304688 2.98828,-8.507813 z\"\n      />\n    </svg>\n  );\n}\n","import * as React from 'react';\nimport { svgs, type LogoId, type LogoVariant, type LogoKey } from '@dataimago/brand';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Mark id, e.g. `dissertation_ai_OVERLAP`. */\n  name: LogoId;\n  /** PATH (default), CUTOUT, BG, or LETTERS. See @dataimago/brand. */\n  variant?: LogoVariant;\n  /**\n   * Render width (px number or any CSS length). Height scales proportionally\n   * via the SVG viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * Manifest-driven brand mark from `@dataimago/brand`. Inlines the SVG string so\n * `currentColor` (PATH/LETTERS), the `--color-interactive-accent` badge fill\n * (CUTOUT/BG), and the per-letter interaction classes (`.glyph`, `.logo-*`) all\n * work — an `<img src>` can't receive those interior styles.\n *\n * Color flows from CSS: set `color` (PATH/LETTERS) on this element or an\n * ancestor. Size via `width` (or CSS on the wrapper).\n */\nexport function Logo({ name, variant = 'PATH', width, style, ...rest }: LogoProps) {\n  const key = `${name}_${variant}` as LogoKey;\n  let markup = svgs[key];\n\n  if (!markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <Logo>: unknown mark \"${key}\".`);\n    return null;\n  }\n\n  if (width != null) {\n    // Set width + drop height so the viewBox preserves the aspect ratio.\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // The SVG is generated, font-free, and carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","/**\n * Make an inlined brand SVG silent to assistive technology.\n *\n * The generated marks carry `role=\"img\"`, an `aria-label` and a `<title>` so\n * they can stand alone. Inside a link that is already named, consumers pass\n * `aria-hidden` to the wrapper. VoiceOver in Safari ignored that wrapper and\n * read the SVG's title AND the text of its interior `<style>` block (the CSS)\n * aloud. That was the first thing heard on every dissertation.ai page, found in\n * the maintainer's AT pass, 2026-10-04. So a decorative mark is silenced on the\n * `<svg>` itself: aria-hidden + focusable=false, no role/label/title.\n */\nexport function silenceSvg(markup: string): string {\n  return markup\n    .replace(/<title\\b[^>]*>[\\s\\S]*?<\\/title>/gi, '')\n    .replace(/<svg\\b([^>]*)>/i, (_m, attrs: string) => {\n      const kept = attrs\n        .replace(/\\srole=\"[^\"]*\"/i, '')\n        .replace(/\\saria-label=\"[^\"]*\"/i, '')\n        .replace(/\\saria-labelledby=\"[^\"]*\"/i, '');\n      return `<svg${kept} aria-hidden=\"true\" focusable=\"false\">`;\n    });\n}\n\n/** True when the caller marked the mark decorative (`aria-hidden` truthy). */\nexport function isDecorative(ariaHidden: unknown): boolean {\n  return ariaHidden === true || ariaHidden === 'true';\n}\n","import * as React from 'react';\nimport { manifest, type LogoId } from '@dataimago/brand';\nimport { Logo } from './Logo';\n\n/** A link the lockup renders; pass one to route through a framework link (e.g. next/link). */\nexport interface CopulaLinkProps {\n  href: string;\n  'aria-label': string;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nexport interface CopulaLockupProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The property's wordmark id, e.g. `dissertation_ai`. Its PATH variant is drawn. */\n  property: LogoId;\n  /** Accessible name of the property link, e.g. `dissertation-ai`. */\n  propertyLabel: string;\n  /** Where the property mark links. Defaults to `/`. */\n  propertyHref?: string;\n  /**\n   * `shown` (default): \"<property> is dataimago\". `hidden`: the property mark\n   * alone, with no badge, no dataimago wordmark and no link to dataimago, for\n   * apps that keep dataimago out of view while it is in stealth.\n   */\n  dataimago?: 'shown' | 'hidden';\n  /** Where the dataimago wordmark links. Defaults to https://dataimago.ai. */\n  brandHref?: string;\n  /** Wordmark height in px. Defaults to 32; the badge and spacing scale with it. */\n  height?: number;\n  /** Class for each link (colour and hover); both links share one treatment. */\n  linkClassName?: string;\n  /** Render the links with a framework component. Defaults to a plain `<a>`. */\n  renderLink?: (props: CopulaLinkProps) => React.ReactNode;\n}\n\n// At the 32px reference size (the dissertation-ai footer, tuned by eye in\n// 2026-07 and checked with getBBox): the badge is 16px, each wordmark's ink edge\n// sits 19.7px from the badge centre, and each wordmark is cropped 10px top and\n// bottom so the cap-height band, not the canvas, is what centres on the badge.\nconst BADGE = 16 / 32;\nconst GAP = 19.7 / 32;\nconst CROP = 10 / 32;\n\nconst VISUALLY_HIDDEN: React.CSSProperties = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: 1,\n  margin: -1,\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: 1,\n};\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nfunction pathEntry(id: LogoId) {\n  return manifest.find((e) => e.id === id && e.variant === 'PATH');\n}\n\nconst plainLink = ({ children, ...props }: CopulaLinkProps) => <a {...props}>{children}</a>;\n\n/**\n * The copula lockup, \"dissertation-ai **is** dataimago\": the property wordmark,\n * the `is_badge` disc and the dataimago wordmark, each wordmark its own link\n * (wiki/connections/is-copula-coupling.md). The badge is a mark, not a link: at\n * 16px it is below the 24px pointer-target floor (WCAG 2.5.8), so it is read as\n * \"is\" and the philosophy page stays reachable from the nav.\n *\n * Spacing is ink-symmetric about the badge centre, computed from each mark's\n * `ink` box in the @dataimago/brand manifest, so any property mark lines up\n * without hand-tuned margins. Geometry is inline style (no Tailwind), so a\n * consumer on plain CSS can use it too. Colour is `currentColor`: set `color`.\n */\nexport function CopulaLockup({\n  property,\n  propertyLabel,\n  propertyHref = '/',\n  dataimago = 'shown',\n  brandHref = 'https://dataimago.ai',\n  height = 32,\n  linkClassName,\n  renderLink = plainLink,\n  style,\n  ...rest\n}: CopulaLockupProps) {\n  const prop = pathEntry(property);\n  const brand = pathEntry('dataimago');\n  if (!prop || !brand) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <CopulaLockup>: unknown mark \"${property}\".`);\n    return null;\n  }\n\n  const shown = dataimago === 'shown';\n  const badge = BADGE * height;\n  const reach = GAP * height - badge / 2;\n  const crop = -CROP * height;\n  const width = (e: { w: number; h: number }) => round((e.w * height) / e.h);\n  // A wordmark's own whitespace between its canvas edge and its ink, in px.\n  const trailing = ((prop.w - prop.ink.x2) * height) / prop.h;\n  const leading = (brand.ink.x1 * height) / brand.h;\n\n  return (\n    <span\n      style={{ alignItems: 'center', display: 'inline-flex', flexWrap: 'wrap', rowGap: 4, ...style }}\n      {...rest}\n    >\n      {renderLink({\n        href: propertyHref,\n        'aria-label': propertyLabel,\n        className: linkClassName,\n        // The crop only centres the cap-height band on the badge; alone (hidden),\n        // the mark keeps its full box so nothing next to it can overlap it.\n        style: {\n          display: 'inline-flex',\n          marginBlock: shown ? crop : 0,\n          marginRight: shown ? round(reach - trailing) : 0,\n        },\n        children: <Logo name={property} aria-hidden width={width(prop)} />,\n      })}\n      {shown ? (\n        <>\n          <span style={{ display: 'inline-flex' }}>\n            <Logo name=\"is_badge\" variant=\"CUTOUT\" aria-hidden width={round(badge)} />\n            <span style={VISUALLY_HIDDEN}>is</span>\n          </span>\n          {renderLink({\n            href: brandHref,\n            'aria-label': 'dataimago',\n            className: linkClassName,\n            style: { display: 'inline-flex', marginBlock: crop, marginLeft: round(reach - leading) },\n            children: <Logo name=\"dataimago\" aria-hidden width={width(brand)} />,\n          })}\n        </>\n      ) : null}\n    </span>\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  animations,\n  animationManifest,\n  type AnimationId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\n\nexport interface BrandAnimationProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Animation id, e.g. `dissertation-ai`. See @dataimago/brand animations.json. */\n  name: AnimationId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the animation's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion` detection. Starts `true` (reduced) so the\n * server and the first client render agree on the static poster — no hydration\n * mismatch, and no motion flashes before JS decides. After mount it reflects the\n * real media query and updates live if the user toggles the OS setting.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Decorative brand animation from `@dataimago/brand` (the animation-foundry).\n * Inlines the pure-SMIL SVG string so its interior `<style>` works — an\n * `<img src>` can't receive those styles (same rationale as `<Logo>`).\n *\n * Motion-dignity: decorative brand animation is a distinct category from the\n * 300ms UI-transition ceiling, but it is contractually gated on\n * `prefers-reduced-motion`. When the user prefers reduced motion this renders\n * the static brand mark the animation settles to (its `poster`) via `<Logo>`,\n * so no consumer can ship the motion without the fallback.\n */\nexport function BrandAnimation({\n  name,\n  width,\n  style,\n  ...rest\n}: BrandAnimationProps) {\n  const reduced = usePrefersReducedMotion();\n  const entry = animationManifest.find((a) => a.id === name);\n  let markup = animations[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the brand mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","'use client';\n\nimport * as React from 'react';\nimport {\n  navbarLogos,\n  navbarManifest,\n  type NavbarLogoId,\n  type LogoId,\n  type LogoVariant,\n} from '@dataimago/brand';\nimport { Logo } from './Logo';\nimport { isDecorative, silenceSvg } from './decorative';\n\nexport interface NavbarLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Navbar mark id, e.g. `dissertation-ai`. See @dataimago/brand navbar.json. */\n  name: NavbarLogoId;\n  /**\n   * Render width (px number or any CSS length). Height scales via the SVG\n   * viewBox. Omit to use the mark's intrinsic size.\n   */\n  width?: number | string;\n}\n\n/**\n * SSR-safe `prefers-reduced-motion`. Starts `true` (reduced) so server and first\n * client render agree on the static poster — no hydration mismatch, no motion\n * flash. After mount it reflects the real query and updates live. (Mirrors\n * BrandAnimation; kept local to avoid a shared-hook refactor.)\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState(true);\n  React.useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReduced(mq.matches);\n    const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);\n    mq.addEventListener('change', onChange);\n    return () => mq.removeEventListener('change', onChange);\n  }, []);\n  return reduced;\n}\n\n/**\n * Animated brand mark for an app navbar, from `@dataimago/brand` (the\n * animation-foundry's navbar set). Inlines the self-contained CSS-animated SVG\n * so its interior `<style>` works — an `<img src>` can't receive those styles.\n *\n * Behaviour by mark kind (from the navbar manifest):\n *   - `assemble` (L2: dissertation-ai, rpkg-ai, SGPc-ai): the trailing `a`/`i`\n *     start apart and the `i` slides onto the `a`. Plays once on mount; replays\n *     on pointer-enter via a remount (`replayKey`).\n *   - `shimmer` (L1: dataimago-ai): the monogram is always superimposed; an\n *     accent shimmer sweeps on `:hover` from the SVG's own CSS (no JS trigger).\n *   - `dream` (promoted dream marks, `tools/dream-foundry/drop.mjs promote`):\n *     a self-contained CSS hover gesture like liftwash; the poster is the mark's\n *     own static form (`dream_<slug>` / `DREAM`). Ink is `currentColor`.\n *\n * Motion-dignity: the embedded CSS animation is <= 300ms and gated on\n * `@media (prefers-reduced-motion: no-preference)`. When the user prefers\n * reduced motion this renders the static settled mark (the manifest `poster`,\n * the superimposed monogram) via `<Logo>` — so no consumer can ship the motion\n * without the fallback.\n */\nexport function NavbarLogo({ name, width, style, ...rest }: NavbarLogoProps) {\n  const reduced = usePrefersReducedMotion();\n\n  const entry = navbarManifest.find((n) => n.id === name);\n  let markup = navbarLogos[name];\n\n  if (!entry || !markup) {\n    // eslint-disable-next-line no-console\n    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark \"${name}\".`);\n    return null;\n  }\n\n  if (reduced) {\n    // Static settle-frame: the superimposed mark the animation resolves to.\n    return (\n      <Logo\n        name={entry.poster.id as LogoId}\n        variant={entry.poster.variant as LogoVariant}\n        width={width}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n\n  if (width != null) {\n    markup = markup\n      .replace(/\\swidth=\"[^\"]*\"/, ` width=\"${width}\"`)\n      .replace(/\\sheight=\"[^\"]*\"/, '');\n  }\n\n  // Decorative (aria-hidden): silence the <svg> itself — see decorative.ts.\n  // (The reduced-motion branch above goes through <Logo>, which does the same.)\n  if (isDecorative(rest['aria-hidden'])) markup = silenceSvg(markup);\n\n  // The SVG is fully self-driving: it plays the assemble once on mount (its\n  // `.di-play` class) and runs the smooth hover round-trip from its own `:hover`\n  // CSS — no remount/replay logic here (remounting is what caused the teleport).\n  return (\n    <span\n      style={{ display: 'inline-flex', ...style }}\n      // Self-contained, font-free SVG; carries its own <title>/aria-label.\n      dangerouslySetInnerHTML={{ __html: markup }}\n      {...rest}\n    />\n  );\n}\n","import * as React from 'react';\nimport {\n  resolveTheme,\n  useResolvedTheme,\n  useThemePreference,\n  type ResolvedTheme,\n  type ThemePreference,\n} from './theme.js';\n\nexport interface ThemeToggleLabels {\n  /** What the control sets, read before the theme in effect (\"Theme: Light\"). */\n  name: string;\n  /** Added when the theme follows the operating system (\"Theme: Light (System)\"). */\n  system: string;\n  light: string;\n  dark: string;\n}\n\nexport interface ThemeToggleProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type'> {\n  /** Accessible and tooltip text; pass the property's own wording. */\n  labels?: Partial<ThemeToggleLabels>;\n}\n\nconst DEFAULT_LABELS: ThemeToggleLabels = {\n  name: 'Theme',\n  system: 'System',\n  light: 'Light',\n  dark: 'Dark',\n};\n\n/** The operating system's theme. */\nfunction systemTheme(): ResolvedTheme {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * The choice one click makes: the other theme, stored as \"system\" when that is\n * the operating system's own, so the page goes back to following it.\n */\nexport function nextThemePreference(shown: ResolvedTheme, system: ResolvedTheme): ThemePreference {\n  const next: ResolvedTheme = shown === 'dark' ? 'light' : 'dark';\n  return next === system ? 'system' : next;\n}\n\nconst noSubscribe = () => () => {};\n\n/**\n * False in the server markup and during hydration, true after. The theme in\n * effect is only known on the client (the server snapshot is always light), so\n * until then the button claims no theme: its name is the bare `name` and its\n * icon is hidden, keeping the 48px box.\n */\nfunction useHydrated(): boolean {\n  return React.useSyncExternalStore(noSubscribe, () => true, () => false);\n}\n\nfunction Icon({ theme }: { theme: ResolvedTheme }) {\n  const common = {\n    width: 20,\n    height: 20,\n    viewBox: '0 0 24 24',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 1.75,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n    'aria-hidden': true,\n    focusable: false,\n  };\n  if (theme === 'dark') {\n    return (\n      <svg {...common}>\n        <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n      </svg>\n    );\n  }\n  return (\n    <svg {...common}>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <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\" />\n    </svg>\n  );\n}\n\n/**\n * Light/dark toggle for an app navbar: one button, and one click always flips\n * the theme on screen. The page follows the operating system until the first\n * click; a click that lands on the system's own theme goes back to following\n * it (no stored choice), and the other theme is stored and set as\n * `data-bs-theme` on the root, which the house tokens obey. The icon shows the\n * theme in effect: a sun in light, a moon in dark.\n *\n * A 48px target (the dataimago touch floor). The icon is `currentColor`.\n * Inline styles would beat a consumer's `:hover` rule, so the two colours a\n * navbar restyles read custom properties instead: set `--di-theme-toggle-fg`\n * and `--di-theme-toggle-bg` on `.di-ui-theme-toggle` (and its `:hover`).\n * Pair it with `<ThemeScript />` in `<head>` so a stored choice applies before\n * first paint.\n */\nexport function ThemeToggle({ labels, className = '', style, ...rest }: ThemeToggleProps) {\n  const [preference, setPreference] = useThemePreference();\n  const resolved = useResolvedTheme();\n  const hydrated = useHydrated();\n  const shown = hydrated ? resolved : undefined;\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const label = shown\n    ? `${text.name}: ${text[shown]}${preference === 'system' ? ` (${text.system})` : ''}`\n    : text.name;\n  return (\n    <button\n      {...rest}\n      className={['di-ui-theme-toggle', className].filter(Boolean).join(' ')}\n      aria-label={label}\n      title={label}\n      data-theme-preference={preference}\n      data-theme={shown}\n      style={{\n        alignItems: 'center',\n        background: 'var(--di-theme-toggle-bg, transparent)',\n        border: 0,\n        borderRadius: 'var(--radius-md, 0.5rem)',\n        color: 'var(--di-theme-toggle-fg, inherit)',\n        cursor: 'pointer',\n        display: 'inline-flex',\n        height: '48px',\n        justifyContent: 'center',\n        padding: 0,\n        transition: 'background-color 150ms ease',\n        width: '48px',\n        ...style,\n      }}\n      // After the spread, so the control never submits a form or loses its flip.\n      type=\"button\"\n      // Live reads, not the rendered snapshot: a click always flips what is on screen.\n      onClick={() => setPreference(nextThemePreference(resolveTheme(), systemTheme()))}\n    >\n      <span style={{ display: 'inline-flex', visibility: shown ? 'visible' : 'hidden' }}>\n        <Icon theme={shown ?? 'light'} />\n      </span>\n    </button>\n  );\n}\n","import * as React from 'react';\n\n/**\n * Light/dark theme preference for dataimago apps.\n *\n * The house tokens (`@dataimago/tokens`) follow the operating system through\n * `prefers-color-scheme` and yield to an explicit `data-bs-theme` on the root:\n * `light` or `dark` forces that theme, no attribute means \"follow the system\".\n * This module owns that attribute: it reads and stores the reader's choice,\n * applies it, and reports the theme actually in effect (for canvas and WebGL\n * surfaces that cannot read CSS variables).\n *\n * The choice is a per-browser convenience in localStorage. Every read and write\n * is guarded: in a private window or with storage blocked the page simply\n * follows the system.\n */\n\nexport type ThemePreference = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport const THEME_STORAGE_KEY = 'dataimago-theme';\nexport const THEME_ATTRIBUTE = 'data-bs-theme';\n\n/** Fired on `window` whenever `setThemePreference` changes the choice. */\nconst CHANGE_EVENT = 'dataimago:themechange';\n\n/**\n * Inline this in `<head>` before any stylesheet paints, so a stored choice is\n * on the root before first paint (no flash of the other theme). The server\n * markup cannot know the choice, so the consumer also puts\n * `suppressHydrationWarning` on `<html>`. From a React server layout, render\n * `<ThemeScript />` instead: this package is a client bundle, so a server\n * component cannot import the string itself.\n *\n * ```tsx\n * <html lang=\"en\" suppressHydrationWarning>\n *   <head><ThemeScript /></head>\n * ```\n */\nexport const themeInitScript =\n  `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});` +\n  `if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}` +\n  `catch(e){}})();`;\n\nfunction isPreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/** The stored choice, or `'system'` when there is none (or storage is unavailable). */\nexport function readThemePreference(): ThemePreference {\n  if (typeof window === 'undefined') return 'system';\n  try {\n    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);\n    return isPreference(stored) ? stored : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction applyAttribute(preference: ThemePreference): void {\n  const root = document.documentElement;\n  if (preference === 'system') root.removeAttribute(THEME_ATTRIBUTE);\n  else root.setAttribute(THEME_ATTRIBUTE, preference);\n}\n\n/** Store, apply and announce a choice. `'system'` clears the stored choice. */\nexport function setThemePreference(preference: ThemePreference): void {\n  if (typeof window === 'undefined') return;\n  try {\n    if (preference === 'system') window.localStorage.removeItem(THEME_STORAGE_KEY);\n    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);\n  } catch {\n    // Storage blocked: the choice still applies to this page view.\n  }\n  applyAttribute(preference);\n  window.dispatchEvent(new Event(CHANGE_EVENT));\n}\n\n/** The theme in effect: the root attribute when set, otherwise the system's. */\nexport function resolveTheme(): ResolvedTheme {\n  if (typeof document === 'undefined') return 'light';\n  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);\n  if (forced === 'light' || forced === 'dark') return forced;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * Put the stored choice on the root. `ThemeScript` does this before first\n * paint when it is server-rendered; this covers an app without it (or one that\n * inserts it on the client, where an inline script never runs). Idempotent.\n */\nfunction syncAttribute(): void {\n  applyAttribute(readThemePreference());\n}\n\nfunction subscribePreference(onChange: () => void): () => void {\n  syncAttribute();\n  // Another tab changed the choice: follow it here too.\n  const onStorage = (e: StorageEvent) => {\n    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;\n    applyAttribute(readThemePreference());\n    onChange();\n  };\n  window.addEventListener(CHANGE_EVENT, onChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    window.removeEventListener(CHANGE_EVENT, onChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\nfunction subscribeResolved(onChange: () => void): () => void {\n  // Watch first, then restore: the observer reports the restored attribute,\n  // so a canvas surface hears about a stored choice applied on mount.\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [THEME_ATTRIBUTE],\n  });\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener('change', onChange);\n  window.addEventListener(CHANGE_EVENT, onChange);\n  syncAttribute();\n  return () => {\n    observer.disconnect();\n    media.removeEventListener('change', onChange);\n    window.removeEventListener(CHANGE_EVENT, onChange);\n  };\n}\n\n/**\n * The reader's choice and a setter. Server render and hydration see\n * `'system'`; the stored choice arrives right after.\n */\nexport function useThemePreference(): [ThemePreference, (p: ThemePreference) => void] {\n  const preference = React.useSyncExternalStore(\n    subscribePreference,\n    readThemePreference,\n    () => 'system' as const,\n  );\n  return [preference, setThemePreference];\n}\n\n/**\n * The theme in effect, for surfaces that cannot read CSS variables (canvas,\n * WebGL maps). Follows the toggle and, under \"system\", the operating system.\n * Server render and hydration see `'light'`.\n */\nexport function useResolvedTheme(): ResolvedTheme {\n  return React.useSyncExternalStore(subscribeResolved, resolveTheme, () => 'light' as const);\n}\n","import * as React from 'react';\nimport { themeInitScript } from './theme.js';\n\nexport interface ThemeScriptProps {\n  /** Content-Security-Policy nonce, when the app sets one. */\n  nonce?: string;\n}\n\n/**\n * Renders `themeInitScript` as an inline `<script>`, so a stored choice is on\n * the root before first paint. Use this from a server layout: this package is\n * a client bundle, so a server component cannot import the plain string, but\n * it can render this component. Put it in `<head>` and add\n * `suppressHydrationWarning` to `<html>` (the script changes its attributes\n * before React hydrates).\n */\nexport function ThemeScript({ nonce }: ThemeScriptProps) {\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: themeInitScript }} />;\n}\n"],"mappings":"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","names":["Button","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsxs","React","jsx","React","jsx","usePrefersReducedMotion","React","React","jsx","jsxs","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataimago/ui",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.34",
   "description": "React components for the dataimago ethical AI design system",
   "license": "MIT",
   "repository": {
@@ -52,9 +52,9 @@
     "tsup": "^8.3.0",
     "typescript": "^5.6.0",
     "vitest": "^4.1.5",
-    "@dataimago/css": "^0.1.0-alpha.20",
-    "@dataimago/tokens": "^0.1.0-alpha.18",
-    "@dataimago/brand": "^0.1.0-alpha.7"
+    "@dataimago/brand": "^0.1.0-alpha.8",
+    "@dataimago/css": "^0.1.0-alpha.34",
+    "@dataimago/tokens": "^0.1.0-alpha.33"
   },
   "keywords": [
     "react",