@floegence/floe-webapp-core 0.12.0 → 0.13.0

package/dist/components/file-browser/DirectoryTree.d.ts

@@ -1,5 +1,9 @@
 export interface DirectoryTreeProps {
     class?: string;
+    /** Instance ID for drag operations */
+    instanceId?: string;
+    /** Whether drag and drop is enabled */
+    enableDragDrop?: boolean;
 }
 /**
  * Collapsible directory tree for sidebar navigation (folders only)

package/dist/components/file-browser/DragPreview.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Floating preview that follows the cursor during drag operations.
+ * Shows dragged items with a count badge for multiple items.
+ * Uses CSS transform for GPU-accelerated smooth positioning.
+ */
+export declare function DragPreview(): import("solid-js").JSX.Element;

package/dist/components/file-browser/FileBrowser.d.ts

@@ -44,6 +44,12 @@ export interface FileBrowserProps {
     overrideContextMenuItems?: ContextMenuItem[];
     /** Default context menu items to hide */
     hideContextMenuItems?: FileContextMenuProps['hideItems'];
+    /** Unique instance identifier for cross-browser drag operations */
+    instanceId?: string;
+    /** Whether drag and drop is enabled (default: true) */
+    enableDragDrop?: boolean;
+    /** Callback when items are moved via drag and drop */
+    onDragMove?: (items: FileItem[], targetPath: string, sourceInstanceId: string) => void;
 }
 /**
  * Professional file browser component with list/grid views and directory tree sidebar

package/dist/components/file-browser/FileGridView.d.ts

@@ -1,5 +1,9 @@
 export interface FileGridViewProps {
     class?: string;
+    /** Instance ID for drag operations */
+    instanceId?: string;
+    /** Whether drag and drop is enabled */
+    enableDragDrop?: boolean;
 }
 /**
  * Grid/tile view for displaying files in a card format

package/dist/components/file-browser/FileListView.d.ts

@@ -1,5 +1,9 @@
 export interface FileListViewProps {
     class?: string;
+    /** Instance ID for drag operations */
+    instanceId?: string;
+    /** Whether drag and drop is enabled */
+    enableDragDrop?: boolean;
 }
 /**
  * List view for displaying files in a table format

package/dist/components/file-browser/types.d.ts

@@ -134,6 +134,39 @@ export interface ScrollPosition {
     top: number;
     left: number;
 }
+/**
+ * Represents an item being dragged in a file browser
+ */
+export interface FileDraggedItem {
+    /** The file item being dragged */
+    item: FileItem;
+    /** Instance ID of the source FileBrowser */
+    sourceInstanceId: string;
+    /** The path where the item was dragged from */
+    sourcePath: string;
+}
+/**
+ * Information about a potential drop target
+ */
+export interface FileDropTarget {
+    /** Instance ID of the target FileBrowser */
+    instanceId: string;
+    /** Path where the item would be dropped */
+    targetPath: string;
+    /** The folder item being dropped onto, or null for current directory root */
+    targetItem: FileItem | null;
+}
+/**
+ * Props for enabling drag behavior on a FileBrowser
+ */
+export interface FileBrowserDragProps {
+    /** Unique instance identifier for cross-browser drag operations */
+    instanceId?: string;
+    /** Whether drag and drop is enabled (default: true) */
+    enableDragDrop?: boolean;
+    /** Callback when items are moved via drag and drop */
+    onDragMove?: (items: FileItem[], targetPath: string, sourceInstanceId: string) => void;
+}
 /**
  * File browser context value for internal state management
  */

package/dist/components/ui/Form.d.ts

