@nebutra/theme 0.2.1 → 2.0.0

package/dist/language-switcher.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DesignLanguageEntry } from './languages.js';
+
+/** Catalog order, factory first — it is the way back. */
+declare const LANGUAGES: DesignLanguageEntry[];
+/**
+ * Flip the language, with the change animated rather than cut.
+ *
+ * The attribute swap rewrites some two hundred custom properties in one frame,
+ * and custom properties do not interpolate — so the whole page used to change
+ * between two frames and read as a reload. The properties that *read* those
+ * variables do interpolate, so a blanket transition is armed just before the
+ * flip and disarmed after: alive for the length of the change and no longer,
+ * because leaving it on would put 400ms of lag on every hover afterwards.
+ *
+ * Where the browser has view transitions, they replace that entirely. A
+ * cross-fade carries the discrete changes a property transition cannot — the
+ * typeface, gradients with different stop counts, shadow stacks of different
+ * lengths — because by then they are pixels rather than properties. Only one of
+ * the two ever runs: both together animate the same change twice, and two clocks
+ * beating against each other is its own kind of jitter.
+ *
+ * `requestAnimationFrame` before writing the attribute matters on the fallback
+ * path — set the class and the attribute in the same frame and the browser has
+ * no previous computed value to transition from, so it cuts anyway.
+ */
+declare function applyLanguageAttribute(id: string, animate?: boolean): void;
+/**
+ * Shared state for every mounted switcher.
+ *
+ * The state lives on the document element rather than in any one component, so
+ * two mounted controls broadcast to each other instead of each keeping a private
+ * copy that goes stale the moment the other is clicked.
+ */
+declare function useDesignLanguage(): {
+    active: string;
+    select: (id: string) => void;
+    ready: boolean;
+};
+interface DesignLanguageSwitcherProps {
+    className?: string;
+    /** `compact` for a header rail, `picker` for a primary on-page control. */
+    variant?: "compact" | "picker";
+    /** Shown under a `picker`: names the active language and what it changes. */
+    caption?: boolean;
+    /**
+     * Visible "Design language" label. Off where the surrounding surface already
+     * says it — on the marketing card the legend sat directly under a heading
+     * reading the same thing. Still rendered for assistive tech either way.
+     */
+    showLegend?: boolean;
+}
+/**
+ * Eight buttons and, optionally, a line saying what the current one does.
+ *
+ * Deliberately built from plain elements rather than the component library: this
+ * ships inside the package that defines the languages, and a control that
+ * re-skins itself mid-press is a distraction from the page it is re-skinning.
+ */
+declare function DesignLanguageSwitcher({ className, variant, caption, showLegend, }: DesignLanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { DesignLanguageSwitcher, type DesignLanguageSwitcherProps, LANGUAGES, applyLanguageAttribute, useDesignLanguage };

package/dist/language-switcher.js

@@ -0,0 +1,242 @@
+"use client";
+import {
+  LANGUAGE_REGISTRY
+} from "./chunk-4CNXYWPJ.js";
+
+// src/language-switcher.tsx
+import * as React from "react";
+
+// src/skin-fonts.generated.json
+var skin_fonts_generated_default = {
+  cosmos: [
+    "var(--font-reg-fraunces)",
+    "Fraunces",
+    "GT Super",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC",
+    "var(--font-jetbrains-mono)",
+    "JetBrains Mono"
+  ],
+  gsap: [
+    "var(--font-reg-inter-tight)",
+    "Mori",
+    "Inter Tight",
+    "DM Sans",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC"
+  ],
+  linear: [
+    "var(--font-inter)",
+    "Inter Variable",
+    "Inter",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC",
+    "var(--font-jetbrains-mono)",
+    "Berkeley Mono",
+    "JetBrains Mono"
+  ],
+  notion: [
+    "var(--font-inter)",
+    "NotionInter",
+    "Inter",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC"
+  ],
+  raycast: [
+    "var(--font-inter)",
+    "Inter",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC",
+    "var(--font-geist-mono)",
+    "Geist Mono",
+    "GeistMono",
+    "Menlo"
+  ],
+  stripe: [
+    "var(--font-reg-inter-tight)",
+    "sohne-var",
+    "Inter Tight",
+    "Inter",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC"
+  ],
+  vanta: [
+    "var(--font-inter)",
+    "Inter Variable",
+    "Inter",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC",
+    "var(--font-reg-source-serif-4)",
+    "Reckless",
+    "Source Serif 4",
+    "Lora"
+  ],
+  vercel: [
+    "var(--font-geist-sans)",
+    "Geist Sans",
+    "Geist",
+    "var(--font-noto-sans-sc",
+    'Noto Sans SC")',
+    "PingFang SC",
+    "var(--font-geist-mono)",
+    "Geist Mono",
+    "Menlo"
+  ]
+};
+
+// src/language-switcher.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STORAGE_KEY = "nebutra.design.brand";
+var CHANGE_EVENT = "nebutra.design.brandchange";
+var MORPH_MS = 460;
+var FONT_BUDGET_MS = 220;
+var morphTimer;
+var FONTS = skin_fonts_generated_default;
+var LANGUAGES = [
+  ...LANGUAGE_REGISTRY.languages.filter((l) => l.id === "factory"),
+  ...LANGUAGE_REGISTRY.languages.filter((l) => l.id !== "factory")
+];
+function readStored() {
+  if (typeof window === "undefined") return "factory";
+  try {
+    const value = sessionStorage.getItem(STORAGE_KEY);
+    if (value && LANGUAGES.some((l) => l.id === value)) return value;
+  } catch {
+  }
+  return "factory";
+}
+async function ensureFontsFor(id) {
+  const families = FONTS[id];
+  if (!families?.length || !document.fonts) return;
+  await Promise.race([
+    Promise.allSettled(
+      families.flatMap((family) => [
+        document.fonts.load(`400 1rem "${family}"`),
+        document.fonts.load(`600 1rem "${family}"`)
+      ])
+    ),
+    new Promise((resolve) => setTimeout(resolve, FONT_BUDGET_MS))
+  ]);
+}
+function supportsViewTransition() {
+  if (typeof document === "undefined") return false;
+  if (typeof document.startViewTransition !== "function") return false;
+  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function applyLanguageAttribute(id, animate = true) {
+  const root = document.documentElement;
+  const write = () => {
+    if (id === "factory") delete root.dataset.brand;
+    else root.dataset.brand = id;
+  };
+  if (!animate) {
+    write();
+  } else if (supportsViewTransition()) {
+    void ensureFontsFor(id).then(() => {
+      document.startViewTransition?.(() => {
+        write();
+      });
+    });
+  } else {
+    void ensureFontsFor(id).then(() => {
+      root.classList.add("brand-morphing");
+      clearTimeout(morphTimer);
+      requestAnimationFrame(() => {
+        write();
+        morphTimer = setTimeout(() => root.classList.remove("brand-morphing"), MORPH_MS);
+      });
+    });
+  }
+  try {
+    sessionStorage.setItem(STORAGE_KEY, id);
+  } catch {
+  }
+}
+function useDesignLanguage() {
+  const [active, setActive] = React.useState("factory");
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => {
+    const stored = readStored();
+    applyLanguageAttribute(stored, false);
+    setActive(stored);
+    setReady(true);
+    const onChange = (event) => setActive(event.detail);
+    window.addEventListener(CHANGE_EVENT, onChange);
+    return () => window.removeEventListener(CHANGE_EVENT, onChange);
+  }, []);
+  const select = React.useCallback((id) => {
+    applyLanguageAttribute(id);
+    window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: id }));
+  }, []);
+  return { active, select, ready };
+}
+function join(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function DesignLanguageSwitcher({
+  className,
+  variant = "compact",
+  caption = false,
+  showLegend = true
+}) {
+  const { active, select, ready } = useDesignLanguage();
+  const current = LANGUAGES.find((l) => l.id === active) ?? LANGUAGES[0];
+  const isPicker = variant === "picker";
+  return /* @__PURE__ */ jsxs("div", { className: join("flex flex-col gap-3", className), "data-ready": ready ? "true" : "false", children: [
+    /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        className: join(
+          "m-0 flex flex-wrap items-center border-0 p-0",
+          isPicker ? "gap-1.5" : "gap-1.5"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "legend",
+            {
+              className: isPicker || !showLegend ? "sr-only" : "mr-1 float-left w-auto font-mono text-[10px] text-muted-foreground uppercase tracking-wider",
+              children: "Design language"
+            }
+          ),
+          LANGUAGES.map((language) => {
+            const isActive = active === language.id;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-pressed": isActive,
+                className: join(
+                  "transition-[background-color,color,box-shadow] duration-micro ease-out",
+                  isPicker ? "rounded-panel px-3.5 py-2 font-medium text-[13px]" : "rounded-[var(--radius-sm,0.25rem)] px-2 py-1 font-medium text-[11px]",
+                  isActive ? join("bg-foreground text-background", isPicker && "shadow-ambient-sm") : "bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground"
+                ),
+                onClick: () => select(language.id),
+                type: "button",
+                children: language.shortName
+              },
+              language.id
+            );
+          })
+        ]
+      }
+    ),
+    caption && current && /* @__PURE__ */ jsxs("p", { className: "text-[13px] text-muted-foreground leading-relaxed", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: current.name }),
+      current.tagline ? ` \u2014 ${current.tagline}.` : ".",
+      " Colour roles, radii, elevation, type and easing move together, not just the palette."
+    ] })
+  ] });
+}
+export {
+  DesignLanguageSwitcher,
+  LANGUAGES,
+  applyLanguageAttribute,
+  useDesignLanguage
+};
+//# sourceMappingURL=language-switcher.js.map

