@nebutra/ui 0.2.2 → 0.2.3

package/dist/typography/fonts.css

@@ -1,42 +1,37 @@
 /**
- * Font CSS Variables — SSOT for typography across Nebutra packages.
- * "Precision Stack" — Geist × Geist Mono × Noto Sans SC
+ * Font rules — the typography BEHAVIOUR layer (which element gets which stack).
+ * The STACKS themselves are owned by @nebutra/tokens, generated from
+ * packages/design/design-tokens/tokens/core.json → fontFamily.*.
  *
- * Font loading strategy (Next.js apps):
- * Each app's layout.tsx loads Latin fonts via geist/font:
- *   GeistSans  → injects --font-geist-sans  (variable font, 100–900)
- *   GeistMono  → injects --font-geist-mono  (variable font, 100–900)
+ * Font loading (Next.js apps): each app's layout.tsx applies the loader classes
+ *   GeistSans        → --font-geist-sans     (variable, 100–900)   Latin + numerals
+ *   GeistMono        → --font-geist-mono     (variable, 100–900)   code
+ *   cjkFontClassName → --font-vivo-sans-sc   (@nebutra/fonts/next/cjk)  CJK
+ * and the token stacks reference those variables in that order, so Geist keeps
+ * Latin and only CJK falls through to vivo Sans SC.
  *
- * The CSS custom properties below reference those injected variables and
- * fall back gracefully when font loaders are unavailable (e.g., Storybook, tests).
- * CJK uses local/system font fallback to avoid build-time Google font fetches.
+ * IMPORT ORDER MATTERS: this file must come AFTER @nebutra/tokens/styles.css
+ * (see ../styles/preset.css). It used to re-declare --font-sans / --font-heading /
+ * --font-mono here as Geist-only literals; being the later import, those copies
+ * won, and the CJK half of every token stack was silently discarded. Declare
+ * stacks in the tokens, never here.
  */
 
 /* ============================================
-   CSS Custom Properties (SSOT)
+   CSS Custom Properties — derived aliases only
    ============================================ */
 
 :root {
-  /* Primary font stack — Geist Sans (geometric precision, variable) */
-  --font-primary:
-    var(--font-geist-sans), "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-    sans-serif;
+  /* Legacy alias for the body/UI stack — the stack lives in the tokens. */
+  --font-primary: var(--font-sans);
 
-  /* Heading font stack — matches primary for Precision Stack */
-  --font-heading:
-    var(--font-geist-sans), "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-    sans-serif;
-
-  /* Monospace — Geist Mono */
-  --font-mono:
-    var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-
-  /* CJK — local/system fallback, no build-time font fetch */
+  /* CJK — appended as a fallback on the rules below (see the note there). The
+     token already leads with the self-hosted face; the system families repeat
+     here so this alias still degrades on its own. */
   --font-cjk:
     var(--font-cn), "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 
-  /* Aliases for Tailwind/shadcn compatibility */
-  --font-sans: var(--font-primary);
+  /* Not a token: no Nebutra surface uses a serif, this exists for shadcn parity. */
   --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 }
 

package/dist/utils/index.d.ts

@@ -1,7 +1,37 @@
 import { ClassValue } from 'clsx';
