@seed-ship/mcp-ui-solid 2.0.1 → 2.1.1

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":";AAqHA,SAAS,gBACP,GACA,eACoB;AACpB,QAAM,OAAO,cAAc,sBAAA;AAC3B,QAAM,OAAO,KAAK,MAAM,KAAK,SAAS;AACtC,SAAO,EAAE,UAAU,OAAO,WAAW;AACvC;AAKA,SAAS,kBACP,YACA,UACA,UACA,UACe;AACf,QAAM,cAAc,WAAW,UAAU,CAAA,MAAK,EAAE,OAAO,QAAQ;AAC/D,QAAM,cAAc,WAAW,UAAU,CAAA,MAAK,EAAE,OAAO,QAAQ;AAE/D,MAAI,gBAAgB,MAAM,gBAAgB,MAAM,gBAAgB,aAAa;AAC3E,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,CAAC,GAAG,UAAU;AAC7B,QAAM,CAAC,eAAe,IAAI,OAAO,OAAO,aAAa,CAAC;AAGtD,MAAI,iBAAiB,OAAO,UAAU,CAAA,MAAK,EAAE,OAAO,QAAQ;AAC5D,MAAI,aAAa,SAAS;AACxB,sBAAkB;AAAA,EACpB;AAGA,SAAO,OAAO,gBAAgB,GAAG,eAAe;AAGhD,SAAO,qBAAqB,MAAM;AACpC;AAMA,SAAS,qBAAqB,YAA0C;AACtE,MAAI,aAAa;AACjB,QAAM,oCAAgD,IAAA;AAGtD,aAAW,QAAQ,CAAC,GAAG,UAAU;AAC/B,UAAM,MAAM,EAAE,SAAS,YAAY,QAAQ;AAC3C,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,oBAAc,IAAI,KAAK,EAAE;AAAA,IAC3B;AACA,kBAAc,IAAI,GAAG,EAAG,KAAK,CAAC;AAAA,EAChC,CAAC;AAGD,QAAM,SAAwB,CAAA;AAC9B,QAAM,aAAa,MAAM,KAAK,cAAc,KAAA,CAAM,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAExE,aAAW,QAAQ,CAAA,QAAO;AACxB,UAAM,WAAW,cAAc,IAAI,GAAG;AACtC,aAAS,QAAQ,CAAA,MAAK;AACpB,aAAO,KAAK;AAAA,QACV,GAAG;AAAA,QACH,UAAU;AAAA,UACR,GAAG,EAAE;AAAA,UACL,UAAU;AAAA,QAAA;AAAA,MACZ,CACD;AAAA,IACH,CAAC;AACD,kBAAc,KAAK,IAAI,GAAG,SAAS,IAAI,OAAK,EAAE,SAAS,WAAW,CAAC,CAAC;AAAA,EACtE,CAAC;AAED,SAAO;AACT;AAKO,SAAS,YAAY,SAAgD;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EAAA,IACR;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAI,aAA4B,IAAI;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,aAA4B,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,aAAiC,OAAO;AAChF,QAAM,aAAa,MAAM,UAAA,MAAgB;AAGzC,MAAI,cAAc;AAKlB,QAAM,kBAAkB,CAAC,GAAc,gBAAwB;AAC7D,QAAI,CAAC,SAAS;AACZ,QAAE,eAAA;AACF;AAAA,IACF;AAEA,UAAM,SAAS,EAAE;AAGjB,MAAE,aAAc,gBAAgB;AAChC,MAAE,aAAc,QAAQ,cAAc,WAAW;AAGjD,QAAI,QAAQ;AACV,YAAM,OAAO,OAAO,sBAAA;AACpB,QAAE,aAAc,aAAa,QAAQ,KAAK,QAAQ,GAAG,EAAE;AAAA,IACzD;AAGA,0BAAsB,MAAM;AAC1B,mBAAa,WAAW;AAAA,IAC1B,CAAC;AAAA,EACH;AAKA,QAAM,iBAAiB,CAAC,GAAc,gBAAwB;AAC5D,QAAI,CAAC,WAAW,CAAC,eAAe,UAAA,MAAgB,aAAa;AAC3D;AAAA,IACF;AAEA,MAAE,eAAA;AACF,MAAE,aAAc,aAAa;AAG7B,UAAM,SAAS,EAAE;AACjB,UAAM,WAAW,gBAAgB,GAAG,MAAM;AAC1C,oBAAgB,QAAQ;AAAA,EAC1B;AAKA,QAAM,kBAAkB,CAAC,GAAc,gBAAwB;AAC7D,QAAI,CAAC,WAAW,CAAC,eAAe,UAAA,MAAgB,aAAa;AAC3D;AAAA,IACF;AAEA,MAAE,eAAA;AACF;AACA,oBAAgB,WAAW;AAAA,EAC7B;AAKA,QAAM,kBAAkB,CAAC,OAAkB;AACzC,QAAI,CAAC,QAAS;AAEd;AACA,QAAI,gBAAgB,GAAG;AACrB,sBAAgB,IAAI;AAAA,IACtB;AAAA,EACF;AAKA,QAAM,aAAa,CAAC,GAAc,aAAqB;AACrD,QAAI,CAAC,QAAS;AAEd,MAAE,eAAA;AACF,kBAAc;AAEd,UAAM,WAAW,EAAE,aAAc,QAAQ,YAAY;AACrD,QAAI,CAAC,YAAY,aAAa,UAAU;AACtC,YAAM,MAAM;AACV,qBAAa,IAAI;AACjB,wBAAgB,IAAI;AAAA,MACtB,CAAC;AACD;AAAA,IACF;AAGA,UAAM,oBAAoB,WAAA;AAC1B,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAA;AAAA,IAAa;AAIf,UAAM,MAAM;AACV,mBAAa,IAAI;AACjB,sBAAgB,IAAI;AAAA,IACtB,CAAC;AAED,cAAU,SAAS;AAAA,EACrB;AAKA,QAAM,gBAAgB,CAAC,OAAkB;AACvC,kBAAc;AACd,UAAM,MAAM;AACV,mBAAa,IAAI;AACjB,sBAAgB,IAAI;AAAA,IACtB,CAAC;AAAA,EACH;AAKA,QAAM,eAAe,CAAC,iBAAoC;AAAA,IACxD,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,gBAAgB,GAAG,WAAW;AAAA,IAClD,YAAY,CAAC,MAAM,eAAe,GAAG,WAAW;AAAA,IAChD,aAAa,CAAC,MAAM,gBAAgB,GAAG,WAAW;AAAA,IAClD,aAAa;AAAA,IACb,QAAQ,CAAC,MAAM,WAAW,GAAG,WAAW;AAAA,IACxC,WAAW;AAAA,IACX,qBAAqB;AAAA,EAAA;AAMvB,QAAM,sBAAsB,CAAC,gBAAiC;AAC5D,WAAO,gBAAgB;AAAA,EACzB;AAKA,QAAM,eAAe,CAAC,gBAAiC;AACrD,WAAO,mBAAmB;AAAA,EAC5B;AAGA,YAAU,MAAM;AACd,kBAAc;AAAA,EAChB,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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"}