@hanzo/ui 4.6.0 → 4.8.2

package/primitives/dialog.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -10,6 +12,8 @@ const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = DialogPrimitive.Portal;
 
+const DialogClose = DialogPrimitive.Close;
+
 const DialogOverlay = ({
   className,
   ...props
@@ -114,6 +118,7 @@ export {
   Dialog,
   DialogPortal,
   DialogOverlay,
+  DialogClose,
   DialogTrigger,
   DialogContent,
   DialogHeader,

package/primitives/drawer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
 import { cn } from '../src/utils';
@@ -20,6 +20,8 @@ const DrawerPortal = DrawerPrimitive.Portal;
 
 const DrawerClose = DrawerPrimitive.Close;
 
+const DrawerHandle = DrawerPrimitive.Handle;
+
 const DrawerOverlay = ({
   className,
   ...props
@@ -102,6 +104,7 @@ export {
   DrawerOverlay,
   DrawerTrigger,
   DrawerClose,
+  DrawerHandle,
   DrawerContent,
   DrawerHeader,
   DrawerFooter,

package/primitives/dropdown-menu.tsx

@@ -1,6 +1,6 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/file-uploader.tsx

@@ -1,5 +1,7 @@
-import { useTranslation } from '@hanzo_network/hanzo-i18n';
-import { partial } from 'filesize';
+// import { useTranslation } from '@hanzo_network/hanzo-i18n';
+const useTranslation = () => ({ t: (key) => key });
+// import { partial } from 'filesize';
+const partial = () => (bytes) => `${(bytes / 1024 / 1024).toFixed(2)} MB`;
 import { Loader2, Trash, Upload } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';

package/primitives/form.tsx

@@ -1,6 +1,6 @@
 import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
+import React from 'react';
 import {
   Controller,
   type ControllerProps,

package/primitives/hover-card.tsx

@@ -1,5 +1,5 @@
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/icons/github.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import type { LucideProps } from 'lucide-react'
+// import type { LucideProps } from 'lucide-react'
 
 
-const GitHub: React.FC<LucideProps> = (props: LucideProps) => (
+const GitHub = (props) => (
   <svg viewBox="0 0 438.549 438.549" {...props}>
     <path
       fill="currentColor"

package/primitives/icons/youtube-logo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { LucideProps } from 'lucide-react'
 
-const YouTubeLogo: React.FC<LucideProps> = (props: LucideProps) => (
+const YouTubeLogo = (props) => (
   <svg 
     viewBox="0 0 256 256" 
     xmlns="http://www.w3.org/2000/svg" 

package/primitives/index-common.ts

@@ -41,9 +41,9 @@ export {
 
 export {
   default as Button,
-  type ButtonProps,
   buttonVariants,
 } from './button'
+export type { ButtonProps } from './button'
 
 export {
   Card,
@@ -101,7 +101,6 @@ export {
 } from './context-menu'
 
 export {
-  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,
@@ -146,6 +145,8 @@ export {
   DropdownMenuRadioGroup,
 } from './dropdown-menu'
 
+export { ErrorMessage } from './error-message'
+
 export {
   useFormField,
   Form,
@@ -206,8 +207,8 @@ export {
   SelectLabel,
   SelectItem,
   SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
+  // SelectScrollUpButton, // Does not exist in select.tsx
+  // SelectScrollDownButton, // Does not exist in select.tsx
 } from './select'
 
 export {
@@ -266,7 +267,7 @@ export { default as Slider } from './slider'
 export { default as Skeleton } from './skeleton'
 export { default as StepIndicator } from './step-indicator'
 export { default as Switch } from './switch'
-export { default as TextArea } from './textarea'
+export { Textarea } from './textarea'
 export { default as TextField } from './textfield'
 export { Toaster, toast } from './sonner'
 export { Toggle, toggleVariants } from './toggle'
@@ -276,7 +277,7 @@ export { default as VideoPlayer } from './video-player'
 // Chat components
 export { ChatInput } from './chat/chat-input'
 export { ChatInputArea } from './chat/chat-input-area'
-export { FileList } from './chat/files-preview'
+// export { FileList } from './chat/files-preview' // Uses Tauri APIs not available in web
 
 // Additional components
 export { CopyToClipboardIcon } from './copy-to-clipboard-icon'

package/primitives/input-otp.tsx

@@ -1,5 +1,5 @@
 'use client'
-import * as React from 'react'
+import React from 'react';
 
 import { OTPInput, type SlotProps } from 'input-otp'
 import { Dot } from 'lucide-react'

package/primitives/input.tsx

@@ -1,5 +1,5 @@
 import { EyeIcon, EyeOffIcon } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 import { useEffect, useImperativeHandle, useRef } from 'react';
 
 import { RefCallBack } from 'react-hook-form';
@@ -123,3 +123,4 @@ const Input = ({
 Input.displayName = 'Input';
 
 export { Input };
+export default Input;

package/primitives/label.tsx

@@ -1,6 +1,6 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -18,3 +18,4 @@ const Label = ({
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };
+export default Label;

package/primitives/markdown-preview.tsx

@@ -607,3 +607,6 @@ export const MarkdownText = memo(
     prev.isRunning === next.isRunning &&
     prev.className === next.className,
 );
+
+// Alias for compatibility
+export const MarkdownPreview = MarkdownText;

package/primitives/mermaid.tsx

@@ -1,5 +1,5 @@
-import { save } from '@tauri-apps/plugin-dialog';
-import * as fs from '@tauri-apps/plugin-fs';
+// import { save } from '@tauri-apps/plugin-dialog'; // Not available in web environment
+// import * as fs from '@tauri-apps/plugin-fs'; // Not available in web environment
 import { RotateCcw, Download } from 'lucide-react';
 import mermaid from 'mermaid';
 import { FC, useEffect, useRef, useState, useCallback } from 'react';
@@ -29,23 +29,18 @@ mermaid.initialize({
 const generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
 
 const downloadBlob = async (blob: Blob, filename: string) => {
-  const filePath = await save({
-    title: 'Save Mermaid Diagram',
-    filters: [
-      {
-        name: 'SVG Files',
-        extensions: ['svg'],
-      },
-    ],
-    defaultPath: filename,
-  });
-
-  if (filePath) {
-    const arrayBuffer = await blob.arrayBuffer();
-    await fs.writeFile(filePath, new Uint8Array(arrayBuffer), {
-      baseDir: fs.BaseDirectory.Download,
-    });
+  // Web-compatible download (instead of Tauri)
+  try {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
     toast.success('Mermaid diagram saved successfully');
+  } catch (error) {
+    toast.error('Failed to download diagram');
   }
 };
 

package/primitives/next/image.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import NextImage from 'next/image'
 
-import type { ImageDef, Dimensions, MediaTransform } from '../../types'
+// @ts-ignore
+const { ImageDef, Dimensions, MediaTransform } = {}
 import { constrain, cn, spreadToTransform } from '../../util'
 
 const Image: React.FC<{

package/primitives/next/inline-icon.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
 import Image from 'next/image'
 
+interface InlineIconProps {
+  /**
+   * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
+   * according to width of parent.
+   */
+  icon: React.ReactNode;
+  /** default should be handled by calling code. */
+  size?: number;
+  agent?: string;
+  className?: string;
+}
 
-const InlineIcon: React.FC<{
-    /**
-     * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
-     * according to width of parent. 
-     */
-  icon: React.ReactNode
-    /** default should be handled by calling code. */
-  size?: number
-
-  agent?: string,
-  className?: string
-}> = ({
+const InlineIcon: React.FC<InlineIconProps> = ({
   icon,
-  size, 
+  size,
   agent,
   className=''
 }) => {
@@ -33,4 +33,4 @@ const InlineIcon: React.FC<{
   )
 }
 
-export default InlineIcon
+export default InlineIcon

package/primitives/next/media-stack.tsx

@@ -1,8 +1,6 @@
 'use client'
 import React from 'react'
 
-import Spline from '@splinetool/react-spline'
-
 import { cn, constrain, spreadToTransform } from '../../util'
 import type { MediaStackDef, Dimensions } from '../../types'
 
@@ -18,26 +16,11 @@ const MediaStack: React.FC<{
   constrainTo: cnst = {w: 250, h: 250},
   clx=''
 }) => {
-  const {img, video, animation, mediaTransform} = media
+  const {img, video, mediaTransform} = media
 
   const transform = mediaTransform ?? {}
 
-    // Order of precedence: 3D > MP4 > Image
-  if (animation) {
-    return ( 
-      <Spline
-        scene={animation}
-        className={cn(clx, 'pointer-events-none')} 
-        data-vaul-no-drag 
-        style={{
-            // // !aspect-[12/10] 
-          width: (6/5 * (typeof cnst.h === 'number' ? cnst.h as number : parseInt(cnst.h as string)) ),
-          height: cnst.h,
-          ...spreadToTransform(transform)
-        }}
-      />
-    )
-  } 
+  // Order of precedence: MP4 > Image
   if (video) {
     const dim = constrain(video.dim.md, cnst)
     return (

package/primitives/pagination.tsx

@@ -1,5 +1,5 @@
 import { MoreHorizontal, RedoIcon, UndoIcon } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { ButtonProps, buttonVariants } from './button';

package/primitives/popover.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -7,6 +7,8 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverArrow = PopoverPrimitive.Arrow;
+const PopoverClose = PopoverPrimitive.Close;
 
 const PopoverContent = ({
   className,
@@ -29,4 +31,4 @@ const PopoverContent = ({
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverClose };

package/primitives/progress.tsx

@@ -1,5 +1,5 @@
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -24,3 +24,4 @@ const Progress = ({
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };
+export default Progress;

package/primitives/prompt-textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { DotsLoader } from './dots-loader';

package/primitives/radio-group.tsx

@@ -2,7 +2,7 @@
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/scroll-area.tsx

@@ -1,5 +1,5 @@
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/search-input.tsx

@@ -1,5 +1,5 @@
 import { SearchIcon, XIcon } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { Button } from './button';

package/primitives/select.tsx

@@ -1,7 +1,7 @@
 import { CheckIcon } from '@radix-ui/react-icons';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/separator.tsx

@@ -1,5 +1,5 @@
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -23,3 +23,4 @@ const Separator = ({
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };
+export default Separator;

package/primitives/sheet.tsx

@@ -1,7 +1,7 @@
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/skeleton.tsx

@@ -15,3 +15,4 @@ function Skeleton({
 }
 
 export { Skeleton };
+export default Skeleton;

package/primitives/slider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as React from 'react';
+import React from 'react';
 import { cn } from '../src/utils';
 
 function Slider({
@@ -60,3 +60,4 @@ function Slider({
 }
 
 export { Slider };
+export default Slider;

package/primitives/stepper.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon } from '@radix-ui/react-icons';
 import { LoaderCircle } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 import { createContext, useContext } from 'react';
 
 import { cn } from '../src/utils';

package/primitives/switch.tsx

@@ -1,5 +1,5 @@
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -24,3 +24,4 @@ const Switch = ({
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };
+export default Switch;

package/primitives/table.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/tabs.tsx

@@ -1,5 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/textarea.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { RefCallBack } from 'react-hook-form';
 import { cn } from '../src/utils';
@@ -59,3 +59,4 @@ const Textarea = ({
 Textarea.displayName = 'Textarea';
 
 export { Textarea };
+export default Textarea;

package/primitives/textfield.tsx

@@ -73,3 +73,4 @@ const TextField = ({
 };
 
 export { TextField };
+export default TextField;

package/primitives/toggle-group.tsx

@@ -1,6 +1,6 @@
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { toggleVariants } from './toggle';

package/primitives/toggle.tsx

@@ -1,6 +1,6 @@
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/tooltip.tsx

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/src/hooks/use-copy-clipboard.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { copyToClipboard } from '../helpers';
+import { copyToClipboard } from '../../util/copy-to-clipboard';
 
 type UseCopyClipboardProps = {
   string?: string;

package/src/index-lean.ts

@@ -0,0 +1,87 @@
+/**
+ * @hanzo/ui - Lean Build (Minimal Bundle)
+ *
+ * This is a lightweight version that excludes heavy dependencies.
+ * Heavy components can be imported separately when needed:
+ *
+ * - Syntax highlighting: import from '@hanzo/ui/components/syntax-highlighter'
+ * - Markdown: import from '@hanzo/ui/components/markdown'
+ * - Math rendering: import from '@hanzo/ui/components/katex'
+ * - Animations: import from 'framer-motion' directly
+ */
+
+// Core utilities - must be imported first
+export { cn } from './utils'
+export * from './utils'
+
+// Hooks (lightweight)
+export * from './hooks'
+
+// Only export the core Radix primitives used in the desktop app
+// Button
+export { Button, buttonVariants } from '../primitives/button'
+export type { ButtonProps } from '../primitives/button'
+
+// Form components
+export * from '../primitives/form'
+export * from '../primitives/input'
+export * from '../primitives/label'
+export * from '../primitives/textarea'
+export * from '../primitives/checkbox'
+export * from '../primitives/radio-group'
+export * from '../primitives/select'
+export * from '../primitives/switch'
+
+// Layout
+export * from '../primitives/card'
+export * from '../primitives/separator'
+export * from '../primitives/scroll-area'
+export * from '../primitives/tabs'
+export * from '../primitives/accordion'
+
+// Feedback
+export * from '../primitives/alert'
+export * from '../primitives/alert-dialog'
+export * from '../primitives/dialog'
+export * from '../primitives/toast'
+export * from '../primitives/progress'
+export * from '../primitives/skeleton'
+export * from '../primitives/badge'
+
+// Navigation
+export * from '../primitives/dropdown-menu'
+export * from '../primitives/command'
+export * from '../primitives/breadcrumb'
+export * from '../primitives/sheet'
+
+// Data display
+export * from '../primitives/table'
+export * from '../primitives/avatar'
+export * from '../primitives/hover-card'
+export * from '../primitives/popover'
+export * from '../primitives/tooltip'
+
+// Other essentials
+export * from '../primitives/collapsible'
+export * from '../primitives/context-menu'
+export * from '../primitives/resizable'
+export * from '../primitives/slider'
+export * from '../primitives/toggle'
+export * from '../primitives/toggle-group'
+
+// Re-export assets (icons are lightweight)
+export * from '../assets'
+
+// Re-export utilities
+export * from '../util'
+export * from '../util/index-client'
+
+// Types
+export * from '../types'
+
+// NOTE: Heavy components excluded from lean build:
+// - MarkdownText (react-markdown + plugins)
+// - SyntaxHighlighter (react-syntax-highlighter)
+// - KatexRender (katex)
+// - Animated components (framer-motion)
+// - MediaStack, Mapbox, Spline3D, PlotlyChart