package/dist/language-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/language-switcher.tsx","../src/skin-fonts.generated.json"],"sourcesContent":["\"use client\";\n\n/**\n * The control that switches design language, shared by every surface that has one.\n *\n * This was built inside the design site, where it was the whole point of the\n * page. When the marketing site wanted the same thing, the choice was to copy it\n * — a second list of eight languages, a second morph, a second storage key that\n * disagrees the moment either is edited — or to move it next to the mechanism.\n * `@nebutra/tokens` already ships the light/dark control; the language control\n * is its sibling and belongs here, beside skins.css and the catalog.\n *\n * Consumers import `@nebutra/theme/skins.css` and `@nebutra/theme/morph.css`,\n * then mount one of these. Nothing else is needed: the languages come from the\n * registry, the captions from the catalog, the typefaces from the map emitted\n * with the sheet.\n */\n\nimport * as React from \"react\";\nimport { type DesignLanguageEntry, LANGUAGE_REGISTRY } from \"./languages\";\nimport fontsByBrand from \"./skin-fonts.generated.json\";\n\nconst STORAGE_KEY = \"nebutra.design.brand\";\nconst CHANGE_EVENT = \"nebutra.design.brandchange\";\n\n/** How long the fallback blanket transition stays armed. Matches\n *  --brand-morph-duration in morph.css, plus a frame so the last interpolation\n *  lands before it is removed. */\nconst MORPH_MS = 460;\n\n/** How long a font may hold the switch. A proprietary family that will never\n *  resolve on this origin must not make the control look unresponsive; a\n *  dissolve of the fallback is a far better failure than one that does not run. */\nconst FONT_BUDGET_MS = 220;\n\nlet morphTimer: ReturnType<typeof setTimeout> | undefined;\n\nconst FONTS: Record<string, string[]> = fontsByBrand;\n\n/** Catalog order, factory first — it is the way back. */\nexport const LANGUAGES: DesignLanguageEntry[] = [\n  ...LANGUAGE_REGISTRY.languages.filter((l) => l.id === \"factory\"),\n  ...LANGUAGE_REGISTRY.languages.filter((l) => l.id !== \"factory\"),\n];\n\nfunction readStored(): string {\n  if (typeof window === \"undefined\") return \"factory\";\n  try {\n    const value = sessionStorage.getItem(STORAGE_KEY);\n    if (value && LANGUAGES.some((l) => l.id === value)) return value;\n  } catch {\n    /* private mode */\n  }\n  return \"factory\";\n}\n\n/**\n * Make the incoming typefaces resident before the snapshot is taken.\n *\n * Without this the dissolve photographs a fallback face and the real one swaps\n * in after the animation has finished — a jump landing on a settled page, which\n * is the one that actually reads as broken. `document.fonts.load` resolves\n * immediately for a face already resident, so the common path costs nothing.\n */\nasync function ensureFontsFor(id: string): Promise<void> {\n  const families = FONTS[id];\n  if (!families?.length || !document.fonts) return;\n  await Promise.race([\n    Promise.allSettled(\n      families.flatMap((family) => [\n        document.fonts.load(`400 1rem \"${family}\"`),\n        document.fonts.load(`600 1rem \"${family}\"`),\n      ]),\n    ),\n    new Promise((resolve) => setTimeout(resolve, FONT_BUDGET_MS)),\n  ]);\n}\n\nfunction supportsViewTransition(): boolean {\n  if (typeof document === \"undefined\") return false;\n  if (typeof document.startViewTransition !== \"function\") return false;\n  return !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/**\n * Flip the language, with the change animated rather than cut.\n *\n * The attribute swap rewrites some two hundred custom properties in one frame,\n * and custom properties do not interpolate — so the whole page used to change\n * between two frames and read as a reload. The properties that *read* those\n * variables do interpolate, so a blanket transition is armed just before the\n * flip and disarmed after: alive for the length of the change and no longer,\n * because leaving it on would put 400ms of lag on every hover afterwards.\n *\n * Where the browser has view transitions, they replace that entirely. A\n * cross-fade carries the discrete changes a property transition cannot — the\n * typeface, gradients with different stop counts, shadow stacks of different\n * lengths — because by then they are pixels rather than properties. Only one of\n * the two ever runs: both together animate the same change twice, and two clocks\n * beating against each other is its own kind of jitter.\n *\n * `requestAnimationFrame` before writing the attribute matters on the fallback\n * path — set the class and the attribute in the same frame and the browser has\n * no previous computed value to transition from, so it cuts anyway.\n */\nexport function applyLanguageAttribute(id: string, animate = true): void {\n  const root = document.documentElement;\n\n  const write = () => {\n    if (id === \"factory\") delete root.dataset.brand;\n    else root.dataset.brand = id;\n  };\n\n  if (!animate) {\n    write();\n  } else if (supportsViewTransition()) {\n    void ensureFontsFor(id).then(() => {\n      document.startViewTransition?.(() => {\n        write();\n      });\n    });\n  } else {\n    void ensureFontsFor(id).then(() => {\n      root.classList.add(\"brand-morphing\");\n      clearTimeout(morphTimer);\n      requestAnimationFrame(() => {\n        write();\n        morphTimer = setTimeout(() => root.classList.remove(\"brand-morphing\"), MORPH_MS);\n      });\n    });\n  }\n\n  try {\n    sessionStorage.setItem(STORAGE_KEY, id);\n  } catch {\n    /* private mode */\n  }\n}\n\n/**\n * Shared state for every mounted switcher.\n *\n * The state lives on the document element rather than in any one component, so\n * two mounted controls broadcast to each other instead of each keeping a private\n * copy that goes stale the moment the other is clicked.\n */\nexport function useDesignLanguage(): {\n  active: string;\n  select: (id: string) => void;\n  ready: boolean;\n} {\n  const [active, setActive] = React.useState(\"factory\");\n  const [ready, setReady] = React.useState(false);\n\n  React.useEffect(() => {\n    const stored = readStored();\n    // No animation on restore: there is no previous language to move away from,\n    // and a page that fades into its own colours on load looks like a bug.\n    applyLanguageAttribute(stored, false);\n    setActive(stored);\n    setReady(true);\n\n    const onChange = (event: Event) => setActive((event as CustomEvent<string>).detail);\n    window.addEventListener(CHANGE_EVENT, onChange);\n    return () => window.removeEventListener(CHANGE_EVENT, onChange);\n  }, []);\n\n  const select = React.useCallback((id: string) => {\n    applyLanguageAttribute(id);\n    window.dispatchEvent(new CustomEvent(CHANGE_EVENT, { detail: id }));\n  }, []);\n\n  return { active, select, ready };\n}\n\nfunction join(...parts: (string | false | null | undefined)[]): string {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface DesignLanguageSwitcherProps {\n  className?: string;\n  /** `compact` for a header rail, `picker` for a primary on-page control. */\n  variant?: \"compact\" | \"picker\";\n  /** Shown under a `picker`: names the active language and what it changes. */\n  caption?: boolean;\n  /**\n   * Visible \"Design language\" label. Off where the surrounding surface already\n   * says it — on the marketing card the legend sat directly under a heading\n   * reading the same thing. Still rendered for assistive tech either way.\n   */\n  showLegend?: boolean;\n}\n\n/**\n * Eight buttons and, optionally, a line saying what the current one does.\n *\n * Deliberately built from plain elements rather than the component library: this\n * ships inside the package that defines the languages, and a control that\n * re-skins itself mid-press is a distraction from the page it is re-skinning.\n */\nexport function DesignLanguageSwitcher({\n  className,\n  variant = \"compact\",\n  caption = false,\n  showLegend = true,\n}: DesignLanguageSwitcherProps) {\n  const { active, select, ready } = useDesignLanguage();\n  const current = LANGUAGES.find((l) => l.id === active) ?? LANGUAGES[0];\n  const isPicker = variant === \"picker\";\n\n  return (\n    <div className={join(\"flex flex-col gap-3\", className)} data-ready={ready ? \"true\" : \"false\"}>\n      <fieldset\n        className={join(\n          \"m-0 flex flex-wrap items-center border-0 p-0\",\n          isPicker ? \"gap-1.5\" : \"gap-1.5\",\n        )}\n      >\n        <legend\n          className={\n            isPicker || !showLegend\n              ? \"sr-only\"\n              : \"mr-1 float-left w-auto font-mono text-[10px] text-muted-foreground uppercase tracking-wider\"\n          }\n        >\n          Design language\n        </legend>\n        {LANGUAGES.map((language) => {\n          const isActive = active === language.id;\n          return (\n            <button\n              aria-pressed={isActive}\n              className={join(\n                \"transition-[background-color,color,box-shadow] duration-micro ease-out\",\n                isPicker\n                  ? \"rounded-panel px-3.5 py-2 font-medium text-[13px]\"\n                  : \"rounded-[var(--radius-sm,0.25rem)] px-2 py-1 font-medium text-[11px]\",\n                isActive\n                  ? join(\"bg-foreground text-background\", isPicker && \"shadow-ambient-sm\")\n                  : \"bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground\",\n              )}\n              key={language.id}\n              onClick={() => select(language.id)}\n              type=\"button\"\n            >\n              {language.shortName}\n            </button>\n          );\n        })}\n      </fieldset>\n      {caption && current && (\n        <p className=\"text-[13px] text-muted-foreground leading-relaxed\">\n          <span className=\"text-foreground\">{current.name}</span>\n          {current.tagline ? ` — ${current.tagline}.` : \".\"} Colour roles, radii, elevation, type\n          and easing move together, not just the palette.\n        </p>\n      )}\n    </div>\n  );\n}\n","{\n  \"cosmos\": [\n    \"var(--font-reg-fraunces)\",\n    \"Fraunces\",\n    \"GT Super\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\",\n    \"var(--font-jetbrains-mono)\",\n    \"JetBrains Mono\"\n  ],\n  \"gsap\": [\n    \"var(--font-reg-inter-tight)\",\n    \"Mori\",\n    \"Inter Tight\",\n    \"DM Sans\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\"\n  ],\n  \"linear\": [\n    \"var(--font-inter)\",\n    \"Inter Variable\",\n    \"Inter\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\",\n    \"var(--font-jetbrains-mono)\",\n    \"Berkeley Mono\",\n    \"JetBrains Mono\"\n  ],\n  \"notion\": [\n    \"var(--font-inter)\",\n    \"NotionInter\",\n    \"Inter\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\"\n  ],\n  \"raycast\": [\n    \"var(--font-inter)\",\n    \"Inter\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\",\n    \"var(--font-geist-mono)\",\n    \"Geist Mono\",\n    \"GeistMono\",\n    \"Menlo\"\n  ],\n  \"stripe\": [\n    \"var(--font-reg-inter-tight)\",\n    \"sohne-var\",\n    \"Inter Tight\",\n    \"Inter\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\"\n  ],\n  \"vanta\": [\n    \"var(--font-inter)\",\n    \"Inter Variable\",\n    \"Inter\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\",\n    \"var(--font-reg-source-serif-4)\",\n    \"Reckless\",\n    \"Source Serif 4\",\n    \"Lora\"\n  ],\n  \"vercel\": [\n    \"var(--font-geist-sans)\",\n    \"Geist Sans\",\n    \"Geist\",\n    \"var(--font-noto-sans-sc\",\n    \"Noto Sans SC\\\")\",\n    \"PingFang SC\",\n    \"var(--font-geist-mono)\",\n    \"Geist Mono\",\n    \"Menlo\"\n  ]\n}\n"],"mappings":"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","names":[]}

