@teamflojo/floimg-studio-ui 0.5.0 → 0.5.2

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CommandPalette - Raycast/Linear-style command palette
+ * Triggered by Cmd+K for quick action discovery and execution
+ */
+interface CommandPaletteProps {
+    /** Callback to toggle AI Chat (since it's local state in App) */
+    onToggleAIChat?: () => void;
+}
+export declare function CommandPalette({ onToggleAIChat }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ConfirmationDialog.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ConfirmationDialog - Accessible confirmation modal
+ * Used for destructive actions like creating a new workflow with unsaved changes
+ */
+interface ConfirmationDialogProps {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Title of the dialog */
+    title: string;
+    /** Message/description */
+    message: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Callback when confirmed */
+    onConfirm: () => void;
+    /** Callback when cancelled */
+    onCancel: () => void;
+    /** Whether the action is destructive (changes button styling) */
+    destructive?: boolean;
+}
+export declare function ConfirmationDialog({ isOpen, title, message, confirmText, cancelText, onConfirm, onCancel, destructive, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/KeyBadge.d.ts

@@ -0,0 +1,31 @@
+/**
+ * KeyBadge - Displays keyboard shortcut keys as styled badges
+ * Platform-aware (shows ⌘ on Mac, Ctrl on Windows)
+ */
+interface KeyBadgeProps {
+    /** Shortcut binding string (e.g., 'mod+s', 'mod+shift+k') */
+    binding: string | null;
+    /** Optional additional className */
+    className?: string;
+    /** Size variant */
+    size?: "sm" | "md";
+}
+/**
+ * Displays a keyboard shortcut as styled key badges
+ * Automatically converts platform-agnostic bindings to platform-specific display
+ */
+export declare function KeyBadge({ binding, className, size }: KeyBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Displays a shortcut inline with action text
+ * Example: "Save Workflow" with "⌘S" badge
+ */
+interface ShortcutLabelProps {
+    /** Action name */
+    label: string;
+    /** Shortcut binding */
+    binding: string | null;
+    /** Optional additional className for the container */
+    className?: string;
+}
+export declare function ShortcutLabel({ label, binding, className }: ShortcutLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KeyboardSettings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * KeyboardSettings - Customization UI for keyboard shortcuts
+ * Allows users to view and remap shortcuts
+ */
+interface KeyboardSettingsProps {
+    /** Optional className */
+    className?: string;
+}
+export declare function KeyboardSettings({ className }: KeyboardSettingsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KeyboardShortcutsModal.d.ts

@@ -0,0 +1,5 @@
+/**
+ * KeyboardShortcutsModal - Shows all available keyboard shortcuts
+ * Triggered by Cmd+? or clicking help
+ */
+export declare function KeyboardShortcutsModal(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/NodeInspector.d.ts

@@ -1 +1 @@
-export declare function NodeInspector(): import("react/jsx-runtime").JSX.Element;
+export declare function NodeInspector(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/NodePaletteItem.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { NodeDefinition } from '@teamflojo/floimg-studio-shared';
+
+export type NodePaletteColorVariant = "amber" | "blue" | "teal" | "pink" | "cyan" | "orange" | "emerald";
+export interface NodePaletteItemProps {
+    /** The node definition to render */
+    definition: NodeDefinition;
+    /** Color variant for the palette item */
+    colorVariant: NodePaletteColorVariant;
+    /** Handler for drag start - receives the definition to serialize */
+    onDragStart: (e: React.DragEvent, definition: NodeDefinition) => void;
+    /** Handler for double-click - adds node to canvas */
+    onDoubleClick: (definition: NodeDefinition) => void;
+    /** Whether this node is disabled (prevents drag/add) */
+    disabled?: boolean;
+    /** Handler for when a disabled node is clicked */
+    onDisabledClick?: (definition: NodeDefinition) => void;
+    /** Custom badge to render (e.g., icon, tag) */
+    badge?: ReactNode;
+    /** Message to display instead of description when disabled */
+    alternateMessage?: string;
+}
+/**
+ * A single item in the node palette. Renders with themed CSS classes
+ * for consistent styling.
+ *
+ * Extension features (disabled state, badges) are opt-in via props.
+ */
+export declare function NodePaletteItem({ definition, colorVariant, onDragStart, onDoubleClick, disabled, onDisabledClick, badge, alternateMessage, }: NodePaletteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ShortcutRecorder.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ShortcutRecorder - VS Code-style keyboard shortcut recording widget
+ * Click to start recording, press keys to set, Escape to cancel
+ */
+interface ShortcutRecorderProps {
+    /** Current binding value */
+    value: string | null;
+    /** Callback when binding changes */
+    onChange: (binding: string | null) => void;
+    /** Callback to check for conflicts */
+    onConflictCheck?: (binding: string) => string | null;
+    /** Whether the recorder is disabled */
+    disabled?: boolean;
+    /** Optional additional className */
+    className?: string;
+}
+export declare function ShortcutRecorder({ value, onChange, onConflictCheck, disabled, className, }: ShortcutRecorderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -2,6 +2,7 @@
 export { default as App } from './App';
 export { WorkflowEditor } from './editor/WorkflowEditor';
 export { NodePalette } from './components/NodePalette';
+export { NodePaletteItem, type NodePaletteItemProps, type NodePaletteColorVariant, } from './components/NodePaletteItem';
 export { NodeInspector } from './components/NodeInspector';
 export { Toolbar, type ToolbarProps } from './components/Toolbar';
 export { Gallery } from './components/Gallery';
@@ -10,6 +11,12 @@ export { WorkflowLibrary } from './components/WorkflowLibrary';
 export { AISettings } from './components/AISettings';
 export { AIChat } from './components/AIChat';
 export { UploadGallery } from './components/UploadGallery';
+export { CommandPalette } from './components/CommandPalette';
+export { KeyboardShortcutsModal } from './components/KeyboardShortcutsModal';
+export { useKeyboardShortcuts } from './lib/keyboard/useKeyboardShortcuts';
+export { SHORTCUT_DEFINITIONS, CATEGORY_NAMES } from './lib/keyboard/shortcuts';
+export type * from './lib/keyboard/types';
 export { useWorkflowStore } from './stores/workflowStore';
+export { useSettingsStore } from './stores/settingsStore';
 export { coreTemplates as templates, getCoreCategories as getCategories, getCoreTemplatesByCategory as getTemplatesByCategory, getCoreTemplateById as getTemplateById, searchCoreTemplates as searchTemplates, resolveTemplate, type Template, } from '@teamflojo/floimg-templates';
 export type * from '@teamflojo/floimg-studio-shared';