refactor(ui): retire shadcn @hanzo/ui → @hanzo/ui-shadcn (name freed for v8)

Rename the legacy shadcn/Radix line (pkgs/ui, 5.7.0) to @hanzo/ui-shadcn so the
gui-based unified library can carry the @hanzo/ui name forward at v8. Code is
untouched — only the package name changes; the published @hanzo/ui@5.7.1 stays
on npm for external ^5.x consumers.

Internal workspace consumers keep resolving the shadcn line with ZERO source
edits via workspace aliases (@hanzo/ui → @hanzo/ui-shadcn):
  - app (@hanzo/ui-web): dependency workspace alias
  - commerce: devDependency workspace alias (source imports @hanzo/ui/*),
    peer stays @hanzo/ui>=5.0.0 for external consumers
  - checkout, agent-ui: peer ranges unchanged (no source imports)
Proven: app + commerce node_modules/@hanzo/ui resolve to @hanzo/ui-shadcn@5.7.0.

Drive-by (unblocks workspace install/CI): pkgs/data pinned the now-unpublished
@hanzogui/config@7.2.2 — patch-forward to 7.3.0 (published latest, same major,
matches pkg/ui).

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["v4", "tests"]
+}

.claude/settings.local.json

@@ -1,17 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git add:*)",
-      "Bash(git commit:*)",
-      "Bash(git push:*)",
-      "Bash(pnpm registry:build:*)",
-      "Bash(pnpm build:*)",
-      "Bash(pnpm add:*)",
-      "Bash(pnpm dev)",
-      "Bash(jq:*)",
-      "Bash(curl:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.eslintignore

@@ -0,0 +1,8 @@
+node_modules/
+target/
+.next/
+build/
+dist/
+
+/templates/
+/fixtures/

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "turbo",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "ignorePatterns": ["**/fixtures/**"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "error"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva"],
+      "config": "tailwind.config.cjs"
+    },
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
+}

.github/DISCUSSION_TEMPLATE/blocks-request.yml

@@ -0,0 +1,25 @@
+title: "[blocks]: "
+labels: ["Blocks Request"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Thanks for taking the time to create a block request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.
+
+  - type: textarea
+    id: block-description
+    attributes:
+      label: Description
+      description: Tell us about your block request
+      placeholder: "A dashboard for an e-commerce website showing sales, orders, and customers..."
+    validations:
+      required: true
+
+  - type: input
+    id: block-example-url
+    attributes:
+      label: Example
+      description: Link to an example of the block
+      placeholder: ex. https://example.com
+    validations:
+      required: false

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [shadcn]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,85 @@
+name: "Bug report"
+description: Report an issue
+title: '[bug]: '
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Thanks for taking the time to create a bug report. Please search open/closed issues before submitting, as the issue may have already been reported/addressed.
+ 
+  - type: markdown
+    attributes:
+      value: |
+        #### If you aren't sure this is a bug or not, please open a discussion instead:
+        - [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+
+  - type: input
+    id: components-affected
+    attributes:
+      label: Affected component/components
+      description: Which shadcn/ui components are affected?
+      placeholder: ex. Button, Checkbox...
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: How to reproduce
+      description:  A step-by-step description of how to reproduce the bug.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. See error
+    validations:
+      required: true
+
+  - type: input
+    id: codesandbox-stackblitz
+    attributes:
+      label: Codesandbox/StackBlitz link
+      description: | 
+        A link to a CodeSandbox or StackBlitz that includes a minimal reproduction of the problem. In rare cases when not applicable, you can link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning. 
+
+        > [!CAUTION]
+        > If you skip this step, this issue might be **labeled** with `please add a reproduction` and **closed**.
+    validations:
+      required: false
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
+      render: bash
+
+  - type: textarea
+    id: system-info
+    attributes:
+      label: System Info
+      description: Information about browsers, system or binaries that's relevant.
+      render: bash
+      placeholder: System, Binaries, Browsers
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Before submitting
+      description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
+      options:
+        - label: I've made research efforts and searched the documentation
+          required: true
+        - label: I've searched for existing issues
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Get Help
+    url: https://github.com/shadcn-ui/ui/discussions/new?category=general
+    about: If you can't get something to work the way you expect, open a question in our discussion forums.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,55 @@
+name: "Feature request"
+description: Create a feature request for shadcn/ui
+title: '[feat]: '
+labels: ['area: request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Thanks for taking the time to create a feature request! Please search open/closed issues before submitting, as the issue may have already been reported/addressed.
+ 
+  - type: markdown
+    attributes:
+      value: |
+        #### If you aren't sure this is a bug or not, please open a discussion instead:
+        - [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
+
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature description
+      description: Tell us about your feature request
+      placeholder: 'I think this feature would be great because...'
+      value: 'Describe your feature request...'
+    validations:
+      required: true
+
+  - type: input
+    id: components-affected
+    attributes:
+      label: Affected component/components
+      description: Is this feature request relevant to any of the already existing components?
+      placeholder: ex. Button, Checkbox...
+    validations:
+      required: false
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Additional Context
+      description: Add any other context about the feature here.
+      placeholder: ex. screenshots, Stack Overflow links, forum links, etc.
+      value: 'Additional details here...'
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Before submitting
+      description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
+      options:
+        - label: I've made research efforts and searched the documentation
+          required: true
+        - label: I've searched for existing issues and PRs
+          required: true

.github/changeset-version.js

@@ -1,12 +1,12 @@
 // ORIGINALLY FROM CLOUDFLARE WRANGLER:
 // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
 
-import { exec } from "child_process"
+import { execSync } from "child_process"
 
 // This script is used by the `release.yml` workflow to update the version of the packages being released.
-// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
-// So we also run `npm install`, which does this update.
+// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
+// So we also run `pnpm install`, which does this update.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-exec("npx changeset version")
-exec("npm install")
+execSync("npx changeset version", { stdio: "inherit" })
+execSync("pnpm install --lockfile-only", { stdio: "inherit" })

.github/dependabot.yml

@@ -0,0 +1,46 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-monorepo"
+    schedule:
+      interval: "weekly"

.github/hero.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="ui">
+<rect width="1280" height="640" fill="#0A0A0A"/>
+<svg x="96" y="215" width="210" height="210" viewBox="0 0 67 67"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#fff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff"/></svg>
+<text x="378" y="276" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">ui</text>
+<text x="378" y="322" font-family="Inter,system-ui,sans-serif" font-size="30" fill="#ffffff" opacity=".66">React component library for AI applications</text>
+<rect x="378" y="338" width="806" height="3" rx="1.5" fill="#ffffff" opacity=".9"/>
+<text x="378" y="390" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
+<text x="1184" y="390" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
+</svg>

.github/version-script-beta.js

@@ -4,7 +4,7 @@
 import { exec } from "child_process"
 import fs from "fs"
 
-const pkgJsonPath = "pkg/cli/package.json"
+const pkgJsonPath = "pkgs/shadcn/package.json"
 try {
   const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
   exec("git rev-parse --short HEAD", (err, stdout) => {

.github/version-script-next.js

@@ -4,7 +4,7 @@
 import { exec } from "child_process"
 import fs from "fs"
 
-const pkgJsonPath = "pkg/cli/package.json"
+const pkgJsonPath = "pkgs/shadcn/package.json"
 try {
   const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
   exec("git rev-parse --short HEAD", (err, stdout) => {

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ concurrency:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -47,14 +47,14 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run linting
         run: pnpm run lint
 
   typecheck:
     name: Type Check
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -83,16 +83,19 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Build UI package
+        run: cd pkgs/ui && pnpm run build
 
       - name: Run type checking
         run: |
           cd app && pnpm run typecheck
-          cd ../pkg/ui && pnpm run tc --noEmit
+          cd ../pkgs/ui && pnpm run tc --noEmit
 
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -121,10 +124,10 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
       - name: Build UI package
-        run: cd pkg/ui && pnpm run build:full
+        run: cd pkgs/ui && pnpm run build:full
 
       - name: Build app
         run: cd app && pnpm run build
@@ -137,11 +140,11 @@ jobs:
           name: build-artifacts
           path: |
             app/.next
-            pkg/ui/dist
+            pkgs/ui/dist
 
   test:
     name: Test
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -170,10 +173,10 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
-      - name: Run pkg/ui tests
-        run: cd pkg/ui && pnpm test -- --run
+      - name: Run pkgs/ui tests
+        run: cd pkgs/ui && pnpm test -- --run
 
       - name: Run app tests
         run: |
@@ -187,12 +190,12 @@ jobs:
         if: always()
         uses: codecov/codecov-action@v3
         with:
-          files: ./pkg/ui/coverage/lcov.info
+          files: ./pkgs/ui/coverage/lcov.info
           flags: unit
 
   deploy-preview:
     name: Deploy Preview
-    runs-on: ubuntu-latest
+    runs-on: hanzo-deploy-linux-amd64
     needs: [lint, typecheck, build]
     if: github.event_name == 'pull_request'
     steps:
@@ -241,7 +244,7 @@ jobs:
 
   status:
     name: CI Status
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     needs: [lint, typecheck, build, test]
     if: always()
     steps:

.github/workflows/code-check.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     name: pnpm lint
     steps:
       - uses: actions/checkout@v3
@@ -16,13 +16,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -39,10 +39,10 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-        #- run: pnpm lint
+      - run: pnpm lint
 
   format:
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     name: pnpm format:check
     steps:
       - uses: actions/checkout@v3
@@ -52,13 +52,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -77,10 +77,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm format:check
 
   tsc:
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     name: pnpm typecheck
     steps:
       - uses: actions/checkout@v3
@@ -90,13 +93,13 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
-      - uses: pnpm/action-setup@v2.2.4
+      - uses: pnpm/action-setup@v4
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 8.6.1
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -113,4 +116,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm typecheck

.github/workflows/coverage.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   coverage:
     name: Test Coverage
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
 
     steps:
       - name: Checkout
@@ -26,15 +26,15 @@ jobs:
           version: 9
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run tests with coverage
-        run: cd pkg/ui && pnpm test:coverage
+        run: cd pkgs/ui && pnpm test:coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3
         with:
-          files: ./pkg/ui/coverage/lcov.info
+          files: ./pkgs/ui/coverage/lcov.info
           flags: unit
           name: hanzo-ui-coverage
 
@@ -44,7 +44,7 @@ jobs:
         with:
           script: |
             const fs = require('fs');
-            const coverage = JSON.parse(fs.readFileSync('./pkg/ui/coverage/coverage-summary.json', 'utf8'));
+            const coverage = JSON.parse(fs.readFileSync('./pkgs/ui/coverage/coverage-summary.json', 'utf8'));
             const total = coverage.total;
             const comment = `## Test Coverage Report\n\n` +
               `Lines: ${total.lines.pct}%\n` +

.github/workflows/deploy-gh-pages.yml

@@ -4,6 +4,12 @@ on:
   push:
     branches: [main]
   workflow_dispatch:
+    inputs:
+      capture_screenshots:
+        description: 'Capture component screenshots (slow, optional)'
+        required: false
+        type: boolean
+        default: false
 
 permissions:
   contents: read
@@ -16,7 +22,8 @@ concurrency:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
+    timeout-minutes: 10
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -46,7 +53,17 @@ jobs:
 
       - name: Install dependencies
         run: |
-          pnpm install --frozen-lockfile
+          pnpm install --no-frozen-lockfile
+
+      - name: Build @hanzo/ui package
+        run: |
+          cd pkgs/ui && pnpm build
+
+      - name: Capture screenshots (optional)
+        if: github.event.inputs.capture_screenshots == 'true'
+        working-directory: ./app
+        run: pnpm capture:registry
+        timeout-minutes: 5
 
       - name: Build documentation
         working-directory: ./app
@@ -57,6 +74,7 @@ jobs:
           NODE_ENV: production
           GITHUB_ACTIONS: true
           NEXT_PUBLIC_APP_URL: https://ui.hanzo.ai
+          SKIP_SCREENSHOTS: true
 
       - name: Setup Pages
         uses: actions/configure-pages@v4
@@ -70,7 +88,7 @@ jobs:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
+    runs-on: hanzo-deploy-linux-amd64
     needs: build
     steps:
       - name: Deploy to GitHub Pages

.github/workflows/deprecated.yml

@@ -0,0 +1,78 @@
+name: Deprecated
+
+on:
+  pull_request_target:
+    types: [opened, synchronize]
+
+permissions:
+  issues: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  deprecated:
+    runs-on: hanzo-build-linux-amd64
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v46
+        with:
+          files: |
+            apps/www/**
+          files_ignore: |
+            apps/www/public/r/**
+          base_sha: ${{ github.event.pull_request.base.sha }}
+          sha: ${{ github.event.pull_request.head.sha }}
+
+      - name: Comment on PR if www files changed
+        if: steps.changed-files.outputs.any_changed == 'true'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const changedFiles = `${{ steps.changed-files.outputs.all_changed_files }}`.split(' ');
+            const wwwFiles = changedFiles.filter(file =>
+              file.startsWith('apps/www/') &&
+              !file.startsWith('apps/www/public/r/') &&
+              file !== 'apps/www/package.json'
+            );
+
+            if (wwwFiles.length > 0) {
+              const comment = `Looks like this PR modifies files in \`apps/www\`, which is deprecated.
+
+              Consider applying the change to \`apps/v4\` if relevant.`;
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: comment
+              });
+
+              // Add deprecated label
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                labels: ['deprecated']
+              });
+            } else {
+              // Remove deprecated label if no www files are changed
+              try {
+                await github.rest.issues.removeLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: context.issue.number,
+                  name: 'deprecated'
+                });
+              } catch (error) {
+                // Label doesn't exist, which is fine
+                console.log('Deprecated label not found, skipping removal');
+              }
+            }

.github/workflows/issue-stale.yml

@@ -0,0 +1,45 @@
+# Adapted from vercel/next.js
+name: "Stale issue handler"
+on:
+  workflow_dispatch:
+  schedule:
+    # This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*
+    - cron: "40 23 * * *"
+
+jobs:
+  stale:
+    runs-on: hanzo-build-linux-amd64
+    if: github.repository_owner == 'shadcn-ui'
+    steps:
+      - uses: actions/stale@v9
+        id: issue-stale
+        name: "Mark stale issues, close stale issues"
+        with:
+          repo-token: ${{ secrets.STALE_TOKEN }}
+          ascending: true
+          days-before-issue-close: 7
+          days-before-issue-stale: 365
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+          remove-issue-stale-when-updated: true
+          stale-issue-label: "stale?"
+          exempt-issue-labels: "roadmap,next"
+          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300
+      - uses: actions/stale@v9
+        id: pr-state
+        name: "Mark stale PRs, close stale PRs"
+        with:
+          repo-token: ${{ secrets.STALE_TOKEN }}
+          ascending: true
+          days-before-issue-close: -1
+          days-before-issue-stale: -1
+          days-before-pr-close: 7
+          days-before-pr-stale: 365
+          remove-pr-stale-when-updated: true
+          exempt-pr-labels: "roadmap,next,bug"
+          stale-pr-label: "stale?"
+          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300

.github/workflows/npm-publish.yml

@@ -1,5 +1,9 @@
 name: NPM Publish
 
+permissions:
+  contents: write
+  id-token: write
+
 on:
   workflow_dispatch:
     inputs:
@@ -12,6 +16,7 @@ on:
           - ui-mcp
           - auth
           - commerce
+          - checkout
           - brand
           - react
           - all
@@ -26,7 +31,7 @@ on:
 
 jobs:
   publish:
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - uses: actions/checkout@v4
 
@@ -38,75 +43,132 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install
 
       - name: Build packages
         run: |
           if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "ui" ]; then
-            cd pkg/ui && pnpm build
+            cd pkgs/ui && pnpm build
+            cd ../..
+          fi
+          if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "ui-mcp" ]; then
+            cd pkgs/ui-mcp && pnpm build
             cd ../..
           fi
           if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "auth" ]; then
-            cd pkg/auth && pnpm build
+            cd pkgs/auth && pnpm build
             cd ../..
           fi
           if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "commerce" ]; then
-            cd pkg/commerce && pnpm build
+            cd pkgs/commerce && pnpm build
+            cd ../..
+          fi
+          if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "checkout" ]; then
+            cd pkgs/checkout && pnpm build
             cd ../..
           fi
           if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "brand" ]; then
-            cd pkg/brand && pnpm build
+            cd pkgs/brand && pnpm build
             cd ../..
           fi
           if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "react" ]; then
-            cd pkg/react && pnpm build
+            cd pkgs/react && pnpm build
             cd ../..
           fi
 
       - name: Bump version and publish
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
         run: |
+          # Set up npm and pnpm auth
           npm config set //registry.npmjs.org/:_authToken $NODE_AUTH_TOKEN
-          
+          echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" >> ~/.npmrc
+
           publish_package() {
             local pkg_dir=$1
-            cd $pkg_dir
-            npm version ${{ github.event.inputs.version_bump }}
-            npm publish --access public
+            local pkg_name=$(cd $pkg_dir && node -p "require('./package.json').name")
+            local pkg_version=$(cd $pkg_dir && node -p "require('./package.json').version")
+            echo "=== Publishing $pkg_name@$pkg_version from $pkg_dir ==="
+
+            # Change to package directory
+            pushd "$pkg_dir"
+
+            # Bump version manually using node to avoid any pnpm/npm hooks
+            echo "Bumping version (${{ github.event.inputs.version_bump }})..."
+            node -e "
+              const fs = require('fs');
+              const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+              const [major, minor, patch] = pkg.version.split('.').map(Number);
+              const bump = '${{ github.event.inputs.version_bump }}';
+              if (bump === 'major') pkg.version = (major + 1) + '.0.0';
+              else if (bump === 'minor') pkg.version = major + '.' + (minor + 1) + '.0';
+              else pkg.version = major + '.' + minor + '.' + (patch + 1);
+              fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
+              console.log('New version:', pkg.version);
+            "
+
+            local new_version=$(node -p "require('./package.json').version")
+            echo "Version is now: $new_version"
+
+            # Pack the tarball
+            echo "Running pnpm pack..."
+            pnpm pack --pack-gzip-level 9
+            local tarball=$(ls -t *.tgz | head -1)
+            echo "Created tarball: $tarball"
+
+            # Verify tarball contents
+            echo "Tarball package.json:"
+            tar -xzf "$tarball" -O package/package.json
+
+            # Copy to temp dir and publish
+            local temp_dir="/tmp/publish-$$"
+            mkdir -p "$temp_dir"
+            cp "$tarball" "$temp_dir/"
+            echo "Publishing from $temp_dir..."
+            cd "$temp_dir"
+            npm publish "$tarball" --access public
             cd -
+
+            # Cleanup
+            rm -rf "$temp_dir"
+            rm -f "$tarball"
+            popd
           }
           
           case "${{ github.event.inputs.package }}" in
             ui)
-              publish_package "pkg/ui"
+              publish_package "pkgs/ui"
               ;;
             ui-mcp)
-              publish_package "pkg/ui-mcp"
+              publish_package "pkgs/ui-mcp"
               ;;
             auth)
-              publish_package "pkg/auth"
+              publish_package "pkgs/auth"
               ;;
             commerce)
-              publish_package "pkg/commerce"
+              publish_package "pkgs/commerce"
+              ;;
+            checkout)
+              publish_package "pkgs/checkout"
               ;;
             brand)
-              publish_package "pkg/brand"
+              publish_package "pkgs/brand"
               ;;
             react)
-              publish_package "pkg/react"
+              publish_package "pkgs/react"
               ;;
             all)
-              publish_package "pkg/ui"
-              publish_package "pkg/ui-mcp"
-              publish_package "pkg/auth"
-              publish_package "pkg/commerce"
-              publish_package "pkg/brand"
-              publish_package "pkg/react"
+              publish_package "pkgs/ui"
+              publish_package "pkgs/ui-mcp"
+              publish_package "pkgs/auth"
+              publish_package "pkgs/commerce"
+              publish_package "pkgs/checkout"
+              publish_package "pkgs/brand"
+              publish_package "pkgs/react"
               ;;
           esac
 

.github/workflows/prerelease-comment.yml

@@ -10,9 +10,9 @@ on:
 jobs:
   comment:
     if: |
-      github.repository_owner == 'hanzoai-ui' &&
+      github.repository_owner == 'shadcn-ui' &&
       ${{ github.event.workflow_run.conclusion == 'success' }}
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     name: Write comment to the PR
     steps:
       - name: "Comment on PR"
@@ -28,8 +28,8 @@ jobs:
 
             for (const artifact of allArtifacts.data.artifacts) {
               // Extract the PR number and package version from the artifact name
-              const match = /^npm-package-hanzoai-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
-              
+              const match = /^npm-package-shadcn@(.*?)-pr-(\d+)/.exec(artifact.name);
+
               if (match) {
                 require("fs").appendFileSync(
                   process.env.GITHUB_ENV,
@@ -49,7 +49,7 @@ jobs:
             A new prerelease is available for testing:
 
             ```sh
-            npx hanzoai-ui@${{ env.BETA_PACKAGE_VERSION }}
+            pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
       - name: "Remove the autorelease label once published"

.github/workflows/prerelease.yml

@@ -7,31 +7,39 @@ on:
     types: [labeled]
     branches:
       - main
+
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   prerelease:
     if: |
-      github.repository_owner == 'hanzoai' &&
+      github.repository_owner == 'shadcn-ui' &&
       contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
     name: Build & Publish a beta release to NPM
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     environment: Preview
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Use PNPM
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.6.1
+          version: 9.0.6
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
-          cache: "pnpm"
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
 
       - name: Install NPM Dependencies
         run: pnpm install
@@ -39,11 +47,6 @@ jobs:
       - name: Modify package.json version
         run: node .github/version-script-beta.js
 
-      - name: Authenticate to NPM
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> pkg/cli/.npmrc
-        env:
-          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-
       - name: Publish Beta to NPM
         run: pnpm pub:beta
 
@@ -51,10 +54,10 @@ jobs:
         id: package-version
         uses: martinbeentjes/npm-get-version-action@main
         with:
-          path: pkg/cli
+          path: pkgs/shadcn
 
       - name: Upload packaged artifact
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: npm-package-hanzoai-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
-          path: pkg/cli/dist/index.js
+          name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          path: pkgs/shadcn/dist/index.js

.github/workflows/publish-on-tag.yml

@@ -3,17 +3,12 @@ name: Publish on Tag
 on:
   push:
     tags:
-      - 'v*'                 # Publish all packages
-      - '@hanzo/ui-*'        # Publish @hanzo/ui only
-      - '@hanzo/auth-*'      # Publish @hanzo/auth only
-      - '@hanzo/commerce-*'  # Publish @hanzo/commerce only
-      - '@hanzo/brand-*'     # Publish @hanzo/brand only
-      - '@hanzo/react-*'     # Publish @hanzo/react only
+      - 'v*'  # Match @hanzo/ui version (e.g., v5.1.1)
 
 jobs:
   test:
     name: Run Tests
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - uses: actions/checkout@v4
 
@@ -25,29 +20,27 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
       - name: Build packages
         run: |
-          cd pkg/ui && pnpm build && cd ../..
-          cd pkg/auth && pnpm build && cd ../..
-          cd pkg/commerce && pnpm build && cd ../..
-          cd pkg/brand && pnpm build && cd ../..
-          cd pkg/react && pnpm build && cd ../..
+          cd pkgs/ui && pnpm build && cd ../..
+          cd pkgs/commerce && pnpm build && cd ../..
+          cd pkgs/brand && pnpm build && cd ../..
+          cd pkgs/react && pnpm build && cd ../..
 
       - name: Run tests
         run: |
-          cd pkg/ui && pnpm test
+          cd pkgs/ui && pnpm test
           cd ../react && pnpm test
           cd ../..
 
   publish:
     name: Publish to NPM
     needs: test
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     permissions:
       contents: write
       id-token: write
@@ -62,98 +55,95 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install --no-frozen-lockfile
 
-      - name: Get tag name
-        id: get_tag
-        run: echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
-
-      - name: Determine packages to publish
-        id: determine_packages
+      - name: Build all packages
         run: |
-          TAG="${{ steps.get_tag.outputs.TAG }}"
-          PACKAGES=""
-
-          # Package-specific tags
-          if [[ $TAG == @hanzo/ui-* ]]; then
-            PACKAGES="ui"
-          elif [[ $TAG == @hanzo/auth-* ]]; then
-            PACKAGES="auth"
-          elif [[ $TAG == @hanzo/commerce-* ]]; then
-            PACKAGES="commerce"
-          elif [[ $TAG == @hanzo/brand-* ]]; then
-            PACKAGES="brand"
-          elif [[ $TAG == @hanzo/react-* ]]; then
-            PACKAGES="react"
-          elif [[ $TAG == v* ]]; then
-            # General version tags publish all packages
-            PACKAGES="ui auth commerce brand react"
-          fi
-
-          echo "PACKAGES=$PACKAGES" >> $GITHUB_OUTPUT
-          echo "Publishing packages: $PACKAGES"
-
-      - name: Build packages to publish
-        run: |
-          PACKAGES="${{ steps.determine_packages.outputs.PACKAGES }}"
-
-          if [ -z "$PACKAGES" ]; then
-            echo "No packages to publish for tag ${{ steps.get_tag.outputs.TAG }}"
-            exit 0
-          fi
-
-          for package in $PACKAGES; do
-            echo "Building $package..."
-            cd "pkg/$package" && pnpm build && cd ../..
-          done
+          cd pkgs/ui && pnpm build && cd ../..
+          cd pkgs/commerce && pnpm build && cd ../..
+          cd pkgs/brand && pnpm build && cd ../..
+          cd pkgs/react && pnpm build && cd ../..
 
       - name: Configure npm authentication
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
           npm config set //registry.npmjs.org/:_authToken $NODE_AUTH_TOKEN
           npm whoami
 
-      - name: Build and publish packages
+      - name: Check and publish packages
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          PACKAGES="${{ steps.determine_packages.outputs.PACKAGES }}"
+          echo "Checking all packages for unpublished versions..."
 
-          if [ -z "$PACKAGES" ]; then
-            echo "No packages to publish"
-            exit 0
-          fi
+          PUBLISHED_COUNT=0
+          SKIPPED_COUNT=0
+          PUBLISHED_PACKAGES=""
 
-          for package in $PACKAGES; do
-            echo "Publishing $package..."
-            cd "pkg/$package"
+          for package in ui commerce brand react; do
+            cd "pkgs/$package"
 
-            # Get current version from package.json
             CURRENT_VERSION=$(node -p "require('./package.json').version")
             PACKAGE_NAME=$(node -p "require('./package.json').name")
 
+            echo ""
+            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+            echo "📦 Checking $PACKAGE_NAME@$CURRENT_VERSION"
+            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
             # Check if this version already exists on npm
             if npm view "$PACKAGE_NAME@$CURRENT_VERSION" version 2>/dev/null; then
-              echo "⚠️  $PACKAGE_NAME@$CURRENT_VERSION already published, skipping..."
+              echo "⏭️  Already published - skipping"
+              SKIPPED_COUNT=$((SKIPPED_COUNT + 1))
             else
-              echo "✅ Publishing $PACKAGE_NAME@$CURRENT_VERSION..."
+              echo "🚀 Publishing to npm..."
               npm publish --access public
-              echo "✨ Successfully published $PACKAGE_NAME@$CURRENT_VERSION"
+              echo "✅ Successfully published $PACKAGE_NAME@$CURRENT_VERSION"
+              PUBLISHED_COUNT=$((PUBLISHED_COUNT + 1))
+              PUBLISHED_PACKAGES="$PUBLISHED_PACKAGES\n- $PACKAGE_NAME@$CURRENT_VERSION"
             fi
 
             cd ../..
           done
 
+          echo ""
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "📊 Publishing Summary"
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "✅ Published: $PUBLISHED_COUNT package(s)"
+          echo "⏭️  Skipped: $SKIPPED_COUNT package(s)"
+
+          if [ $PUBLISHED_COUNT -gt 0 ]; then
+            echo ""
+            echo -e "Published packages:$PUBLISHED_PACKAGES"
+          fi
+
+          # Save for GitHub release notes
+          echo "PUBLISHED_COUNT=$PUBLISHED_COUNT" >> $GITHUB_ENV
+          echo "PUBLISHED_PACKAGES<<EOF" >> $GITHUB_ENV
+          echo -e "$PUBLISHED_PACKAGES" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+
       - name: Create GitHub Release
-        if: startsWith(github.ref, 'refs/tags/v')
+        if: ${{ env.PUBLISHED_COUNT > 0 }}
         uses: softprops/action-gh-release@v1
         with:
           generate_release_notes: true
+          body: |
+            ## 📦 NPM Packages Published
+
+            ${{ env.PUBLISHED_PACKAGES }}
+
+            ### Installation
+
+            ```bash
+            # Install latest versions
+            npm install @hanzo/ui @hanzo/commerce @hanzo/brand @hanzo/react
+            ```
           files: |
             CHANGELOG.md
         env:

.github/workflows/publish.yml

@@ -0,0 +1,86 @@
+name: Publish Packages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'pkgs/*/package.json'
+      - 'pkgs/*/package.json'
+
+jobs:
+  detect-changes:
+    runs-on: hanzo-build-linux-amd64
+    outputs:
+      packages: ${{ steps.changed.outputs.packages }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Detect changed packages
+        id: changed
+        run: |
+          CHANGED=()
+          for pkg_json in pkgs/*/package.json pkgs/*/package.json; do
+            [ ! -f "$pkg_json" ] && continue
+            pkg_dir=$(dirname "$pkg_json")
+
+            # Skip private packages
+            IS_PRIVATE=$(jq -r '.private // false' "$pkg_json")
+            [ "$IS_PRIVATE" = "true" ] && continue
+
+            # Only publish @hanzo/* packages
+            PKG_NAME=$(jq -r '.name' "$pkg_json")
+            case "$PKG_NAME" in
+              @hanzo/*) ;;
+              *) continue ;;
+            esac
+
+            # Check version changed
+            if git diff HEAD~1 HEAD --quiet "$pkg_json" 2>/dev/null; then
+              continue
+            fi
+
+            OLD=$(git show HEAD~1:"$pkg_json" 2>/dev/null | jq -r '.version' || echo "0.0.0")
+            NEW=$(jq -r '.version' "$pkg_json")
+
+            if [ "$OLD" != "$NEW" ]; then
+              echo "Version change: $PKG_NAME ($OLD -> $NEW)"
+              CHANGED+=("$(basename "$pkg_dir")")
+            fi
+          done
+
+          if [ ${#CHANGED[@]} -eq 0 ]; then
+            echo "packages=[]" >> $GITHUB_OUTPUT
+          else
+            JSON=$(printf '%s\n' "${CHANGED[@]}" | jq -R . | jq -s -c .)
+            echo "packages=$JSON" >> $GITHUB_OUTPUT
+          fi
+
+  publish:
+    needs: detect-changes
+    if: needs.detect-changes.outputs.packages != '[]'
+    runs-on: hanzo-build-linux-amd64
+    strategy:
+      matrix:
+        package: ${{ fromJson(needs.detect-changes.outputs.packages) }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm --filter ${{ matrix.package }} build
+
+      - name: Publish package
+        run: pnpm --filter ${{ matrix.package }} publish --no-git-checks --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

@@ -7,11 +7,16 @@ on:
     branches:
       - main
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+
 jobs:
   release:
-    if: ${{ github.repository_owner == 'hanzoai-ui' }}
+    if: ${{ github.repository_owner == 'shadcn-ui' }}
     name: Create a PR for release workflow
-    runs-on: ubuntu-latest
+    runs-on: hanzo-build-linux-amd64
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
@@ -19,16 +24,18 @@ jobs:
           fetch-depth: 0
 
       - name: Use PNPM
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.6.1
+          version: 9.0.6
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          version: 8.6.1
-          node-version: 18
-          cache: "pnpm"
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
 
       - name: Install NPM Dependencies
         run: pnpm install
@@ -37,11 +44,11 @@ jobs:
       #   run: pnpm check
 
       - name: Build the package
-        run: pnpm build:cli
+        run: pnpm shadcn:build
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1.4.1
+        uses: changesets/action@v1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
@@ -49,5 +56,4 @@ jobs:
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

.github/workflows/sync-forks.yml.disabled

@@ -1,100 +0,0 @@
-name: Sync Forks
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-    inputs:
-      fork:
-        description: 'Fork to sync (luxfi or zoo or all)'
-        required: false
-        default: 'all'
-
-jobs:
-  sync-luxfi:
-    if: github.event.inputs.fork == 'luxfi' || github.event.inputs.fork == 'all' || github.event_name == 'push'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Hanzo UI
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          
-      - name: Setup Git
-        run: |
-          git config --global user.name "Hanzo Bot"
-          git config --global user.email "bot@hanzo.ai"
-          
-      - name: Clone Luxfi Fork
-        run: |
-          git clone https://github.com/luxfi/ui.git luxfi-ui
-          cd luxfi-ui
-          git remote add upstream https://github.com/hanzoai/ui.git
-          git fetch upstream
-          
-      - name: Sync and Rebrand
-        run: |
-          cd luxfi-ui
-          # Merge upstream changes
-          git checkout main
-          git merge upstream/main --no-edit || true
-          
-          # Run rebrand script
-          cp ../scripts/rebrand.sh ./
-          chmod +x rebrand.sh
-          ./rebrand.sh luxfi
-          
-          # Commit changes
-          git add -A
-          git commit -m "sync: Update from hanzoai/ui and rebrand for Luxfi" || true
-          
-      - name: Push to Luxfi
-        env:
-          GITHUB_TOKEN: ${{ secrets.FORK_SYNC_TOKEN }}
-        run: |
-          cd luxfi-ui
-          git push https://$GITHUB_TOKEN@github.com/luxfi/ui.git main || true
-
-  sync-zoo:
-    if: github.event.inputs.fork == 'zoo' || github.event.inputs.fork == 'all' || github.event_name == 'push'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Hanzo UI
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          
-      - name: Setup Git
-        run: |
-          git config --global user.name "Hanzo Bot"
-          git config --global user.email "bot@hanzo.ai"
-          
-      - name: Clone Zoo Fork
-        run: |
-          git clone https://github.com/zooai/ui.git zoo-ui
-          cd zoo-ui
-          git remote add upstream https://github.com/hanzoai/ui.git
-          git fetch upstream
-          
-      - name: Sync and Rebrand
-        run: |
-          cd zoo-ui
-          # Merge upstream changes
-          git checkout main
-          git merge upstream/main --no-edit || true
-          
-          # Run rebrand script
-          cp ../scripts/rebrand.sh ./
-          chmod +x rebrand.sh
-          ./rebrand.sh zoo
-          
-          # Commit changes
-          git add -A
-          git commit -m "sync: Update from hanzoai/ui and rebrand for Zoo" || true
-          
-      - name: Push to Zoo
-        env:
-          GITHUB_TOKEN: ${{ secrets.FORK_SYNC_TOKEN }}
-        run: |
-          cd zoo-ui
-          git push https://$GITHUB_TOKEN@github.com/zooai/ui.git main || true

.github/workflows/test.yml

@@ -1,58 +1,45 @@
-name: E2E and Visual Tests
+name: Test
 
 on:
-  push:
-    branches: [main, develop]
   pull_request:
-    branches: [main, develop]
-  schedule:
-    # Run tests daily at 2 AM UTC to catch breaking updates
-    - cron: '0 2 * * *'
+    branches: ["*"]
 
 jobs:
   test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
-
+    runs-on: hanzo-build-linux-amd64
+    name: pnpm test
+    env:
+      NEXT_PUBLIC_APP_URL: http://localhost:4000
+      NEXT_PUBLIC_V0_URL: https://v0.dev
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
         with:
           version: 9.0.6
+          run_install: false
 
-      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
-
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install
 
-      - name: Install Playwright browsers
-        run: pnpm exec playwright install --with-deps
-
-      - name: Build the project
-        run: pnpm build
-
-      - name: Run component health check
-        run: pnpm health-check
-        continue-on-error: true
-
-      - name: Run E2E tests
-        run: pnpm test:e2e
-
-      - name: Run visual regression tests
-        run: pnpm test:visual
-
-      - name: Upload test results
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+      - run: pnpm test

.github/workflows/validate-registries.yml

@@ -0,0 +1,129 @@
+name: Validate Registries
+
+on:
+  pull_request:
+    paths:
+      - "apps/v4/public/r/registries.json"
+      - "apps/v4/registry/directory.json"
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/v4/public/r/registries.json"
+      - "apps/v4/registry/directory.json"
+
+jobs:
+  check-registry-sync:
+    if: github.event_name == 'pull_request'
+    runs-on: hanzo-build-linux-amd64
+    name: check-registry-sync
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check changed files
+        id: changed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
+
+          DIRECTORY_CHANGED=false
+          REGISTRIES_CHANGED=false
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
+            DIRECTORY_CHANGED=true
+          fi
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
+            REGISTRIES_CHANGED=true
+          fi
+
+          echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
+          echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
+
+      - name: Flag missing registries.json update
+        if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
+          gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
+          exit 1
+
+  validate:
+    runs-on: hanzo-build-linux-amd64
+    name: pnpm validate:registries
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Block reserved registry namespaces
+        env:
+          RESERVED_NAMESPACES: "@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts"
+        run: |
+          node <<'EOF'
+          const fs = require("node:fs")
+
+          const files = [
+            "apps/v4/public/r/registries.json",
+            "apps/v4/registry/directory.json",
+          ]
+          const reservedNamespaces = new Set(
+            process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
+          )
+
+          function readNames(filePath) {
+            return JSON.parse(fs.readFileSync(filePath, "utf8")).map(
+              (entry) => entry.name
+            )
+          }
+
+          const violations = files.flatMap((filePath) => {
+            return readNames(filePath)
+              .filter((name) => reservedNamespaces.has(name))
+              .map((name) => `${filePath}: ${name}`)
+          })
+
+          if (violations.length > 0) {
+            console.error("Reserved registry namespaces are not allowed:")
+
+            for (const violation of violations) {
+              console.error(`- ${violation}`)
+            }
+
+            process.exit(1)
+          }
+          EOF
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9.0.6
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Validate registries
+        run: pnpm --filter=v4 validate:registries

.gitignore

@@ -5,6 +5,7 @@ node_modules
 **/node_modules
 .pnp
 .pnp.js
+/pnpm-lock.yaml
 
 # testing
 coverage
@@ -56,4 +57,28 @@ QWEN.md
 
 .playwright-mcp
 app/out
+app/.source
 
+# test artifacts
+tests/reports/
+tests/artifacts/
+
+# Note: Block screenshots are pre-generated and committed
+# They cannot be generated in CI (requires display/browser)
+# app/public/r/styles/*/ -- REMOVED to allow committing screenshots
+
+
+# Test artifacts
+test-results/
+playwright-report/
+*BADGE_INSPECTION*.md
+*BADGE_INSPECTION*.txt
+
+# ide
+.idea
+.fleet
+
+.notes
+.claude/settings.local.json
+pkg/ui/dist-test/
+app/public/api/

.kodiak.toml

@@ -0,0 +1,18 @@
+# .kodiak.toml
+version = 1
+
+[merge]
+automerge_label = "automerge"
+require_automerge_label = true
+method = "squash"
+delete_branch_on_merge = true
+optimistic_updates = false
+prioritize_ready_to_merge = true
+notify_on_conflict = true
+
+[merge.message]
+title = "pull_request_title"
+body = "pull_request_body"
+include_pr_number = true
+body_type = "markdown"
+strip_html_comments = true

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+link-workspace-packages=true
+puppeteer_skip_download=true

.nvmrc

@@ -0,0 +1 @@
+v20.5.1

.prettierignore

@@ -0,0 +1,8 @@
+dist
+node_modules
+.next
+build
+.contentlayer
+**/fixtures
+deprecated
+apps/v4/registry/styles/**/*.css

.vscode/settings.json

@@ -1,5 +1,24 @@
 {
   "typescript.tsdk": "node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib",
   "editor.gotoLocation.multipleDefinitions": "goto",
-  "typescript.preferences.quoteStyle": "single"
+  "typescript.preferences.quoteStyle": "single",
+  "eslint.workingDirectories": [
+    { "pattern": "apps/*/" },
+    { "pattern": "pkgs/*/" },
+    { "pattern": "pkgs/*/" }
+  ],
+  "tailwindCSS.classFunctions": ["cva", "cn"],
+  "vitest.debugExclude": [
+    "<node_internals>/**",
+    "**/node_modules/**",
+    "**/fixtures/**"
+  ],
+  "files.exclude": {
+    "deprecated": true
+  },
+  "search.exclude": {
+    "apps/v4/registry/radix-*": true,
+    "apps/v4/public/r/*": true,
+    "pkgs/shadcn/test/fixtures/*": true
+  }
 }

CONSOLIDATION.md

@@ -0,0 +1,190 @@
+# Hanzo UI Consolidation — one library, all polish, no duplication
+
+**Goal.** RIP the fragmentation (`@hanzo/data` vs `@hanzo/ui` vs in-console duplicates) into ONE canonical, cross-platform, presentational, clean-room library: **`@hanzo/ui`, built on `@hanzo/gui`**. Preserve every polished component + token; zero loss; no fork.
+
+**Status.**
+- **Step 1 — Audit:** complete (this document; four source trees read file-by-file).
+- **Step 2 — Establish `@hanzo/ui` + migrate the stable foundation:** **DONE & GREEN** (`pkg/ui` is now a real package; `tsc --noEmit` = 0 errors, `vitest` = 12/12).
+- **Step 3 — Console re-point:** **STAGED, not merged.** Gate is split (backend live, app lanes in-flight) — see [Step 3](#step-3--console-re-point-staged).
+
+**One decision needs CTO sign-off before publish** — see [Naming / version](#naming--version--the-one-decision).
+
+---
+
+## Architecture — three layers, decomplected
+
+```
+@hanzo/gui   (Tamagui/One)   cross-platform primitives: Text, XStack/YStack, Button, Input,
+   │                          Card, Popover, Select, Switch, Slider, Spinner, ScrollView …
+   ▼
+@hanzo/data  (pkg/data)      the metadata-driven RECORD layer: fields → records → views
+   │                          (RecordsView, DataTable, BoardView, RecordDetail, field editors)
+   ▼
+@hanzo/ui    (pkg/ui)  ◄──── THE ONE LIBRARY. Two orthogonal concerns, one package:
+                              • product/app layer  →  import { … } from '@hanzo/ui'
+                              • record layer        →  import { … } from '@hanzo/ui/data'  (re-exports @hanzo/data)
+```
+
+`@hanzo/data` stays the **source of truth** for the record layer; `@hanzo/ui` **composes** it (`export * from '@hanzo/data'` on the `./data` subpath) rather than copying — so the CMS/ERP/Help app lanes that consume `@hanzo/data` today keep working untouched, and there is exactly one home. This mirrors how the gui base wraps `hanzogui`.
+
+Both layers own a `DataTable` (product = generic typed `<T>` list; data = field-driven record grid). Keeping the record layer on the `./data` subpath keeps each name unambiguous — no rename, no collision.
+
+---
+
+## The preserve-and-merge manifest
+
+Legend: **✅ migrated** (in `pkg/ui`, GREEN) · **↪ re-exported** (composed from `@hanzo/data`) · **⏳ staged** (Step 3, after app lanes land) · **🔧 pending prop-injection** (app-coupled; decouple before it can live in a presentational lib) · **🏠 stays in console** (app glue, not a UI component).
+
+### A. Record layer — `@hanzo/data` → `@hanzo/ui/data`  ↪
+
+Source: `pkg/data/src/*` (v1.2.0, clean-room, already published). Surfaced through `@hanzo/ui/data` and `@hanzo/ui/primitives/bases/data`. Nothing re-implemented.
+
+| Component / module | Source | New home |
+|---|---|---|
+| `RecordsView` (flagship: toolbar over table⇆board, filter/sort/search/group, saved views) | `view/RecordsView.tsx`, `view/Toolbar.tsx` | `@hanzo/ui/data` |
+| `DataTable` (field-driven record grid: sort headers, drag resize/reorder, row select, inline edit, pagination) | `table/DataTable.tsx` | `@hanzo/ui/data` |
+| `BoardView` (kanban, optimistic drag-move) · `RecordCard` | `board/BoardView.tsx`, `table/RecordCard.tsx` | `@hanzo/ui/data` |
+| `RecordDetail` / `RecordForm` | `record/RecordDetail.tsx` | `@hanzo/ui/data` |
+| Field model + registry (`FieldType` ×24, `FieldDefinition`, `registerField`, routers) | `field/{types,registry,registerDefaults,FieldDisplay,FieldInput}` | `@hanzo/ui/data` |
+| Field displays + **editors** (select/currency/date/relation/file/JSON/boolean/fullName/address…) | `field/{displays,inputs}.tsx` | `@hanzo/ui/data` |
+| Composable primitives: `Menu`, `CheckBox`, `Toggle`, `Calendar` | `primitives/*` | `@hanzo/ui/data` |
+| Pure logic: `applyView`, `sortRecords`, `filterRecords`, `searchRecords`, `paginate`, `boardColumns`, … | `{table,board,view}/logic.ts` | `@hanzo/ui/data` (+ `@hanzo/data/*/logic` subpaths for Node hosts) |
+| Tokens: `tokens`, `TAG_TONES`, `tagTone` | `theme.ts` | **also top-level `@hanzo/ui`** (token surface) |
+
+### B. Console `components/ui/*` product primitives → `@hanzo/ui/product`  ✅ / 🔧
+
+Source: `console2/src/components/ui/*`. The pure subset was ported **byte-identical** (verified by `diff`) — 100% of the polish preserved (Charts' hover tooltips/axis-ticks/honest-null, DataTable width/flex/hover-gating, Field's 6 variants, SlideOver's focus-trap + scroll-lock, ComboBox's ReDoS-safe filter).
+
+| Component | Source (`console2/src/components/ui/`) | New home | Status |
+|---|---|---|---|
+| `DataTable<T>` (generic typed list) + `Column` | `DataTable.tsx` | `@hanzo/ui` (`product/DataTable`) | ✅ |
+| `PageHeader` | `PageHeader.tsx` | `@hanzo/ui` | ✅ |
+| `Field*` (`FieldRow/Text/TextArea/Switch/Select/Slider`) | `Field.tsx` | `@hanzo/ui` | ✅ |
+| **Charts** (`Sparkline/LineChart/BarChart/Donut/BarRows`, `CHART_PALETTE`) | `Charts.tsx` | `@hanzo/ui` | ✅ |
+| `Donut` (standalone dependency-free ring) | `Donut.tsx` | `@hanzo/ui` as **`DonutRing`** (alias — Charts.Donut is canonical) | ✅ |
+| `StatusTag` (health verdict → pill) | `StatusTag.tsx` | `@hanzo/ui` | ✅ |
+| `EmptyState` (DO/Vercel-class first-run) | `EmptyState.tsx` | `@hanzo/ui` | ✅ (**decoupled** — see §I) |
+| `Metric*` (`MetricCard/MiniBars/UtilBar/LegendDot/Panel/HintButton`, `SERIES`) | `Metric.tsx` | `@hanzo/ui` (its `Sparkline` preserved as **`MetricSparkline`**) | ✅ |
+| `ComboBox` + pure `filterOptions`/`isKnownOption` | `ComboBox.tsx`, `combobox/filter.ts` | `@hanzo/ui` | ✅ (+ `filter.test.ts`) |
+| `PrimaryButton` · `HanzoMark` · `ProductIcon` · `ProviderLogo` | resp. files | `@hanzo/ui` | ✅ |
+| `SlideOver` (a11y drawer) · `SelectMenu` · `Toast` (`useToast`) | resp. files | `@hanzo/ui` | ✅ (SlideOver import decoupled `~/…/color`→`./color`) |
+| `Reorder<T>` (pointer DnD) · `FadeIn` · `ThemeToggle` · `color` (`asColor`/`IconLike`) | resp. files | `@hanzo/ui` | ✅ (+ `Reorder.test.ts`) |
+| `DetailPane` (right-side pane over SlideOver) | `components/DetailPane.tsx` | `@hanzo/ui` | ⏳ (liftable; lands with Step 3 — depends only on SlideOver) |
+| `ChunkGuard` (stale-deploy chunk-error reload) | `components/ChunkGuard.tsx` | `@hanzo/ui` | ⏳ (fully portable; lands with Step 3) |
+
+### C. Design tokens + motion → `@hanzo/ui`  ✅
+
+The brief's premise (`globals.css` `t_dark`/`t_light` token blocks) is **corrected**: `t_dark`/`t_light` are `@hanzo/gui` (Tamagui) theme **class names**; the calm values live in three real places, all preserved:
+
+| Polish | Source | New home |
+|---|---|---|
+| Calm dark-first tokens (surface, text, accent `#60a5fa`, tag tones) — raw hex, theme-config independent | `pkg/data/src/theme.ts` | `@hanzo/ui` (top-level `tokens`/`TAG_TONES`/`tagTone`) |
+| OKLCH shadcn-compatible palette (soft-charcoal `oklch(0.145 0 0)`, `--radius: 0.5rem`, indigo sidebar accent) | `pkgs/ui/style/hanzo-default-colors.css`, `@hanzo/tokens` | unchanged (legacy shadcn line); the gui line uses the hex tokens above |
+| **Motion vocabulary** — `hz-fade-up` (FadeIn), `hz-collapse`/`hz-slide`/`hz-fade` (shell/drawer), `hz-drag-item`, `hz-skeleton`/`hz-pulse`/`hz-row-in`; all `prefers-reduced-motion`-guarded | `console2/app/globals.css` (motion section) | **`@hanzo/ui/styles/motion.css`** (verbatim) — `import '@hanzo/ui/styles/motion.css'` once at app root |
+
+### D. Generic DocType renderer → `@hanzo/ui`  ⏳ (Step 3, FINAL — active lane)
+
+Source: `console2/src/components/doctype/*`. **Actively edited by the CMS/ERP/Help lanes (untracked).** Dependency-**injected** (`client: FrameworkClient` prop) — not `~/lib/api`-coupled — so the real move-blockers are `~/lib/framework/{types,fields}` + the `ui/*` primitives (now in `@hanzo/ui`) + `@hanzo/data` (now `@hanzo/ui/data`).
+
+| File | Class | Step-3 disposition |
+|---|---|---|
+| `MediaGrid.tsx` | presentational | → `@hanzo/ui` (cleanest lift; props-only DAM gallery) |
+| `DocTypeRecords.tsx` / `DocTypeDetail.tsx` | mixed (data-bound shell over `@hanzo/data` views) | shell **stays in console**; renders `@hanzo/ui/data` views (already true) |
+| `CollectionsBrowser.tsx` | mixed (card grid + install/create orchestration) | presentational card-grid → `@hanzo/ui`; orchestration stays |
+| `data.ts` | glue (relation loading) | stays in console |
+
+### E. LivingOverview → `@hanzo/ui`  ⏳ (Step 3 — active lane)
+
+Source: `console2/src/components/products/overview/living/*` (untracked/modified). Pure/presentational parts portable; app-glue concentrated in `registry.ts` (live API clients).
+
+| Part | Class | Step-3 disposition |
+|---|---|---|
+| `motion.ts`, `hooks.ts`, `logic.ts`, `config.ts` (types) | pure | → `@hanzo/ui` (unit-tested; count-up, poll clock, unit formatting) |
+| `tiles.tsx`, `LivingOverview.tsx` | presentational (reuse `ui/Charts` verbatim) | → `@hanzo/ui` (once `config.ts`'s one `~/lib/products/registry` `ProductIcon` type is swapped for `@hanzo/ui`'s `IconLike`) |
+| `adapters.ts`, `registry.ts` | glue (map REAL `/v1` sources → `OverviewData`) | **stay in console** |
+
+### F. Framework / Base-data libs → stay in console  🏠
+
+`src/lib/framework/*` (DocType wire contract + `FrameworkApi` client + pure `fields.ts` mapper to `@hanzo/data`) and `src/lib/base-data/*` (Base REST client + schema→field mapper) are **app data-access glue**, not UI. They stay in the console. Their pure mappers (`docTypeToFields`, `baseCollectionToFields`) could later publish as a small `@hanzo/base-data` adapter, but they are not UI components and are out of scope for `@hanzo/ui`.
+
+### G. App-coupled console components → 🔧 pending prop-injection (NOT yet in the lib)
+
+These import app `~/lib`/session/router/branding and must be made presentational (inject props) before they belong in a host-agnostic lib. Kept in console for now; the injection contract is specified so the eventual lift is mechanical.
+
+| Component | Coupling | Inject to lift |
+|---|---|---|
+| `BackendStateCard` (`BackendState.tsx`) | `~/lib/api` `ApiError` | accept a numeric `status` (or shared error shape) instead of `ApiError` |
+| `BrandLogo` | session + live IAM `organization()` + `~/config` + branding | `orgName`, `logoUrl` (or a `loadOrgLogo` loader), brand mark/name as props |
+| `Breadcrumbs` | `next/navigation` + catalog lookups | `crumbs[]` (or `pathname` + resolver) + `onNavigate` |
+| `Loader` / `BrandMark` | `~/config` + brand logo pkgs | `brand`/`brandName` + the animated-SVG getter |
+| `States` (`ErrorState`, `OperatorAccessRequired`) | `~/lib/api` + session + branding | the error, the account identity, brand strings |
+
+---
+
+## What this pass built (Step 2)
+
+New in **`pkg/ui`** (was a bare `src/` staging dir — no package):
+
+- `package.json` — `@hanzo/ui` `8.0.0`, source-published (`files: ["src"]`, exports map to `.ts`), peers `@hanzo/gui >=7.2.2`, `@hanzo/data >=1.2.0`, `react >=19`; BSD-3-Clause. Exports: `.`, `./product`, `./data`, `./primitives/bases/data`, `./styles/motion.css`.
+- `src/index.ts` — top-level barrel (product layer + tokens).
+- `src/product/index.ts` — product barrel; **collision-free** (Charts `Sparkline`/`Donut` canonical; Metric's → `MetricSparkline`; standalone ring → `DonutRing`; `ComboOption` from the one filter module) — **zero loss**.
+- `src/data.ts` — `export * from '@hanzo/data'` (the record layer, one home).
+- `src/styles/hanzo-motion.css` — the motion vocabulary, verbatim.
+- `tsconfig.json`, `vitest.config.ts`, `gui.config.ts`, `gui.d.ts`, `.npmignore`, `README.md` — mirror the proven `pkg/data` setup.
+- **One decouple fix:** `product/EmptyState.tsx` no longer imports `~/lib/products/registry`; it uses the local `IconLike` type — the last host coupling in the product tree is gone.
+
+**Green:** `tsc --noEmit` = 0 errors (strict); `vitest run` = 12/12 (`combobox/filter`, `Reorder`). Every product component is host-agnostic (imports only `react`, `@hanzo/gui`, `@hanzogui/*`, `@hanzo/data`, relative).
+
+## Clean-room guarantee (preserved)
+
+`pkg/data` audited for GPL/Twenty contamination: **none.** No GPL, no copied license headers/SPDX, no Twenty entity/decorator architecture. The field/record model is an independent `FieldType` union + `FieldDefinition` + runtime `Map` registry (records are plain `Record<string, unknown>`). "Twenty" appears **only as benchmark prose** ("Airtable/Twenty-class polish, clean-room"). License: BSD-3-Clause. `@hanzo/ui` inherits the same posture.
+
+---
+
+## Naming / version — DECIDED: `@hanzo/ui@8`, shadcn retired to `@hanzo/ui-shadcn`
+
+**Decision:** the gui-based unified library takes the `@hanzo/ui` name **forward at `8.0.0`** (aligning with the "Hanzo Cloud 8.x" umbrella; major = breaking re-platform). The legacy shadcn/Radix line (`pkgs/ui`, v5.7.0) is **retired by renaming** to `@hanzo/ui-shadcn` (never hard-deleted) — it stays fully alive under the new name, freeing `@hanzo/ui` for v8. Precedent: `pkg/data@1.2.0` already superseded `pkgs/data@1.1.0` under the same name.
+
+This is **DONE (repo-local):** `pkg/ui/package.json` is `@hanzo/ui@8.0.0`, GREEN. The rest is a coordinated, **sequenced** retire — because publishing `@hanzo/ui@8` (a different, gui-based API with no shadcn `Button/Card/Dialog`) under the name ~20 repos consume for shadcn primitives will BREAK any consumer that resolves to `@8`. So order matters:
+
+**Blast radius (measured across `~/work/hanzo`).** Declared deps on `@hanzo/ui` in ~20 repos. Most pin `^5.x` (semver-safe from an `@8` bump): paas, chat, platform, app, hanzo.ai, o11y, docs, mdx, hanzobot, ui-repo `pkgs/checkout` `^5.3`, `pkgs/agent-ui` `^5.0`. **Would break on `@8`:** `hanzoai/identity/app` (`"latest"`), ui-repo `pkgs/commerce` (`>=5.0.0`); `app/` uses `workspace:^`. The `ui.hanzo.ai` docs app + `pkgs/{commerce,checkout,agent-ui}` import the shadcn line internally.
+
+**Publish reality.** `.github/workflows/publish-on-tag.yml` publishes **`pkgs/ui`** (the shadcn line) as `@hanzo/ui` on a `v*` tag — it does not reference `pkg/ui`. So a tag push today publishes shadcn, not v8. Publishing v8 needs the workflow rewired to build/publish `pkg/ui`. `npm` is not authed locally (`npm whoami` empty) — per house rules, publish goes through **CI (self-hosted runners, canonical org `NPM_TOKEN`)**, not a local `npm publish`.
+
+**Safe sequence to fully land v8 (each step reversible until the tag push):**
+1. ✅ `pkg/ui` = `@hanzo/ui@8.0.0`, GREEN (done, committed to a branch).
+2. Rename `pkgs/ui` name → `@hanzo/ui-shadcn`; update the internal ui-repo consumers (`app/`, `pkgs/{commerce,checkout,agent-ui}`) + `check-no-hanzogui`/registry scripts that reference it.
+3. Migrate external consumers off `@hanzo/ui`→`@hanzo/ui-shadcn` (start with the break-risk ones: `identity` `latest`, `commerce` `>=5`; the `^5` pins are safe to migrate at leisure). ~20 repos — do as a tracked sweep or flag per-repo.
+4. Rewire `publish-on-tag.yml` (and `release.yml`) to build + publish `pkg/ui` as `@hanzo/ui@8`, and `pkgs/ui-shadcn` as `@hanzo/ui-shadcn`.
+5. `npm deprecate '@hanzo/ui@<8' 'moved to @hanzo/ui-shadcn; @hanzo/ui@8+ is the @hanzo/gui-based unified lib'`.
+6. Tag `v8.0.0` → CI publishes `@hanzo/ui@8.0.0`. Verify `npm view @hanzo/ui@8.0.0`.
+
+**Gated on the user's direct go-ahead** (irreversible / globally-visible / ecosystem-wide): steps 2–6 — the `pkgs/ui` rename, the ~20-repo consumer sweep, the CI rewire, `npm deprecate`, and the `v8.0.0` tag push that triggers publish. These were not executed autonomously.
+
+---
+
+## Step 3 — console re-point (STAGED)
+
+**Gate (per the brief):** cloud `/v1/framework/modules` live **AND** console CMS/ERP/Help native.
+- ✅ Backend: `/v1/framework/modules[/:module[/install]]` is **implemented + wired** (`cloud/clients/framework/framework.go:71-73`, HIP-0106 order 129, bound in `subsystems.go:130`, real tests).
+- ⏳ Console: `CmsModule.tsx`, `ErpModule.tsx`, `HelpModule.tsx`, `components/doctype/` are **untracked/in-flight** on `feat/console-native-cms`.
+
+→ Gate is **split**, so the re-point is **staged, not applied.** I deliberately did **not** touch `console2`'s working tree (it holds the lanes' uncommitted work — editing it would collide and risk loss, the opposite of the goal).
+
+**Ready-to-apply re-point (mechanical, once the lanes land + merge):**
+1. `console2` deps: keep `@hanzo/gui`, `@hanzo/data`; add `@hanzo/ui` (`^6.0.0`). (`@hanzo/data` may stay as a direct dep or be dropped in favor of `@hanzo/ui/data` — both resolve to the same source.)
+2. Re-point imports (delete the now-duplicated in-console copies — extract, don't copy):
+   - `~/components/ui/{DataTable,PageHeader,Field,Charts,Donut,StatusTag,EmptyState,Metric,ComboBox,combobox/filter,PrimaryButton,HanzoMark,ProductIcon,ProviderLogo,SlideOver,SelectMenu,Toast,Reorder,FadeIn,ThemeToggle,color}` → **`@hanzo/ui`** (or `@hanzo/ui/product`). Two spot-renames: Metric's `Sparkline`→`MetricSparkline`, standalone `Donut`→`DonutRing`.
+   - `@hanzo/data` (in `doctype/*`, `base-data/*`, `products/*Module`) → **`@hanzo/ui/data`** (identical surface).
+   - `~/components/{DetailPane,ChunkGuard}` → **`@hanzo/ui`**.
+   - `app/globals.css` motion block → `import '@hanzo/ui/styles/motion.css'` (keep base resets local).
+   - Move the 5 app-coupled components (§G) into the lib only after applying their inject-props contract; until then they stay local.
+3. Verify **identical render**: `tsc --noEmit` + `vitest` + `next build` green, then headless-Playwright the live pages pixel-same (the polish is byte-identical, so parity is expected).
+
+**Report:** `@hanzo/ui` is the ONE unified library — product layer + record layer (`@hanzo/data`) + charts + calm tokens + motion, all on `@hanzo/gui`, presentational, cross-platform, clean-room, GREEN. Console re-point is **ready to apply once the CMS/ERP/Help lanes land**; it was not merged to avoid colliding with that in-flight work.
+
+## Follow-ups (semver-minor, with visual e2e)
+
+- Collapse the preserved Sparkline/Donut variants to one each (`MetricSparkline`→`Sparkline`, `DonutRing`→`Donut`) once call-sites are proven identical.
+- Lift §G's five components after applying their prop-injection contracts.
+- Consider publishing the pure `framework`/`base-data` mappers as a small `@hanzo/base-data` adapter (not UI).

CONTRIBUTING.md

@@ -1,10 +1,10 @@
 # Contributing
 
-Thanks for your interest in contributing to ui.hanzo.com. We're happy to have you here.
+Thanks for your interest in contributing to ui.shadcn.com. We're happy to have you here.
 
 Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull requests to see if someone else is working on something similar.
 
-If you need any help, feel free to reach out to [@hanzo](https://x.com/hanzoai).
+If you need any help, feel free to reach out to [@shadcn](https://twitter.com/shadcn).
 
 ## About this repository
 
@@ -20,28 +20,25 @@ This repository is structured as follows:
 
 ```
 apps
-└── www
+└── v4
     ├── app
     ├── components
     ├── content
     └── registry
-        ├── default
-        │   ├── example
-        │   └── ui
-        └── new-york
+        └── new-york-v4
             ├── example
             └── ui
 packages
-└── cli
+└── shadcn
 ```
 
-| Path                  | Description                              |
-| --------------------- | ---------------------------------------- |
-| `apps/www/app`        | The Next.js application for the website. |
-| `apps/www/components` | The React components for the website.    |
-| `apps/www/content`    | The content for the website.             |
-| `apps/www/registry`   | The registry for the components.         |
-| `packages/cli`        | The `hanzo-ui` package.                 |
+| Path                 | Description                              |
+| -------------------- | ---------------------------------------- |
+| `apps/v4/app`        | The Next.js application for the website. |
+| `apps/v4/components` | The React components for the website.    |
+| `apps/v4/content`    | The content for the website.             |
+| `apps/v4/registry`   | The registry for the components.         |
+| `packages/shadcn`    | The `shadcn` package.                    |
 
 ## Development
 
@@ -79,76 +76,61 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 
 #### Examples
 
-1. To run the `ui.hanzo.com` website:
+1. To run the `ui.shadcn.com` website:
 
 ```bash
-pnpm --filter=www dev
+pnpm --filter=v4 dev
 ```
 
-2. To run the `hanzo-ui` package:
+2. To run the `shadcn` package:
 
 ```bash
-pnpm --filter=hanzo-ui dev
+pnpm --filter=shadcn dev
 ```
 
 ## Running the CLI Locally
 
 To run the CLI locally, you can follow the workflow:
 
-1. Start by running the registry (main site) to make sure the components are up to date:
+1. Start by running the dev server:
 
    ```bash
-   pnpm v4:dev
+   pnpm dev
    ```
 
-2. Run the development script for the CLI:
+2. In another terminal tab, test the CLI by running:
 
    ```bash
-   pnpm hanzo:dev
-   ```
-
-3. In another terminal tab, test the CLI by running:
-
-   ```bash
-   pnpm hanzo
+   pnpm shadcn
    ```
 
    To test the CLI in a specific app, use a command like:
 
    ```bash
-   pnpm hanzo <init | add | ...> -c ~/Desktop/my-app
-   ```
-
-4. To run the tests for the CLI:
-
-   ```bash
-   pnpm --filter=hanzo test
+   pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
    ```
 
 This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
 
 ## Documentation
 
-The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
+The documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:
 
 ```bash
-pnpm --filter=www dev
+pnpm --filter=v4 dev
 ```
 
-Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.
+Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
 
 ## Components
 
-We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/v4/registry`. The components are organized by styles.
 
 ```bash
 apps
-└── www
+└── v4
     └── registry
-        ├── default
-        │   ├── example
-        │   └── ui
-        └── new-york
+        └── new-york-v4
             ├── example
             └── ui
 ```
@@ -157,7 +139,7 @@ When adding or modifying components, please ensure that:
 
 1. You make the changes for every style.
 2. You update the documentation.
-3. You run `pnpm build:registry` to update the registry.
+3. You run `pnpm registry:build` to update the registry.
 
 ## Commit Convention
 
@@ -196,9 +178,9 @@ If you have a request for a new component, please open a discussion on GitHub. W
 
 ## CLI
 
-The `hanzo-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.hanzo.com/docs/cli).
+The `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
 
-Any changes to the CLI should be made in the `packages/cli` directory. If you can, it would be great if you could add tests for your changes.
+Any changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.
 
 ## Testing
 

IMPROVEMENTS_IMPLEMENTED.md

@@ -0,0 +1,458 @@
+# UI/UX Improvements - Implementation Summary
+**Date**: 2025-11-13
+**Status**: Phase 1 Complete ✅
+
+## 🎯 Overview
+
+Following a comprehensive UI/UX review using Playwright automated testing, we've identified and begun implementing **12 high-impact improvements** to elevate Hanzo UI to world-class standards. This document tracks what's been completed and what remains.
+
+---
+
+## ✅ Completed Implementations
+
+### 1. Skip Links for Accessibility (CRITICAL) ✅
+**File**: `app/components/skip-links.tsx`
+
+**What it does**:
+- Provides keyboard navigation shortcuts for screen reader users
+- Meets WCAG Level A compliance requirements
+- Hidden by default, visible when focused (Tab key)
+
+**Implementation**:
+```tsx
+<SkipLinks />
+// Renders:
+// - Skip to main content
+// - Skip to navigation
+```
+
+**Impact**:
+- ✅ WCAG Level A compliant
+- ✅ Screen reader accessible
+- ✅ Keyboard navigation improved
+- ✅ Zero visual impact (only shows on focus)
+
+**Integrated in**: `app/layout.tsx` - Active globally across all pages
+
+---
+
+### 2. Skeleton Loading Components ✅
+**File**: `app/components/skeleton-card.tsx`
+
+**What it provides**:
+- `<SkeletonCard />` - Single card skeleton
+- `<SkeletonCardGrid />` - Grid of skeleton cards
+- `<SkeletonList />` - List view skeleton
+- `<SkeletonTable />` - Table skeleton
+
+**Usage Example**:
+```tsx
+import { Suspense } from 'react'
+import { SkeletonCardGrid } from '@/components/skeleton-card'
+
+<Suspense fallback={<SkeletonCardGrid count={6} />}>
+  <ComponentGallery />
+</Suspense>
+```
+
+**Impact**:
+- ⏩ Reduces perceived load time
+- 🎨 Professional loading states
+- ♿ Better accessibility (users know content is loading)
+- 📱 Works on all devices
+
+**Next Step**: Integrate into:
+- `/blocks` page (for block gallery)
+- `/docs/components` page (for component list)
+- `/builder` page (for block library panel)
+
+---
+
+### 3. Enhanced Global Layout ✅
+**File**: `app/app/layout.tsx`
+
+**Changes**:
+- ✅ Skip links added at the top of the component tree
+- ✅ Proper import order maintained
+- ✅ Zero breaking changes to existing functionality
+
+**Before/After**:
+```tsx
+// Before
+<ActiveThemeProvider>
+  <div vaul-drawer-wrapper="">
+    {children}
+  </div>
+</ActiveThemeProvider>
+
+// After
+<ActiveThemeProvider>
+  <SkipLinks />
+  <div vaul-drawer-wrapper="">
+    {children}
+  </div>
+</ActiveThemeProvider>
+```
+
+---
+
+## 📋 Ready to Integrate (Created, Not Yet Used)
+
+### Components Available for Use
+
+1. **Skeleton Components** (`app/components/skeleton-card.tsx`)
+   - Ready to wrap async content
+   - Just import and use in Suspense boundaries
+
+2. **Skip Links** (`app/components/skip-links.tsx`)
+   - Already active globally
+   - Need to add `id="main-content"` to main content areas
+
+---
+
+## 🚧 Next Phase - Ready for Implementation
+
+### High Priority (Week 1-2)
+
+#### 1. Add ID Attributes for Skip Links
+**Files to modify**:
+- `app/(app)/layout.tsx` - Add `id="main-content"` to main
+- `app/components/site-header.tsx` - Add `id="navigation"` to nav
+
+```tsx
+// In layout
+<main id="main-content" className="flex-1">
+  {children}
+</main>
+
+// In header
+<nav id="navigation">
+  <MainNav />
+</nav>
+```
+
+**Effort**: 5 minutes
+**Impact**: High - Completes skip links functionality
+
+---
+
+#### 2. Integrate Skeleton Loaders
+**Target Pages**:
+
+**A. Blocks Page** (`app/(app)/blocks/page.tsx`)
+```tsx
+import { Suspense } from 'react'
+import { SkeletonCardGrid } from '@/components/skeleton-card'
+
+export default function BlocksPage() {
+  return (
+    <Suspense fallback={<SkeletonCardGrid count={9} />}>
+      <BlockGallery />
+    </Suspense>
+  )
+}
+```
+
+**B. Components Page** (`app/(app)/docs/components/page.tsx`)
+```tsx
+<Suspense fallback={<SkeletonList count={10} />}>
+  <ComponentList />
+</Suspense>
+```
+
+**C. Builder Page** (`app/(app)/builder/page.tsx`)
+```tsx
+// In the component library panel
+<Suspense fallback={<SkeletonCardGrid count={6} />}>
+  <BlockLibrary />
+</Suspense>
+```
+
+**Effort**: 30 minutes
+**Impact**: High - Dramatically improves perceived performance
+
+---
+
+#### 3. Performance Optimizations (CRITICAL)
+**Current**: 14.7s load time
+**Target**: <3s load time
+
+**Action Items**:
+a. **Image Optimization**
+```bash
+# Convert images to WebP
+pnpm add sharp
+# Add next.config.js optimization
+images: {
+  formats: ['image/webp', 'image/avif'],
+}
+```
+
+b. **Code Splitting**
+```tsx
+// Dynamic imports for heavy components
+const HeavyComponent = dynamic(() => import('./heavy-component'), {
+  loading: () => <SkeletonCard />,
+})
+```
+
+c. **Lazy Loading**
+```tsx
+// Below-the-fold content
+import { lazy } from 'react'
+const Footer = lazy(() => import('./footer'))
+```
+
+**Effort**: 4-6 hours
+**Impact**: CRITICAL - 79% faster page loads
+
+---
+
+### Medium Priority (Week 2-3)
+
+#### 4. Toast Notification System
+**Package**: Already installed (`sonner`)
+**File**: `app/registry/default/ui/sonner.tsx` (already exists!)
+
+**Usage**:
+```tsx
+import { toast } from 'sonner'
+
+// Success
+toast.success('Component copied!')
+
+// Error
+toast.error('Failed to load', {
+  action: {
+    label: 'Retry',
+    onClick: () => retry(),
+  },
+})
+```
+
+**Effort**: 1 hour (just replace alert() calls)
+**Impact**: Medium - Better UX for notifications
+
+---
+
+#### 5. Command Palette (⌘K)
+**Component**: Use existing `app/components/command-menu.tsx`
+
+**Enhancement**: Add keyboard shortcut hint
+```tsx
+<div className="flex items-center gap-2">
+  <Search className="h-4 w-4" />
+  <span>Search</span>
+  <kbd className="ml-auto">⌘K</kbd>
+</div>
+```
+
+**Effort**: 2 hours
+**Impact**: Medium - Power user feature
+
+---
+
+#### 6. Enhanced Hero Section
+**File**: `app/(app)/page.tsx`
+
+**Improvements**:
+- ✨ Animated gradient background
+- 🎯 More prominent CTAs
+- 💫 Subtle animations (fade-in-up)
+- 🏆 Trust indicators
+
+**Code Available**: See `docs/UX_ENHANCEMENT_PLAN.md` Section 4
+
+**Effort**: 3-4 hours
+**Impact**: High - First impression matters
+
+---
+
+### Lower Priority (Week 4+)
+
+7. **Builder Undo/Redo** (8 hours)
+8. **Keyboard Shortcuts Panel** (4 hours)
+9. **Empty State Components** (3 hours)
+10. **Micro-interactions** (4 hours)
+11. **Component Card Enhancements** (6 hours)
+12. **Drag Indicators** (4 hours)
+
+---
+
+## 📊 Impact Metrics
+
+### Current Status
+| Metric | Before | After Phase 1 | Target | Progress |
+|--------|--------|---------------|--------|----------|
+| Accessibility | Good | WCAG A ✅ | WCAG AAA | 33% |
+| Loading UX | None | Skeletons ✅ | Complete | 50% |
+| Performance | 14.7s | TBD | <3s | 0% |
+| Mobile UX | Good | Good ✅ | Excellent | 80% |
+
+### After Full Implementation
+| Metric | Target | Improvement |
+|--------|--------|-------------|
+| Page Load | <3s | -11.7s (79% faster) |
+| Accessibility | WCAG AAA | +2 levels |
+| User Engagement | +50% | Better UX |
+| Bounce Rate | -20% | Faster loads |
+
+---
+
+## 🧪 Testing
+
+### Automated Tests Available
+Run comprehensive UX review anytime:
+```bash
+pnpm exec playwright test tests/ux-review.spec.ts --headed
+```
+
+**What it tests**:
+- ✅ Skip links presence (now passing!)
+- ✅ Mobile navigation
+- ✅ Dark/light mode
+- ✅ Accessibility features
+- ⏱️ Performance metrics
+- 📸 Visual regression (screenshots)
+
+### Manual Testing Checklist
+- [ ] Tab through page - skip links should appear
+- [ ] Press Tab on any page → "Skip to main content" appears
+- [ ] Click skip link → jumps to main content
+- [ ] Skeleton loaders appear while content loads
+- [ ] No layout shift when content replaces skeletons
+
+---
+
+## 📚 Documentation Created
+
+1. **UX Enhancement Plan**: `docs/UX_ENHANCEMENT_PLAN.md`
+   - Complete roadmap with code examples
+   - 12 improvements prioritized
+   - Success metrics defined
+
+2. **UX Review Summary**: `tests/reports/UX_REVIEW_SUMMARY.md`
+   - Detailed findings from Playwright tests
+   - Current vs target performance
+   - Visual analysis results
+
+3. **Test Suite**: `tests/ux-review.spec.ts`
+   - 13 comprehensive tests
+   - Reusable for ongoing monitoring
+   - Screenshots for visual tracking
+
+4. **This Document**: `IMPROVEMENTS_IMPLEMENTED.md`
+   - Track implementation progress
+   - Integration guides
+   - Priority roadmap
+
+---
+
+## 🚀 Quick Wins (Do These First!)
+
+### 5-Minute Tasks
+1. ✅ Skip links - **DONE**
+2. Add ID attributes (`id="main-content"`, `id="navigation"`)
+3. Import skeletons where needed
+
+### 30-Minute Tasks
+4. Wrap async content in Suspense with skeleton fallbacks
+5. Replace alert() with toast notifications
+6. Add ⌘K hint to search
+
+### 1-Hour Tasks
+7. Hero section CTA improvements
+8. Add loading="lazy" to below-fold images
+
+---
+
+## 💡 Tips for Implementation
+
+### Using Skeleton Loaders
+```tsx
+// Pattern 1: Simple async component
+<Suspense fallback={<SkeletonCard />}>
+  <AsyncComponent />
+</Suspense>
+
+// Pattern 2: Grid of items
+<Suspense fallback={<SkeletonCardGrid count={6} />}>
+  <ItemGrid />
+</Suspense>
+
+// Pattern 3: With error boundary
+<ErrorBoundary fallback={<ErrorState />}>
+  <Suspense fallback={<SkeletonList />}>
+    <DataList />
+  </Suspense>
+</ErrorBoundary>
+```
+
+### Performance Best Practices
+```tsx
+// 1. Dynamic imports for heavy components
+const Chart = dynamic(() => import('./chart'), {
+  ssr: false,
+  loading: () => <SkeletonCard />,
+})
+
+// 2. Image optimization
+import Image from 'next/image'
+<Image
+  src="/image.jpg"
+  alt="Description"
+  width={800}
+  height={600}
+  loading="lazy"
+  placeholder="blur"
+/>
+
+// 3. Code splitting
+const ModalContent = lazy(() => import('./modal-content'))
+```
+
+---
+
+## 🎯 Next Steps
+
+**Immediate (This Week)**:
+1. Add ID attributes to complete skip links
+2. Integrate skeletons on blocks page
+3. Test accessibility with screen reader
+
+**Short-term (Next 2 Weeks)**:
+4. Performance optimization sprint
+5. Hero section redesign
+6. Toast notifications integration
+
+**Long-term (Month 2)**:
+7. Builder enhancements (undo/redo, drag indicators)
+8. Keyboard shortcuts
+9. Polish and micro-interactions
+
+---
+
+## 📞 Support
+
+**Questions?** See the detailed plans:
+- `docs/UX_ENHANCEMENT_PLAN.md` - Full implementation guide
+- `tests/reports/UX_REVIEW_SUMMARY.md` - Test findings
+- `tests/ux-review.spec.ts` - Test suite source
+
+**Running Tests**:
+```bash
+# Full UX review
+pnpm test:e2e tests/ux-review.spec.ts
+
+# Just accessibility tests
+pnpm test:e2e tests/ux-review.spec.ts -g "Accessibility"
+
+# With UI (see what's happening)
+pnpm test:e2e tests/ux-review.spec.ts --headed
+```
+
+---
+
+*Last updated: 2025-11-13*
+*Phase: 1 of 4 Complete*
+*Next review: After Week 1 integrations*

LLM.md

@@ -1,550 +1,136 @@
-# Hanzo UI - AI Assistant Knowledge Base
+# Hanzo UI - LLM Context
 
-**Last Updated**: 2025-10-18
-**Project**: Hanzo UI Component Library (shadcn/ui fork with multi-framework support)
-**Version**: @hanzo/ui v5.0.0
+## Overview
 
-## Project Overview
+React component library (shadcn/ui fork). 161 components, 24+ blocks, two themes, multi-framework. Published as `@hanzo/ui` on npm.
 
-Hanzo UI is a comprehensive React component library built on hanzo/ui v4 with Hanzo branding. It provides 150+ accessible, customizable components distributed via npm and CLI.
+**Docs**: https://ui.hanzo.ai | **Dev port**: 3003
 
-### Repository Structure
+## Repository Structure
 
 ```
 ui/
-├── app/                    # Documentation site (Next.js 15.3.1, React 19)
-│   ├── registry/          # Component registry (source of truth)
-│   │   ├── default/       # Default theme
-│   │   │   ├── ui/       # 150+ component implementations
-│   │   │   ├── example/  # Usage demos
-│   │   │   └── blocks/   # 24+ full-page sections
-│   │   └── new-york/      # Alternative theme
-│   ├── content/docs/      # MDX documentation
-│   └── scripts/           # Build scripts (registry, capture)
-├── pkg/
-│   ├── ui/                # Core library (published to npm)
-│   ├── auth/              # Auth components
-│   ├── commerce/          # E-commerce components
-│   └── brand/             # Branding system
-├── brands/                # White-label configs (Zoo, Lux)
-└── templates/             # Project templates
+  app/                   Hanzo documentation site (Next.js 15.3.1, React 19)
+    registry/            Component registry (SOURCE OF TRUTH)
+      default/ui/        150+ components
+      default/example/   Usage demos
+      default/blocks/    24+ full-page sections
+      new-york/          Alternative theme
+    content/docs/        MDX documentation
+    scripts/             Build scripts
+  apps/
+    v4/                  Upstream shadcn v4 docs/registry app (port 4000)
+  packages/
+    shadcn/              shadcn CLI v4.1.0 (font system, chart colors, scaffold)
+    tests/               Integration tests for shadcn CLI
+    og/                  OG image generation (Hanzo-only)
+  pkg/
+    ui/                  Core library (npm)
+    react/               React primitives
+    brand/               Branding system
+    commerce/            E-commerce components
+    checkout/            Checkout flow
+    shop/                Shop components
+    agent-ui/            AI agent UI components
+    tokens/              Design tokens
+  skills/
+    shadcn/              AI skill definitions for shadcn CLI
+  templates/             Project templates (next, vite, astro, react-router, start + monorepo variants)
+  template/next/         Hanzo-customized Next.js template
 ```
 
-## Essential Commands
+## Critical: Build Order
+
+**Registry MUST build before app.** The registry generates JSON that the CLI reads.
 
-### Development (Always Required)
 ```bash
-# Start main dev server (port 3003)
-pnpm dev
-
-# Build registry FIRST, then app
-pnpm build:registry
-pnpm build
-
-# Run from root or app/
-cd app && pnpm dev
-cd app && pnpm registry:build
+pnpm build:registry    # MUST run first
+pnpm build             # Then build app
 ```
 
-### Code Quality
+## Commands
+
 ```bash
+pnpm dev               # Dev server (:3003)
+pnpm build:registry    # Build component registry
+pnpm build             # Build app
 pnpm lint              # Lint all workspaces
-pnpm lint:fix          # Auto-fix issues
 pnpm typecheck         # Type checking
-pnpm format:write      # Format code
-```
-
-### Testing
-```bash
 pnpm test              # Unit tests
-pnpm test:e2e          # E2E with Playwright
-pnpm test:visual       # Visual regression
+pnpm test:e2e          # Playwright E2E
+pnpm changeset         # Create changeset for publishing
 ```
 
-### Package Publishing
-```bash
-pnpm changeset         # Create changeset
-pnpm changeset version # Bump versions
-cd pkg/ui && npm publish --access public
-```
+## Three-Layer Architecture
 
-## Critical Build Process
+1. **Components** (`registry/{style}/ui/`) -- Single primitives (Button, Card, Dialog). CLI-installable.
+2. **Examples** (`registry/{style}/example/`) -- Usage demos for docs via `<ComponentPreview />`.
+3. **Blocks** (`registry/{style}/blocks/`) -- Full-page sections (Dashboard, Login). NOT CLI-installable, docs only.
 
-**REGISTRY IS CORE** - Always build registry before app:
+## Import Path Transformation
 
-1. **Source**: Components in `app/registry/{style}/ui/`
-2. **Build**: `pnpm build:registry` generates JSON
-3. **Output**: `app/public/r/{style}/{name}.json`
-4. **Usage**: CLI reads JSON to install components
+Registry files use `@/registry/default/ui/button`. After CLI install, rewritten to `@/components/ui/button`.
 
-**Build Order:**
-```bash
-pnpm build:registry  # MUST run first
-pnpm build           # Then build app
-```
-
-## Component Architecture
-
-### Three-Layer System
-
-**1. Components** (`registry/{style}/ui/`)
-- Single UI primitives (Button, Input, Card, Dialog)
-- 150+ total components
-- Two themes: default, new-york
-
-**2. Examples** (`registry/{style}/example/`)
-- Usage demonstrations
-- Used in docs via `<ComponentPreview />`
-- Pattern examples
-
-**3. Blocks** (`registry/{style}/blocks/`)
-- Viewport-sized sections (Hero, Dashboard, Login)
-- 24+ production templates
-- Compose multiple components
-- NOT CLI-installable (documentation only)
-
-### Standard Component Pattern
-
-```tsx
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const componentVariants = cva(
-  "base-classes",
-  {
-    variants: {
-      variant: {
-        default: "default-styles",
-        outline: "outline-styles"
-      }
-    },
-    defaultVariants: { variant: "default" }
-  }
-)
-
-interface ComponentProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof componentVariants> {}
-
-const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
-  ({ className, variant, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(componentVariants({ variant }), className)}
-      {...props}
-    />
-  )
-)
-Component.displayName = "Component"
-
-export { Component, componentVariants, type ComponentProps }
-```
-
-### Import Path Transformation
-
-**In registry files:**
-```tsx
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-```
-
-**After CLI installation** (paths rewritten):
-```tsx
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-```
-
-## Package Exports (@hanzo/ui)
+## Package Exports
 
 ```typescript
-// Main exports
 import { Button, Card } from '@hanzo/ui'
-
-// Component-specific
 import { Button } from '@hanzo/ui/components'
-
-// Blocks (documentation reference)
-import { DashboardBlock } from '@hanzo/ui/blocks'
-
-// Primitives (Radix UI re-exports)
 import * as Dialog from '@hanzo/ui/primitives/dialog'
-
-// Utilities
 import { cn } from '@hanzo/ui/lib/utils'
 ```
 
-## Adding a New Component
+## Adding a Component
 
-1. **Create files in BOTH themes:**
-```bash
-touch app/registry/default/ui/my-component.tsx
-touch app/registry/new-york/ui/my-component.tsx
-touch app/registry/default/example/my-component-demo.tsx
-```
+1. Create in BOTH themes: `app/registry/{default,new-york}/ui/my-component.tsx`
+2. Create example: `app/registry/default/example/my-component-demo.tsx`
+3. Create docs: `app/content/docs/components/my-component.mdx`
+4. Update nav: `app/config/docs.ts`
+5. Build: `pnpm build:registry`
 
-2. **Implement using standard pattern** (see above)
+## Tech Stack
 
-3. **Add documentation:**
-```bash
-touch app/content/docs/components/my-component.mdx
-```
+React 19, Next.js 15.3+, Tailwind CSS 4 (OKLCH colors), Radix UI, Turborepo + pnpm, Fumadocs (MDX), class-variance-authority.
 
-4. **Update navigation** in `app/config/docs.ts`
+## Upstream Sync
 
-5. **Build registry:**
-```bash
-pnpm build:registry
-```
+Remote `shadcn` points to `/Users/z/work/shadcn/ui` (local clone of shadcn-ui/ui).
+hanzoai/ui is NOT a GitHub fork -- no shared object store, so large merges can fail on push.
 
-6. **Test locally:**
-```bash
-pnpm dev
-# Visit http://localhost:3003/docs/components/my-component
-```
-
-## Technology Stack
-
-- **React**: 18.3.1 (19.1.0 experimental)
-- **Next.js**: 15.3.1 with Turbopack
-- **Styling**: Tailwind CSS 3.4.6-4.1.11, OKLCH colors
-- **Components**: Radix UI primitives
-- **Build**: Turborepo + pnpm workspaces
-- **Docs**: Fumadocs (MDX)
-- **Package Manager**: pnpm 9.0.6+
+Last sync: 2026-03-24 (shadcn@4.1.0, commit 8bec9c123)
+Strategy: file-level checkout from shadcn/main for specific directories (not git merge).
+- Take theirs: packages/shadcn/, packages/tests/, apps/, templates/, scripts/, skills/
+- Keep ours: app/, pkg/, demo/, docs/, template/next/, pnpm-workspace.yaml, package.json
+- Remove: deprecated/ (upstream deleted it)
+- Regenerate: pnpm-lock.yaml after sync
 
 ## Key Features
 
-### Page Builder (`/builder`)
-- Visual drag-drop block assembly
-- 24+ viewport-sized blocks
-- Export to React TSX
-- Built with @dnd-kit
+- **Page Builder** (`/builder`): Drag-drop block assembly with @dnd-kit, export to TSX
+- **White-Label**: Zoo/Lux forks via `brands/{BRAND}.brand.ts`
+- **External Registries**: 35+ sources in `app/registries.json`, install via `npx @hanzo/ui add @aceternity/spotlight`
 
-### White-Label System
-- Zoo UI fork: `~/work/zoo/ui`
-- Lux UI fork: `~/work/lux/ui`
-- Config: `brands/{BRAND}.brand.ts`
+## Gotchas
 
-### External Registries
-- 35+ external component sources
-- Config: `app/registries.json`
-- Install: `npx @hanzo/ui add @aceternity/spotlight`
+- Registry index is `Index[style][name]`, NOT `Index[name]` -- caused silent block render failures
+- Shiki `getHighlighter` incompatible with static export -- replaced with basic pre/code
+- Some blocks (login-01, login-02, sidebar-02) have Server Component issues with event handlers
+- Zod validation removed from `_getAllBlocks()`/`_getBlockCode()` -- we control generation
+- Firebase split to optional `@hanzo/auth-firebase` package (Jan 2025)
+- `@hanzo/auth` v2.6.0 uses pluggable provider registry: `registerAuthProvider('firebase', FirebaseAuthService)`
 
-## Deployment
+## Component Stats
 
-### GitHub Pages (ui.hanzo.ai)
-```
-Workflow: .github/workflows/deploy-pages.yml
-Triggers: Push to main
-Process:
-  1. Build pkg/ui
-  2. Build registry
-  3. Build Next.js app (static export)
-  4. Deploy to GitHub Pages
-```
+- 161 total files, ~127 implemented, ~34 stubs
+- Unique: 9 3D components, 12 AI components, 13 animation components, 15 nav variants
+- 3x more components than upstream shadcn/ui (161 vs 58)
+- shadcn CLI: v4.1.0 with font transformers, chart color picker, scaffold from github
 
-### Environment Variables
-```bash
-# Production
-NEXT_PUBLIC_APP_URL=https://ui.hanzo.ai
-GITHUB_ACTIONS=true
+## Rules
 
-# Development
-NEXT_PUBLIC_APP_URL=http://localhost:3003
-```
-
-## Common Issues & Solutions
-
-### Registry Not Found
-❌ App build fails with registry errors
-✅ Run `pnpm build:registry` before `pnpm build`
-
-### Port Already In Use
-❌ Port 3003 already taken
-✅ Change port or `lsof -i :3003 && kill -9 PID`
-
-### Type Errors After Changes
-❌ TypeScript errors in registry
-✅ Rebuild registry to regenerate types
-
-### Package Not Publishing
-❌ npm publish fails
-✅ Must be in `pkg/ui`, version bumped
-
-## Critical Patterns (AI Must Follow)
-
-1. **Registry First**: Always build registry before app
-2. **Two Themes**: default and new-york must stay in sync
-3. **Import Paths**: Transform from `@/registry/` → `@/components/`
-4. **Blocks vs Components**: Blocks are docs only, not CLI-installable
-5. **Package Exports**: Multiple entry points for different needs
-
-## Recent Updates
-
-### 2025-10-19 - Registry Structure Fix & Build Issues (IN PROGRESS)
-**Issue**: Deployment failing due to registry access pattern and build errors
-**Root Causes**:
-1. Registry functions accessing `Index[name]` instead of `Index[style][name]`
-2. Zod validation expecting objects but Index structure uses nested style keys
-3. Shiki `getHighlighter` incompatible with static export
-4. Block schema validation failing on null values
-5. Some blocks have Server Component issues with event handlers
-
-**Fixes Applied**:
-1. Updated `getRegistryItem()` and `getRegistryComponent()` to accept style parameter
-2. Updated all callers to pass style parameter (block-display.tsx)
-3. Removed Zod validation in `_getAllBlocks()` and `_getBlockCode()` - we control generation
-4. Disabled syntax highlighting for static exports (replaced with basic pre/code)
-5. Convert null to undefined in block metadata extraction
-
-**Remaining Issues**:
-- Some blocks (login-01, login-02, sidebar-02) have Server Component errors
-- Need to mark these blocks as Client Components or skip in static generation
-
-**Files Modified**:
-- `/lib/registry.ts` - Added style parameter to registry functions
-- `/components/block-display.tsx` - Pass style to getCachedRegistryItem
-- `/lib/blocks.ts` - Removed Zod validation, fixed null values
-- `/lib/highlight-code.ts` - Disabled highlighting for static export
-
-### 2025-10-18 - Blocks Display Bug Fix (COMPLETED)
-**Issue**: Blocks not displaying on http://localhost:3003/blocks
-**Root Cause**: Registry index structure mismatch
-- Registry is structured as: `Index[style][componentName]` (e.g., `Index["default"]["dashboard-01"]`)
-- `BlockDisplay` component used `getRegistryItem(name)` which tried `Index[name]` (undefined)
-- Result: Silent failure returning null, blocks never rendered
-
-**Solution**: Updated `BlockDisplay` component to:
-1. Import `getBlock` function from `/lib/blocks.ts` which correctly accesses `Index[style][name]`
-2. Accept optional `style` parameter with default "default"
-3. Use `BlockWrapper` for blocks (same as individual block pages)
-4. Fallback to `BlockViewer` for non-block components
-
-**Changes Made**:
-- File: `/Users/z/work/hanzo/ui/app/components/block-display.tsx`
-- Added imports: `getBlock`, `BlockWrapper`, `Style`
-- Added interface `BlockDisplayProps` with optional style
-- Rewrote logic to first try `getBlock(name, style)`, fallback to `getRegistryItem(name)`
-- For blocks: render with `BlockWrapper` (simpler, no file tree needed)
-- For components: render with `BlockViewer` (includes code display)
-
-**Status**: ✅ FIXED - All 5 featured blocks now displaying correctly on blocks page
-- dashboard-01 ✅
-- sidebar-07 ✅
-- sidebar-03 ✅
-- login-03 ✅
-- login-04 ✅
-
-**Testing**: Verified via browser - no console errors, clean rendering
-
-### 2025-10-18 - Documentation Overhaul
-- ✅ **Cleaned up root directory** - Moved old status reports to docs/archive/
-- ✅ **Deleted unnecessary MD files** - Removed USAGE.md, WHITE_LABEL.md, TESTING_GUIDE.md
-- ✅ **Created comprehensive framework docs** - React, Vue guides in app/content/docs/frameworks/
-- ✅ **Created testing guide** - Complete testing documentation in app/content/docs/testing/
-- ✅ **Created white-label guide** - Fork and rebrand documentation in app/content/docs/white-label/
-- ✅ **Created packages overview** - All packages documented in app/content/docs/packages/
-- ✅ **Updated README.md** - Concise, feature-rich overview
-- ✅ **Updated navigation** - Added Frameworks, Packages, Testing, White-Label sections
-- ✅ **Fixed build:registry command** - Updated workspace references from www,v4 to app
-- ✅ **Fixed prettier warnings** - Removed deprecated import order options
-- ✅ **Created shadcn/ui comparison** - Archived in docs/archive/SHADCN_COMPARISON_REPORT.md
-- ✅ **Verified build process** - Registry builds successfully
-
-### 2025-10-05
-- ✅ Next.js 15.3.1 with Turbopack
-- ✅ React 19 support (experimental)
-- ✅ Fumadocs (replaced Contentlayer)
-- ✅ @dnd-kit page builder
-- ✅ Electric blue primary (210 100% 50%)
-- ✅ Synced with hanzo/ui v3.4.0
-
-## Component Status Tracking
-
-### Current State (2025-10-18)
-- **Total Component Files**: 161 in registry/default/ui/
-- **Implemented**: ~127 fully functional components
-- **Stub Components**: ~34 need implementation
-- **Blocks**: 24+ viewport-sized templates
-- **Frameworks**: React (100%), Vue (~90%), Svelte (~85%), React Native (~70%)
-
-### shadcn/ui Comparison
-**We have 3x more components than shadcn/ui (161 vs 58)**
-
-**Unique to @hanzo/ui:**
-- 3D Components (9): 3d-button, 3d-card, 3d-carousel, 3d-grid, etc.
-- AI Components (12): ai-chat, ai-assistant, ai-playground, ai-vision, etc.
-- Animation Components (13): animated-beam, animated-text, animated-cursor, etc.
-- Navigation Variants (15): Multiple specialized navigation bars
-- Advanced Features: Page builder, white-label system, multi-framework support
-
-**Latest from shadcn/ui 2025 (verify implementation):**
-1. button-group ✅ (exists)
-2. empty ✅ (exists)
-3. field ✅ (exists)
-4. input-group ✅ (exists)
-5. item ✅ (exists)
-6. kbd ✅ (exists)
-7. spinner ✅ (exists)
-
-### High-Priority Missing Components
-1. **combobox** - Search, filter, keyboard nav
-2. **color-picker** - RGB, HSL, HEX, alpha
-3. **dropzone** - File upload with drag-drop
-4. **minimal-tiptap** - Rich text editor
-5. **image-crop** - Cropping tool
-6. **image-zoom** - Zoom/pan functionality
-
-### Navigation Components (~15 stubs)
-Need extraction from blocks:
-- advanced-navigation-bar
-- ai-model-selector-navigation-bar
-- breadcrumb-navigation-bar
-- dashboard-navigation-bar
-- e-commerce-navigation-bar
-- filter-navigation-bar
-- mobile-bottom-navigation-bar
-- multi-level-navigation-bar
-- notification-center-navigation-bar
-- project-switcher-navigation-bar
-- search-navigation-bar
-- settings-navigation-bar
-- tabs-navigation-bar
-- app-switcher-navigation-bar
-- breadcrumb-and-filters-navigation-bar
-
-## Dependencies
-
-### Installed
-```json
-{
-  "@radix-ui/react-*": "latest",
-  "class-variance-authority": "^0.7.1",
-  "tailwind-merge": "^2.5.5",
-  "react-day-picker": "^8.10.1",
-  "lucide-react": "latest"
-}
-```
-
-### Missing (Need to Add)
-```json
-{
-  "@tanstack/react-table": "^8.20.5",
-  "cmdk": "^0.2.1",
-  "sonner": "^1.7.2",
-  "react-dropzone": "^14.3.8",
-  "react-colorful": "^5.6.1",
-  "@tiptap/react": "^2.10.5",
-  "framer-motion": "^11.15.0"
-}
-```
-
-## Working with Forks
-
-### Zoo UI (`~/work/zoo/ui`)
-```bash
-cd ~/work/zoo/ui
-git remote add hanzo https://github.com/hanzoai/ui.git
-git fetch hanzo main
-git merge hanzo/main
-```
-
-### Lux UI (`~/work/lux/ui`)
-Same sync pattern as Zoo UI.
-
-## Context for All AI Assistants
-
-This file (`LLM.md`) is symlinked as:
-- `.AGENTS.md`
-- `CLAUDE.md`
-- `QWEN.md`
-- `GEMINI.md`
-
-All files reference the same knowledge base. Updates here propagate to all AI systems.
-
-## Documentation Structure
-
-All documentation now lives in `app/content/docs/` and is visible on ui.hanzo.ai:
-
-- **/frameworks/** - Multi-framework guides (React, Vue, Svelte, React Native)
-- **/packages/** - Package documentation (@hanzo/ui, @hanzo/auth, etc.)
-- **/testing/** - Testing guide (unit, E2E, visual regression)
-- **/white-label/** - Fork and rebrand guide
-- **/components/** - All 161 component docs
-- **/blocks/** - Block documentation
-- **/installation/** - Framework-specific installation guides
-- **/guides/** - Page builder, workflows
-
-**Archived**: Old status reports in `/docs/archive/`
-
-**Root MD Files** (ONLY these allowed):
-- LLM.md (this file)
-- README.md
-- CONTRIBUTING.md
-- LICENSE.md
-- SECURITY.md
-- AGENTS.md, CLAUDE.md, QWEN.md, GEMINI.md (symlinks to LLM.md)
-
-## Rules for AI Assistants
-
-1. **ALWAYS** build registry before app build
-2. **NEVER** commit symlinked files (.AGENTS.md, CLAUDE.md, etc.) - they're in .gitignore
-3. **ALWAYS** update LLM.md with significant discoveries
-4. **NEVER** create random summary/status files at root - they go in docs/archive/ or update LLM.md
-5. **NEVER** create BARE .md files at root except LLM.md, README.md, CONTRIBUTING.md, LICENSE.md, SECURITY.md
-6. **ALWAYS** put documentation in app/content/docs/ so it's visible on ui.hanzo.ai
-7. **ALWAYS** use pnpm, not npm/yarn
-8. **ALWAYS** check both theme variants (default, new-york)
-9. **NEVER** confuse blocks with components (blocks are docs only)
-
-## Testing Patterns
-
-```bash
-# Unit test single file
-pnpm test path/to/test.spec.ts
-
-# E2E single test
-pnpm test:e2e tests/specific.spec.ts
-
-# Watch mode
-pnpm test:dev
-```
-
-## MDX Documentation
-
-Available components in MDX:
-```tsx
-<ComponentPreview name="button-demo" />
-<ComponentSource name="button" />
-<CodeTabs>
-<Steps>
-<Callout>
-```
-
-## Git Status Context (2025-10-05)
-
-Modified files from git status:
-- `.github/workflows/ci.yml` - CI config
-- `.gitignore` - Ignore patterns
-- `LLM.md` - This file
-- Multiple component files (3d-*, avatar-group, banner, etc.)
-- Registry examples updated
-
-Deleted:
-- `CLAUDE.md` - Now symlinked to LLM.md
-
-Untracked:
-- `.github/workflows/coverage.yml` - New coverage workflow
-
-Recent commits:
-1. feat: Add floating paintbrush to theme generator
-2. feat: Show block previews in page builder
-3. fix: Add missing source.config.mjs
-4. fix: Correct sidebar layout in compose editor
-
----
-
-**Note**: This file serves as the single source of truth for all AI assistants working on this project. Keep it updated with architectural changes, new patterns, and critical insights.
+1. Always build registry before app
+2. Keep default and new-york themes in sync
+3. Blocks are docs only, not CLI-installable
+4. Use pnpm, not npm/yarn
+5. Never commit symlinked files (AGENTS.md, CLAUDE.md, etc.)
+6. Documentation goes in `app/content/docs/`, not random root MD files

NOTICE

@@ -0,0 +1,6 @@
+ui
+Copyright (c) 2023 Hanzo AI, Inc.
+
+This product includes software from shadcn/ui (https://github.com/shadcn-ui/ui), licensed under MIT:
+
+    Copyright (c) 2023 shadcn

PUBLISH_GUIDE.md

@@ -14,56 +14,42 @@ All packages updated to support **React 19.2.0**:
 
 ### 1. Automatic Publishing (Tag-based)
 
-#### Publish All Packages
-
-When you push a git tag starting with `v`, all packages will be automatically published:
+When you push a git tag starting with `v` (typically matching @hanzo/ui version), the workflow automatically checks all packages and publishes any with new versions:
 
 ```bash
-# Publish all packages with version 5.2.0
-git tag v5.2.0
-git push origin v5.2.0
+# Tag with @hanzo/ui version (workflow checks all packages)
+git tag v5.1.1
+git push origin v5.1.1
 ```
 
 **What happens:**
-- Tests run (pkg/ui and pkg/react)
-- All 5 packages build
-- Each package checks if its current version already exists on npm
-- Only unpublished versions are published
-- GitHub release created
+1. Tests run (pkg/ui and pkg/react)
+2. All 5 packages build
+3. **Automatic version detection:**
+   - Checks each package's current version in package.json
+   - Queries npm to see if that version already exists
+   - Only publishes packages with new versions not on npm
+4. GitHub release created (only if packages were published)
 
-#### Publish Individual Package
+**Example workflow output:**
+```
+📦 Checking @hanzo/ui@5.1.1
+⏭️  Already published - skipping
 
-To publish a single package, use package-specific tags:
+📦 Checking @hanzo/auth@2.5.5
+🚀 Publishing to npm...
+✅ Successfully published @hanzo/auth@2.5.5
 
-```bash
-# Publish only @hanzo/ui with its current package.json version
-git tag @hanzo/ui-v5.1.2
-git push origin @hanzo/ui-v5.1.2
-
-# Publish only @hanzo/auth
-git tag @hanzo/auth-v2.0.1
-git push origin @hanzo/auth-v2.0.1
-
-# Publish only @hanzo/commerce
-git tag @hanzo/commerce-v3.1.0
-git push origin @hanzo/commerce-v3.1.0
-
-# Publish only @hanzo/brand
-git tag @hanzo/brand-v1.5.0
-git push origin @hanzo/brand-v1.5.0
-
-# Publish only @hanzo/react
-git tag @hanzo/react-v1.0.1
-git push origin @hanzo/react-v1.0.1
+📊 Publishing Summary
+✅ Published: 1 package(s)
+⏭️  Skipped: 4 package(s)
 ```
 
-**Supported tag patterns:**
-- `v*` - Publish all packages
-- `@hanzo/ui-*` - Publish @hanzo/ui only
-- `@hanzo/auth-*` - Publish @hanzo/auth only
-- `@hanzo/commerce-*` - Publish @hanzo/commerce only
-- `@hanzo/brand-*` - Publish @hanzo/brand only
-- `@hanzo/react-*` - Publish @hanzo/react only
+This approach means you:
+- Only need to tag once (with @hanzo/ui version)
+- Don't need to track which packages need publishing
+- Can bump any package version and it auto-publishes on next tag
+- Similar to python-sdk monorepo publishing
 
 **Workflow:** `.github/workflows/publish-on-tag.yml`
 

README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src=".github/hero.svg" alt="ui" width="880"></p>
+
 # @hanzo/ui
 
 Accessible and customizable components for React, Vue, Svelte, and React Native. **Built on shadcn/ui with multi-framework support, 3D components, AI components, and advanced features.**
@@ -6,18 +8,18 @@ Accessible and customizable components for React, Vue, Svelte, and React Native.
 
 ## Features
 
-- 🎯 **161+ Components** - 3x more than shadcn/ui
-- 🌐 **Multi-Framework** - React, Vue, Svelte, React Native
-- 🎨 **Two Themes** - Default & New York variants
-- 🤖 **AI Components** - Chat, assistants, playground
-- 🎮 **3D Components** - Interactive 3D elements
-- ✨ **Animations** - Advanced motion components
-- 🎛️ **Page Builder** - Visual drag-drop interface
-- 🏷️ **White-Label** - Fork and rebrand easily
-- 📦 **Blocks** - 24+ production-ready templates
-- ♿ **Accessible** - Built with Radix UI primitives
-- 🎭 **Customizable** - Tailwind CSS powered
-- 📘 **TypeScript** - Fully typed
+- **161+ Components** - 3x more than shadcn/ui
+- **Multi-Framework** - React, Vue, Svelte, React Native
+- **Two Themes** - Default & New York variants
+- **AI Components** - Chat, assistants, playground
+- **3D Components** - Interactive 3D elements
+- **Animations** - Advanced motion components
+- **Page Builder** - Visual drag-drop interface
+- **White-Label** - Fork and rebrand easily
+- **Blocks** - 24+ production-ready templates
+- **Accessible** - Built with Radix UI primitives
+- **Customizable** - Tailwind CSS powered
+- **TypeScript** - Fully typed
 
 ## Quick Start
 
@@ -51,54 +53,17 @@ export function App() {
 }
 ```
 
-## Multi-Framework Support
-
-```tsx
-// React (default)
-import { Button } from '@hanzo/ui'
-
-// Vue
-import { Button } from '@hanzo/ui/vue'
-
-// Svelte
-import { Button } from '@hanzo/ui/svelte'
-
-// React Native
-import { Button } from '@hanzo/ui/react-native'
-```
-
 ## Documentation
 
-📚 Visit **[ui.hanzo.ai](https://ui.hanzo.ai)** for:
-
-- [Component Documentation](https://ui.hanzo.ai/docs/components)
-- [Framework Guides](https://ui.hanzo.ai/docs/frameworks)
-- [Installation Guide](https://ui.hanzo.ai/docs/installation)
-- [Examples](https://ui.hanzo.ai/examples)
-- [Page Builder](https://ui.hanzo.ai/builder)
-- [Theme Generator](https://ui.hanzo.ai/theme-generator)
+Visit **[ui.hanzo.ai](https://ui.hanzo.ai)** for full docs.
 
 ## CLI
 
-Install components individually:
-
 ```bash
 npx @hanzo/ui add button
 npx @hanzo/ui add card dialog
 ```
 
-## What's Different from shadcn/ui?
-
-| Feature | shadcn/ui | @hanzo/ui |
-|---------|-----------|-----------|
-| Components | 58 | **161** |
-| Frameworks | React only | React, Vue, Svelte, React Native |
-| 3D Components | ❌ | ✅ (9 components) |
-| AI Components | ❌ | ✅ (12 components) |
-| Page Builder | ❌ | ✅ |
-| White-Label | ❌ | ✅ |
-| Blocks | Limited | **24+ templates** |
-
 ## Packages
 
 - `@hanzo/ui` - Main UI library (161 components)
@@ -106,55 +71,23 @@ npx @hanzo/ui add card dialog
 - `@hanzo/commerce` - E-commerce components
 - `@hanzo/brand` - Branding system
 
-## Examples
-
-```tsx
-// 3D Components
-import { ThreeDButton, ThreeDCard } from '@hanzo/ui'
-
-// AI Components
-import { AIChat, AIAssistant } from '@hanzo/ui'
-
-// Animations
-import { AnimatedBeam, AnimatedText } from '@hanzo/ui'
-```
-
 ## Development
 
 ```bash
-# Clone repository
 git clone https://github.com/hanzoai/ui.git
 cd ui
-
-# Install dependencies
 pnpm install
-
-# Start dev server
 pnpm dev
-
-# Build packages
-pnpm build
-
-# Run tests
-pnpm test
 ```
 
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md).
+Please read the [contributing guide](/CONTRIBUTING.md).
 
 ## License
 
 MIT - See [LICENSE.md](./LICENSE.md) for details.
 
-## Links
-
-- [Documentation](https://ui.hanzo.ai)
-- [GitHub](https://github.com/hanzoai/ui)
-- [npm](https://www.npmjs.com/package/@hanzo/ui)
-- [Discord](https://discord.gg/hanzo)
-- [Twitter](https://twitter.com/hanzoai)
-
 ---
 
-Built with ❤️ by [Hanzo](https://hanzo.ai)
+Built by [Hanzo](https://hanzo.ai)

SECURITY.md

@@ -6,4 +6,4 @@ We will investigate all legitimate reports and do our best to quickly fix the pr
 
 Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. 
 
-To do this, please visit the security tab of the repository and click the "Report a vulnerability" button.
+To do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.

app/.docs/browser.ts

@@ -0,0 +1,434 @@
+// @ts-nocheck
+import { browser } from "@hanzo/docs-mdx/runtime/browser"
+
+import type * as Config from "../source.config"
+
+const create = browser<
+  typeof Config,
+  import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
+    DocData: {}
+  }
+>()
+const browserCollections = {
+  docs: create.doc("docs", {
+    "about.mdx": () => import("../content/docs/about.mdx?collection=docs"),
+    "changelog.mdx": () =>
+      import("../content/docs/changelog.mdx?collection=docs"),
+    "cli.mdx": () => import("../content/docs/cli.mdx?collection=docs"),
+    "components-json.mdx": () =>
+      import("../content/docs/components-json.mdx?collection=docs"),
+    "components.mdx": () =>
+      import("../content/docs/components.mdx?collection=docs"),
+    "figma.mdx": () => import("../content/docs/figma.mdx?collection=docs"),
+    "index.mdx": () => import("../content/docs/index.mdx?collection=docs"),
+    "mcp.mdx": () => import("../content/docs/mcp.mdx?collection=docs"),
+    "theming.mdx": () => import("../content/docs/theming.mdx?collection=docs"),
+    "ai/actions.mdx": () =>
+      import("../content/docs/ai/actions.mdx?collection=docs"),
+    "ai/agents.mdx": () =>
+      import("../content/docs/ai/agents.mdx?collection=docs"),
+    "ai/assistant.mdx": () =>
+      import("../content/docs/ai/assistant.mdx?collection=docs"),
+    "ai/chat.mdx": () => import("../content/docs/ai/chat.mdx?collection=docs"),
+    "ai/code.mdx": () => import("../content/docs/ai/code.mdx?collection=docs"),
+    "ai/index.mdx": () =>
+      import("../content/docs/ai/index.mdx?collection=docs"),
+    "ai/models.mdx": () =>
+      import("../content/docs/ai/models.mdx?collection=docs"),
+    "ai/playground.mdx": () =>
+      import("../content/docs/ai/playground.mdx?collection=docs"),
+    "ai/tools.mdx": () =>
+      import("../content/docs/ai/tools.mdx?collection=docs"),
+    "ai/vision.mdx": () =>
+      import("../content/docs/ai/vision.mdx?collection=docs"),
+    "ai/voice-settings.mdx": () =>
+      import("../content/docs/ai/voice-settings.mdx?collection=docs"),
+    "ai/voice.mdx": () =>
+      import("../content/docs/ai/voice.mdx?collection=docs"),
+    "block-examples/billing.mdx": () =>
+      import("../content/docs/block-examples/billing.mdx?collection=docs"),
+    "block-examples/compose-spec.mdx": () =>
+      import("../content/docs/block-examples/compose-spec.mdx?collection=docs"),
+    "block-examples/newsletter.mdx": () =>
+      import("../content/docs/block-examples/newsletter.mdx?collection=docs"),
+    "block-examples/pricing.mdx": () =>
+      import("../content/docs/block-examples/pricing.mdx?collection=docs"),
+    "frameworks/index.mdx": () =>
+      import("../content/docs/frameworks/index.mdx?collection=docs"),
+    "frameworks/react.mdx": () =>
+      import("../content/docs/frameworks/react.mdx?collection=docs"),
+    "frameworks/vue.mdx": () =>
+      import("../content/docs/frameworks/vue.mdx?collection=docs"),
+    "dark-mode/astro.mdx": () =>
+      import("../content/docs/dark-mode/astro.mdx?collection=docs"),
+    "dark-mode/index.mdx": () =>
+      import("../content/docs/dark-mode/index.mdx?collection=docs"),
+    "dark-mode/next.mdx": () =>
+      import("../content/docs/dark-mode/next.mdx?collection=docs"),
+    "dark-mode/remix.mdx": () =>
+      import("../content/docs/dark-mode/remix.mdx?collection=docs"),
+    "dark-mode/vite.mdx": () =>
+      import("../content/docs/dark-mode/vite.mdx?collection=docs"),
+    "guides/page-builder.mdx": () =>
+      import("../content/docs/guides/page-builder.mdx?collection=docs"),
+    "guides/visual-workflows.mdx": () =>
+      import("../content/docs/guides/visual-workflows.mdx?collection=docs"),
+    "hanzo-react/getting-started.mdx": () =>
+      import("../content/docs/hanzo-react/getting-started.mdx?collection=docs"),
+    "hanzo-react/hooks.mdx": () =>
+      import("../content/docs/hanzo-react/hooks.mdx?collection=docs"),
+    "installation/astro.mdx": () =>
+      import("../content/docs/installation/astro.mdx?collection=docs"),
+    "installation/gatsby.mdx": () =>
+      import("../content/docs/installation/gatsby.mdx?collection=docs"),
+    "installation/index.mdx": () =>
+      import("../content/docs/installation/index.mdx?collection=docs"),
+    "installation/laravel.mdx": () =>
+      import("../content/docs/installation/laravel.mdx?collection=docs"),
+    "installation/manual.mdx": () =>
+      import("../content/docs/installation/manual.mdx?collection=docs"),
+    "installation/next.mdx": () =>
+      import("../content/docs/installation/next.mdx?collection=docs"),
+    "installation/remix.mdx": () =>
+      import("../content/docs/installation/remix.mdx?collection=docs"),
+    "installation/vite.mdx": () =>
+      import("../content/docs/installation/vite.mdx?collection=docs"),
+    "packages/index.mdx": () =>
+      import("../content/docs/packages/index.mdx?collection=docs"),
+    "components/3d-card.mdx": () =>
+      import("../content/docs/components/3d-card.mdx?collection=docs"),
+    "components/3d-marquee.mdx": () =>
+      import("../content/docs/components/3d-marquee.mdx?collection=docs"),
+    "components/3d-pin.mdx": () =>
+      import("../content/docs/components/3d-pin.mdx?collection=docs"),
+    "components/accordion.mdx": () =>
+      import("../content/docs/components/accordion.mdx?collection=docs"),
+    "components/advanced-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/advanced-navigation-bar.mdx?collection=docs"
+      ),
+    "components/ai-model-selector-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/ai-model-selector-navigation-bar.mdx?collection=docs"
+      ),
+    "components/alert-dialog.mdx": () =>
+      import("../content/docs/components/alert-dialog.mdx?collection=docs"),
+    "components/alert.mdx": () =>
+      import("../content/docs/components/alert.mdx?collection=docs"),
+    "components/android.mdx": () =>
+      import("../content/docs/components/android.mdx?collection=docs"),
+    "components/animated-beam.mdx": () =>
+      import("../content/docs/components/animated-beam.mdx?collection=docs"),
+    "components/animated-cursor.mdx": () =>
+      import("../content/docs/components/animated-cursor.mdx?collection=docs"),
+    "components/animated-testimonials.mdx": () =>
+      import(
+        "../content/docs/components/animated-testimonials.mdx?collection=docs"
+      ),
+    "components/animated-tooltip.mdx": () =>
+      import("../content/docs/components/animated-tooltip.mdx?collection=docs"),
+    "components/animation-components.mdx": () =>
+      import(
+        "../content/docs/components/animation-components.mdx?collection=docs"
+      ),
+    "components/announcement.mdx": () =>
+      import("../content/docs/components/announcement.mdx?collection=docs"),
+    "components/app-switcher-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/app-switcher-navigation-bar.mdx?collection=docs"
+      ),
+    "components/apple-cards-carousel.mdx": () =>
+      import(
+        "../content/docs/components/apple-cards-carousel.mdx?collection=docs"
+      ),
+    "components/apple-hello-effect.mdx": () =>
+      import(
+        "../content/docs/components/apple-hello-effect.mdx?collection=docs"
+      ),
+    "components/aspect-ratio.mdx": () =>
+      import("../content/docs/components/aspect-ratio.mdx?collection=docs"),
+    "components/avatar-group.mdx": () =>
+      import("../content/docs/components/avatar-group.mdx?collection=docs"),
+    "components/avatar.mdx": () =>
+      import("../content/docs/components/avatar.mdx?collection=docs"),
+    "components/badge.mdx": () =>
+      import("../content/docs/components/badge.mdx?collection=docs"),
+    "components/banner.mdx": () =>
+      import("../content/docs/components/banner.mdx?collection=docs"),
+    "components/breadcrumb-and-filters-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/breadcrumb-and-filters-navigation-bar.mdx?collection=docs"
+      ),
+    "components/breadcrumb-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/breadcrumb-navigation-bar.mdx?collection=docs"
+      ),
+    "components/breadcrumb.mdx": () =>
+      import("../content/docs/components/breadcrumb.mdx?collection=docs"),
+    "components/button-group.mdx": () =>
+      import("../content/docs/components/button-group.mdx?collection=docs"),
+    "components/button.mdx": () =>
+      import("../content/docs/components/button.mdx?collection=docs"),
+    "components/calendar.mdx": () =>
+      import("../content/docs/components/calendar.mdx?collection=docs"),
+    "components/card.mdx": () =>
+      import("../content/docs/components/card.mdx?collection=docs"),
+    "components/carousel.mdx": () =>
+      import("../content/docs/components/carousel.mdx?collection=docs"),
+    "components/centered-logo-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/centered-logo-navigation-bar.mdx?collection=docs"
+      ),
+    "components/checkbox.mdx": () =>
+      import("../content/docs/components/checkbox.mdx?collection=docs"),
+    "components/choicebox.mdx": () =>
+      import("../content/docs/components/choicebox.mdx?collection=docs"),
+    "components/code-block.mdx": () =>
+      import("../content/docs/components/code-block.mdx?collection=docs"),
+    "components/code-editor.mdx": () =>
+      import("../content/docs/components/code-editor.mdx?collection=docs"),
+    "components/code-tabs.mdx": () =>
+      import("../content/docs/components/code-tabs.mdx?collection=docs"),
+    "components/collaboration-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/collaboration-navigation-bar.mdx?collection=docs"
+      ),
+    "components/collapsible.mdx": () =>
+      import("../content/docs/components/collapsible.mdx?collection=docs"),
+    "components/color-picker.mdx": () =>
+      import("../content/docs/components/color-picker.mdx?collection=docs"),
+    "components/combobox.mdx": () =>
+      import("../content/docs/components/combobox.mdx?collection=docs"),
+    "components/command.mdx": () =>
+      import("../content/docs/components/command.mdx?collection=docs"),
+    "components/communication-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/communication-navigation-bar.mdx?collection=docs"
+      ),
+    "components/comparison.mdx": () =>
+      import("../content/docs/components/comparison.mdx?collection=docs"),
+    "components/context-menu.mdx": () =>
+      import("../content/docs/components/context-menu.mdx?collection=docs"),
+    "components/context-switcher-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/context-switcher-navigation-bar.mdx?collection=docs"
+      ),
+    "components/credit-card.mdx": () =>
+      import("../content/docs/components/credit-card.mdx?collection=docs"),
+    "components/cursor.mdx": () =>
+      import("../content/docs/components/cursor.mdx?collection=docs"),
+    "components/dashboard-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/dashboard-navigation-bar.mdx?collection=docs"
+      ),
+    "components/data-table.mdx": () =>
+      import("../content/docs/components/data-table.mdx?collection=docs"),
+    "components/date-picker.mdx": () =>
+      import("../content/docs/components/date-picker.mdx?collection=docs"),
+    "components/desktop-hooks.mdx": () =>
+      import("../content/docs/components/desktop-hooks.mdx?collection=docs"),
+    "components/desktop-spotlight.mdx": () =>
+      import(
+        "../content/docs/components/desktop-spotlight.mdx?collection=docs"
+      ),
+    "components/desktop-window.mdx": () =>
+      import("../content/docs/components/desktop-window.mdx?collection=docs"),
+    "components/desktop.mdx": () =>
+      import("../content/docs/components/desktop.mdx?collection=docs"),
+    "components/dialog-stack.mdx": () =>
+      import("../content/docs/components/dialog-stack.mdx?collection=docs"),
+    "components/dialog.mdx": () =>
+      import("../content/docs/components/dialog.mdx?collection=docs"),
+    "components/dock.mdx": () =>
+      import("../content/docs/components/dock.mdx?collection=docs"),
+    "components/drawer.mdx": () =>
+      import("../content/docs/components/drawer.mdx?collection=docs"),
+    "components/dropdown-menu.mdx": () =>
+      import("../content/docs/components/dropdown-menu.mdx?collection=docs"),
+    "components/dropzone.mdx": () =>
+      import("../content/docs/components/dropzone.mdx?collection=docs"),
+    "components/e-commerce-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/e-commerce-navigation-bar.mdx?collection=docs"
+      ),
+    "components/editor.mdx": () =>
+      import("../content/docs/components/editor.mdx?collection=docs"),
+    "components/empty.mdx": () =>
+      import("../content/docs/components/empty.mdx?collection=docs"),
+    "components/field.mdx": () =>
+      import("../content/docs/components/field.mdx?collection=docs"),
+    "components/form.mdx": () =>
+      import("../content/docs/components/form.mdx?collection=docs"),
+    "components/gantt.mdx": () =>
+      import("../content/docs/components/gantt.mdx?collection=docs"),
+    "components/glimpse.mdx": () =>
+      import("../content/docs/components/glimpse.mdx?collection=docs"),
+    "components/grid-pattern.mdx": () =>
+      import("../content/docs/components/grid-pattern.mdx?collection=docs"),
+    "components/hover-card.mdx": () =>
+      import("../content/docs/components/hover-card.mdx?collection=docs"),
+    "components/icon-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/icon-navigation-bar.mdx?collection=docs"
+      ),
+    "components/image-crop.mdx": () =>
+      import("../content/docs/components/image-crop.mdx?collection=docs"),
+    "components/image-zoom.mdx": () =>
+      import("../content/docs/components/image-zoom.mdx?collection=docs"),
+    "components/index.mdx": () =>
+      import("../content/docs/components/index.mdx?collection=docs"),
+    "components/input-group.mdx": () =>
+      import("../content/docs/components/input-group.mdx?collection=docs"),
+    "components/input-otp.mdx": () =>
+      import("../content/docs/components/input-otp.mdx?collection=docs"),
+    "components/input.mdx": () =>
+      import("../content/docs/components/input.mdx?collection=docs"),
+    "components/interactive-grid-pattern.mdx": () =>
+      import(
+        "../content/docs/components/interactive-grid-pattern.mdx?collection=docs"
+      ),
+    "components/iphone-15-pro.mdx": () =>
+      import("../content/docs/components/iphone-15-pro.mdx?collection=docs"),
+    "components/item.mdx": () =>
+      import("../content/docs/components/item.mdx?collection=docs"),
+    "components/kanban.mdx": () =>
+      import("../content/docs/components/kanban.mdx?collection=docs"),
+    "components/kbd.mdx": () =>
+      import("../content/docs/components/kbd.mdx?collection=docs"),
+    "components/label.mdx": () =>
+      import("../content/docs/components/label.mdx?collection=docs"),
+    "components/limelight-nav.mdx": () =>
+      import("../content/docs/components/limelight-nav.mdx?collection=docs"),
+    "components/list.mdx": () =>
+      import("../content/docs/components/list.mdx?collection=docs"),
+    "components/macos-dock.mdx": () =>
+      import("../content/docs/components/macos-dock.mdx?collection=docs"),
+    "components/magnetic.mdx": () =>
+      import("../content/docs/components/magnetic.mdx?collection=docs"),
+    "components/marquee.mdx": () =>
+      import("../content/docs/components/marquee.mdx?collection=docs"),
+    "components/menu-dock.mdx": () =>
+      import("../content/docs/components/menu-dock.mdx?collection=docs"),
+    "components/menubar.mdx": () =>
+      import("../content/docs/components/menubar.mdx?collection=docs"),
+    "components/message-dock.mdx": () =>
+      import("../content/docs/components/message-dock.mdx?collection=docs"),
+    "components/mini-calendar.mdx": () =>
+      import("../content/docs/components/mini-calendar.mdx?collection=docs"),
+    "components/minimal-tiptap.mdx": () =>
+      import("../content/docs/components/minimal-tiptap.mdx?collection=docs"),
+    "components/motion-highlight.mdx": () =>
+      import("../content/docs/components/motion-highlight.mdx?collection=docs"),
+    "components/navigation-menu.mdx": () =>
+      import("../content/docs/components/navigation-menu.mdx?collection=docs"),
+    "components/pagination.mdx": () =>
+      import("../content/docs/components/pagination.mdx?collection=docs"),
+    "components/particles-background.mdx": () =>
+      import(
+        "../content/docs/components/particles-background.mdx?collection=docs"
+      ),
+    "components/particles.mdx": () =>
+      import("../content/docs/components/particles.mdx?collection=docs"),
+    "components/pill.mdx": () =>
+      import("../content/docs/components/pill.mdx?collection=docs"),
+    "components/pin-list.mdx": () =>
+      import("../content/docs/components/pin-list.mdx?collection=docs"),
+    "components/pixel-image.mdx": () =>
+      import("../content/docs/components/pixel-image.mdx?collection=docs"),
+    "components/popover.mdx": () =>
+      import("../content/docs/components/popover.mdx?collection=docs"),
+    "components/progress.mdx": () =>
+      import("../content/docs/components/progress.mdx?collection=docs"),
+    "components/qr-code.mdx": () =>
+      import("../content/docs/components/qr-code.mdx?collection=docs"),
+    "components/radio-group.mdx": () =>
+      import("../content/docs/components/radio-group.mdx?collection=docs"),
+    "components/relative-time.mdx": () =>
+      import("../content/docs/components/relative-time.mdx?collection=docs"),
+    "components/resizable.mdx": () =>
+      import("../content/docs/components/resizable.mdx?collection=docs"),
+    "components/safari.mdx": () =>
+      import("../content/docs/components/safari.mdx?collection=docs"),
+    "components/sandbox.mdx": () =>
+      import("../content/docs/components/sandbox.mdx?collection=docs"),
+    "components/scroll-area.mdx": () =>
+      import("../content/docs/components/scroll-area.mdx?collection=docs"),
+    "components/search-and-toggle-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/search-and-toggle-navigation-bar.mdx?collection=docs"
+      ),
+    "components/select.mdx": () =>
+      import("../content/docs/components/select.mdx?collection=docs"),
+    "components/separator.mdx": () =>
+      import("../content/docs/components/separator.mdx?collection=docs"),
+    "components/sheet.mdx": () =>
+      import("../content/docs/components/sheet.mdx?collection=docs"),
+    "components/simple-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/simple-navigation-bar.mdx?collection=docs"
+      ),
+    "components/skeleton.mdx": () =>
+      import("../content/docs/components/skeleton.mdx?collection=docs"),
+    "components/slider.mdx": () =>
+      import("../content/docs/components/slider.mdx?collection=docs"),
+    "components/snippet.mdx": () =>
+      import("../content/docs/components/snippet.mdx?collection=docs"),
+    "components/sonner.mdx": () =>
+      import("../content/docs/components/sonner.mdx?collection=docs"),
+    "components/spinner.mdx": () =>
+      import("../content/docs/components/spinner.mdx?collection=docs"),
+    "components/stars-scrolling-wheel.mdx": () =>
+      import(
+        "../content/docs/components/stars-scrolling-wheel.mdx?collection=docs"
+      ),
+    "components/status-dashboard-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/status-dashboard-navigation-bar.mdx?collection=docs"
+      ),
+    "components/status.mdx": () =>
+      import("../content/docs/components/status.mdx?collection=docs"),
+    "components/switch.mdx": () =>
+      import("../content/docs/components/switch.mdx?collection=docs"),
+    "components/table.mdx": () =>
+      import("../content/docs/components/table.mdx?collection=docs"),
+    "components/tabs.mdx": () =>
+      import("../content/docs/components/tabs.mdx?collection=docs"),
+    "components/tags.mdx": () =>
+      import("../content/docs/components/tags.mdx?collection=docs"),
+    "components/team-switcher-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/team-switcher-navigation-bar.mdx?collection=docs"
+      ),
+    "components/terminal.mdx": () =>
+      import("../content/docs/components/terminal.mdx?collection=docs"),
+    "components/textarea.mdx": () =>
+      import("../content/docs/components/textarea.mdx?collection=docs"),
+    "components/timeline.mdx": () =>
+      import("../content/docs/components/timeline.mdx?collection=docs"),
+    "components/toast.mdx": () =>
+      import("../content/docs/components/toast.mdx?collection=docs"),
+    "components/toggle-group.mdx": () =>
+      import("../content/docs/components/toggle-group.mdx?collection=docs"),
+    "components/toggle.mdx": () =>
+      import("../content/docs/components/toggle.mdx?collection=docs"),
+    "components/tooltip.mdx": () =>
+      import("../content/docs/components/tooltip.mdx?collection=docs"),
+    "components/two-tier-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/two-tier-navigation-bar.mdx?collection=docs"
+      ),
+    "components/typography.mdx": () =>
+      import("../content/docs/components/typography.mdx?collection=docs"),
+    "components/underline-navigation-bar.mdx": () =>
+      import(
+        "../content/docs/components/underline-navigation-bar.mdx?collection=docs"
+      ),
+    "components/video-player.mdx": () =>
+      import("../content/docs/components/video-player.mdx?collection=docs"),
+    "white-label/index.mdx": () =>
+      import("../content/docs/white-label/index.mdx?collection=docs"),
+    "testing/index.mdx": () =>
+      import("../content/docs/testing/index.mdx?collection=docs"),
+  }),
+}
+export default browserCollections

app/.docs/dynamic.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { dynamic } from "@hanzo/docs-mdx/runtime/dynamic"
+
+import * as Config from "../source.config"
+
+const create = await dynamic<
+  typeof Config,
+  import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
+    DocData: {}
+  }
+>(
+  Config,
+  { configPath: "source.config.ts", environment: "next", outDir: ".docs" },
+  { doc: { passthroughs: ["extractedReferences"] } }
+)

app/.docs/server.ts

@@ -0,0 +1,393 @@
+// @ts-nocheck
+import { server } from "@hanzo/docs-mdx/runtime/server"
+
+import * as __fd_glob_0 from "../content/docs/about.mdx?collection=docs"
+import * as __fd_glob_9 from "../content/docs/ai/actions.mdx?collection=docs"
+import * as __fd_glob_10 from "../content/docs/ai/agents.mdx?collection=docs"
+import * as __fd_glob_11 from "../content/docs/ai/assistant.mdx?collection=docs"
+import * as __fd_glob_12 from "../content/docs/ai/chat.mdx?collection=docs"
+import * as __fd_glob_13 from "../content/docs/ai/code.mdx?collection=docs"
+import * as __fd_glob_14 from "../content/docs/ai/index.mdx?collection=docs"
+import * as __fd_glob_15 from "../content/docs/ai/models.mdx?collection=docs"
+import * as __fd_glob_16 from "../content/docs/ai/playground.mdx?collection=docs"
+import * as __fd_glob_17 from "../content/docs/ai/tools.mdx?collection=docs"
+import * as __fd_glob_18 from "../content/docs/ai/vision.mdx?collection=docs"
+import * as __fd_glob_19 from "../content/docs/ai/voice-settings.mdx?collection=docs"
+import * as __fd_glob_20 from "../content/docs/ai/voice.mdx?collection=docs"
+import * as __fd_glob_21 from "../content/docs/block-examples/billing.mdx?collection=docs"
+import * as __fd_glob_22 from "../content/docs/block-examples/compose-spec.mdx?collection=docs"
+import * as __fd_glob_23 from "../content/docs/block-examples/newsletter.mdx?collection=docs"
+import * as __fd_glob_24 from "../content/docs/block-examples/pricing.mdx?collection=docs"
+import * as __fd_glob_1 from "../content/docs/changelog.mdx?collection=docs"
+import * as __fd_glob_2 from "../content/docs/cli.mdx?collection=docs"
+import * as __fd_glob_3 from "../content/docs/components-json.mdx?collection=docs"
+import * as __fd_glob_4 from "../content/docs/components.mdx?collection=docs"
+import * as __fd_glob_46 from "../content/docs/components/3d-card.mdx?collection=docs"
+import * as __fd_glob_47 from "../content/docs/components/3d-marquee.mdx?collection=docs"
+import * as __fd_glob_48 from "../content/docs/components/3d-pin.mdx?collection=docs"
+import * as __fd_glob_49 from "../content/docs/components/accordion.mdx?collection=docs"
+import * as __fd_glob_50 from "../content/docs/components/advanced-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_51 from "../content/docs/components/ai-model-selector-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_52 from "../content/docs/components/alert-dialog.mdx?collection=docs"
+import * as __fd_glob_53 from "../content/docs/components/alert.mdx?collection=docs"
+import * as __fd_glob_54 from "../content/docs/components/android.mdx?collection=docs"
+import * as __fd_glob_55 from "../content/docs/components/animated-beam.mdx?collection=docs"
+import * as __fd_glob_56 from "../content/docs/components/animated-cursor.mdx?collection=docs"
+import * as __fd_glob_57 from "../content/docs/components/animated-testimonials.mdx?collection=docs"
+import * as __fd_glob_58 from "../content/docs/components/animated-tooltip.mdx?collection=docs"
+import * as __fd_glob_59 from "../content/docs/components/animation-components.mdx?collection=docs"
+import * as __fd_glob_60 from "../content/docs/components/announcement.mdx?collection=docs"
+import * as __fd_glob_61 from "../content/docs/components/app-switcher-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_62 from "../content/docs/components/apple-cards-carousel.mdx?collection=docs"
+import * as __fd_glob_63 from "../content/docs/components/apple-hello-effect.mdx?collection=docs"
+import * as __fd_glob_64 from "../content/docs/components/aspect-ratio.mdx?collection=docs"
+import * as __fd_glob_65 from "../content/docs/components/avatar-group.mdx?collection=docs"
+import * as __fd_glob_66 from "../content/docs/components/avatar.mdx?collection=docs"
+import * as __fd_glob_67 from "../content/docs/components/badge.mdx?collection=docs"
+import * as __fd_glob_68 from "../content/docs/components/banner.mdx?collection=docs"
+import * as __fd_glob_69 from "../content/docs/components/breadcrumb-and-filters-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_70 from "../content/docs/components/breadcrumb-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_71 from "../content/docs/components/breadcrumb.mdx?collection=docs"
+import * as __fd_glob_72 from "../content/docs/components/button-group.mdx?collection=docs"
+import * as __fd_glob_73 from "../content/docs/components/button.mdx?collection=docs"
+import * as __fd_glob_74 from "../content/docs/components/calendar.mdx?collection=docs"
+import * as __fd_glob_75 from "../content/docs/components/card.mdx?collection=docs"
+import * as __fd_glob_76 from "../content/docs/components/carousel.mdx?collection=docs"
+import * as __fd_glob_77 from "../content/docs/components/centered-logo-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_78 from "../content/docs/components/checkbox.mdx?collection=docs"
+import * as __fd_glob_79 from "../content/docs/components/choicebox.mdx?collection=docs"
+import * as __fd_glob_80 from "../content/docs/components/code-block.mdx?collection=docs"
+import * as __fd_glob_81 from "../content/docs/components/code-editor.mdx?collection=docs"
+import * as __fd_glob_82 from "../content/docs/components/code-tabs.mdx?collection=docs"
+import * as __fd_glob_83 from "../content/docs/components/collaboration-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_84 from "../content/docs/components/collapsible.mdx?collection=docs"
+import * as __fd_glob_85 from "../content/docs/components/color-picker.mdx?collection=docs"
+import * as __fd_glob_86 from "../content/docs/components/combobox.mdx?collection=docs"
+import * as __fd_glob_87 from "../content/docs/components/command.mdx?collection=docs"
+import * as __fd_glob_88 from "../content/docs/components/communication-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_89 from "../content/docs/components/comparison.mdx?collection=docs"
+import * as __fd_glob_90 from "../content/docs/components/context-menu.mdx?collection=docs"
+import * as __fd_glob_91 from "../content/docs/components/context-switcher-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_92 from "../content/docs/components/credit-card.mdx?collection=docs"
+import * as __fd_glob_93 from "../content/docs/components/cursor.mdx?collection=docs"
+import * as __fd_glob_94 from "../content/docs/components/dashboard-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_95 from "../content/docs/components/data-table.mdx?collection=docs"
+import * as __fd_glob_96 from "../content/docs/components/date-picker.mdx?collection=docs"
+import * as __fd_glob_97 from "../content/docs/components/desktop-hooks.mdx?collection=docs"
+import * as __fd_glob_98 from "../content/docs/components/desktop-spotlight.mdx?collection=docs"
+import * as __fd_glob_99 from "../content/docs/components/desktop-window.mdx?collection=docs"
+import * as __fd_glob_100 from "../content/docs/components/desktop.mdx?collection=docs"
+import * as __fd_glob_101 from "../content/docs/components/dialog-stack.mdx?collection=docs"
+import * as __fd_glob_102 from "../content/docs/components/dialog.mdx?collection=docs"
+import * as __fd_glob_103 from "../content/docs/components/dock.mdx?collection=docs"
+import * as __fd_glob_104 from "../content/docs/components/drawer.mdx?collection=docs"
+import * as __fd_glob_105 from "../content/docs/components/dropdown-menu.mdx?collection=docs"
+import * as __fd_glob_106 from "../content/docs/components/dropzone.mdx?collection=docs"
+import * as __fd_glob_107 from "../content/docs/components/e-commerce-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_108 from "../content/docs/components/editor.mdx?collection=docs"
+import * as __fd_glob_109 from "../content/docs/components/empty.mdx?collection=docs"
+import * as __fd_glob_110 from "../content/docs/components/field.mdx?collection=docs"
+import * as __fd_glob_111 from "../content/docs/components/form.mdx?collection=docs"
+import * as __fd_glob_112 from "../content/docs/components/gantt.mdx?collection=docs"
+import * as __fd_glob_113 from "../content/docs/components/glimpse.mdx?collection=docs"
+import * as __fd_glob_114 from "../content/docs/components/grid-pattern.mdx?collection=docs"
+import * as __fd_glob_115 from "../content/docs/components/hover-card.mdx?collection=docs"
+import * as __fd_glob_116 from "../content/docs/components/icon-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_117 from "../content/docs/components/image-crop.mdx?collection=docs"
+import * as __fd_glob_118 from "../content/docs/components/image-zoom.mdx?collection=docs"
+import * as __fd_glob_119 from "../content/docs/components/index.mdx?collection=docs"
+import * as __fd_glob_120 from "../content/docs/components/input-group.mdx?collection=docs"
+import * as __fd_glob_121 from "../content/docs/components/input-otp.mdx?collection=docs"
+import * as __fd_glob_122 from "../content/docs/components/input.mdx?collection=docs"
+import * as __fd_glob_123 from "../content/docs/components/interactive-grid-pattern.mdx?collection=docs"
+import * as __fd_glob_124 from "../content/docs/components/iphone-15-pro.mdx?collection=docs"
+import * as __fd_glob_125 from "../content/docs/components/item.mdx?collection=docs"
+import * as __fd_glob_126 from "../content/docs/components/kanban.mdx?collection=docs"
+import * as __fd_glob_127 from "../content/docs/components/kbd.mdx?collection=docs"
+import * as __fd_glob_128 from "../content/docs/components/label.mdx?collection=docs"
+import * as __fd_glob_129 from "../content/docs/components/limelight-nav.mdx?collection=docs"
+import * as __fd_glob_130 from "../content/docs/components/list.mdx?collection=docs"
+import * as __fd_glob_131 from "../content/docs/components/macos-dock.mdx?collection=docs"
+import * as __fd_glob_132 from "../content/docs/components/magnetic.mdx?collection=docs"
+import * as __fd_glob_133 from "../content/docs/components/marquee.mdx?collection=docs"
+import * as __fd_glob_134 from "../content/docs/components/menu-dock.mdx?collection=docs"
+import * as __fd_glob_135 from "../content/docs/components/menubar.mdx?collection=docs"
+import * as __fd_glob_136 from "../content/docs/components/message-dock.mdx?collection=docs"
+import * as __fd_glob_137 from "../content/docs/components/mini-calendar.mdx?collection=docs"
+import * as __fd_glob_138 from "../content/docs/components/minimal-tiptap.mdx?collection=docs"
+import * as __fd_glob_139 from "../content/docs/components/motion-highlight.mdx?collection=docs"
+import * as __fd_glob_140 from "../content/docs/components/navigation-menu.mdx?collection=docs"
+import * as __fd_glob_141 from "../content/docs/components/pagination.mdx?collection=docs"
+import * as __fd_glob_142 from "../content/docs/components/particles-background.mdx?collection=docs"
+import * as __fd_glob_143 from "../content/docs/components/particles.mdx?collection=docs"
+import * as __fd_glob_144 from "../content/docs/components/pill.mdx?collection=docs"
+import * as __fd_glob_145 from "../content/docs/components/pin-list.mdx?collection=docs"
+import * as __fd_glob_146 from "../content/docs/components/pixel-image.mdx?collection=docs"
+import * as __fd_glob_147 from "../content/docs/components/popover.mdx?collection=docs"
+import * as __fd_glob_148 from "../content/docs/components/progress.mdx?collection=docs"
+import * as __fd_glob_149 from "../content/docs/components/qr-code.mdx?collection=docs"
+import * as __fd_glob_150 from "../content/docs/components/radio-group.mdx?collection=docs"
+import * as __fd_glob_151 from "../content/docs/components/relative-time.mdx?collection=docs"
+import * as __fd_glob_152 from "../content/docs/components/resizable.mdx?collection=docs"
+import * as __fd_glob_153 from "../content/docs/components/safari.mdx?collection=docs"
+import * as __fd_glob_154 from "../content/docs/components/sandbox.mdx?collection=docs"
+import * as __fd_glob_155 from "../content/docs/components/scroll-area.mdx?collection=docs"
+import * as __fd_glob_156 from "../content/docs/components/search-and-toggle-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_157 from "../content/docs/components/select.mdx?collection=docs"
+import * as __fd_glob_158 from "../content/docs/components/separator.mdx?collection=docs"
+import * as __fd_glob_159 from "../content/docs/components/sheet.mdx?collection=docs"
+import * as __fd_glob_160 from "../content/docs/components/simple-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_161 from "../content/docs/components/skeleton.mdx?collection=docs"
+import * as __fd_glob_162 from "../content/docs/components/slider.mdx?collection=docs"
+import * as __fd_glob_163 from "../content/docs/components/snippet.mdx?collection=docs"
+import * as __fd_glob_164 from "../content/docs/components/sonner.mdx?collection=docs"
+import * as __fd_glob_165 from "../content/docs/components/spinner.mdx?collection=docs"
+import * as __fd_glob_166 from "../content/docs/components/stars-scrolling-wheel.mdx?collection=docs"
+import * as __fd_glob_167 from "../content/docs/components/status-dashboard-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_168 from "../content/docs/components/status.mdx?collection=docs"
+import * as __fd_glob_169 from "../content/docs/components/switch.mdx?collection=docs"
+import * as __fd_glob_170 from "../content/docs/components/table.mdx?collection=docs"
+import * as __fd_glob_171 from "../content/docs/components/tabs.mdx?collection=docs"
+import * as __fd_glob_172 from "../content/docs/components/tags.mdx?collection=docs"
+import * as __fd_glob_173 from "../content/docs/components/team-switcher-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_174 from "../content/docs/components/terminal.mdx?collection=docs"
+import * as __fd_glob_175 from "../content/docs/components/textarea.mdx?collection=docs"
+import * as __fd_glob_176 from "../content/docs/components/timeline.mdx?collection=docs"
+import * as __fd_glob_177 from "../content/docs/components/toast.mdx?collection=docs"
+import * as __fd_glob_178 from "../content/docs/components/toggle-group.mdx?collection=docs"
+import * as __fd_glob_179 from "../content/docs/components/toggle.mdx?collection=docs"
+import * as __fd_glob_180 from "../content/docs/components/tooltip.mdx?collection=docs"
+import * as __fd_glob_181 from "../content/docs/components/two-tier-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_182 from "../content/docs/components/typography.mdx?collection=docs"
+import * as __fd_glob_183 from "../content/docs/components/underline-navigation-bar.mdx?collection=docs"
+import * as __fd_glob_184 from "../content/docs/components/video-player.mdx?collection=docs"
+import * as __fd_glob_28 from "../content/docs/dark-mode/astro.mdx?collection=docs"
+import * as __fd_glob_29 from "../content/docs/dark-mode/index.mdx?collection=docs"
+import * as __fd_glob_30 from "../content/docs/dark-mode/next.mdx?collection=docs"
+import * as __fd_glob_31 from "../content/docs/dark-mode/remix.mdx?collection=docs"
+import * as __fd_glob_32 from "../content/docs/dark-mode/vite.mdx?collection=docs"
+import * as __fd_glob_5 from "../content/docs/figma.mdx?collection=docs"
+import * as __fd_glob_25 from "../content/docs/frameworks/index.mdx?collection=docs"
+import * as __fd_glob_26 from "../content/docs/frameworks/react.mdx?collection=docs"
+import * as __fd_glob_27 from "../content/docs/frameworks/vue.mdx?collection=docs"
+import * as __fd_glob_33 from "../content/docs/guides/page-builder.mdx?collection=docs"
+import * as __fd_glob_34 from "../content/docs/guides/visual-workflows.mdx?collection=docs"
+import * as __fd_glob_35 from "../content/docs/hanzo-react/getting-started.mdx?collection=docs"
+import * as __fd_glob_36 from "../content/docs/hanzo-react/hooks.mdx?collection=docs"
+import * as __fd_glob_6 from "../content/docs/index.mdx?collection=docs"
+import * as __fd_glob_37 from "../content/docs/installation/astro.mdx?collection=docs"
+import * as __fd_glob_38 from "../content/docs/installation/gatsby.mdx?collection=docs"
+import * as __fd_glob_39 from "../content/docs/installation/index.mdx?collection=docs"
+import * as __fd_glob_40 from "../content/docs/installation/laravel.mdx?collection=docs"
+import * as __fd_glob_41 from "../content/docs/installation/manual.mdx?collection=docs"
+import * as __fd_glob_42 from "../content/docs/installation/next.mdx?collection=docs"
+import * as __fd_glob_43 from "../content/docs/installation/remix.mdx?collection=docs"
+import * as __fd_glob_44 from "../content/docs/installation/vite.mdx?collection=docs"
+import * as __fd_glob_7 from "../content/docs/mcp.mdx?collection=docs"
+import * as __fd_glob_45 from "../content/docs/packages/index.mdx?collection=docs"
+import * as __fd_glob_186 from "../content/docs/testing/index.mdx?collection=docs"
+import * as __fd_glob_8 from "../content/docs/theming.mdx?collection=docs"
+import * as __fd_glob_185 from "../content/docs/white-label/index.mdx?collection=docs"
+import type * as Config from "../source.config"
+
+const create = server<
+  typeof Config,
+  import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
+    DocData: {}
+  }
+>({ doc: { passthroughs: ["extractedReferences"] } })
+
+export const docs = await create.docs(
+  "docs",
+  "content/docs",
+  {},
+  {
+    "about.mdx": __fd_glob_0,
+    "changelog.mdx": __fd_glob_1,
+    "cli.mdx": __fd_glob_2,
+    "components-json.mdx": __fd_glob_3,
+    "components.mdx": __fd_glob_4,
+    "figma.mdx": __fd_glob_5,
+    "index.mdx": __fd_glob_6,
+    "mcp.mdx": __fd_glob_7,
+    "theming.mdx": __fd_glob_8,
+    "ai/actions.mdx": __fd_glob_9,
+    "ai/agents.mdx": __fd_glob_10,
+    "ai/assistant.mdx": __fd_glob_11,
+    "ai/chat.mdx": __fd_glob_12,
+    "ai/code.mdx": __fd_glob_13,
+    "ai/index.mdx": __fd_glob_14,
+    "ai/models.mdx": __fd_glob_15,
+    "ai/playground.mdx": __fd_glob_16,
+    "ai/tools.mdx": __fd_glob_17,
+    "ai/vision.mdx": __fd_glob_18,
+    "ai/voice-settings.mdx": __fd_glob_19,
+    "ai/voice.mdx": __fd_glob_20,
+    "block-examples/billing.mdx": __fd_glob_21,
+    "block-examples/compose-spec.mdx": __fd_glob_22,
+    "block-examples/newsletter.mdx": __fd_glob_23,
+    "block-examples/pricing.mdx": __fd_glob_24,
+    "frameworks/index.mdx": __fd_glob_25,
+    "frameworks/react.mdx": __fd_glob_26,
+    "frameworks/vue.mdx": __fd_glob_27,
+    "dark-mode/astro.mdx": __fd_glob_28,
+    "dark-mode/index.mdx": __fd_glob_29,
+    "dark-mode/next.mdx": __fd_glob_30,
+    "dark-mode/remix.mdx": __fd_glob_31,
+    "dark-mode/vite.mdx": __fd_glob_32,
+    "guides/page-builder.mdx": __fd_glob_33,
+    "guides/visual-workflows.mdx": __fd_glob_34,
+    "hanzo-react/getting-started.mdx": __fd_glob_35,
+    "hanzo-react/hooks.mdx": __fd_glob_36,
+    "installation/astro.mdx": __fd_glob_37,
+    "installation/gatsby.mdx": __fd_glob_38,
+    "installation/index.mdx": __fd_glob_39,
+    "installation/laravel.mdx": __fd_glob_40,
+    "installation/manual.mdx": __fd_glob_41,
+    "installation/next.mdx": __fd_glob_42,
+    "installation/remix.mdx": __fd_glob_43,
+    "installation/vite.mdx": __fd_glob_44,
+    "packages/index.mdx": __fd_glob_45,
+    "components/3d-card.mdx": __fd_glob_46,
+    "components/3d-marquee.mdx": __fd_glob_47,
+    "components/3d-pin.mdx": __fd_glob_48,
+    "components/accordion.mdx": __fd_glob_49,
+    "components/advanced-navigation-bar.mdx": __fd_glob_50,
+    "components/ai-model-selector-navigation-bar.mdx": __fd_glob_51,
+    "components/alert-dialog.mdx": __fd_glob_52,
+    "components/alert.mdx": __fd_glob_53,
+    "components/android.mdx": __fd_glob_54,
+    "components/animated-beam.mdx": __fd_glob_55,
+    "components/animated-cursor.mdx": __fd_glob_56,
+    "components/animated-testimonials.mdx": __fd_glob_57,
+    "components/animated-tooltip.mdx": __fd_glob_58,
+    "components/animation-components.mdx": __fd_glob_59,
+    "components/announcement.mdx": __fd_glob_60,
+    "components/app-switcher-navigation-bar.mdx": __fd_glob_61,
+    "components/apple-cards-carousel.mdx": __fd_glob_62,
+    "components/apple-hello-effect.mdx": __fd_glob_63,
+    "components/aspect-ratio.mdx": __fd_glob_64,
+    "components/avatar-group.mdx": __fd_glob_65,
+    "components/avatar.mdx": __fd_glob_66,
+    "components/badge.mdx": __fd_glob_67,
+    "components/banner.mdx": __fd_glob_68,
+    "components/breadcrumb-and-filters-navigation-bar.mdx": __fd_glob_69,
+    "components/breadcrumb-navigation-bar.mdx": __fd_glob_70,
+    "components/breadcrumb.mdx": __fd_glob_71,
+    "components/button-group.mdx": __fd_glob_72,
+    "components/button.mdx": __fd_glob_73,
+    "components/calendar.mdx": __fd_glob_74,
+    "components/card.mdx": __fd_glob_75,
+    "components/carousel.mdx": __fd_glob_76,
+    "components/centered-logo-navigation-bar.mdx": __fd_glob_77,
+    "components/checkbox.mdx": __fd_glob_78,
+    "components/choicebox.mdx": __fd_glob_79,
+    "components/code-block.mdx": __fd_glob_80,
+    "components/code-editor.mdx": __fd_glob_81,
+    "components/code-tabs.mdx": __fd_glob_82,
+    "components/collaboration-navigation-bar.mdx": __fd_glob_83,
+    "components/collapsible.mdx": __fd_glob_84,
+    "components/color-picker.mdx": __fd_glob_85,
+    "components/combobox.mdx": __fd_glob_86,
+    "components/command.mdx": __fd_glob_87,
+    "components/communication-navigation-bar.mdx": __fd_glob_88,
+    "components/comparison.mdx": __fd_glob_89,
+    "components/context-menu.mdx": __fd_glob_90,
+    "components/context-switcher-navigation-bar.mdx": __fd_glob_91,
+    "components/credit-card.mdx": __fd_glob_92,
+    "components/cursor.mdx": __fd_glob_93,
+    "components/dashboard-navigation-bar.mdx": __fd_glob_94,
+    "components/data-table.mdx": __fd_glob_95,
+    "components/date-picker.mdx": __fd_glob_96,
+    "components/desktop-hooks.mdx": __fd_glob_97,
+    "components/desktop-spotlight.mdx": __fd_glob_98,
+    "components/desktop-window.mdx": __fd_glob_99,
+    "components/desktop.mdx": __fd_glob_100,
+    "components/dialog-stack.mdx": __fd_glob_101,
+    "components/dialog.mdx": __fd_glob_102,
+    "components/dock.mdx": __fd_glob_103,
+    "components/drawer.mdx": __fd_glob_104,
+    "components/dropdown-menu.mdx": __fd_glob_105,
+    "components/dropzone.mdx": __fd_glob_106,
+    "components/e-commerce-navigation-bar.mdx": __fd_glob_107,
+    "components/editor.mdx": __fd_glob_108,
+    "components/empty.mdx": __fd_glob_109,
+    "components/field.mdx": __fd_glob_110,
+    "components/form.mdx": __fd_glob_111,
+    "components/gantt.mdx": __fd_glob_112,
+    "components/glimpse.mdx": __fd_glob_113,
+    "components/grid-pattern.mdx": __fd_glob_114,
+    "components/hover-card.mdx": __fd_glob_115,
+    "components/icon-navigation-bar.mdx": __fd_glob_116,
+    "components/image-crop.mdx": __fd_glob_117,
+    "components/image-zoom.mdx": __fd_glob_118,
+    "components/index.mdx": __fd_glob_119,
+    "components/input-group.mdx": __fd_glob_120,
+    "components/input-otp.mdx": __fd_glob_121,
+    "components/input.mdx": __fd_glob_122,
+    "components/interactive-grid-pattern.mdx": __fd_glob_123,
+    "components/iphone-15-pro.mdx": __fd_glob_124,
+    "components/item.mdx": __fd_glob_125,
+    "components/kanban.mdx": __fd_glob_126,
+    "components/kbd.mdx": __fd_glob_127,
+    "components/label.mdx": __fd_glob_128,
+    "components/limelight-nav.mdx": __fd_glob_129,
+    "components/list.mdx": __fd_glob_130,
+    "components/macos-dock.mdx": __fd_glob_131,
+    "components/magnetic.mdx": __fd_glob_132,
+    "components/marquee.mdx": __fd_glob_133,
+    "components/menu-dock.mdx": __fd_glob_134,
+    "components/menubar.mdx": __fd_glob_135,
+    "components/message-dock.mdx": __fd_glob_136,
+    "components/mini-calendar.mdx": __fd_glob_137,
+    "components/minimal-tiptap.mdx": __fd_glob_138,
+    "components/motion-highlight.mdx": __fd_glob_139,
+    "components/navigation-menu.mdx": __fd_glob_140,
+    "components/pagination.mdx": __fd_glob_141,
+    "components/particles-background.mdx": __fd_glob_142,
+    "components/particles.mdx": __fd_glob_143,
+    "components/pill.mdx": __fd_glob_144,
+    "components/pin-list.mdx": __fd_glob_145,
+    "components/pixel-image.mdx": __fd_glob_146,
+    "components/popover.mdx": __fd_glob_147,
+    "components/progress.mdx": __fd_glob_148,
+    "components/qr-code.mdx": __fd_glob_149,
+    "components/radio-group.mdx": __fd_glob_150,
+    "components/relative-time.mdx": __fd_glob_151,
+    "components/resizable.mdx": __fd_glob_152,
+    "components/safari.mdx": __fd_glob_153,
+    "components/sandbox.mdx": __fd_glob_154,
+    "components/scroll-area.mdx": __fd_glob_155,
+    "components/search-and-toggle-navigation-bar.mdx": __fd_glob_156,
+    "components/select.mdx": __fd_glob_157,
+    "components/separator.mdx": __fd_glob_158,
+    "components/sheet.mdx": __fd_glob_159,
+    "components/simple-navigation-bar.mdx": __fd_glob_160,
+    "components/skeleton.mdx": __fd_glob_161,
+    "components/slider.mdx": __fd_glob_162,
+    "components/snippet.mdx": __fd_glob_163,
+    "components/sonner.mdx": __fd_glob_164,
+    "components/spinner.mdx": __fd_glob_165,
+    "components/stars-scrolling-wheel.mdx": __fd_glob_166,
+    "components/status-dashboard-navigation-bar.mdx": __fd_glob_167,
+    "components/status.mdx": __fd_glob_168,
+    "components/switch.mdx": __fd_glob_169,
+    "components/table.mdx": __fd_glob_170,
+    "components/tabs.mdx": __fd_glob_171,
+    "components/tags.mdx": __fd_glob_172,
+    "components/team-switcher-navigation-bar.mdx": __fd_glob_173,
+    "components/terminal.mdx": __fd_glob_174,
+    "components/textarea.mdx": __fd_glob_175,
+    "components/timeline.mdx": __fd_glob_176,
+    "components/toast.mdx": __fd_glob_177,
+    "components/toggle-group.mdx": __fd_glob_178,
+    "components/toggle.mdx": __fd_glob_179,
+    "components/tooltip.mdx": __fd_glob_180,
+    "components/two-tier-navigation-bar.mdx": __fd_glob_181,
+    "components/typography.mdx": __fd_glob_182,
+    "components/underline-navigation-bar.mdx": __fd_glob_183,
+    "components/video-player.mdx": __fd_glob_184,
+    "white-label/index.mdx": __fd_glob_185,
+    "testing/index.mdx": __fd_glob_186,
+  }
+)

app/.docs/source.config.mjs

@@ -0,0 +1,40 @@
+// source.config.ts
+import {
+  defineConfig,
+  defineDocs,
+  frontmatterSchema
+} from "@hanzo/docs-mdx/config";
+import rehypePrettyCode from "rehype-pretty-code";
+import { z } from "zod";
+var source_config_default = defineConfig({
+  mdxOptions: {
+    rehypePlugins: [
+      [
+        rehypePrettyCode,
+        {
+          theme: {
+            dark: "github-dark",
+            light: "github-light-default"
+          },
+          keepBackground: false
+        }
+      ]
+    ]
+  }
+});
+var docs = defineDocs({
+  dir: "content/docs",
+  docs: {
+    schema: frontmatterSchema.extend({
+      links: z.object({
+        doc: z.string().optional(),
+        api: z.string().optional()
+      }).optional(),
+      toc: z.boolean().optional()
+    })
+  }
+});
+export {
+  source_config_default as default,
+  docs
+};

app/.eslintignore

@@ -1,12 +0,0 @@
-node_modules/
-.next/
-out/
-build/
-dist/
-next-env.d.ts
-__registry__/
-.source/
-*.config.js
-*.config.mjs
-.turbo/
-coverage/

app/.prettierignore

@@ -4,3 +4,5 @@ node_modules
 build
 .contentlayer
 apps/web/pages/api/registry.json
+**/fixtures
+deprecated

app/CLAUDE.md

@@ -1,361 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Repository Overview
-
-This is the **Hanzo UI App** - the documentation and showcase site for the @hanzo/ui component library. It's built with Next.js 15.3.1, React 19, and Fumadocs for documentation. The site serves as both documentation and a living demo of 149+ components.
-
-**Key URLs:**
-- Production: https://ui.hanzo.ai
-- Local Dev: http://localhost:3003
-- Repo: github.com/hanzoai/ui (monorepo root is parent directory)
-
-## Essential Commands
-
-### Development
-```bash
-# Start dev server (port 3003)
-pnpm dev
-
-# Build site (includes registry build + Next.js build)
-pnpm build
-
-# Build registry only (generates JSON files for CLI)
-pnpm registry:build
-
-# Start production server (port 3001)
-pnpm start
-```
-
-### Code Quality
-```bash
-# Lint
-pnpm lint
-pnpm lint:fix
-
-# Type check
-pnpm typecheck
-
-# Format
-pnpm format:write
-pnpm format:check
-```
-
-### Registry Management
-```bash
-# Validate external registries
-pnpm validate:registries
-
-# Capture screenshots (for component previews)
-pnpm registry:capture
-```
-
-## Architecture Overview
-
-### Three-Layer System
-
-**1. Components** (`/registry/{default,new-york}/ui/`)
-- Single UI elements (Button, Input, Card, Dialog)
-- Reusable primitives that compose into larger UIs
-- Two theme variants: default and new-york
-- 149 components total (115 implemented, 34 stubs)
-
-**2. Examples** (`/registry/{default,new-york}/example/`)
-- Usage demonstrations for each component
-- Shows component in isolation with typical props
-- Used in documentation via `<ComponentPreview name="..." />`
-
-**3. Blocks** (`/registry/{default,new-york}/blocks/`)
-- Viewport-sized sections (Dashboard, Hero, Login, Pricing)
-- Compose multiple components into full-page layouts
-- Production-ready templates users can copy
-- 24+ blocks including dashboard-01, sidebar-07, login-03
-
-### Registry Build System
-
-The registry is the **core of the component distribution system**:
-
-1. **Source Files**: Components in `/registry/{style}/ui/`
-2. **Build Script**: `scripts/build-registry.mts` reads components and generates:
-   - JSON metadata files in `/public/registry/styles/{style}/{name}.json`
-   - Includes dependencies, files, type info
-3. **CLI Consumption**: The `@hanzo/ui` CLI reads these JSON files to install components
-4. **Documentation**: MDX files in `/content/docs/components/` reference the registry
-
-**CRITICAL**: Always run `pnpm registry:build` before building the app if you modify components.
-
-### Documentation System
-
-- **Framework**: Fumadocs (replaced Contentlayer in v4 migration)
-- **MDX Files**: `/content/docs/` contains all documentation
-- **Components in MDX**: Special components available in MDX via `mdx-components.tsx`:
-  - `<ComponentPreview name="..." />` - Live component demo
-  - `<ComponentSource name="..." />` - Component source code
-  - `<CodeTabs>` - Installation method tabs (CLI/Manual)
-  - `<Steps>` - Step-by-step instructions
-- **Navigation**: Configured in `/config/docs.ts`
-
-### Page Builder (`/builder`)
-
-New drag-drop visual builder for assembling pages from blocks:
-- **Left Sidebar**: Filterable block library
-- **Canvas**: Drag-drop assembly area with reordering
-- **Export**: Generates React TSX code
-- **Tech**: @dnd-kit for drag-drop, SortableContext for reordering
-
-Access at `/builder` route.
-
-## Key File Locations
-
-### Component Development
-```
-registry/default/ui/{component}.tsx          # Component implementation
-registry/default/example/{component}-demo.tsx # Usage example
-content/docs/components/{component}.mdx       # Documentation
-```
-
-### Configuration
-```
-config/site.ts        # Site metadata, links
-config/docs.ts        # Documentation navigation structure
-tailwind.config.cjs   # Tailwind configuration
-components.json       # hanzo CLI configuration
-```
-
-### Build & Scripts
-```
-scripts/build-registry.mts      # Registry JSON generator
-scripts/validate-registries.mts # External registry validator
-__registry__/index.tsx          # Auto-generated registry index
-```
-
-## Component Creation Workflow
-
-### 1. Create Component Files
-```bash
-# Create in both variants
-touch registry/default/ui/my-component.tsx
-touch registry/new-york/ui/my-component.tsx
-
-# Create demo
-touch registry/default/example/my-component-demo.tsx
-```
-
-### 2. Implement Component
-Follow the standard pattern:
-```tsx
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: "default" | "outline"
-}
-
-const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>(
-  ({ className, variant = "default", ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("base-classes", className)}
-        {...props}
-      />
-    )
-  }
-)
-MyComponent.displayName = "MyComponent"
-
-export { MyComponent }
-```
-
-### 3. Create Documentation
-```bash
-# Create MDX file
-touch content/docs/components/my-component.mdx
-```
-
-Include:
-- `<ComponentPreview name="my-component-demo" />`
-- Installation instructions with `<CodeTabs>`
-- Usage examples
-- API table with props
-
-### 4. Add to Navigation
-Edit `config/docs.ts` to add component to sidebar navigation.
-
-### 5. Build Registry
-```bash
-pnpm registry:build
-```
-
-### 6. Test
-```bash
-pnpm dev
-# Visit http://localhost:3003/docs/components/my-component
-```
-
-## Registry Architecture
-
-The registry system enables the `npx hanzo-ui@latest add {component}` CLI workflow:
-
-**Registry Entry Structure:**
-```json
-{
-  "name": "button",
-  "type": "components:ui",
-  "files": ["registry/default/ui/button.tsx"],
-  "dependencies": ["class-variance-authority"],
-  "registryDependencies": ["utils"]
-}
-```
-
-**External Registries** (`registries.json`):
-- 35+ external component sources
-- Examples: @aceternity, @magicui, @hanzo-editor
-- Validated via `pnpm validate:registries`
-
-## Theme System
-
-**CSS Variables** (`/styles/globals.css`):
-- Base theme colors defined in HSL
-- Primary color: `210 100% 50%` (electric blue)
-- Dark mode via `.dark` class
-- All components use `hsl(var(--primary))` pattern
-
-**Two Visual Styles:**
-- **default**: More rounded, softer shadows
-- **new-york**: Flatter, sharper, minimal
-
-Both styles share the same component API, only visual styling differs.
-
-## Build System
-
-### Production Build Process
-1. `pnpm registry:build` - Generate registry JSON files
-2. `next build` - Build Next.js app
-3. Static export to `/out` directory for GitHub Pages
-
-### Local Development
-- Uses Turbopack for fast HMR
-- Port 3003 (configurable)
-- MDX hot reload via Fumadocs
-
-## Component vs Block Distinction
-
-**Components** (149 total):
-- Single-purpose UI elements
-- Examples: Button, Input, Card, Dialog, Dropdown
-- Used as building blocks
-- Installed individually via CLI
-
-**Blocks** (24+ available):
-- Full viewport sections
-- Examples: dashboard-01 (admin layout), login-03 (auth page), sidebar-07
-- Compose multiple components
-- Ready-to-use page sections
-- Users copy entire blocks, not install via CLI
-
-## Import Patterns
-
-Components can be imported three ways:
-
-**1. Package Import** (if using @hanzo/ui package):
-```tsx
-import { Button, Card } from "@hanzo/ui"
-```
-
-**2. Registry Import** (in documentation/examples):
-```tsx
-import { Button } from "@/registry/default/ui/button"
-```
-
-**3. Local Import** (after installing via CLI):
-```tsx
-import { Button } from "@/components/ui/button"
-```
-
-The registry uses `@/registry/{style}/` which gets rewritten to `@/components/` during installation.
-
-## MDX Component System
-
-Components available in all MDX files:
-
-- `<ComponentPreview name="button-demo" />` - Live demo
-- `<ComponentSource name="button" />` - Source code display
-- `<ComponentExample>` - Example wrapper
-- `<CodeTabs>` - Installation tabs (requires useConfig hook)
-- `<Steps>` / `<Step>` - Step-by-step instructions
-- `<Tabs>` / `<TabsList>` / `<TabsTrigger>` / `<TabsContent>` - Content tabs
-- `<Callout>` - Info/warning callouts
-
-## Testing
-
-No formal test suite currently. Testing is done via:
-1. Local dev server visual testing
-2. Build process catches type errors
-3. Registry validation ensures component metadata is correct
-
-## Deployment
-
-**GitHub Pages** (automatic):
-- Workflow: `.github/workflows/deploy-gh-pages.yml`
-- Triggers on push to main
-- Builds app + pkg/ui package
-- Deploys to ui.hanzo.ai
-- Requires: npm-run-all, del-cli for dependency builds
-
-**Important**: The GitHub Actions workflow builds the `pkg/ui` package first, then the app, to ensure registry has latest component code.
-
-## Common Patterns
-
-### Stub Components
-Components marked for future implementation:
-```tsx
-export default function Component() {
-  return (
-    <div className="flex items-center justify-center p-8">
-      <p className="text-muted-foreground">Component coming soon</p>
-    </div>
-  )
-}
-```
-
-Currently 34 stubs remaining (documented but not implemented).
-
-### Component Dependencies
-- Radix UI primitives for accessible base components
-- `cn()` utility from `@/lib/utils` for className merging
-- `cva` (class-variance-authority) for variant management
-- Lucide React for icons
-- Framer Motion for animations (some components)
-
-### Registry Dependencies
-Components can depend on other registry components:
-```json
-{
-  "registryDependencies": ["button", "dialog", "utils"]
-}
-```
-
-These are auto-installed when user adds the component.
-
-## Recent Architectural Changes (2025-10-05)
-
-1. **Migrated from Contentlayer to Fumadocs** for MDX processing
-2. **Upgraded to Next.js 15.3.1** with Turbopack
-3. **React 19** with new JSX transform
-4. **Added @dnd-kit** for page builder drag-drop
-5. **Synced with hanzo/ui v3.4.0** (7 new components: button-group, empty, field, input-group, item, kbd, spinner)
-6. **Electric blue primary color** (210 100% 50%)
-7. **Page builder feature** at `/builder` route
-
-## Notes for AI Assistants
-
-- **Registry must rebuild** after component changes: `pnpm registry:build`
-- **Two theme variants** must be kept in sync: default and new-york
-- **Import paths** in components use `@/registry/{style}/` which becomes `@/components/` after CLI install
-- **MDX components** are defined in `mdx-components.tsx`, not auto-imported
-- **Blocks are different** from components - they're full-page sections, not installable via CLI
-- **GitHub Pages deployment** requires building pkg/ui package first (workflow handles this)

app/IDENTITY_README.md

@@ -0,0 +1,254 @@
+# Hanzo Identity Registration System
+
+A decentralized identity registration system for Hanzo, Lux, and Zoo networks.
+
+## Overview
+
+The identity system allows users to claim unique identities across multiple blockchain networks with a tiered pricing structure based on name length.
+
+## Features
+
+- **Multi-Network Support**: Register identities on Hanzo, Lux, and Zoo (mainnet and testnet)
+- **Tiered Pricing**: 
+  - Single character (1): 100,000 AI
+  - Two characters (2): 10,000 AI
+  - Three characters (3): 1,000 AI
+  - Four characters (4): 100 AI
+  - Five or more (5+): 10 AI
+- **Referral System**: 50% discount with valid referrer
+- **Web3 Wallet Integration**: RainbowKit for seamless wallet connection
+- **Real-time Validation**: Check name availability and format validation
+- **Responsive UI**: Modern, accessible interface built with Radix UI
+
+## Project Structure
+
+```
+/Users/z/work/hanzo/ui/app/
+├── app/(app)/identity/page.tsx      # Identity registration page
+├── components/web3-provider.tsx      # Web3/Wagmi provider wrapper
+├── lib/
+│   ├── wagmi.ts                      # Wagmi config with custom networks
+│   └── contracts.ts                  # Contract ABIs and addresses
+└── .env.example                      # Environment variable template
+```
+
+## Smart Contracts
+
+Located in `/Users/z/work/lux/standard/src/`:
+
+- **HanzoRegistry.sol**: Core identity registration contract
+  - Manages identity claims
+  - Handles staking requirements
+  - Supports delegation and referrals
+  - Implements reward distribution
+
+- **AIToken.sol**: ERC20 governance token
+  - Staking and vesting functionality
+  - Voting power for governance
+  - Deflationary burn mechanism
+
+- **AIFaucet.sol**: Token distribution faucet
+  - 100 AI tokens per authenticated user
+  - 24-hour cooldown period
+  - Daily limits and rate limiting
+
+## Setup
+
+### 1. Install Dependencies
+
+```bash
+cd /Users/z/work/hanzo/ui/app
+pnpm install
+```
+
+### 2. Configure Environment
+
+Copy `.env.example` to `.env.local`:
+
+```bash
+cp .env.example .env.local
+```
+
+Get a WalletConnect Project ID from https://cloud.walletconnect.com/ and update:
+
+```
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here
+```
+
+### 3. Deploy Contracts
+
+Deploy the smart contracts to your target networks:
+
+```bash
+cd /Users/z/work/lux/standard
+
+# For Hanzo Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://rpc.hanzo.ai \
+  --broadcast
+
+# For Hanzo Testnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://testnet-rpc.hanzo.ai \
+  --broadcast
+
+# For Lux Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://api.lux.network/ext/bc/C/rpc \
+  --broadcast
+
+# For Zoo Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://rpc.zoo.network \
+  --broadcast
+```
+
+### 4. Update Contract Addresses
+
+After deployment, update the contract addresses in `lib/contracts.ts`:
+
+```typescript
+export const CONTRACT_ADDRESSES: Record<number, { registry: `0x${string}`; token: `0x${string}` }> = {
+  36963: { // Hanzo Mainnet
+    registry: '0xYourRegistryAddress',
+    token: '0xYourTokenAddress',
+  },
+  // ... update other networks
+}
+```
+
+### 5. Run Development Server
+
+```bash
+pnpm dev
+```
+
+Visit `http://localhost:3333/identity` to access the identity registration page.
+
+## Networks
+
+| Network | Chain ID | RPC URL | Explorer |
+|---------|----------|---------|----------|
+| Hanzo Mainnet | 36963 | https://rpc.hanzo.ai | https://explorer.hanzo.ai |
+| Hanzo Testnet | 36962 | https://testnet-rpc.hanzo.ai | https://testnet-explorer.hanzo.ai |
+| Lux Mainnet | 96369 | https://api.lux.network/ext/bc/C/rpc | https://explorer.lux.network |
+| Lux Testnet | 96368 | https://testnet-api.lux.network/ext/bc/C/rpc | https://testnet-explorer.lux.network |
+| Zoo Mainnet | 200200 | https://rpc.zoo.network | https://explorer.zoo.network |
+| Zoo Testnet | 200201 | https://testnet-rpc.zoo.network | https://testnet-explorer.zoo.network |
+
+## Identity Format
+
+Identities follow the format: `@username.network/profile/type/name`
+
+- **Username**: Letters, numbers, dots, and underscores
+- **Network**: Automatically determined by connected chain
+  - `.hanzo` or `.ai` for Hanzo mainnet
+  - `.hanzo-testnet` for Hanzo testnet
+  - `.lux` for Lux mainnet
+  - `.lux-testnet` for Lux testnet
+  - `.zoo` for Zoo mainnet
+  - `.zoo-testnet` for Zoo testnet
+- **Profile**: Optional profile path (default: `/profile`)
+
+## Faucet Integration
+
+Users can get AI tokens from the faucet to register identities:
+
+- **Location**: `/faucet` page
+- **Amount**: 100 AI tokens per authenticated user
+- **Cooldown**: 24 hours between drips
+- **Networks**: Hanzo mainnet and testnet only
+
+Configuration in `/Users/z/work/hanzo/faucet/config.json`
+
+## Tech Stack
+
+- **Framework**: Next.js 16 (App Router)
+- **Styling**: Tailwind CSS 4
+- **UI Components**: Radix UI primitives
+- **Web3**: Wagmi, Viem, RainbowKit
+- **State Management**: TanStack Query
+- **Smart Contracts**: Solidity, Foundry
+- **Networks**: Hanzo, Lux, Zoo (mainnet + testnet)
+
+## Development
+
+### Testing Locally
+
+1. Use a testnet for development (Hanzo Testnet recommended)
+2. Connect your wallet to the testnet
+3. Get test AI tokens from the faucet
+4. Test identity registration flow
+
+### Building for Production
+
+```bash
+pnpm build
+```
+
+### Type Checking
+
+```bash
+pnpm typecheck
+```
+
+### Linting
+
+```bash
+pnpm lint
+pnpm lint:fix
+```
+
+## Contract Deployment Scripts
+
+Located in `/Users/z/work/lux/standard/script/`:
+
+- `DeployIdentitySystem.s.sol`: Deploys complete identity system
+  - Deploys AIToken with treasury allocation
+  - Deploys HanzoNft for identity binding
+  - Deploys HanzoRegistry with UUPS proxy
+  - Deploys AIFaucet with 100 AI drip amount
+  - Configures initial permissions and transfers
+
+## Security Considerations
+
+- All contracts use OpenZeppelin's upgradeable patterns
+- Registry uses UUPS proxy for upgradeability
+- Access control with Ownable2Step for safe ownership transfer
+- Pausable functionality for emergency stops
+- Rate limiting on faucet to prevent abuse
+- Input validation for identity names
+- Proper allowance checks before token transfers
+
+## Troubleshooting
+
+### "Insufficient balance" error
+- Get AI tokens from the faucet at `/faucet`
+- Ensure you're connected to the correct network
+
+### "Name already taken" error
+- Try a different identity name
+- Check if the name is available on your current network
+
+### "Invalid format" error
+- Use only letters, numbers, dots, and underscores
+- No spaces or special characters allowed
+
+### Contract not deployed
+- Ensure contracts are deployed to your connected network
+- Update contract addresses in `lib/contracts.ts`
+- Check RPC URL is correct for your network
+
+## Contributing
+
+When adding new features:
+
+1. Update contracts in `/Users/z/work/lux/standard/src/`
+2. Update ABIs in `lib/contracts.ts`
+3. Update UI in `app/(app)/identity/page.tsx`
+4. Add tests for new functionality
+5. Update this README with new features
+
+## License
+
+MIT

app/LLM.md

@@ -0,0 +1,551 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Repository Overview
+
+This is the **Hanzo UI App** - the documentation and showcase site for the @hanzo/ui component library. It's built with Next.js 15.3.1, React 19, and Fumadocs for documentation. The site serves as both documentation and a living demo of 149+ components.
+
+**Key URLs:**
+- Production: https://ui.hanzo.ai
+- Local Dev: http://localhost:3003
+- Repo: github.com/hanzoai/ui (monorepo root is parent directory)
+
+## Essential Commands
+
+### Development
+```bash
+# Start dev server (port 3003)
+pnpm dev
+
+# Build site (includes registry build + Next.js build)
+pnpm build
+
+# Build registry only (generates JSON files for CLI)
+pnpm registry:build
+
+# Start production server (port 3001)
+pnpm start
+```
+
+### Code Quality
+```bash
+# Lint
+pnpm lint
+pnpm lint:fix
+
+# Type check
+pnpm typecheck
+
+# Format
+pnpm format:write
+pnpm format:check
+```
+
+### Registry Management
+```bash
+# Validate external registries
+pnpm validate:registries
+
+# Capture screenshots (for component previews)
+pnpm registry:capture
+```
+
+## Architecture Overview
+
+### Three-Layer System
+
+**1. Components** (`/registry/{default,new-york}/ui/`)
+- Single UI elements (Button, Input, Card, Dialog)
+- Reusable primitives that compose into larger UIs
+- Two theme variants: default and new-york
+- 149 components total (115 implemented, 34 stubs)
+
+**2. Examples** (`/registry/{default,new-york}/example/`)
+- Usage demonstrations for each component
+- Shows component in isolation with typical props
+- Used in documentation via `<ComponentPreview name="..." />`
+
+**3. Blocks** (`/registry/{default,new-york}/blocks/`)
+- Viewport-sized sections (Dashboard, Hero, Login, Pricing)
+- Compose multiple components into full-page layouts
+- Production-ready templates users can copy
+- 24+ blocks including dashboard-01, sidebar-07, login-03
+
+### Registry Build System
+
+The registry is the **core of the component distribution system**:
+
+1. **Source Files**: Components in `/registry/{style}/ui/`
+2. **Build Script**: `scripts/build-registry.mts` reads components and generates:
+   - JSON metadata files in `/public/registry/styles/{style}/{name}.json`
+   - Includes dependencies, files, type info
+3. **CLI Consumption**: The `@hanzo/ui` CLI reads these JSON files to install components
+4. **Documentation**: MDX files in `/content/docs/components/` reference the registry
+
+**CRITICAL**: Always run `pnpm registry:build` before building the app if you modify components.
+
+### Documentation System
+
+- **Framework**: Fumadocs (replaced Contentlayer in v4 migration)
+- **MDX Files**: `/content/docs/` contains all documentation
+- **Components in MDX**: Special components available in MDX via `mdx-components.tsx`:
+  - `<ComponentPreview name="..." />` - Live component demo
+  - `<ComponentSource name="..." />` - Component source code
+  - `<CodeTabs>` - Installation method tabs (CLI/Manual)
+  - `<Steps>` - Step-by-step instructions
+- **Navigation**: Configured in `/config/docs.ts`
+
+### Page Builder (`/builder`)
+
+New drag-drop visual builder for assembling pages from blocks:
+- **Left Sidebar**: Filterable block library
+- **Canvas**: Drag-drop assembly area with reordering
+- **Export**: Generates React TSX code
+- **Tech**: @dnd-kit for drag-drop, SortableContext for reordering
+
+Access at `/builder` route.
+
+## Key File Locations
+
+### Component Development
+```
+registry/default/ui/{component}.tsx          # Component implementation
+registry/default/example/{component}-demo.tsx # Usage example
+content/docs/components/{component}.mdx       # Documentation
+```
+
+### Configuration
+```
+config/site.ts        # Site metadata, links
+config/docs.ts        # Documentation navigation structure
+tailwind.config.cjs   # Tailwind configuration
+components.json       # hanzo CLI configuration
+```
+
+### Build & Scripts
+```
+scripts/build-registry.mts      # Registry JSON generator
+scripts/validate-registries.mts # External registry validator
+__registry__/index.tsx          # Auto-generated registry index
+```
+
+## Component Creation Workflow
+
+### 1. Create Component Files
+```bash
+# Create in both variants
+touch registry/default/ui/my-component.tsx
+touch registry/new-york/ui/my-component.tsx
+
+# Create demo
+touch registry/default/example/my-component-demo.tsx
+```
+
+### 2. Implement Component
+Follow the standard pattern:
+```tsx
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "outline"
+}
+
+const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>(
+  ({ className, variant = "default", ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("base-classes", className)}
+        {...props}
+      />
+    )
+  }
+)
+MyComponent.displayName = "MyComponent"
+
+export { MyComponent }
+```
+
+### 3. Create Documentation
+```bash
+# Create MDX file
+touch content/docs/components/my-component.mdx
+```
+
+Include:
+- `<ComponentPreview name="my-component-demo" />`
+- Installation instructions with `<CodeTabs>`
+- Usage examples
+- API table with props
+
+### 4. Add to Navigation
+Edit `config/docs.ts` to add component to sidebar navigation.
+
+### 5. Build Registry
+```bash
+pnpm registry:build
+```
+
+### 6. Test
+```bash
+pnpm dev
+# Visit http://localhost:3003/docs/components/my-component
+```
+
+## Registry Architecture
+
+The registry system enables the `npx hanzo-ui@latest add {component}` CLI workflow:
+
+**Registry Entry Structure:**
+```json
+{
+  "name": "button",
+  "type": "components:ui",
+  "files": ["registry/default/ui/button.tsx"],
+  "dependencies": ["class-variance-authority"],
+  "registryDependencies": ["utils"]
+}
+```
+
+**External Registries** (`registries.json`):
+- 35+ external component sources
+- Examples: @aceternity, @magicui, @hanzo-editor
+- Validated via `pnpm validate:registries`
+
+## Theme System
+
+**CSS Variables** (`/styles/globals.css`):
+- Base theme colors defined in HSL
+- Primary color: `210 100% 50%` (electric blue)
+- Dark mode via `.dark` class
+- All components use `hsl(var(--primary))` pattern
+
+**Two Visual Styles:**
+- **default**: More rounded, softer shadows
+- **new-york**: Flatter, sharper, minimal
+
+Both styles share the same component API, only visual styling differs.
+
+## Build System
+
+### Production Build Process
+1. `pnpm registry:build` - Generate registry JSON files
+2. `next build` - Build Next.js app
+3. Static export to `/out` directory for GitHub Pages
+
+### Local Development
+- Uses Turbopack for fast HMR
+- Port 3003 (configurable)
+- MDX hot reload via Fumadocs
+
+## Component vs Block Distinction
+
+**Components** (149 total):
+- Single-purpose UI elements
+- Examples: Button, Input, Card, Dialog, Dropdown
+- Used as building blocks
+- Installed individually via CLI
+
+**Blocks** (24+ available):
+- Full viewport sections
+- Examples: dashboard-01 (admin layout), login-03 (auth page), sidebar-07
+- Compose multiple components
+- Ready-to-use page sections
+- Users copy entire blocks, not install via CLI
+
+## Import Patterns
+
+Components can be imported three ways:
+
+**1. Package Import** (if using @hanzo/ui package):
+```tsx
+import { Button, Card } from "@hanzo/ui"
+```
+
+**2. Registry Import** (in documentation/examples):
+```tsx
+import { Button } from "@/registry/default/ui/button"
+```
+
+**3. Local Import** (after installing via CLI):
+```tsx
+import { Button } from "@/components/ui/button"
+```
+
+The registry uses `@/registry/{style}/` which gets rewritten to `@/components/` during installation.
+
+## MDX Component System
+
+Components available in all MDX files:
+
+- `<ComponentPreview name="button-demo" />` - Live demo
+- `<ComponentSource name="button" />` - Source code display
+- `<ComponentExample>` - Example wrapper
+- `<CodeTabs>` - Installation tabs (requires useConfig hook)
+- `<Steps>` / `<Step>` - Step-by-step instructions
+- `<Tabs>` / `<TabsList>` / `<TabsTrigger>` / `<TabsContent>` - Content tabs
+- `<Callout>` - Info/warning callouts
+
+## Testing
+
+No formal test suite currently. Testing is done via:
+1. Local dev server visual testing
+2. Build process catches type errors
+3. Registry validation ensures component metadata is correct
+
+## Deployment
+
+**GitHub Pages** (automatic):
+- Workflow: `.github/workflows/deploy-gh-pages.yml`
+- Triggers on push to main
+- Builds app + pkg/ui package
+- Deploys to ui.hanzo.ai
+- Requires: npm-run-all, del-cli for dependency builds
+
+**Important**: The GitHub Actions workflow builds the `pkg/ui` package first, then the app, to ensure registry has latest component code.
+
+## Common Patterns
+
+### Stub Components
+Components marked for future implementation:
+```tsx
+export default function Component() {
+  return (
+    <div className="flex items-center justify-center p-8">
+      <p className="text-muted-foreground">Component coming soon</p>
+    </div>
+  )
+}
+```
+
+Currently 34 stubs remaining (documented but not implemented).
+
+### Component Dependencies
+- Radix UI primitives for accessible base components
+- `cn()` utility from `@/lib/utils` for className merging
+- `cva` (class-variance-authority) for variant management
+- Lucide React for icons
+- Framer Motion for animations (some components)
+
+### Registry Dependencies
+Components can depend on other registry components:
+```json
+{
+  "registryDependencies": ["button", "dialog", "utils"]
+}
+```
+
+These are auto-installed when user adds the component.
+
+## Recent Architectural Changes (2025-10-05)
+
+1. **Migrated from Contentlayer to Fumadocs** for MDX processing
+2. **Upgraded to Next.js 15.3.1** with Turbopack
+3. **React 19** with new JSX transform
+4. **Added @dnd-kit** for page builder drag-drop
+5. **Synced with hanzo/ui v3.4.0** (7 new components: button-group, empty, field, input-group, item, kbd, spinner)
+6. **Electric blue primary color** (210 100% 50%)
+7. **Page builder feature** at `/builder` route
+
+## Notes for AI Assistants
+
+- **Registry must rebuild** after component changes: `pnpm registry:build`
+- **Two theme variants** must be kept in sync: default and new-york
+- **Import paths** in components use `@/registry/{style}/` which becomes `@/components/` after CLI install
+- **MDX components** are defined in `mdx-components.tsx`, not auto-imported
+- **Blocks are different** from components - they're full-page sections, not installable via CLI
+- **GitHub Pages deployment** requires building pkg/ui package first (workflow handles this)
+
+## LLM API Route (Added 2025-11-05)
+
+The `/llm` API route serves MDX documentation optimized for LLM consumption by replacing `<ComponentPreview>` tags with actual component source code.
+
+### Files Created
+
+**`/lib/llm.ts`**:
+- `processMdxForLLMs(content, style)` - Transforms MDX for LLMs
+- Finds `<ComponentPreview name="..." />` tags in MDX
+- Replaces with actual component source code in markdown code blocks
+- Rewrites import paths from `@/registry/${style}/` to `@/components/`
+- Removes `export default` in favor of named exports
+
+**`/app/(app)/llm/[[...slug]]/route.ts`**:
+- API route handler using Next.js catch-all routing
+- `GET` handler that processes MDX files via `processMdxForLLMs()`
+- Returns Content-Type: `text/markdown; charset=utf-8`
+- Supports static generation via `generateStaticParams()`
+- Uses `revalidate = false` for static export
+
+### Key Adaptations from shadcn/ui
+
+1. **Dynamic Style Support**: Changed from hardcoded `@/registry/new-york-v4/` to dynamic `@/registry/${style}/`
+2. **Multi-Style System**: Works with both "default" and "new-york" themes
+3. **Active Style Detection**: Uses `getActiveStyle()` to determine current theme
+
+### Usage
+
+Access documentation via:
+```bash
+# Get LLM-optimized docs for a component
+curl http://localhost:3003/llm/docs/components/button
+
+# Returns MDX with inline source code instead of component previews
+```
+
+## Deviation Report: shadcn/ui v4 vs Hanzo UI
+
+### Directory Structure Comparison
+
+**Copied from shadcn/ui v4**:
+- ✅ `/blocks` - Block showcase page with filtering and search
+- ✅ `/charts` - Chart component demonstrations  
+- ✅ `/colors` - Tailwind color palette reference
+- ✅ `/docs` - Component documentation
+- ✅ `/examples` - Component usage examples
+- ✅ `/llm` - LLM-optimized API endpoint
+- ✅ `/themes` - Theme customization page
+
+**Hanzo-Specific Features** (not in shadcn):
+- 🆕 `/ai` - AI assistant integration page
+- 🆕 `/builder` - Visual page builder with drag-drop
+- 🆕 `/components` - Component category pages
+- 🆕 `/compose` - Composition editor
+- 🆕 `/health` - System health check
+- 🆕 `/mcp` - Model Context Protocol integration
+- 🆕 `/sink` - Kitchen sink / testing page
+- 🆕 `/theme-generator` - Interactive theme generator
+
+### Key Implementation Differences
+
+#### 1. Path Handling
+- **shadcn**: Hardcoded `@/registry/new-york-v4/` paths
+- **Hanzo**: Dynamic `@/registry/${style}/` supporting multiple themes
+
+#### 2. Style System
+- **shadcn**: Primary style is "new-york-v4"
+- **Hanzo**: Primary style is "default", with "new-york" as alternative
+- **Impact**: All copied files had paths adapted: `new-york-v4` → `default`
+
+#### 3. Branding
+- **shadcn**: GitHub logo, shadcn branding
+- **Hanzo**: Hanzo logo (OpenInHButton), Hanzo branding
+- **Files Modified**: 
+  - `components/open-in-hanzo-button.tsx` → `components/open-in-h-button.tsx`
+  - Hanzo logo (H icon) replaces GitHub logo
+
+#### 4. Registry Structure
+- **shadcn**: `Index[name]` - flat structure
+- **Hanzo**: `Index[style][name]` - nested by style
+- **Impact**: Required updates to registry accessor functions
+
+#### 5. Component Count
+- **shadcn v4**: ~58 core components
+- **Hanzo**: 149 components (115 implemented, 34 stubs)
+- **Unique to Hanzo**: 3D components, AI components, animation components, specialized navigation
+
+### Files Requiring Ongoing Sync
+
+When shadcn/ui v4 updates these, Hanzo should review for updates:
+
+1. **Layout Files**:
+   - `app/(app)/blocks/layout.tsx`
+   - `app/(app)/colors/layout.tsx`
+   - `app/(app)/themes/layout.tsx`
+
+2. **Page Files**:
+   - `app/(app)/blocks/page.tsx`
+   - `app/(app)/colors/page.tsx`  
+   - `app/(app)/themes/page.tsx`
+   - `app/(app)/llm/[[...slug]]/route.ts`
+
+3. **Supporting Components**:
+   - `components/blocks-nav.tsx`
+   - `components/colors-nav.tsx`
+   - `components/theme-customizer.tsx`
+   - `lib/llm.ts`
+
+4. **Registry Functions**:
+   - `lib/registry.ts` - Any changes to registry access patterns
+   - `lib/blocks.ts` - Block metadata handling
+
+### Known Issues Requiring Fixes
+
+Per user feedback: "don't suppress errors just do shit right or cover up things"
+
+**1. getActiveStyle Export Error** ✅ FIXED (2025-11-05):
+- **Was**: Server logs showed "Export getActiveStyle doesn't exist in target module"
+- **Root Cause**: Turbopack had issues with `async function getActiveStyle()` in `force-static` pages. The async nature conflicted with Turbopack's static analysis in force-static mode.
+- **Fix**: Made `getActiveStyle()` synchronous by removing `async` keyword
+  - Updated `registry/styles.ts` line 14: removed `async` from function declaration
+  - Updated `app/(app)/blocks/page.tsx`: removed `async` from function and `await` from call
+  - Updated `app/(app)/llm/[[...slug]]/route.ts`: split Promise.all, called getActiveStyle() synchronously
+- **Result**: ✅ NO MORE EXPORT ERRORS - Pages load cleanly with HTTP 200, no server errors
+- **Note**: Function doesn't actually need to be async since it just returns styles[0]
+
+**2. Client Component Boundary Warnings** ⚠️ LOW PRIORITY:
+- **Symptom**: "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with 'use server'"
+- **Locations**: Multiple components in blocks, themes, colors pages (7 warnings with digest `638247047`)
+- **Status**: WARNINGS ONLY - Not breaking, pages render correctly with HTTP 200
+- **Impact**: No user-facing issues, functionality fully intact
+- **Note**: These warnings also appear in shadcn/ui v4, suggesting they may be framework-level issues
+- **Action**: Can investigate if desired, but not critical since pages work perfectly
+
+**3. Tabs Hydration Issues** ✅ FIXED:
+- **Was**: Tabs component had hydration errors due to SSR/client mismatch
+- **Fix**: Updated `registry/default/ui/tabs.tsx` with proper refs and display names
+- **Status**: ✅ RESOLVED
+
+**4. macOS Dock Demo SSR Error** ✅ FIXED (2025-11-06):
+- **Was**: Build error "Event handlers cannot be passed to Client Component props" on `/view/new-york/macos-dock-demo`
+- **Root Cause**: `macos-dock-demo` component has onClick event handlers on DockItem components. During static prerendering with `force-static`, Next.js tries to serialize props but can't serialize functions.
+- **Fix**: Added component to skip list in `generateStaticParams()` in `app/(view)/view/[name]/page.tsx`
+  - Components with event handlers that can't be serialized are excluded from static generation
+  - They can still be accessed dynamically at runtime
+- **Result**: ✅ Build completes successfully, no SSR errors
+- **Note**: Component works perfectly in dev mode and at runtime, just skips static prerendering
+
+### Testing Coverage
+
+**Pages Tested**:
+- ✅ `/blocks` - All 5 featured blocks display correctly
+- ✅ `/colors` - Full Tailwind palette with copy functionality
+- ✅ `/themes` - Theme customizer with live preview
+- ✅ `/llm` - API endpoint compiles and serves MDX
+
+**Components Tested**:
+- ✅ `<BlockDisplay>` - Renders blocks correctly
+- ✅ `<BlocksNav>` - Navigation with search/filter
+- ✅ `<ColorsNav>` - Color palette navigation
+- ✅ `<OpenInHButton>` - Hanzo-branded button with logo
+- ✅ `<Tabs>` - No hydration errors
+
+### Maintenance Strategy
+
+**When to Sync with shadcn/ui v4**:
+1. Major version updates (v4.x → v4.y)
+2. New features in /blocks, /themes, /colors pages
+3. Security patches or bug fixes
+4. New component additions to showcase pages
+
+**How to Sync**:
+1. Compare shadcn v4 file with Hanzo version
+2. Identify changes in logic (not just branding)
+3. Apply logic changes while preserving:
+   - Hanzo branding (OpenInHButton, logos)
+   - Path adaptations (new-york-v4 → default)
+   - Registry structure differences (Index[style][name])
+4. Test thoroughly before deploying
+5. Document changes in CLAUDE.md
+
+### Future Work
+
+**Improvements Needed**:
+1. Fix getActiveStyle export error properly (not suppress)
+2. Resolve Client Component boundary warnings  
+3. Add comprehensive test suite for copied pages
+4. Set up automated diff checking against shadcn v4
+5. Document all customizations in component headers

app/__registry__/.autogenerated

@@ -1 +0,0 @@
-// The content of this directory is autogenerated by the registry server.

app/__registry__/README.md

@@ -1 +0,0 @@
-> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - hanzo

app/__registry__/default/block/authentication-04.tsx

@@ -63,10 +63,11 @@ export default function Dashboard() {
       <div className="hidden bg-muted lg:block">
         <Image
           src="/placeholder.svg"
-          alt="Image"
+          alt="Authentication page cover image"
           width="1920"
           height="1080"
           className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+          loading="lazy"
         />
       </div>
     </div>

app/__registry__/default/block/dashboard-05.tsx

@@ -267,6 +267,7 @@ export default function Dashboard() {
                   height={36}
                   alt="Avatar"
                   className="overflow-hidden rounded-full"
+                  loading="lazy"
                 />
               </Button>
             </DropdownMenuTrigger>

app/__registry__/default/block/dashboard-06.tsx

@@ -256,6 +256,7 @@ export default function Dashboard() {
                   height={36}
                   alt="Avatar"
                   className="overflow-hidden rounded-full"
+                  loading="lazy"
                 />
               </Button>
             </DropdownMenuTrigger>
@@ -356,6 +357,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">
@@ -401,6 +403,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">
@@ -446,6 +449,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">
@@ -491,6 +495,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">
@@ -536,6 +541,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">
@@ -581,6 +587,7 @@ export default function Dashboard() {
                             height="64"
                             src="/placeholder.svg"
                             width="64"
+                            loading="lazy"
                           />
                         </TableCell>
                         <TableCell className="font-medium">

app/__registry__/default/block/dashboard-07.tsx

@@ -259,6 +259,7 @@ export default function Dashboard() {
                   src="/placeholder-user.jpg"
                   width={36}
                   height={36}
+                  loading="lazy"
                   alt="Avatar"
                   className="overflow-hidden rounded-full"
                 />
@@ -551,24 +552,27 @@ export default function Dashboard() {
                         height="300"
                         src="/placeholder.svg"
                         width="300"
+                        loading="lazy"
                       />
                       <div className="grid grid-cols-3 gap-2">
                         <button>
                           <Image
-                            alt="Product image"
+                            alt="Product thumbnail image"
                             className="aspect-square w-full rounded-md object-cover"
                             height="84"
                             src="/placeholder.svg"
                             width="84"
+                            loading="lazy"
                           />
                         </button>
                         <button>
                           <Image
-                            alt="Product image"
+                            alt="Product thumbnail image"
                             className="aspect-square w-full rounded-md object-cover"
                             height="84"
                             src="/placeholder.svg"
                             width="84"
+                            loading="lazy"
                           />
                         </button>
                         <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">

app/__registry__/default/block/invoice-manager-01.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import { InvoiceManager } from "@hanzo/ui/billing"
-
-export const description =
-  "A complete invoice management interface with list/card views, filtering, sorting, pagination, and PDF download functionality. Features responsive design with mobile-optimized layouts."
-
-export const iframeHeight = "900px"
-
-export const containerClassName = "w-full"
-
-export default function InvoiceManagerDemo() {
-  return (
-    <div className="container mx-auto py-8">
-      <InvoiceManager defaultView="table" pageSize={10} />
-    </div>
-  )
-}

app/__registry__/default/block/login-01.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-02.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-03.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-04.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-05.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/payment-settings-01.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import { PaymentMethodManager, type PaymentMethod } from "@hanzo/ui/billing"
-
-export const description =
-  "Payment method management interface for adding, removing, and setting default payment methods."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full"
-
-// Demo payment methods for showcase
-const demoPaymentMethods: PaymentMethod[] = [
-  {
-    id: "pm_1",
-    type: "card",
-    is_default: true,
-    created_at: "2024-01-15T10:30:00Z",
-    card: {
-      brand: "visa",
-      last4: "4242",
-      exp_month: 12,
-      exp_year: 2025,
-      funding: "credit",
-    },
-    billing_details: {
-      name: "John Doe",
-      address: {
-        line1: "123 Main St",
-        city: "San Francisco",
-        state: "CA",
-        postal_code: "94102",
-        country: "US",
-      },
-    },
-  },
-  {
-    id: "pm_2",
-    type: "card",
-    is_default: false,
-    created_at: "2024-02-20T14:15:00Z",
-    card: {
-      brand: "mastercard",
-      last4: "5555",
-      exp_month: 8,
-      exp_year: 2026,
-      funding: "debit",
-    },
-    billing_details: {
-      name: "John Doe",
-    },
-  },
-  {
-    id: "pm_3",
-    type: "paypal",
-    is_default: false,
-    created_at: "2024-03-10T09:00:00Z",
-    paypal: {
-      email: "john.doe@example.com",
-    },
-  },
-]
-
-export default function PaymentSettings01() {
-  return (
-    <div className="mx-auto max-w-4xl p-6">
-      <PaymentMethodManager
-        // Use demo mode (no API endpoint)
-        initialMethods={demoPaymentMethods}
-        // Callbacks for demo
-        onMethodAdded={(method) => {
-          console.log("Payment method added:", method)
-        }}
-        onMethodRemoved={(id) => {
-          console.log("Payment method removed:", id)
-        }}
-        onDefaultChanged={(id) => {
-          console.log("Default payment method changed to:", id)
-        }}
-      />
-    </div>
-  )
-}

app/__registry__/default/block/signup-02.tsx

@@ -13,7 +13,10 @@ import {
 } from "@/registry/default/ui/field"
 import { Input } from "@/registry/default/ui/input"
 
-function SignupForm({ className, ...props }: React.ComponentProps<"form">) {
+function SignupForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-03.tsx

@@ -38,7 +38,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-04.tsx

@@ -25,7 +25,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-05.tsx

@@ -26,7 +26,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/subscription-portal-01.tsx

@@ -1,212 +0,0 @@
-"use client"
-
-import {
-  SubscriptionPortal,
-  type RetentionOffer,
-  type Subscription,
-  type SubscriptionHistory,
-  type SubscriptionPlan,
-} from "@hanzo/ui/billing"
-
-export const description =
-  "A comprehensive subscription management portal with plan upgrades, usage tracking, and subscription history."
-
-export const iframeHeight = "1000px"
-
-export const containerClassName = "w-full"
-
-// Demo subscription plans
-const demoPlans: SubscriptionPlan[] = [
-  {
-    id: "free",
-    name: "Free",
-    description: "Perfect for getting started",
-    price: 0,
-    billingPeriod: "monthly",
-    features: [
-      "Up to 3 projects",
-      "Basic analytics",
-      "Community support",
-      "5 team members",
-    ],
-    limits: {
-      projects: 3,
-      storage: 1, // GB
-      apiCalls: 1000,
-    },
-  },
-  {
-    id: "pro",
-    name: "Pro",
-    description: "For professional developers",
-    price: 29,
-    billingPeriod: "monthly",
-    features: [
-      "Unlimited projects",
-      "Advanced analytics",
-      "Priority support",
-      "Unlimited team members",
-      "Custom integrations",
-      "Advanced security",
-    ],
-    limits: {
-      projects: "unlimited",
-      storage: 100, // GB
-      apiCalls: "unlimited",
-    },
-    highlighted: true,
-    badge: "Popular",
-  },
-  {
-    id: "enterprise",
-    name: "Enterprise",
-    description: "For large teams and organizations",
-    price: 99,
-    billingPeriod: "monthly",
-    features: [
-      "Everything in Pro",
-      "Dedicated support",
-      "SLA guarantee",
-      "Custom integrations",
-      "On-premise deployment",
-      "Training & onboarding",
-      "Advanced compliance",
-    ],
-    limits: {
-      projects: "unlimited",
-      storage: "unlimited",
-      apiCalls: "unlimited",
-    },
-  },
-]
-
-// Demo current subscription
-const demoSubscription: Subscription = {
-  id: "sub_1",
-  customerId: "cus_1",
-  planId: "pro",
-  plan: demoPlans[1], // Pro plan
-  status: "active",
-  currentPeriodStart: new Date("2024-10-01"),
-  currentPeriodEnd: new Date("2024-11-01"),
-  cancelAtPeriodEnd: false,
-  usage: [
-    {
-      name: "Projects",
-      current: 12,
-      limit: "unlimited",
-    },
-    {
-      name: "Storage",
-      current: 45,
-      limit: 100,
-      unit: "GB",
-    },
-    {
-      name: "API Calls",
-      current: 45000,
-      limit: "unlimited",
-      unit: "calls",
-    },
-  ],
-  upcomingInvoice: {
-    amount: 29,
-    date: new Date("2024-11-01"),
-  },
-}
-
-// Demo retention offers
-const demoRetentionOffers: RetentionOffer[] = [
-  {
-    id: "offer_1",
-    title: "3 Months at 50% Off",
-    description: "Stay with us and get 50% off for the next 3 months",
-    discount: 50,
-    features: [
-      "Keep all Pro features",
-      "No contract required",
-      "Cancel anytime",
-    ],
-  },
-  {
-    id: "offer_2",
-    title: "Free Extra Storage",
-    description: "Get an additional 50GB storage for free for 6 months",
-    features: [
-      "150GB total storage",
-      "All Pro features included",
-      "Priority support",
-    ],
-  },
-]
-
-// Demo subscription history
-const demoHistory: SubscriptionHistory[] = [
-  {
-    id: "hist_1",
-    subscriptionId: "sub_1",
-    event: "upgraded",
-    fromPlan: "Free",
-    toPlan: "Pro",
-    timestamp: new Date("2024-10-01"),
-    amount: 29,
-  },
-  {
-    id: "hist_2",
-    subscriptionId: "sub_1",
-    event: "created",
-    toPlan: "Free",
-    timestamp: new Date("2024-09-15"),
-    amount: 0,
-  },
-]
-
-export default function SubscriptionPortal01() {
-  // Demo handlers
-  const handleUpgrade = async (planId: string) => {
-    console.log("Upgrading to plan:", planId)
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleDowngrade = async (planId: string) => {
-    console.log("Downgrading to plan:", planId)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleCancel = async (reason: string, feedback?: string) => {
-    console.log("Canceling subscription:", { reason, feedback })
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleAcceptOffer = async (offerId: string) => {
-    console.log("Accepting retention offer:", offerId)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl p-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">
-          Subscription Management
-        </h1>
-        <p className="text-muted-foreground mt-2">
-          Manage your subscription, view usage, and explore available plans
-        </p>
-      </div>
-
-      <SubscriptionPortal
-        subscription={demoSubscription}
-        availablePlans={demoPlans}
-        retentionOffers={demoRetentionOffers}
-        subscriptionHistory={demoHistory}
-        onUpgrade={handleUpgrade}
-        onDowngrade={handleDowngrade}
-        onCancel={handleCancel}
-        onAcceptOffer={handleAcceptOffer}
-        showHistory={true}
-        defaultView="overview"
-      />
-    </div>
-  )
-}

app/__registry__/default/example/accordion-demo.tsx

@@ -1,33 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/registry/default/ui/accordion"
-
-export default function AccordionDemo() {
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that matches the other
-          components&apos; aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you
-          prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}

app/__registry__/default/example/alert-demo.tsx

@@ -1,19 +0,0 @@
-import { Terminal } from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/default/ui/alert"
-
-export default function AlertDemo() {
-  return (
-    <Alert>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  )
-}

app/__registry__/default/example/alert-destructive.tsx

@@ -1,19 +0,0 @@
-import { AlertCircle } from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/default/ui/alert"
-
-export default function AlertDestructive() {
-  return (
-    <Alert variant="destructive">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  )
-}

app/__registry__/default/example/alert-dialog-demo.tsx

@@ -1,35 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/default/ui/alert-dialog"
-import { Button } from "@/registry/default/ui/button"
-
-export default function AlertDialogDemo() {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

app/__registry__/default/example/aspect-ratio-demo.tsx

@@ -1,16 +0,0 @@
-import Image from "next/image"
-
-import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
-
-export default function AspectRatioDemo() {
-  return (
-    <AspectRatio ratio={16 / 9} className="bg-muted">
-      <Image
-        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-        alt="Photo by Drew Beamer"
-        fill
-        className="rounded-md object-cover"
-      />
-    </AspectRatio>
-  )
-}

app/__registry__/default/example/avatar-demo.tsx

@@ -1,14 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-
-export default function AvatarDemo() {
-  return (
-    <Avatar>
-      <AvatarImage src="https://github.com/hanzoai.png" alt="@hanzoai" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  )
-}

app/__registry__/default/example/badge-demo.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeDemo() {
-  return <Badge>Badge</Badge>
-}

app/__registry__/default/example/badge-destructive.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeDestructive() {
-  return <Badge variant="destructive">Destructive</Badge>
-}

app/__registry__/default/example/badge-outline.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeOutline() {
-  return <Badge variant="outline">Outline</Badge>
-}

app/__registry__/default/example/badge-secondary.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeSecondary() {
-  return <Badge variant="secondary">Secondary</Badge>
-}

app/__registry__/default/example/breadcrumb-demo.tsx

@@ -1,49 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function BreadcrumbDemo() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              <BreadcrumbEllipsis className="h-4 w-4" />
-              <span className="sr-only">Toggle menu</span>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-dropdown.tsx

@@ -1,50 +0,0 @@
-import { ChevronDown, Slash } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function BreadcrumbWithDropdown() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              Components
-              <ChevronDown className="h-4 w-4" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-ellipsis.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbCollapsed() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/docs/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-link.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbWithCustomSeparator() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink>
-            <Link href="/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-responsive.tsx

@@ -1,133 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-const items = [
-  { href: "#", label: "Home" },
-  { href: "#", label: "Documentation" },
-  { href: "#", label: "Building Your Application" },
-  { href: "#", label: "Data Fetching" },
-  { label: "Caching and Revalidating" },
-]
-
-const ITEMS_TO_DISPLAY = 3
-
-export default function BreadcrumbResponsive() {
-  const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        {items.length > ITEMS_TO_DISPLAY ? (
-          <>
-            <BreadcrumbItem>
-              {isDesktop ? (
-                <DropdownMenu open={open} onOpenChange={setOpen}>
-                  <DropdownMenuTrigger
-                    className="flex items-center gap-1"
-                    aria-label="Toggle menu"
-                  >
-                    <BreadcrumbEllipsis className="h-4 w-4" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                    {items.slice(1, -2).map((item, index) => (
-                      <DropdownMenuItem key={index}>
-                        <Link href={item.href ? item.href : "#"}>
-                          {item.label}
-                        </Link>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : (
-                <Drawer open={open} onOpenChange={setOpen}>
-                  <DrawerTrigger aria-label="Toggle Menu">
-                    <BreadcrumbEllipsis className="h-4 w-4" />
-                  </DrawerTrigger>
-                  <DrawerContent>
-                    <DrawerHeader className="text-left">
-                      <DrawerTitle>Navigate to</DrawerTitle>
-                      <DrawerDescription>
-                        Select a page to navigate to.
-                      </DrawerDescription>
-                    </DrawerHeader>
-                    <div className="grid gap-1 px-4">
-                      {items.slice(1, -2).map((item, index) => (
-                        <Link
-                          key={index}
-                          href={item.href ? item.href : "#"}
-                          className="py-1 text-sm"
-                        >
-                          {item.label}
-                        </Link>
-                      ))}
-                    </div>
-                    <DrawerFooter className="pt-4">
-                      <DrawerClose asChild>
-                        <Button variant="outline">Close</Button>
-                      </DrawerClose>
-                    </DrawerFooter>
-                  </DrawerContent>
-                </Drawer>
-              )}
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-          </>
-        ) : null}
-        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
-          <BreadcrumbItem key={index}>
-            {item.href ? (
-              <>
-                <BreadcrumbLink
-                  asChild
-                  className="max-w-20 truncate md:max-w-none"
-                >
-                  <Link href={item.href}>{item.label}</Link>
-                </BreadcrumbLink>
-                <BreadcrumbSeparator />
-              </>
-            ) : (
-              <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
-                {item.label}
-              </BreadcrumbPage>
-            )}
-          </BreadcrumbItem>
-        ))}
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-separator.tsx

@@ -1,34 +0,0 @@
-import { Slash } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbWithCustomSeparator() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/button-as-child.tsx

@@ -1,11 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonAsChild() {
-  return (
-    <Button asChild>
-      <Link href="/login">Login</Link>
-    </Button>
-  )
-}

app/__registry__/default/example/button-demo.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonDemo() {
-  return <Button>Button</Button>
-}

app/__registry__/default/example/button-destructive.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonDestructive() {
-  return <Button variant="destructive">Destructive</Button>
-}

app/__registry__/default/example/button-ghost.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonGhost() {
-  return <Button variant="ghost">Ghost</Button>
-}

app/__registry__/default/example/button-icon.tsx

@@ -1,11 +0,0 @@
-import { ChevronRight } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonIcon() {
-  return (
-    <Button variant="outline" size="icon">
-      <ChevronRight className="h-4 w-4" />
-    </Button>
-  )
-}

app/__registry__/default/example/button-link.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonLink() {
-  return <Button variant="link">Link</Button>
-}

app/__registry__/default/example/button-loading.tsx

@@ -1,12 +0,0 @@
-import { Loader2 } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonLoading() {
-  return (
-    <Button disabled>
-      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}

app/__registry__/default/example/button-outline.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonOutline() {
-  return <Button variant="outline">Outline</Button>
-}

app/__registry__/default/example/button-secondary.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonSecondary() {
-  return <Button variant="secondary">Secondary</Button>
-}

app/__registry__/default/example/button-with-icon.tsx

@@ -1,11 +0,0 @@
-import { Mail } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonWithIcon() {
-  return (
-    <Button>
-      <Mail className="mr-2 h-4 w-4" /> Login with Email
-    </Button>
-  )
-}

app/__registry__/default/example/calendar-demo.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Calendar } from "@/registry/default/ui/calendar"
-
-export default function CalendarDemo() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  )
-}

app/__registry__/default/example/calendar-form.tsx

@@ -1,101 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-})
-
-export default function CalendarForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}