banhaten 0.4.0 → 0.6.0

package/registry.json

@@ -27,6 +27,26 @@
           "type": "registry:hook",
           "target": "@hooks/use-direction.ts"
         },
+        {
+          "path": "registry/hooks/use-controllable-state.ts",
+          "type": "registry:hook",
+          "target": "@hooks/use-controllable-state.ts"
+        },
+        {
+          "path": "registry/hooks/use-listbox-navigation.ts",
+          "type": "registry:hook",
+          "target": "@hooks/use-listbox-navigation.ts"
+        },
+        {
+          "path": "registry/hooks/use-motion-end.ts",
+          "type": "registry:hook",
+          "target": "@hooks/use-motion-end.ts"
+        },
+        {
+          "path": "registry/hooks/use-reduced-motion.ts",
+          "type": "registry:hook",
+          "target": "@hooks/use-reduced-motion.ts"
+        },
         {
           "path": "registry/guidance/USAGE.md",
           "type": "registry:file",
@@ -224,19 +244,98 @@
       "name": "chart",
       "type": "registry:component",
       "title": "Chart",
-      "description": "Recharts wrapper with Banhaten chart color tokens, responsive container, tooltip content, legend content, and config-driven color variables.",
+      "description": "Eight token-driven ECharts families and 18 ready-made chart blocks, with responsive SVG rendering, theme-aware typography, tooltips, legends, brushes, and compatible Recharts wrappers.",
       "author": "Ahmad Galal",
       "registryDependencies": [
-        "base"
+        "base",
+        "button",
+        "progress"
       ],
       "dependencies": [
-        "recharts@^3.9.2"
+        "recharts@^3.9.2",
+        "echarts@^6.1.0",
+        "lucide-react@^1.17.0"
       ],
       "files": [
         {
           "path": "registry/components/chart.tsx",
           "type": "registry:component",
           "target": "@ui/chart.tsx"
+        },
+        {
+          "path": "registry/guidance/charts.LICENSE.txt",
+          "type": "registry:file",
+          "target": "@ui/charts.LICENSE.txt"
+        },
+        {
+          "path": "registry/components/chart-block-data.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-block-data.ts"
+        },
+        {
+          "path": "registry/components/chart-block.css",
+          "type": "registry:style",
+          "target": "@ui/chart-block.css"
+        },
+        {
+          "path": "registry/components/chart-block.tsx",
+          "type": "registry:component",
+          "target": "@ui/chart-block.tsx"
+        },
+        {
+          "path": "registry/components/chart-interactions.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-interactions.ts"
+        },
+        {
+          "path": "registry/components/chart-options.cartesian.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.cartesian.ts"
+        },
+        {
+          "path": "registry/components/chart-options.paint.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.paint.ts"
+        },
+        {
+          "path": "registry/components/chart-options.parts.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.parts.ts"
+        },
+        {
+          "path": "registry/components/chart-options.radial.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.radial.ts"
+        },
+        {
+          "path": "registry/components/chart-options.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.ts"
+        },
+        {
+          "path": "registry/components/chart-options.types.ts",
+          "type": "registry:component",
+          "target": "@ui/chart-options.types.ts"
+        },
+        {
+          "path": "registry/components/data-chart.tsx",
+          "type": "registry:component",
+          "target": "@ui/data-chart.tsx"
+        },
+        {
+          "path": "registry/components/echart-theme.ts",
+          "type": "registry:component",
+          "target": "@ui/echart-theme.ts"
+        },
+        {
+          "path": "registry/components/echart.css",
+          "type": "registry:style",
+          "target": "@ui/echart.css"
+        },
+        {
+          "path": "registry/components/echart.tsx",
+          "type": "registry:component",
+          "target": "@ui/echart.tsx"
         }
       ]
     },
