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

package/dist/hooks/useResize.cjs

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const solidJs = require("solid-js");
+const web = require("solid-js/web");
+function applyConstraints(position, constraints, gridColumns) {
+  let { colStart, colSpan, rowStart, rowSpan } = position;
+  const minColSpan = constraints.minColSpan ?? 1;
+  const maxColSpan = constraints.maxColSpan ?? gridColumns;
+  colSpan = Math.max(minColSpan, Math.min(maxColSpan, colSpan));
+  if (colStart + colSpan - 1 > gridColumns) {
+    colStart = gridColumns - colSpan + 1;
+  }
+  colStart = Math.max(1, colStart);
+  if (rowSpan !== void 0) {
+    const minRowSpan = constraints.minRowSpan ?? 1;
+    const maxRowSpan = constraints.maxRowSpan ?? 99;
+    rowSpan = Math.max(minRowSpan, Math.min(maxRowSpan, rowSpan));
+  }
+  if (rowStart !== void 0) {
+    rowStart = Math.max(1, rowStart);
+  }
+  return { colStart, colSpan, rowStart, rowSpan };
+}
+function useResize(options) {
+  const {
+    currentPosition,
+    onResize,
+    onResizePreview,
+    constraints = {},
+    gridContainer,
+    gridColumns = 12,
+    enabled = true
+  } = options;
+  const [isResizing, setIsResizing] = solidJs.createSignal(false);
+  const [resizeEdge, setResizeEdge] = solidJs.createSignal(null);
+  const [previewPosition, setPreviewPosition] = solidJs.createSignal(null);
+  const [startPosition, setStartPosition] = solidJs.createSignal(null);
+  const [startPointer, setStartPointer] = solidJs.createSignal(null);
+  if (web.isServer) {
+    return {
+      isResizing: () => false,
+      resizeEdge: () => null,
+      previewPosition: () => null,
+      handleResizeStart: () => {
+      },
+      getResizeHandleProps: () => ({
+        onPointerDown: () => {
+        },
+        style: {},
+        "data-resize-edge": "right"
+      })
+    };
+  }
+  const handlePointerMove = (e) => {
+    if (!isResizing() || !startPosition() || !startPointer()) return;
+    const edge = resizeEdge();
+    if (!edge) return;
+    const container = (gridContainer == null ? void 0 : gridContainer()) || document.querySelector("[data-grid-container]");
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const currentPos = startPosition();
+    const start = startPointer();
+    let newPosition = { ...currentPos };
+    const deltaX = e.clientX - start.x;
+    const columnWidth = containerRect.width / gridColumns;
+    const columnDelta = Math.round(deltaX / columnWidth);
+    if (constraints.lockHorizontal && (edge === "left" || edge === "right")) ;
+    else {
+      switch (edge) {
+        case "right": {
+          const newColSpan = currentPos.colSpan + columnDelta;
+          newPosition.colSpan = Math.max(1, Math.min(gridColumns - currentPos.colStart + 1, newColSpan));
+          break;
+        }
+        case "left": {
+          const newColStart = currentPos.colStart + columnDelta;
+          const newColSpan = currentPos.colSpan - columnDelta;
+          if (newColStart >= 1 && newColSpan >= 1) {
+            newPosition.colStart = newColStart;
+            newPosition.colSpan = newColSpan;
+          }
+          break;
+        }
+        case "top":
+        case "bottom": {
+          if (!constraints.lockVertical) {
+            const rowHeight = 100;
+            const deltaY = e.clientY - start.y;
+            const rowDelta = Math.round(deltaY / rowHeight);
+            if (edge === "bottom") {
+              const currentRowSpan = currentPos.rowSpan || 1;
+              const newRowSpan = currentRowSpan + rowDelta;
+              newPosition.rowSpan = Math.max(1, newRowSpan);
+            } else if (edge === "top") {
+              const currentRowStart = currentPos.rowStart || 1;
+              const currentRowSpan = currentPos.rowSpan || 1;
+              const newRowStart = currentRowStart + rowDelta;
+              const newRowSpan = currentRowSpan - rowDelta;
+              if (newRowStart >= 1 && newRowSpan >= 1) {
+                newPosition.rowStart = newRowStart;
+                newPosition.rowSpan = newRowSpan;
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+    newPosition = applyConstraints(newPosition, constraints, gridColumns);
+    setPreviewPosition(newPosition);
+    onResizePreview == null ? void 0 : onResizePreview(newPosition);
+  };
+  const handlePointerUp = (_e) => {
+    if (!isResizing()) return;
+    const preview = previewPosition();
+    if (preview) {
+      onResize(preview);
+    }
+    setIsResizing(false);
+    setResizeEdge(null);
+    setPreviewPosition(null);
+    setStartPosition(null);
+    setStartPointer(null);
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  const handleResizeStart = (e, edge) => {
+    if (!enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeEdge(edge);
+    setStartPosition(currentPosition());
+    setStartPointer({ x: e.clientX, y: e.clientY });
+    setPreviewPosition(currentPosition());
+    const cursors = {
+      left: "ew-resize",
+      right: "ew-resize",
+      top: "ns-resize",
+      bottom: "ns-resize"
+    };
+    document.body.style.cursor = cursors[edge];
+    document.body.style.userSelect = "none";
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  };
+  const getResizeHandleProps = (edge) => {
+    const baseStyle = {
+      position: "absolute",
+      zIndex: "10"
+    };
+    const edgeStyles = {
+      left: {
+        ...baseStyle,
+        left: "-4px",
+        top: "0",
+        width: "8px",
+        height: "100%",
+        cursor: "ew-resize"
+      },
+      right: {
+        ...baseStyle,
+        right: "-4px",
+        top: "0",
+        width: "8px",
+        height: "100%",
+        cursor: "ew-resize"
+      },
+      top: {
+        ...baseStyle,
+        top: "-4px",
+        left: "0",
+        width: "100%",
+        height: "8px",
+        cursor: "ns-resize"
+      },
+      bottom: {
+        ...baseStyle,
+        bottom: "-4px",
+        left: "0",
+        width: "100%",
+        height: "8px",
+        cursor: "ns-resize"
+      }
+    };
+    return {
+      onPointerDown: (e) => handleResizeStart(e, edge),
+      style: edgeStyles[edge],
+      "data-resize-edge": edge
+    };
+  };
+  solidJs.onCleanup(() => {
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+  return {
+    isResizing,
+    resizeEdge,
+    previewPosition,
+    handleResizeStart,
+    getResizeHandleProps
+  };
+}
+exports.useResize = useResize;
+//# sourceMappingURL=useResize.cjs.map

package/dist/hooks/useResize.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.cjs","sources":["../../src/hooks/useResize.ts"],"sourcesContent":["/**\n * useResize Hook\n * Handles resizing of grid components by dragging edges\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { createSignal, Accessor, onCleanup } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { GridPosition, ResizeConstraints } from '../types'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Options for the useResize hook\n */\nexport interface UseResizeOptions {\n  /**\n   * Component ID being resized\n   */\n  componentId: string\n\n  /**\n   * Current grid position accessor\n   */\n  currentPosition: Accessor<GridPosition>\n\n  /**\n   * Callback when resize is complete\n   */\n  onResize: (newPosition: GridPosition) => void\n\n  /**\n   * Callback during resize (for preview)\n   */\n  onResizePreview?: (previewPosition: GridPosition) => void\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Grid container element for calculating column widths\n   */\n  gridContainer?: Accessor<HTMLElement | null>\n\n  /**\n   * Number of columns in the grid (default: 12)\n   */\n  gridColumns?: number\n\n  /**\n   * Whether resize is enabled\n   */\n  enabled?: boolean\n}\n\n/**\n * Return type for the useResize hook\n */\nexport interface UseResizeReturn {\n  /**\n   * Whether a resize is in progress\n   */\n  isResizing: Accessor<boolean>\n\n  /**\n   * Current resize edge\n   */\n  resizeEdge: Accessor<ResizeEdge | null>\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition: Accessor<GridPosition | null>\n\n  /**\n   * Start resize operation\n   */\n  handleResizeStart: (e: PointerEvent, edge: ResizeEdge) => void\n\n  /**\n   * Get resize handle props for an edge\n   */\n  getResizeHandleProps: (edge: ResizeEdge) => ResizeHandleProps\n}\n\n/**\n * Props for resize handles\n */\nexport interface ResizeHandleProps {\n  onPointerDown: (e: PointerEvent) => void\n  style: Record<string, string>\n  'data-resize-edge': ResizeEdge\n}\n\n/**\n * Apply constraints to a position\n */\nfunction applyConstraints(\n  position: GridPosition,\n  constraints: ResizeConstraints,\n  gridColumns: number\n): GridPosition {\n  let { colStart, colSpan, rowStart, rowSpan } = position\n\n  // Apply column constraints\n  const minColSpan = constraints.minColSpan ?? 1\n  const maxColSpan = constraints.maxColSpan ?? gridColumns\n\n  colSpan = Math.max(minColSpan, Math.min(maxColSpan, colSpan))\n\n  // Ensure colStart + colSpan doesn't exceed grid\n  if (colStart + colSpan - 1 > gridColumns) {\n    colStart = gridColumns - colSpan + 1\n  }\n  colStart = Math.max(1, colStart)\n\n  // Apply row constraints\n  if (rowSpan !== undefined) {\n    const minRowSpan = constraints.minRowSpan ?? 1\n    const maxRowSpan = constraints.maxRowSpan ?? 99\n    rowSpan = Math.max(minRowSpan, Math.min(maxRowSpan, rowSpan))\n  }\n\n  if (rowStart !== undefined) {\n    rowStart = Math.max(1, rowStart)\n  }\n\n  return { colStart, colSpan, rowStart, rowSpan }\n}\n\n/**\n * Hook for handling resize of grid components\n */\nexport function useResize(options: UseResizeOptions): UseResizeReturn {\n  const {\n    currentPosition,\n    onResize,\n    onResizePreview,\n    constraints = {},\n    gridContainer,\n    gridColumns = 12,\n    enabled = true\n  } = options\n\n  const [isResizing, setIsResizing] = createSignal(false)\n  const [resizeEdge, setResizeEdge] = createSignal<ResizeEdge | null>(null)\n  const [previewPosition, setPreviewPosition] = createSignal<GridPosition | null>(null)\n  const [startPosition, setStartPosition] = createSignal<GridPosition | null>(null)\n  const [startPointer, setStartPointer] = createSignal<{ x: number; y: number } | null>(null)\n\n  // Skip on server\n  if (isServer) {\n    return {\n      isResizing: () => false,\n      resizeEdge: () => null,\n      previewPosition: () => null,\n      handleResizeStart: () => {},\n      getResizeHandleProps: () => ({\n        onPointerDown: () => {},\n        style: {},\n        'data-resize-edge': 'right' as ResizeEdge\n      })\n    }\n  }\n\n  /**\n   * Handle pointer move during resize\n   */\n  const handlePointerMove = (e: PointerEvent) => {\n    if (!isResizing() || !startPosition() || !startPointer()) return\n\n    const edge = resizeEdge()\n    if (!edge) return\n\n    // Get container for measurements\n    const container = gridContainer?.() || document.querySelector('[data-grid-container]')\n    if (!container) return\n\n    const containerRect = container.getBoundingClientRect()\n    const currentPos = startPosition()!\n    const start = startPointer()!\n\n    let newPosition: GridPosition = { ...currentPos }\n\n    // Calculate delta in columns\n    const deltaX = e.clientX - start.x\n    const columnWidth = containerRect.width / gridColumns\n    const columnDelta = Math.round(deltaX / columnWidth)\n\n    if (constraints.lockHorizontal && (edge === 'left' || edge === 'right')) {\n      // Horizontal resize is locked\n    } else {\n      switch (edge) {\n        case 'right': {\n          // Increase/decrease colSpan from the right\n          const newColSpan = currentPos.colSpan + columnDelta\n          newPosition.colSpan = Math.max(1, Math.min(gridColumns - currentPos.colStart + 1, newColSpan))\n          break\n        }\n        case 'left': {\n          // Increase/decrease from left (changes both colStart and colSpan)\n          const newColStart = currentPos.colStart + columnDelta\n          const newColSpan = currentPos.colSpan - columnDelta\n          if (newColStart >= 1 && newColSpan >= 1) {\n            newPosition.colStart = newColStart\n            newPosition.colSpan = newColSpan\n          }\n          break\n        }\n        case 'top':\n        case 'bottom': {\n          // Row resizing - calculate based on Y movement\n          if (!constraints.lockVertical) {\n            const rowHeight = 100 // Approximate row height\n            const deltaY = e.clientY - start.y\n            const rowDelta = Math.round(deltaY / rowHeight)\n\n            if (edge === 'bottom') {\n              const currentRowSpan = currentPos.rowSpan || 1\n              const newRowSpan = currentRowSpan + rowDelta\n              newPosition.rowSpan = Math.max(1, newRowSpan)\n            } else if (edge === 'top') {\n              const currentRowStart = currentPos.rowStart || 1\n              const currentRowSpan = currentPos.rowSpan || 1\n              const newRowStart = currentRowStart + rowDelta\n              const newRowSpan = currentRowSpan - rowDelta\n              if (newRowStart >= 1 && newRowSpan >= 1) {\n                newPosition.rowStart = newRowStart\n                newPosition.rowSpan = newRowSpan\n              }\n            }\n          }\n          break\n        }\n      }\n    }\n\n    // Apply constraints\n    newPosition = applyConstraints(newPosition, constraints, gridColumns)\n\n    setPreviewPosition(newPosition)\n    onResizePreview?.(newPosition)\n  }\n\n  /**\n   * Handle pointer up to finish resize\n   */\n  const handlePointerUp = (_e: PointerEvent) => {\n    if (!isResizing()) return\n\n    const preview = previewPosition()\n    if (preview) {\n      onResize(preview)\n    }\n\n    // Cleanup\n    setIsResizing(false)\n    setResizeEdge(null)\n    setPreviewPosition(null)\n    setStartPosition(null)\n    setStartPointer(null)\n\n    // Remove listeners\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n\n  /**\n   * Start resize operation\n   */\n  const handleResizeStart = (e: PointerEvent, edge: ResizeEdge) => {\n    if (!enabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsResizing(true)\n    setResizeEdge(edge)\n    setStartPosition(currentPosition())\n    setStartPointer({ x: e.clientX, y: e.clientY })\n    setPreviewPosition(currentPosition())\n\n    // Set cursor\n    const cursors: Record<ResizeEdge, string> = {\n      left: 'ew-resize',\n      right: 'ew-resize',\n      top: 'ns-resize',\n      bottom: 'ns-resize'\n    }\n    document.body.style.cursor = cursors[edge]\n    document.body.style.userSelect = 'none'\n\n    // Add document listeners\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp)\n  }\n\n  /**\n   * Get resize handle props for an edge\n   */\n  const getResizeHandleProps = (edge: ResizeEdge): ResizeHandleProps => {\n    const baseStyle: Record<string, string> = {\n      position: 'absolute',\n      zIndex: '10'\n    }\n\n    const edgeStyles: Record<ResizeEdge, Record<string, string>> = {\n      left: {\n        ...baseStyle,\n        left: '-4px',\n        top: '0',\n        width: '8px',\n        height: '100%',\n        cursor: 'ew-resize'\n      },\n      right: {\n        ...baseStyle,\n        right: '-4px',\n        top: '0',\n        width: '8px',\n        height: '100%',\n        cursor: 'ew-resize'\n      },\n      top: {\n        ...baseStyle,\n        top: '-4px',\n        left: '0',\n        width: '100%',\n        height: '8px',\n        cursor: 'ns-resize'\n      },\n      bottom: {\n        ...baseStyle,\n        bottom: '-4px',\n        left: '0',\n        width: '100%',\n        height: '8px',\n        cursor: 'ns-resize'\n      }\n    }\n\n    return {\n      onPointerDown: (e) => handleResizeStart(e, edge),\n      style: edgeStyles[edge],\n      'data-resize-edge': edge\n    }\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  })\n\n  return {\n    isResizing,\n    resizeEdge,\n    previewPosition,\n    handleResizeStart,\n    getResizeHandleProps\n  }\n}\n"],"names":["createSignal","isServer","onCleanup"],"mappings":"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"}

package/dist/hooks/useResize.d.ts

@@ -0,0 +1,87 @@
+/**
+ * useResize Hook
+ * Handles resizing of grid components by dragging edges
+ *
+ * Sprint Drag-Drop Feature
+ */
+import { Accessor } from 'solid-js';
+import type { GridPosition, ResizeConstraints } from '../types';
+/**
+ * Resize edge types
+ */
+export type ResizeEdge = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Options for the useResize hook
+ */
+export interface UseResizeOptions {
+    /**
+     * Component ID being resized
+     */
+    componentId: string;
+    /**
+     * Current grid position accessor
+     */
+    currentPosition: Accessor<GridPosition>;
+    /**
+     * Callback when resize is complete
+     */
+    onResize: (newPosition: GridPosition) => void;
+    /**
+     * Callback during resize (for preview)
+     */
+    onResizePreview?: (previewPosition: GridPosition) => void;
+    /**
+     * Resize constraints
+     */
+    constraints?: ResizeConstraints;
+    /**
+     * Grid container element for calculating column widths
+     */
+    gridContainer?: Accessor<HTMLElement | null>;
+    /**
+     * Number of columns in the grid (default: 12)
+     */
+    gridColumns?: number;
+    /**
+     * Whether resize is enabled
+     */
+    enabled?: boolean;
+}
+/**
+ * Return type for the useResize hook
+ */
+export interface UseResizeReturn {
+    /**
+     * Whether a resize is in progress
+     */
+    isResizing: Accessor<boolean>;
+    /**
+     * Current resize edge
+     */
+    resizeEdge: Accessor<ResizeEdge | null>;
+    /**
+     * Preview position during resize
+     */
+    previewPosition: Accessor<GridPosition | null>;
+    /**
+     * Start resize operation
+     */
+    handleResizeStart: (e: PointerEvent, edge: ResizeEdge) => void;
+    /**
+     * Get resize handle props for an edge
+     */
+    getResizeHandleProps: (edge: ResizeEdge) => ResizeHandleProps;
+}
+/**
+ * Props for resize handles
+ */
+export interface ResizeHandleProps {
+    onPointerDown: (e: PointerEvent) => void;
+    style: Record<string, string>;
+    'data-resize-edge': ResizeEdge;
+}
+/**
+ * Hook for handling resize of grid components
+ */
+export declare function useResize(options: UseResizeOptions): UseResizeReturn;
+//# sourceMappingURL=useResize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useResize.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAgB,QAAQ,EAAa,MAAM,UAAU,CAAA;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE5D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAA;IAEvC;;OAEG;IACH,QAAQ,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAA;IAE7C;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,KAAK,IAAI,CAAA;IAEzD;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAE/B;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAE5C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE7B;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,CAAA;IAEvC;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;IAE9C;;OAEG;IACH,iBAAiB,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IAE9D;;OAEG;IACH,oBAAoB,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,iBAAiB,CAAA;CAC9D;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,kBAAkB,EAAE,UAAU,CAAA;CAC/B;AAsCD;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAwOpE"}

package/dist/hooks/useResize.js

@@ -0,0 +1,209 @@
+import { createSignal, onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
+function applyConstraints(position, constraints, gridColumns) {
+  let { colStart, colSpan, rowStart, rowSpan } = position;
+  const minColSpan = constraints.minColSpan ?? 1;
+  const maxColSpan = constraints.maxColSpan ?? gridColumns;
+  colSpan = Math.max(minColSpan, Math.min(maxColSpan, colSpan));
+  if (colStart + colSpan - 1 > gridColumns) {
+    colStart = gridColumns - colSpan + 1;
+  }
+  colStart = Math.max(1, colStart);
+  if (rowSpan !== void 0) {
+    const minRowSpan = constraints.minRowSpan ?? 1;
+    const maxRowSpan = constraints.maxRowSpan ?? 99;
+    rowSpan = Math.max(minRowSpan, Math.min(maxRowSpan, rowSpan));
+  }
+  if (rowStart !== void 0) {
+    rowStart = Math.max(1, rowStart);
+  }
+  return { colStart, colSpan, rowStart, rowSpan };
+}
+function useResize(options) {
+  const {
+    currentPosition,
+    onResize,
+    onResizePreview,
+    constraints = {},
+    gridContainer,
+    gridColumns = 12,
+    enabled = true
+  } = options;
+  const [isResizing, setIsResizing] = createSignal(false);
+  const [resizeEdge, setResizeEdge] = createSignal(null);
+  const [previewPosition, setPreviewPosition] = createSignal(null);
+  const [startPosition, setStartPosition] = createSignal(null);
+  const [startPointer, setStartPointer] = createSignal(null);
+  if (isServer) {
+    return {
+      isResizing: () => false,
+      resizeEdge: () => null,
+      previewPosition: () => null,
+      handleResizeStart: () => {
+      },
+      getResizeHandleProps: () => ({
+        onPointerDown: () => {
+        },
+        style: {},
+        "data-resize-edge": "right"
+      })
+    };
+  }
+  const handlePointerMove = (e) => {
+    if (!isResizing() || !startPosition() || !startPointer()) return;
+    const edge = resizeEdge();
+    if (!edge) return;
+    const container = (gridContainer == null ? void 0 : gridContainer()) || document.querySelector("[data-grid-container]");
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    const currentPos = startPosition();
+    const start = startPointer();
+    let newPosition = { ...currentPos };
+    const deltaX = e.clientX - start.x;
+    const columnWidth = containerRect.width / gridColumns;
+    const columnDelta = Math.round(deltaX / columnWidth);
+    if (constraints.lockHorizontal && (edge === "left" || edge === "right")) ;
+    else {
+      switch (edge) {
+        case "right": {
+          const newColSpan = currentPos.colSpan + columnDelta;
+          newPosition.colSpan = Math.max(1, Math.min(gridColumns - currentPos.colStart + 1, newColSpan));
+          break;
+        }
+        case "left": {
+          const newColStart = currentPos.colStart + columnDelta;
+          const newColSpan = currentPos.colSpan - columnDelta;
+          if (newColStart >= 1 && newColSpan >= 1) {
+            newPosition.colStart = newColStart;
+            newPosition.colSpan = newColSpan;
+          }
+          break;
+        }
+        case "top":
+        case "bottom": {
+          if (!constraints.lockVertical) {
+            const rowHeight = 100;
+            const deltaY = e.clientY - start.y;
+            const rowDelta = Math.round(deltaY / rowHeight);
+            if (edge === "bottom") {
+              const currentRowSpan = currentPos.rowSpan || 1;
+              const newRowSpan = currentRowSpan + rowDelta;
+              newPosition.rowSpan = Math.max(1, newRowSpan);
+            } else if (edge === "top") {
+              const currentRowStart = currentPos.rowStart || 1;
+              const currentRowSpan = currentPos.rowSpan || 1;
+              const newRowStart = currentRowStart + rowDelta;
+              const newRowSpan = currentRowSpan - rowDelta;
+              if (newRowStart >= 1 && newRowSpan >= 1) {
+                newPosition.rowStart = newRowStart;
+                newPosition.rowSpan = newRowSpan;
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+    newPosition = applyConstraints(newPosition, constraints, gridColumns);
+    setPreviewPosition(newPosition);
+    onResizePreview == null ? void 0 : onResizePreview(newPosition);
+  };
+  const handlePointerUp = (_e) => {
+    if (!isResizing()) return;
+    const preview = previewPosition();
+    if (preview) {
+      onResize(preview);
+    }
+    setIsResizing(false);
+    setResizeEdge(null);
+    setPreviewPosition(null);
+    setStartPosition(null);
+    setStartPointer(null);
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+  const handleResizeStart = (e, edge) => {
+    if (!enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setResizeEdge(edge);
+    setStartPosition(currentPosition());
+    setStartPointer({ x: e.clientX, y: e.clientY });
+    setPreviewPosition(currentPosition());
+    const cursors = {
+      left: "ew-resize",
+      right: "ew-resize",
+      top: "ns-resize",
+      bottom: "ns-resize"
+    };
+    document.body.style.cursor = cursors[edge];
+    document.body.style.userSelect = "none";
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  };
+  const getResizeHandleProps = (edge) => {
+    const baseStyle = {
+      position: "absolute",
+      zIndex: "10"
+    };
+    const edgeStyles = {
+      left: {
+        ...baseStyle,
+        left: "-4px",
+        top: "0",
+        width: "8px",
+        height: "100%",
+        cursor: "ew-resize"
+      },
+      right: {
+        ...baseStyle,
+        right: "-4px",
+        top: "0",
+        width: "8px",
+        height: "100%",
+        cursor: "ew-resize"
+      },
+      top: {
+        ...baseStyle,
+        top: "-4px",
+        left: "0",
+        width: "100%",
+        height: "8px",
+        cursor: "ns-resize"
+      },
+      bottom: {
+        ...baseStyle,
+        bottom: "-4px",
+        left: "0",
+        width: "100%",
+        height: "8px",
+        cursor: "ns-resize"
+      }
+    };
+    return {
+      onPointerDown: (e) => handleResizeStart(e, edge),
+      style: edgeStyles[edge],
+      "data-resize-edge": edge
+    };
+  };
+  onCleanup(() => {
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+  return {
+    isResizing,
+    resizeEdge,
+    previewPosition,
+    handleResizeStart,
+    getResizeHandleProps
+  };
+}
+export {
+  useResize
+};
+//# sourceMappingURL=useResize.js.map

package/dist/hooks/useResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResize.js","sources":["../../src/hooks/useResize.ts"],"sourcesContent":["/**\n * useResize Hook\n * Handles resizing of grid components by dragging edges\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { createSignal, Accessor, onCleanup } from 'solid-js'\nimport { isServer } from 'solid-js/web'\nimport type { GridPosition, ResizeConstraints } from '../types'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Options for the useResize hook\n */\nexport interface UseResizeOptions {\n  /**\n   * Component ID being resized\n   */\n  componentId: string\n\n  /**\n   * Current grid position accessor\n   */\n  currentPosition: Accessor<GridPosition>\n\n  /**\n   * Callback when resize is complete\n   */\n  onResize: (newPosition: GridPosition) => void\n\n  /**\n   * Callback during resize (for preview)\n   */\n  onResizePreview?: (previewPosition: GridPosition) => void\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Grid container element for calculating column widths\n   */\n  gridContainer?: Accessor<HTMLElement | null>\n\n  /**\n   * Number of columns in the grid (default: 12)\n   */\n  gridColumns?: number\n\n  /**\n   * Whether resize is enabled\n   */\n  enabled?: boolean\n}\n\n/**\n * Return type for the useResize hook\n */\nexport interface UseResizeReturn {\n  /**\n   * Whether a resize is in progress\n   */\n  isResizing: Accessor<boolean>\n\n  /**\n   * Current resize edge\n   */\n  resizeEdge: Accessor<ResizeEdge | null>\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition: Accessor<GridPosition | null>\n\n  /**\n   * Start resize operation\n   */\n  handleResizeStart: (e: PointerEvent, edge: ResizeEdge) => void\n\n  /**\n   * Get resize handle props for an edge\n   */\n  getResizeHandleProps: (edge: ResizeEdge) => ResizeHandleProps\n}\n\n/**\n * Props for resize handles\n */\nexport interface ResizeHandleProps {\n  onPointerDown: (e: PointerEvent) => void\n  style: Record<string, string>\n  'data-resize-edge': ResizeEdge\n}\n\n/**\n * Apply constraints to a position\n */\nfunction applyConstraints(\n  position: GridPosition,\n  constraints: ResizeConstraints,\n  gridColumns: number\n): GridPosition {\n  let { colStart, colSpan, rowStart, rowSpan } = position\n\n  // Apply column constraints\n  const minColSpan = constraints.minColSpan ?? 1\n  const maxColSpan = constraints.maxColSpan ?? gridColumns\n\n  colSpan = Math.max(minColSpan, Math.min(maxColSpan, colSpan))\n\n  // Ensure colStart + colSpan doesn't exceed grid\n  if (colStart + colSpan - 1 > gridColumns) {\n    colStart = gridColumns - colSpan + 1\n  }\n  colStart = Math.max(1, colStart)\n\n  // Apply row constraints\n  if (rowSpan !== undefined) {\n    const minRowSpan = constraints.minRowSpan ?? 1\n    const maxRowSpan = constraints.maxRowSpan ?? 99\n    rowSpan = Math.max(minRowSpan, Math.min(maxRowSpan, rowSpan))\n  }\n\n  if (rowStart !== undefined) {\n    rowStart = Math.max(1, rowStart)\n  }\n\n  return { colStart, colSpan, rowStart, rowSpan }\n}\n\n/**\n * Hook for handling resize of grid components\n */\nexport function useResize(options: UseResizeOptions): UseResizeReturn {\n  const {\n    currentPosition,\n    onResize,\n    onResizePreview,\n    constraints = {},\n    gridContainer,\n    gridColumns = 12,\n    enabled = true\n  } = options\n\n  const [isResizing, setIsResizing] = createSignal(false)\n  const [resizeEdge, setResizeEdge] = createSignal<ResizeEdge | null>(null)\n  const [previewPosition, setPreviewPosition] = createSignal<GridPosition | null>(null)\n  const [startPosition, setStartPosition] = createSignal<GridPosition | null>(null)\n  const [startPointer, setStartPointer] = createSignal<{ x: number; y: number } | null>(null)\n\n  // Skip on server\n  if (isServer) {\n    return {\n      isResizing: () => false,\n      resizeEdge: () => null,\n      previewPosition: () => null,\n      handleResizeStart: () => {},\n      getResizeHandleProps: () => ({\n        onPointerDown: () => {},\n        style: {},\n        'data-resize-edge': 'right' as ResizeEdge\n      })\n    }\n  }\n\n  /**\n   * Handle pointer move during resize\n   */\n  const handlePointerMove = (e: PointerEvent) => {\n    if (!isResizing() || !startPosition() || !startPointer()) return\n\n    const edge = resizeEdge()\n    if (!edge) return\n\n    // Get container for measurements\n    const container = gridContainer?.() || document.querySelector('[data-grid-container]')\n    if (!container) return\n\n    const containerRect = container.getBoundingClientRect()\n    const currentPos = startPosition()!\n    const start = startPointer()!\n\n    let newPosition: GridPosition = { ...currentPos }\n\n    // Calculate delta in columns\n    const deltaX = e.clientX - start.x\n    const columnWidth = containerRect.width / gridColumns\n    const columnDelta = Math.round(deltaX / columnWidth)\n\n    if (constraints.lockHorizontal && (edge === 'left' || edge === 'right')) {\n      // Horizontal resize is locked\n    } else {\n      switch (edge) {\n        case 'right': {\n          // Increase/decrease colSpan from the right\n          const newColSpan = currentPos.colSpan + columnDelta\n          newPosition.colSpan = Math.max(1, Math.min(gridColumns - currentPos.colStart + 1, newColSpan))\n          break\n        }\n        case 'left': {\n          // Increase/decrease from left (changes both colStart and colSpan)\n          const newColStart = currentPos.colStart + columnDelta\n          const newColSpan = currentPos.colSpan - columnDelta\n          if (newColStart >= 1 && newColSpan >= 1) {\n            newPosition.colStart = newColStart\n            newPosition.colSpan = newColSpan\n          }\n          break\n        }\n        case 'top':\n        case 'bottom': {\n          // Row resizing - calculate based on Y movement\n          if (!constraints.lockVertical) {\n            const rowHeight = 100 // Approximate row height\n            const deltaY = e.clientY - start.y\n            const rowDelta = Math.round(deltaY / rowHeight)\n\n            if (edge === 'bottom') {\n              const currentRowSpan = currentPos.rowSpan || 1\n              const newRowSpan = currentRowSpan + rowDelta\n              newPosition.rowSpan = Math.max(1, newRowSpan)\n            } else if (edge === 'top') {\n              const currentRowStart = currentPos.rowStart || 1\n              const currentRowSpan = currentPos.rowSpan || 1\n              const newRowStart = currentRowStart + rowDelta\n              const newRowSpan = currentRowSpan - rowDelta\n              if (newRowStart >= 1 && newRowSpan >= 1) {\n                newPosition.rowStart = newRowStart\n                newPosition.rowSpan = newRowSpan\n              }\n            }\n          }\n          break\n        }\n      }\n    }\n\n    // Apply constraints\n    newPosition = applyConstraints(newPosition, constraints, gridColumns)\n\n    setPreviewPosition(newPosition)\n    onResizePreview?.(newPosition)\n  }\n\n  /**\n   * Handle pointer up to finish resize\n   */\n  const handlePointerUp = (_e: PointerEvent) => {\n    if (!isResizing()) return\n\n    const preview = previewPosition()\n    if (preview) {\n      onResize(preview)\n    }\n\n    // Cleanup\n    setIsResizing(false)\n    setResizeEdge(null)\n    setPreviewPosition(null)\n    setStartPosition(null)\n    setStartPointer(null)\n\n    // Remove listeners\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  }\n\n  /**\n   * Start resize operation\n   */\n  const handleResizeStart = (e: PointerEvent, edge: ResizeEdge) => {\n    if (!enabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    setIsResizing(true)\n    setResizeEdge(edge)\n    setStartPosition(currentPosition())\n    setStartPointer({ x: e.clientX, y: e.clientY })\n    setPreviewPosition(currentPosition())\n\n    // Set cursor\n    const cursors: Record<ResizeEdge, string> = {\n      left: 'ew-resize',\n      right: 'ew-resize',\n      top: 'ns-resize',\n      bottom: 'ns-resize'\n    }\n    document.body.style.cursor = cursors[edge]\n    document.body.style.userSelect = 'none'\n\n    // Add document listeners\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp)\n  }\n\n  /**\n   * Get resize handle props for an edge\n   */\n  const getResizeHandleProps = (edge: ResizeEdge): ResizeHandleProps => {\n    const baseStyle: Record<string, string> = {\n      position: 'absolute',\n      zIndex: '10'\n    }\n\n    const edgeStyles: Record<ResizeEdge, Record<string, string>> = {\n      left: {\n        ...baseStyle,\n        left: '-4px',\n        top: '0',\n        width: '8px',\n        height: '100%',\n        cursor: 'ew-resize'\n      },\n      right: {\n        ...baseStyle,\n        right: '-4px',\n        top: '0',\n        width: '8px',\n        height: '100%',\n        cursor: 'ew-resize'\n      },\n      top: {\n        ...baseStyle,\n        top: '-4px',\n        left: '0',\n        width: '100%',\n        height: '8px',\n        cursor: 'ns-resize'\n      },\n      bottom: {\n        ...baseStyle,\n        bottom: '-4px',\n        left: '0',\n        width: '100%',\n        height: '8px',\n        cursor: 'ns-resize'\n      }\n    }\n\n    return {\n      onPointerDown: (e) => handleResizeStart(e, edge),\n      style: edgeStyles[edge],\n      'data-resize-edge': edge\n    }\n  }\n\n  // Cleanup on unmount\n  onCleanup(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp)\n    document.body.style.cursor = ''\n    document.body.style.userSelect = ''\n  })\n\n  return {\n    isResizing,\n    resizeEdge,\n    previewPosition,\n    handleResizeStart,\n    getResizeHandleProps\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks.cjs

@@ -5,6 +5,9 @@ const useAction = require("./hooks/useAction.cjs");
 const useConditionalField = require("./hooks/useConditionalField.cjs");
 const useModal = require("./hooks/useModal.cjs");
 const useFormPersistence = require("./hooks/useFormPersistence.cjs");
+const useDragDrop = require("./hooks/useDragDrop.cjs");
+const useResize = require("./hooks/useResize.cjs");
+const useAutocomplete = require("./hooks/useAutocomplete.cjs");
 exports.useStreamingUI = useStreamingUI.useStreamingUI;
 exports.useAction = useAction.useAction;
 exports.useToolAction = useAction.useToolAction;
@@ -13,4 +16,7 @@ exports.useConditionalField = useConditionalField.useConditionalField;
 exports.useConfirmModal = useModal.useConfirmModal;
 exports.useModal = useModal.useModal;
 exports.useFormPersistence = useFormPersistence.useFormPersistence;
+exports.useDragDrop = useDragDrop.useDragDrop;
+exports.useResize = useResize.useResize;
+exports.useAutocomplete = useAutocomplete.useAutocomplete;
 //# sourceMappingURL=hooks.cjs.map

package/dist/hooks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"hooks.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks.d.cts

@@ -13,4 +13,10 @@ export { useModal, useConfirmModal } from './useModal';
 export type { UseModalReturn, UseConfirmModalReturn } from './useModal';
 export { useFormPersistence } from './useFormPersistence';
 export type { UseFormPersistenceOptions, UseFormPersistenceReturn } from './useFormPersistence';
+export { useDragDrop } from './useDragDrop';
+export type { UseDragDropOptions, UseDragDropReturn, DragProps, } from './useDragDrop';
+export { useResize } from './useResize';
+export type { UseResizeOptions, UseResizeReturn, ResizeEdge, ResizeHandleProps, } from './useResize';
+export { useAutocomplete } from './useAutocomplete';
+export type { UseAutocompleteOptions, UseAutocompleteReturn, } from './useAutocomplete';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks.d.ts

@@ -13,4 +13,10 @@ export { useModal, useConfirmModal } from './useModal';
 export type { UseModalReturn, UseConfirmModalReturn } from './useModal';
 export { useFormPersistence } from './useFormPersistence';
 export type { UseFormPersistenceOptions, UseFormPersistenceReturn } from './useFormPersistence';
+export { useDragDrop } from './useDragDrop';
+export type { UseDragDropOptions, UseDragDropReturn, DragProps, } from './useDragDrop';
+export { useResize } from './useResize';
+export type { UseResizeOptions, UseResizeReturn, ResizeEdge, ResizeHandleProps, } from './useResize';
+export { useAutocomplete } from './useAutocomplete';
+export type { UseAutocompleteOptions, UseAutocompleteReturn, } from './useAutocomplete';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks.js

@@ -3,13 +3,19 @@ import { useAction, useToolAction } from "./hooks/useAction.js";
 import { evaluateCondition, useConditionalField } from "./hooks/useConditionalField.js";
 import { useConfirmModal, useModal } from "./hooks/useModal.js";
 import { useFormPersistence } from "./hooks/useFormPersistence.js";
+import { useDragDrop } from "./hooks/useDragDrop.js";
+import { useResize } from "./hooks/useResize.js";
+import { useAutocomplete } from "./hooks/useAutocomplete.js";
 export {
   evaluateCondition,
   useAction,
+  useAutocomplete,
   useConditionalField,
   useConfirmModal,
+  useDragDrop,
   useFormPersistence,
   useModal,
+  useResize,
   useStreamingUI,
   useToolAction
 };

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}