@hanzo/ui 5.7.1 → 8.0.0

package/src/product/index.ts

@@ -0,0 +1,57 @@
+// @hanzo/ui/product — the product/app component layer on @hanzo/gui.
+//
+// Charts, metrics, page headers, status tags, rich empty states, combobox,
+// slide-over, toasts, drag-reorder, labeled field rows, provider/product marks,
+// theme toggle. Presentational + host-agnostic: data and effects are INJECTED as
+// props — nothing here imports an app's `~/lib`. Cross-platform (web + native +
+// desktop) because it builds only on @hanzo/gui primitives. Clean-room.
+//
+// Single collision-free namespace: where a name exists in two files the canonical
+// (Charts) keeps the name and the variant is aliased, so NOTHING is dropped.
+
+// Charts — the canonical Sparkline + Donut live here (dependency-free inline SVG:
+// hover tooltips, axis ticks, honest null under 2 real points).
+export * from './Charts'
+
+// Metric — resource-console stat tiles/panels/bars. Its own near-identical
+// Sparkline is preserved as `MetricSparkline` (zero loss; see CONSOLIDATION.md
+// for the eventual single-Sparkline dedup).
+export {
+  SERIES,
+  colorForIndex,
+  utilColor,
+  Sparkline as MetricSparkline,
+  MiniBars,
+  UtilBar,
+  LegendDot,
+  MetricCard,
+  HintButton,
+  Panel,
+} from './Metric'
+
+// Standalone dependency-free ring — aliased to avoid the Charts.Donut clash.
+export { Donut as DonutRing, type DonutSegment } from './Donut'
+
+// ComboBox — the typeable select. `ComboOption` comes from the ONE pure filter
+// module (ReDoS-safe literal substring), so export the component here and the
+// option type + matchers from there.
+export { ComboBox } from './ComboBox'
+export * from './combobox/filter'
+
+// The rest — every exported name below is unique across the layer.
+export * from './DataTable'
+export * from './EmptyState'
+export * from './FadeIn'
+export * from './Field'
+export * from './HanzoMark'
+export * from './PageHeader'
+export * from './PrimaryButton'
+export * from './ProductIcon'
+export * from './ProviderLogo'
+export * from './Reorder'
+export * from './SelectMenu'
+export * from './SlideOver'
+export * from './StatusTag'
+export * from './ThemeToggle'
+export * from './Toast'
+export * from './color'

package/src/styles/hanzo-motion.css

@@ -0,0 +1,136 @@
+/* @hanzo/ui motion primitives — the calm, restrained animation vocabulary the
+   Hanzo surfaces share. One place defines the easing; components apply the class.
+   `className` forwards to the underlying DOM node on web, so the browser
+   transitions the Gui-driven inline width/transform/opacity. Every animation is
+   guarded by `prefers-reduced-motion: reduce`.
+
+   Import once at the app root:  import '@hanzo/ui/styles/motion.css'  */
+
+/* Fade-up entrance — <FadeIn> applies the class + a per-item stagger delay.
+   ~0.4s ease-out, small upward travel (matches the hanzo.ai marketing feel). */
+@keyframes hz-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-fade-up {
+  animation: hz-fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-fade-up {
+    animation: none;
+  }
+}
+
+/* Shell chrome motion — sidebar collapse (width) and the Linear-style two-level
+   nav slide (transform); backdrop cross-fade behind a SlideOver / dialog. */
+.hz-collapse {
+  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: width;
+}
+
+.hz-slide {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+}
+
+.hz-fade {
+  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity;
+}
+
+/* Drag-to-reorder — a pinned row while it is being dragged (pointer DnD). The
+   lifted row gets a subtle lift; siblings ease into place via `.hz-slide`. */
+.hz-drag-item {
+  touch-action: none;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hz-drag-item[data-dragging='true'] {
+  transition: none;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  opacity: 0.96;
+  cursor: grabbing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-collapse,
+  .hz-slide,
+  .hz-fade,
+  .hz-drag-item {
+    transition: none;
+  }
+}
+
+/* Living-overview motion — the "videogame-like" living dashboard. The count-up +
+   live sparkline are driven in JS (rAF, gated by prefers-reduced-motion in the
+   hooks); these are the pure-CSS bits: a loading shimmer, a live-feed pulse, and
+   a brief highlight when a freshly-arrived row lands. */
+
+/* Skeleton shimmer — an honest "loading", never fabricated content. */
+@keyframes hz-shimmer {
+  0% {
+    background-position: -160px 0;
+  }
+  100% {
+    background-position: 160px 0;
+  }
+}
+
+.hz-skeleton {
+  background-color: var(--color3, rgba(148, 163, 184, 0.14));
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color4, rgba(148, 163, 184, 0.22)) 50%,
+    transparent 100%
+  );
+  background-size: 160px 100%;
+  background-repeat: no-repeat;
+  animation: hz-shimmer 1.2s ease-in-out infinite;
+}
+
+/* Live-feed pulse — the "Live" dot on a streaming panel. */
+@keyframes hz-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+}
+
+/* Entrance for a freshly-arrived activity row (staggerless — one row at a time). */
+@keyframes hz-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hz-row-in {
+  animation: hz-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-skeleton {
+    animation: none;
+  }
+  .hz-row-in {
+    animation: none;
+  }
+}

package/bin/cli.js

