@nebutra/ui 0.2.3 → 3.0.0

package/dist/utils/index.js

@@ -1,8 +1,86 @@
-"use client";
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { tokenColor, tokenValue } from '@nebutra/tokens/values';
+
+// src/utils/auth-surfaces.ts
+var AUTH_FORM_COLUMN_CLASS = "relative mx-auto min-w-0 w-[min(100%,360px)] shrink-0";
+var AUTH_PRIMARY_CTA_CLASS = "h-11 w-full";
+var AUTH_OAUTH_GRID_CLASS = "grid grid-cols-2 gap-2";
+var AUTH_OAUTH_BUTTON_CLASS = "h-9 w-full justify-center gap-2 border-border bg-background px-2.5 text-sm font-medium text-foreground shadow-none hover:bg-muted";
+
+// src/utils/tw-merge-theme.generated.ts
+var TW_MERGE_THEME = {
+  breakpoint: ["3xl", "shell", "tight", "xs"],
+  container: ["content", "text", "wide"],
+  ease: ["brand", "in", "in-out", "out", "spring"],
+  font: ["cn", "display", "heading", "mono", "sans"],
+  leading: ["display", "heading"],
+  radius: ["2xl", "3xl", "button", "card", "full", "lg", "md", "none", "panel", "sm", "xl", "xs"],
+  shadow: [
+    "2xl",
+    "ambient-glow",
+    "ambient-lg",
+    "ambient-md",
+    "ambient-sm",
+    "brand",
+    "brand-lg",
+    "glass-lg",
+    "glass-md",
+    "glass-sm",
+    "glow-accent",
+    "glow-accent-lg",
+    "glow-accent-sm",
+    "glow-primary",
+    "lg",
+    "md",
+    "sheen",
+    "sm",
+    "xl",
+    "xs"
+  ],
+  text: [
+    "2xl",
+    "2xs",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+    "base",
+    "body",
+    "display",
+    "label",
+    "lg",
+    "meta",
+    "sm",
+    "ui",
+    "xl",
+    "xs"
+  ],
+  tracking: ["display", "heading", "label", "tight"]
+};
+var TW_MERGE_CLASS_GROUPS = {
+  duration: [{ duration: ["cinematic", "flow", "micro", "reveal"] }]
+};
 
 // src/utils/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: Object.fromEntries(