package/dist/languages.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Design-language catalog — the real product surface of @nebutra/theme.
+ *
+ * A "language" is a full Brand Package (roles + recipe + elev), proven by
+ * external DS stress tests (Linear / GSAP / Raycast / Vercel / Vanta / Stripe / Notion).
+ * Swapping `html[data-brand]` (or applyLanguage) recolors product chrome without
+ * call-site edits.
+ *
+ * Multi-mood oklch catalog was removed. Use LANGUAGE_REGISTRY / isLanguageId only.
+ */
+interface DesignLanguageInstall {
+    command: string;
+    /** Single-skin import for demos; null for factory */
+    cssImport: string | null;
+}
+interface DesignLanguageCompatibility {
+    tailwind: "4";
+    cssVariables: boolean;
+    brandPackage: boolean;
+    dataBrand: boolean;
+}
+interface DesignLanguageEntry {
+    id: string;
+    name: string;
+    kind: "design-language";
+    description: string;
+    /**
+     * One line naming what this language does, for a picker's caption. Short on
+     * purpose — `description` is the catalog entry, this is the label under eight
+     * buttons. Null for a language whose meta has not written one.
+     */
+    tagline: string | null;
+    /** Button-width label. Falls back to `name` for the languages that fit. */
+    shortName: string;
+    /** Contract proofs this fixture exercises */
+    proves: string[];
+    darkDefault: boolean;
+    /** Relative to @nebutra/tokens package root; null = factory (no override) */
+    brandPath: string | null;
+    skinPath: string | null;
+    install: DesignLanguageInstall;
+    compatibility: DesignLanguageCompatibility;
+}
+interface DesignLanguageRegistry {
+    $schema: string;
+    version: string;
+    defaultLanguage: string;
+    description: string;
+    languages: DesignLanguageEntry[];
+}
+declare const LANGUAGE_REGISTRY: DesignLanguageRegistry;
+declare const LANGUAGE_IDS: string[];
+declare const DEFAULT_LANGUAGE: string;
+/** Alias — “theme” in product speak = design language */
+declare const BUILT_IN_LANGUAGE_IDS: string[];
+type LanguageId = string;
+declare function isLanguageId(id: string): boolean;
+declare function getLanguageById(id: string): DesignLanguageEntry | undefined;
+/** Fixture languages that ship a Brand Package (excludes factory). */
+declare function listSkinLanguages(): DesignLanguageEntry[];
+
+export { BUILT_IN_LANGUAGE_IDS, DEFAULT_LANGUAGE, type DesignLanguageCompatibility, type DesignLanguageEntry, type DesignLanguageInstall, type DesignLanguageRegistry, LANGUAGE_IDS, LANGUAGE_REGISTRY, type LanguageId, getLanguageById, isLanguageId, listSkinLanguages };

