@shipstatic/drop 2.0.0-beta.4 → 2.0.0-beta.7

package/README.md

@@ -94,10 +94,10 @@ interface DropReturn {
 
   // Prop getters
   getDropzoneProps: (options?: { clickable?: boolean }) => { ... };
-  getInputProps: () => { ... };
+  getInputProps: (mode?: PickerMode) => { ... };  // 'folder' (default) | 'files'
 
   // Actions
-  open: () => void;                              // trigger the file picker
+  open: (mode?: PickerMode) => void;             // trigger a picker (default: folder)
   processFiles: (files: File[]) => Promise<void>; // advanced — see below
   reset: () => void;
 
@@ -141,18 +141,28 @@ useEffect(() => {
 </div>
 ```
 
-Drag-only, with your own trigger:
+Drag-only, with your own triggers:
 
 ```tsx
 <div {...drop.getDropzoneProps({ clickable: false })}>
-  <input {...drop.getInputProps()} />
-  <button onClick={drop.open}>Select folder</button>
+  <input {...drop.getInputProps('folder')} />
+  <input {...drop.getInputProps('files')} />
+  <button onClick={() => drop.open('folder')}>Select folder</button>
+  <button onClick={() => drop.open('files')}>Select files</button>
 </div>
 ```
 
 `getDropzoneProps()` handles `webkitGetAsEntry` internally, which is what preserves folder structure. Calling `processFiles()` yourself loses it — the browser invalidates `dataTransfer.items` at the first `await`, so entries must be captured synchronously.
 
-**The hidden input is a folder picker.** It always carries `webkitdirectory`, so clicking opens a directory chooser. Individual files arrive by drag & drop.
+### Two pickers
+
+`PickerMode` is `'folder' | 'files'`, and **folder is the default** — a bare `getInputProps()` / `open()`, and the dropzone's own click, open the folder picker.
+
+An `<input>` is either a folder picker or a file picker, so each mode owns its own element and its own ref: a UI offering both renders **both inputs**, and `open(mode)` clicks whichever is mounted. Exactly one attribute differs — `webkitdirectory` in folder mode, `accept` in files mode.
+
+Wrap `open` in a handler rather than passing it by reference (`onClick={() => drop.open('files')}`): React hands a click handler a `MouseEvent`, which would otherwise arrive as the mode.
+
+**Selecting is not a second code path.** A picked file set — loose files or a ZIP — runs the identical pipeline as a dropped one, with the same paths, the same source name and the same verdict. The `accept` list is a *hint* that biases what the file dialog shows first; it decides nothing, since every dialog offers an all-files escape and drag & drop ignores `accept` outright. What files may be deployed is one rule, applied downstream of both entry points.
 
 ## Validation
 
@@ -191,7 +201,7 @@ await ship.deployments.upload(drop.getFilesForUpload(), {
 
 ## ZIP handling
 
-A **single** dropped ZIP is extracted and its contents deployed. ZIPs among several files are treated as ordinary files. Archive paths are sanitized against directory traversal (`../../etc/passwd` → `etc/passwd`).
+A **single** dropped ZIP is extracted and its contents deployed. ZIPs among several files are treated as ordinary files. Archive paths are sanitized against directory traversal (`../../config.json` → `config.json`).
 
 ## Without React
 

package/dist/index.cjs

@@ -4,10 +4,16 @@ var ship = require('@shipstatic/ship');
 var react = require('react');
 
 // src/process.ts
-
-// node_modules/.pnpm/@shipstatic+types@2.2.1-beta.0/node_modules/@shipstatic/types/dist/index.js
 var ErrorType = {
-  /** Validation failed (400). Input shape is wrong. */
+  /**
+   * Validation failed. Input shape is wrong.
+   *
+   * Carries 400 when an API judged it — including a client-side pre-check of a
+   * rule the server enforces too, which keeps the error identical wherever it
+   * was caught. **Statusless** when a client rejects something no API judges,
+   * such as a CLI's own command grammar: `status` is documented "(API
+   * contexts)" on `ErrorResponse`, so there is none to report.
+   */
   Validation: "validation_failed",
   /** Resource not found (404). */
   NotFound: "not_found",
@@ -40,6 +46,90 @@ new Set(Object.values(ErrorType).filter((t) => !CLIENT_ONLY_ERROR_TYPES.has(t)))
 function isShipError(error) {
   return error !== null && typeof error === "object" && "name" in error && error.name === "ShipError" && "status" in error;
 }
+var WEB_FILE_EXTENSIONS = [
+  // Markup & documents
+  "html",
+  "htm",
+  "xhtml",
+  "xml",
+  "txt",
+  "md",
+  "markdown",
+  "pdf",
+  "csv",
+  // Data & config
+  "json",
+  "jsonc",
+  "webmanifest",
+  "map",
+  "toml",
+  "yaml",
+  "yml",
+  "rss",
+  "atom",
+  // Styles
+  "css",
+  "scss",
+  "sass",
+  "less",
+  // Scripts & modules
+  "js",
+  "mjs",
+  "cjs",
+  "jsx",
+  "ts",
+  "tsx",
+  "wasm",
+  "vue",
+  "svelte",
+  // Images
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "webp",
+  "avif",
+  "svg",
+  "ico",
+  "bmp",
+  "tif",
+  "tiff",
+  "heic",
+  "heif",
+  // Fonts
+  "woff",
+  "woff2",
+  "ttf",
+  "otf",
+  "eot",
+  // Audio
+  "mp3",
+  "wav",
+  "ogg",
+  "oga",
+  "opus",
+  "m4a",
+  "aac",
+  "flac",
+  "weba",
+  // Video
+  "mp4",
+  "webm",
+  "ogv",
+  "mov",
+  "m4v",
+  "avi",
+  // 3D models
+  "glb",
+  "gltf",
+  "usdz",
+  // Text tracks
+  "vtt",
+  "srt",
+  // Archive — a whole site in one file
+  "zip"
+];
+var WEB_FILE_ACCEPT = WEB_FILE_EXTENSIONS.map((ext) => `.${ext}`).join(",");
 var UNBUILT_PROJECT_MARKERS = /* @__PURE__ */ new Set([
   "node_modules",
   "package.json"
@@ -948,7 +1038,8 @@ var initialState = {
 function useDrop({ ship }) {
   const [state, setState] = react.useState(initialState);
   const isProcessingRef = react.useRef(false);
-  const inputRef = react.useRef(null);
+  const folderInputRef = react.useRef(null);
+  const filesInputRef = react.useRef(null);
   const isProcessing = state.phase === "processing";
   const hasError = state.phase === "error";
   const isInteractive = state.phase === "idle" || state.phase === "ready";
@@ -1042,8 +1133,15 @@ function useDrop({ ship }) {
     },
     [processFiles2]
   );
-  const open = react.useCallback(() => {
-    inputRef.current?.click();
+  const open = react.useCallback((mode) => {
+    const input = mode === "files" ? filesInputRef.current : folderInputRef.current;
+    if (!input) {
+      console.warn(
+        `No ${mode === "files" ? "files" : "folder"} input is mounted. Spread getInputProps('${mode === "files" ? "files" : "folder"}') onto an <input> to open this picker.`
+      );
+      return;
+    }
+    input.click();
   }, []);
   const getDropzoneProps = react.useCallback(
     (options) => {
@@ -1052,18 +1150,20 @@ function useDrop({ ship }) {
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
-        ...clickable && { onClick: open }
+        // Wrapped rather than passed by reference: `open` takes a mode, and a
+        // click handler would hand it a MouseEvent.
+        ...clickable && { onClick: () => open() }
       };
     },
     [handleDragOver, handleDragLeave, handleDrop, open]
   );
   const getInputProps = react.useCallback(
-    () => ({
-      ref: inputRef,
+    (mode) => ({
+      ref: mode === "files" ? filesInputRef : folderInputRef,
       type: "file",
       style: { display: "none" },
       multiple: true,
-      webkitdirectory: "",
+      ...mode === "files" ? { accept: WEB_FILE_ACCEPT } : { webkitdirectory: "" },
       onChange: handleInputChange
     }),
     [handleInputChange]