@deck-ui/workspace 0.1.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck-ui/workspace",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/drop-zone.tsx

@@ -0,0 +1,92 @@
+/**
+ * Drop zone hooks for drag-and-drop file imports.
+ * Container-level highlight + folder-level targeting (Finder-style).
+ */
+import { useCallback, useRef, useState } from "react"
+
+/** Tracks whether files are being dragged over the container. */
+export function useDropZone(
+  onFilesDropped?: (files: File[], targetFolder?: string) => void,
+) {
+  const [isDragging, setIsDragging] = useState(false)
+  const counter = useRef(0)
+
+  const onDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    counter.current++
+    if (e.dataTransfer.types.includes("Files")) setIsDragging(true)
+  }, [])
+
+  const onDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    counter.current--
+    if (counter.current === 0) setIsDragging(false)
+  }, [])
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      counter.current = 0
+      setIsDragging(false)
+      if (!onFilesDropped) return
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length > 0) onFilesDropped(files)
+    },
+    [onFilesDropped],
+  )
+
+  return {
+    isDragging,
+    dragHandlers: { onDragEnter, onDragLeave, onDragOver, onDrop },
+  }
+}
+
+/**
+ * Tracks drag-over state for an entire folder section (header + children).
+ * Stops propagation on drop so the container handler doesn't also fire.
+ */
+export function useFolderDropTarget(
+  folder: string,
+  onFilesDropped?: (files: File[], targetFolder?: string) => void,
+) {
+  const [isOver, setIsOver] = useState(false)
+  const counter = useRef(0)
+
+  const onDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    counter.current++
+    if (e.dataTransfer.types.includes("Files")) setIsOver(true)
+  }, [])
+
+  const onDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    counter.current--
+    if (counter.current === 0) setIsOver(false)
+  }, [])
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+  }, [])
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation() // only stop propagation on drop to prevent container double-handling
+      counter.current = 0
+      setIsOver(false)
+      if (!onFilesDropped) return
+      const files = Array.from(e.dataTransfer.files)
+      if (files.length > 0) onFilesDropped(files, folder)
+    },
+    [onFilesDropped, folder],
+  )
+
+  return {
+    isOver,
+    folderHandlers: { onDragEnter, onDragLeave, onDragOver, onDrop },
+  }
+}

package/src/file-row.tsx