+import * as React from 'react';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+/**
+ * Base UI (and some Radix peers) type `style` as CSSProperties | state-function.
+ * Token merge helpers only need the plain object branch — drop functions so DTS
+ * builds stay green across monorepo and standalone package mirrors.
+ * Returns `{}` (never undefined) so spreads stay exactOptionalPropertyTypes-safe.
+ */
+declare function asPlainStyle(style: unknown): React.CSSProperties;
+type PrimitiveProps<T> = React.PropsWithChildren<T & {
+    className?: string | undefined;
+}>;
+type PrimitiveComponent<TElement, TProps> = React.ForwardRefExoticComponent<PrimitiveProps<TProps> & React.RefAttributes<TElement>>;
+/**
+ * Resolve the HTMLElement type for a given intrinsic element tag.
+ */
+type ElementForTag<E extends keyof React.JSX.IntrinsicElements> = E extends "button" ? HTMLButtonElement : E extends "span" ? HTMLSpanElement : E extends "img" ? HTMLImageElement : E extends "label" ? HTMLLabelElement : E extends "input" ? HTMLInputElement : E extends "a" ? HTMLAnchorElement : E extends "p" ? HTMLParagraphElement : E extends "h1" | "h2" | "h3" | "h4" | "h5" | "h6" ? HTMLHeadingElement : HTMLElement;
+/**
+ * Workaround for Radix UI types not resolving HTML element props (className,
+ * children, etc.) with React 19 + exactOptionalPropertyTypes.
+ *
+ * The optional second type parameter `Extra` allows preserving Radix-specific
+ * props (e.g. `asChild`, `align`, `sideOffset`) that are not standard HTML attrs.
+ *
+ * Usage:
+ *   const Header = withHtmlProps<"h3">(AccordionPrimitive.Header);
+ *   const Trigger = withHtmlProps<"button", { asChild?: boolean }>(DialogPrimitive.Trigger);
+ *   const Content = withHtmlProps<"div", { align?: string; sideOffset?: number }>(PopoverPrimitive.Content);
+ */
+declare function withHtmlProps<E extends keyof React.JSX.IntrinsicElements, Extra = object>(Component: any): React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<E> & Extra & React.RefAttributes<ElementForTag<E>>>;
+
 /**
  * Runtime color resolution for APIs that cannot consume CSS variables
  * (Canvas, WebGL, some animation libs).
@@ -80,4 +110,4 @@ type Breakpoint = keyof typeof BREAKPOINTS;
  */
 declare function isBreakpointUp(breakpoint: Breakpoint): boolean;
 
-export { BRAND_FALLBACK, BREAKPOINTS, type Breakpoint, cn, getBrandAccent, getBrandMark, getBrandMarkForeground, getBrandPrimary, getBrandTertiary, getProductPrimary, isBreakpointUp, readCssVar };
+export { BRAND_FALLBACK, BREAKPOINTS, type Breakpoint, type PrimitiveComponent, type PrimitiveProps, asPlainStyle, cn, getBrandAccent, getBrandMark, getBrandMarkForeground, getBrandPrimary, getBrandTertiary, getProductPrimary, isBreakpointUp, readCssVar, withHtmlProps };

package/dist/utils/index.js

