ai-design-system 0.1.62 → 0.1.63

package/components/composites/FileTreeExplorer/FileTreeExplorer.tsx

@@ -16,6 +16,11 @@ export type FileTreeNode = {
   children?: FileTreeNode[]
 }
 
+export interface FileDownloadResult {
+  blob: Blob
+  filename: string
+}
+
 export interface FileTreeExplorerProps {
   tree: FileTreeNode[]
   defaultExpanded?: Set<string>
@@ -24,7 +29,7 @@ export interface FileTreeExplorerProps {
   searchPlaceholder?: string
   onCreateClick?: () => void
   createButtonLabel?: string
-  onDownloadClick?: () => void
+  onDownload?: () => Promise<FileDownloadResult | undefined>
   headerClassName?: string
   className?: string
 }
@@ -85,13 +90,28 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
     searchPlaceholder = "Filter files...",
     onCreateClick,
     createButtonLabel,
-    onDownloadClick,
+    onDownload,
     headerClassName,
     className,
   }) => {
+    const downloadRef = React.useRef<HTMLAnchorElement>(null)
     const [searchQuery, setSearchQuery] = React.useState("")
     const [userExpanded, setUserExpanded] = React.useState<Set<string>>(defaultExpanded || new Set())
 
+    const handleDownloadClick = React.useCallback(async () => {
+      if (!onDownload) return
+      const result = await onDownload()
+      if (!result) return
+      const url = URL.createObjectURL(result.blob)
+      const anchor = downloadRef.current
+      if (anchor) {
+        anchor.href = url
+        anchor.download = result.filename
+        anchor.click()
+      }
+      URL.revokeObjectURL(url)
+    }, [onDownload])
+
     // Auto-expand parents when selectedPath changes
     React.useEffect(() => {
       if (selectedPath) {
@@ -147,16 +167,17 @@ export const FileTreeExplorer = React.memo<FileTreeExplorerProps>(
               {createButtonLabel ?? "New"}
             </button>
           ) : null}
-          {onDownloadClick ? (
+          {onDownload ? (
             <button
               type="button"
-              onClick={onDownloadClick}
+              onClick={handleDownloadClick}
               title="Download all files"
               className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
             >
               <Icon name="download" size="sm" />
             </button>
           ) : null}
+          <a ref={downloadRef} style={{ display: 'none' }} />
         </div>
         <div className="p-2">
           <FileTree

package/components/composites/FileTreeExplorer/index.ts

@@ -3,6 +3,7 @@ export {
 } from "./FileTreeExplorer"
 
 export type {
+  FileDownloadResult,
   FileTreeExplorerProps,
   FileTreeNode,
 } from "./FileTreeExplorer"

package/components/features/TextEditor/TextEditor.tsx

@@ -37,7 +37,7 @@ import { DocumentEditorWithComments } from '@/components/blocks/DocumentEditorWi
 import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { AdjustableLayout } from '@/components/composites/AdjustableLayout'
 import { FileTreeExplorer } from '@/components/composites/FileTreeExplorer'
-import type { FileTreeNode } from '@/components/composites/FileTreeExplorer'
+import type { FileDownloadResult, FileTreeNode } from '@/components/composites/FileTreeExplorer'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
@@ -106,7 +106,7 @@ export interface TextEditorMultiTabProps {
   /** When true, hides the document tab bar — useful for single-file mode where the file tree provides navigation. */
   hideTabBar?: boolean
   /** Callback when download all button is clicked in the file tree header */
-  onDownloadAllFiles?: () => void
+  onDownloadAllFiles?: () => Promise<FileDownloadResult | undefined>
 }
 
 /**
@@ -389,7 +389,7 @@ export const TextEditor = React.memo<TextEditorProps>(
                 tree={fileTreeNodes}
                 selectedPath={props.activeDocumentId}
                 onSelect={props.onTabSelect}
-                onDownloadClick={onDownloadAllFiles}
+                onDownload={onDownloadAllFiles}
               />
             ),
           },

package/dist/index.cjs

@@ -11440,12 +11440,26 @@ var FileTreeExplorer = React3__namespace.memo(
     searchPlaceholder = "Filter files...",
     onCreateClick,
     createButtonLabel,
-    onDownloadClick,
+    onDownload,
     headerClassName,
     className
   }) => {
+    const downloadRef = React3__namespace.useRef(null);
     const [searchQuery, setSearchQuery] = React3__namespace.useState("");
     const [userExpanded, setUserExpanded] = React3__namespace.useState(defaultExpanded || /* @__PURE__ */ new Set());
+    const handleDownloadClick = React3__namespace.useCallback(async () => {
+      if (!onDownload) return;
+      const result = await onDownload();
+      if (!result) return;
+      const url = URL.createObjectURL(result.blob);
+      const anchor = downloadRef.current;
+      if (anchor) {
+        anchor.href = url;
+        anchor.download = result.filename;
+        anchor.click();
+      }
+      URL.revokeObjectURL(url);
+    }, [onDownload]);
     React3__namespace.useEffect(() => {
       if (selectedPath) {
         const parts = selectedPath.split("/");
@@ -11504,16 +11518,17 @@ var FileTreeExplorer = React3__namespace.memo(
             ]
           }
         ) : null,
-        onDownloadClick ? /* @__PURE__ */ jsxRuntime.jsx(
+        onDownload ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            onClick: onDownloadClick,
+            onClick: handleDownloadClick,
             title: "Download all files",
             className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
             children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", size: "sm" })
           }
-        ) : null
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("a", { ref: downloadRef, style: { display: "none" } })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         FileTree,
@@ -11717,7 +11732,7 @@ ${format === "json" ? formatJson(currentDocument.content) : currentDocument.cont
                 tree: fileTreeNodes,
                 selectedPath: props.activeDocumentId,
                 onSelect: props.onTabSelect,
-                onDownloadClick: onDownloadAllFiles
+                onDownload: onDownloadAllFiles
               }
             )
           },