package/dist/languages.js

@@ -0,0 +1,19 @@
+import {
+  BUILT_IN_LANGUAGE_IDS,
+  DEFAULT_LANGUAGE,
+  LANGUAGE_IDS,
+  LANGUAGE_REGISTRY,
+  getLanguageById,
+  isLanguageId,
+  listSkinLanguages
+} from "./chunk-4CNXYWPJ.js";
+export {
+  BUILT_IN_LANGUAGE_IDS,
+  DEFAULT_LANGUAGE,
+  LANGUAGE_IDS,
+  LANGUAGE_REGISTRY,
+  getLanguageById,
+  isLanguageId,
+  listSkinLanguages
+};
+//# sourceMappingURL=languages.js.map

package/dist/languages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/morph.css

@@ -0,0 +1,99 @@
+/**
+ * @nebutra/theme — morph.css
+ *
+ * How a design-language change moves. Imported by any app that imports
+ * skins.css and lets people switch at runtime.
+ *
+ * This lived in the design site's globals.css, which was fine while the design
+ * site was the only thing that could switch. The moment a second app wanted the
+ * same control, the choice was to copy sixty lines of timing into it or to put
+ * them where the mechanism already lives. A language that morphs on one site and
+ * cuts on another is not one design system.
+ */
+
+/**
+ * The language change, as a transition rather than a cut.
+ *
+ * A Brand Package swap rewrites about two hundred custom properties at once,
+ * and custom properties do not animate — so every surface on the page changed
+ * in a single frame. Correct, and it read as a page reload.
+ *
+ * The properties that *read* those variables do animate, though: a
+ * `background-color` sourced from `hsl(var(--primary))` interpolates normally
+ * when the variable underneath it changes. So the switch turns this on, flips
+ * `data-brand`, and turns it off again — one blanket transition, alive for the
+ * length of the change and no longer. Leaving it on permanently would put a
+ * 400ms lag on every hover in the product surfaces this site renders, which is
+ * the opposite of what a design system should demonstrate.
+ *
+ * `font-family` is absent because it cannot interpolate — a typeface is a
+ * discrete value, and it snaps at the start while everything around it moves.
+ * Saying so is better than implying a morph that CSS cannot perform.
+ */
+html.brand-morphing,
+html.brand-morphing *,
+html.brand-morphing *::before,
+html.brand-morphing *::after {
+  transition-property:
+    background-color, background-image, color, border-color, border-radius,
+    box-shadow, fill, stroke, outline-color, text-decoration-color, opacity, padding, gap,
+    letter-spacing, font-size, font-weight, line-height, filter, backdrop-filter;
+  transition-duration: var(--brand-morph-duration, 420ms);
+  transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* Anything already carrying its own transition keeps it: a switch that reveals
+   the language should not also overwrite how the language moves. */
+html.brand-morphing [style*="transition"],
+html.brand-morphing .transition-none {
+  transition-property: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.brand-morphing,
+  html.brand-morphing *,
+  html.brand-morphing *::before,
+  html.brand-morphing *::after {
+    transition-duration: 0s;
+  }
+}
+
+/**
+ * The change as a cross-fade, where the browser can do one.
+ *
+ * The blanket transition above interpolates every property that *can*
+ * interpolate, and several of the most visible ones cannot. A typeface is a
+ * discrete value. Two gradients with different stop counts do not blend. Skins
+ * carry shadow stacks of different lengths — Raycast's is inset + ring + inset
+ * where Notion's is a single hairline — and mismatched lists snap. So the page
+ * would glide through its colours while the type and the elevation cut
+ * underneath, which is exactly the seam that reads as "not smooth".
+ *
+ * A view transition has no such limit: it photographs the old page, applies the
+ * change, and dissolves one image into the other. Fonts, gradients and shadows
+ * come along because they are pixels by then, not properties.
+ *
+ * Slightly slower than the property transition it replaces. A cross-fade needs
+ * the extra time to read as a dissolve rather than a flicker, and it is the
+ * whole page changing material — the one moment on this site where taking a
+ * beat is the point.
+ */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 560ms;
+  animation-timing-function: cubic-bezier(0.32, 0.08, 0.24, 1);
+}
+
+/* Both layers paint at once so it dissolves rather than wiping through the
+   backdrop — the default cross-fade leaves a pale frame mid-way on a light-to-
+   dark change, which is the flicker people notice. */
+::view-transition-old(root) {
+  mix-blend-mode: normal;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+}

