@uploadista/react 0.0.17-beta.4 → 0.0.17-beta.6

package/src/hooks/use-flow.ts

@@ -0,0 +1,439 @@
+import type { FlowUploadOptions } from "@uploadista/client-browser";
+import type {
+  FlowManager,
+  FlowUploadState,
+  FlowUploadStatus,
+  InputExecutionState,
+} from "@uploadista/client-core";
+import type { Flow, TypedOutput } from "@uploadista/core/flow";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useUploadistaContext } from "../components/uploadista-provider";
+import { useFlowManagerContext } from "../contexts/flow-manager-context";
+
+// Re-export types from core for convenience
+export type { FlowUploadState, FlowUploadStatus, InputExecutionState };
+
+/**
+ * Input metadata discovered from the flow
+ */
+export interface FlowInputMetadata {
+  /** Input node ID */
+  nodeId: string;
+  /** Human-readable node name */
+  nodeName: string;
+  /** Node description explaining what input is needed */
+  nodeDescription: string;
+  /** Input node type */
+  nodeType: string;
+  /** Whether this input is required */
+  required: boolean;
+}
+
+/**
+ * Return value from the useFlow hook with upload control methods and state.
+ *
+ * @property state - Complete flow upload state with progress and outputs
+ * @property inputMetadata - Metadata about discovered input nodes (null until discovered)
+ * @property inputStates - Per-input execution state for multi-input flows
+ * @property inputs - Current input values set via setInput()
+ * @property setInput - Set an input value for a specific node (for progressive provision)
+ * @property execute - Execute the flow with current inputs (auto-detects types)
+ * @property upload - Convenience method for single-file upload (same as execute with one file input)
+ * @property abort - Cancel the current upload and flow execution
+ * @property pause - Pause the current upload
+ * @property reset - Reset state to idle (clears all data)
+ * @property isUploading - True when upload or processing is active
+ * @property isUploadingFile - True only during file upload phase
+ * @property isProcessing - True only during flow processing phase
+ * @property isDiscoveringInputs - True while discovering flow inputs
+ */
+export interface UseFlowReturn {
+  /**
+   * Current upload state
+   */
+  state: FlowUploadState;
+
+  /**
+   * Discovered input nodes metadata (null until discovery completes)
+   */
+  inputMetadata: FlowInputMetadata[] | null;
+
+  /**
+   * Per-input execution state for multi-input flows
+   */
+  inputStates: ReadonlyMap<string, InputExecutionState>;
+
+  /**
+   * Current inputs set via setInput()
+   */
+  inputs: Record<string, unknown>;
+
+  /**
+   * Set an input value for a specific node.
+   * For progressive input provision before calling execute().
+   *
+   * @param nodeId - The input node ID
+   * @param value - The input value (File, URL string, or structured data)
+   */
+  setInput: (nodeId: string, value: unknown) => void;
+
+  /**
+   * Execute the flow with current inputs.
+   * Automatically detects input types and routes appropriately.
+   * For single input, uses standard upload path.
+   * For multiple inputs, requires multiInputUploadFn.
+   */
+  execute: () => Promise<void>;
+
+  /**
+   * Upload a single file through the flow (convenience method).
+   * Equivalent to setInput(firstNodeId, file) + execute().
+   *
+   * @param file - File or Blob to upload
+   */
+  upload: (file: File | Blob) => Promise<void>;
+
+  /**
+   * Abort the current upload
+   */
+  abort: () => void;
+
+  /**
+   * Pause the current upload
+   */
+  pause: () => void;
+
+  /**
+   * Reset the upload state and clear all inputs
+   */
+  reset: () => void;
+
+  /**
+   * Whether an upload or flow execution is in progress (uploading OR processing)
+   */
+  isUploading: boolean;
+
+  /**
+   * Whether the file is currently being uploaded (chunks being sent)
+   */
+  isUploadingFile: boolean;
+
+  /**
+   * Whether the flow is currently processing (after upload completes)
+   */
+  isProcessing: boolean;
+
+  /**
+   * Whether the hook is discovering flow inputs
+   */
+  isDiscoveringInputs: boolean;
+}
+
+const initialState: FlowUploadState = {
+  status: "idle",
+  progress: 0,
+  bytesUploaded: 0,
+  totalBytes: null,
+  error: null,
+  jobId: null,
+  flowStarted: false,
+  currentNodeName: null,
+  currentNodeType: null,
+  flowOutputs: null,
+};
+
+/**
+ * React hook for executing flows with single or multiple inputs.
+ * Automatically discovers input nodes and detects input types (File, URL, structured data).
+ * Supports progressive input provision via setInput() and execute().
+ *
+ * This is the unified flow hook that replaces useFlowUpload for advanced use cases.
+ * It provides:
+ * - Auto-discovery of flow input nodes
+ * - Automatic input type detection (file → upload, string → URL, object → data)
+ * - Progressive input provision via setInput()
+ * - Multi-input support with parallel coordination
+ * - Per-input state tracking
+ *
+ * Must be used within FlowManagerProvider (which must be within UploadistaProvider).
+ * Flow events are automatically routed by the provider to the appropriate manager.
+ *
+ * @param options - Flow upload configuration including flow ID and event handlers
+ * @returns Flow upload state and control methods
+ *
+ * @example
+ * ```tsx
+ * // Single file upload (simple case)
+ * function SingleFileUploader() {
+ *   const flow = useFlow({
+ *     flowConfig: {
+ *       flowId: "image-optimization",
+ *       storageId: "s3-images",
+ *     },
+ *     onSuccess: (outputs) => {
+ *       console.log("Flow outputs:", outputs);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="file"
+ *         onChange={(e) => {
+ *           const file = e.target.files?.[0];
+ *           if (file) flow.upload(file);
+ *         }}
+ *       />
+ *       {flow.isUploading && <div>Progress: {flow.state.progress}%</div>}
+ *     </div>
+ *   );
+ * }
+ *
+ * // Multi-input with progressive provision
+ * function MultiInputFlow() {
+ *   const flow = useFlow({
+ *     flowConfig: {
+ *       flowId: "multi-source-processing",
+ *       storageId: "default",
+ *     },
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {flow.inputMetadata?.map((input) => (
+ *         <div key={input.nodeId}>
+ *           <label>{input.nodeId}</label>
+ *           {input.nodeType === "streaming-input-v1" ? (
+ *             <input
+ *               type="file"
+ *               onChange={(e) => {
+ *                 const file = e.target.files?.[0];
+ *                 if (file) flow.setInput(input.nodeId, file);
+ *               }}
+ *             />
+ *           ) : (
+ *             <input
+ *               type="url"
+ *               onChange={(e) => flow.setInput(input.nodeId, e.target.value)}
+ *             />
+ *           )}
+ *         </div>
+ *       ))}
+ *       <button onClick={flow.execute} disabled={flow.isUploading}>
+ *         Execute Flow
+ *       </button>
+ *
+ *       {flow.isUploading && (
+ *         <div>
+ *           {Array.from(flow.inputStates.values()).map((inputState) => (
+ *             <div key={inputState.nodeId}>
+ *               {inputState.nodeId}: {inputState.status} ({inputState.progress}%)
+ *             </div>
+ *           ))}
+ *         </div>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @see {@link useFlowUpload} for a simpler file-only upload hook
+ */
+export function useFlow(options: FlowUploadOptions): UseFlowReturn {
+  const { client } = useUploadistaContext();
+  const { getManager, releaseManager } = useFlowManagerContext();
+  const [state, setState] = useState<FlowUploadState>(initialState);
+  const [inputMetadata, setInputMetadata] = useState<
+    FlowInputMetadata[] | null
+  >(null);
+  const [isDiscoveringInputs, setIsDiscoveringInputs] = useState(false);
+  const [inputs, setInputs] = useState<Record<string, unknown>>({});
+  const [inputStates, setInputStates] = useState<
+    ReadonlyMap<string, InputExecutionState>
+  >(new Map());
+  const managerRef = useRef<FlowManager<unknown> | null>(null);
+
+  // Store callbacks in refs so they can be updated without recreating the manager
+  const callbacksRef = useRef(options);
+
+  // Update refs on every render to capture latest callbacks
+  useEffect(() => {
+    callbacksRef.current = options;
+  });
+
+  // Auto-discover flow inputs on mount
+  useEffect(() => {
+    const discoverInputs = async () => {
+      setIsDiscoveringInputs(true);
+      try {
+        const { flow } = await client.getFlow(options.flowConfig.flowId);
+
+        // Find all input nodes
+        const inputNodes = flow.nodes.filter((node) => node.type === "input");
+
+        const metadata: FlowInputMetadata[] = inputNodes.map((node) => ({
+          nodeId: node.id,
+          nodeName: node.name,
+          nodeDescription: node.description,
+          nodeType: node.nodeType,
+          // TODO: Add required field to node schema to determine if input is required
+          required: true,
+        }));
+
+        setInputMetadata(metadata);
+      } catch (error) {
+        console.error("Failed to discover flow inputs:", error);
+      } finally {
+        setIsDiscoveringInputs(false);
+      }
+    };
+
+    discoverInputs();
+  }, [client, options.flowConfig.flowId]);
+
+  // Get or create manager from context when component mounts
+  useEffect(() => {
+    const flowId = options.flowConfig.flowId;
+
+    // Create stable callback wrappers that call the latest callbacks via refs
+    const stableCallbacks = {
+      onStateChange: (newState: FlowUploadState) => {
+        setState(newState);
+      },
+      onProgress: (
+        uploadId: string,
+        bytesUploaded: number,
+        totalBytes: number | null,
+      ) => {
+        callbacksRef.current.onProgress?.(uploadId, bytesUploaded, totalBytes);
+      },
+      onChunkComplete: (
+        chunkSize: number,
+        bytesAccepted: number,
+        bytesTotal: number | null,
+      ) => {
+        callbacksRef.current.onChunkComplete?.(
+          chunkSize,
+          bytesAccepted,
+          bytesTotal,
+        );
+      },
+      onFlowComplete: (outputs: TypedOutput[]) => {
+        callbacksRef.current.onFlowComplete?.(outputs);
+      },
+      onSuccess: (outputs: TypedOutput[]) => {
+        callbacksRef.current.onSuccess?.(outputs);
+      },
+      onError: (error: Error) => {
+        callbacksRef.current.onError?.(error);
+      },
+      onAbort: () => {
+        callbacksRef.current.onAbort?.();
+      },
+    };
+
+    // Get manager from context (creates if doesn't exist, increments ref count)
+    managerRef.current = getManager(flowId, stableCallbacks, options);
+
+    // Set up interval to poll input states for multi-input flows
+    const pollInterval = setInterval(() => {
+      if (managerRef.current) {
+        const states = managerRef.current.getInputStates();
+        if (states.size > 0) {
+          setInputStates(new Map(states));
+        }
+      }
+    }, 100); // Poll every 100ms
+
+    // Release manager when component unmounts or flowId changes
+    return () => {
+      clearInterval(pollInterval);
+      releaseManager(flowId);
+      managerRef.current = null;
+    };
+  }, [
+    options.flowConfig.flowId,
+    options.flowConfig.storageId,
+    options.flowConfig.outputNodeId,
+    getManager,
+    releaseManager,
+  ]);
+
+  // Set an input value
+  const setInput = useCallback((nodeId: string, value: unknown) => {
+    setInputs((prev) => ({ ...prev, [nodeId]: value }));
+  }, []);
+
+  // Execute flow with current inputs
+  const execute = useCallback(async () => {
+    if (!managerRef.current) {
+      throw new Error("FlowManager not initialized");
+    }
+
+    if (Object.keys(inputs).length === 0) {
+      throw new Error(
+        "No inputs provided. Use setInput() to provide inputs before calling execute()",
+      );
+    }
+
+    await managerRef.current.executeFlow(inputs);
+  }, [inputs]);
+
+  // Convenience method for single file upload
+  const upload = useCallback(
+    async (file: File | Blob) => {
+      if (!managerRef.current) {
+        throw new Error("FlowManager not initialized");
+      }
+
+      // If we have input metadata, use the first input node
+      // Otherwise, let the manager discover it
+      if (inputMetadata && inputMetadata.length > 0) {
+        const firstInputNode = inputMetadata[0];
+        setInputs({ [firstInputNode.nodeId]: file });
+        await managerRef.current.executeFlow({ [firstInputNode.nodeId]: file });
+      } else {
+        // Fall back to direct upload (manager will handle discovery)
+        await managerRef.current.upload(file);
+      }
+    },
+    [inputMetadata],
+  );
+
+  const abort = useCallback(() => {
+    managerRef.current?.abort();
+  }, []);
+
+  const pause = useCallback(() => {
+    managerRef.current?.pause();
+  }, []);
+
+  const reset = useCallback(() => {
+    managerRef.current?.reset();
+    setInputs({});
+    setInputStates(new Map());
+  }, []);
+
+  // Derive computed values from state (reactive to state changes)
+  const isUploading =
+    state.status === "uploading" || state.status === "processing";
+  const isUploadingFile = state.status === "uploading";
+  const isProcessing = state.status === "processing";
+
+  return {
+    state,
+    inputMetadata,
+    inputStates,
+    inputs,
+    setInput,
+    execute,
+    upload,
+    abort,
+    pause,
+    reset,
+    isUploading,
+    isUploadingFile,
+    isProcessing,
+    isDiscoveringInputs,
+  };
+}

