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

package/README.md

@@ -2,27 +2,37 @@
 
 React components for the dataimago ethical AI design system.
 
-> **Registry:** published to **public npm** (`registry.npmjs.org`) under the `@dataimago` scope alongside `@dataimago/tokens` and `@dataimago/css`. No scoped `.npmrc` or `GITHUB_PACKAGES_TOKEN` is required — a plain `pnpm install @dataimago/ui` works.
+> **Registry:** published to **public npm** (`registry.npmjs.org`) under the `@dataimago` scope alongside the rest of the design-system packages. No scoped `.npmrc` or `GITHUB_PACKAGES_TOKEN` is required — a plain `pnpm install @dataimago/ui` works.
 
 ## Peer dependencies
 
 - `react` ≥ 18
 - `react-dom` ≥ 18
+- `@dataimago/brand` ≥ 0.1.0-alpha.0
 - `@dataimago/tokens` ≥ 0.1.0-alpha.0
 - `@dataimago/css` ≥ 0.1.0-alpha.0 (visual styling consumes the semantic CSS variables emitted by this package)
 
-## Alpha scope
+## Alpha scope and exports
 
-Just one smoke component for now:
+Current public exports:
+
+- `<Button>` — smoke-level button using semantic CSS variables.
+- `<LogoMonogram>`, `<LogoMonogramBg>`, `<LogoWordmark>` — legacy outlined SVG brand marks.
+- `<Logo>` — manifest-driven mark renderer backed by `@dataimago/brand`.
+- `<BrandAnimation>` — decorative brand animation with reduced-motion poster fallback.
+- `<NavbarLogo>` — animated navbar mark with reduced-motion poster fallback.
 
 ```tsx
-import { Button } from '@dataimago/ui';
+import { BrandAnimation, Button, Logo, NavbarLogo } from '@dataimago/ui';
 
 <Button variant="primary">Generate</Button>
 <Button variant="secondary" size="sm">Cancel</Button>
+<Logo name="dataimago_dash_ai" variant="PATH" title="dataimago-ai" />
+<NavbarLogo name="dataimago-ai" />
+<BrandAnimation name="dataimago-ai" />
 ```
 
-Additional components get harvested from consumer prototypes (`dataimago-ai`, `dissertation.ai`, etc.) via the prototype-in-consumer workflow.
+Additional components get harvested from consumer prototypes (`dataimago-ai`, `dissertation-ai`, etc.) via the prototype-in-consumer workflow. Broad new primitives are deferred until the substrate is stable and L1/L2 usage identifies reusable candidates.
 
 ## Building
 
@@ -46,3 +56,7 @@ use semantic CSS variables rather than app-local Tailwind classes. When the dev
 server is running, the Storybook MCP addon is available at
 `http://localhost:6006/mcp` for AI-assisted component discovery and story
 testing.
+
+Accessibility checks are progressively hardened: current stories surface a11y
+findings for review, and the gate should move to blocking only after the existing
+story set is clean.

package/dist/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -30,10 +31,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BrandAnimation: () => BrandAnimation,
   Button: () => Button,
+  CopulaLockup: () => CopulaLockup,
+  Logo: () => Logo,
   LogoMonogram: () => LogoMonogram,
   LogoMonogramBg: () => LogoMonogramBg,