@@ -336,7 +435,8 @@
       "dependencies": [
         "@radix-ui/react-dropdown-menu@^2.1.17",
         "@radix-ui/react-slot@^1.2.3",
-        "class-variance-authority@^0.7.1"
+        "class-variance-authority@^0.7.1",
+        "lucide-react@^1.17.0"
       ],
       "files": [
         {
@@ -548,7 +648,7 @@
       "name": "collapsible",
       "type": "registry:component",
       "title": "Collapsible",
-      "description": "Radix Collapsible wrapper for disclosure sections with tokenized trigger, icon rotation, and content slots.",
+      "description": "Radix Collapsible wrapper for disclosure sections with tokenized trigger, icon rotation, content slots, and an unstyled animated panel.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base"
@@ -656,7 +756,7 @@
       "name": "toolbar",
       "type": "registry:component",
       "title": "Toolbar",
-      "description": "Figma Filter Toolbar primitive with eight filter/action styles, search fields, select triggers, icon actions, chips, selected-count badges, desktop/mobile wrapping, and RTL-safe composition.",
+      "description": "Figma Filter Toolbar layout primitive with native Tab-order group semantics, eight filter/action styles, search fields, select triggers, icon actions, chips, selected-count badges, desktop/mobile wrapping, and RTL-safe composition.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base",
@@ -701,7 +801,7 @@
       "name": "input",
       "type": "registry:component",
       "title": "Input",
-      "description": "Tokenized input field with semantic control density, labels, helper and error text, explicit icons, shared keyboard shortcuts, add-ons, tags, default and soft styles, and RTL states.",
+      "description": "Tokenized input field with native quantity stepping, action-button contracts, semantic control density, labels, helper and error text, icons, shortcuts, add-ons, tags, default and soft styles, and RTL states.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base",
@@ -925,7 +1025,7 @@
       "name": "sidebar",
       "type": "registry:component",
       "title": "Sidebar",
-      "description": "Figma-aligned application sidebar with 280px expanded and 48px collapsed shells, brand and workspace headers, search and actions, default/avatar/nested/tree menu variants, badges, group actions, user footers, controlled state, tooltips, logical placement, and RTL mirroring.",
+      "description": "Figma-aligned application sidebar with a tokenized 900px minimum height, staged motion between 280px expanded and 48px collapsed shells, brand and workspace headers, search and actions, default/avatar/nested/tree menu variants, badges, group actions, user footers with hover identity previews, controlled state, tooltips, logical placement, and RTL mirroring.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base",
@@ -943,6 +1043,26 @@
         }
       ]
     },
+    {
+      "name": "app-header",
+      "type": "registry:component",
+      "title": "App Header",
+      "description": "Workspace bar above page content with a flexible location region, a search landmark, and flush icon or text actions that keep their design footprint while exposing 40px pointer targets.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base"
+      ],
+      "dependencies": [
+        "@radix-ui/react-slot@^1.2.3"
+      ],
+      "files": [
+        {
+          "path": "registry/components/app-header.tsx",
+          "type": "registry:component",
+          "target": "@ui/app-header.tsx"
+        }
+      ]
+    },
     {
       "name": "navigation-menu",
       "type": "registry:component",
@@ -1348,7 +1468,7 @@
       "name": "breadcrumbs",
       "type": "registry:block",
       "title": "Breadcrumbs",
-      "description": "Expanded breadcrumbs navigation with default, raised, icon, overflow, separator, and RTL variants.",
+      "description": "Expanded breadcrumbs navigation with default, raised, icon, overflow, separator, small, and RTL variants.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base"
@@ -1415,6 +1535,7 @@
         "toolbar"
       ],
       "dependencies": [
+        "@radix-ui/react-slot@^1.2.3",
         "lucide-react@^1.17.0"
       ],
       "files": [
@@ -1490,7 +1611,7 @@
       "name": "page-header",
       "type": "registry:block",
       "title": "Page Header",
-      "description": "Expanded page header composition with breadcrumbs, metadata, description copy, action groups, responsive layout, and optional local tabs.",
+      "description": "Expanded page header composition with breadcrumbs, metadata, description copy, action groups, responsive layout, and content-safe scrollable local tabs.",
       "author": "Ahmad Galal",
       "registryDependencies": [
         "base",
@@ -1615,6 +1736,260 @@
           "target": "@ui/expanded/Timeline.tsx"
         }
       ]