@@ -1,100 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Main CLI entry point for @hanzo/ui
- * Supports various commands including registry:mcp
- */
-
-const { program } = require("commander");
-
-// Define the version from the package.json
-let version = "4.5.0";
-try {
-  const packageJson = require("../package.json");
-  version = packageJson.version || version;
-} catch (error) {
-  // Use default version if package.json can't be loaded
-}
-
-// Set up the program
-program
-  .name("@hanzo/ui")
-  .description("Hanzo UI Component Library CLI")
-  .version(version);
-  
-// Add the MCP command (main command)
-program
-  .command("mcp")
-  .description("Start the Hanzo UI MCP server for AI assistants")
-  .option(
-    "-r, --registry <url>", 
-    "URL to the registry.json file",
-    process.env.REGISTRY_URL || "https://ui.hanzo.ai/registry/registry.json"
-  )
-  .option(
-    "-p, --port <port>",
-    "Port to listen on (for HTTP mode)",
-    "3333"
-  )
-  .option(
-    "--http",
-    "Run in HTTP mode instead of stdio mode",
-    false
-  )
-  .action(async (options) => {
-    // Delegate to the dedicated MCP binary
-    require("./mcp.js");
-  });
-
-// Add the registry:mcp command (alias for compatibility)
-program
-  .command("registry:mcp")
-  .description("Starts the registry MCP server (alias for 'mcp')")
-  .option(
-    "-r, --registry <url>", 
-    "URL to the registry.json file",
-    process.env.REGISTRY_URL
-  )
-  .option(
-    "-p, --port <port>",
-    "Port to listen on (for HTTP mode)",
-    "3333"
-  )
-  .option(
-    "--http",
-    "Run in HTTP mode instead of stdio mode",
-    false
-  )
-  .action(async (options) => {
-    try {
-      // Set environment variables based on options
-      if (options.registry) {
-        process.env.REGISTRY_URL = options.registry;
-      }
-      
-      // Set port if running in HTTP mode
-      if (options.http) {
-        process.env.MCP_HTTP_MODE = "true";
-        process.env.MCP_PORT = options.port;
-      }
-
-      // Show info about the server
-      console.error("Starting Hanzo UI MCP server...");
-      console.error(`Registry URL: ${process.env.REGISTRY_URL || "[Using default registry]"}`);
-      
-      if (options.http) {
-        console.error(`Running in HTTP mode on port ${options.port}`);
-      } else {
-        console.error("Running in stdio mode");
-      }
-      
-      // Load and run the MCP server script
-      require("./registry-mcp.js");
-    } catch (error) {
-      console.error("Error starting MCP server:", error);
-      process.exit(1);
-    }
-  });
-
-// Parse command line arguments
-program.parse();

package/bin/create-registry.js

@@ -1,108 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Simple registry builder for @hanzo/ui
- * Creates the necessary structure for the MCP registry
- */
-
-const fs = require('fs');
-const path = require('path');
-
-// Configuration
-const REGISTRY_DIR = path.resolve(__dirname, '../registry');
-const PUBLIC_DIR = path.resolve(__dirname, '../public');
-const OUTPUT_FILE = path.resolve(__dirname, '../registry.json');
-const REGISTRY_STYLES = ['default', 'new-york']; 
-
-// Registry schema
-const registrySchema = {
-  "$schema": "https://ui.hanzo.com/schema/registry.json",
-  "name": "hanzo",
-  "homepage": "https://ui.hanzo.ai",
-  "items": []
-};
-
-// Create the basic registry structure
-function createRegistry() {
-  console.log('Creating registry structure...');
-  
-  const items = [];
-  
-  // Ensure registry directory exists
-  if (!fs.existsSync(REGISTRY_DIR)) {
-    fs.mkdirSync(REGISTRY_DIR, { recursive: true });
-  }
-  
-  // Create style directories and add them to registry items
-  for (const style of REGISTRY_STYLES) {
-    const styleDir = path.join(REGISTRY_DIR, style);
-    if (!fs.existsSync(styleDir)) {
-      fs.mkdirSync(styleDir, { recursive: true });
-      
-      // Create ui and block directories
-      fs.mkdirSync(path.join(styleDir, 'ui'), { recursive: true });
-      fs.mkdirSync(path.join(styleDir, 'block'), { recursive: true });
-    }
-    
-    // Add style to registry
-    items.push({
-      name: style,
-      type: 'registry:style',
-      description: `The ${style} style for Hanzo UI components.`,
-      files: []
-    });
-  }
-  
-  // Add primitive components as empty placeholders
-  const primitives = [
-    'accordion', 'alert', 'avatar', 'badge', 'button', 'card', 
-    'checkbox', 'dialog', 'input', 'label', 'popover', 'select', 
-    'table', 'tabs', 'toast'
-  ];
-  
-  for (const component of primitives) {
-    items.push({
-      name: component,
-      type: 'registry:component',
-      description: `A ${component} component for your UI.`,
-      files: [
-        {
-          path: `default/ui/${component}/${component}.tsx`,
-          type: 'registry:component'
-        }
-      ]
-    });
-  }
-  
-  // Update registry.json
-  registrySchema.items = items;
-  
-  // Create output directory if it doesn't exist
-  const outputDir = path.dirname(OUTPUT_FILE);
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-  
-  // Write registry.json
-  fs.writeFileSync(OUTPUT_FILE, JSON.stringify(registrySchema, null, 2), 'utf8');
-  console.log(`Registry updated with ${items.length} items.`);
-  
-  // Create public/r directory if it doesn't exist
-  const publicRDir = path.join(PUBLIC_DIR, 'r');
-  if (!fs.existsSync(publicRDir)) {
-    fs.mkdirSync(publicRDir, { recursive: true });
-  }
-  
-  // Generate individual component JSON files
-  console.log('Generating individual component JSON files...');
-  for (const item of items) {
-    const componentFile = path.join(publicRDir, `${item.name}.json`);
-    fs.writeFileSync(componentFile, JSON.stringify(item, null, 2), 'utf8');
-  }
-  
-  console.log(`Generated ${items.length} component JSON files.`);
-  console.log('Registry creation complete!');
-}
-
-// Run the registry creation
-createRegistry();