@@ -0,0 +1,116 @@
+import { type JSX, type Accessor } from 'solid-js';
+export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    /** Called when form is submitted */
+    onSubmit?: (e: SubmitEvent) => void | Promise<void>;
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Form wrapper with built-in submission state management.
+ * Automatically prevents default form behavior and tracks submitting state.
+ */
+export declare function Form(props: FormProps): JSX.Element;
+export interface FormFieldProps {
+    /** Field name for identification */
+    name?: string;
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Container for a form field. Provides context for label, control, and message components.
+ */
+export declare function FormField(props: FormFieldProps): JSX.Element;
+export interface FormLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Label for a form field. Automatically associates with the field control.
+ */
+export declare function FormLabel(props: FormLabelProps): JSX.Element;
+export interface FormControlProps {
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Wrapper for form input elements. Passes field context props to children.
+ * Children should accept id, aria-describedby, and aria-invalid props.
+ */
+export declare function FormControl(props: FormControlProps): JSX.Element;
+export interface FormDescriptionProps {
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Helper text displayed below a form field.
+ */
+export declare function FormDescription(props: FormDescriptionProps): JSX.Element;
+export interface FormMessageProps {
+    /** Error message to display */
+    error?: string;
+    /** Additional class names */
+    class?: string;
+    children?: JSX.Element;
+}
+/**
+ * Error or validation message for a form field.
+ * Automatically uses field context for accessibility.
+ */
+export declare function FormMessage(props: FormMessageProps): JSX.Element;
+export interface FormActionsProps {
+    /** Alignment of action buttons */
+    align?: 'start' | 'center' | 'end' | 'between';
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Container for form action buttons (Submit, Cancel, etc.)
+ */
+export declare function FormActions(props: FormActionsProps): JSX.Element;
+export interface FormSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Groups related form fields with an optional title and description.
+ */
+export declare function FormSection(props: FormSectionProps): JSX.Element;
+export interface FormDividerProps {
+    /** Optional label text */
+    label?: string;
+    /** Additional class names */
+    class?: string;
+}
+/**
+ * Visual divider between form sections.
+ */
+export declare function FormDivider(props: FormDividerProps): JSX.Element;
+export interface FormRowProps {
+    /** Number of columns on desktop (default: 2) */
+    cols?: 1 | 2 | 3 | 4;
+    /** Additional class names */
+    class?: string;
+    children: JSX.Element;
+}
+/**
+ * Horizontal layout for multiple form fields. Stacks on mobile.
+ */
+export declare function FormRow(props: FormRowProps): JSX.Element;
+/**
+ * Hook to access form submission state from within the form.
+ * Returns undefined if used outside a Form component.
+ */
+export declare function useFormSubmitting(): Accessor<boolean> | undefined;

package/dist/components/ui/index.d.ts

@@ -13,4 +13,5 @@ export { type BasePickerProps } from './picker/PickerBase';
 export { QuoteBlock, type QuoteBlockProps } from './QuoteBlock';
 export { HighlightBlock, InfoBlock, WarningBlock, SuccessBlock, ErrorBlock, NoteBlock, TipBlock, type HighlightBlockProps, type HighlightVariant, } from './HighlightBlock';
 export { ProcessingIndicator, type ProcessingIndicatorProps, type ProcessingIndicatorVariant, type ProcessingIndicatorStatus, } from './ProcessingIndicator';
+export { Form, FormField, FormLabel, FormControl, FormDescription, FormMessage, FormActions, FormSection, FormDivider, FormRow, useFormSubmitting, type FormProps, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormDescriptionProps, type FormMessageProps, type FormActionsProps, type FormSectionProps, type FormDividerProps, type FormRowProps, } from './Form';
 export { LineChart, AreaChart, DataBarChart, DataPieChart, MonitoringChart, type ChartDataPoint, type ChartSeries, type ChartVariant, type LineChartProps, type AreaChartProps, type DataBarChartProps, type DataPieChartProps, type MonitoringChartProps, } from './Charts';

package/dist/context/FileBrowserDragContext.d.ts

@@ -0,0 +1,84 @@
+import { type JSX, type Accessor } from 'solid-js';
+import type { FileItem } from '../components/file-browser/types';
+/**
+ * Represents an item being dragged
+ */
+export interface DraggedItem {
+    item: FileItem;
+    sourceInstanceId: string;
+    sourcePath: string;
+}
+/**
+ * Current drop target information
+ */
+export interface DropTarget {
+    instanceId: string;
+    targetPath: string;
+    /** The target folder item, or null if dropping into current directory root */
+    targetItem: FileItem | null;
+}
+/**
+ * Global drag state for FileBrowser instances
+ */
+export interface FileBrowserDragState {
+    isDragging: boolean;
+    draggedItems: DraggedItem[];
+    sourceInstanceId: string | null;
+    pointerPosition: {
+        x: number;
+        y: number;
+    };
+    dropTarget: DropTarget | null;
+    /** Whether the current drop target is valid */
+    isValidDrop: boolean;
+}
+/**
+ * A registered FileBrowser instance that can participate in drag operations
+ */
+export interface FileBrowserDragInstance {
+    instanceId: string;
+    currentPath: Accessor<string>;
+    files: Accessor<FileItem[]>;
+    /** Called when items are dropped onto this instance */
+    onDragMove: ((items: FileItem[], targetPath: string, sourceInstanceId: string) => void) | undefined;
+    /** Get the scrollable container element for auto-scroll */
+    getScrollContainer: () => HTMLElement | null;
+    /** Get the sidebar scroll container for auto-scroll */
+    getSidebarScrollContainer: () => HTMLElement | null;
+    /** Optimistically remove items from display */
+    optimisticRemove: (paths: string[]) => void;
+    /** Optimistically insert an item */
+    optimisticInsert: (parentPath: string, item: FileItem) => void;
+}
+/**
+ * Context value for FileBrowser drag operations
+ */
+export interface FileBrowserDragContextValue {
+    dragState: Accessor<FileBrowserDragState>;
+    registerInstance: (instance: FileBrowserDragInstance) => void;
+    unregisterInstance: (instanceId: string) => void;
+    getInstance: (instanceId: string) => FileBrowserDragInstance | undefined;
+    getInstances: () => Map<string, FileBrowserDragInstance>;
+    startDrag: (items: DraggedItem[], x: number, y: number) => void;
+    updateDrag: (x: number, y: number) => void;
+    setDropTarget: (target: DropTarget | null, isValid: boolean) => void;
+    endDrag: (commit: boolean) => void;
+    canDropOn: (draggedItems: DraggedItem[], targetPath: string, targetItem: FileItem | null, targetInstanceId: string) => boolean;
+}
+export interface FileBrowserDragProviderProps {
+    children: JSX.Element;
+}
+/**
+ * Provider for global FileBrowser drag state management.
+ * Should be mounted at the application/Deck level to enable cross-component dragging.
+ */
+export declare function FileBrowserDragProvider(props: FileBrowserDragProviderProps): JSX.Element;
+/**
+ * Hook to access FileBrowser drag context.
+ * Returns undefined if used outside of FileBrowserDragProvider.
+ */
+export declare function useFileBrowserDrag(): FileBrowserDragContextValue | undefined;
+/**
+ * Hook to check if FileBrowser drag context is available
+ */
+export declare function hasFileBrowserDragContext(): boolean;

package/dist/context/index.d.ts

@@ -9,3 +9,4 @@ export { WidgetRegistryProvider, useWidgetRegistry, createWidgetRegistry, type W
 export { DeckProvider, useDeck, createDeckService, type DeckWidget, type DeckLayout, type DragState, type ResizeState, type DeckContextValue, } from './DeckContext';
 export { WidgetStateProvider, useWidgetStateContext, useWidgetState, useCurrentWidgetId, type WidgetStateContextValue, type WidgetStateProviderProps, } from './WidgetStateContext';
 export { ViewActivationProvider, useViewActivation, type ViewActivationContextValue, type ViewActivationProviderProps } from './ViewActivationContext';
+export { FileBrowserDragProvider, useFileBrowserDrag, hasFileBrowserDragContext, type DraggedItem, type DropTarget, type FileBrowserDragState, type FileBrowserDragInstance, type FileBrowserDragContextValue, type FileBrowserDragProviderProps, } from './FileBrowserDragContext';

package/dist/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { useResizeObserver, type Size } from './useResizeObserver';
 export { useKeybind } from './useKeybind';
 export { usePersisted } from './usePersisted';
 export { useDeckDrag } from './useDeckDrag';
+export { useFileBrowserItemDrag, useFileBrowserDropTarget, type UseFileBrowserItemDragOptions, type FileBrowserItemDragHandlers, type UseFileBrowserDropTargetOptions, type FileBrowserDropTargetResult, } from './useFileBrowserDrag';

package/dist/hooks/useFileBrowserDrag.d.ts

@@ -0,0 +1,67 @@
+import { type Accessor } from 'solid-js';
+import type { FileItem } from '../components/file-browser/types';
+/**
+ * Options for the useFileBrowserItemDrag hook
+ */
+export interface UseFileBrowserItemDragOptions {
+    /** Instance ID of this FileBrowser */
+    instanceId: string;
+    /** Get currently selected items */
+    getSelectedItems: () => FileItem[];
+    /** Current directory path */
+    currentPath: Accessor<string>;
+    /** Check if an item is selected */
+    isSelected: (id: string) => boolean;
+    /** Select item on drag start if not already selected */
+    selectItem: (id: string, multi: boolean) => void;
+    /** Whether drag is enabled */
+    enabled?: Accessor<boolean>;
+    /** Called when drag starts (for haptic feedback on mobile) */
+    onDragStart?: () => void;
+}
+/**
+ * Return value from useFileBrowserItemDrag
+ */
+export interface FileBrowserItemDragHandlers {
+    /** Returns true if currently dragging */
+    isDragging: Accessor<boolean>;
+    /** Props to spread on draggable items */
+    getDragHandlers: (item: FileItem) => {
+        onPointerDown: (e: PointerEvent) => void;
+        'data-draggable': string;
+    };
+}
+/**
+ * Hook to add drag behavior to FileBrowser items.
+ * Must be used within a FileBrowserDragProvider context.
+ */
+export declare function useFileBrowserItemDrag(options: UseFileBrowserItemDragOptions): FileBrowserItemDragHandlers;
+/**
+ * Hook to make an element a drop target for file browser drag operations.
+ */
+export interface UseFileBrowserDropTargetOptions {
+    /** Instance ID of this FileBrowser */
+    instanceId: string;
+    /** The folder item this target represents, or null for current directory root */
+    targetItem: Accessor<FileItem | null>;
+    /** The target path for dropping */
+    targetPath: Accessor<string>;
+    /** Whether this drop target is enabled */
+    enabled?: Accessor<boolean>;
+}
+export interface FileBrowserDropTargetResult {
+    /** Whether this target is currently being hovered during a drag */
+    isDropTarget: Accessor<boolean>;
+    /** Whether the current drop is valid */
+    isValidDrop: Accessor<boolean>;
+    /** Props to spread on the drop target element */
+    getDropTargetProps: () => {
+        onPointerEnter: (e: PointerEvent) => void;
+        onPointerLeave: (e: PointerEvent) => void;
+        'data-drop-target': string;
+    };
+}
+/**
+ * Hook to make an element a drop target for FileBrowser drag operations.
+ */
+export declare function useFileBrowserDropTarget(options: UseFileBrowserDropTargetOptions): FileBrowserDropTargetResult;