love-ui 1.2.12 → 1.2.14

package/public/r/comp-553.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-553",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-553.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  AlertCircleIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  Trash2Icon,\n  UploadIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\"\n\nimport {\n  formatBytes,\n  useFileUpload,\n  type FileWithPreview,\n} from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://example.com/intro.zip\",\n    id: \"intro.zip-1744638436563-8u5xuls\",\n  },\n  {\n    name: \"image-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n    id: \"image-01-123456789\",\n  },\n  {\n    name: \"audio.mp3\",\n    size: 1528737,\n    type: \"audio/mpeg\",\n    url: \"https://example.com/audio.mp3\",\n    id: \"audio-123456789\",\n  },\n]\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type\n  const fileName = file.file instanceof File ? file.file.name : file.file.name\n\n  const iconMap = {\n    pdf: {\n      icon: FileTextIcon,\n      conditions: (type: string, name: string) =>\n        type.includes(\"pdf\") ||\n        name.endsWith(\".pdf\") ||\n        type.includes(\"word\") ||\n        name.endsWith(\".doc\") ||\n        name.endsWith(\".docx\"),\n    },\n    archive: {\n      icon: FileArchiveIcon,\n      conditions: (type: string, name: string) =>\n        type.includes(\"zip\") ||\n        type.includes(\"archive\") ||\n        name.endsWith(\".zip\") ||\n        name.endsWith(\".rar\"),\n    },\n    excel: {\n      icon: FileSpreadsheetIcon,\n      conditions: (type: string, name: string) =>\n        type.includes(\"excel\") ||\n        name.endsWith(\".xls\") ||\n        name.endsWith(\".xlsx\"),\n    },\n    video: {\n      icon: VideoIcon,\n      conditions: (type: string) => type.includes(\"video/\"),\n    },\n    audio: {\n      icon: HeadphonesIcon,\n      conditions: (type: string) => type.includes(\"audio/\"),\n    },\n    image: {\n      icon: ImageIcon,\n      conditions: (type: string) => type.startsWith(\"image/\"),\n    },\n  }\n\n  for (const { icon: Icon, conditions } of Object.values(iconMap)) {\n    if (conditions(fileType, fileName)) {\n      return <Icon className=\"size-5 opacity-60\" />\n    }\n  }\n\n  return <FileIcon className=\"size-5 opacity-60\" />\n}\n\nconst getFilePreview = (file: {\n  file: File | { type: string; name: string; url?: string }\n}) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type\n  const fileName = file.file instanceof File ? file.file.name : file.file.name\n\n  const renderImage = (src: string) => (\n    <img\n      src={src}\n      alt={fileName}\n      className=\"size-full rounded-t-[inherit] object-cover\"\n    />\n  )\n\n  return (\n    <div className=\"flex aspect-square items-center justify-center overflow-hidden rounded-t-[inherit] bg-accent\">\n      {fileType.startsWith(\"image/\") ? (\n        file.file instanceof File ? (\n          (() => {\n            const previewUrl = URL.createObjectURL(file.file)\n            return renderImage(previewUrl)\n          })()\n        ) : file.file.url ? (\n          renderImage(file.file.url)\n        ) : (\n          <ImageIcon className=\"size-5 opacity-60\" />\n        )\n      ) : (\n        getFileIcon(file)\n      )}\n    </div>\n  )\n}\n\n// Type for tracking upload progress\ntype UploadProgress = {\n  fileId: string\n  progress: number\n  completed: boolean\n}\n\n// Function to simulate file upload with more realistic timing and progress\nconst simulateUpload = (\n  totalBytes: number,\n  onProgress: (progress: number) => void,\n  onComplete: () => void\n) => {\n  let timeoutId: NodeJS.Timeout\n  let uploadedBytes = 0\n  let lastProgressReport = 0\n\n  const simulateChunk = () => {\n    // Simulate variable network conditions with random chunk sizes\n    const chunkSize = Math.floor(Math.random() * 300000) + 2000\n    uploadedBytes = Math.min(totalBytes, uploadedBytes + chunkSize)\n\n    // Calculate progress percentage (0-100)\n    const progressPercent = Math.floor((uploadedBytes / totalBytes) * 100)\n\n    // Only report progress if it's changed by at least 1%\n    if (progressPercent > lastProgressReport) {\n      lastProgressReport = progressPercent\n      onProgress(progressPercent)\n    }\n\n    // Continue simulation if not complete\n    if (uploadedBytes < totalBytes) {\n      // Variable delay between 50ms and 500ms to simulate network fluctuations (reduced for faster uploads)\n      const delay = Math.floor(Math.random() * 450) + 50\n\n      // Occasionally add a longer pause to simulate network congestion (5% chance, shorter duration)\n      const extraDelay = Math.random() < 0.05 ? 500 : 0\n\n      timeoutId = setTimeout(simulateChunk, delay + extraDelay)\n    } else {\n      // Upload complete\n      onComplete()\n    }\n  }\n\n  // Start the simulation\n  timeoutId = setTimeout(simulateChunk, 100)\n\n  // Return a cleanup function to cancel the simulation\n  return () => {\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n    }\n  }\n}\n\nexport default function Component() {\n  const maxSizeMB = 5\n  const maxSize = maxSizeMB * 1024 * 1024 // 5MB default\n  const maxFiles = 6\n\n  // State to track upload progress for each file\n  const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([])\n\n  // Function to handle newly added files\n  const handleFilesAdded = (addedFiles: FileWithPreview[]) => {\n    // Initialize progress tracking for each new file\n    const newProgressItems = addedFiles.map((file) => ({\n      fileId: file.id,\n      progress: 0,\n      completed: false,\n    }))\n\n    // Add new progress items to state\n    setUploadProgress((prev) => [...prev, ...newProgressItems])\n\n    // Store cleanup functions\n    const cleanupFunctions: Array<() => void> = []\n\n    // Start simulated upload for each file\n    addedFiles.forEach((file) => {\n      const fileSize =\n        file.file instanceof File ? file.file.size : file.file.size\n\n      // Start the upload simulation and store the cleanup function\n      const cleanup = simulateUpload(\n        fileSize,\n        // Progress callback\n        (progress) => {\n          setUploadProgress((prev) =>\n            prev.map((item) =>\n              item.fileId === file.id ? { ...item, progress } : item\n            )\n          )\n        },\n        // Complete callback\n        () => {\n          setUploadProgress((prev) =>\n            prev.map((item) =>\n              item.fileId === file.id ? { ...item, completed: true } : item\n            )\n          )\n        }\n      )\n\n      cleanupFunctions.push(cleanup)\n    })\n\n    // Return a cleanup function that cancels all animations\n    return () => {\n      cleanupFunctions.forEach((cleanup) => cleanup())\n    }\n  }\n\n  // Remove the progress tracking for the file\n  const handleFileRemoved = (fileId: string) => {\n    setUploadProgress((prev) => prev.filter((item) => item.fileId !== fileId))\n  }\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    multiple: true,\n    maxFiles,\n    maxSize,\n    initialFiles,\n    onFilesAdded: handleFilesAdded,\n  })\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        className=\"relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed border-input p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n      >\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n        />\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate text-sm font-medium\">\n                Files ({files.length})\n              </h3>\n              <div className=\"flex gap-2\">\n                <Button variant=\"outline\" size=\"sm\" onClick={openFileDialog}>\n                  <UploadIcon\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  Add files\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => {\n                    // Clear all progress tracking\n                    setUploadProgress([])\n                    clearFiles()\n                  }}\n                >\n                  <Trash2Icon\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  Remove all\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"w-full space-y-2\">\n              {files.map((file) => {\n                // Find the upload progress for this file once to avoid repeated lookups\n                const fileProgress = uploadProgress.find(\n                  (p) => p.fileId === file.id\n                )\n                const isUploading = fileProgress && !fileProgress.completed\n\n                return (\n                  <div\n                    key={file.id}\n                    data-uploading={isUploading || undefined}\n                    className=\"flex flex-col gap-1 rounded-lg border bg-background p-2 pe-3 transition-opacity duration-300\"\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <div className=\"flex items-center gap-3 overflow-hidden in-data-[uploading=true]:opacity-50\">\n                        <div className=\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\">\n                          {getFileIcon(file)}\n                        </div>\n                        <div className=\"flex min-w-0 flex-col gap-0.5\">\n                          <p className=\"truncate text-[13px] font-medium\">\n                            {file.file instanceof File\n                              ? file.file.name\n                              : file.file.name}\n                          </p>\n                          <p className=\"text-xs text-muted-foreground\">\n                            {formatBytes(\n                              file.file instanceof File\n                                ? file.file.size\n                                : file.file.size\n                            )}\n                          </p>\n                        </div>\n                      </div>\n                      <Button\n                        size=\"icon\"\n                        variant=\"ghost\"\n                        className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                        onClick={() => {\n                          handleFileRemoved(file.id)\n                          removeFile(file.id)\n                        }}\n                        aria-label=\"Remove file\"\n                      >\n                        <XIcon className=\"size-4\" aria-hidden=\"true\" />\n                      </Button>\n                    </div>\n\n                    {/* Upload progress bar */}\n                    {fileProgress &&\n                      (() => {\n                        const progress = fileProgress.progress || 0\n                        const completed = fileProgress.completed || false\n\n                        if (completed) return null\n\n                        return (\n                          <div className=\"mt-1 flex items-center gap-2\">\n                            <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-100\">\n                              <div\n                                className=\"h-full bg-primary transition-all duration-300 ease-out\"\n                                style={{ width: `${progress}%` }}\n                              />\n                            </div>\n                            <span className=\"w-10 text-xs text-muted-foreground tabular-nums\">\n                              {progress}%\n                            </span>\n                          </div>\n                        )\n                      })()}\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n            <div\n              className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n              aria-hidden=\"true\"\n            >\n              <ImageIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 text-sm font-medium\">Drop your files here</p>\n            <p className=\"text-xs text-muted-foreground\">\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\n            </p>\n            <Button variant=\"outline\" className=\"mt-4\" onClick={openFileDialog}>\n              <UploadIcon className=\"-ms-1 opacity-60\" aria-hidden=\"true\" />\n              Select images\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-xs text-destructive\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-center text-xs text-muted-foreground\"\n      >\n        With simulated progress track ∙{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "upload",
+      "file",
+      "image",
+      "drag and drop"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-554.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-554",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/cropper.json",
+    "https://loveui.dev/building-blocks/r/dialog.json",
+    "https://loveui.dev/building-blocks/r/slider.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-554.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n  ArrowLeftIcon,\n  CircleUserRoundIcon,\n  XIcon,\n  ZoomInIcon,\n  ZoomOutIcon,\n} from \"lucide-react\"\n\nimport { useFileUpload } from \"@/registry/building-blocks/default/hooks/use-file-upload\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/building-blocks/default/ui/dialog\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\n// Define type for pixel crop area\ntype Area = { x: number; y: number; width: number; height: number }\n\n// Helper function to create a cropped image blob\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image()\n    image.addEventListener(\"load\", () => resolve(image))\n    image.addEventListener(\"error\", (error) => reject(error))\n    image.setAttribute(\"crossOrigin\", \"anonymous\") // Needed for canvas Tainted check\n    image.src = url\n  })\n\nasync function getCroppedImg(\n  imageSrc: string,\n  pixelCrop: Area,\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\n  outputHeight: number = pixelCrop.height\n): Promise<Blob | null> {\n  try {\n    const image = await createImage(imageSrc)\n    const canvas = document.createElement(\"canvas\")\n    const ctx = canvas.getContext(\"2d\")\n\n    if (!ctx) {\n      return null\n    }\n\n    // Set canvas size to desired output size\n    canvas.width = outputWidth\n    canvas.height = outputHeight\n\n    // Draw the cropped image onto the canvas\n    ctx.drawImage(\n      image,\n      pixelCrop.x,\n      pixelCrop.y,\n      pixelCrop.width,\n      pixelCrop.height,\n      0,\n      0,\n      outputWidth, // Draw onto the output size\n      outputHeight\n    )\n\n    // Convert canvas to blob\n    return new Promise((resolve) => {\n      canvas.toBlob((blob) => {\n        resolve(blob)\n      }, \"image/jpeg\") // Specify format and quality if needed\n    })\n  } catch (error) {\n    console.error(\"Error in getCroppedImg:\", error)\n    return null\n  }\n}\n\nexport default function Component() {\n  const [\n    { files, isDragging },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n  })\n\n  const previewUrl = files[0]?.preview || null\n  const fileId = files[0]?.id\n\n  const [finalImageUrl, setFinalImageUrl] = useState<string | null>(null)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n\n  // Ref to track the previous file ID to detect new uploads\n  const previousFileIdRef = useRef<string | undefined | null>(null)\n\n  // State to store the desired crop area in pixels\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)\n\n  // State for zoom level\n  const [zoom, setZoom] = useState(1)\n\n  // Callback for Cropper to provide crop data - Wrap with useCallback\n  const handleCropChange = useCallback((pixels: Area | null) => {\n    setCroppedAreaPixels(pixels)\n  }, [])\n\n  const handleApply = async () => {\n    // Check if we have the necessary data\n    if (!previewUrl || !fileId || !croppedAreaPixels) {\n      console.error(\"Missing data for apply:\", {\n        previewUrl,\n        fileId,\n        croppedAreaPixels,\n      })\n      // Remove file if apply is clicked without crop data?\n      if (fileId) {\n        removeFile(fileId)\n        setCroppedAreaPixels(null)\n      }\n      return\n    }\n\n    try {\n      // 1. Get the cropped image blob using the helper\n      const croppedBlob = await getCroppedImg(previewUrl, croppedAreaPixels)\n\n      if (!croppedBlob) {\n        throw new Error(\"Failed to generate cropped image blob.\")\n      }\n\n      // 2. Create a NEW object URL from the cropped blob\n      const newFinalUrl = URL.createObjectURL(croppedBlob)\n\n      // 3. Revoke the OLD finalImageUrl if it exists\n      if (finalImageUrl) {\n        URL.revokeObjectURL(finalImageUrl)\n      }\n\n      // 4. Set the final avatar state to the NEW URL\n      setFinalImageUrl(newFinalUrl)\n\n      // 5. Close the dialog (don't remove the file yet)\n      setIsDialogOpen(false)\n    } catch (error) {\n      console.error(\"Error during apply:\", error)\n      // Close the dialog even if cropping fails\n      setIsDialogOpen(false)\n    }\n  }\n\n  const handleRemoveFinalImage = () => {\n    if (finalImageUrl) {\n      URL.revokeObjectURL(finalImageUrl)\n    }\n    setFinalImageUrl(null)\n  }\n\n  useEffect(() => {\n    const currentFinalUrl = finalImageUrl\n    // Cleanup function\n    return () => {\n      if (currentFinalUrl && currentFinalUrl.startsWith(\"blob:\")) {\n        URL.revokeObjectURL(currentFinalUrl)\n      }\n    }\n  }, [finalImageUrl])\n\n  // Effect to open dialog when a *new* file is ready\n  useEffect(() => {\n    // Check if fileId exists and is different from the previous one\n    if (fileId && fileId !== previousFileIdRef.current) {\n      setIsDialogOpen(true) // Open dialog for the new file\n      setCroppedAreaPixels(null) // Reset crop area for the new file\n      setZoom(1) // Reset zoom for the new file\n    }\n    // Update the ref to the current fileId for the next render\n    previousFileIdRef.current = fileId\n  }, [fileId]) // Depend only on fileId\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        {/* Drop area - uses finalImageUrl */}\n        <button\n          className=\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-dashed border-input transition-colors outline-none hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-disabled:opacity-50 has-[img]:border-none data-[dragging=true]:bg-accent/50\"\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          data-dragging={isDragging || undefined}\n          aria-label={finalImageUrl ? \"Change image\" : \"Upload image\"}\n        >\n          {finalImageUrl ? (\n            <img\n              className=\"size-full object-cover\"\n              src={finalImageUrl}\n              alt=\"User avatar\"\n              width={64}\n              height={64}\n              style={{ objectFit: \"cover\" }}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </button>\n        {/* Remove button - depends on finalImageUrl */}\n        {finalImageUrl && (\n          <Button\n            onClick={handleRemoveFinalImage}\n            size=\"icon\"\n            className=\"absolute -top-1 -right-1 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            aria-label=\"Remove image\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n          tabIndex={-1}\n        />\n      </div>\n\n      {/* Cropper Dialog - Use isDialogOpen for open prop */}\n      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n        <DialogContent className=\"gap-0 p-0 sm:max-w-140 *:[button]:hidden\">\n          <DialogDescription className=\"sr-only\">\n            Crop image dialog\n          </DialogDescription>\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"flex items-center justify-between border-b p-4 text-base\">\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"-my-1 opacity-60\"\n                  onClick={() => setIsDialogOpen(false)}\n                  aria-label=\"Cancel\"\n                >\n                  <ArrowLeftIcon aria-hidden=\"true\" />\n                </Button>\n                <span>Crop image</span>\n              </div>\n              <Button\n                className=\"-my-1\"\n                onClick={handleApply}\n                disabled={!previewUrl}\n                autoFocus\n              >\n                Apply\n              </Button>\n            </DialogTitle>\n          </DialogHeader>\n          {previewUrl && (\n            <Cropper\n              className=\"h-96 sm:h-120\"\n              image={previewUrl}\n              zoom={zoom}\n              onCropChange={handleCropChange}\n              onZoomChange={setZoom}\n            >\n              <CropperDescription />\n              <CropperImage />\n              <CropperCropArea />\n            </Cropper>\n          )}\n          <DialogFooter className=\"border-t px-4 py-6\">\n            <div className=\"mx-auto flex w-full max-w-80 items-center gap-4\">\n              <ZoomOutIcon\n                className=\"shrink-0 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n              <Slider\n                defaultValue={[1]}\n                value={[zoom]}\n                min={1}\n                max={3}\n                step={0.1}\n                onValueChange={(value) => setZoom(value[0])}\n                aria-label=\"Zoom slider\"\n              />\n              <ZoomInIcon\n                className=\"shrink-0 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            </div>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Avatar{\" \"}\n        <a\n          href=\"https://github.com/loveui/blob/main/apps/origin/docs/use-file-upload.md\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          uploader\n        </a>{\" \"}\n        with{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          cropper\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-file-upload.ts",
+      "content": "\"use client\"\n\nimport type React from \"react\"\nimport {\n  useCallback,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n} from \"react\"\n\nexport type FileMetadata = {\n  name: string\n  size: number\n  type: string\n  url: string\n  id: string\n}\n\nexport type FileWithPreview = {\n  file: File | FileMetadata\n  id: string\n  preview?: string\n}\n\nexport type FileUploadOptions = {\n  maxFiles?: number // Only used when multiple is true, defaults to Infinity\n  maxSize?: number // in bytes\n  accept?: string\n  multiple?: boolean // Defaults to false\n  initialFiles?: FileMetadata[]\n  onFilesChange?: (files: FileWithPreview[]) => void // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void // Callback when new files are added\n}\n\nexport type FileUploadState = {\n  files: FileWithPreview[]\n  isDragging: boolean\n  errors: string[]\n}\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void\n  removeFile: (id: string) => void\n  clearFiles: () => void\n  clearErrors: () => void\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void\n  handleDragOver: (e: DragEvent<HTMLElement>) => void\n  handleDrop: (e: DragEvent<HTMLElement>) => void\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void\n  openFileDialog: () => void\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    ref: any\n  }\n}\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {}\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Infinity,\n    maxSize = Infinity,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options\n\n  const [state, setState] = useState<FileUploadState>({\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n    errors: [],\n  })\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim())\n        const fileType = file instanceof File ? file.type || \"\" : file.type\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase()\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0]\n            return fileType.startsWith(`${baseType}/`)\n          }\n          return fileType === type\n        })\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`\n        }\n      }\n\n      return null\n    },\n    [accept, maxSize]\n  )\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file)\n      }\n      return file.url\n    },\n    []\n  )\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n    }\n    return file.id\n  }, [])\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      prev.files.forEach((file) => {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview)\n        }\n      })\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n\n      const newState = {\n        ...prev,\n        files: [],\n        errors: [],\n      }\n\n      onFilesChange?.(newState.files)\n      return newState\n    })\n  }, [onFilesChange])\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return\n\n      const newFilesArray = Array.from(newFiles)\n      const errors: string[] = []\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }))\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles()\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Infinity &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`)\n        setState((prev) => ({ ...prev, errors }))\n        return\n      }\n\n      const validFiles: FileWithPreview[] = []\n\n      newFilesArray.forEach((file) => {\n        // Only check for duplicates if multiple files are allowed\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size\n          )\n\n          // Skip duplicate files silently\n          if (isDuplicate) {\n            return\n          }\n        }\n\n        // Check file size\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`\n          )\n          return\n        }\n\n        const error = validateFile(file)\n        if (error) {\n          errors.push(error)\n        } else {\n          validFiles.push({\n            file,\n            id: generateUniqueId(file),\n            preview: createPreview(file),\n          })\n        }\n      })\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles)\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles]\n          onFilesChange?.(newFiles)\n          return {\n            ...prev,\n            files: newFiles,\n            errors,\n          }\n        })\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }))\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\"\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ]\n  )\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id)\n        if (\n          fileToRemove &&\n          fileToRemove.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview)\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id)\n        onFilesChange?.(newFiles)\n\n        return {\n          ...prev,\n          files: newFiles,\n          errors: [],\n        }\n      })\n    },\n    [onFilesChange]\n  )\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }))\n  }, [])\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setState((prev) => ({ ...prev, isDragging: true }))\n  }, [])\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }))\n  }, [])\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n  }, [])\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault()\n      e.stopPropagation()\n      setState((prev) => ({ ...prev, isDragging: false }))\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0]\n          addFiles([file])\n        } else {\n          addFiles(e.dataTransfer.files)\n        }\n      }\n    },\n    [addFiles, multiple]\n  )\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files)\n      }\n    },\n    [addFiles]\n  )\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [])\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        type: \"file\" as const,\n        onChange: handleFileChange,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        ref: inputRef as any,\n      }\n    },\n    [accept, multiple, handleFileChange]\n  )\n\n  return [\n    state,\n    {\n      addFiles,\n      removeFile,\n      clearFiles,\n      clearErrors,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      getInputProps,\n    },\n  ]\n}\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\"\n\n  const k = 1024\n  const dm = decimals < 0 ? 0 : decimals\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"]\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i]\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "upload",
+      "file",
+      "image",
+      "drag and drop",
+      "crop",
+      "dialog",
+      "slider",
+      "zoom"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-555.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-555",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-555.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-01_bcxaic.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic cropper ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-556.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-556",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-556.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-02_a2xwtd.jpg\"\n        aspectRatio={16 / 9}\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with aspect ratio 16:9 ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-557.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-557",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-557.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-03_uym8r0.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"border-blue-500\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with custom crop area color ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-558.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-558",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-558.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80 bg-black\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-04_jflxhw.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"shadow-[0_0_0_9999px_rgba(255,255,255,0.5)]\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with custom mask overlay ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-559.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-559",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-559.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"aspect-square size-80\"\n        cropPadding={0}\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-05_evczb3.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"border-4 border-blue-500\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with full size crop area ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-56.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-56",
+  "type": "registry:component",
+  "dependencies": [
+    "emblor"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-56.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { Tag, TagInput } from \"emblor\"\n\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nconst tags = [\n  {\n    id: \"1\",\n    text: \"Sport\",\n  },\n  {\n    id: \"2\",\n    text: \"Coding\",\n  },\n  {\n    id: \"3\",\n    text: \"Travel\",\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags)\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with tags</Label>\n      <TagInput\n        id={id}\n        tags={exampleTags}\n        setTags={(newTags) => {\n          setExampleTags(newTags)\n        }}\n        placeholder=\"Add a tag\"\n        styleClasses={{\n          tagList: {\n            container: \"gap-1\",\n          },\n          input:\n            \"rounded-md transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          tag: {\n            body: \"relative h-7 bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\",\n            closeButton:\n              \"absolute -inset-y-px -end-px p-0 rounded-s-none rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\",\n          },\n        }}\n        activeTagIndex={activeTagIndex}\n        setActiveTagIndex={setActiveTagIndex}\n        inlineTags={false}\n        inputFieldPosition=\"top\"\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/JaleelB/emblor\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          emblor\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "tag",
+      "emblor"
+    ]
+  }
+}