+    },
+    {
+      "name": "shimmer-text",
+      "type": "registry:component",
+      "title": "Shimmer Text",
+      "description": "Text with a soft brightness valley sweeping through it in reading direction, for labels of work in progress such as syncing, reading, or thinking.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base"
+      ],
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/components/shimmer-text.css",
+          "type": "registry:style",
+          "target": "@ui/shimmer-text.css"
+        },
+        {
+          "path": "registry/components/shimmer-text.tsx",
+          "type": "registry:component",
+          "target": "@ui/shimmer-text.tsx"
+        }
+      ]
+    },
+    {
+      "name": "thinking-state",
+      "type": "registry:component",
+      "title": "Thinking State",
+      "description": "Minimal shimmering status label that signals an agent is working before its first token arrives.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "shimmer-text"
+      ],
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/components/thinking-state.css",
+          "type": "registry:style",
+          "target": "@ui/thinking-state.css"
+        },
+        {
+          "path": "registry/components/thinking-state.tsx",
+          "type": "registry:component",
+          "target": "@ui/thinking-state.tsx"
+        }
+      ]
+    },
+    {
+      "name": "thinking-reasoning",
+      "type": "registry:component",
+      "title": "Thinking Reasoning",
+      "description": "Animated, collapsible reasoning block: a shimmering label reveals sentences as they arrive, auto-scrolls behind soft fades, then folds into a Thought for Ns summary that unfolds on demand.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "collapsible",
+        "shimmer-text"
+      ],
+      "dependencies": [
+        "lucide-react@^1.17.0"
+      ],
+      "files": [
+        {
+          "path": "registry/components/thinking-reasoning.css",
+          "type": "registry:style",
+          "target": "@ui/thinking-reasoning.css"
+        },
+        {
+          "path": "registry/components/thinking-reasoning.tsx",
+          "type": "registry:component",
+          "target": "@ui/thinking-reasoning.tsx"
+        }
+      ]
+    },
+    {
+      "name": "streaming-text",
+      "type": "registry:component",
+      "title": "Streaming Text",
+      "description": "Token-by-token text with a slim caret that stays solid while streaming and blinks once the response is complete, plus a useTypewriter hook that reveals a finished text locally.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base"
+      ],
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/components/streaming-text.css",
+          "type": "registry:style",
+          "target": "@ui/streaming-text.css"
+        },
+        {
+          "path": "registry/components/streaming-text.tsx",
+          "type": "registry:component",
+          "target": "@ui/streaming-text.tsx"
+        }
+      ]
+    },
+    {
+      "name": "inline-citations",
+      "type": "registry:component",
+      "title": "Inline Citations",
+      "description": "Prose composed with superscript citation marks that link to numbered sources and reveal the reference name on hover, plus a compact source list with host and external-link affordance.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "tooltip"
+      ],
+      "dependencies": [
+        "lucide-react@^1.17.0"
+      ],
+      "files": [
+        {
+          "path": "registry/components/inline-citations.css",
+          "type": "registry:style",
+          "target": "@ui/inline-citations.css"
+        },
+        {
+          "path": "registry/components/inline-citations.tsx",
+          "type": "registry:component",
+          "target": "@ui/inline-citations.tsx"
+        }
+      ]
+    },
+    {
+      "name": "rolling-count",
+      "type": "registry:component",
+      "title": "Rolling Count",
+      "description": "Tabular figures that roll each changed character into place like an odometer while assistive technology reads the plain value.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base"
+      ],
+      "dependencies": [],
+      "files": [
+        {
+          "path": "registry/components/rolling-count.css",
+          "type": "registry:style",
+          "target": "@ui/rolling-count.css"
+        },
+        {
+          "path": "registry/components/rolling-count.tsx",
+          "type": "registry:component",
+          "target": "@ui/rolling-count.tsx"
+        }
+      ]
+    },
+    {
+      "name": "task-list",
+      "type": "registry:component",
+      "title": "Task List",
+      "description": "Collapsible agent progress tracker with pending, active, and done rows, a header icon that moves from list to pie to check, and rolling counters, plus parts that compose static and folded lists.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "collapsible",
+        "rolling-count",
+        "shimmer-text"
+      ],
+      "dependencies": [
+        "lucide-react@^1.17.0"
+      ],
+      "files": [
+        {
+          "path": "registry/components/task-list.css",
+          "type": "registry:style",
+          "target": "@ui/task-list.css"
+        },
+        {
+          "path": "registry/components/task-list.tsx",
+          "type": "registry:component",
+          "target": "@ui/task-list.tsx"
+        }
+      ]
+    },
+    {
+      "name": "agent-input",
+      "type": "registry:component",
+      "title": "Agent Input",
+      "description": "Composable AI prompt field with an auto-growing editor, slash-command skill palette, skill and attachment chips, an add menu for files, skills, and models, prompt enhancement with a sweeping ring, and a send action.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "button",
+        "menu",
+        "shimmer-text",
+        "spinner",
+        "tag"
+      ],
+      "dependencies": [
+        "lucide-react@^1.17.0"
+      ],
+      "files": [
+        {
+          "path": "registry/components/agent-input.css",
+          "type": "registry:style",
+          "target": "@ui/agent-input.css"
+        },
+        {
+          "path": "registry/components/agent-input.tsx",
+          "type": "registry:component",
+          "target": "@ui/agent-input.tsx"
+        },
+        {
+          "path": "registry/components/agent-input-parts.tsx",
+          "type": "registry:component",
+          "target": "@ui/agent-input-parts.tsx"
+        },
+        {
+          "path": "registry/components/agent-input-state.ts",
+          "type": "registry:component",
+          "target": "@ui/agent-input-state.ts"
+        }
+      ]
+    },
+    {
+      "name": "approval-card",
+      "type": "registry:component",
+      "title": "Approval Card",
+      "description": "Human-in-the-loop decision cards that pause the agent: ApprovalQuestions for up to a few questions, ApprovalCommand to approve a shell command, and ApprovalPlan to green-light a short plan with an optional auto-approve countdown, all built on the ApprovalFrame shell for custom decisions.",
+      "author": "Ahmad Galal",
+      "registryDependencies": [
+        "base",
+        "button",
+        "kbd",
+        "rolling-count",
+        "task-list",
+        "tooltip"
+      ],
+      "dependencies": [
+        "lucide-react@^1.17.0"
+      ],
+      "files": [
+        {
+          "path": "registry/components/approval-card.css",
+          "type": "registry:style",
+          "target": "@ui/approval-card.css"
+        },
+        {
+          "path": "registry/components/approval-card.tsx",
+          "type": "registry:component",
+          "target": "@ui/approval-card.tsx"
+        },
+        {
+          "path": "registry/components/approval-frame.tsx",
+          "type": "registry:component",
+          "target": "@ui/approval-frame.tsx"
+        },
+        {
+          "path": "registry/components/approval-questions.tsx",
+          "type": "registry:component",
+          "target": "@ui/approval-questions.tsx"
+        }
+      ]
     }
   ]
 }