package/package.json

@@ -1,35 +1,64 @@
 {
   "name": "@nebutra/theme",
-  "version": "0.2.1",
+  "version": "2.0.0",
   "type": "module",
   "description": "Design-language catalog for global product chrome swap (Brand Packages). Multi-mood oklch catalog removed.",
   "private": false,
+  "nebutra": {
+    "status": "foundation",
+    "graph": "core",
+    "productionReady": false
+  },
   "license": "MIT",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "./keyframes.css",
     "./themes.css",
     "./skins.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
-    "./client": "./src/client.ts",
-    "./languages": "./src/languages.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    },
+    "./language-switcher": {
+      "types": "./dist/language-switcher.d.ts",
+      "import": "./dist/language-switcher.js",
+      "default": "./dist/language-switcher.js"
+    },
+    "./languages": {
+      "types": "./dist/languages.d.ts",
+      "import": "./dist/languages.js",
+      "default": "./dist/languages.js"
+    },
     "./languages.json": "./src/languages.json",
-    "./brand-package": "./src/brand-package-surface.ts",
+    "./brand-package": {
+      "types": "./dist/brand-package-surface.d.ts",
+      "import": "./dist/brand-package-surface.js",
+      "default": "./dist/brand-package-surface.js"
+    },
     "./keyframes.css": "./keyframes.css",
     "./themes.css": "./themes.css",
-    "./skins.css": "./skins.css"
+    "./skins.css": "./skins.css",
+    "./morph.css": "./morph.css",
+    "./styles/sources.css": "./styles/sources.css"
   },
   "dependencies": {
-    "@nebutra/tokens": "0.1.2"
+    "@nebutra/tokens": "2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.4",
+    "tsup": "^8.5.1"
   },
   "peerDependencies": {
     "react": "^19"
@@ -46,8 +75,21 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "src/languages.json",
+    "keyframes.css",
+    "themes.css",
+    "skins.css",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "morph.css",
+    "styles"
+  ],
   "scripts": {
-    "build": "node scripts/sync-languages.mjs && node ../tokens/scripts/emit-skins.mjs && node scripts/sync-skins.mjs",
+    "build": "tsup",
+    "build:codegen": "node scripts/sync-languages.mjs && node ../tokens/scripts/emit-skins.mjs && node scripts/sync-skins.mjs && tsup",
     "sync": "node scripts/sync-languages.mjs && node scripts/sync-skins.mjs",
     "sync:languages": "node scripts/sync-languages.mjs",
     "sync:skins": "node scripts/sync-skins.mjs",