@seed-ship/mcp-ui-solid 2.0.0 → 2.1.0

package/dist/hooks/useAutocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocomplete.js","sources":["../../src/hooks/useAutocomplete.ts"],"sourcesContent":["/**\n * useAutocomplete Hook\n * Provides autocomplete functionality for form fields\n *\n * Sprint Autocomplete Feature\n */\n\nimport {\n  createSignal,\n  createEffect,\n  on,\n  Accessor,\n  onCleanup,\n  batch,\n  createMemo\n} from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport { useAutocompleteContextSafe } from '../context/AutocompleteContext'\nimport type {\n  AutocompleteOption,\n  AutocompleteContext,\n  FieldAutocompleteConfig\n} from '../types'\n\n/**\n * Options for the useAutocomplete hook\n */\nexport interface UseAutocompleteOptions {\n  /**\n   * Current input value accessor\n   */\n  inputValue: Accessor<string>\n\n  /**\n   * Plugin ID to use (overrides default)\n   */\n  pluginId?: string\n\n  /**\n   * Field configuration\n   */\n  fieldConfig?: FieldAutocompleteConfig\n\n  /**\n   * Context data for suggestions\n   */\n  context?: Accessor<AutocompleteContext>\n\n  /**\n   * Whether autocomplete is enabled\n   */\n  enabled?: boolean\n\n  /**\n   * Callback when input value should change (for accepting suggestions)\n   */\n  onInputChange?: (value: string) => void\n\n  /**\n   * Minimum characters before triggering\n   */\n  minChars?: number\n\n  /**\n   * Debounce delay in ms\n   */\n  debounceMs?: number\n}\n\n/**\n * Return type for the useAutocomplete hook\n */\nexport interface UseAutocompleteReturn {\n  /**\n   * Current completion text (for ghost text, LLM mode)\n   */\n  completion: Accessor<string | null>\n\n  /**\n   * Ghost text to show (remaining text after input)\n   */\n  ghostText: Accessor<string>\n\n  /**\n   * Accept the current completion\n   */\n  acceptCompletion: () => void\n\n  /**\n   * Current options (for dropdown, data mode)\n   */\n  options: Accessor<AutocompleteOption[]>\n\n  /**\n   * Currently selected option index\n   */\n  selectedIndex: Accessor<number>\n\n  /**\n   * Select an option by index\n   */\n  selectOption: (option: AutocompleteOption) => void\n\n  /**\n   * Navigate to next option\n   */\n  nextOption: () => void\n\n  /**\n   * Navigate to previous option\n   */\n  prevOption: () => void\n\n  /**\n   * Select current highlighted option\n   */\n  selectCurrentOption: () => void\n\n  /**\n   * Whether suggestions are loading\n   */\n  isLoading: Accessor<boolean>\n\n  /**\n   * Error message if any\n   */\n  error: Accessor<string | null>\n\n  /**\n   * Dismiss suggestions\n   */\n  dismiss: () => void\n\n  /**\n   * Whether suggestions are visible\n   */\n  isOpen: Accessor<boolean>\n\n  /**\n   * Result type ('completion' or 'options')\n   */\n  resultType: Accessor<'completion' | 'options' | null>\n\n  /**\n   * Open/show suggestions\n   */\n  open: () => void\n\n  /**\n   * Handle keyboard events\n   */\n  handleKeyDown: (e: KeyboardEvent) => boolean\n}\n\n/**\n * Debounce helper\n */\nfunction debounce<T extends (...args: any[]) => any>(\n  fn: T,\n  delay: number\n): { call: (...args: Parameters<T>) => void; cancel: () => void } {\n  let timeoutId: ReturnType<typeof setTimeout> | null = null\n\n  return {\n    call: (...args: Parameters<T>) => {\n      if (timeoutId) clearTimeout(timeoutId)\n      timeoutId = setTimeout(() => {\n        fn(...args)\n        timeoutId = null\n      }, delay)\n    },\n    cancel: () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId)\n        timeoutId = null\n      }\n    }\n  }\n}\n\n/**\n * Hook for autocomplete functionality\n */\nexport function useAutocomplete(options: UseAutocompleteOptions): UseAutocompleteReturn {\n  const {\n    inputValue,\n    pluginId,\n    fieldConfig,\n    context,\n    enabled = true,\n    onInputChange,\n    minChars: minCharsOption,\n    debounceMs: debounceOption\n  } = options\n\n  // Get context (may be undefined if no provider)\n  const autocompleteCtx = useAutocompleteContextSafe()\n\n  // State\n  const [completion, setCompletion] = createSignal<string | null>(null)\n  const [options_, setOptions] = createSignal<AutocompleteOption[]>([])\n  const [selectedIndex, setSelectedIndex] = createSignal(-1)\n  const [isLoading, setIsLoading] = createSignal(false)\n  const [error, setError] = createSignal<string | null>(null)\n  const [isOpen, setIsOpen] = createSignal(false)\n  const [resultType, setResultType] = createSignal<'completion' | 'options' | null>(null)\n\n  // Config with defaults from context/options\n  const config = createMemo(() => ({\n    minChars: minCharsOption ?? fieldConfig?.minChars ?? autocompleteCtx?.config.minChars ?? 1,\n    debounceMs: debounceOption ?? fieldConfig?.debounceMs ?? autocompleteCtx?.config.debounceMs ?? 150\n  }))\n\n  // Ghost text (portion after current input)\n  const ghostText = createMemo(() => {\n    const comp = completion()\n    const input = inputValue()\n\n    if (!comp || !input) return ''\n\n    // If completion starts with input, show the remaining part\n    if (comp.toLowerCase().startsWith(input.toLowerCase())) {\n      return comp.slice(input.length)\n    }\n\n    return ''\n  })\n\n  // Fetch suggestions\n  const fetchSuggestions = async (input: string) => {\n    if (!autocompleteCtx) {\n      return\n    }\n\n    if (input.length < config().minChars) {\n      batch(() => {\n        setCompletion(null)\n        setOptions([])\n        setIsOpen(false)\n        setResultType(null)\n      })\n      return\n    }\n\n    setIsLoading(true)\n    setError(null)\n\n    try {\n      const targetPluginId = pluginId ?? fieldConfig?.plugin\n      const contextData = context?.()\n\n      const result = await autocompleteCtx.getSuggestions(\n        input,\n        targetPluginId,\n        contextData\n      )\n\n      batch(() => {\n        setResultType(result.type)\n\n        if (result.type === 'completion') {\n          setCompletion(result.completion || null)\n          setOptions([])\n          setIsOpen(!!result.completion)\n        } else {\n          setCompletion(null)\n          setOptions(result.options || [])\n          setSelectedIndex(-1)\n          setIsOpen((result.options?.length || 0) > 0)\n        }\n\n        setIsLoading(false)\n      })\n    } catch (e) {\n      batch(() => {\n        setError(e instanceof Error ? e.message : 'Unknown error')\n        setIsLoading(false)\n        setIsOpen(false)\n      })\n    }\n  }\n\n  // Debounced fetch\n  const debouncedFetch = debounce(fetchSuggestions, config().debounceMs)\n\n  // Watch input value changes\n  createEffect(\n    on(inputValue, (value) => {\n      if (!enabled || !autocompleteCtx || isServer) {\n        return\n      }\n\n      debouncedFetch.call(value)\n    })\n  )\n\n  // Cleanup\n  onCleanup(() => {\n    debouncedFetch.cancel()\n  })\n\n  /**\n   * Accept the current completion\n   */\n  const acceptCompletion = () => {\n    const comp = completion()\n    if (comp && onInputChange) {\n      onInputChange(comp)\n      batch(() => {\n        setCompletion(null)\n        setIsOpen(false)\n      })\n    }\n  }\n\n  /**\n   * Select an option\n   */\n  const selectOption = (option: AutocompleteOption) => {\n    if (onInputChange) {\n      onInputChange(option.value)\n    }\n    batch(() => {\n      setOptions([])\n      setSelectedIndex(-1)\n      setIsOpen(false)\n    })\n  }\n\n  /**\n   * Navigate to next option\n   */\n  const nextOption = () => {\n    const opts = options_()\n    if (opts.length === 0) return\n\n    setSelectedIndex((prev) => {\n      const next = prev + 1\n      return next >= opts.length ? 0 : next\n    })\n  }\n\n  /**\n   * Navigate to previous option\n   */\n  const prevOption = () => {\n    const opts = options_()\n    if (opts.length === 0) return\n\n    setSelectedIndex((prev) => {\n      const next = prev - 1\n      return next < 0 ? opts.length - 1 : next\n    })\n  }\n\n  /**\n   * Select current highlighted option\n   */\n  const selectCurrentOption = () => {\n    const idx = selectedIndex()\n    const opts = options_()\n    if (idx >= 0 && idx < opts.length) {\n      selectOption(opts[idx])\n    }\n  }\n\n  /**\n   * Dismiss suggestions\n   */\n  const dismiss = () => {\n    debouncedFetch.cancel()\n    batch(() => {\n      setCompletion(null)\n      setOptions([])\n      setSelectedIndex(-1)\n      setIsOpen(false)\n      setError(null)\n    })\n  }\n\n  /**\n   * Open suggestions\n   */\n  const open = () => {\n    const input = inputValue()\n    if (input.length >= config().minChars) {\n      fetchSuggestions(input)\n    }\n  }\n\n  /**\n   * Handle keyboard events\n   * Returns true if the event was handled\n   */\n  const handleKeyDown = (e: KeyboardEvent): boolean => {\n    if (!isOpen()) return false\n\n    const type = resultType()\n\n    // Tab to accept completion\n    if (e.key === 'Tab' && type === 'completion' && ghostText()) {\n      e.preventDefault()\n      acceptCompletion()\n      return true\n    }\n\n    // Arrow keys for dropdown navigation\n    if (type === 'options') {\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          nextOption()\n          return true\n\n        case 'ArrowUp':\n          e.preventDefault()\n          prevOption()\n          return true\n\n        case 'Enter':\n          if (selectedIndex() >= 0) {\n            e.preventDefault()\n            selectCurrentOption()\n            return true\n          }\n          break\n\n        case 'Tab':\n          if (selectedIndex() >= 0) {\n            e.preventDefault()\n            selectCurrentOption()\n            return true\n          }\n          break\n      }\n    }\n\n    // Escape to dismiss\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      dismiss()\n      return true\n    }\n\n    return false\n  }\n\n  return {\n    completion,\n    ghostText,\n    acceptCompletion,\n    options: options_,\n    selectedIndex,\n    selectOption,\n    nextOption,\n    prevOption,\n    selectCurrentOption,\n    isLoading,\n    error,\n    dismiss,\n    isOpen,\n    resultType,\n    open,\n    handleKeyDown\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useDragDrop.cjs

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const solidJs = require("solid-js");
+function getDropPosition(e, targetElement) {
+  const rect = targetElement.getBoundingClientRect();
+  const midY = rect.top + rect.height / 2;
+  return e.clientY < midY ? "before" : "after";
+}
+function reorderComponents(components, sourceId, targetId, position) {
+  const sourceIndex = components.findIndex((c) => c.id === sourceId);
+  const targetIndex = components.findIndex((c) => c.id === targetId);
+  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+    return components;
+  }
+  const result = [...components];
+  const [sourceComponent] = result.splice(sourceIndex, 1);
+  let newTargetIndex = result.findIndex((c) => c.id === targetId);
+  if (position === "after") {
+    newTargetIndex += 1;
+  }
+  result.splice(newTargetIndex, 0, sourceComponent);
+  return recalculatePositions(result);
+}
+function recalculatePositions(components) {
+  let currentRow = 1;
+  const rowComponents = /* @__PURE__ */ new Map();
+  components.forEach((c, index) => {
+    const row = c.position.rowStart || index + 1;
+    if (!rowComponents.has(row)) {
+      rowComponents.set(row, []);
+    }
+    rowComponents.get(row).push(c);
+  });
+  const result = [];
+  const sortedRows = Array.from(rowComponents.keys()).sort((a, b) => a - b);
+  sortedRows.forEach((row) => {
+    const rowComps = rowComponents.get(row);
+    rowComps.forEach((c) => {
+      result.push({
+        ...c,
+        position: {
+          ...c.position,
+          rowStart: currentRow
+        }
+      });
+    });
+    currentRow += Math.max(...rowComps.map((c) => c.position.rowSpan || 1));
+  });
+  return result;
+}
+function useDragDrop(options) {
+  const {
+    components,
+    onReorder,
+    enabled = true
+  } = options;
+  const [draggedId, setDraggedId] = solidJs.createSignal(null);
+  const [dropTargetId, setDropTargetId] = solidJs.createSignal(null);
+  const [dropPosition, setDropPosition] = solidJs.createSignal("after");
+  const isDragging = () => draggedId() !== null;
+  let dragCounter = 0;
+  const handleDragStart = (e, componentId) => {
+    if (!enabled) {
+      e.preventDefault();
+      return;
+    }
+    const target = e.currentTarget;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", componentId);
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      e.dataTransfer.setDragImage(target, rect.width / 2, 20);
+    }
+    requestAnimationFrame(() => {
+      setDraggedId(componentId);
+    });
+  };
+  const handleDragOver = (e, componentId) => {
+    if (!enabled || !draggedId() || draggedId() === componentId) {
+      return;
+    }
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const target = e.currentTarget;
+    const position = getDropPosition(e, target);
+    setDropPosition(position);
+  };
+  const handleDragEnter = (e, componentId) => {
+    if (!enabled || !draggedId() || draggedId() === componentId) {
+      return;
+    }
+    e.preventDefault();
+    dragCounter++;
+    setDropTargetId(componentId);
+  };
+  const handleDragLeave = (_e) => {
+    if (!enabled) return;
+    dragCounter--;
+    if (dragCounter === 0) {
+      setDropTargetId(null);
+    }
+  };
+  const handleDrop = (e, targetId) => {
+    if (!enabled) return;
+    e.preventDefault();
+    dragCounter = 0;
+    const sourceId = e.dataTransfer.getData("text/plain");
+    if (!sourceId || sourceId === targetId) {
+      solidJs.batch(() => {
+        setDraggedId(null);
+        setDropTargetId(null);
+      });
+      return;
+    }
+    const currentComponents = components();
+    const reordered = reorderComponents(
+      currentComponents,
+      sourceId,
+      targetId,
+      dropPosition()
+    );
+    solidJs.batch(() => {
+      setDraggedId(null);
+      setDropTargetId(null);
+    });
+    onReorder(reordered);
+  };
+  const handleDragEnd = (_e) => {
+    dragCounter = 0;
+    solidJs.batch(() => {
+      setDraggedId(null);
+      setDropTargetId(null);
+    });
+  };
+  const getDragProps = (componentId) => ({
+    draggable: enabled,
+    onDragStart: (e) => handleDragStart(e, componentId),
+    onDragOver: (e) => handleDragOver(e, componentId),
+    onDragEnter: (e) => handleDragEnter(e, componentId),
+    onDragLeave: handleDragLeave,
+    onDrop: (e) => handleDrop(e, componentId),
+    onDragEnd: handleDragEnd,
+    "data-component-id": componentId
+  });
+  const isComponentDragging = (componentId) => {
+    return draggedId() === componentId;
+  };
+  const isDropTarget = (componentId) => {
+    return dropTargetId() === componentId;
+  };
+  solidJs.onCleanup(() => {
+    dragCounter = 0;
+  });
+  return {
+    draggedId,
+    dropTargetId,
+    isDragging,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnter,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd,
+    getDragProps,
+    isComponentDragging,
+    isDropTarget
+  };
+}
+exports.useDragDrop = useDragDrop;
+//# sourceMappingURL=useDragDrop.cjs.map