package/schema/registry.schema.json

@@ -183,7 +183,11 @@
       "additionalProperties": false,
       "properties": {
         "source": { "type": "string", "minLength": 1 },
-        "target": { "type": "string", "minLength": 1 }
+        "target": { "type": "string", "minLength": 1 },
+        "internal": {
+          "type": "boolean",
+          "description": "Installed and compiled with the component, but its exports are not part of the supported import contract. A public module of the same component imports it."
+        }
       }
     }
   }

package/schema/tokens.schema.json

@@ -47,7 +47,7 @@
     },
     "cssContract": {
       "type": "object",
-      "required": ["semanticPrefix", "fontFamily", "fontFamilies", "defaultTheme", "defaultNeutralTheme", "defaultRadius", "shadcnAliases", "shadowTokens"],
+      "required": ["semanticPrefix", "fontFamily", "fontFamilies", "defaultTheme", "defaultNeutralTheme", "defaultRadius", "shadcnAliases", "elevationTokens"],
       "additionalProperties": false,
       "properties": {
         "semanticPrefix": { "type": "string", "minLength": 1 },
@@ -65,11 +65,11 @@
         "defaultTheme": { "type": "string", "minLength": 1 },
         "defaultNeutralTheme": { "type": "string", "minLength": 1 },
         "defaultRadius": { "type": "string", "minLength": 1 },
-        "shadowTokens": { "type": "string" },
+        "elevationTokens": { "type": "string" },
         "shadcnAliases": {
           "type": "object",
           "minProperties": 1,
-          "additionalProperties": { "type": "string", "pattern": "^--" }
+          "additionalProperties": { "$ref": "#/$defs/cssVariableName" }
         }
       }
     },
