@hanzo/ui 4.5.4 → 4.7.0

package/dist/types/index.d.mts

@@ -0,0 +1,12 @@
+export { default as AnimationDef } from './animation-def.ts';
+export { Breakpoint, Breakpoints } from './breakpoints.ts';
+export { default as BulletItem } from './bullet-item.ts';
+export { ButtonDef, ButtonModalDef, ButtonModalProps, SubmitServerAction } from './button-def.ts';
+export { default as Dimensions } from './dimensions.ts';
+export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL, GridColumnSpec, default as GridDef } from './grid-def.ts';
+export { default as ImageDef } from './image-def.ts';
+export { default as LinkDef } from './link-def.ts';
+export { default as TShirtDimensions } from './tshirt-dimensions.ts';
+export { default as TShirtSize } from './t-shirt-size.ts';
+export { default as VideoDef } from './video-def.ts';
+export { MediaStackDef, MediaTransform } from './media-stack-def.ts';

package/dist/types/index.d.ts

@@ -0,0 +1,12 @@
+export { default as AnimationDef } from './animation-def.ts';
+export { Breakpoint, Breakpoints } from './breakpoints.ts';
+export { default as BulletItem } from './bullet-item.ts';
+export { ButtonDef, ButtonModalDef, ButtonModalProps, SubmitServerAction } from './button-def.ts';
+export { default as Dimensions } from './dimensions.ts';
+export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL, GridColumnSpec, default as GridDef } from './grid-def.ts';
+export { default as ImageDef } from './image-def.ts';
+export { default as LinkDef } from './link-def.ts';
+export { default as TShirtDimensions } from './tshirt-dimensions.ts';
+export { default as TShirtSize } from './t-shirt-size.ts';
+export { default as VideoDef } from './video-def.ts';
+export { MediaStackDef, MediaTransform } from './media-stack-def.ts';

package/dist/types/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// types/index.ts
+var types_exports = {};
+__export(types_exports, {
+  Breakpoints: () => Breakpoints,
+  COMMON_GRID_1_COL: () => COMMON_GRID_1_COL,
+  COMMON_GRID_2_COL: () => COMMON_GRID_2_COL,
+  COMMON_GRID_3_COL: () => COMMON_GRID_3_COL,
+  COMMON_GRID_4_COL: () => COMMON_GRID_4_COL
+});
+module.exports = __toCommonJS(types_exports);
+
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};

package/dist/types/index.mjs