package/dist/hooks/useDragDrop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDrop.cjs","sources":["../../src/hooks/useDragDrop.ts"],"sourcesContent":["/**\n * useDragDrop Hook\n * Handles drag-and-drop reordering of grid components using HTML5 Drag-Drop API\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { createSignal, Accessor, batch, onCleanup } from 'solid-js'\nimport type { UIComponent } from '../types'\n\n/**\n * Options for the useDragDrop hook\n */\nexport interface UseDragDropOptions {\n  /**\n   * Accessor for current components\n   */\n  components: Accessor<UIComponent[]>\n\n  /**\n   * Callback when components are reordered\n   */\n  onReorder: (newComponents: UIComponent[]) => void\n\n  /**\n   * Whether drag-drop is enabled\n   */\n  enabled?: boolean\n\n  /**\n   * Animation duration in ms\n   */\n  animationDuration?: number\n}\n\n/**\n * Props to apply to a draggable element\n */\nexport interface DragProps {\n  draggable: boolean\n  onDragStart: (e: DragEvent) => void\n  onDragOver: (e: DragEvent) => void\n  onDragEnter: (e: DragEvent) => void\n  onDragLeave: (e: DragEvent) => void\n  onDrop: (e: DragEvent) => void\n  onDragEnd: (e: DragEvent) => void\n  'data-component-id': string\n}\n\n/**\n * Return type for the useDragDrop hook\n */\nexport interface UseDragDropReturn {\n  /**\n   * ID of the component currently being dragged\n   */\n  draggedId: Accessor<string | null>\n\n  /**\n   * ID of the current drop target\n   */\n  dropTargetId: Accessor<string | null>\n\n  /**\n   * Whether a drag operation is in progress\n   */\n  isDragging: Accessor<boolean>\n\n  /**\n   * Handle drag start event\n   */\n  handleDragStart: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag over event\n   */\n  handleDragOver: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag enter event\n   */\n  handleDragEnter: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag leave event\n   */\n  handleDragLeave: (e: DragEvent) => void\n\n  /**\n   * Handle drop event\n   */\n  handleDrop: (e: DragEvent, targetId: string) => void\n\n  /**\n   * Handle drag end event\n   */\n  handleDragEnd: (e: DragEvent) => void\n\n  /**\n   * Get drag props for a component\n   */\n  getDragProps: (componentId: string) => DragProps\n\n  /**\n   * Check if a component is being dragged\n   */\n  isComponentDragging: (componentId: string) => boolean\n\n  /**\n   * Check if a component is a drop target\n   */\n  isDropTarget: (componentId: string) => boolean\n}\n\n/**\n * Calculate drop position based on mouse position relative to target\n */\nfunction getDropPosition(\n  e: DragEvent,\n  targetElement: HTMLElement\n): 'before' | 'after' {\n  const rect = targetElement.getBoundingClientRect()\n  const midY = rect.top + rect.height / 2\n  return e.clientY < midY ? 'before' : 'after'\n}\n\n/**\n * Reorder components by inserting source at a position relative to target\n */\nfunction reorderComponents(\n  components: UIComponent[],\n  sourceId: string,\n  targetId: string,\n  position: 'before' | 'after'\n): UIComponent[] {\n  const sourceIndex = components.findIndex(c => c.id === sourceId)\n  const targetIndex = components.findIndex(c => c.id === targetId)\n\n  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {\n    return components\n  }\n\n  // Create a copy and remove source\n  const result = [...components]\n  const [sourceComponent] = result.splice(sourceIndex, 1)\n\n  // Find new target index (accounting for removal)\n  let newTargetIndex = result.findIndex(c => c.id === targetId)\n  if (position === 'after') {\n    newTargetIndex += 1\n  }\n\n  // Insert at new position\n  result.splice(newTargetIndex, 0, sourceComponent)\n\n  // Recalculate row positions based on new order\n  return recalculatePositions(result)\n}\n\n/**\n * Recalculate grid positions after reordering\n * Assigns sequential row positions while preserving column layout\n */\nfunction recalculatePositions(components: UIComponent[]): UIComponent[] {\n  let currentRow = 1\n  const rowComponents: Map<number, UIComponent[]> = new Map()\n\n  // Group by original row\n  components.forEach((c, index) => {\n    const row = c.position.rowStart || index + 1\n    if (!rowComponents.has(row)) {\n      rowComponents.set(row, [])\n    }\n    rowComponents.get(row)!.push(c)\n  })\n\n  // Flatten with new row assignments\n  const result: UIComponent[] = []\n  const sortedRows = Array.from(rowComponents.keys()).sort((a, b) => a - b)\n\n  sortedRows.forEach(row => {\n    const rowComps = rowComponents.get(row)!\n    rowComps.forEach(c => {\n      result.push({\n        ...c,\n        position: {\n          ...c.position,\n          rowStart: currentRow\n        }\n      })\n    })\n    currentRow += Math.max(...rowComps.map(c => c.position.rowSpan || 1))\n  })\n\n  return result\n}\n\n/**\n * Hook for handling drag-and-drop reordering of grid components\n */\nexport function useDragDrop(options: UseDragDropOptions): UseDragDropReturn {\n  const {\n    components,\n    onReorder,\n    enabled = true\n  } = options\n\n  const [draggedId, setDraggedId] = createSignal<string | null>(null)\n  const [dropTargetId, setDropTargetId] = createSignal<string | null>(null)\n  const [dropPosition, setDropPosition] = createSignal<'before' | 'after'>('after')\n  const isDragging = () => draggedId() !== null\n\n  // Track drag counter for nested elements\n  let dragCounter = 0\n\n  /**\n   * Handle drag start\n   */\n  const handleDragStart = (e: DragEvent, componentId: string) => {\n    if (!enabled) {\n      e.preventDefault()\n      return\n    }\n\n    const target = e.currentTarget as HTMLElement\n\n    // Set drag data\n    e.dataTransfer!.effectAllowed = 'move'\n    e.dataTransfer!.setData('text/plain', componentId)\n\n    // Create drag image\n    if (target) {\n      const rect = target.getBoundingClientRect()\n      e.dataTransfer!.setDragImage(target, rect.width / 2, 20)\n    }\n\n    // Delay setting state to allow drag image to be captured\n    requestAnimationFrame(() => {\n      setDraggedId(componentId)\n    })\n  }\n\n  /**\n   * Handle drag over\n   */\n  const handleDragOver = (e: DragEvent, componentId: string) => {\n    if (!enabled || !draggedId() || draggedId() === componentId) {\n      return\n    }\n\n    e.preventDefault()\n    e.dataTransfer!.dropEffect = 'move'\n\n    // Calculate drop position\n    const target = e.currentTarget as HTMLElement\n    const position = getDropPosition(e, target)\n    setDropPosition(position)\n  }\n\n  /**\n   * Handle drag enter\n   */\n  const handleDragEnter = (e: DragEvent, componentId: string) => {\n    if (!enabled || !draggedId() || draggedId() === componentId) {\n      return\n    }\n\n    e.preventDefault()\n    dragCounter++\n    setDropTargetId(componentId)\n  }\n\n  /**\n   * Handle drag leave\n   */\n  const handleDragLeave = (_e: DragEvent) => {\n    if (!enabled) return\n\n    dragCounter--\n    if (dragCounter === 0) {\n      setDropTargetId(null)\n    }\n  }\n\n  /**\n   * Handle drop\n   */\n  const handleDrop = (e: DragEvent, targetId: string) => {\n    if (!enabled) return\n\n    e.preventDefault()\n    dragCounter = 0\n\n    const sourceId = e.dataTransfer!.getData('text/plain')\n    if (!sourceId || sourceId === targetId) {\n      batch(() => {\n        setDraggedId(null)\n        setDropTargetId(null)\n      })\n      return\n    }\n\n    // Reorder components\n    const currentComponents = components()\n    const reordered = reorderComponents(\n      currentComponents,\n      sourceId,\n      targetId,\n      dropPosition()\n    )\n\n    // Apply reorder\n    batch(() => {\n      setDraggedId(null)\n      setDropTargetId(null)\n    })\n\n    onReorder(reordered)\n  }\n\n  /**\n   * Handle drag end\n   */\n  const handleDragEnd = (_e: DragEvent) => {\n    dragCounter = 0\n    batch(() => {\n      setDraggedId(null)\n      setDropTargetId(null)\n    })\n  }\n\n  /**\n   * Get drag props for a component\n   */\n  const getDragProps = (componentId: string): DragProps => ({\n    draggable: enabled,\n    onDragStart: (e) => handleDragStart(e, componentId),\n    onDragOver: (e) => handleDragOver(e, componentId),\n    onDragEnter: (e) => handleDragEnter(e, componentId),\n    onDragLeave: handleDragLeave,\n    onDrop: (e) => handleDrop(e, componentId),\n    onDragEnd: handleDragEnd,\n    'data-component-id': componentId\n  })\n\n  /**\n   * Check if a component is being dragged\n   */\n  const isComponentDragging = (componentId: string): boolean => {\n    return draggedId() === componentId\n  }\n\n  /**\n   * Check if a component is a drop target\n   */\n  const isDropTarget = (componentId: string): boolean => {\n    return dropTargetId() === componentId\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    dragCounter = 0\n  })\n\n  return {\n    draggedId,\n    dropTargetId,\n    isDragging,\n    handleDragStart,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleDrop,\n    handleDragEnd,\n    getDragProps,\n    isComponentDragging,\n    isDropTarget\n  }\n}\n"],"names":["createSignal","batch","onCleanup"],"mappings":"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"}

package/dist/hooks/useDragDrop.d.ts

@@ -0,0 +1,100 @@
+/**
+ * useDragDrop Hook
+ * Handles drag-and-drop reordering of grid components using HTML5 Drag-Drop API
+ *
+ * Sprint Drag-Drop Feature
+ */
+import { Accessor } from 'solid-js';
+import type { UIComponent } from '../types';
+/**
+ * Options for the useDragDrop hook
+ */
+export interface UseDragDropOptions {
+    /**
+     * Accessor for current components
+     */
+    components: Accessor<UIComponent[]>;
+    /**
+     * Callback when components are reordered
+     */
+    onReorder: (newComponents: UIComponent[]) => void;
+    /**
+     * Whether drag-drop is enabled
+     */
+    enabled?: boolean;
+    /**
+     * Animation duration in ms
+     */
+    animationDuration?: number;
+}
+/**
+ * Props to apply to a draggable element
+ */
+export interface DragProps {
+    draggable: boolean;
+    onDragStart: (e: DragEvent) => void;
+    onDragOver: (e: DragEvent) => void;
+    onDragEnter: (e: DragEvent) => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+    onDragEnd: (e: DragEvent) => void;
+    'data-component-id': string;
+}
+/**
+ * Return type for the useDragDrop hook
+ */
+export interface UseDragDropReturn {
+    /**
+     * ID of the component currently being dragged
+     */
+    draggedId: Accessor<string | null>;
+    /**
+     * ID of the current drop target
+     */
+    dropTargetId: Accessor<string | null>;
+    /**
+     * Whether a drag operation is in progress
+     */
+    isDragging: Accessor<boolean>;
+    /**
+     * Handle drag start event
+     */
+    handleDragStart: (e: DragEvent, componentId: string) => void;
+    /**
+     * Handle drag over event
+     */
+    handleDragOver: (e: DragEvent, componentId: string) => void;
+    /**
+     * Handle drag enter event
+     */
+    handleDragEnter: (e: DragEvent, componentId: string) => void;
+    /**
+     * Handle drag leave event
+     */
+    handleDragLeave: (e: DragEvent) => void;
+    /**
+     * Handle drop event
+     */
+    handleDrop: (e: DragEvent, targetId: string) => void;
+    /**
+     * Handle drag end event
+     */
+    handleDragEnd: (e: DragEvent) => void;
+    /**
+     * Get drag props for a component
+     */
+    getDragProps: (componentId: string) => DragProps;
+    /**
+     * Check if a component is being dragged
+     */
+    isComponentDragging: (componentId: string) => boolean;
+    /**
+     * Check if a component is a drop target
+     */
+    isDropTarget: (componentId: string) => boolean;
+}
+/**
+ * Hook for handling drag-and-drop reordering of grid components
+ */
+export declare function useDragDrop(options: UseDragDropOptions): UseDragDropReturn;
+//# sourceMappingURL=useDragDrop.d.ts.map

package/dist/hooks/useDragDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDrop.d.ts","sourceRoot":"","sources":["../../src/hooks/useDragDrop.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAgB,QAAQ,EAAoB,MAAM,UAAU,CAAA;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IAEnC;;OAEG;IACH,SAAS,EAAE,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IAEjD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAC9B,SAAS,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACjC,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAElC;;OAEG;IACH,YAAY,EAAE,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAErC;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE7B;;OAEG;IACH,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAE5D;;OAEG;IACH,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAE3D;;OAEG;IACH,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAE5D;;OAEG;IACH,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAEvC;;OAEG;IACH,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAEpD;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAErC;;OAEG;IACH,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,SAAS,CAAA;IAEhD;;OAEG;IACH,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAA;IAErD;;OAEG;IACH,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAA;CAC/C;AAqFD;;GAEG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CAkL1E"}

package/dist/hooks/useDragDrop.js

@@ -0,0 +1,170 @@
+import { createSignal, onCleanup, batch } from "solid-js";
+function getDropPosition(e, targetElement) {
+  const rect = targetElement.getBoundingClientRect();
+  const midY = rect.top + rect.height / 2;
+  return e.clientY < midY ? "before" : "after";
+}
+function reorderComponents(components, sourceId, targetId, position) {
+  const sourceIndex = components.findIndex((c) => c.id === sourceId);
+  const targetIndex = components.findIndex((c) => c.id === targetId);
+  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+    return components;
+  }
+  const result = [...components];
+  const [sourceComponent] = result.splice(sourceIndex, 1);
+  let newTargetIndex = result.findIndex((c) => c.id === targetId);
+  if (position === "after") {
+    newTargetIndex += 1;
+  }
+  result.splice(newTargetIndex, 0, sourceComponent);
+  return recalculatePositions(result);
+}
+function recalculatePositions(components) {
+  let currentRow = 1;
+  const rowComponents = /* @__PURE__ */ new Map();
+  components.forEach((c, index) => {
+    const row = c.position.rowStart || index + 1;
+    if (!rowComponents.has(row)) {
+      rowComponents.set(row, []);
+    }
+    rowComponents.get(row).push(c);
+  });
+  const result = [];
+  const sortedRows = Array.from(rowComponents.keys()).sort((a, b) => a - b);
+  sortedRows.forEach((row) => {
+    const rowComps = rowComponents.get(row);
+    rowComps.forEach((c) => {
+      result.push({
+        ...c,
+        position: {
+          ...c.position,
+          rowStart: currentRow
+        }
+      });
+    });
+    currentRow += Math.max(...rowComps.map((c) => c.position.rowSpan || 1));
+  });
+  return result;
+}
+function useDragDrop(options) {
+  const {
+    components,
+    onReorder,
+    enabled = true
+  } = options;
+  const [draggedId, setDraggedId] = createSignal(null);
+  const [dropTargetId, setDropTargetId] = createSignal(null);
+  const [dropPosition, setDropPosition] = createSignal("after");
+  const isDragging = () => draggedId() !== null;
+  let dragCounter = 0;
+  const handleDragStart = (e, componentId) => {
+    if (!enabled) {
+      e.preventDefault();
+      return;
+    }
+    const target = e.currentTarget;
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", componentId);
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      e.dataTransfer.setDragImage(target, rect.width / 2, 20);
+    }
+    requestAnimationFrame(() => {
+      setDraggedId(componentId);
+    });
+  };
+  const handleDragOver = (e, componentId) => {
+    if (!enabled || !draggedId() || draggedId() === componentId) {
+      return;
+    }
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    const target = e.currentTarget;
+    const position = getDropPosition(e, target);
+    setDropPosition(position);
+  };
+  const handleDragEnter = (e, componentId) => {
+    if (!enabled || !draggedId() || draggedId() === componentId) {
+      return;
+    }
+    e.preventDefault();
+    dragCounter++;
+    setDropTargetId(componentId);
+  };
+  const handleDragLeave = (_e) => {
+    if (!enabled) return;
+    dragCounter--;
+    if (dragCounter === 0) {
+      setDropTargetId(null);
+    }
+  };
+  const handleDrop = (e, targetId) => {
+    if (!enabled) return;
+    e.preventDefault();
+    dragCounter = 0;
+    const sourceId = e.dataTransfer.getData("text/plain");
+    if (!sourceId || sourceId === targetId) {
+      batch(() => {
+        setDraggedId(null);
+        setDropTargetId(null);
+      });
+      return;
+    }
+    const currentComponents = components();
+    const reordered = reorderComponents(
+      currentComponents,
+      sourceId,
+      targetId,
+      dropPosition()
+    );
+    batch(() => {
+      setDraggedId(null);
+      setDropTargetId(null);
+    });
+    onReorder(reordered);
+  };
+  const handleDragEnd = (_e) => {
+    dragCounter = 0;
+    batch(() => {
+      setDraggedId(null);
+      setDropTargetId(null);
+    });
+  };
+  const getDragProps = (componentId) => ({
+    draggable: enabled,
+    onDragStart: (e) => handleDragStart(e, componentId),
+    onDragOver: (e) => handleDragOver(e, componentId),
+    onDragEnter: (e) => handleDragEnter(e, componentId),
+    onDragLeave: handleDragLeave,
+    onDrop: (e) => handleDrop(e, componentId),
+    onDragEnd: handleDragEnd,
+    "data-component-id": componentId
+  });
+  const isComponentDragging = (componentId) => {
+    return draggedId() === componentId;
+  };
+  const isDropTarget = (componentId) => {
+    return dropTargetId() === componentId;
+  };
+  onCleanup(() => {
+    dragCounter = 0;
+  });
+  return {
+    draggedId,
+    dropTargetId,
+    isDragging,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnter,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd,
+    getDragProps,
+    isComponentDragging,
+    isDropTarget
+  };
+}
+export {
+  useDragDrop
+};
+//# sourceMappingURL=useDragDrop.js.map

