@shipstatic/drop 0.1.8 → 0.1.10

package/README.md

@@ -85,9 +85,8 @@ function MyUploader() {
   });
 
   const handleUpload = async () => {
-    const validFiles = drop.getValidFiles();
     // ProcessedFile extends StaticFile - no conversion needed!
-    await ship.deployments.create(validFiles.map(f => f.file));
+    await ship.deployments.create(drop.validFiles.map(f => f.file));
   };
 
   return (
@@ -107,15 +106,15 @@ function MyUploader() {
         {drop.isDragging ? '📂 Drop here' : '📁 Click or drag files/folders'}
       </div>
 
-      {/* Status - using state machine */}
-      {drop.state.status && (
+      {/* Status - using state machine phase */}
+      {drop.status && (
         <p>
-          <strong>{drop.state.status.title}:</strong> {drop.state.status.details}
+          <strong>{drop.status.title}:</strong> {drop.status.details}
         </p>
       )}
 
       {/* File list */}
-      {drop.state.files.map(file => (
+      {drop.files.map(file => (
         <div key={file.id}>
           {file.name} - {file.status}
         </div>
@@ -124,9 +123,9 @@ function MyUploader() {
       {/* Upload button */}
       <button
         onClick={handleUpload}
-        disabled={drop.state.value !== 'ready'}
+        disabled={drop.phase !== 'ready'}
       >
-        Upload {drop.getValidFiles().length} files
+        Upload {drop.validFiles.length} files
       </button>
     </div>
   );
@@ -232,17 +231,22 @@ interface DropOptions {
 
 **Returns:**
 
+```typescript
 ```typescript
 interface DropReturn {
-  // State machine
-  /** Current state of the drop hook */
-  state: DropState;
-
   // Convenience getters (computed from state)
+  /** Current phase of the state machine */
+  phase: DropStateValue;
   /** Whether currently processing files (ZIP extraction, etc.) */
   isProcessing: boolean;
   /** Whether user is currently dragging over the dropzone */
   isDragging: boolean;
+  /** Flattened access to files */
+  files: ProcessedFile[];
+  /** Flattened access to source name */
+  sourceName: string;
+  /** Flattened access to status */
+  status: DropStatus | null;
 
   // Primary API: Prop getters for easy integration
   /** Get props to spread on dropzone element (handles drag & drop) */
@@ -272,7 +276,7 @@ interface DropReturn {
 
   // Helpers
   /** Get only valid files ready for upload */
-  getValidFiles: () => ProcessedFile[];
+  validFiles: ProcessedFile[];
   /** Update upload state for a specific file (status, progress, message) */
   updateFileStatus: (fileId: string, state: {
     status: FileStatus;
@@ -289,22 +293,16 @@ type DropStateValue =
   | 'ready'      // Files are valid and ready for deployment
   | 'error';     // An error occurred during processing
 
-interface DropState {
-  value: DropStateValue;
-  files: ProcessedFile[];
-  sourceName: string;
-  status: DropStatus | null;
-}
-
 interface DropStatus {
   title: string;
   details: string;
+  errors?: string[];
 }
 ```
 
 ## State Machine
 
-The drop hook uses a state machine for predictable, clear state management. Instead of multiple boolean flags, you have a single `state.value` that represents exactly what's happening.
+The drop hook uses a state machine for predictable, clear state management. Instead of multiple boolean flags, you have a single `drop.phase` that represents exactly what's happening.
 
 ### State Flow
 
@@ -320,9 +318,8 @@ error → dragging → processing → ... (retry)
 
 ```tsx
 function StatusIndicator({ drop }) {
-  const { state } = drop;
-
-  switch (state.value) {
+  // Use drop.phase to switch-case on the state
+  switch (drop.phase) {
     case 'idle':
       return <p>Drop files here or click to select</p>;
 
@@ -330,12 +327,12 @@ function StatusIndicator({ drop }) {
       return <p>Drop your files now!</p>;
 
     case 'processing':
-      return <p>{state.status?.details || 'Processing...'}</p>;
+      return <p>{drop.status?.details || 'Processing...'}</p>;
 
     case 'ready':
       return (
         <div>
-          <p>✓ {state.files.length} files ready</p>
+          <p>✓ {drop.files.length} files ready</p>
           <button>Upload to Ship</button>
         </div>
       );
@@ -343,8 +340,8 @@ function StatusIndicator({ drop }) {
     case 'error':
       return (
         <div>
-          <p>✗ {state.status?.title}</p>
-          <p>{state.status?.details}</p>
+          <p>✗ {drop.status?.title}</p>
+          <p>{drop.status?.details}</p>
           <button onClick={drop.clearAll}>Try Again</button>
         </div>
       );
@@ -357,14 +354,14 @@ function StatusIndicator({ drop }) {
 For simpler use cases, boolean convenience getters are provided:
 
 ```tsx
-// These are computed from state.value (read-only projections)
-drop.isProcessing  // true when state.value === 'processing'
-drop.isDragging    // true when state.value === 'dragging'
-
-// For error information, use the state object
-drop.state.value === 'error'  // Check if in error state
-drop.state.status?.title      // Error title
-drop.state.status?.details    // Error details
+// These are computed from drop.phase (read-only projections)
+drop.isProcessing  // true when phase === 'processing'
+drop.isDragging    // true when phase === 'dragging'
+
+// For error information, use the flattened status object
+drop.phase === 'error'      // Check if in error state
+drop.status?.title          // Error title
+drop.status?.details        // Error details
 ```
 
 ### Benefits
@@ -384,7 +381,8 @@ Each file in the `state.files` array contains its own `status` and `statusMessag
 function FileList({ drop }) {
   return (
     <div>
-      {drop.state.files.map(file => (
+      {/* Flattened access to files array */}
+      {drop.files.map(file => (
         <div key={file.id}>
           <span>{file.path}</span>
 
@@ -401,7 +399,7 @@ function FileList({ drop }) {
       ))}
 
       {/* If validation fails, allow user to clear all and try again */}
-      {drop.state.value === 'error' && (
+      {drop.phase === 'error' && (
         <button onClick={drop.clearAll}>
           Clear All & Try Again
         </button>
@@ -422,10 +420,10 @@ function FileList({ drop }) {
 When files fail validation or processing, check the error state:
 
 ```tsx
-{drop.state.value === 'error' && drop.state.status && (
+{drop.phase === 'error' && drop.status && (
   <div>
-    <p>{drop.state.status.title}</p>
-    <p>{drop.state.status.details}</p>
+    <p>{drop.status.title}</p>
+    <p>{drop.status.details}</p>
   </div>
 )}
 ```
@@ -455,10 +453,10 @@ Use `clearAll()` to reset and try again:
 
 ```tsx
 // If validation fails, show user which files failed
-{drop.state.value === 'error' && (
+{drop.phase === 'error' && (
   <div>
     <p>Validation failed. Please fix the issues and try again:</p>
-    {drop.state.files.map(file => (
+    {drop.files.map(file => (
       <div key={file.id}>
         {file.path}: {file.statusMessage}
       </div>
@@ -629,7 +627,7 @@ All errors are surfaced at the per-file level:
 - Processing errors (e.g., ZIP extraction failures) are marked with `status: 'processing_error'`
 - Validation failures are marked with `status: 'validation_failed'`
 - The `statusMessage` always contains specific error details
-- Failed files are excluded from `getValidFiles()` and cannot be deployed
+- Failed files are excluded from `validFiles` and cannot be deployed
 - No silent failures - all errors are visible to users
 
 See the [Error Handling](#error-handling) section for examples of displaying per-file errors in your UI.

package/dist/index.cjs

@@ -11813,7 +11813,6 @@ async function createProcessedFile(file, options) {
     status: FILE_STATUSES.PENDING
   };
 }
-var getValidFiles = ship.getValidFiles;
 function stripCommonPrefix(files) {
   if (files.length === 0) return files;
   const paths = files.map((f) => f.path);
@@ -11829,10 +11828,20 @@ function stripCommonPrefix(files) {
   }
   if (commonDepth === 0) return files;
   const prefix = segments.slice(0, commonDepth).join("/") + "/";
-  return files.map((f) => ({
-    ...f,
-    path: f.path.startsWith(prefix) ? f.path.slice(prefix.length) : f.path
-  }));
+  return files.map((f) => {
+    const newPath = f.path.startsWith(prefix) ? f.path.slice(prefix.length) : f.path;
+    if (f.file) {
+      Object.defineProperty(f.file, "webkitRelativePath", {
+        value: newPath,
+        writable: false,
+        configurable: true
+      });
+    }
+    return {
+      ...f,
+      path: newPath
+    };
+  });
 }
 async function traverseFileTree(entry, files, currentPath = "") {
   try {
@@ -11843,7 +11852,8 @@ async function traverseFileTree(entry, files, currentPath = "") {
       const relativePath = currentPath ? `${currentPath}/${file.name}` : file.name;
       Object.defineProperty(file, "webkitRelativePath", {
         value: relativePath,
-        writable: false
+        writable: false,
+        configurable: true
       });
       files.push(file);
     } else if (entry.isDirectory) {
@@ -11888,6 +11898,7 @@ function useDrop(options) {
   const inputRef = react.useRef(null);
   const isProcessing = react.useMemo(() => state.value === "processing", [state.value]);
   const isDragging = react.useMemo(() => state.value === "dragging", [state.value]);
+  const validFiles = react.useMemo(() => ship.getValidFiles(state.files), [state.files]);
   const processFiles = react.useCallback(async (newFiles) => {
     if (isProcessingRef.current) {
       console.warn("File processing already in progress. Ignoring duplicate call.");
@@ -11953,7 +11964,11 @@ function useDrop(options) {
           value: "error",
           files: validation.files,
           sourceName: detectedSourceName,
-          status: { title: validation.error.error, details: validation.error.details }
+          status: {
+            title: validation.error.error,
+            details: validation.error.details,
+            errors: validation.error.errors
+          }
         });
         onValidationError?.(validation.error);
       } else if (validation.validFiles.length > 0) {
@@ -11998,9 +12013,6 @@ function useDrop(options) {
     setState(initialState);
     isProcessingRef.current = false;
   }, []);
-  const getValidFilesCallback = react.useCallback(() => {
-    return getValidFiles(state.files);
-  }, [state.files]);
   const updateFileStatus = react.useCallback((fileId, fileState) => {
     setState((prev) => ({
       ...prev,
@@ -12030,21 +12042,21 @@ function useDrop(options) {
     e.preventDefault();
     const items = Array.from(e.dataTransfer.items);
     const files = [];
-    let hasEntries = false;
+    const entriesToTraverse = [];
     for (const item of items) {
       if (item.kind === "file") {
         try {
           const entry = item.webkitGetAsEntry?.();
-          if (entry) {
-            hasEntries = true;
-            await traverseFileTree(
-              entry,
-              files,
-              entry.isDirectory ? entry.name : ""
-            );
+          if (entry && entry.isDirectory) {
+            entriesToTraverse.push({ entry, path: entry.name });
           } else {
             const file = item.getAsFile();
             if (file) {
+              Object.defineProperty(file, "webkitRelativePath", {
+                value: file.name,
+                writable: false,
+                configurable: true
+              });
               files.push(file);
             }
           }
@@ -12057,7 +12069,12 @@ function useDrop(options) {
         }
       }
     }
-    if (!hasEntries && e.dataTransfer.files.length > 0) {
+    if (entriesToTraverse.length > 0) {
+      await Promise.all(entriesToTraverse.map(
+        (item) => traverseFileTree(item.entry, files, item.path)
+      ));
+    }
+    if (files.length === 0 && e.dataTransfer.files.length > 0) {
       files.push(...Array.from(e.dataTransfer.files));
     }
     if (files.length > 0) {
@@ -12091,10 +12108,13 @@ function useDrop(options) {
   }), [handleInputChange]);
   return {
     // State machine
-    state,
     // Convenience getters (computed from state)
+    phase: state.value,
     isProcessing,
     isDragging,
+    files: state.files,
+    sourceName: state.sourceName,
+    status: state.status,
     // Primary API: Prop getters
     getDropzoneProps,
     getInputProps,
@@ -12103,7 +12123,7 @@ function useDrop(options) {
     processFiles,
     clearAll,
     // Helpers
-    getValidFiles: getValidFilesCallback,
+    validFiles,
     updateFileStatus
   };
 }
@@ -12135,10 +12155,10 @@ exports.FILE_STATUSES = FILE_STATUSES;
 exports.createProcessedFile = createProcessedFile;
 exports.extractZipToFiles = extractZipToFiles;
 exports.formatFileSize = formatFileSize;
-exports.getValidFiles = getValidFiles;
 exports.isZipFile = isZipFile;
 exports.normalizePath = normalizePath;
 exports.stripCommonPrefix = stripCommonPrefix;
+exports.traverseFileTree = traverseFileTree;
 exports.useDrop = useDrop;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map