@nebutra/ui 0.2.0 → 0.2.2

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@nebutra/ui",
-  "version": "0.2.0",
-  "description": "Unified UI component library — Lobe UI + Radix + HeroUI + layout components",
+  "version": "0.2.2",
+  "description": "Nebutra design-system UI primitives, patterns, layouts, and token-integrated components",
   "private": false,
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,6 +29,10 @@
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons/index.js"
     },
+    "./agent": {
+      "types": "./dist/agent/index.d.ts",
+      "import": "./dist/agent/index.js"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js"
@@ -35,6 +41,10 @@
       "types": "./dist/primitives/index.d.ts",
       "import": "./dist/primitives/index.js"
     },
+    "./primitives/canonical": {
+      "types": "./dist/primitives/canonical.d.ts",
+      "import": "./dist/primitives/canonical.js"
+    },
     "./patterns": {
       "types": "./dist/patterns/index.d.ts",
       "import": "./dist/patterns/index.js"
@@ -43,11 +53,26 @@
       "types": "./dist/typography/index.d.ts",
       "import": "./dist/typography/index.js"
     },
-    "./typography/fonts.css": "./dist/typography/fonts.css",
+    "./typography/fonts.css": "./src/typography/fonts.css",
+    "./styles/sources.css": "./src/styles/sources.css",
+    "./styles/preset.css": "./src/styles/preset.css",
+    "./styles.css": "./src/styles/preset.css",
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js"
     },
+    "./shared/animation": {
+      "types": "./dist/shared/animation/index.d.ts",
+      "import": "./dist/shared/animation/index.js"
+    },
+    "./shared/animation/css": {
+      "types": "./dist/shared/animation/css/index.d.ts",
+      "import": "./dist/shared/animation/css/index.js"
+    },
+    "./shared/animation/motion": {
+      "types": "./dist/shared/animation/motion/index.d.ts",
+      "import": "./dist/shared/animation/motion/index.js"
+    },
     "./utils": {
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js"
@@ -59,6 +84,8 @@
   },
   "files": [
     "dist",
+    "src/styles",
+    "src/typography/fonts.css",
     "README.md"
   ],
   "dependencies": {
@@ -85,7 +112,6 @@
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.35.0",
     "input-otp": "^1.4.2",
-    "motion": "^12.35.0",
     "piri": "^1.3.2",
     "react": "^19.2.4",
     "react-ascii-text": "*",
@@ -104,10 +130,10 @@
     "tailwind-merge": "^3.5.0",
     "usehooks-ts": "^3.1.1",
     "vaul": "^1.1.2",
-    "@nebutra/brand": "0.1.0",
-    "@nebutra/graph-model": "0.2.0",
-    "@nebutra/icons": "0.1.0",
-    "@nebutra/tokens": "0.1.0"
+    "@nebutra/brand": "0.1.2",
+    "@nebutra/graph-model": "0.2.2",
+    "@nebutra/icons": "0.1.2",
+    "@nebutra/tokens": "0.1.2"
   },
   "peerDependencies": {
     "@clerk/nextjs": ">=5.0.0",
@@ -134,12 +160,12 @@
     "@types/three": "^0.183.1",
     "next": "^16.2.6",
     "storybook": "^8.6.17",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^4.3.1",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18",
-    "@nebutra/design-tokens": "0.1.0"
+    "@nebutra/design-tokens": "0.1.2"
   },
   "homepage": "https://github.com/Nebutra/Nebutra-Sailor/tree/main/packages/design/ui#readme",
   "repository": {
@@ -161,7 +187,7 @@
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "build:registry": "tsx scripts/build-registry.ts",
-    "build": "NODE_OPTIONS='--max-old-space-size=6144' tsup && tsx scripts/build-registry.ts",
+    "build": "NODE_OPTIONS='--max-old-space-size=6144' tsup",
     "dev": "tsup --watch"
   }
 }

package/src/styles/brand-override.css

@@ -0,0 +1,61 @@
+/**
+ * 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/preset.css

@@ -0,0 +1,29 @@
+/**
+ * Full design-system CSS entry for product apps (Tailwind v4).
+ *
+ * Architecture: packages/design/ARCHITECTURE.md
+ *
+ * One import wires:
+ *   1. Tailwind
+ *   2. @nebutra/tokens (semantic CSS variables + @theme)  ← skin surface
+ *   3. Source scan so UI CVA classes are generated
+ *   4. Typography CSS variables
+ *   5. dark variant
+ *
+ * Simple apps:
+ *   @import "@nebutra/ui/styles/preset.css";
+ *
+ * Complex apps (fumadocs, katex first):
+ *   @import "tailwindcss";
+ *   @import "…third-party…";
+ *   @import "@nebutra/tokens/styles.css";
+ *   @import "@nebutra/ui/styles/sources.css";
+ */
+
+@import "tailwindcss";
+@import "@nebutra/tokens/styles.css";
+@import "@nebutra/tokens/recipe.css";
+@import "./sources.css";
+@import "../typography/fonts.css";
+
+@custom-variant dark (&:is(.dark *));