package/dist/hooks/useDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDrop.js","sources":["../../src/hooks/useDragDrop.ts"],"sourcesContent":["/**\n * useDragDrop Hook\n * Handles drag-and-drop reordering of grid components using HTML5 Drag-Drop API\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { createSignal, Accessor, batch, onCleanup } from 'solid-js'\nimport type { UIComponent } from '../types'\n\n/**\n * Options for the useDragDrop hook\n */\nexport interface UseDragDropOptions {\n  /**\n   * Accessor for current components\n   */\n  components: Accessor<UIComponent[]>\n\n  /**\n   * Callback when components are reordered\n   */\n  onReorder: (newComponents: UIComponent[]) => void\n\n  /**\n   * Whether drag-drop is enabled\n   */\n  enabled?: boolean\n\n  /**\n   * Animation duration in ms\n   */\n  animationDuration?: number\n}\n\n/**\n * Props to apply to a draggable element\n */\nexport interface DragProps {\n  draggable: boolean\n  onDragStart: (e: DragEvent) => void\n  onDragOver: (e: DragEvent) => void\n  onDragEnter: (e: DragEvent) => void\n  onDragLeave: (e: DragEvent) => void\n  onDrop: (e: DragEvent) => void\n  onDragEnd: (e: DragEvent) => void\n  'data-component-id': string\n}\n\n/**\n * Return type for the useDragDrop hook\n */\nexport interface UseDragDropReturn {\n  /**\n   * ID of the component currently being dragged\n   */\n  draggedId: Accessor<string | null>\n\n  /**\n   * ID of the current drop target\n   */\n  dropTargetId: Accessor<string | null>\n\n  /**\n   * Whether a drag operation is in progress\n   */\n  isDragging: Accessor<boolean>\n\n  /**\n   * Handle drag start event\n   */\n  handleDragStart: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag over event\n   */\n  handleDragOver: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag enter event\n   */\n  handleDragEnter: (e: DragEvent, componentId: string) => void\n\n  /**\n   * Handle drag leave event\n   */\n  handleDragLeave: (e: DragEvent) => void\n\n  /**\n   * Handle drop event\n   */\n  handleDrop: (e: DragEvent, targetId: string) => void\n\n  /**\n   * Handle drag end event\n   */\n  handleDragEnd: (e: DragEvent) => void\n\n  /**\n   * Get drag props for a component\n   */\n  getDragProps: (componentId: string) => DragProps\n\n  /**\n   * Check if a component is being dragged\n   */\n  isComponentDragging: (componentId: string) => boolean\n\n  /**\n   * Check if a component is a drop target\n   */\n  isDropTarget: (componentId: string) => boolean\n}\n\n/**\n * Calculate drop position based on mouse position relative to target\n */\nfunction getDropPosition(\n  e: DragEvent,\n  targetElement: HTMLElement\n): 'before' | 'after' {\n  const rect = targetElement.getBoundingClientRect()\n  const midY = rect.top + rect.height / 2\n  return e.clientY < midY ? 'before' : 'after'\n}\n\n/**\n * Reorder components by inserting source at a position relative to target\n */\nfunction reorderComponents(\n  components: UIComponent[],\n  sourceId: string,\n  targetId: string,\n  position: 'before' | 'after'\n): UIComponent[] {\n  const sourceIndex = components.findIndex(c => c.id === sourceId)\n  const targetIndex = components.findIndex(c => c.id === targetId)\n\n  if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {\n    return components\n  }\n\n  // Create a copy and remove source\n  const result = [...components]\n  const [sourceComponent] = result.splice(sourceIndex, 1)\n\n  // Find new target index (accounting for removal)\n  let newTargetIndex = result.findIndex(c => c.id === targetId)\n  if (position === 'after') {\n    newTargetIndex += 1\n  }\n\n  // Insert at new position\n  result.splice(newTargetIndex, 0, sourceComponent)\n\n  // Recalculate row positions based on new order\n  return recalculatePositions(result)\n}\n\n/**\n * Recalculate grid positions after reordering\n * Assigns sequential row positions while preserving column layout\n */\nfunction recalculatePositions(components: UIComponent[]): UIComponent[] {\n  let currentRow = 1\n  const rowComponents: Map<number, UIComponent[]> = new Map()\n\n  // Group by original row\n  components.forEach((c, index) => {\n    const row = c.position.rowStart || index + 1\n    if (!rowComponents.has(row)) {\n      rowComponents.set(row, [])\n    }\n    rowComponents.get(row)!.push(c)\n  })\n\n  // Flatten with new row assignments\n  const result: UIComponent[] = []\n  const sortedRows = Array.from(rowComponents.keys()).sort((a, b) => a - b)\n\n  sortedRows.forEach(row => {\n    const rowComps = rowComponents.get(row)!\n    rowComps.forEach(c => {\n      result.push({\n        ...c,\n        position: {\n          ...c.position,\n          rowStart: currentRow\n        }\n      })\n    })\n    currentRow += Math.max(...rowComps.map(c => c.position.rowSpan || 1))\n  })\n\n  return result\n}\n\n/**\n * Hook for handling drag-and-drop reordering of grid components\n */\nexport function useDragDrop(options: UseDragDropOptions): UseDragDropReturn {\n  const {\n    components,\n    onReorder,\n    enabled = true\n  } = options\n\n  const [draggedId, setDraggedId] = createSignal<string | null>(null)\n  const [dropTargetId, setDropTargetId] = createSignal<string | null>(null)\n  const [dropPosition, setDropPosition] = createSignal<'before' | 'after'>('after')\n  const isDragging = () => draggedId() !== null\n\n  // Track drag counter for nested elements\n  let dragCounter = 0\n\n  /**\n   * Handle drag start\n   */\n  const handleDragStart = (e: DragEvent, componentId: string) => {\n    if (!enabled) {\n      e.preventDefault()\n      return\n    }\n\n    const target = e.currentTarget as HTMLElement\n\n    // Set drag data\n    e.dataTransfer!.effectAllowed = 'move'\n    e.dataTransfer!.setData('text/plain', componentId)\n\n    // Create drag image\n    if (target) {\n      const rect = target.getBoundingClientRect()\n      e.dataTransfer!.setDragImage(target, rect.width / 2, 20)\n    }\n\n    // Delay setting state to allow drag image to be captured\n    requestAnimationFrame(() => {\n      setDraggedId(componentId)\n    })\n  }\n\n  /**\n   * Handle drag over\n   */\n  const handleDragOver = (e: DragEvent, componentId: string) => {\n    if (!enabled || !draggedId() || draggedId() === componentId) {\n      return\n    }\n\n    e.preventDefault()\n    e.dataTransfer!.dropEffect = 'move'\n\n    // Calculate drop position\n    const target = e.currentTarget as HTMLElement\n    const position = getDropPosition(e, target)\n    setDropPosition(position)\n  }\n\n  /**\n   * Handle drag enter\n   */\n  const handleDragEnter = (e: DragEvent, componentId: string) => {\n    if (!enabled || !draggedId() || draggedId() === componentId) {\n      return\n    }\n\n    e.preventDefault()\n    dragCounter++\n    setDropTargetId(componentId)\n  }\n\n  /**\n   * Handle drag leave\n   */\n  const handleDragLeave = (_e: DragEvent) => {\n    if (!enabled) return\n\n    dragCounter--\n    if (dragCounter === 0) {\n      setDropTargetId(null)\n    }\n  }\n\n  /**\n   * Handle drop\n   */\n  const handleDrop = (e: DragEvent, targetId: string) => {\n    if (!enabled) return\n\n    e.preventDefault()\n    dragCounter = 0\n\n    const sourceId = e.dataTransfer!.getData('text/plain')\n    if (!sourceId || sourceId === targetId) {\n      batch(() => {\n        setDraggedId(null)\n        setDropTargetId(null)\n      })\n      return\n    }\n\n    // Reorder components\n    const currentComponents = components()\n    const reordered = reorderComponents(\n      currentComponents,\n      sourceId,\n      targetId,\n      dropPosition()\n    )\n\n    // Apply reorder\n    batch(() => {\n      setDraggedId(null)\n      setDropTargetId(null)\n    })\n\n    onReorder(reordered)\n  }\n\n  /**\n   * Handle drag end\n   */\n  const handleDragEnd = (_e: DragEvent) => {\n    dragCounter = 0\n    batch(() => {\n      setDraggedId(null)\n      setDropTargetId(null)\n    })\n  }\n\n  /**\n   * Get drag props for a component\n   */\n  const getDragProps = (componentId: string): DragProps => ({\n    draggable: enabled,\n    onDragStart: (e) => handleDragStart(e, componentId),\n    onDragOver: (e) => handleDragOver(e, componentId),\n    onDragEnter: (e) => handleDragEnter(e, componentId),\n    onDragLeave: handleDragLeave,\n    onDrop: (e) => handleDrop(e, componentId),\n    onDragEnd: handleDragEnd,\n    'data-component-id': componentId\n  })\n\n  /**\n   * Check if a component is being dragged\n   */\n  const isComponentDragging = (componentId: string): boolean => {\n    return draggedId() === componentId\n  }\n\n  /**\n   * Check if a component is a drop target\n   */\n  const isDropTarget = (componentId: string): boolean => {\n    return dropTargetId() === componentId\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    dragCounter = 0\n  })\n\n  return {\n    draggedId,\n    dropTargetId,\n    isDragging,\n    handleDragStart,\n    handleDragOver,\n    handleDragEnter,\n    handleDragLeave,\n    handleDrop,\n    handleDragEnd,\n    getDragProps,\n    isComponentDragging,\n    isDropTarget\n  }\n}\n"],"names":[],"mappings":"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"}