package/src/index.ts

@@ -15,6 +15,8 @@ export type {
 export { useUploadEvents } from "./hooks/use-upload-events";
 
 // Flow Upload Hooks
+export type { FlowInputProps } from "./components/flow-input";
+export { FlowInput } from "./components/flow-input";
 
 export type {
   FlowUploadListProps,
@@ -47,6 +49,19 @@ export type { UseMultiFlowUploadReturn } from "./hooks/use-multi-flow-upload";
 export { useMultiFlowUpload } from "./hooks/use-multi-flow-upload";
 
 // Flow Hooks
+export type {
+  FlowInputMetadata,
+  InputExecutionState,
+  UseFlowReturn,
+} from "./hooks/use-flow";
+export { useFlow } from "./hooks/use-flow";
+
+export type {
+  InputBuilder,
+  UseFlowExecutionOptions,
+  UseFlowExecutionReturn,
+} from "./hooks/use-flow-execution";
+export { useFlowExecution } from "./hooks/use-flow-execution";
 
 // Upload Hooks
 export type {

package/dist/upload-zone-DN7Gem65.mjs

@@ -1,2 +0,0 @@
-import{a as e,i as t,n,r,t as i}from"./use-upload-C7QZSt1M.mjs";import{useCallback as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({flowConfig:t,options:n,children:r}){let i=e({...n,flowConfig:t});return s(o,{children:r({items:i.state.items,totalProgress:i.state.totalProgress,activeUploads:i.state.activeUploads,completedUploads:i.state.completedUploads,failedUploads:i.state.failedUploads,isUploading:i.isUploading,addFiles:i.addFiles,removeFile:i.removeFile,startUpload:i.startUpload,abortUpload:i.abortUpload,abortAll:i.abortAll,clear:i.clear,retryUpload:i.retryUpload})})}function u({item:e,onAbort:t,onRetry:n,onRemove:r}){return c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,padding:`8px`,borderBottom:`1px solid #eee`},children:[s(`span`,{style:{color:(()=>{switch(e.status){case`success`:return`green`;case`error`:return`red`;case`uploading`:return`blue`;case`aborted`:return`gray`;default:return`black`}})(),fontSize:`18px`},children:(()=>{switch(e.status){case`success`:return`✓`;case`error`:return`✗`;case`uploading`:return`⟳`;case`aborted`:return`⊘`;default:return`○`}})()}),c(`div`,{style:{flex:1,minWidth:0},children:[s(`div`,{style:{fontSize:`14px`,fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.file instanceof File?e.file.name:`Upload`}),e.status===`uploading`&&c(`div`,{style:{marginTop:`4px`},children:[s(`progress`,{value:e.progress,max:100,style:{width:`100%`,height:`4px`}}),c(`div`,{style:{fontSize:`12px`,color:`#666`,marginTop:`2px`},children:[e.progress,`% • `,Math.round(e.bytesUploaded/1024),` KB /`,` `,Math.round(e.totalBytes/1024),` KB`]})]}),e.status===`error`&&s(`div`,{style:{fontSize:`12px`,color:`red`,marginTop:`2px`},children:e.error?.message||`Upload failed`}),e.status===`success`&&s(`div`,{style:{fontSize:`12px`,color:`green`,marginTop:`2px`},children:`Upload complete`})]}),c(`div`,{style:{display:`flex`,gap:`8px`},children:[e.status===`uploading`&&s(`button`,{type:`button`,onClick:t,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`}),e.status===`error`&&s(`button`,{type:`button`,onClick:n,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Retry`}),(e.status===`pending`||e.status===`error`||e.status===`aborted`)&&s(`button`,{type:`button`,onClick:r,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Remove`})]})]})}function d({flowConfig:e,options:t,className:n=``,showFileInput:r=!0,accept:i}){return s(l,{flowConfig:e,options:t,children:({items:e,addFiles:t,startUpload:a,abortUpload:o,retryUpload:l,removeFile:d,totalProgress:f})=>c(`div`,{className:n,children:[r&&s(`div`,{style:{marginBottom:`16px`},children:s(`input`,{type:`file`,multiple:!0,accept:i,onChange:e=>{e.target.files&&(t(e.target.files),a())},style:{padding:`8px`,border:`1px solid #ccc`,borderRadius:`4px`}})}),e.length>0&&c(`div`,{children:[c(`div`,{style:{marginBottom:`8px`,fontSize:`14px`,color:`#666`},children:[`Total Progress: `,f,`%`]}),s(`div`,{style:{border:`1px solid #eee`,borderRadius:`8px`,overflow:`hidden`},children:e.map(e=>s(u,{item:e,onAbort:()=>o(e.id),onRetry:()=>l(e.id),onRemove:()=>d(e.id)},e.id))})]})]})})}function f({flowConfig:e,options:n,accept:i,multiple:a=!1,children:c}){let l=r({...n,flowConfig:e}),u=t({onFilesReceived:e=>{let t=e[0];t&&l.upload(t)},accept:i?[i]:void 0,multiple:a}),d=e=>{let t=e.target.files?.[0];t&&l.upload(t)};return s(o,{children:c({flowUpload:l,dragDrop:u,isActive:u.state.isDragging||u.state.isOver,openFilePicker:u.openFilePicker,getRootProps:()=>u.dragHandlers,getInputProps:()=>({...u.inputProps,onChange:d})})})}function p({flowConfig:e,options:t,accept:n,className:r=``,dragText:i=`Drop files here`,idleText:a=`Drag & drop files or click to browse`}){return s(f,{flowConfig:e,options:t,accept:n,children:({dragDrop:e,flowUpload:t,getRootProps:n,getInputProps:o,openFilePicker:l})=>c(`div`,{...n(),className:r,style:{border:`2px dashed #ccc`,borderRadius:`8px`,padding:`32px`,textAlign:`center`,cursor:`pointer`,backgroundColor:e.state.isDragging?`#f0f0f0`:`transparent`,transition:`background-color 0.2s`},children:[s(`input`,{...o()}),e.state.isDragging&&s(`p`,{style:{margin:0},children:i}),!e.state.isDragging&&!t.isUploading&&t.state.status===`idle`&&c(`div`,{children:[s(`p`,{style:{margin:`0 0 16px 0`},children:a}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),l()},style:{padding:`8px 16px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Choose Files`})]}),t.isUploading&&c(`div`,{children:[s(`progress`,{value:t.state.progress,max:100,style:{width:`100%`,height:`8px`}}),c(`p`,{style:{margin:`8px 0 0 0`},children:[t.state.progress,`%`]}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation()},style:{marginTop:`8px`,padding:`4px 12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`})]}),t.state.status===`success`&&s(`div`,{children:s(`p`,{style:{margin:0,color:`green`},children:`✓ Upload complete!`})}),t.state.status===`error`&&s(`div`,{children:c(`p`,{style:{margin:0,color:`red`},children:[`✗ Error: `,t.state.error?.message]})})]})})}function m({multiUpload:e,filter:t,sortBy:n,children:r}){let i=e.items;t&&(i=i.filter(t)),n&&(i=[...i].sort(n));let a={idle:i.filter(e=>e.state.status===`idle`),uploading:i.filter(e=>e.state.status===`uploading`),success:i.filter(e=>e.state.status===`success`),error:i.filter(e=>e.state.status===`error`),aborted:i.filter(e=>e.state.status===`aborted`)};return s(o,{children:r({items:i,itemsByStatus:a,multiUpload:e,actions:{removeItem:t=>{e.removeItem(t)},retryItem:t=>{e.retryFailed()},abortItem:t=>{e.removeItem(t.id)},startItem:t=>{e.startAll()}}})})}function h({item:e,actions:t,className:n=``,style:r={},showDetails:i=!0}){let a=e=>{switch(e){case`idle`:return`#6c757d`;case`uploading`:return`#007bff`;case`success`:return`#28a745`;case`error`:return`#dc3545`;case`aborted`:return`#6c757d`;default:return`#6c757d`}},l=e=>{switch(e){case`idle`:return`⏳`;case`uploading`:return`📤`;case`success`:return`✅`;case`error`:return`❌`;case`aborted`:return`⏹️`;default:return`❓`}},u=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(2))} ${n[r]}`};return c(`div`,{className:`upload-list-item upload-list-item--${e.state.status} ${n}`,style:{padding:`12px`,border:`1px solid #e0e0e0`,borderRadius:`6px`,marginBottom:`8px`,backgroundColor:`#fff`,transition:`all 0.2s ease`,...r},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flex:1},children:[s(`span`,{style:{fontSize:`16px`},children:l(e.state.status)}),s(`span`,{style:{fontWeight:`500`,flex:1},children:e.file instanceof File?e.file.name:`File`})]}),s(`span`,{style:{fontSize:`12px`,color:a(e.state.status),fontWeight:`500`,textTransform:`uppercase`},children:e.state.status})]}),e.state.status===`uploading`&&c(`div`,{style:{marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`4px`},children:[c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[e.state.progress,`%`]}),i&&e.state.totalBytes&&c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[u(e.state.bytesUploaded),` /`,` `,u(e.state.totalBytes)]})]}),s(`div`,{style:{width:`100%`,height:`6px`,backgroundColor:`#e0e0e0`,borderRadius:`3px`,overflow:`hidden`},children:s(`div`,{style:{width:`${e.state.progress}%`,height:`100%`,backgroundColor:`#007bff`,transition:`width 0.2s ease`}})})]}),i&&c(`div`,{style:{fontSize:`12px`,color:`#666`,marginBottom:`8px`},children:[e.state.totalBytes&&s(`span`,{children:u(e.state.totalBytes)}),e.state.status===`uploading`&&e.state.progress>0&&c(`span`,{children:[` • Progress: `,e.state.progress,`%`]}),e.state.status===`error`&&e.state.error&&s(`div`,{style:{color:`#dc3545`,marginTop:`4px`},children:e.state.error.message})]}),c(`div`,{style:{display:`flex`,gap:`8px`,flexWrap:`wrap`},children:[e.state.status===`idle`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.startItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Start`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`uploading`&&s(`button`,{type:`button`,onClick:()=>t.abortItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #dc3545`,backgroundColor:`transparent`,color:`#dc3545`,borderRadius:`4px`,cursor:`pointer`},children:`Cancel`}),e.state.status===`error`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #28a745`,backgroundColor:`#28a745`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`success`&&s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`}),e.state.status===`aborted`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]})]})]})}function g({children:e,multiple:r=!0,multiUploadOptions:c={},uploadOptions:l={},onUploadStart:u,onValidationError:d,...f}){let p=i(l),m=n(c),h=a(e=>{let t=[];if(!r&&e.length>1&&t.push(`Single file mode is enabled. Please select only one file. You selected ${e.length} files.`),f.accept&&f.accept.length>0){let n=e.filter(e=>!f.accept?.some(t=>{if(t.startsWith(`.`))return e.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith(`/*`)){let n=t.slice(0,-2);return e.type.startsWith(n)}else return e.type===t}));if(n.length>0){let e=n.map(e=>`"${e.name}" (${e.type})`).join(`, `),r=f.accept.join(`, `);t.push(`Invalid file type(s): ${e}. Accepted types: ${r}.`)}}return t.length>0?t:null},[r,f.accept]),g=e=>{u?.(e),r&&m?(m.addFiles(e),setTimeout(()=>m.startAll(),0)):!r&&p&&e.length>0&&e[0]&&p.upload(e[0])},_=a(e=>{console.error(`Upload zone validation errors:`,e),d?.(e)},[d]),v=t({...f,multiple:r,validator:h,onFilesReceived:g,onValidationError:_}),y=v.state.isDragging||v.state.isOver,b=r?m?.state.isUploading??!1:p?.isUploading??!1;return s(o,{children:e({dragDrop:v,upload:p,multiUpload:m,openFilePicker:v.openFilePicker,isActive:y,isProcessing:b})})}function _({className:e=``,style:t={},text:n={},errorStyle:r={},children:i,...a}){let o={idle:a.multiple?`Drag files here or click to select`:`Drag a file here or click to select`,dragging:a.multiple?`Drop files here...`:`Drop file here...`,uploading:`Uploading...`,...n};return i?s(g,{...a,children:i}):s(g,{...a,children:({dragDrop:n,upload:i,multiUpload:a,openFilePicker:l,isActive:u,isProcessing:d})=>c(`button`,{type:`button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&l()},onKeyUp:e=>{(e.key===`Enter`||e.key===` `)&&l()},...n.dragHandlers,onClick:l,className:`upload-zone ${u?`upload-zone--active`:``} ${d?`upload-zone--processing`:``} ${e}`,style:{border:u?`2px dashed #007bff`:`2px dashed #ccc`,borderRadius:`8px`,padding:`2rem`,textAlign:`center`,cursor:`pointer`,backgroundColor:u?`#f8f9fa`:`transparent`,transition:`all 0.2s ease`,minHeight:`120px`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,...t},children:[n.state.isDragging?s(`p`,{style:{margin:0,fontSize:`16px`,color:`#007bff`},children:o.dragging}):d?c(`div`,{style:{textAlign:`center`},children:[s(`p`,{style:{margin:`0 0 10px 0`,fontSize:`14px`},children:o.uploading}),i&&c(`div`,{children:[s(`progress`,{value:i.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[i.state.progress,`%`]})]}),a&&c(`div`,{children:[s(`progress`,{value:a.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[a.state.progress,`% (`,a.state.uploading,` `,`uploading, `,a.state.successful,` completed)`]})]})]}):s(`p`,{style:{margin:0,fontSize:`16px`,color:`#666`},children:o.idle}),n.state.errors.length>0&&c(`div`,{style:{marginTop:`10px`,padding:`8px 12px`,backgroundColor:`#f8d7da`,border:`1px solid #f5c6cb`,borderRadius:`4px`,maxWidth:`100%`,...r},children:[s(`p`,{style:{margin:`0 0 5px 0`,fontSize:`12px`,fontWeight:`bold`,color:`#721c24`},children:`Validation Errors:`}),n.state.errors.map((e,t)=>c(`p`,{style:{color:`#721c24`,fontSize:`11px`,margin:`2px 0`,lineHeight:`1.3`},children:[`• `,e]},t))]}),s(`input`,{...n.inputProps})]})})}export{f as a,d as c,m as i,u as l,g as n,p as o,h as r,l as s,_ as t};
-//# sourceMappingURL=upload-zone-DN7Gem65.mjs.map