package/src/styles/sources.css

@@ -0,0 +1,27 @@
+/**
+ * Tailwind v4 source registration for @nebutra/ui (+ icons).
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * UI primitives style themselves with CVA *utility class strings*, not a
+ * prebuilt component CSS sheet. Under Tailwind v4 those utilities only exist
+ * in an app’s bundle if the app’s CSS pipeline *scans* this package.
+ *
+ * Best practice: the design-system package owns the scan paths.
+ * Apps import this file once — they never hardcode monorepo-relative @source.
+ *
+ * Usage (after @import "tailwindcss"):
+ *   @import "@nebutra/ui/styles/sources.css";
+ *
+ * Or use the full preset:
+ *   @import "@nebutra/ui/styles/preset.css";
+ *
+ * Paths are relative to THIS file so resolution is stable in workspace
+ * and when resolved through node_modules/@nebutra/ui.
+ */
+
+/* All CVA / className strings under the UI package */
+@source "../**/*.{ts,tsx,js,jsx}";
+
+/* Icon components often appear in class strings next to UI primitives */
+@source "../../../icons/src/**/*.{ts,tsx,js,jsx}";

package/src/typography/fonts.css

@@ -0,0 +1,129 @@
+/**
+ * Font CSS Variables — SSOT for typography across Nebutra packages.
+ * "Precision Stack" — Geist × Geist Mono × Noto Sans SC
+ *
+ * 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)
+ *
+ * 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.
+ */
+
+/* ============================================
+   CSS Custom Properties (SSOT)
+   ============================================ */
+
+: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;
+
+  /* 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 */
+  --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);
+  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+
+/* ============================================
+   Font Smoothing & Rendering
+   ============================================ */
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings:
+    "calt" 1,
+    "liga" 1;
+  /* Variable-font polish: */
+  /*  - font-synthesis: none → forbid faux-bold / faux-italic synthesis;
+       variable fonts already ship every weight/style, synthesised faces
+       look fuzzy at sub-pixel boundaries.
+     - font-optical-sizing: auto → tells the engine to use the opsz axis
+       on fonts that ship one (Geist Sans, Geist Mono, Inter, Playfair),
+       so glyphs are rendered with weights tuned to their display size
+       instead of being scaled uniformly. */
+  font-synthesis: none;
+  font-optical-sizing: auto;
+}
+
+/* ============================================
+   Base Typography
+   ============================================ */
+
+body {
+  /* Font precedence in ONE place: explicit user choice (--user-ui-font) →
+     active theme/DESIGN font (--font-sans) → default; the CJK stack is always
+     appended as a fallback so Chinese/Japanese/Korean glyphs render regardless
+     of the (often Latin-only) theme font. This replaces a blanket :lang(zh)
+     override that used to discard the theme font entirely. */
+  font-family: var(--user-ui-font, var(--font-sans)), var(--font-cjk);
+  /* An explicit user size (--user-ui-font-size) wins; otherwise the active
+     theme/DESIGN type-scale (--text-base); otherwise the 1rem default. This is
+     backward-compatible — with neither var set it resolves to exactly 1rem.
+     (Previously this was a hardcoded 1rem that, being unlayered, silently
+     overrode the app's --user-ui-font-size font-size control.) */
+  font-size: var(--user-ui-font-size, var(--text-base, 1rem));
+  line-height: 1.5;
+  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;
+}
+
+/* Code */
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--user-code-font, var(--font-mono)), var(--font-cjk);
+}
+
+/* ============================================
+   Font Feature Settings
+   ============================================ */
+
+/* Enable tabular figures for numbers in tables */
+.tabular-nums {
+  font-feature-settings: "tnum" 1;
+}
+
+/* Enable case-sensitive forms for all-caps text */
+.case-sensitive {
+  font-feature-settings: "case" 1;
+}
+
+/* ============================================
+   CJK Support
+   ============================================ */
+
+/* No blanket :lang(zh) font-family override here. The CJK stack is appended as
+   a fallback on the body / heading / code rules above, so the active theme or
+   DESIGN.md font drives Latin text on every locale while CJK glyphs still fall
+   back to --font-cjk. (A blanket override would discard the theme font.) */