-  LogoWordmark: () => LogoWordmark
+  LogoWordmark: () => LogoWordmark,
+  NavbarLogo: () => NavbarLogo,
+  THEME_ATTRIBUTE: () => THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY: () => THEME_STORAGE_KEY,
+  ThemeScript: () => ThemeScript,
+  ThemeToggle: () => ThemeToggle,
+  nextThemePreference: () => nextThemePreference,
+  readThemePreference: () => readThemePreference,
+  resolveTheme: () => resolveTheme,
+  setThemePreference: () => setThemePreference,
+  themeInitScript: () => themeInitScript,
+  useResolvedTheme: () => useResolvedTheme,
+  useThemePreference: () => useThemePreference
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -180,7 +196,7 @@ function LogoMonogramBg({
             height: "100%",
             rx: "40",
             ry: "40",
-            fill: "var(--color-interactive-accent, #b54a27)"
+            fill: "var(--color-interactive-accent, #1f618d)"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -228,7 +244,7 @@ function LogoWordmark({
             height: "100%",
             rx: "5",
             ry: "5",
-            fill: "var(--color-interactive-accent, #b54a27)"
+            fill: "var(--color-interactive-accent, #1f618d)"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -249,11 +265,421 @@ function LogoWordmark({
     }
   );
 }
+
+// src/brand/Logo.tsx
+var import_brand = require("@dataimago/brand");
+
+// src/brand/decorative.ts
+function silenceSvg(markup) {
+  return markup.replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, "").replace(/<svg\b([^>]*)>/i, (_m, attrs) => {
+    const kept = attrs.replace(/\srole="[^"]*"/i, "").replace(/\saria-label="[^"]*"/i, "").replace(/\saria-labelledby="[^"]*"/i, "");
+    return `<svg${kept} aria-hidden="true" focusable="false">`;
+  });
+}
+function isDecorative(ariaHidden) {
+  return ariaHidden === true || ariaHidden === "true";
+}
+
+// src/brand/Logo.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Logo({ name, variant = "PATH", width, style, ...rest }) {
+  const key = `${name}_${variant}`;
+  let markup = import_brand.svgs[key];
+  if (!markup) {
+    console.warn(`[@dataimago/ui] <Logo>: unknown mark "${key}".`);
+    return null;
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/brand/CopulaLockup.tsx
+var import_brand2 = require("@dataimago/brand");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BADGE = 16 / 32;
+var GAP = 19.7 / 32;
+var CROP = 10 / 32;
+var VISUALLY_HIDDEN = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1
+};
+var round = (n) => Math.round(n * 100) / 100;
+function pathEntry(id) {
+  return import_brand2.manifest.find((e) => e.id === id && e.variant === "PATH");
+}
+var plainLink = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { ...props, children });
+function CopulaLockup({
+  property,
+  propertyLabel,
+  propertyHref = "/",
+  dataimago = "shown",
+  brandHref = "https://dataimago.ai",
+  height = 32,
+  linkClassName,
+  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(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function BrandAnimation({
+  name,
+  width,
+  style,
+  ...rest
+}) {
+  const reduced = usePrefersReducedMotion();
+  const entry = import_brand3.animationManifest.find((a) => a.id === name);
+  let markup = import_brand3.animations[name];
+  if (!entry || !markup) {
+    console.warn(`[@dataimago/ui] <BrandAnimation>: unknown animation "${name}".`);
+    return null;
+  }
+  if (reduced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Logo,
+      {
+        name: entry.poster.id,
+        variant: entry.poster.variant,
+        width,
+        style,
+        ...rest
+      }
+    );
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/brand/NavbarLogo.tsx
+var React3 = __toESM(require("react"), 1);
+var import_brand4 = require("@dataimago/brand");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function usePrefersReducedMotion2() {
+  const [reduced, setReduced] = React3.useState(true);
+  React3.useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function NavbarLogo({ name, width, style, ...rest }) {
+  const reduced = usePrefersReducedMotion2();
+  const entry = import_brand4.navbarManifest.find((n) => n.id === name);
+  let markup = import_brand4.navbarLogos[name];
+  if (!entry || !markup) {
+    console.warn(`[@dataimago/ui] <NavbarLogo>: unknown navbar mark "${name}".`);
+    return null;
+  }
+  if (reduced) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Logo,
+      {
+        name: entry.poster.id,
+        variant: entry.poster.variant,
+        width,
+        style,
+        ...rest
+      }
+    );
+  }
+  if (width != null) {
+    markup = markup.replace(/\swidth="[^"]*"/, ` width="${width}"`).replace(/\sheight="[^"]*"/, "");
+  }
+  if (isDecorative(rest["aria-hidden"])) markup = silenceSvg(markup);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      style: { display: "inline-flex", ...style },
+      dangerouslySetInnerHTML: { __html: markup },
+      ...rest
+    }
+  );
+}
+
+// src/theme/ThemeToggle.tsx
+var React5 = __toESM(require("react"), 1);
+
+// src/theme/theme.ts
+var React4 = __toESM(require("react"), 1);
+var THEME_STORAGE_KEY = "dataimago-theme";
+var THEME_ATTRIBUTE = "data-bs-theme";
+var CHANGE_EVENT = "dataimago:themechange";
+var themeInitScript = `(function(){try{var p=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});if(p==='light'||p==='dark'){document.documentElement.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},p);}}catch(e){}})();`;
+function isPreference(value) {
+  return value === "system" || value === "light" || value === "dark";
+}
+function readThemePreference() {
+  if (typeof window === "undefined") return "system";
+  try {
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isPreference(stored) ? stored : "system";
+  } catch {
+    return "system";
+  }
+}
+function applyAttribute(preference) {
+  const root = document.documentElement;
+  if (preference === "system") root.removeAttribute(THEME_ATTRIBUTE);
+  else root.setAttribute(THEME_ATTRIBUTE, preference);
+}
+function setThemePreference(preference) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preference === "system") window.localStorage.removeItem(THEME_STORAGE_KEY);
+    else window.localStorage.setItem(THEME_STORAGE_KEY, preference);
+  } catch {
+  }
+  applyAttribute(preference);
+  window.dispatchEvent(new Event(CHANGE_EVENT));
+}
+function resolveTheme() {
+  if (typeof document === "undefined") return "light";
+  const forced = document.documentElement.getAttribute(THEME_ATTRIBUTE);
+  if (forced === "light" || forced === "dark") return forced;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function syncAttribute() {
+  applyAttribute(readThemePreference());
+}
+function subscribePreference(onChange) {
+  syncAttribute();
+  const onStorage = (e) => {
+    if (e.key !== null && e.key !== THEME_STORAGE_KEY) return;
+    applyAttribute(readThemePreference());
+    onChange();
+  };
+  window.addEventListener(CHANGE_EVENT, onChange);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    window.removeEventListener(CHANGE_EVENT, onChange);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+function subscribeResolved(onChange) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [THEME_ATTRIBUTE]
+  });
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", onChange);
+  window.addEventListener(CHANGE_EVENT, onChange);
+  syncAttribute();
+  return () => {
+    observer.disconnect();
+    media.removeEventListener("change", onChange);
+    window.removeEventListener(CHANGE_EVENT, onChange);
+  };
+}
+function useThemePreference() {
+  const preference = React4.useSyncExternalStore(
+    subscribePreference,
+    readThemePreference,
+    () => "system"
+  );
+  return [preference, setThemePreference];
+}
+function useResolvedTheme() {
+  return React4.useSyncExternalStore(subscribeResolved, resolveTheme, () => "light");
+}
+
+// src/theme/ThemeToggle.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_LABELS = {
+  name: "Theme",
+  system: "System",
+  light: "Light",
+  dark: "Dark"
+};
+function systemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function nextThemePreference(shown, system) {
+  const next = shown === "dark" ? "light" : "dark";
+  return next === system ? "system" : next;
+}
+var noSubscribe = () => () => {
+};
+function useHydrated() {
+  return React5.useSyncExternalStore(noSubscribe, () => true, () => false);
+}
+function Icon({ theme }) {
+  const common = {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    focusable: false
+  };
+  if (theme === "dark") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { ...common, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })
+  ] });
+}
+function ThemeToggle({ labels, className = "", style, ...rest }) {
+  const [preference, setPreference] = useThemePreference();
+  const resolved = useResolvedTheme();
+  const hydrated = useHydrated();
+  const shown = hydrated ? resolved : void 0;
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const label = shown ? `${text.name}: ${text[shown]}${preference === "system" ? ` (${text.system})` : ""}` : text.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      ...rest,
+      className: ["di-ui-theme-toggle", className].filter(Boolean).join(" "),
+      "aria-label": label,
+      title: label,
+      "data-theme-preference": preference,
+      "data-theme": shown,
+      style: {
+        alignItems: "center",
+        background: "var(--di-theme-toggle-bg, transparent)",
+        border: 0,
+        borderRadius: "var(--radius-md, 0.5rem)",
+        color: "var(--di-theme-toggle-fg, inherit)",
+        cursor: "pointer",
+        display: "inline-flex",
+        height: "48px",
+        justifyContent: "center",
+        padding: 0,
+        transition: "background-color 150ms ease",
+        width: "48px",
+        ...style
+      },
+      type: "button",
+      onClick: () => setPreference(nextThemePreference(resolveTheme(), systemTheme())),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { display: "inline-flex", visibility: shown ? "visible" : "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { theme: shown ?? "light" }) })
+    }
+  );
+}
+
+// src/theme/ThemeScript.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ThemeScript({ nonce }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("script", { nonce, dangerouslySetInnerHTML: { __html: themeInitScript } });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BrandAnimation,
   Button,
+  CopulaLockup,
+  Logo,
   LogoMonogram,
   LogoMonogramBg,
-  LogoWordmark
+  LogoWordmark,
+  NavbarLogo,
+  THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY,
+  ThemeScript,
+  ThemeToggle,
+  nextThemePreference,
+  readThemePreference,
+  resolveTheme,
+  setThemePreference,
+  themeInitScript,
+  useResolvedTheme,
+  useThemePreference
 });
 //# sourceMappingURL=index.cjs.map