@motir/design-system 0.10.0 → 0.11.0

package/dist/specimen/TokensSpecimen.js

@@ -1,60 +1,11 @@
 'use client';
-import { createContext, forwardRef, useId, useState, useSyncExternalStore, useEffect, useRef, useCallback, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { BookOpen, Search, SlidersHorizontal } from 'lucide-react';
 
-// src/theme/typography.ts
-var TYPE_REGISTRY = {
-  motir: {
-    id: "motir",
-    name: "Motir",
-    tagline: "Editorial serif headlines over a clean sans body \u2014 the house pairing.",
-    faces: "Source Serif 4 headlines \xB7 Inter body \xB7 JetBrains Mono meta.",
-    designDoc: "docs/typography/motir.md"
-  },
-  "motir-sans": {
-    id: "motir-sans",
-    name: "Motir Sans",
-    tagline: "All-sans \u2014 Inter for headlines and body; structural, no serif.",
-    faces: "Inter headlines + body \xB7 JetBrains Mono meta.",
-    designDoc: "docs/typography/motir-sans.md"
-  },
-  "motir-mono": {
-    id: "motir-mono",
-    name: "Motir Mono",
-    tagline: "Monospace throughout \u2014 a code-native UI, headlines, body and all.",
-    faces: "JetBrains Mono headlines + body/UI + meta.",
-    designDoc: "docs/typography/motir-mono.md"
-  },
-  grotesk: {
-    id: "grotesk",
-    name: "Grotesk",
-    tagline: "Geometric neo-grotesque across the whole UI \u2014 tight, confident, product-y.",
-    faces: "Space Grotesk headlines + body/UI \xB7 JetBrains Mono meta.",
-    designDoc: "docs/typography/grotesk.md"
-  },
-  editorial: {
-    id: "editorial",
-    name: "Editorial",
-    tagline: "A characterful display serif over a humanist sans \u2014 magazine, considered.",
-    faces: "Fraunces display headlines \xB7 Inter body \xB7 JetBrains Mono meta.",
-    designDoc: "docs/typography/editorial.md"
-  },
-  "mono-technical": {
-    id: "mono-technical",
-    name: "Mono-Technical",
-    tagline: "IBM Plex Mono throughout \u2014 a precise, developer-grade UI.",
-    faces: "IBM Plex Mono headlines + body/UI + meta/code.",
-    designDoc: "docs/typography/mono-technical.md"
-  }
-};
-function isTypeId(value) {
-  return typeof value === "string" && Object.prototype.hasOwnProperty.call(TYPE_REGISTRY, value);
-}
-
 // src/theme/styles.ts
 var STYLE_REGISTRY = {
   "warm-editorial": {
@@ -257,13 +208,6 @@ var STYLE_REGISTRY = {
   }
 };
 var STYLE_IDS = Object.keys(STYLE_REGISTRY);
-var DEFAULT_STYLE_ID = "warm-editorial";
-function isStyleId(value) {
-  return typeof value === "string" && Object.prototype.hasOwnProperty.call(STYLE_REGISTRY, value);
-}
-function resolveStyle(value) {
-  return STYLE_REGISTRY[isStyleId(value) ? value : DEFAULT_STYLE_ID];
-}
 Object.fromEntries(
   STYLE_IDS.map((id) => [id, STYLE_REGISTRY[id].defaultTypeId])
 );
@@ -342,234 +286,6 @@ var PALETTE_REGISTRY = {
   }
 };
 var PALETTE_IDS = Object.keys(PALETTE_REGISTRY);
-var DEFAULT_PALETTE_ID = "motir";
-function isPaletteId(value) {
-  return typeof value === "string" && Object.prototype.hasOwnProperty.call(PALETTE_REGISTRY, value);
-}
-
-// src/theme/types.ts
-var THEME_STORAGE_KEYS = {
-  pattern: "motir.theme.pattern",
-  style: "motir.theme.style",
-  palette: "motir.theme.palette",
-  type: "motir.theme.type",
-  /**
-   * The version marker of the STORED palette id's meaning. Absent (or anything
-   * but {@link PALETTE_IDS_VERSION}) means the stored `palette` was written
-   * before MOTIR-6471 swapped the palette identities, so it is read through
-   * {@link PALETTE_ID_MIGRATION} once and the marker is then written.
-   */
-  paletteIds: "motir.theme.paletteIds"
-};
-var PALETTE_IDS_VERSION = "2";
-var PALETTE_ID_MIGRATION = {
-  motir: "amethyst",
-  graphite: "motir"
-};
-function migrateStoredPaletteId(value, marker) {
-  if (value === null || marker === PALETTE_IDS_VERSION) return value;
-  if (!Object.prototype.hasOwnProperty.call(PALETTE_ID_MIGRATION, value)) return value;
-  return PALETTE_ID_MIGRATION[value] ?? value;
-}
-var THEME_DEFAULTS = {
-  pattern: "system",
-  style: DEFAULT_STYLE_ID};
-var SYNC_DEBOUNCE_MS = 250;
-var ThemeContext = createContext(null);
-function readStorage(key, fallback) {
-  if (typeof window === "undefined") return fallback;
-  try {
-    return window.localStorage.getItem(key) ?? fallback;
-  } catch {
-    return fallback;
-  }
-}
-function subscribeColorScheme(callback) {
-  if (typeof window === "undefined") return () => {
-  };
-  const mql = window.matchMedia("(prefers-color-scheme: dark)");
-  mql.addEventListener("change", callback);
-  return () => mql.removeEventListener("change", callback);
-}
-function getColorSchemeSnapshot() {
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function getColorSchemeServerSnapshot() {
-  return "light";
-}
-function ThemeProvider({
-  children,
-  initialPreference = null,
-  signedIn = false
-}) {
-  const [pattern, setPatternState] = useState(
-    () => initialPreference ? initialPreference.pattern : readStorage(THEME_STORAGE_KEYS.pattern, THEME_DEFAULTS.pattern)
-  );
-  const [styleId, setStyleIdState] = useState(() => {
-    if (initialPreference) {
-      return isStyleId(initialPreference.styleId) ? initialPreference.styleId : DEFAULT_STYLE_ID;
-    }
-    const stored = readStorage(THEME_STORAGE_KEYS.style, THEME_DEFAULTS.style);
-    return isStyleId(stored) ? stored : DEFAULT_STYLE_ID;
-  });
-  const [palette, setPaletteState] = useState(() => {
-    if (initialPreference) {
-      return isPaletteId(initialPreference.paletteId) ? initialPreference.paletteId : DEFAULT_PALETTE_ID;
-    }
-    const stored = migrateStoredPaletteId(
-      readStorage(THEME_STORAGE_KEYS.palette, "") || null,
-      readStorage(THEME_STORAGE_KEYS.paletteIds, "") || null
-    );
-    return isPaletteId(stored) ? stored : DEFAULT_PALETTE_ID;
-  });
-  const [typeChoice, setTypeChoiceState] = useState(() => {
-    if (initialPreference) {
-      return initialPreference.typePinned && isTypeId(initialPreference.typeId) ? initialPreference.typeId : null;
-    }
-    const stored = readStorage(THEME_STORAGE_KEYS.type, "");
-    return isTypeId(stored) ? stored : null;
-  });
-  const osColorScheme = useSyncExternalStore(
-    subscribeColorScheme,
-    getColorSchemeSnapshot,
-    getColorSchemeServerSnapshot
-  );
-  const resolvedPattern = pattern === "system" ? osColorScheme : pattern;
-  const type = typeChoice ?? resolveStyle(styleId).defaultTypeId;
-  useEffect(() => {
-    document.documentElement.setAttribute("data-theme", resolvedPattern);
-  }, [resolvedPattern]);
-  useEffect(() => {
-    document.documentElement.setAttribute("data-style", styleId);
-  }, [styleId]);
-  useEffect(() => {
-    document.documentElement.setAttribute("data-palette", palette);
-  }, [palette]);
-  useEffect(() => {
-    document.documentElement.setAttribute("data-type", type);
-  }, [type]);
-  const [syncState, setSyncState] = useState("idle");
-  const syncSeqRef = useRef(0);
-  const pendingPatchRef = useRef({});
-  const debounceRef = useRef(null);
-  const reconcile = useCallback((sent, resolved) => {
-    if ("pattern" in sent) setPatternState(resolved.pattern);
-    if ("styleId" in sent && isStyleId(resolved.styleId)) setStyleIdState(resolved.styleId);
-    if ("paletteId" in sent && isPaletteId(resolved.paletteId)) setPaletteState(resolved.paletteId);
-    if ("typeId" in sent && isTypeId(resolved.typeId)) setTypeChoiceState(resolved.typeId);
-  }, []);
-  const flushSync = useCallback(() => {
-    debounceRef.current = null;
-    const patch = pendingPatchRef.current;
-    pendingPatchRef.current = {};
-    if (Object.keys(patch).length === 0) return;
-    const seq = ++syncSeqRef.current;
-    fetch("/api/appearance-preference", {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(patch)
-    }).then(async (res) => {
-      if (!res.ok) throw new Error(`appearance sync failed: ${res.status}`);
-      const body = await res.json();
-      if (seq !== syncSeqRef.current) return;
-      reconcile(patch, body.preference);
-      setSyncState("idle");
-    }).catch(() => {
-      if (seq !== syncSeqRef.current) return;
-      setSyncState("error");
-    });
-  }, [reconcile]);
-  const queueSync = useCallback(
-    (patch) => {
-      if (!signedIn) return;
-      pendingPatchRef.current = { ...pendingPatchRef.current, ...patch };
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(flushSync, SYNC_DEBOUNCE_MS);
-    },
-    [signedIn, flushSync]
-  );
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-        flushSync();
-      }
-    };
-  }, [flushSync]);
-  const setPattern = useCallback(
-    (next) => {
-      setPatternState(next);
-      try {
-        window.localStorage.setItem(THEME_STORAGE_KEYS.pattern, next);
-      } catch {
-      }
-      queueSync({ pattern: next });
-    },
-    [queueSync]
-  );
-  const setStyleId = useCallback(
-    (next) => {
-      setStyleIdState(next);
-      try {
-        window.localStorage.setItem(THEME_STORAGE_KEYS.style, next);
-      } catch {
-      }
-      queueSync({ styleId: next });
-    },
-    [queueSync]
-  );
-  const setPalette = useCallback(
-    (next) => {
-      setPaletteState(next);
-      try {
-        window.localStorage.setItem(THEME_STORAGE_KEYS.palette, next);
-        window.localStorage.setItem(THEME_STORAGE_KEYS.paletteIds, PALETTE_IDS_VERSION);
-      } catch {
-      }
-      queueSync({ paletteId: next });
-    },
-    [queueSync]
-  );
-  const setType = useCallback(
-    (next) => {
-      setTypeChoiceState(next);
-      try {
-        window.localStorage.setItem(THEME_STORAGE_KEYS.type, next);
-      } catch {
-      }
-      queueSync({ typeId: next });
-    },
-    [queueSync]
-  );
-  const value = useMemo(
-    () => ({
-      pattern,
-      resolvedPattern,
-      styleId,
-      palette,
-      type,
-      setPattern,
-      setStyleId,
-      setPalette,
-      setType,
-      syncState
-    }),
-    [
-      pattern,
-      resolvedPattern,
-      styleId,
-      palette,
-      type,
-      setPattern,
-      setStyleId,
-      setPalette,
-      setType,
-      syncState
-    ]
-  );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
-}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -602,8 +318,11 @@ var buttonVariants = cva(
   cn(
     // Base layout
     "inline-flex items-center justify-center gap-2",
-    // Typography
-    "font-sans text-sm font-medium leading-none",
+    // Typography. `whitespace-nowrap`: a label longer than its English draft
+    // (German and Polish run 30–40% longer) WIDENS the button instead of
+    // wrapping to a second line inside a box one line tall, where the text
+    // spills out of the control (MOTIR-7759).
+    "font-sans text-sm font-medium leading-none whitespace-nowrap",
     // Shape — semantic tokens that flip with the active style
     "rounded-(--radius-btn)",
     // Interaction
@@ -1124,7 +843,7 @@ function Swatches() {
   ] }, token)) });
 }
 function TokensSpecimen({ className }) {
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx("div", { className, "data-surface": "page", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[64rem] flex-col gap-8 p-8", children: [
+  return /* @__PURE__ */ jsx("div", { className, "data-surface": "page", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[64rem] flex-col gap-8 p-8", children: [
     /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "font-serif text-2xl font-semibold text-(--el-text)", children: "@motir/design-system" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-(--el-text-muted)", children: "Colour \xB7 Style \xB7 Type \u2014 the extracted 3-axis system, rendered in isolation." })
@@ -1154,7 +873,7 @@ function TokensSpecimen({ className }) {
       /* @__PURE__ */ jsx(SectionLabel, { children: "Palette axis (data-palette)" }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: PALETTE_IDS.map((palette) => /* @__PURE__ */ jsx(StyleVignette, { palette, label: `Palette: ${palette}` }, palette)) })
     ] })
-  ] }) }) });
+  ] }) });
 }
 var TokensSpecimen_default = TokensSpecimen;