@@ -0,0 +1,56 @@
+// tailwind/screens.tailwind.js
+var screens_tailwind_default = {
+  xs: "0px",
+  // <-- phone
+  sm: "480px",
+  // phone --><-- sm tablets / narrow
+  md: "768px",
+  // sm tablets / narrow -->
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1500px"
+};
+
+// types/breakpoints.ts
+var Breakpoints = Object.keys(screens_tailwind_default);
+
+// types/grid-def.ts
+var COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_2_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 2, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_3_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 3, gap: 3 },
+    lg: { columns: 3, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+var COMMON_GRID_4_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 2, gap: 3 },
+    lg: { columns: 4, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+};
+export {
+  Breakpoints,
+  COMMON_GRID_1_COL,
+  COMMON_GRID_2_COL,
+  COMMON_GRID_3_COL,
+  COMMON_GRID_4_COL
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.5.4",
-  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
+  "version": "4.7.0",
+  "description": "Multi-framework UI library with React, Vue, Svelte, and React Native support. Based on shadcn/ui with comprehensive framework coverage.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
@@ -9,6 +9,17 @@
   },
   "author": "Hanzo AI, Inc.",
   "license": "BSD-3-Clause",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "style",
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hanzoai/react-sdk.git",
@@ -31,44 +42,170 @@
   "scripts": {
     "lat": "npm show @hanzo/ui version",
     "pub": "npm publish",
-    "tc": "tsc",
-    "build": "tsc -p tsconfig.json",
+    "tc": "tsc --project tsconfig.build.json",
+    "build": "npm run clean && npm run build:tsup",
+    "build:tsup": "tsup --config tsup.config.minimal.ts",
+    "build:full": "tsup --config tsup.config.production.ts",
+    "build:frameworks": "npm run build",
+    "build:watch": "tsup --watch",
+    "build:check": "tsc --project tsconfig.build.json --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build",
     "update-registry": "node ./bin/update-registry.js",
     "registry:mcp": "node ./bin/cli.js registry:mcp",
-    "registry:mcp:http": "node ./bin/cli.js registry:mcp --http"
+    "registry:mcp:http": "node ./bin/cli.js registry:mcp --http",
+    "analyze:frameworks": "node analyze-frameworks.js",
+    "test": "jest test/multi-framework.test.js",
+    "test:frameworks": "jest test/multi-framework.test.js --verbose"
   },
   "bin": {
     "@hanzo/ui": "./bin/cli.js",
     "hanzo-ui": "./bin/cli.js"
   },
   "exports": {
-    "./blocks": "./blocks/index.ts",
-    "./primitives": "./primitives/index-next.ts",
-    "./primitives-common": "./primitives/index-common.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./assets": {
+      "types": "./dist/assets/index.d.ts",
+      "import": "./dist/assets/index.mjs",
+      "require": "./dist/assets/index.js"
+    },
+    "./assets/*": {
+      "types": "./dist/assets/*.d.ts",
+      "import": "./dist/assets/*.mjs",
+      "require": "./dist/assets/*.js"
+    },
+    "./blocks": {
+      "types": "./dist/blocks/index.d.ts",
+      "import": "./dist/blocks/index.mjs",
+      "require": "./dist/blocks/index.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*.d.ts",
+      "import": "./dist/blocks/*.mjs",
+      "require": "./dist/blocks/*.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives/index-next.d.ts",
+      "import": "./dist/primitives/index-next.mjs",
+      "require": "./dist/primitives/index-next.js"
+    },
+    "./primitives/*": {
+      "types": "./dist/primitives/*.d.ts",
+      "import": "./dist/primitives/*.mjs",
+      "require": "./dist/primitives/*.js"
+    },
+    "./primitives-common": {
+      "types": "./dist/primitives/index-common.d.ts",
+      "import": "./dist/primitives/index-common.mjs",
+      "require": "./dist/primitives/index-common.js"
+    },
     "./registry": {
-      "types": "./dist/registry/index.d.ts",
-      "default": "./dist/registry/index.js"
-    },
-    "./style/": "./style/*",
-    "./tailwind": "./tailwind/index.ts",
-    "./types": "./types/index.ts",
-    "./util": "./util/index.ts",
-    "./util-client": "./util/index-client.ts",
+      "types": "./dist/src/registry/index.d.ts",
+      "import": "./dist/src/registry/index.mjs",
+      "require": "./dist/src/registry/index.js"
+    },
+    "./style/*": "./style/*",
+    "./tailwind": {
+      "types": "./dist/tailwind/index.d.ts",
+      "import": "./dist/tailwind/index.mjs",
+      "require": "./dist/tailwind/index.js"
+    },
+    "./tailwind/*": {
+      "types": "./dist/tailwind/*.d.ts",
+      "import": "./dist/tailwind/*.mjs",
+      "require": "./dist/tailwind/*.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.mjs",
+      "require": "./dist/types/index.js"
+    },
+    "./types/*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/types/*.mjs",
+      "require": "./dist/types/*.js"
+    },
+    "./util": {
+      "types": "./dist/util/index.d.ts",
+      "import": "./dist/util/index.mjs",
+      "require": "./dist/util/index.js"
+    },
+    "./util/*": {
+      "types": "./dist/util/*.d.ts",
+      "import": "./dist/util/*.mjs",
+      "require": "./dist/util/*.js"
+    },
+    "./util-client": {
+      "types": "./dist/util/index-client.d.ts",
+      "import": "./dist/util/index-client.mjs",
+      "require": "./dist/util/index-client.js"
+    },
+    "./utils": {
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/src/utils.mjs",
+      "require": "./dist/src/utils.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/src/utils.mjs",
+      "require": "./dist/src/utils.js"
+    },
     "./mcp": {
-      "types": "./dist/mcp/index.d.ts",
-      "default": "./dist/mcp/index.js"
-    }
+      "types": "./dist/src/mcp/index.d.ts",
+      "import": "./dist/src/mcp/index.mjs",
+      "require": "./dist/src/mcp/index.js"
+    },
+    "./react": {
+      "types": "./dist/frameworks/react/index.d.ts",
+      "import": "./dist/frameworks/react/index.mjs",
+      "require": "./dist/frameworks/react/index.js"
+    },
+    "./vue": {
+      "types": "./dist/frameworks/vue/index.d.ts",
+      "import": "./dist/frameworks/vue/index.mjs",
+      "require": "./dist/frameworks/vue/index.js"
+    },
+    "./svelte": {
+      "svelte": "./frameworks/svelte/index.ts",
+      "types": "./dist/frameworks/svelte/index.d.ts",
+      "import": "./dist/frameworks/svelte/index.mjs",
+      "require": "./dist/frameworks/svelte/index.js"
+    },
+    "./react-native": {
+      "types": "./dist/frameworks/react-native/index.d.ts",
+      "import": "./dist/frameworks/react-native/index.mjs",
+      "require": "./dist/frameworks/react-native/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "dependencies": {
     "@hanzo/react-drawer": "^0.1.8",
     "@modelcontextprotocol/sdk": "^1.10.2",
     "@next/third-parties": "^15.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.3",
@@ -86,26 +223,34 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@splinetool/react-spline": "^4.0.0",
     "@splinetool/runtime": "^1.9.35",
     "@tailwindcss/container-queries": "^0.1.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
     "commander": "^12.1.0",
+    "date-fns": "^4.1.0",
     "embla-carousel-react": "8.5.1",
     "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
-    "markdown-to-jsx": "^7.4.7",
+    "markdown-to-jsx": "^7.7.13",
+    "mermaid": "^11.12.0",
     "postcss-selector-parser": "^6.0.16",
+    "qrcode.react": "^4.2.0",
     "react-day-picker": "^8.10.1",
     "react-intersection-observer": "^9.8.2",
+    "react-resizable-panels": "^3.0.6",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.3.0",
+    "sql.js": "^1.13.0",
+    "svg-pan-zoom": "^3.6.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-interaction-media": "^0.1.0",
+    "vaul": "^1.1.2",
     "zod": "^3.23.8",
     "zod-to-json-schema": "^3.23.2"
   },