@@ -142,10 +142,14 @@
         }
       ]
     },
+    "cssVariableName": {
+      "type": "string",
+      "pattern": "^--(?:bh|elevation)-[a-z0-9-]+$"
+    },
     "cssVariableMap": {
       "type": "object",
       "minProperties": 1,
-      "propertyNames": { "pattern": "^--(?:bh|shadow)-[a-z0-9-]+$" },
+      "propertyNames": { "$ref": "#/$defs/cssVariableName" },
       "additionalProperties": { "$ref": "#/$defs/cssVariableToken" }
     },
     "cssVariableToken": {

package/src/cli/file-transaction.js

@@ -148,15 +148,18 @@ async function restoreFileSnapshot(targetPath, snapshot) {
 }
 
 export async function writeFile(targetPath, content, options) {
-  const alreadyExists = await exists(targetPath)
+  if (!activeFileTransaction) {
+    throw new Error(`refusing non-transactional write to ${targetPath}`)
+  }
+
+  const current = await readFileForUpdate(targetPath)
+  const alreadyExists = current !== null
   const isBinary = Buffer.isBuffer(content)
   const contentBuffer = isBinary ? content : Buffer.from(content, "utf8")
-  const current = alreadyExists ? await fs.readFile(targetPath) : null
   const isEqual = current?.equals(contentBuffer) || false
   if (options.expectedCurrent !== undefined) {
     const expectedCurrent = toExpectedBuffer(options.expectedCurrent)
     assertExpectedCurrent(targetPath, current, expectedCurrent)
-    registerPrecondition(targetPath, expectedCurrent)
   }
 
   if (options.dryRun) {
@@ -170,10 +173,6 @@ export async function writeFile(targetPath, content, options) {
     return "kept"
   }
 
-  if (!activeFileTransaction) {
-    throw new Error(`refusing non-transactional write to ${targetPath}`)
-  }
-
   const existingPlan = activeFileTransaction.writes.get(targetPath)
   if (existingPlan && !existingPlan.content.equals(contentBuffer)) {
     throw new Error(`conflicting planned writes for ${targetPath}`)
@@ -186,6 +185,14 @@ export async function writeFile(targetPath, content, options) {
   return alreadyExists ? "updated" : "wrote"
 }
 
+// Pin the bytes (or absence) used for ownership checks and read/modify/write
+// planning. Later reads and writes must agree with this first observation.
+export async function readFileForUpdate(targetPath) {
+  const current = await readFileContent(targetPath)
+  registerPrecondition(targetPath, current)
+  return current
+}
+
 export async function assertFileUnchanged(targetPath, expectedCurrent) {
   if (!activeFileTransaction) {
     throw new Error(`refusing non-transactional precondition for ${targetPath}`)
@@ -207,7 +214,7 @@ function registerPrecondition(targetPath, expectedCurrent) {
     assertExpectedCurrent(targetPath, existing, expectedCurrent)
     return
   }
-  activeFileTransaction.preconditions.set(targetPath, expectedCurrent)
+  activeFileTransaction.preconditions.set(targetPath, toExpectedBuffer(expectedCurrent))
 }
 
 function assertExpectedCurrent(targetPath, current, expected) {