+      Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]])
+    ),
+    classGroups: Object.fromEntries(
+      Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [
+        key,
+        groups.map(
+          (group) => Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]]))
+        )
+      ])
+    )
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -15,23 +93,21 @@ function asPlainStyle(style) {
 function withHtmlProps(Component) {
   return Component;
 }
-
-// src/utils/brand-colors.ts
 var BRAND_FALLBACK = {
   /** VI 云毓蓝 — identity only */
-  primary: "#0033FE",
-  accent: "#0BF1C3",
-  tertiary: "#5c7cfa",
-  primaryDark: "#002ad4",
-  backDark: "#000830",
-  /** Soft product action (matches themes/light --primary ≈ #254bfa) */
-  productPrimary: "#254bfa",
+  primary: tokenColor("--brand-primary"),
+  accent: tokenColor("--brand-accent"),
+  tertiary: tokenColor("--brand-tertiary"),
+  primaryDark: tokenColor("--nebutra-blue-600"),
+  backDark: tokenColor("--nebutra-blue-950"),
+  /** Product action — semantic --primary */
+  productPrimary: tokenColor("--primary"),
   /**
-   * Brand mark fallback (= product action when factory brand has action≡brand).
-   * Skins may diverge (e.g. Linear purple action + indigo mark).
+   * Brand mark fallback (= product action: the factory recipe sets
+   * --brand-mark: var(--primary)). Skins may diverge.
    */
-  brandMark: "#254bfa",
-  brandMarkForeground: "#ffffff"
+  brandMark: tokenColor("--primary"),
+  brandMarkForeground: tokenColor("--primary-foreground")
 };
 function readCssVar(name, fallback) {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -48,23 +124,26 @@ function asCssColor(value, fallback) {
   return `hsl(${v})`;
 }
 function getProductPrimary() {
-  return asCssColor(readCssVar("--primary", "228 85% 56%"), BRAND_FALLBACK.productPrimary);
+  return asCssColor(
+    readCssVar("--primary", tokenValue("--primary")),
+    BRAND_FALLBACK.productPrimary
+  );
 }
 function getBrandPrimary() {
   return asCssVarColor("--brand-primary", BRAND_FALLBACK.primary);
 }
 function getBrandMark() {
-  const raw = readCssVar("--brand-mark", "228 85% 56%");
+  const raw = readCssVar("--brand-mark", tokenValue("--primary"));
   if (/var\(\s*--primary\s*\)/u.test(raw)) {
     return getProductPrimary();
   }
   return asCssColor(raw, BRAND_FALLBACK.brandMark);
 }
 function getBrandMarkForeground() {
-  const raw = readCssVar("--brand-mark-foreground", "0 0% 100%");
+  const raw = readCssVar("--brand-mark-foreground", tokenValue("--primary-foreground"));
   if (/var\(\s*--primary-foreground\s*\)/u.test(raw)) {
     return asCssColor(
-      readCssVar("--primary-foreground", "0 0% 100%"),
+      readCssVar("--primary-foreground", tokenValue("--primary-foreground")),
       BRAND_FALLBACK.brandMarkForeground
     );
   }
@@ -93,6 +172,6 @@ function isBreakpointUp(breakpoint) {
   return window.innerWidth >= BREAKPOINTS[breakpoint];
 }
 
-export { BRAND_FALLBACK, BREAKPOINTS, asPlainStyle, cn, getBrandAccent, getBrandMark, getBrandMarkForeground, getBrandPrimary, getBrandTertiary, getProductPrimary, isBreakpointUp, readCssVar, withHtmlProps };
+export { AUTH_FORM_COLUMN_CLASS, AUTH_OAUTH_BUTTON_CLASS, AUTH_OAUTH_GRID_CLASS, AUTH_PRIMARY_CTA_CLASS, 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/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"]}
+{"version":3,"sources":["../../src/utils/auth-surfaces.ts","../../src/utils/tw-merge-theme.generated.ts","../../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":["/**\n * Auth surface layout contracts — **server-safe pure strings**.\n *\n * Consumed by RSC AuthSplitLayout. Built as `utils/auth-surfaces` without a\n * `\"use client\"` stamp (see packages/design/ui/tsup.config.ts SERVER_ONLY).\n * Prefer `import { … } from \"@nebutra/ui/utils/auth-surfaces\"` in server\n * layouts so a future utils barrel regression cannot client-proxy these again.\n *\n * ## Width (root cause)\n * Do NOT use `w-full max-w-sm|xs` alone inside a flex/grid shell. Percentage\n * width resolves against the full right pane (~64vw); if max-width is ever\n * soft-failed (token miss, cascade, min-width:auto content), the column\n * expands to the pane. Force the used width with min() + min-w-0 + shrink-0.\n *\n * 360px matches the Neon / Clerk login-card band (not page-form 24rem).\n *\n * ## No card chrome on split shell\n * Do NOT wrap the credentials column in border / rounded-2xl / shadow card.\n * Split already has a marketing panel + white form pane; a nested card is\n * double framing. Fields sit on the pane like Neon console login.\n *\n * ## OAuth\n * Always a 2-column compact grid — never full-width stacked bars, never\n * \"stack when only two providers\". Buttons fill the *cell*, not the pane.\n */\nexport const AUTH_FORM_COLUMN_CLASS = \"relative mx-auto min-w-0 w-[min(100%,360px)] shrink-0\";\n\nexport const AUTH_PRIMARY_CTA_CLASS = \"h-11 w-full\";\n\n/** Compact OAuth: always 2 columns, tight gap. */\nexport const AUTH_OAUTH_GRID_CLASS = \"grid grid-cols-2 gap-2\";\n\n/** Compact OAuth chip — fills grid cell only. */\nexport const AUTH_OAUTH_BUTTON_CLASS =\n  \"h-9 w-full justify-center gap-2 border-border bg-background px-2.5 text-sm font-medium text-foreground shadow-none hover:bg-muted\";\n","// GENERATED by packages/design/ui/scripts/gen-tw-merge-theme.mjs — do not edit.\n// Source: the @theme blocks in packages/design/tokens/{styles,recipe}.css.\n\nexport const TW_MERGE_THEME = {\n  breakpoint: [\"3xl\", \"shell\", \"tight\", \"xs\"],\n  container: [\"content\", \"text\", \"wide\"],\n  ease: [\"brand\", \"in\", \"in-out\", \"out\", \"spring\"],\n  font: [\"cn\", \"display\", \"heading\", \"mono\", \"sans\"],\n  leading: [\"display\", \"heading\"],\n  radius: [\"2xl\", \"3xl\", \"button\", \"card\", \"full\", \"lg\", \"md\", \"none\", \"panel\", \"sm\", \"xl\", \"xs\"],\n  shadow: [\n    \"2xl\",\n    \"ambient-glow\",\n    \"ambient-lg\",\n    \"ambient-md\",\n    \"ambient-sm\",\n    \"brand\",\n    \"brand-lg\",\n    \"glass-lg\",\n    \"glass-md\",\n    \"glass-sm\",\n    \"glow-accent\",\n    \"glow-accent-lg\",\n    \"glow-accent-sm\",\n    \"glow-primary\",\n    \"lg\",\n    \"md\",\n    \"sheen\",\n    \"sm\",\n    \"xl\",\n    \"xs\",\n  ],\n  text: [\n    \"2xl\",\n    \"2xs\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n    \"base\",\n    \"body\",\n    \"display\",\n    \"label\",\n    \"lg\",\n    \"meta\",\n    \"sm\",\n    \"ui\",\n    \"xl\",\n    \"xs\",\n  ],\n  tracking: [\"display\", \"heading\", \"label\", \"tight\"],\n} as const;\n\nexport const TW_MERGE_CLASS_GROUPS = {\n  duration: [{ duration: [\"cinematic\", \"flow\", \"micro\", \"reveal\"] }],\n} as const;\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { TW_MERGE_CLASS_GROUPS, TW_MERGE_THEME } from \"./tw-merge-theme.generated\";\n\n/**\n * tailwind-merge only knows Tailwind's default scale. Every utility the design\n * tokens add (text-label, shadow-ambient-md, rounded-card, ease-brand,\n * max-w-wide, …) was otherwise an unknown class: `cn(\"text-label\n * text-destructive-strong\")` returned \"text-destructive-strong\" and the size fell away, and\n * `cn(\"rounded-card\", \"rounded-lg\")` kept both so the winner depended on\n * stylesheet order. The theme below is generated from the tokens' @theme blocks\n * (scripts/gen-tw-merge-theme.mjs), so a new token utility is known here the\n * moment it exists; a test fails if the generated file goes stale.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: Object.fromEntries(\n      Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]]),\n    ),\n    classGroups: Object.fromEntries(\n      Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [\n        key,\n        groups.map((group) =>\n          Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]])),\n        ),\n      ]),\n    ),\n  },\n});\n\n/** Kept for callers and tests that enumerate the design-system text steps. */\nexport const DESIGN_SYSTEM_TEXT_SIZES = TW_MERGE_THEME.text;\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  // biome-ignore lint/suspicious/noExplicitAny: polymorphic render — the element type is only known at the call site, and naming it here makes the emitted declaration a union of every intrinsic tag\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\nimport { tokenColor, tokenValue } from \"@nebutra/tokens/values\";\n\n/**\n * SSR fallbacks when document is unavailable — the light-mode token values,\n * read from @nebutra/tokens/values rather than restated. Hand-copied, these\n * had drifted: the product action was still the old blue after --primary\n * became ink (a shader painted blue on the server and flipped to ink on\n * hydration) and tertiary named a colour --brand-tertiary does not hold.\n */\nexport const BRAND_FALLBACK = {\n  /** VI 云毓蓝 — identity only */\n  primary: tokenColor(\"--brand-primary\"),\n  accent: tokenColor(\"--brand-accent\"),\n  tertiary: tokenColor(\"--brand-tertiary\"),\n  primaryDark: tokenColor(\"--nebutra-blue-600\"),\n  backDark: tokenColor(\"--nebutra-blue-950\"),\n  /** Product action — semantic --primary */\n  productPrimary: tokenColor(\"--primary\"),\n  /**\n   * Brand mark fallback (= product action: the factory recipe sets\n   * --brand-mark: var(--primary)). Skins may diverge.\n   */\n  brandMark: tokenColor(\"--primary\"),\n  brandMarkForeground: tokenColor(\"--primary-foreground\"),\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(\n    readCssVar(\"--primary\", tokenValue(\"--primary\")),\n    BRAND_FALLBACK.productPrimary,\n  );\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\", tokenValue(\"--primary\"));\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\", tokenValue(\"--primary-foreground\"));\n  if (/var\\(\\s*--primary-foreground\\s*\\)/u.test(raw)) {\n    return asCssColor(\n      readCssVar(\"--primary-foreground\", tokenValue(\"--primary-foreground\")),\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/** Auth split-shell + primary CTA contracts (width + ink CTA pairing). */\nexport {\n  AUTH_FORM_COLUMN_CLASS,\n  AUTH_OAUTH_BUTTON_CLASS,\n  AUTH_OAUTH_GRID_CLASS,\n  AUTH_PRIMARY_CTA_CLASS,\n} from \"./auth-surfaces\";\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 {\n  asPlainStyle,\n  type PrimitiveComponent,\n  type PrimitiveProps,\n  withHtmlProps,\n} 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,8 +1,13 @@
 {
   "name": "@nebutra/ui",
-  "version": "0.2.3",
+  "version": "3.0.0",
   "description": "Nebutra design-system UI primitives, patterns, layouts, and token-integrated components",
   "private": false,
+  "nebutra": {
+    "status": "foundation",
+    "graph": "core",
+    "productionReady": false
+  },
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -17,6 +22,10 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./chat": {
+      "types": "./dist/chat/index.d.ts",
+      "import": "./dist/chat/index.js"
+    },
     "./layout": {
       "types": "./dist/layout/index.d.ts",
       "import": "./dist/layout/index.js"
@@ -37,6 +46,10 @@
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js"
     },
+    "./editorial": {
+      "types": "./dist/editorial/index.d.ts",
+      "import": "./dist/editorial/index.js"
+    },
     "./primitives": {
       "types": "./dist/primitives/index.d.ts",
       "import": "./dist/primitives/index.js"
@@ -77,6 +90,10 @@
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js"
     },
+    "./utils/auth-surfaces": {
+      "types": "./dist/utils/auth-surfaces.d.ts",
+      "import": "./dist/utils/auth-surfaces.js"
+    },
     "./tailwind.preset": {
       "types": "./dist/tailwind.preset.d.ts",
       "import": "./dist/tailwind.preset.js"
@@ -117,6 +134,7 @@
     "piri": "^1.3.2",
     "react": "^19.2.4",
     "react-ascii-text": "*",
+    "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
     "react-markdown": "^10.1.0",
@@ -132,13 +150,12 @@
     "tailwind-merge": "^3.5.0",
     "usehooks-ts": "^3.1.1",
     "vaul": "^1.1.2",
-    "@nebutra/tokens": "0.1.3",
-    "@nebutra/icons": "0.1.2",
-    "@nebutra/graph-model": "0.2.3",
-    "@nebutra/brand": "0.1.2"
+    "@nebutra/brand": "3.0.0",
+    "@nebutra/graph-model": "3.0.0",
+    "@nebutra/tokens": "3.0.0",
+    "@nebutra/icons": "3.0.0"
   },
   "peerDependencies": {
-    "@clerk/nextjs": ">=5.0.0",
     "driver.js": "^1.4.0",
     "next": ">=14.0.0",
     "next-intl": "^4.12.0",
@@ -146,9 +163,6 @@
     "react-dom": ">=19.0.0"
   },
   "peerDependenciesMeta": {
-    "@clerk/nextjs": {
-      "optional": true
-    },
     "driver.js": {
       "optional": true
     },
@@ -171,6 +185,7 @@
     "@types/three": "^0.183.1",
     "@vitejs/plugin-react-swc": "^4.3.1",
     "driver.js": "^1.4.0",
+    "jsdom": "^29.1.1",
     "next": "^16.2.6",
     "next-intl": "^4.12.0",
     "storybook": "^8.6.17",
@@ -178,8 +193,7 @@
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18",
-    "jsdom": "^29.1.1",
-    "@nebutra/design-tokens": "0.1.2"
+    "@nebutra/design-tokens": "3.0.0"
   },
   "homepage": "https://github.com/Nebutra/Nebutra-Sailor/tree/main/packages/design/ui#readme",
   "repository": {

package/src/typography/fonts.css

@@ -6,9 +6,11 @@
  * 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.
+ *   cjkFontClassName → --font-dm-sans   (@nebutra/fonts/next/cjk)  Latin headings
+ *   <CjkFontFace />  → MiSans @font-face, CDN-hosted (licence forbids shipping
+ *                      the file in this public repo)                   CJK
+ * and the token stacks reference those in order, so Geist keeps Latin body and
+ * numerals, DM Sans takes headings, and only CJK falls through to MiSans.
  *
  * 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 /
@@ -29,7 +31,7 @@
      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;
+    var(--font-cn), "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 
   /* Not a token: no Nebutra surface uses a serif, this exists for shadcn parity. */
   --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@@ -79,18 +81,8 @@ body {
   font-weight: 400;
 }
 
-/* Headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-heading), var(--font-cjk);
-  /* Theme/DESIGN can lighten headings via fontWeight.heading; default 600. */
-  font-weight: var(--font-weight-heading, 600);
-  line-height: 1.25;
-}
+/* Headings: one rule, in @nebutra/design-tokens static/base.css
+   (--font-heading at --font-weight-heading). Not re-declared here. */
 
 /* Code */
 code,

package/dist/styles/brand-override.css

@@ -1,61 +0,0 @@
-/**
- * brand-override.css — Custom Brand Configuration (legacy scale remap)
- *
- * Prefer the skin surface for product chrome:
- *   @import "@nebutra/tokens/skins/<name>.css";
- *   @see packages/design/tokens/skins/README.md
- *
- * This file remaps the **blue scale** only (residual `bg-blue-9` call sites).
- * New code should use semantic tokens (`bg-primary`, `border-border`).
- *
- * Drop into globals.css after tokens if you still need scale remapping:
- *   @import "@nebutra/ui/styles/brand-override.css";
- *
- * ────────────────────────────────────────────────────────────
- * HOW THE CASCADE WORKS
- *
- *   1. You define: --your-primary-* (11 steps)
- *   2. System maps: --blue-9 → --your-primary-500 (solid fill)
- *                  --blue-3 → --your-primary-200 (component bg)
- *   3. Residual blue-N utilities follow your brand; semantic CSS still wins
- *      for Button / Input that already use --primary.
- * ────────────────────────────────────────────────────────────
- */
-
-:root {
-  /* ══════════════════════════════════════════════════════════
-     PRIMARY BRAND COLOR — replace #0033FE with your primary
-     ════════════════════════════════════════════════════════ */
-  --nebutra-blue-50: #f0f4ff; /* lightest tint — backgrounds */
-  --nebutra-blue-100: #dbe4ff;
-  --nebutra-blue-200: #bac8ff;
-  --nebutra-blue-300: #91a7ff;
-  --nebutra-blue-400: #5c7cfa;
-  --nebutra-blue-500: #0033fe; /* ← YOUR PRIMARY COLOR HERE */
-  --nebutra-blue-600: #002ad4;
-  --nebutra-blue-700: #0021ab;
-  --nebutra-blue-800: #001882;
-  --nebutra-blue-900: #000f59;
-  --nebutra-blue-950: #000830; /* darkest — text */
-
-  /* ══════════════════════════════════════════════════════════
-     SECONDARY ACCENT COLOR — replace #0BF1C3 with your accent
-     ════════════════════════════════════════════════════════ */
-  --nebutra-cyan-50: #e6fff8; /* lightest tint */
-  --nebutra-cyan-100: #b3ffec;
-  --nebutra-cyan-200: #80ffe0;
-  --nebutra-cyan-300: #4dfcd4;
-  --nebutra-cyan-400: #1af7c8;
-  --nebutra-cyan-500: #0bf1c3; /* ← YOUR ACCENT COLOR HERE */
-  --nebutra-cyan-600: #09c9a3;
-  --nebutra-cyan-700: #07a183;
-  --nebutra-cyan-800: #057963;
-  --nebutra-cyan-900: #035143;
-  --nebutra-cyan-950: #012923; /* darkest */
-
-  /* ══════════════════════════════════════════════════════════
-     OPTIONAL: Brand name tokens (used in metadata / docs only)
-     ════════════════════════════════════════════════════════ */
-  /* --brand-name: "Your Brand"; */
-  /* --brand-domain: "yourbrand.com"; */
-}

package/src/styles/brand-override.css

@@ -1,61 +0,0 @@
-/**
- * brand-override.css — Custom Brand Configuration (legacy scale remap)
- *
- * Prefer the skin surface for product chrome:
- *   @import "@nebutra/tokens/skins/<name>.css";
- *   @see packages/design/tokens/skins/README.md
- *
- * This file remaps the **blue scale** only (residual `bg-blue-9` call sites).
- * New code should use semantic tokens (`bg-primary`, `border-border`).
- *
- * Drop into globals.css after tokens if you still need scale remapping:
- *   @import "@nebutra/ui/styles/brand-override.css";
- *
- * ────────────────────────────────────────────────────────────
- * HOW THE CASCADE WORKS
- *
- *   1. You define: --your-primary-* (11 steps)
- *   2. System maps: --blue-9 → --your-primary-500 (solid fill)
- *                  --blue-3 → --your-primary-200 (component bg)
- *   3. Residual blue-N utilities follow your brand; semantic CSS still wins
- *      for Button / Input that already use --primary.
- * ────────────────────────────────────────────────────────────
- */
-
-:root {
-  /* ══════════════════════════════════════════════════════════
-     PRIMARY BRAND COLOR — replace #0033FE with your primary
-     ════════════════════════════════════════════════════════ */
-  --nebutra-blue-50: #f0f4ff; /* lightest tint — backgrounds */
-  --nebutra-blue-100: #dbe4ff;
-  --nebutra-blue-200: #bac8ff;
-  --nebutra-blue-300: #91a7ff;
-  --nebutra-blue-400: #5c7cfa;
-  --nebutra-blue-500: #0033fe; /* ← YOUR PRIMARY COLOR HERE */
-  --nebutra-blue-600: #002ad4;
-  --nebutra-blue-700: #0021ab;
-  --nebutra-blue-800: #001882;
-  --nebutra-blue-900: #000f59;
-  --nebutra-blue-950: #000830; /* darkest — text */
-
-  /* ══════════════════════════════════════════════════════════
-     SECONDARY ACCENT COLOR — replace #0BF1C3 with your accent
-     ════════════════════════════════════════════════════════ */
-  --nebutra-cyan-50: #e6fff8; /* lightest tint */
-  --nebutra-cyan-100: #b3ffec;
-  --nebutra-cyan-200: #80ffe0;
-  --nebutra-cyan-300: #4dfcd4;
-  --nebutra-cyan-400: #1af7c8;
-  --nebutra-cyan-500: #0bf1c3; /* ← YOUR ACCENT COLOR HERE */
-  --nebutra-cyan-600: #09c9a3;
-  --nebutra-cyan-700: #07a183;
-  --nebutra-cyan-800: #057963;
-  --nebutra-cyan-900: #035143;
-  --nebutra-cyan-950: #012923; /* darkest */
-
-  /* ══════════════════════════════════════════════════════════
-     OPTIONAL: Brand name tokens (used in metadata / docs only)
-     ════════════════════════════════════════════════════════ */
-  /* --brand-name: "Your Brand"; */
-  /* --brand-domain: "yourbrand.com"; */
-}