package/public/r/comp-560.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-560",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-560.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-06_dduwky.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"rounded-full\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with full-rounded mask ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-561.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-561",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-561.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\nimport { Slider } from \"@/registry/building-blocks/default/ui/slider\"\n\nexport default function Component() {\n  const [zoom, setZoom] = useState(1)\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Cropper\n          className=\"h-80\"\n          image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-07_scsejv.jpg\"\n          zoom={zoom}\n          onZoomChange={setZoom}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n        <div className=\"mx-auto flex w-full max-w-80 items-center gap-1\">\n          <Slider\n            defaultValue={[1]}\n            value={[zoom]}\n            min={1}\n            max={3}\n            step={0.1}\n            onValueChange={(value) => setZoom(value[0])}\n            aria-label=\"Zoom slider\"\n          />\n          <output className=\"block w-10 shrink-0 text-right text-sm font-medium tabular-nums\">\n            {parseFloat(zoom.toFixed(1))}x\n          </output>\n        </div>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with zoom slider ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom",
+      "slider"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-562.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-562",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-562.tsx",
+      "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        minZoom={2}\n        maxZoom={10}\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-08_wneftq.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with custom zoom limits ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-563.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-563",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-563.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\ntype Area = { x: number; y: number; width: number; height: number }\n\nexport default function Component() {\n  const [cropData, setCropData] = React.useState<Area | null>(null)\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Cropper\n          className=\"h-80\"\n          cropPadding={20}\n          image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-09_qskkln.jpg\"\n          onCropChange={setCropData}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n\n        {cropData && (\n          <pre className=\"overflow-auto rounded-md border bg-muted px-4 py-3 font-mono text-xs text-foreground/80\">\n            <code>{JSON.stringify(cropData, null, 2)}</code>\n          </pre>\n        )}\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with crop data output ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-564.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-564",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/cropper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-564.tsx",
+      "content": "\"use client\"\n\nimport { useCallback, useEffect, useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/building-blocks/default/ui/cropper\"\n\n// Define type for pixel crop area\ntype Area = { x: number; y: number; width: number; height: number }\n\n// --- Start: Copied Helper Functions ---\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image()\n    image.addEventListener(\"load\", () => resolve(image))\n    image.addEventListener(\"error\", (error) => reject(error))\n    image.setAttribute(\"crossOrigin\", \"anonymous\") // Needed for canvas Tainted check\n    image.src = url\n  })\n\nasync function getCroppedImg(\n  imageSrc: string,\n  pixelCrop: Area,\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\n  outputHeight: number = pixelCrop.height\n): Promise<Blob | null> {\n  try {\n    const image = await createImage(imageSrc)\n    const canvas = document.createElement(\"canvas\")\n    const ctx = canvas.getContext(\"2d\")\n\n    if (!ctx) {\n      return null\n    }\n\n    // Set canvas size to desired output size\n    canvas.width = outputWidth\n    canvas.height = outputHeight\n\n    // Draw the cropped image onto the canvas\n    ctx.drawImage(\n      image,\n      pixelCrop.x,\n      pixelCrop.y,\n      pixelCrop.width,\n      pixelCrop.height,\n      0,\n      0,\n      outputWidth, // Draw onto the output size\n      outputHeight\n    )\n\n    // Convert canvas to blob\n    return new Promise((resolve) => {\n      canvas.toBlob((blob) => {\n        resolve(blob)\n      }, \"image/jpeg\") // Specify format and quality if needed\n    })\n  } catch (error) {\n    console.error(\"Error in getCroppedImg:\", error)\n    return null\n  }\n}\n// --- End: Copied Helper Functions ---\n\nconst ORIGINAL_IMAGE_URL =\n  \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-10_k24zxk.jpg\"\n\nexport default function Component() {\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)\n  const [croppedImageUrl, setCroppedImageUrl] = useState<string | null>(null)\n\n  // Callback to update crop area state\n  const handleCropChange = useCallback((pixels: Area | null) => {\n    setCroppedAreaPixels(pixels)\n  }, [])\n\n  // Function to handle the crop button click\n  const handleCrop = async () => {\n    if (!croppedAreaPixels) {\n      console.error(\"No crop area selected.\")\n      return\n    }\n\n    try {\n      const croppedBlob = await getCroppedImg(\n        ORIGINAL_IMAGE_URL,\n        croppedAreaPixels\n      )\n      if (!croppedBlob) {\n        throw new Error(\"Failed to generate cropped image blob.\")\n      }\n\n      // Create a new object URL\n      const newCroppedUrl = URL.createObjectURL(croppedBlob)\n\n      // Revoke the old URL if it exists\n      if (croppedImageUrl) {\n        URL.revokeObjectURL(croppedImageUrl)\n      }\n\n      // Set the new URL\n      setCroppedImageUrl(newCroppedUrl)\n    } catch (error) {\n      console.error(\"Error during cropping:\", error)\n      // Optionally: Clear the old image URL on error\n      if (croppedImageUrl) {\n        URL.revokeObjectURL(croppedImageUrl)\n      }\n      setCroppedImageUrl(null)\n    }\n  }\n\n  // Effect for cleaning up the object URL\n  useEffect(() => {\n    // This is the cleanup function that runs when the component unmounts\n    // or when croppedImageUrl changes before the next effect runs.\n    const currentUrl = croppedImageUrl\n    return () => {\n      if (currentUrl && currentUrl.startsWith(\"blob:\")) {\n        URL.revokeObjectURL(currentUrl)\n        console.log(\"Revoked URL:\", currentUrl) // Optional: for debugging\n      }\n    }\n  }, [croppedImageUrl]) // Dependency array ensures cleanup runs when URL changes\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4 md:flex-row\">\n        <Cropper\n          className=\"h-64 md:flex-1\"\n          image={ORIGINAL_IMAGE_URL}\n          onCropChange={handleCropChange}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n        <div className=\"flex w-26 flex-col gap-4\">\n          <Button onClick={handleCrop} disabled={!croppedAreaPixels}>\n            Crop preview\n          </Button>\n          {/* Display Area */}\n          <div className=\"aspect-square w-full shrink-0 overflow-hidden rounded-lg border\">\n            {croppedImageUrl ? (\n              <img\n                src={croppedImageUrl}\n                alt=\"Cropped result\"\n                className=\"h-full w-full object-cover\"\n              />\n            ) : (\n              <div className=\"flex h-full w-full items-center justify-center bg-muted p-2 text-center text-xs text-muted-foreground/80\">\n                Image preview\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Cropper with image preview ∙{\" \"}\n        <a\n          href=\"https://github.com/origin-space/image-cropper\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "image",
+      "crop",
+      "zoom"
+    ],
+    "colSpan": 2
+  }
+}