@@ -7,6 +7,15 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
+function withHtmlProps(Component) {
+  return Component;
+}
+
 // src/utils/brand-colors.ts
 var BRAND_FALLBACK = {
   /** VI 云毓蓝 — identity only */
@@ -84,6 +93,6 @@ function isBreakpointUp(breakpoint) {
   return window.innerWidth >= BREAKPOINTS[breakpoint];
 }
 
-export { BRAND_FALLBACK, BREAKPOINTS, cn, getBrandAccent, getBrandMark, getBrandMarkForeground, getBrandPrimary, getBrandTertiary, getProductPrimary, isBreakpointUp, readCssVar };
+export { BRAND_FALLBACK, BREAKPOINTS, asPlainStyle, cn, getBrandAccent, getBrandMark, getBrandMarkForeground, getBrandPrimary, getBrandTertiary, getProductPrimary, isBreakpointUp, readCssVar, withHtmlProps };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts","../../src/utils/brand-colors.ts","../../src/utils/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","/**\n * Runtime color resolution for APIs that cannot consume CSS variables\n * (Canvas, WebGL, some animation libs).\n *\n * Layers (do not mix):\n * - Product action / CTA: getProductPrimary() → semantic `--primary` (roles.action)\n * - Brand mark / AI badge / logo tint: getBrandMark() → `--brand-mark` (roles.brand)\n * - VI lock (print / legal assets): getBrandPrimary() → `--brand-primary` hex\n *\n * Prefer CSS / Tailwind in components:\n * - `bg-primary` for CTAs\n * - `bg-brand-mark` / `text-brand-mark` for Logo/AI badge (see recipe.css)\n *\n * @see packages/design/ARCHITECTURE.md\n * @see packages/design/tokens/recipe.css\n */\n\n/** SSR fallbacks when document is unavailable */\nexport const BRAND_FALLBACK = {\n  /** VI 云毓蓝 — identity only */\n  primary: \"#0033FE\",\n  accent: \"#0BF1C3\",\n  tertiary: \"#5c7cfa\",\n  primaryDark: \"#002ad4\",\n  backDark: \"#000830\",\n  /** Soft product action (matches themes/light --primary ≈ #254bfa) */\n  productPrimary: \"#254bfa\",\n  /**\n   * Brand mark fallback (= product action when factory brand has action≡brand).\n   * Skins may diverge (e.g. Linear purple action + indigo mark).\n   */\n  brandMark: \"#254bfa\",\n  brandMarkForeground: \"#ffffff\",\n} as const;\n\n/**\n * Read a CSS variable from :root and return its trimmed value.\n */\nexport function readCssVar(name: string, fallback: string): string {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return fallback;\n  }\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\n\n/** Turn HSL channel triple or full color into a CSS color string. */\nfunction asCssColor(value: string, fallback: string): string {\n  const v = value.trim() || fallback;\n  if (\n    v.startsWith(\"#\") ||\n    v.startsWith(\"rgb\") ||\n    v.startsWith(\"hsl\") ||\n    v.startsWith(\"oklch\") ||\n    v.startsWith(\"color(\")\n  ) {\n    return v;\n  }\n  // shadcn-style \"228 85% 56%\"\n  return `hsl(${v})`;\n}\n\n/**\n * Product action color — follows the active skin (`--primary`).\n * Use for shaders/canvas that must match buttons/CTAs.\n */\nexport function getProductPrimary(): string {\n  return asCssColor(readCssVar(\"--primary\", \"228 85% 56%\"), BRAND_FALLBACK.productPrimary);\n}\n\n/** VI lock color — legal / print lockups only (not product chrome). */\nexport function getBrandPrimary(): string {\n  return asCssVarColor(\"--brand-primary\", BRAND_FALLBACK.primary);\n}\n\n/**\n * Product brand-mark (roles.brand) — Logo tile, AI badge, identity chips.\n * Never use for default CTA (that is getProductPrimary / --primary).\n */\nexport function getBrandMark(): string {\n  const raw = readCssVar(\"--brand-mark\", \"228 85% 56%\");\n  // Factory recipe defaults `--brand-mark: var(--primary)` — resolve to action color.\n  if (/var\\(\\s*--primary\\s*\\)/u.test(raw)) {\n    return getProductPrimary();\n  }\n  return asCssColor(raw, BRAND_FALLBACK.brandMark);\n}\n\n/** Foreground on brand-mark surfaces. */\nexport function getBrandMarkForeground(): string {\n  const raw = readCssVar(\"--brand-mark-foreground\", \"0 0% 100%\");\n  if (/var\\(\\s*--primary-foreground\\s*\\)/u.test(raw)) {\n    return asCssColor(\n      readCssVar(\"--primary-foreground\", \"0 0% 100%\"),\n      BRAND_FALLBACK.brandMarkForeground,\n    );\n  }\n  return asCssColor(raw, BRAND_FALLBACK.brandMarkForeground);\n}\n\nfunction asCssVarColor(name: string, fallback: string): string {\n  return asCssColor(readCssVar(name, fallback), fallback);\n}\n\nexport function getBrandAccent(): string {\n  return asCssVarColor(\"--brand-accent\", BRAND_FALLBACK.accent);\n}\n\nexport function getBrandTertiary(): string {\n  return asCssVarColor(\"--brand-tertiary\", BRAND_FALLBACK.tertiary);\n}\n","/**\n * Utility Functions\n */\n\n/**\n * Merge class names — canonical implementation from ./cn.ts\n * Uses twMerge(clsx(...)) to correctly resolve Tailwind class conflicts.\n */\nexport { cn } from \"./cn\";\n\n/**\n * Breakpoint values (matches Primer)\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 544,\n  md: 768,\n  lg: 1012,\n  xl: 1280,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Check if viewport is at or above breakpoint\n */\nexport function isBreakpointUp(breakpoint: Breakpoint): boolean {\n  if (typeof window === \"undefined\") return true;\n  return window.innerWidth >= BREAKPOINTS[breakpoint];\n}\n\nexport {\n  BRAND_FALLBACK,\n  getBrandAccent,\n  getBrandMark,\n  getBrandMarkForeground,\n  getBrandPrimary,\n  getBrandTertiary,\n  getProductPrimary,\n  readCssVar,\n} from \"./brand-colors\";\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/utils/primitive-props.ts","../../src/utils/brand-colors.ts","../../src/utils/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import type * as React from \"react\";\n\n/**\n * Base UI (and some Radix peers) type `style` as CSSProperties | state-function.\n * Token merge helpers only need the plain object branch — drop functions so DTS\n * builds stay green across monorepo and standalone package mirrors.\n * Returns `{}` (never undefined) so spreads stay exactOptionalPropertyTypes-safe.\n */\nexport function asPlainStyle(style: unknown): React.CSSProperties {\n  if (style == null || typeof style === \"function\") return {};\n  return style as React.CSSProperties;\n}\n\nexport type PrimitiveProps<T> = React.PropsWithChildren<T & { className?: string | undefined }>;\n\nexport type PrimitiveComponent<TElement, TProps> = React.ForwardRefExoticComponent<\n  PrimitiveProps<TProps> & React.RefAttributes<TElement>\n>;\n\n/**\n * Resolve the HTMLElement type for a given intrinsic element tag.\n */\ntype ElementForTag<E extends keyof React.JSX.IntrinsicElements> = E extends \"button\"\n  ? HTMLButtonElement\n  : E extends \"span\"\n    ? HTMLSpanElement\n    : E extends \"img\"\n      ? HTMLImageElement\n      : E extends \"label\"\n        ? HTMLLabelElement\n        : E extends \"input\"\n          ? HTMLInputElement\n          : E extends \"a\"\n            ? HTMLAnchorElement\n            : E extends \"p\"\n              ? HTMLParagraphElement\n              : E extends \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n                ? HTMLHeadingElement\n                : HTMLElement;\n\n/**\n * Workaround for Radix UI types not resolving HTML element props (className,\n * children, etc.) with React 19 + exactOptionalPropertyTypes.\n *\n * The optional second type parameter `Extra` allows preserving Radix-specific\n * props (e.g. `asChild`, `align`, `sideOffset`) that are not standard HTML attrs.\n *\n * Usage:\n *   const Header = withHtmlProps<\"h3\">(AccordionPrimitive.Header);\n *   const Trigger = withHtmlProps<\"button\", { asChild?: boolean }>(DialogPrimitive.Trigger);\n *   const Content = withHtmlProps<\"div\", { align?: string; sideOffset?: number }>(PopoverPrimitive.Content);\n */\n\nexport function withHtmlProps<E extends keyof React.JSX.IntrinsicElements, Extra = object>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  Component: any,\n): React.ForwardRefExoticComponent<\n  React.ComponentPropsWithoutRef<E> & Extra & React.RefAttributes<ElementForTag<E>>\n> {\n  return Component;\n}\n","/**\n * Runtime color resolution for APIs that cannot consume CSS variables\n * (Canvas, WebGL, some animation libs).\n *\n * Layers (do not mix):\n * - Product action / CTA: getProductPrimary() → semantic `--primary` (roles.action)\n * - Brand mark / AI badge / logo tint: getBrandMark() → `--brand-mark` (roles.brand)\n * - VI lock (print / legal assets): getBrandPrimary() → `--brand-primary` hex\n *\n * Prefer CSS / Tailwind in components:\n * - `bg-primary` for CTAs\n * - `bg-brand-mark` / `text-brand-mark` for Logo/AI badge (see recipe.css)\n *\n * @see packages/design/ARCHITECTURE.md\n * @see packages/design/tokens/recipe.css\n */\n\n/** SSR fallbacks when document is unavailable */\nexport const BRAND_FALLBACK = {\n  /** VI 云毓蓝 — identity only */\n  primary: \"#0033FE\",\n  accent: \"#0BF1C3\",\n  tertiary: \"#5c7cfa\",\n  primaryDark: \"#002ad4\",\n  backDark: \"#000830\",\n  /** Soft product action (matches themes/light --primary ≈ #254bfa) */\n  productPrimary: \"#254bfa\",\n  /**\n   * Brand mark fallback (= product action when factory brand has action≡brand).\n   * Skins may diverge (e.g. Linear purple action + indigo mark).\n   */\n  brandMark: \"#254bfa\",\n  brandMarkForeground: \"#ffffff\",\n} as const;\n\n/**\n * Read a CSS variable from :root and return its trimmed value.\n */\nexport function readCssVar(name: string, fallback: string): string {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return fallback;\n  }\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\n\n/** Turn HSL channel triple or full color into a CSS color string. */\nfunction asCssColor(value: string, fallback: string): string {\n  const v = value.trim() || fallback;\n  if (\n    v.startsWith(\"#\") ||\n    v.startsWith(\"rgb\") ||\n    v.startsWith(\"hsl\") ||\n    v.startsWith(\"oklch\") ||\n    v.startsWith(\"color(\")\n  ) {\n    return v;\n  }\n  // shadcn-style \"228 85% 56%\"\n  return `hsl(${v})`;\n}\n\n/**\n * Product action color — follows the active skin (`--primary`).\n * Use for shaders/canvas that must match buttons/CTAs.\n */\nexport function getProductPrimary(): string {\n  return asCssColor(readCssVar(\"--primary\", \"228 85% 56%\"), BRAND_FALLBACK.productPrimary);\n}\n\n/** VI lock color — legal / print lockups only (not product chrome). */\nexport function getBrandPrimary(): string {\n  return asCssVarColor(\"--brand-primary\", BRAND_FALLBACK.primary);\n}\n\n/**\n * Product brand-mark (roles.brand) — Logo tile, AI badge, identity chips.\n * Never use for default CTA (that is getProductPrimary / --primary).\n */\nexport function getBrandMark(): string {\n  const raw = readCssVar(\"--brand-mark\", \"228 85% 56%\");\n  // Factory recipe defaults `--brand-mark: var(--primary)` — resolve to action color.\n  if (/var\\(\\s*--primary\\s*\\)/u.test(raw)) {\n    return getProductPrimary();\n  }\n  return asCssColor(raw, BRAND_FALLBACK.brandMark);\n}\n\n/** Foreground on brand-mark surfaces. */\nexport function getBrandMarkForeground(): string {\n  const raw = readCssVar(\"--brand-mark-foreground\", \"0 0% 100%\");\n  if (/var\\(\\s*--primary-foreground\\s*\\)/u.test(raw)) {\n    return asCssColor(\n      readCssVar(\"--primary-foreground\", \"0 0% 100%\"),\n      BRAND_FALLBACK.brandMarkForeground,\n    );\n  }\n  return asCssColor(raw, BRAND_FALLBACK.brandMarkForeground);\n}\n\nfunction asCssVarColor(name: string, fallback: string): string {\n  return asCssColor(readCssVar(name, fallback), fallback);\n}\n\nexport function getBrandAccent(): string {\n  return asCssVarColor(\"--brand-accent\", BRAND_FALLBACK.accent);\n}\n\nexport function getBrandTertiary(): string {\n  return asCssVarColor(\"--brand-tertiary\", BRAND_FALLBACK.tertiary);\n}\n","/**\n * Utility Functions\n */\n\n/**\n * Merge class names — canonical implementation from ./cn.ts\n * Uses twMerge(clsx(...)) to correctly resolve Tailwind class conflicts.\n */\nexport { cn } from \"./cn\";\nexport { asPlainStyle, withHtmlProps, type PrimitiveProps, type PrimitiveComponent } from \"./primitive-props\";\n\n/**\n * Breakpoint values (matches Primer)\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 544,\n  md: 768,\n  lg: 1012,\n  xl: 1280,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Check if viewport is at or above breakpoint\n */\nexport function isBreakpointUp(breakpoint: Breakpoint): boolean {\n  if (typeof window === \"undefined\") return true;\n  return window.innerWidth >= BREAKPOINTS[breakpoint];\n}\n\nexport {\n  BRAND_FALLBACK,\n  getBrandAccent,\n  getBrandMark,\n  getBrandMarkForeground,\n  getBrandPrimary,\n  getBrandTertiary,\n  getProductPrimary,\n  readCssVar,\n} from \"./brand-colors\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebutra/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Nebutra design-system UI primitives, patterns, layouts, and token-integrated components",
   "private": false,
   "license": "MIT",
@@ -95,11 +95,13 @@
     "@lobehub/fluent-emoji": "^4.1.0",
     "@lobehub/icons": "^5.0.1",
     "@lobehub/ui": "^5.4.0",
-    "@xyflow/react": "^12.10.2",
     "@number-flow/react": "^0.5.5",
     "@paper-design/shaders-react": "^0.0.71",
     "@phosphor-icons/react": "^2.1.10",
     "@react-types/shared": "^3.33.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "@xyflow/react": "^12.10.2",
     "antd": "^6.3.1",
     "antd-style": "^4.1.0",
     "canvas-confetti": "^1.9.4",
@@ -120,24 +122,26 @@
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.7.1",
     "react-syntax-highlighter": "^16.1.1",
-    "remark-gfm": "^4.0.1",
     "react-tweet": "^3.3.0",
     "react-use-measure": "^2.1.7",
     "recharts": "^3.7.0",
+    "remark-gfm": "^4.0.1",
     "rough-notation": "^0.5.1",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "usehooks-ts": "^3.1.1",
     "vaul": "^1.1.2",
-    "@nebutra/brand": "0.1.2",
-    "@nebutra/graph-model": "0.2.2",
+    "@nebutra/tokens": "0.1.3",
     "@nebutra/icons": "0.1.2",
-    "@nebutra/tokens": "0.1.2"
+    "@nebutra/graph-model": "0.2.3",
+    "@nebutra/brand": "0.1.2"
   },
   "peerDependencies": {
     "@clerk/nextjs": ">=5.0.0",
+    "driver.js": "^1.4.0",
     "next": ">=14.0.0",
+    "next-intl": "^4.12.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -145,11 +149,18 @@
     "@clerk/nextjs": {
       "optional": true
     },
+    "driver.js": {
+      "optional": true
+    },
     "next": {
       "optional": true
+    },
+    "next-intl": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@storybook/react": "8.6.17",
     "@storybook/test": "^8.6.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -158,13 +169,16 @@
     "@types/react": "^19.2.14",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/three": "^0.183.1",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "driver.js": "^1.4.0",
     "next": "^16.2.6",
+    "next-intl": "^4.12.0",
     "storybook": "^8.6.17",
-    "@vitejs/plugin-react-swc": "^4.3.1",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18",
+    "jsdom": "^29.1.1",
     "@nebutra/design-tokens": "0.1.2"
   },
   "homepage": "https://github.com/Nebutra/Nebutra-Sailor/tree/main/packages/design/ui#readme",
@@ -183,6 +197,8 @@
     "@react-three/fiber": "^9.5.0",
     "three": "^0.183.2"
   },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "test": "vitest run",
     "typecheck": "tsc --noEmit",