@@ -0,0 +1,208 @@
+/**
+ * File row, folder section, and file icon sub-components.
+ * Extracted from FilesBrowser to keep files under 200 lines.
+ */
+import { useEffect, useState } from "react"
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@deck-ui/core"
+import {
+  ChevronRight,
+  ExternalLink,
+  FileText,
+  FolderSearch,
+  Image as ImageIcon,
+  MoreVertical,
+  Trash2,
+} from "lucide-react"
+import type { FileEntry } from "./types"
+import { useFolderDropTarget } from "./drop-zone"
+
+export function FolderSection({
+  name,
+  files,
+  onOpen,
+  onReveal,
+  onDelete,
+  onFilesDropped,
+  onDragActive,
+}: {
+  name: string
+  files: FileEntry[]
+  onOpen?: (file: FileEntry) => void
+  onReveal?: (file: FileEntry) => void
+  onDelete?: (file: FileEntry) => void
+  onFilesDropped?: (files: File[], targetFolder?: string) => void
+  onDragActive?: (folder: string | null) => void
+}) {
+  const [open, setOpen] = useState(true)
+  const { isOver, folderHandlers } = useFolderDropTarget(name, onFilesDropped)
+
+  useEffect(() => {
+    onDragActive?.(isOver ? name : null)
+  }, [isOver, name, onDragActive])
+
+  return (
+    <div {...(onFilesDropped ? folderHandlers : {})}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center h-8 px-6 transition-colors duration-150 select-none hover:bg-secondary"
+        style={isOver ? { backgroundColor: "rgba(0,0,0,0.06)" } : undefined}
+      >
+        <ChevronRight
+          className={cn(
+            "size-3.5 text-muted-foreground/40 transition-transform duration-200 mr-2",
+            open && "rotate-90",
+          )}
+        />
+        <span
+          className="text-xs font-medium flex-1 text-left text-muted-foreground/60"
+          style={isOver ? { color: "var(--color-foreground)" } : undefined}
+        >
+          {name}
+        </span>
+        <span className="text-[10px] text-muted-foreground/30">
+          {files.length}
+        </span>
+      </button>
+      {open && (
+        <div style={isOver ? { backgroundColor: "rgba(0,0,0,0.03)" } : undefined}>
+          {files.map((f) => (
+            <FileRow
+              key={f.path}
+              file={f}
+              indent
+              onOpen={onOpen}
+              onReveal={onReveal}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function FileRow({
+  file,
+  indent,
+  onOpen,
+  onReveal,
+  onDelete,
+}: {
+  file: FileEntry
+  indent?: boolean
+  onOpen?: (file: FileEntry) => void
+  onReveal?: (file: FileEntry) => void
+  onDelete?: (file: FileEntry) => void
+}) {
+  const ext = file.extension
+  const hasActions = onOpen || onReveal || onDelete
+
+  return (
+    <button
+      onClick={() => onOpen?.(file)}
+      className={cn(
+        "w-full flex items-center h-9 px-6 hover:bg-secondary",
+        "active:bg-accent transition-colors duration-100 text-left group",
+        indent && "pl-11",
+      )}
+    >
+      <div className="flex items-center gap-2.5 flex-1 min-w-0">
+        <FileIcon extension={ext} />
+        <span className="text-[13px] text-foreground truncate">
+          {file.name}
+        </span>
+      </div>
+      <span className="w-20 text-right text-[11px] text-muted-foreground/30">
+        {formatSize(file.size)}
+      </span>
+      {hasActions && (
+        <div className="w-10 flex justify-end">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <span
+                role="button"
+                onClick={(e) => e.stopPropagation()}
+                className="flex items-center justify-center w-6 h-6 rounded text-muted-foreground/20 hover:text-foreground hover:bg-black/[0.05] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all duration-150"
+              >
+                <MoreVertical className="size-3.5" />
+              </span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {onOpen && (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onOpen(file)
+                  }}
+                >
+                  <ExternalLink className="size-4 mr-2" />
+                  Open
+                </DropdownMenuItem>
+              )}
+              {onReveal && (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onReveal(file)
+                  }}
+                >
+                  <FolderSearch className="size-4 mr-2" />
+                  Show in Finder
+                </DropdownMenuItem>
+              )}
+              {onDelete && (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onDelete(file)
+                  }}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="size-4 mr-2" />
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    </button>
+  )
+}
+
+function FileIcon({ extension }: { extension: string }) {
+  if (["png", "jpg", "jpeg", "svg", "gif", "webp"].includes(extension)) {
+    return <ImageIcon className="size-4 shrink-0 text-muted-foreground/50" />
+  }
+  if (extension === "pdf") {
+    return (
+      <svg className="size-4 shrink-0" viewBox="0 0 16 16" fill="none">
+        <rect width="16" height="16" rx="3" fill="#E5252A" />
+        <text
+          x="8"
+          y="11"
+          textAnchor="middle"
+          fill="white"
+          fontSize="7"
+          fontWeight="700"
+          fontFamily="system-ui, sans-serif"
+        >
+          PDF
+        </text>
+      </svg>
+    )
+  }
+  return <FileText className="size-4 shrink-0 text-muted-foreground/50" />
+}
+
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

package/src/files-browser.tsx

@@ -1,26 +1,14 @@
 /**
  * FilesBrowser — file browser for an agent workspace.
  * Shows files grouped by folder with icons, sizes, and actions.
- * Extracted from Houston's FilesView, made props-driven.
+ * Supports drag-and-drop file import (with folder targeting) and folder creation.
  */
-import { useState } from "react"
-import {
-  cn,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@deck-ui/core"
-import {
-  ChevronRight,
-  ExternalLink,
-  FileText,
-  FolderSearch,
-  Image as ImageIcon,
-  MoreVertical,
-  Trash2,
-} from "lucide-react"
+import { useCallback, useRef, useState } from "react"
+import { cn, Button } from "@deck-ui/core"
+import { FolderPlus, Upload, FolderOpen } from "lucide-react"
 import type { FileEntry } from "./types"
+import { useDropZone } from "./drop-zone"
+import { FileRow, FolderSection } from "./file-row"
 
 export interface FilesBrowserProps {
   /** Files to display */
@@ -33,6 +21,14 @@ export interface FilesBrowserProps {
   onReveal?: (file: FileEntry) => void
   /** Called when delete is selected */
   onDelete?: (file: FileEntry) => void
+  /** Called when files are dropped. targetFolder is set when dropped on a folder. */
+  onFilesDropped?: (files: File[], targetFolder?: string) => void
+  /** Called when the user creates a new folder via the inline input */
+  onCreateFolder?: (name: string) => void
+  /** Called when "Browse files" is clicked — wire to native file picker (e.g. tauri-plugin-dialog). */
+  onBrowse?: () => void
+  /** Called when "Open folder" is clicked — wire to reveal workspace dir (e.g. shell open). */
+  onRevealWorkspace?: () => void
   /** Title for empty state */
   emptyTitle?: string
   /** Description for empty state */
@@ -45,247 +41,187 @@ export function FilesBrowser({
   onOpen,
   onReveal,
   onDelete,
+  onFilesDropped,
+  onCreateFolder,
+  onBrowse,
+  onRevealWorkspace,
   emptyTitle = "Your work shows up here",
   emptyDescription = "When agents create files, they'll appear here for you to open and review.",
 }: FilesBrowserProps) {
-  if (!loading && files.length === 0) {
-    return (
-      <div className="flex-1 flex flex-col items-center pt-[20vh] gap-4 px-8">
-        <div className="space-y-2 text-center max-w-md">
-          <h1 className="text-2xl font-semibold text-foreground tracking-tight">
-            {emptyTitle}
-          </h1>
-          <p className="text-sm text-muted-foreground">{emptyDescription}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const grouped = groupByFolder(files)
-  const folders = Object.keys(grouped).sort()
-
-  return (
-    <div className="flex-1 flex flex-col h-full min-h-0 overflow-hidden">
-      <div className="flex items-center h-8 px-6 text-[11px] font-medium text-muted-foreground/40 border-b border-black/[0.06] shrink-0 select-none">
-        <span className="flex-1 pl-8">Name</span>
-        <span className="w-20 text-right">Size</span>
-        <span className="w-10" />
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        {loading ? (
-          <div className="flex items-center justify-center py-16">
-            <p className="text-sm text-muted-foreground/50">Loading...</p>
-          </div>
-        ) : (
-          <div>
-            {folders.map((folder) =>
-              folder ? (
-                <FolderSection
-                  key={folder}
-                  name={folder}
-                  files={grouped[folder]}
-                  onOpen={onOpen}
-                  onReveal={onReveal}
-                  onDelete={onDelete}
-                />
-              ) : (
-                grouped[folder].map((f) => (
-                  <FileRow
-                    key={f.path}
-                    file={f}
-                    onOpen={onOpen}
-                    onReveal={onReveal}
-                    onDelete={onDelete}
-                  />
-                ))
-              ),
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
+  const { isDragging, dragHandlers } = useDropZone(onFilesDropped)
+  const [creatingFolder, setCreatingFolder] = useState(false)
+  const [folderDropTarget, setFolderDropTarget] = useState<string | null>(null)
+  const isEmpty = !loading && files.length === 0
+  const grouped = isEmpty ? {} : groupByFolder(files)
+  const folders = isEmpty ? [] : Object.keys(grouped).sort()
 
-function groupByFolder(files: FileEntry[]): Record<string, FileEntry[]> {
-  const grouped: Record<string, FileEntry[]> = {}
-  for (const f of files) {
-    const parts = f.path.split("/")
-    const folder = parts.length > 1 ? parts.slice(0, -1).join("/") : ""
-    ;(grouped[folder] ??= []).push(f)
-  }
-  return grouped
-}
+  const isRootTarget = isDragging && folderDropTarget === null
 
-function FolderSection({
-  name,
-  files,
-  onOpen,
-  onReveal,
-  onDelete,
-}: {
-  name: string
-  files: FileEntry[]
-  onOpen?: (file: FileEntry) => void
-  onReveal?: (file: FileEntry) => void
-  onDelete?: (file: FileEntry) => void
-}) {
-  const [open, setOpen] = useState(true)
+  const onDragActive = useCallback((folder: string | null) => {
+    setFolderDropTarget(folder)
+  }, [])
 
   return (
-    <div>
-      <button
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center h-8 px-6 hover:bg-secondary transition-colors duration-150 select-none"
-      >
-        <ChevronRight
-          className={cn(
-            "size-3.5 text-muted-foreground/40 transition-transform duration-200 mr-2",
-            open && "rotate-90",
+    <div
+      className="relative flex-1 flex flex-col h-full min-h-0 overflow-hidden"
+      {...(onFilesDropped ? dragHandlers : {})}
+    >
+      {isEmpty ? (
+        <div className="flex-1 flex flex-col items-center pt-[20vh] gap-4 px-8">
+          <div className="space-y-2 text-center max-w-md">
+            <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+              {emptyTitle}
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              {emptyDescription}
+            </p>
+          </div>
+          {(onBrowse || onRevealWorkspace) && (
+            <div className="flex items-center gap-2">
+              {onBrowse && (
+                <Button variant="default" size="sm" onClick={onBrowse}>
+                  <Upload className="size-4 mr-1.5" />
+                  Browse files
+                </Button>
+              )}
+              {onRevealWorkspace && (
+                <Button variant="outline" size="sm" onClick={onRevealWorkspace}>
+                  <FolderOpen className="size-4 mr-1.5" />
+                  Open folder
+                </Button>
+              )}
+            </div>
           )}
-        />
-        <span className="text-xs font-medium text-muted-foreground/60 flex-1 text-left">
-          {name}
-        </span>
-        <span className="text-[10px] text-muted-foreground/30">
-          {files.length}
-        </span>
-      </button>
-      {open && (
-        <div>
-          {files.map((f) => (
-            <FileRow
-              key={f.path}
-              file={f}
-              indent
-              onOpen={onOpen}
-              onReveal={onReveal}
-              onDelete={onDelete}
+          {onCreateFolder && (
+            <button
+              onClick={() => setCreatingFolder(true)}
+              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <FolderPlus className="size-4" />
+              New folder
+            </button>
+          )}
+          {creatingFolder && (
+            <NewFolderInput
+              onConfirm={(name) => {
+                onCreateFolder?.(name)
+                setCreatingFolder(false)
+              }}
+              onCancel={() => setCreatingFolder(false)}
             />
-          ))}
+          )}
         </div>
+      ) : (
+        <>
+          <div className="flex items-center h-8 px-6 text-[11px] font-medium text-muted-foreground/40 border-b border-black/[0.06] shrink-0 select-none">
+            <span className="flex-1 pl-8">Name</span>
+            <span className="w-20 text-right">Size</span>
+            <div className="w-10 flex justify-end">
+              {onCreateFolder && (
+                <button
+                  onClick={() => setCreatingFolder(true)}
+                  className="flex items-center justify-center w-6 h-6 rounded text-muted-foreground/30 hover:text-foreground hover:bg-black/[0.05] transition-all duration-150"
+                >
+                  <FolderPlus className="size-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          <div
+            className="flex-1 overflow-y-auto"
+            style={{
+              backgroundColor: isRootTarget ? "rgba(0,0,0,0.04)" : undefined,
+              transition: "background-color 150ms",
+            }}
+          >
+            {loading ? (
+              <div className="flex items-center justify-center py-16">
+                <p className="text-sm text-muted-foreground/50">Loading...</p>
+              </div>
+            ) : (
+              <div>
+                {creatingFolder && (
+                  <NewFolderInput
+                    onConfirm={(name) => {
+                      onCreateFolder?.(name)
+                      setCreatingFolder(false)
+                    }}
+                    onCancel={() => setCreatingFolder(false)}
+                  />
+                )}
+                {folders.map((folder) =>
+                  folder ? (
+                    <FolderSection
+                      key={folder}
+                      name={folder}
+                      files={grouped[folder]}
+                      onOpen={onOpen}
+                      onReveal={onReveal}
+                      onDelete={onDelete}
+                      onFilesDropped={onFilesDropped}
+                      onDragActive={onDragActive}
+                    />
+                  ) : (
+                    grouped[folder].map((f) => (
+                      <FileRow
+                        key={f.path}
+                        file={f}
+                        onOpen={onOpen}
+                        onReveal={onReveal}
+                        onDelete={onDelete}
+                      />
+                    ))
+                  ),
+                )}
+              </div>
+            )}
+          </div>
+        </>
       )}
     </div>
   )
 }
 
-function FileRow({
-  file,
-  indent,
-  onOpen,
-  onReveal,
-  onDelete,
+function NewFolderInput({
+  onConfirm,
+  onCancel,
 }: {
-  file: FileEntry
-  indent?: boolean
-  onOpen?: (file: FileEntry) => void
-  onReveal?: (file: FileEntry) => void
-  onDelete?: (file: FileEntry) => void
+  onConfirm: (name: string) => void
+  onCancel: () => void
 }) {
-  const ext = file.extension
-  const hasActions = onOpen || onReveal || onDelete
+  const [value, setValue] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
 
   return (
-    <button
-      onClick={() => onOpen?.(file)}
-      className={cn(
-        "w-full flex items-center h-9 px-6 hover:bg-secondary",
-        "active:bg-accent transition-colors duration-100 text-left group",
-        indent && "pl-11",
-      )}
-    >
-      <div className="flex items-center gap-2.5 flex-1 min-w-0">
-        <FileIcon extension={ext} />
-        <span className="text-[13px] text-foreground truncate">
-          {file.name}
-        </span>
-      </div>
-      <span className="w-20 text-right text-[11px] text-muted-foreground/30">
-        {formatSize(file.size)}
-      </span>
-      {hasActions && (
-        <div className="w-10 flex justify-end">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <span
-                role="button"
-                onClick={(e) => e.stopPropagation()}
-                className="flex items-center justify-center w-6 h-6 rounded text-muted-foreground/20 hover:text-foreground hover:bg-black/[0.05] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-all duration-150"
-              >
-                <MoreVertical className="size-3.5" />
-              </span>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {onOpen && (
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onOpen(file)
-                  }}
-                >
-                  <ExternalLink className="size-4 mr-2" />
-                  Open
-                </DropdownMenuItem>
-              )}
-              {onReveal && (
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onReveal(file)
-                  }}
-                >
-                  <FolderSearch className="size-4 mr-2" />
-                  Show in Finder
-                </DropdownMenuItem>
-              )}
-              {onDelete && (
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onDelete(file)
-                  }}
-                  className="text-destructive focus:text-destructive"
-                >
-                  <Trash2 className="size-4 mr-2" />
-                  Delete
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
-    </button>
+    <div className={cn("flex items-center h-9 px-6 bg-secondary/50")}>
+      <FolderPlus className="size-4 shrink-0 text-muted-foreground/50 mr-2.5" />
+      <input
+        ref={inputRef}
+        autoFocus
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && value.trim()) onConfirm(value.trim())
+          if (e.key === "Escape") onCancel()
+        }}
+        onBlur={() => {
+          if (value.trim()) onConfirm(value.trim())
+          else onCancel()
+        }}
+        placeholder="Folder name"
+        className="flex-1 text-[13px] bg-transparent outline-none placeholder:text-muted-foreground/40"
+      />
+    </div>
   )
 }
 
-function FileIcon({ extension }: { extension: string }) {
-  if (["png", "jpg", "jpeg", "svg", "gif", "webp"].includes(extension)) {
-    return <ImageIcon className="size-4 shrink-0 text-muted-foreground/50" />
-  }
-  if (extension === "pdf") {
-    return (
-      <svg className="size-4 shrink-0" viewBox="0 0 16 16" fill="none">
-        <rect width="16" height="16" rx="3" fill="#E5252A" />
-        <text
-          x="8"
-          y="11"
-          textAnchor="middle"
-          fill="white"
-          fontSize="7"
-          fontWeight="700"
-          fontFamily="system-ui, sans-serif"
-        >
-          PDF
-        </text>
-      </svg>
-    )
+function groupByFolder(files: FileEntry[]): Record<string, FileEntry[]> {
+  const grouped: Record<string, FileEntry[]> = {}
+  for (const f of files) {
+    const parts = f.path.split("/")
+    const folder = parts.length > 1 ? parts.slice(0, -1).join("/") : ""
+    ;(grouped[folder] ??= []).push(f)
   }
-  return <FileText className="size-4 shrink-0 text-muted-foreground/50" />
-}
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return grouped
 }

package/src/index.ts

@@ -7,3 +7,6 @@ export type { FilesBrowserProps } from "./files-browser"
 
 export { InstructionsPanel } from "./instructions-panel"
 export type { InstructionsPanelProps } from "./instructions-panel"
+
+// Hooks
+export { useDropZone, useFolderDropTarget } from "./drop-zone"