package/public/r/comp-565.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-565",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-565.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem key={item.getId()} item={item}>\n              <TreeItemLabel />\n            </TreeItem>\n          )\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic tree with no extra features ∙{\" \"}\n        <a\n          href=\"https://headless-tree.lukasbach.com\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-566.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-566",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-566.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem key={item.getId()} item={item}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\" />\n              </TreeItem>\n            )\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic tree with vertical lines ∙{\" \"}\n        <a\n          href=\"https://headless-tree.lukasbach.com\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-567.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-567",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-567.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem key={item.getId()} item={item}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                  <span className=\"flex items-center gap-2\">\n                    {item.isFolder() ? (\n                      item.isExpanded() ? (\n                        <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ) : (\n                        <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )\n                    ) : (\n                      <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            )\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic tree with icons ∙{\" \"}\n        <a\n          href=\"https://headless-tree.lukasbach.com\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}

package/public/r/comp-568.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-568",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/tree.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-568.tsx",
+      "content": "\"use client\"\n\nimport React from \"react\"\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\"\nimport { useTree } from \"@headless-tree/react\"\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\"\n\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/building-blocks/default/ui/tree\"\n\ninterface Item {\n  name: string\n  children?: string[]\n}\n\nconst items: Record<string, Item> = {\n  company: {\n    name: \"Company\",\n    children: [\"engineering\", \"marketing\", \"operations\"],\n  },\n  engineering: {\n    name: \"Engineering\",\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n  },\n  frontend: { name: \"Frontend\", children: [\"design-system\", \"web-platform\"] },\n  \"design-system\": {\n    name: \"Design System\",\n    children: [\"components\", \"tokens\", \"guidelines\"],\n  },\n  components: { name: \"Components\" },\n  tokens: { name: \"Tokens\" },\n  guidelines: { name: \"Guidelines\" },\n  \"web-platform\": { name: \"Web Platform\" },\n  backend: { name: \"Backend\", children: [\"apis\", \"infrastructure\"] },\n  apis: { name: \"APIs\" },\n  infrastructure: { name: \"Infrastructure\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  marketing: { name: \"Marketing\", children: [\"content\", \"seo\"] },\n  content: { name: \"Content\" },\n  seo: { name: \"SEO\" },\n  operations: { name: \"Operations\", children: [\"hr\", \"finance\"] },\n  hr: { name: \"HR\" },\n  finance: { name: \"Finance\" },\n}\n\nconst indent = 20\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    indent,\n    rootItemId: \"company\",\n    getItemName: (item) => item.getItemData().name,\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    dataLoader: {\n      getItem: (itemId) => items[itemId],\n      getChildren: (itemId) => items[itemId].children ?? [],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n  })\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem key={item.getId()} item={item}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                  <span className=\"-order-1 flex flex-1 items-center gap-2\">\n                    {item.isFolder() ? (\n                      item.isExpanded() ? (\n                        <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ) : (\n                        <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )\n                    ) : (\n                      <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            )\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        role=\"region\"\n        className=\"mt-2 text-xs text-muted-foreground\"\n      >\n        Basic tree with caret icon on the right ∙{\" \"}\n        <a\n          href=\"https://headless-tree.lukasbach.com\"\n          className=\"underline hover:text-foreground\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "tree"
+    ]
+  }
+}