@teamflojo/floimg-studio-ui 0.10.5 → 0.11.0

package/README.md

@@ -73,6 +73,37 @@ import { Toolbar, type ToolbarProps } from "@teamflojo/floimg-studio-ui";
 />;
 ```
 
+## Storage Adapter
+
+For custom storage backends (e.g., S3, cloud storage), provide a `StorageAdapter`:
+
+```tsx
+import { StorageAdapterProvider, ossStorageAdapter } from "@teamflojo/floimg-studio-ui";
+import type { StorageAdapter } from "@teamflojo/floimg-studio-shared";
+
+// Use the built-in OSS adapter (local filesystem)
+<StorageAdapterProvider adapter={ossStorageAdapter}>
+  <App />
+</StorageAdapterProvider>;
+
+// Or implement your own
+const myAdapter: StorageAdapter = {
+  async upload(file: File) {
+    // Upload to your storage backend
+    return { reference: "id", filename: file.name, mime: file.type, size: file.size };
+  },
+  getPreviewUrl(reference: string) {
+    return `/my-storage/${reference}`;
+  },
+};
+
+<StorageAdapterProvider adapter={myAdapter}>
+  <App />
+</StorageAdapterProvider>;
+```
+
+The adapter handles Input node file uploads. Without a provider, the default `/api/uploads` endpoint is used.
+
 ## State Management
 
 Access workflow state with Zustand:

package/dist/api/client.d.ts

@@ -52,20 +52,6 @@ export interface ImageInfo {
 export declare function listImages(): Promise<ImageInfo[]>;
 export declare function getImageUrl(id: string): string;
 export declare function getImageWorkflow(id: string): Promise<ImageMetadata | null>;
-export interface UploadInfo {
-    id: string;
-    filename: string;
-    mime: string;
-    size: number;
-    createdAt: number;
-}
-export declare function uploadImage(file: File): Promise<UploadInfo>;
-export declare function listUploads(): Promise<UploadInfo[]>;
-export declare function getUploadThumbnail(id: string): Promise<{
-    dataUrl: string;
-}>;
-export declare function deleteUpload(id: string): Promise<void>;
-export declare function getUploadBlobUrl(id: string): string;
 export declare function getInputNodes(): Promise<NodeDefinition[]>;
 export interface ImportResult {
     success: boolean;

package/dist/components/AIPanel.d.ts

@@ -0,0 +1,44 @@
+import { GeneratedWorkflowData } from '@teamflojo/floimg-studio-shared';
+import { CanvasSnapshot, ExecutionContext } from '../stores/aiChatStore';
+
+/**
+ * Analytics data for successful workflow generation
+ */
+export interface GenerationSuccessData {
+    nodeCount: number;
+    hasAINodes: boolean;
+    promptLength: number;
+    isConversation: boolean;
+}
+/**
+ * Analytics data for failed workflow generation
+ */
+export interface GenerationFailedData {
+    errorType: "invalid_node_type" | "generation_error" | "rate_limit" | "network" | "unknown";
+    promptLength: number;
+    isConversation: boolean;
+}
+interface AIPanelProps {
+    onApplyWorkflow: (workflow: GeneratedWorkflowData) => void;
+    /** Apply workflow as a new workflow (fork) - clears workflow name/ID */
+    onApplyAsNewWorkflow?: (workflow: GeneratedWorkflowData) => void;
+    /** Current canvas state for AI context */
+    canvasSnapshot?: CanvasSnapshot;
+    /** Last execution results for AI context */
+    executionContext?: ExecutionContext;
+    /** Called when workflow generation succeeds (for analytics) */
+    onGenerationSuccess?: (data: GenerationSuccessData) => void;
+    /** Called when workflow generation fails (for analytics) */
+    onGenerationFailed?: (data: GenerationFailedData) => void;
+}
+/**
+ * AIPanel - Persistent slide-out panel for AI workflow generation
+ *
+ * Features:
+ * - Stays open while editing canvas
+ * - Maintains conversation history
+ * - Aware of current canvas state
+ * - Includes execution results context
+ */
+export declare function AIPanel({ onApplyWorkflow, onApplyAsNewWorkflow, canvasSnapshot, executionContext, onGenerationSuccess, onGenerationFailed, }: AIPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ConflictResolutionModal.d.ts

@@ -0,0 +1,13 @@
+import { OperationConflict, ResolvedConflict } from '@teamflojo/floimg-studio-shared';
+
+interface ConflictResolutionModalProps {
+    conflicts: OperationConflict[];
+    onResolve: (resolved: ResolvedConflict[]) => void;
+    onCancel: () => void;
+}
+/**
+ * Modal for resolving conflicts between user edits and AI operations.
+ * Shows each conflict with options to keep user's changes, accept AI's changes, or skip.
+ */
+export declare function ConflictResolutionModal({ conflicts, onResolve, onCancel, }: ConflictResolutionModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -11,7 +11,8 @@ export { TemplateGallery } from './components/TemplateGallery';
 export { WorkflowLibrary } from './components/WorkflowLibrary';
 export { AISettings } from './components/AISettings';
 export { AIChat, type GenerationSuccessData, type GenerationFailedData } from './components/AIChat';
-export { UploadGallery } from './components/UploadGallery';
+export { AIPanel } from './components/AIPanel';
+export { useAIChatStore, type CanvasSnapshot, type ExecutionContext } from './stores/aiChatStore';
 export { CommandPalette } from './components/CommandPalette';
 export { KeyboardShortcutsModal } from './components/KeyboardShortcutsModal';
 export { useKeyboardShortcuts } from './lib/keyboard/useKeyboardShortcuts';