@hanzo/ui 4.6.0 → 4.7.0

package/src/hooks/use-debounce.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export function useDebounce(value: string, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = React.useState(value);
-
-  React.useEffect(() => {
-    const handler: NodeJS.Timeout = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}

package/src/hooks/use-fill-ids.ts

@@ -1,25 +0,0 @@
-import { useMemo } from 'react';
-
-export const useFillId = (namespace: string) => {
-  const id = `lobe-icons-${namespace.toLowerCase()}-fill`;
-  return useMemo(
-    () => ({
-      fill: `url(#${id})`,
-      id,
-    }),
-    [namespace],
-  );
-};
-
-export const useFillIds = (namespace: string, length: number) => {
-  return useMemo(() => {
-    const ids = Array.from({ length }, (_, i) => {
-      const id = `lobe-icons-${namespace.toLowerCase()}-fill-${i}`;
-      return {
-        fill: `url(#${id})`,
-        id,
-      };
-    });
-    return ids;
-  }, [namespace]);
-};

package/src/hooks/use-map.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export function useMap<Key, Value>(initialState: [Key, Value][] = []) {
-  const mapRef = React.useRef(new Map<Key, Value>(initialState));
-  const [, reRender] = React.useReducer((x) => x + 1, 0);
-
-  mapRef.current.set = (...args) => {
-    Map.prototype.set.apply(mapRef.current, args);
-    reRender();
-    return mapRef.current;
-  };
-
-  mapRef.current.clear = (...args) => {
-    Map.prototype.clear.apply(mapRef.current, args);
-    reRender();
-  };
-
-  mapRef.current.delete = (...args) => {
-    const res = Map.prototype.delete.apply(mapRef.current, args);
-    reRender();
-
-    return res;
-  };
-
-  return mapRef.current;
-}

package/src/hooks/use-measure.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-
-export function useMeasure<T extends Element>(): [
-  React.RefCallback<T>,
-  {
-    width: number | null;
-    height: number | null;
-  },
-] {
-  const [dimensions, setDimensions] = React.useState<{
-    width: number | null;
-    height: number | null;
-  }>({
-    width: null,
-    height: null,
-  });
-
-  const previousObserver = React.useRef<ResizeObserver | null>(null);
-
-  const customRef = React.useCallback((node: T) => {
-    if (previousObserver.current) {
-      previousObserver.current.disconnect();
-      previousObserver.current = null;
-    }
-
-    if (node?.nodeType === Node.ELEMENT_NODE) {
-      const observer = new ResizeObserver(([entry]) => {
-        if (entry && entry.borderBoxSize) {
-          const { inlineSize: width, blockSize: height } =
-            entry.borderBoxSize[0];
-
-          setDimensions({ width, height });
-        }
-      });
-
-      observer.observe(node);
-      previousObserver.current = observer;
-    }
-  }, []);
-
-  return [customRef, dimensions];
-}

package/src/hooks/use-reverse-video-playback.ts

@@ -1,43 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-export const useReverseVideoPlayback = () => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  const [isReversing, setIsReversing] = useState(false);
-  const playReverse = () => {
-    if (!videoRef.current) return;
-    const video = videoRef.current;
-    const reversePlayback = () => {
-      if (video.currentTime <= 0) {
-        setIsReversing(false);
-        void video.play();
-        return;
-      }
-      video.currentTime -= 0.023;
-      requestAnimationFrame(reversePlayback);
-    };
-    reversePlayback();
-  };
-
-  useEffect(() => {
-    const videoElement = videoRef.current;
-    if (videoElement) {
-      const handleVideoEnd = () => {
-        if (isReversing) {
-          setIsReversing(false);
-          videoElement.currentTime = 0;
-          void videoElement.play();
-        } else {
-          setIsReversing(true);
-          playReverse();
-        }
-      };
-
-      videoElement.addEventListener('ended', handleVideoEnd);
-      return () => {
-        videoElement.removeEventListener('ended', handleVideoEnd);
-      };
-    }
-  }, [isReversing]);
-  return videoRef;
-};

package/src/hooks/use-scroll-restoration.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-
-export const useScrollRestoration = ({
-  key,
-  containerRef,
-  scrollTopStateRef,
-}: {
-  key: string;
-  containerRef: React.RefObject<HTMLElement | null>;
-  scrollTopStateRef: React.RefObject<{ [key: string]: number } | null>;
-}): void => {
-  const saveScroll = React.useCallback(() => {
-    if (scrollTopStateRef.current) {
-      scrollTopStateRef.current[`${key}-scrollTop`] =
-        containerRef?.current?.scrollTop ?? 0;
-    }
-  }, [containerRef, scrollTopStateRef, key]);
-
-  const restoreScroll = React.useCallback(() => {
-    if (containerRef.current) {
-      containerRef.current.scrollTo({
-        top: scrollTopStateRef?.current?.[`${key}-scrollTop`] ?? 0,
-      });
-    }
-  }, [containerRef, key, scrollTopStateRef]);
-
-  React.useLayoutEffect(() => {
-    return () => {
-      saveScroll();
-    };
-  }, [saveScroll]);
-
-  React.useEffect(() => {
-    // Small delay to ensure content is rendered
-    const timeoutId = setTimeout(restoreScroll, 100);
-    return () => clearTimeout(timeoutId);
-  }, [restoreScroll]);
-
-  React.useEffect(() => {
-    restoreScroll();
-  }, [restoreScroll]);
-
-  React.useEffect(() => {
-    const element = containerRef?.current;
-    element?.addEventListener('scroll', saveScroll);
-    return () => {
-      element?.removeEventListener('scroll', saveScroll);
-    };
-  }, [containerRef, saveScroll]);
-};

package/src/mcp/README.md

@@ -1,141 +0,0 @@
-# Hanzo UI MCP Server
-
-The Hanzo UI MCP (Model Context Protocol) server provides AI assistants with comprehensive access to the Hanzo UI component library, enabling them to browse, search, and help developers use Hanzo UI components effectively.
-
-## Quick Start
-
-### For AI Clients
-
-Configure your AI client to use the Hanzo UI MCP server:
-
-**Claude Desktop** (`.mcp.json`):
-```json
-{
-  "mcpServers": {
-    "hanzo-ui": {
-      "command": "npx",
-      "args": ["@hanzo/ui@latest", "mcp"]
-    }
-  }
-}
-```
-
-**Cursor** (`.cursor/mcp.json`):
-```json
-{
-  "mcpServers": {
-    "hanzo-ui": {
-      "command": "npx",
-      "args": ["@hanzo/ui@latest", "mcp"]
-    }
-  }
-}
-```
-
-**VS Code** (`.vscode/mcp.json`):
-```json
-{
-  "mcpServers": {
-    "hanzo-ui": {
-      "command": "npx",
-      "args": ["@hanzo/ui@latest", "mcp"]
-    }
-  }
-}
-```
-
-### Manual Usage
-
-```bash
-# Run the MCP server (stdio mode for AI clients)
-npx @hanzo/ui mcp
-
-# Run in HTTP mode for testing
-npx @hanzo/ui mcp --http --port 3333
-
-# Use custom registry
-npx @hanzo/ui mcp --registry https://my-registry.com/registry.json
-
-# Legacy command (still works)
-npx @hanzo/ui registry:mcp
-```
-
-## Available Tools
-
-The enhanced MCP server provides comprehensive tools:
-
-1. **Component Management**
-   - `init` - Initialize a new project with Hanzo UI
-   - `list_components` - List all available components
-   - `get_component` - Get detailed component information
-   - `get_component_source` - Get full component source code
-   - `get_component_demo` - Get demo implementation
-   - `add_component` - Get installation instructions
-
-2. **Blocks & Patterns**
-   - `list_blocks` - List UI blocks and patterns
-   - `get_block` - Get block details
-
-3. **Search & Discovery**
-   - `search_registry` - Search components by name/description
-   - `list_styles` - View available styles
-   - `get_installation_guide` - Complete setup guide
-
-## Available Resources
-
-The MCP server exposes these resources:
-- `hanzo://components/list` - Complete component catalog
-- `hanzo://blocks/list` - UI blocks and patterns  
-- `hanzo://installation/guide` - Installation guide
-- `hanzo://theming/guide` - Theming documentation
-
-## Available Prompts
-
-AI-assisted development prompts:
-- `component_usage` - Generate usage examples
-- `build_page` - Build complete pages
-- `component_composition` - Create custom components
-- `accessibility_review` - Review accessibility
-- `theme_customization` - Generate custom themes
-
-## Example Interactions
-
-Ask your AI assistant:
-
-- "Show me all available Hanzo UI components"
-- "How do I use the Dialog component?"
-- "Build a login form using Hanzo UI"
-- "Create a dashboard layout with Hanzo components"
-- "Generate a dark theme with purple accents"
-- "Create a custom date picker using Hanzo primitives"
-
-## Development
-
-To build the MCP server:
-
-```bash
-cd pkg/ui
-pnpm build
-```
-
-This will compile the TypeScript files and make the MCP server available.
-
-## Registry Format
-
-The registry follows the same format as hanzo/ui registries, with items defined as:
-
-```json
-{
-  "name": "button",
-  "type": "registry:component",
-  "description": "A button component with different variants.",
-  "files": [
-    {
-      "path": "components/ui/button.tsx",
-      "type": "registry:component"
-    }
-  ]
-}
-```
-
-To configure your own registry, set the `REGISTRY_URL` environment variable before running the MCP server.