@@ -133,7 +278,9 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
     "glob": "^11.0.2",
+    "jest": "^30.1.3",
     "tailwindcss": "3.4.14",
+    "tsup": "^8.5.0",
     "typescript": "5.6.3"
   }
 }

package/style/theme-provider.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProviderProps } from "next-themes/dist/types"
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ children, ...props }) => (
   <NextThemesProvider 

package/MCP-INSTRUCTIONS.md

@@ -1,73 +0,0 @@
-# Using @hanzo/ui with AI Assistants
-
-This guide explains how to use @hanzo/ui with AI assistants through the Model Context Protocol (MCP).
-
-## Getting Started
-
-1. Install the package:
-
-```bash
-npm install @hanzo/ui
-```
-
-2. Start the MCP server:
-
-```bash
-npx @hanzo/ui registry:mcp
-```
-
-3. Configure your AI assistant to use the server.
-
-## Available Commands
-
-- **Initialize a new project**:
-  ```bash
-  npx @hanzo/ui init --style=default
-  ```
-
-- **List available components**:
-  ```bash
-  npx @hanzo/ui list
-  ```
-
-- **Add a component**:
-  ```bash
-  npx @hanzo/ui add button
-  ```
-
-## Using with LLMs
-
-AI Assistants like Claude or ChatGPT can help you explore and use the components. Just describe what you need, and the AI can guide you through:
-
-- Finding the right component
-- Installing and configuring it
-- Using it in your project
-
-Example prompt: "I need a dropdown menu component for my React project. Can you help me find and set it up using @hanzo/ui?"
-
-## Registry Configuration
-
-You can create a custom registry for your components, making them available through the same interface. To create a registry:
-
-1. Set up the registry structure
-2. Run the update-registry script
-3. Host the registry files
-4. Point to your custom registry:
-
-```bash
-npx @hanzo/ui registry:mcp --registry=https://your-registry-url.com/registry.json
-```
-
-## HTTP Mode
-
-For web-based applications, you can run the MCP server in HTTP mode:
-
-```bash
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-This exposes an HTTP endpoint at http://localhost:3333 that you can use to communicate with the MCP server.
-
-## Learn More
-
-For detailed documentation, see [README-MCP.md](./README-MCP.md) or visit the [Hanzo UI website](https://ui.hanzo.ai).

package/README-MCP.md

@@ -1,175 +0,0 @@
-# Hanzo UI with MCP Support
-
-This implementation provides Model Context Protocol (MCP) support for the Hanzo UI library, enabling AI assistants to interact with the component registry based on shadcn/ui.
-
-## Quick Start
-
-```bash
-# Run with npx (recommended)
-npx @hanzo/ui registry:mcp
-
-# Or set a custom registry URL
-npx @hanzo/ui registry:mcp --registry=https://ui.hanzo.ai/registry/registry.json
-
-# Run in HTTP mode instead of stdio
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-## Setup and Usage
-
-### Configure Your LLM Tool
-
-To configure your AI assistant or LLM to use the Hanzo UI MCP server, add the following configuration:
-
-```json
-{
-  "name": "hanzo-ui",
-  "command": "npx @hanzo/ui registry:mcp"
-}
-```
-
-### Available Tools
-
-The MCP server provides the following tools for AI assistants:
-
-1. `init` - Initialize a new project using @hanzo/ui components and styles
-2. `list_components` - List all available components in the registry
-3. `get_component` - Get detailed information about a specific component
-4. `add_component` - Get instructions for adding a component to a project
-5. `list_styles` - List all available styles in the registry
-6. `search_registry` - Search the registry for components matching criteria
-
-### Registry Configuration
-
-The registry URL can be configured by setting the `REGISTRY_URL` environment variable:
-
-```bash
-export REGISTRY_URL="https://ui.hanzo.ai/registry/registry.json"
-npx @hanzo/ui registry:mcp
-```
-
-Or by using the `--registry` command-line option:
-
-```bash
-npx @hanzo/ui registry:mcp --registry=https://ui.hanzo.ai/registry/registry.json
-```
-
-## HTTP Mode
-
-You can run the MCP server in HTTP mode, which exposes the server over HTTP rather than stdio:
-
-```bash
-npx @hanzo/ui registry:mcp --http --port=3333
-```
-
-This allows you to access the MCP server directly from web applications or other HTTP clients.
-
-## Developer Instructions
-
-### Building from Source
-
-```bash
-# Clone the repository
-git clone https://github.com/hanzoai/ui.git
-cd ui/pkg/ui
-
-# Install dependencies
-npm install
-
-# Build the package
-npm run build
-
-# Run the MCP server
-node ./bin/cli.js registry:mcp
-```
-
-### Project Structure
-
-- `/pkg/ui/mcp/`: MCP server implementation
-- `/pkg/ui/registry/`: Registry schema and API
-- `/pkg/ui/bin/`: CLI tools for running the MCP server
-
-### Creating a Registry
-
-The registry is compatible with shadcn/ui's registry format. To create a custom registry:
-
-1. Create a `registry.json` file using the schema from `/pkg/ui/registry/schema.ts`
-2. Build the registry using a build script
-3. Host the registry files on a web server or CDN
-4. Point the MCP server to your custom registry using the `--registry` option
-
-## How It Works
-
-The MCP server enables AI assistants to:
-
-1. Discover and browse available components in your registry
-2. Fetch detailed information about specific components
-3. Provide instructions on adding components to projects
-4. Initialize new projects with your component library
-
-This makes it easy for users to interact with your UI library through conversational interfaces.
-
-## Example Interactions
-
-### Initialize a Project
-
-```
-Assistant: To create a new project with Hanzo UI components, you can run:
-
-npx create-next-app@latest my-app
-cd my-app
-npx @hanzo/ui@latest init
-```
-
-### Add a Component
-
-```
-Assistant: To add the Button component to your project:
-
-npx @hanzo/ui@latest add button
-
-This will install the component and its dependencies.
-```
-
-### Search for Components
-
-```
-Assistant: I found several form-related components:
-- form
-- input
-- checkbox
-- select
-- textarea
-
-Which one would you like to add to your project?
-```
-
-## Technical Details
-
-### Registry Schema
-
-The registry schema is compatible with shadcn/ui and includes:
-
-- Component metadata (name, description, type)
-- Dependencies (npm packages)
-- Registry dependencies (other components)
-- Component files with source code
-- Category and subcategory information
-
-### MCP Integration
-
-The MCP server implements the Model Context Protocol, enabling AI assistants to:
-
-- Query the registry for components
-- Get detailed information about components
-- Provide installation instructions
-- Generate example usage code
-
-### Command-Line Interface
-
-The CLI provides options for:
-
-- Setting the registry URL
-- Running in HTTP mode
-- Specifying the port for HTTP mode
-- Verbose logging