package/src/styles/sources.css

@@ -25,3 +25,13 @@
 
 /* Icon components often appear in class strings next to UI primitives */
 @source "../../../icons/src/**/*.{ts,tsx,js,jsx}";
+
+/*
+ * @nebutra/i18n ships rendered components (locale-switcher, market-locale-picker),
+ * so its class strings need compiling too. Without this the utilities silently
+ * do not exist: the locale switcher asked for `bg-neutral-1` to opt out of the
+ * translucent popover surface and got nothing, so the DS default `bg-popover/95`
+ * kept winning and the panel stayed see-through — a fix that was correct in the
+ * source and absent from the stylesheet.
+ */
+@source "../../../../platform/i18n/src/**/*.{ts,tsx,js,jsx}";

package/src/typography/fonts.css

@@ -1,42 +1,37 @@
 /**
- * Font CSS Variables — SSOT for typography across Nebutra packages.
- * "Precision Stack" — Geist × Geist Mono × Noto Sans SC
+ * Font rules — the typography BEHAVIOUR layer (which element gets which stack).
+ * The STACKS themselves are owned by @nebutra/tokens, generated from
+ * packages/design/design-tokens/tokens/core.json → fontFamily.*.
  *
- * Font loading strategy (Next.js apps):
- * Each app's layout.tsx loads Latin fonts via geist/font:
- *   GeistSans  → injects --font-geist-sans  (variable font, 100–900)
- *   GeistMono  → injects --font-geist-mono  (variable font, 100–900)
+ * Font loading (Next.js apps): each app's layout.tsx applies the loader classes
+ *   GeistSans        → --font-geist-sans     (variable, 100–900)   Latin + numerals
+ *   GeistMono        → --font-geist-mono     (variable, 100–900)   code
+ *   cjkFontClassName → --font-vivo-sans-sc   (@nebutra/fonts/next/cjk)  CJK
+ * and the token stacks reference those variables in that order, so Geist keeps
+ * Latin and only CJK falls through to vivo Sans SC.
  *
- * The CSS custom properties below reference those injected variables and
- * fall back gracefully when font loaders are unavailable (e.g., Storybook, tests).
- * CJK uses local/system font fallback to avoid build-time Google font fetches.
+ * IMPORT ORDER MATTERS: this file must come AFTER @nebutra/tokens/styles.css
+ * (see ../styles/preset.css). It used to re-declare --font-sans / --font-heading /
+ * --font-mono here as Geist-only literals; being the later import, those copies
+ * won, and the CJK half of every token stack was silently discarded. Declare
+ * stacks in the tokens, never here.
  */
 
 /* ============================================
-   CSS Custom Properties (SSOT)
+   CSS Custom Properties — derived aliases only
    ============================================ */
 
 :root {
-  /* Primary font stack — Geist Sans (geometric precision, variable) */
-  --font-primary:
-    var(--font-geist-sans), "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-    sans-serif;
+  /* Legacy alias for the body/UI stack — the stack lives in the tokens. */
+  --font-primary: var(--font-sans);
 
-  /* Heading font stack — matches primary for Precision Stack */
-  --font-heading:
-    var(--font-geist-sans), "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
-    sans-serif;
-
-  /* Monospace — Geist Mono */
-  --font-mono:
-    var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-
-  /* CJK — local/system fallback, no build-time font fetch */
+  /* CJK — appended as a fallback on the rules below (see the note there). The
+     token already leads with the self-hosted face; the system families repeat
+     here so this alias still degrades on its own. */
   --font-cjk:
     var(--font-cn), "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 
-  /* Aliases for Tailwind/shadcn compatibility */
-  --font-sans: var(--font-primary);
+  /* Not a token: no Nebutra surface uses a serif, this exists for shadcn parity. */
   --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 }