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

package/dist/components/DraggableGridItem.cjs

@@ -54,9 +54,9 @@ const DraggableGridItem = (props) => {
     if (props.class) classes.push(props.class);
     return classes.join(" ");
   });
-  const handleResizeStart = (edge) => {
+  const handleResizeStart = (edge, event) => {
     var _a;
-    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, edge);
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, edge, event);
   };
   return (() => {
     var _el$ = web.getNextElement(_tmpl$3), _el$5 = _el$.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$3] = web.getNextMarker(_el$9.nextSibling), _el$4 = _el$0.nextSibling;

package/dist/components/DraggableGridItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableGridItem.cjs","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  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  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom') => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom') => {\n    props.onResizeStart?.(edge)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}
+{"version":3,"file":"DraggableGridItem.cjs","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  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  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => {\n    props.onResizeStart?.(edge, event)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","event","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}

package/dist/components/DraggableGridItem.d.ts

@@ -57,7 +57,7 @@ export interface DraggableGridItemProps {
     /**
      * Callback when resize starts
      */
-    onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom') => void;
+    onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void;
     /**
      * Callback for resize preview
      */

package/dist/components/DraggableGridItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableGridItem.d.ts","sourceRoot":"","sources":["../../src/components/DraggableGridItem.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,GAAG,EAAgC,MAAM,UAAU,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAG/D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAErC;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,OAAO,CAAA;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QAClC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QAC9B,SAAS,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;KAClC,CAAA;IAED;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAA;IAEnE;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAcD;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAAS,CAAC,sBAAsB,CAmJ/D,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"DraggableGridItem.d.ts","sourceRoot":"","sources":["../../src/components/DraggableGridItem.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,GAAG,EAAgC,MAAM,UAAU,CAAA;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAG/D;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IAEV;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAErC;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,OAAO,CAAA;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QAClC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QACnC,MAAM,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;QAC9B,SAAS,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;KAClC,CAAA;IAED;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAExF;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAcD;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAAS,CAAC,sBAAsB,CAmJ/D,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/DraggableGridItem.js

@@ -52,9 +52,9 @@ const DraggableGridItem = (props) => {
     if (props.class) classes.push(props.class);
     return classes.join(" ");
   });
-  const handleResizeStart = (edge) => {
+  const handleResizeStart = (edge, event) => {
     var _a;
-    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, edge);
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, edge, event);
   };
   return (() => {
     var _el$ = getNextElement(_tmpl$3), _el$5 = _el$.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$3] = getNextMarker(_el$9.nextSibling), _el$4 = _el$0.nextSibling;

package/dist/components/DraggableGridItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableGridItem.js","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  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  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom') => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom') => {\n    props.onResizeStart?.(edge)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}
+{"version":3,"file":"DraggableGridItem.js","sources":["../../src/components/DraggableGridItem.tsx"],"sourcesContent":["/**\n * DraggableGridItem Component\n * Wrapper for grid items that enables drag-and-drop reordering and resizing\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'\nimport type { GridPosition, ResizeConstraints } from '../types'\nimport { ResizeHandle } from './ResizeHandle'\n\n/**\n * Props for DraggableGridItem\n */\nexport interface DraggableGridItemProps {\n  /**\n   * Component ID\n   */\n  id: string\n\n  /**\n   * Grid position\n   */\n  position: GridPosition\n\n  /**\n   * Whether dragging is enabled\n   */\n  draggable?: boolean\n\n  /**\n   * Whether resizing is enabled\n   */\n  resizable?: boolean\n\n  /**\n   * Resize constraints\n   */\n  constraints?: ResizeConstraints\n\n  /**\n   * Whether this item is currently being dragged\n   */\n  isDragging?: boolean\n\n  /**\n   * Whether this item is a drop target\n   */\n  isDropTarget?: boolean\n\n  /**\n   * Preview position during resize\n   */\n  previewPosition?: GridPosition | null\n\n  /**\n   * Drag props from useDragDrop\n   */\n  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  }\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void\n\n  /**\n   * Callback for resize preview\n   */\n  onResizePreview?: (position: GridPosition) => void\n\n  /**\n   * Callback when resize completes\n   */\n  onResize?: (position: GridPosition) => void\n\n  /**\n   * Whether resize is in progress\n   */\n  isResizing?: boolean\n\n  /**\n   * Show grid overlay during drag/resize\n   */\n  showGridOverlay?: boolean\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Custom styles\n   */\n  style?: JSX.CSSProperties\n\n  /**\n   * Children to render\n   */\n  children?: JSX.Element\n}\n\n/**\n * Generate CSS Grid style string from position\n */\nfunction getGridStyle(position: GridPosition): JSX.CSSProperties {\n  return {\n    'grid-column': `${position.colStart} / span ${position.colSpan}`,\n    'grid-row': position.rowStart\n      ? `${position.rowStart} / span ${position.rowSpan || 1}`\n      : undefined\n  }\n}\n\n/**\n * DraggableGridItem Component\n */\nexport const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {\n  const merged = mergeProps(\n    {\n      draggable: false,\n      resizable: false,\n      isDragging: false,\n      isDropTarget: false,\n      isResizing: false,\n      showGridOverlay: false\n    },\n    props\n  )\n\n  // Use preview position during resize if available\n  const effectivePosition = createMemo(() =>\n    merged.previewPosition || props.position\n  )\n\n  // Compute grid style\n  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))\n\n  // Compute combined style\n  const combinedStyle = createMemo((): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...gridStyle(),\n      position: 'relative',\n      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'\n    }\n\n    // Add drag/drop visual feedback\n    if (merged.isDragging) {\n      base.opacity = '0.5'\n      base.transform = 'scale(1.02)'\n      base['z-index'] = '100'\n    }\n\n    if (merged.isDropTarget && !merged.isDragging) {\n      base['box-shadow'] = '0 0 0 2px #3b82f6'\n      base['border-radius'] = '4px'\n    }\n\n    if (merged.isResizing) {\n      base['z-index'] = '100'\n    }\n\n    // Merge with custom styles\n    if (props.style) {\n      Object.assign(base, props.style)\n    }\n\n    return base\n  })\n\n  // Build class names\n  const classNames = createMemo(() => {\n    const classes = ['mcp-draggable-grid-item']\n\n    if (merged.draggable) classes.push('mcp-draggable')\n    if (merged.resizable) classes.push('mcp-resizable')\n    if (merged.isDragging) classes.push('mcp-dragging')\n    if (merged.isDropTarget) classes.push('mcp-drop-target')\n    if (merged.isResizing) classes.push('mcp-resizing')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  // Handle resize start\n  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => {\n    props.onResizeStart?.(edge, event)\n  }\n\n  return (\n    <div\n      class={classNames()}\n      style={combinedStyle()}\n      data-component-id={props.id}\n      {...(merged.draggable && props.dragProps ? props.dragProps : {})}\n    >\n      {/* Drag handle indicator */}\n      <Show when={merged.draggable && !merged.isResizing}>\n        <div\n          class=\"mcp-drag-handle\"\n          style={{\n            position: 'absolute',\n            top: '4px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '40px',\n            height: '4px',\n            'background-color': 'rgba(0, 0, 0, 0.2)',\n            'border-radius': '2px',\n            cursor: 'grab',\n            opacity: '0',\n            transition: 'opacity 150ms ease',\n            'z-index': '5'\n          }}\n        />\n      </Show>\n\n      {/* Resize handles */}\n      <Show when={merged.resizable && !merged.isDragging}>\n        <ResizeHandle\n          edge=\"left\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"right\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockHorizontal}\n        />\n        <ResizeHandle\n          edge=\"top\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n        <ResizeHandle\n          edge=\"bottom\"\n          onResizeStart={handleResizeStart}\n          disabled={merged.constraints?.lockVertical}\n        />\n      </Show>\n\n      {/* Drop indicator line */}\n      <Show when={merged.isDropTarget && !merged.isDragging}>\n        <div\n          class=\"mcp-drop-indicator\"\n          style={{\n            position: 'absolute',\n            top: '-2px',\n            left: '0',\n            right: '0',\n            height: '4px',\n            'background-color': '#3b82f6',\n            'border-radius': '2px',\n            'z-index': '20'\n          }}\n        />\n      </Show>\n\n      {/* Content */}\n      <div class=\"mcp-grid-item-content\" style={{ position: 'relative', 'z-index': '1' }}>\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport default DraggableGridItem\n"],"names":["getGridStyle","position","colStart","colSpan","rowStart","rowSpan","undefined","DraggableGridItem","props","merged","mergeProps","draggable","resizable","isDragging","isDropTarget","isResizing","showGridOverlay","effectivePosition","createMemo","previewPosition","gridStyle","combinedStyle","base","transition","opacity","transform","style","Object","assign","classNames","classes","push","class","join","handleResizeStart","edge","event","onResizeStart","_el$","_$getNextElement","_tmpl$3","_el$5","firstChild","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_el$9","_el$0","_co$3","_el$4","_$spread","_$mergeProps","id","dragProps","_$insert","_$createComponent","Show","when","_$memo","children","_tmpl$","ResizeHandle","disabled","constraints","lockHorizontal","lockVertical","_tmpl$2","_$runHydrationEvents"],"mappings":"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"}

package/dist/components/EditableUIResourceRenderer.cjs

@@ -167,13 +167,9 @@ const EditableUIResourceRenderer = (props) => {
           get dragProps() {
             return dragDrop.getDragProps(component.id);
           },
-          onResizeStart: (edge) => {
+          onResizeStart: (edge, event) => {
             setActiveResizeId(component.id);
-            const syntheticEvent = new PointerEvent("pointerdown", {
-              clientX: 0,
-              clientY: 0
-            });
-            resize.handleResizeStart(syntheticEvent, edge);
+            resize.handleResizeStart(event, edge);
           },
           get children() {
             return web.createComponent(UIResourceRenderer.UIResourceRenderer, {

package/dist/components/EditableUIResourceRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableUIResourceRenderer.cjs","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge) => {\n                  setActiveResizeId(component.id)\n                  // Trigger resize with a synthetic event\n                  const syntheticEvent = new PointerEvent('pointerdown', {\n                    clientX: 0,\n                    clientY: 0\n                  })\n                  resize.handleResizeStart(syntheticEvent, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","syntheticEvent","PointerEvent","clientX","clientY","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":"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"}
+{"version":3,"file":"EditableUIResourceRenderer.cjs","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge, event) => {\n                  setActiveResizeId(component.id)\n                  resize.handleResizeStart(event, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","event","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":"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"}

package/dist/components/EditableUIResourceRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableUIResourceRenderer.d.ts","sourceRoot":"","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,SAAS,EAQV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,QAAQ,EACR,aAAa,EAEb,cAAc,EACf,MAAM,UAAU,CAAA;AAMjB;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,MAAM,EAAE,QAAQ,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAA;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAsCD;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,SAAS,CAAC,+BAA+B,CAuKjF,CAAA;AAED,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"EditableUIResourceRenderer.d.ts","sourceRoot":"","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,SAAS,EAQV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,QAAQ,EACR,aAAa,EAEb,cAAc,EACf,MAAM,UAAU,CAAA;AAMjB;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C;;OAEG;IACH,MAAM,EAAE,QAAQ,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAA;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAE3C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAsCD;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,SAAS,CAAC,+BAA+B,CAkKjF,CAAA;AAED,eAAe,0BAA0B,CAAA"}

package/dist/components/EditableUIResourceRenderer.js

@@ -165,13 +165,9 @@ const EditableUIResourceRenderer = (props) => {
           get dragProps() {
             return dragDrop.getDragProps(component.id);
           },
-          onResizeStart: (edge) => {
+          onResizeStart: (edge, event) => {
             setActiveResizeId(component.id);
-            const syntheticEvent = new PointerEvent("pointerdown", {
-              clientX: 0,
-              clientY: 0
-            });
-            resize.handleResizeStart(syntheticEvent, edge);
+            resize.handleResizeStart(event, edge);
           },
           get children() {
             return createComponent(UIResourceRenderer, {

package/dist/components/EditableUIResourceRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableUIResourceRenderer.js","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge) => {\n                  setActiveResizeId(component.id)\n                  // Trigger resize with a synthetic event\n                  const syntheticEvent = new PointerEvent('pointerdown', {\n                    clientX: 0,\n                    clientY: 0\n                  })\n                  resize.handleResizeStart(syntheticEvent, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","syntheticEvent","PointerEvent","clientX","clientY","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":"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"}
+{"version":3,"file":"EditableUIResourceRenderer.js","sources":["../../src/components/EditableUIResourceRenderer.tsx"],"sourcesContent":["/**\n * EditableUIResourceRenderer Component\n * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities\n *\n * Sprint Drag-Drop Feature\n */\n\nimport {\n  Component,\n  For,\n  Show,\n  createSignal,\n  createMemo,\n  createEffect,\n  on,\n  JSX\n} from 'solid-js'\nimport type {\n  UIComponent,\n  UILayout,\n  RendererError,\n  GridPosition,\n  DragDropConfig\n} from '../types'\nimport { useDragDrop } from '../hooks/useDragDrop'\nimport { useResize, ResizeEdge } from '../hooks/useResize'\nimport { DraggableGridItem } from './DraggableGridItem'\nimport { UIResourceRenderer } from './UIResourceRenderer'\n\n/**\n * Props for EditableUIResourceRenderer\n */\nexport interface EditableUIResourceRendererProps {\n  /**\n   * Layout to render (must be UILayout, not single component)\n   */\n  layout: UILayout\n\n  /**\n   * Drag-drop configuration\n   */\n  dragDrop?: DragDropConfig\n\n  /**\n   * Error callback\n   */\n  onError?: (error: RendererError) => void\n\n  /**\n   * Callback when layout changes (reorder or resize)\n   */\n  onLayoutChange?: (layout: UILayout) => void\n\n  /**\n   * Custom CSS class\n   */\n  class?: string\n\n  /**\n   * Show grid overlay during editing\n   */\n  showGridOverlay?: boolean\n}\n\n/**\n * Grid overlay component for visual feedback\n */\nconst GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {\n  return (\n    <Show when={props.visible}>\n      <div\n        class=\"mcp-grid-overlay\"\n        style={{\n          position: 'absolute',\n          inset: '0',\n          display: 'grid',\n          'grid-template-columns': `repeat(${props.columns}, 1fr)`,\n          gap: '1rem',\n          padding: '0',\n          'pointer-events': 'none',\n          'z-index': '0'\n        }}\n      >\n        <For each={Array(props.columns).fill(0)}>\n          {() => (\n            <div\n              class=\"mcp-grid-overlay-column\"\n              style={{\n                'background-color': 'rgba(59, 130, 246, 0.05)',\n                border: '1px dashed rgba(59, 130, 246, 0.2)',\n                'border-radius': '4px'\n              }}\n            />\n          )}\n        </For>\n      </div>\n    </Show>\n  )\n}\n\n/**\n * EditableUIResourceRenderer Component\n */\nexport const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {\n  // Internal state for components (allows editing)\n  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)\n  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)\n  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())\n  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)\n\n  // Sync with external layout changes\n  createEffect(on(() => props.layout.components, (newComponents) => {\n    setComponents(newComponents)\n  }))\n\n  // Drag-drop configuration\n  const dragDropConfig = createMemo(() => ({\n    enabled: props.dragDrop?.enabled ?? false,\n    reorder: props.dragDrop?.reorder ?? true,\n    resize: props.dragDrop?.resize ?? true,\n    constraints: props.dragDrop?.constraints ?? {},\n    showGridLines: props.dragDrop?.showGridLines ?? true,\n    animationDuration: props.dragDrop?.animationDuration ?? 200\n  }))\n\n  // Handle reorder from drag-drop\n  const handleReorder = (newComponents: UIComponent[]) => {\n    setComponents(newComponents)\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: newComponents\n    }\n\n    props.dragDrop?.onReorder?.(newComponents)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize completion\n  const handleResize = (componentId: string, newPosition: GridPosition) => {\n    const updatedComponents = components().map(c =>\n      c.id === componentId ? { ...c, position: newPosition } : c\n    )\n\n    setComponents(updatedComponents)\n    setActiveResizeId(null)\n    setPreviewPositions(new Map())\n\n    const newLayout: UILayout = {\n      ...props.layout,\n      components: updatedComponents\n    }\n\n    props.dragDrop?.onResize?.(componentId, newPosition)\n    props.dragDrop?.onChange?.(newLayout)\n    props.onLayoutChange?.(newLayout)\n  }\n\n  // Handle resize preview\n  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {\n    setPreviewPositions(prev => {\n      const next = new Map(prev)\n      next.set(componentId, previewPosition)\n      return next\n    })\n  }\n\n  // Initialize drag-drop hook\n  const dragDrop = useDragDrop({\n    components,\n    onReorder: handleReorder,\n    enabled: dragDropConfig().enabled && dragDropConfig().reorder\n  })\n\n  // Grid container style\n  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({\n    display: 'grid',\n    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,\n    gap: props.layout.grid.gap,\n    position: 'relative'\n  }))\n\n  // Check if we should show grid overlay\n  const showOverlay = createMemo(() =>\n    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)\n  )\n\n  // Get effective position for a component (preview if resizing, otherwise actual)\n  const getEffectivePosition = (component: UIComponent): GridPosition => {\n    const preview = previewPositions().get(component.id)\n    return preview || component.position\n  }\n\n  // If drag-drop is not enabled, just render the standard UIResourceRenderer\n  if (!props.dragDrop?.enabled) {\n    return (\n      <UIResourceRenderer\n        content={props.layout}\n        onError={props.onError}\n        class={props.class}\n      />\n    )\n  }\n\n  return (\n    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>\n      <div\n        ref={setGridContainerRef}\n        class=\"grid relative\"\n        style={gridContainerStyle()}\n        data-grid-container\n      >\n        {/* Grid overlay */}\n        <GridOverlay\n          columns={props.layout.grid.columns}\n          visible={showOverlay()}\n        />\n\n        {/* Render components with drag-drop wrappers */}\n        <For each={components()}>\n          {(component) => {\n            // Create resize hook for each component\n            const resize = useResize({\n              componentId: component.id,\n              currentPosition: () => component.position,\n              onResize: (pos) => handleResize(component.id, pos),\n              onResizePreview: (pos) => handleResizePreview(component.id, pos),\n              constraints: dragDropConfig().constraints,\n              gridContainer: gridContainerRef,\n              gridColumns: props.layout.grid.columns,\n              enabled: dragDropConfig().enabled && dragDropConfig().resize\n            })\n\n            const effectivePosition = () => getEffectivePosition(component)\n\n            return (\n              <DraggableGridItem\n                id={component.id}\n                position={effectivePosition()}\n                draggable={dragDropConfig().enabled && dragDropConfig().reorder}\n                resizable={dragDropConfig().enabled && dragDropConfig().resize}\n                constraints={dragDropConfig().constraints}\n                isDragging={dragDrop.isComponentDragging(component.id)}\n                isDropTarget={dragDrop.isDropTarget(component.id)}\n                isResizing={activeResizeId() === component.id}\n                previewPosition={previewPositions().get(component.id) || null}\n                dragProps={dragDrop.getDragProps(component.id)}\n                onResizeStart={(edge, event) => {\n                  setActiveResizeId(component.id)\n                  resize.handleResizeStart(event, edge as ResizeEdge)\n                }}\n              >\n                {/* Render component using UIResourceRenderer for single component */}\n                <UIResourceRenderer\n                  content={component}\n                  onError={props.onError}\n                />\n              </DraggableGridItem>\n            )\n          }}\n        </For>\n      </div>\n    </div>\n  )\n}\n\nexport default EditableUIResourceRenderer\n"],"names":["GridOverlay","props","_$createComponent","Show","when","visible","children","_el$","_$getNextElement","_tmpl$","_$insert","For","each","Array","columns","fill","_tmpl$2","_$effect","_$p","_$setStyleProperty","EditableUIResourceRenderer","components","setComponents","createSignal","layout","activeResizeId","setActiveResizeId","previewPositions","setPreviewPositions","Map","gridContainerRef","setGridContainerRef","createEffect","on","newComponents","dragDropConfig","createMemo","enabled","dragDrop","reorder","resize","constraints","showGridLines","animationDuration","handleReorder","newLayout","onReorder","onChange","onLayoutChange","handleResize","componentId","newPosition","updatedComponents","map","c","id","position","onResize","handleResizePreview","previewPosition","prev","next","set","useDragDrop","gridContainerStyle","display","grid","gap","showOverlay","isDragging","getEffectivePosition","component","preview","get","UIResourceRenderer","content","onError","class","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","_co$","_$getNextMarker","nextSibling","_el$7","_el$8","_co$2","_$use","useResize","currentPosition","pos","onResizePreview","gridContainer","gridColumns","effectivePosition","DraggableGridItem","draggable","_$memo","resizable","isComponentDragging","isDropTarget","isResizing","dragProps","getDragProps","onResizeStart","edge","event","handleResizeStart","_p$","_v$","_v$2","e","_$className","t","_$style","undefined"],"mappings":";;;;;;;AAmEA,MAAMA,cAAiEC,CAAAA,UAAU;AAC/E,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEH,MAAMI;AAAAA,IAAO;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,OAAAC,eAAAC,MAAA;AAAAC,aAAAH,MAAAL,gBAcpBS,KAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,MAAMZ,MAAMa,OAAO,EAAEC,KAAK,CAAC;AAAA,QAAC;AAAA,QAAAT,UACpCA,MAAAE,eAAAQ,OAAA;AAAA,MAAA,CASA,CAAA;AAAAC,aAAAC,CAAAA,QAAAC,iBAAAZ,MAAA,yBAjBwB,UAAUN,MAAMa,OAAO,QAAQ,CAAA;AAAA,aAAAP;AAAAA,IAAA;AAAA,EAAA,CAAA;AAsBlE;AAKO,MAAMa,6BAA0EnB,CAAAA,UAAU;;AAE/F,QAAM,CAACoB,YAAYC,aAAa,IAAIC,aAA4BtB,MAAMuB,OAAOH,UAAU;AACvF,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIH,aAA4B,IAAI;AAC5E,QAAM,CAACI,kBAAkBC,mBAAmB,IAAIL,aAAwC,oBAAIM,KAAK;AACjG,QAAM,CAACC,kBAAkBC,mBAAmB,IAAIR,aAAiC,IAAI;AAGrFS,eAAaC,GAAG,MAAMhC,MAAMuB,OAAOH,YAAaa,CAAAA,kBAAkB;AAChEZ,kBAAcY,aAAa;AAAA,EAC7B,CAAC,CAAC;AAGF,QAAMC,iBAAiBC,WAAW,MAAA;;AAAO;AAAA,MACvCC,WAASpC,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgBoC,YAAW;AAAA,MACpCE,WAAStC,WAAMqC,aAANrC,mBAAgBsC,YAAW;AAAA,MACpCC,UAAQvC,WAAMqC,aAANrC,mBAAgBuC,WAAU;AAAA,MAClCC,eAAaxC,WAAMqC,aAANrC,mBAAgBwC,gBAAe,CAAA;AAAA,MAC5CC,iBAAezC,WAAMqC,aAANrC,mBAAgByC,kBAAiB;AAAA,MAChDC,qBAAmB1C,WAAMqC,aAANrC,mBAAgB0C,sBAAqB;AAAA,IAAA;AAAA,GACxD;AAGF,QAAMC,gBAAgBA,CAACV,kBAAiC;;AACtDZ,kBAAcY,aAAa;AAE3B,UAAMW,YAAsB;AAAA,MAC1B,GAAG5C,MAAMuB;AAAAA,MACTH,YAAYa;AAAAA,IAAAA;AAGdjC,WAAAA,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgB6C,cAAhB7C,wBAAAA,KAA4BiC;AAC5BjC,sBAAMqC,aAANrC,mBAAgB8C,aAAhB9C,4BAA2B4C;AAC3B5C,gBAAM+C,mBAAN/C,+BAAuB4C;AAAAA,EACzB;AAGA,QAAMI,eAAeA,CAACC,aAAqBC,gBAA8B;;AACvE,UAAMC,oBAAoB/B,WAAAA,EAAagC,IAAIC,CAAAA,MACzCA,EAAEC,OAAOL,cAAc;AAAA,MAAE,GAAGI;AAAAA,MAAGE,UAAUL;AAAAA,IAAAA,IAAgBG,CAC3D;AAEAhC,kBAAc8B,iBAAiB;AAC/B1B,sBAAkB,IAAI;AACtBE,wBAAoB,oBAAIC,KAAK;AAE7B,UAAMgB,YAAsB;AAAA,MAC1B,GAAG5C,MAAMuB;AAAAA,MACTH,YAAY+B;AAAAA,IAAAA;AAGdnD,WAAAA,MAAAA,MAAMqC,aAANrC,gBAAAA,IAAgBwD,aAAhBxD,wBAAAA,KAA2BiD,aAAaC;AACxClD,sBAAMqC,aAANrC,mBAAgB8C,aAAhB9C,4BAA2B4C;AAC3B5C,gBAAM+C,mBAAN/C,+BAAuB4C;AAAAA,EACzB;AAGA,QAAMa,sBAAsBA,CAACR,aAAqBS,oBAAkC;AAClF/B,wBAAoBgC,CAAAA,SAAQ;AAC1B,YAAMC,OAAO,IAAIhC,IAAI+B,IAAI;AACzBC,WAAKC,IAAIZ,aAAaS,eAAe;AACrC,aAAOE;AAAAA,IACT,CAAC;AAAA,EACH;AAGA,QAAMvB,WAAWyB,YAAY;AAAA,IAC3B1C;AAAAA,IACAyB,WAAWF;AAAAA,IACXP,SAASF,eAAAA,EAAiBE,WAAWF,iBAAiBI;AAAAA,EAAAA,CACvD;AAGD,QAAMyB,qBAAqB5B,WAAW,OAA0B;AAAA,IAC9D6B,SAAS;AAAA,IACT,yBAAyB,UAAUhE,MAAMuB,OAAO0C,KAAKpD,OAAO;AAAA,IAC5DqD,KAAKlE,MAAMuB,OAAO0C,KAAKC;AAAAA,IACvBX,UAAU;AAAA,EAAA,EACV;AAGF,QAAMY,cAAchC,WAAW,MAC7BD,iBAAiBO,kBAAkBJ,SAAS+B,WAAAA,KAAgB5C,eAAAA,MAAqB,KACnF;AAGA,QAAM6C,uBAAuBA,CAACC,cAAyC;AACrE,UAAMC,UAAU7C,iBAAAA,EAAmB8C,IAAIF,UAAUhB,EAAE;AACnD,WAAOiB,WAAWD,UAAUf;AAAAA,EAC9B;AAGA,MAAI,GAACvD,WAAMqC,aAANrC,mBAAgBoC,UAAS;AAC5B,WAAAnC,gBACGwE,oBAAkB;AAAA,MAAA,IACjBC,UAAO;AAAA,eAAE1E,MAAMuB;AAAAA,MAAM;AAAA,MAAA,IACrBoD,UAAO;AAAA,eAAE3E,MAAM2E;AAAAA,MAAO;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACf3E,MAAM4E;AAAAA,MAAK;AAAA,IAAA,CAAA;AAAA,EAGxB;AAEA,UAAA,MAAA;AAAA,QAAAC,QAAAtE,eAAAuE,OAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAA,CAAAE,OAAAC,IAAA,IAAAC,cAAAH,MAAAI,WAAA,GAAAC,QAAAJ,MAAAG,aAAA,CAAAE,OAAAC,KAAA,IAAAJ,cAAAE,MAAAD,WAAA;AAAAI,QAGW3D,qBAAmBiD,KAAA;AAAAtE,WAAAsE,OAAA9E,gBAMvBF,aAAW;AAAA,MAAA,IACVc,UAAO;AAAA,eAAEb,MAAMuB,OAAO0C,KAAKpD;AAAAA,MAAO;AAAA,MAAA,IAClCT,UAAO;AAAA,eAAE+D,YAAAA;AAAAA,MAAa;AAAA,IAAA,CAAA,GAAAe,OAAAC,IAAA;AAAA1E,WAAAsE,OAAA9E,gBAIvBS,KAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAES,WAAAA;AAAAA,MAAY;AAAA,MAAAf,UACnBiE,CAAAA,cAAc;AAEd,cAAM/B,SAASmD,UAAU;AAAA,UACvBzC,aAAaqB,UAAUhB;AAAAA,UACvBqC,iBAAiBA,MAAMrB,UAAUf;AAAAA,UACjCC,UAAWoC,CAAAA,QAAQ5C,aAAasB,UAAUhB,IAAIsC,GAAG;AAAA,UACjDC,iBAAkBD,CAAAA,QAAQnC,oBAAoBa,UAAUhB,IAAIsC,GAAG;AAAA,UAC/DpD,aAAaN,iBAAiBM;AAAAA,UAC9BsD,eAAejE;AAAAA,UACfkE,aAAa/F,MAAMuB,OAAO0C,KAAKpD;AAAAA,UAC/BuB,SAASF,eAAAA,EAAiBE,WAAWF,iBAAiBK;AAAAA,QAAAA,CACvD;AAED,cAAMyD,oBAAoBA,MAAM3B,qBAAqBC,SAAS;AAE9D,eAAArE,gBACGgG,mBAAiB;AAAA,UAAA,IAChB3C,KAAE;AAAA,mBAAEgB,UAAUhB;AAAAA,UAAE;AAAA,UAAA,IAChBC,WAAQ;AAAA,mBAAEyC,kBAAAA;AAAAA,UAAmB;AAAA,UAAA,IAC7BE,YAAS;AAAA,mBAAEC,KAAA,MAAA,CAAA,CAAAjE,eAAAA,EAAiBE,OAAO,EAAA,KAAIF,eAAAA,EAAiBI;AAAAA,UAAO;AAAA,UAAA,IAC/D8D,YAAS;AAAA,mBAAED,KAAA,MAAA,CAAA,CAAAjE,eAAAA,EAAiBE,OAAO,EAAA,KAAIF,eAAAA,EAAiBK;AAAAA,UAAM;AAAA,UAAA,IAC9DC,cAAW;AAAA,mBAAEN,iBAAiBM;AAAAA,UAAW;AAAA,UAAA,IACzC4B,aAAU;AAAA,mBAAE/B,SAASgE,oBAAoB/B,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAAA,IACtDgD,eAAY;AAAA,mBAAEjE,SAASiE,aAAahC,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAAA,IACjDiD,aAAU;AAAA,mBAAE/E,eAAAA,MAAqB8C,UAAUhB;AAAAA,UAAE;AAAA,UAAA,IAC7CI,kBAAe;AAAA,mBAAEhC,iBAAAA,EAAmB8C,IAAIF,UAAUhB,EAAE,KAAK;AAAA,UAAI;AAAA,UAAA,IAC7DkD,YAAS;AAAA,mBAAEnE,SAASoE,aAAanC,UAAUhB,EAAE;AAAA,UAAC;AAAA,UAC9CoD,eAAeA,CAACC,MAAMC,UAAU;AAC9BnF,8BAAkB6C,UAAUhB,EAAE;AAC9Bf,mBAAOsE,kBAAkBD,OAAOD,IAAkB;AAAA,UACpD;AAAA,UAAC,IAAAtG,WAAA;AAAA,mBAAAJ,gBAGAwE,oBAAkB;AAAA,cACjBC,SAASJ;AAAAA,cAAS,IAClBK,UAAO;AAAA,uBAAE3E,MAAM2E;AAAAA,cAAO;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAI9B;AAAA,IAAA,CAAC,GAAAY,OAAAC,KAAA;AAAAxE,WAAA8F,CAAAA,QAAA;AAAA,UAAAC,MAtDK,+BAA+B/G,MAAM4E,SAAS,EAAE,IAAEoC,OAInDjD,mBAAAA;AAAoBgD,cAAAD,IAAAG,KAAAC,UAAArC,OAAAiC,IAAAG,IAAAF,GAAA;AAAAD,UAAAK,IAAAC,MAAArC,OAAAiC,MAAAF,IAAAK,CAAA;AAAA,aAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAxC;AAAAA,EAAA,GAAA;AAuDnC;"}

package/dist/components/ResizeHandle.cjs

@@ -116,7 +116,7 @@ const ResizeHandle = (props) => {
     if (merged.disabled) return;
     e.preventDefault();
     e.stopPropagation();
-    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge, e);
   };
   const containerStyle = solidJs.createMemo(() => ({
     position: "absolute",
@@ -141,7 +141,11 @@ const ResizeHandle = (props) => {
       if (merged.disabled) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+        const syntheticEvent = new PointerEvent("pointerdown", {
+          clientX: window.innerWidth / 2,
+          clientY: window.innerHeight / 2
+        });
+        (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge, syntheticEvent);
       }
     };
     _el$.$$pointerdown = handlePointerDown;

package/dist/components/ResizeHandle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.cjs","sources":["../../src/components/ResizeHandle.tsx"],"sourcesContent":["/**\n * ResizeHandle Component\n * Visual handle for resizing grid components\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, createMemo, mergeProps } from 'solid-js'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Props for ResizeHandle\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which edge this handle is on\n   */\n  edge: ResizeEdge\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: ResizeEdge) => void\n\n  /**\n   * Whether the handle is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether resize is active\n   */\n  isActive?: boolean\n\n  /**\n   * Custom class\n   */\n  class?: string\n\n  /**\n   * Handle size in pixels\n   */\n  size?: number\n\n  /**\n   * Hit area size in pixels (larger than visible size for easier grabbing)\n   */\n  hitAreaSize?: number\n}\n\n/**\n * Get cursor style for edge\n */\nfunction getCursor(edge: ResizeEdge): string {\n  switch (edge) {\n    case 'left':\n    case 'right':\n      return 'ew-resize'\n    case 'top':\n    case 'bottom':\n      return 'ns-resize'\n    default:\n      return 'default'\n  }\n}\n\n/**\n * Get position styles for edge\n */\nfunction getPositionStyle(\n  edge: ResizeEdge,\n  hitAreaSize: number\n): JSX.CSSProperties {\n  const halfSize = hitAreaSize / 2\n\n  switch (edge) {\n    case 'left':\n      return {\n        left: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'right':\n      return {\n        right: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'top':\n      return {\n        top: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    case 'bottom':\n      return {\n        bottom: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    default:\n      return {}\n  }\n}\n\n/**\n * Get visual indicator styles for edge\n */\nfunction getIndicatorStyle(\n  edge: ResizeEdge,\n  size: number,\n  isActive: boolean\n): JSX.CSSProperties {\n  const baseColor = isActive ? '#3b82f6' : '#9ca3af'\n\n  const common: JSX.CSSProperties = {\n    position: 'absolute',\n    'background-color': baseColor,\n    'border-radius': `${size / 2}px`,\n    transition: 'background-color 150ms ease, opacity 150ms ease',\n    opacity: isActive ? '1' : '0'\n  }\n\n  switch (edge) {\n    case 'left':\n      return {\n        ...common,\n        left: '50%',\n        top: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'right':\n      return {\n        ...common,\n        right: '50%',\n        top: '50%',\n        transform: 'translate(50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'top':\n      return {\n        ...common,\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    case 'bottom':\n      return {\n        ...common,\n        bottom: '50%',\n        left: '50%',\n        transform: 'translate(-50%, 50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    default:\n      return common\n  }\n}\n\n/**\n * ResizeHandle Component\n */\nexport const ResizeHandle: Component<ResizeHandleProps> = (props) => {\n  const merged = mergeProps(\n    {\n      disabled: false,\n      isActive: false,\n      size: 4,\n      hitAreaSize: 12\n    },\n    props\n  )\n\n  const handlePointerDown = (e: PointerEvent) => {\n    if (merged.disabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    props.onResizeStart?.(props.edge)\n  }\n\n  // Container styles\n  const containerStyle = createMemo((): JSX.CSSProperties => ({\n    position: 'absolute',\n    'z-index': '10',\n    cursor: merged.disabled ? 'default' : getCursor(props.edge),\n    'user-select': 'none',\n    'touch-action': 'none',\n    ...getPositionStyle(props.edge, merged.hitAreaSize)\n  }))\n\n  // Indicator styles\n  const indicatorStyle = createMemo(() =>\n    getIndicatorStyle(props.edge, merged.size, merged.isActive)\n  )\n\n  // Class names\n  const classNames = createMemo(() => {\n    const classes = [\n      'mcp-resize-handle',\n      `mcp-resize-handle-${props.edge}`\n    ]\n\n    if (merged.disabled) classes.push('mcp-resize-handle-disabled')\n    if (merged.isActive) classes.push('mcp-resize-handle-active')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  return (\n    <div\n      class={classNames()}\n      style={containerStyle()}\n      onPointerDown={handlePointerDown}\n      data-resize-edge={props.edge}\n      role=\"separator\"\n      aria-orientation={\n        props.edge === 'left' || props.edge === 'right'\n          ? 'vertical'\n          : 'horizontal'\n      }\n      aria-valuenow={undefined}\n      tabIndex={merged.disabled ? -1 : 0}\n      onKeyDown={(e) => {\n        // Allow keyboard resizing\n        if (merged.disabled) return\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          props.onResizeStart?.(props.edge)\n        }\n      }}\n    >\n      {/* Visual indicator */}\n      <div\n        class=\"mcp-resize-indicator\"\n        style={indicatorStyle()}\n      />\n    </div>\n  )\n}\n\nexport default ResizeHandle\n"],"names":["getCursor","edge","getPositionStyle","hitAreaSize","halfSize","left","top","width","height","right","bottom","getIndicatorStyle","size","isActive","baseColor","common","position","transition","opacity","transform","ResizeHandle","props","merged","mergeProps","disabled","handlePointerDown","e","preventDefault","stopPropagation","onResizeStart","containerStyle","createMemo","cursor","indicatorStyle","classNames","classes","push","class","join","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","$$keydown","key","$$pointerdown","_$setAttribute","undefined","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_$className","t","_$style","a","o","i","n","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ResizeHandle.cjs","sources":["../../src/components/ResizeHandle.tsx"],"sourcesContent":["/**\n * ResizeHandle Component\n * Visual handle for resizing grid components\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, createMemo, mergeProps } from 'solid-js'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Props for ResizeHandle\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which edge this handle is on\n   */\n  edge: ResizeEdge\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: ResizeEdge, event: PointerEvent) => void\n\n  /**\n   * Whether the handle is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether resize is active\n   */\n  isActive?: boolean\n\n  /**\n   * Custom class\n   */\n  class?: string\n\n  /**\n   * Handle size in pixels\n   */\n  size?: number\n\n  /**\n   * Hit area size in pixels (larger than visible size for easier grabbing)\n   */\n  hitAreaSize?: number\n}\n\n/**\n * Get cursor style for edge\n */\nfunction getCursor(edge: ResizeEdge): string {\n  switch (edge) {\n    case 'left':\n    case 'right':\n      return 'ew-resize'\n    case 'top':\n    case 'bottom':\n      return 'ns-resize'\n    default:\n      return 'default'\n  }\n}\n\n/**\n * Get position styles for edge\n */\nfunction getPositionStyle(\n  edge: ResizeEdge,\n  hitAreaSize: number\n): JSX.CSSProperties {\n  const halfSize = hitAreaSize / 2\n\n  switch (edge) {\n    case 'left':\n      return {\n        left: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'right':\n      return {\n        right: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'top':\n      return {\n        top: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    case 'bottom':\n      return {\n        bottom: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    default:\n      return {}\n  }\n}\n\n/**\n * Get visual indicator styles for edge\n */\nfunction getIndicatorStyle(\n  edge: ResizeEdge,\n  size: number,\n  isActive: boolean\n): JSX.CSSProperties {\n  const baseColor = isActive ? '#3b82f6' : '#9ca3af'\n\n  const common: JSX.CSSProperties = {\n    position: 'absolute',\n    'background-color': baseColor,\n    'border-radius': `${size / 2}px`,\n    transition: 'background-color 150ms ease, opacity 150ms ease',\n    opacity: isActive ? '1' : '0'\n  }\n\n  switch (edge) {\n    case 'left':\n      return {\n        ...common,\n        left: '50%',\n        top: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'right':\n      return {\n        ...common,\n        right: '50%',\n        top: '50%',\n        transform: 'translate(50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'top':\n      return {\n        ...common,\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    case 'bottom':\n      return {\n        ...common,\n        bottom: '50%',\n        left: '50%',\n        transform: 'translate(-50%, 50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    default:\n      return common\n  }\n}\n\n/**\n * ResizeHandle Component\n */\nexport const ResizeHandle: Component<ResizeHandleProps> = (props) => {\n  const merged = mergeProps(\n    {\n      disabled: false,\n      isActive: false,\n      size: 4,\n      hitAreaSize: 12\n    },\n    props\n  )\n\n  const handlePointerDown = (e: PointerEvent) => {\n    if (merged.disabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    props.onResizeStart?.(props.edge, e)\n  }\n\n  // Container styles\n  const containerStyle = createMemo((): JSX.CSSProperties => ({\n    position: 'absolute',\n    'z-index': '10',\n    cursor: merged.disabled ? 'default' : getCursor(props.edge),\n    'user-select': 'none',\n    'touch-action': 'none',\n    ...getPositionStyle(props.edge, merged.hitAreaSize)\n  }))\n\n  // Indicator styles\n  const indicatorStyle = createMemo(() =>\n    getIndicatorStyle(props.edge, merged.size, merged.isActive)\n  )\n\n  // Class names\n  const classNames = createMemo(() => {\n    const classes = [\n      'mcp-resize-handle',\n      `mcp-resize-handle-${props.edge}`\n    ]\n\n    if (merged.disabled) classes.push('mcp-resize-handle-disabled')\n    if (merged.isActive) classes.push('mcp-resize-handle-active')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  return (\n    <div\n      class={classNames()}\n      style={containerStyle()}\n      onPointerDown={handlePointerDown}\n      data-resize-edge={props.edge}\n      role=\"separator\"\n      aria-orientation={\n        props.edge === 'left' || props.edge === 'right'\n          ? 'vertical'\n          : 'horizontal'\n      }\n      aria-valuenow={undefined}\n      tabIndex={merged.disabled ? -1 : 0}\n      onKeyDown={(e) => {\n        // Allow keyboard resizing\n        if (merged.disabled) return\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          // Create synthetic pointer event for keyboard activation\n          const syntheticEvent = new PointerEvent('pointerdown', {\n            clientX: window.innerWidth / 2,\n            clientY: window.innerHeight / 2\n          })\n          props.onResizeStart?.(props.edge, syntheticEvent)\n        }\n      }}\n    >\n      {/* Visual indicator */}\n      <div\n        class=\"mcp-resize-indicator\"\n        style={indicatorStyle()}\n      />\n    </div>\n  )\n}\n\nexport default ResizeHandle\n"],"names":["getCursor","edge","getPositionStyle","hitAreaSize","halfSize","left","top","width","height","right","bottom","getIndicatorStyle","size","isActive","baseColor","common","position","transition","opacity","transform","ResizeHandle","props","merged","mergeProps","disabled","handlePointerDown","e","preventDefault","stopPropagation","onResizeStart","containerStyle","createMemo","cursor","indicatorStyle","classNames","classes","push","class","join","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","$$keydown","key","syntheticEvent","PointerEvent","clientX","window","innerWidth","clientY","innerHeight","$$pointerdown","_$setAttribute","undefined","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_$className","t","_$style","a","o","i","n","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}

package/dist/components/ResizeHandle.d.ts

@@ -20,7 +20,7 @@ export interface ResizeHandleProps {
     /**
      * Callback when resize starts
      */
-    onResizeStart?: (edge: ResizeEdge) => void;
+    onResizeStart?: (edge: ResizeEdge, event: PointerEvent) => void;
     /**
      * Whether the handle is disabled
      */

package/dist/components/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAA+B,MAAM,UAAU,CAAA;AAEjE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE5D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AA6HD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CA+ErD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/components/ResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAA+B,MAAM,UAAU,CAAA;AAEjE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE5D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAE/D;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AA6HD;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,iBAAiB,CAoFrD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/ResizeHandle.js

@@ -114,7 +114,7 @@ const ResizeHandle = (props) => {
     if (merged.disabled) return;
     e.preventDefault();
     e.stopPropagation();
-    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge, e);
   };
   const containerStyle = createMemo(() => ({
     position: "absolute",
@@ -139,7 +139,11 @@ const ResizeHandle = (props) => {
       if (merged.disabled) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+        const syntheticEvent = new PointerEvent("pointerdown", {
+          clientX: window.innerWidth / 2,
+          clientY: window.innerHeight / 2
+        });
+        (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge, syntheticEvent);
       }
     };
     _el$.$$pointerdown = handlePointerDown;

package/dist/components/ResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.js","sources":["../../src/components/ResizeHandle.tsx"],"sourcesContent":["/**\n * ResizeHandle Component\n * Visual handle for resizing grid components\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, createMemo, mergeProps } from 'solid-js'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Props for ResizeHandle\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which edge this handle is on\n   */\n  edge: ResizeEdge\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: ResizeEdge) => void\n\n  /**\n   * Whether the handle is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether resize is active\n   */\n  isActive?: boolean\n\n  /**\n   * Custom class\n   */\n  class?: string\n\n  /**\n   * Handle size in pixels\n   */\n  size?: number\n\n  /**\n   * Hit area size in pixels (larger than visible size for easier grabbing)\n   */\n  hitAreaSize?: number\n}\n\n/**\n * Get cursor style for edge\n */\nfunction getCursor(edge: ResizeEdge): string {\n  switch (edge) {\n    case 'left':\n    case 'right':\n      return 'ew-resize'\n    case 'top':\n    case 'bottom':\n      return 'ns-resize'\n    default:\n      return 'default'\n  }\n}\n\n/**\n * Get position styles for edge\n */\nfunction getPositionStyle(\n  edge: ResizeEdge,\n  hitAreaSize: number\n): JSX.CSSProperties {\n  const halfSize = hitAreaSize / 2\n\n  switch (edge) {\n    case 'left':\n      return {\n        left: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'right':\n      return {\n        right: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'top':\n      return {\n        top: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    case 'bottom':\n      return {\n        bottom: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    default:\n      return {}\n  }\n}\n\n/**\n * Get visual indicator styles for edge\n */\nfunction getIndicatorStyle(\n  edge: ResizeEdge,\n  size: number,\n  isActive: boolean\n): JSX.CSSProperties {\n  const baseColor = isActive ? '#3b82f6' : '#9ca3af'\n\n  const common: JSX.CSSProperties = {\n    position: 'absolute',\n    'background-color': baseColor,\n    'border-radius': `${size / 2}px`,\n    transition: 'background-color 150ms ease, opacity 150ms ease',\n    opacity: isActive ? '1' : '0'\n  }\n\n  switch (edge) {\n    case 'left':\n      return {\n        ...common,\n        left: '50%',\n        top: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'right':\n      return {\n        ...common,\n        right: '50%',\n        top: '50%',\n        transform: 'translate(50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'top':\n      return {\n        ...common,\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    case 'bottom':\n      return {\n        ...common,\n        bottom: '50%',\n        left: '50%',\n        transform: 'translate(-50%, 50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    default:\n      return common\n  }\n}\n\n/**\n * ResizeHandle Component\n */\nexport const ResizeHandle: Component<ResizeHandleProps> = (props) => {\n  const merged = mergeProps(\n    {\n      disabled: false,\n      isActive: false,\n      size: 4,\n      hitAreaSize: 12\n    },\n    props\n  )\n\n  const handlePointerDown = (e: PointerEvent) => {\n    if (merged.disabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    props.onResizeStart?.(props.edge)\n  }\n\n  // Container styles\n  const containerStyle = createMemo((): JSX.CSSProperties => ({\n    position: 'absolute',\n    'z-index': '10',\n    cursor: merged.disabled ? 'default' : getCursor(props.edge),\n    'user-select': 'none',\n    'touch-action': 'none',\n    ...getPositionStyle(props.edge, merged.hitAreaSize)\n  }))\n\n  // Indicator styles\n  const indicatorStyle = createMemo(() =>\n    getIndicatorStyle(props.edge, merged.size, merged.isActive)\n  )\n\n  // Class names\n  const classNames = createMemo(() => {\n    const classes = [\n      'mcp-resize-handle',\n      `mcp-resize-handle-${props.edge}`\n    ]\n\n    if (merged.disabled) classes.push('mcp-resize-handle-disabled')\n    if (merged.isActive) classes.push('mcp-resize-handle-active')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  return (\n    <div\n      class={classNames()}\n      style={containerStyle()}\n      onPointerDown={handlePointerDown}\n      data-resize-edge={props.edge}\n      role=\"separator\"\n      aria-orientation={\n        props.edge === 'left' || props.edge === 'right'\n          ? 'vertical'\n          : 'horizontal'\n      }\n      aria-valuenow={undefined}\n      tabIndex={merged.disabled ? -1 : 0}\n      onKeyDown={(e) => {\n        // Allow keyboard resizing\n        if (merged.disabled) return\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          props.onResizeStart?.(props.edge)\n        }\n      }}\n    >\n      {/* Visual indicator */}\n      <div\n        class=\"mcp-resize-indicator\"\n        style={indicatorStyle()}\n      />\n    </div>\n  )\n}\n\nexport default ResizeHandle\n"],"names":["getCursor","edge","getPositionStyle","hitAreaSize","halfSize","left","top","width","height","right","bottom","getIndicatorStyle","size","isActive","baseColor","common","position","transition","opacity","transform","ResizeHandle","props","merged","mergeProps","disabled","handlePointerDown","e","preventDefault","stopPropagation","onResizeStart","containerStyle","createMemo","cursor","indicatorStyle","classNames","classes","push","class","join","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","$$keydown","key","$$pointerdown","_$setAttribute","undefined","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_$className","t","_$style","a","o","i","n","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ResizeHandle.js","sources":["../../src/components/ResizeHandle.tsx"],"sourcesContent":["/**\n * ResizeHandle Component\n * Visual handle for resizing grid components\n *\n * Sprint Drag-Drop Feature\n */\n\nimport { Component, JSX, createMemo, mergeProps } from 'solid-js'\n\n/**\n * Resize edge types\n */\nexport type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'\n\n/**\n * Props for ResizeHandle\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which edge this handle is on\n   */\n  edge: ResizeEdge\n\n  /**\n   * Callback when resize starts\n   */\n  onResizeStart?: (edge: ResizeEdge, event: PointerEvent) => void\n\n  /**\n   * Whether the handle is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether resize is active\n   */\n  isActive?: boolean\n\n  /**\n   * Custom class\n   */\n  class?: string\n\n  /**\n   * Handle size in pixels\n   */\n  size?: number\n\n  /**\n   * Hit area size in pixels (larger than visible size for easier grabbing)\n   */\n  hitAreaSize?: number\n}\n\n/**\n * Get cursor style for edge\n */\nfunction getCursor(edge: ResizeEdge): string {\n  switch (edge) {\n    case 'left':\n    case 'right':\n      return 'ew-resize'\n    case 'top':\n    case 'bottom':\n      return 'ns-resize'\n    default:\n      return 'default'\n  }\n}\n\n/**\n * Get position styles for edge\n */\nfunction getPositionStyle(\n  edge: ResizeEdge,\n  hitAreaSize: number\n): JSX.CSSProperties {\n  const halfSize = hitAreaSize / 2\n\n  switch (edge) {\n    case 'left':\n      return {\n        left: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'right':\n      return {\n        right: `-${halfSize}px`,\n        top: '0',\n        width: `${hitAreaSize}px`,\n        height: '100%'\n      }\n    case 'top':\n      return {\n        top: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    case 'bottom':\n      return {\n        bottom: `-${halfSize}px`,\n        left: '0',\n        width: '100%',\n        height: `${hitAreaSize}px`\n      }\n    default:\n      return {}\n  }\n}\n\n/**\n * Get visual indicator styles for edge\n */\nfunction getIndicatorStyle(\n  edge: ResizeEdge,\n  size: number,\n  isActive: boolean\n): JSX.CSSProperties {\n  const baseColor = isActive ? '#3b82f6' : '#9ca3af'\n\n  const common: JSX.CSSProperties = {\n    position: 'absolute',\n    'background-color': baseColor,\n    'border-radius': `${size / 2}px`,\n    transition: 'background-color 150ms ease, opacity 150ms ease',\n    opacity: isActive ? '1' : '0'\n  }\n\n  switch (edge) {\n    case 'left':\n      return {\n        ...common,\n        left: '50%',\n        top: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'right':\n      return {\n        ...common,\n        right: '50%',\n        top: '50%',\n        transform: 'translate(50%, -50%)',\n        width: `${size}px`,\n        height: '40px',\n        'max-height': '60%'\n      }\n    case 'top':\n      return {\n        ...common,\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    case 'bottom':\n      return {\n        ...common,\n        bottom: '50%',\n        left: '50%',\n        transform: 'translate(-50%, 50%)',\n        width: '40px',\n        'max-width': '60%',\n        height: `${size}px`\n      }\n    default:\n      return common\n  }\n}\n\n/**\n * ResizeHandle Component\n */\nexport const ResizeHandle: Component<ResizeHandleProps> = (props) => {\n  const merged = mergeProps(\n    {\n      disabled: false,\n      isActive: false,\n      size: 4,\n      hitAreaSize: 12\n    },\n    props\n  )\n\n  const handlePointerDown = (e: PointerEvent) => {\n    if (merged.disabled) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    props.onResizeStart?.(props.edge, e)\n  }\n\n  // Container styles\n  const containerStyle = createMemo((): JSX.CSSProperties => ({\n    position: 'absolute',\n    'z-index': '10',\n    cursor: merged.disabled ? 'default' : getCursor(props.edge),\n    'user-select': 'none',\n    'touch-action': 'none',\n    ...getPositionStyle(props.edge, merged.hitAreaSize)\n  }))\n\n  // Indicator styles\n  const indicatorStyle = createMemo(() =>\n    getIndicatorStyle(props.edge, merged.size, merged.isActive)\n  )\n\n  // Class names\n  const classNames = createMemo(() => {\n    const classes = [\n      'mcp-resize-handle',\n      `mcp-resize-handle-${props.edge}`\n    ]\n\n    if (merged.disabled) classes.push('mcp-resize-handle-disabled')\n    if (merged.isActive) classes.push('mcp-resize-handle-active')\n    if (props.class) classes.push(props.class)\n\n    return classes.join(' ')\n  })\n\n  return (\n    <div\n      class={classNames()}\n      style={containerStyle()}\n      onPointerDown={handlePointerDown}\n      data-resize-edge={props.edge}\n      role=\"separator\"\n      aria-orientation={\n        props.edge === 'left' || props.edge === 'right'\n          ? 'vertical'\n          : 'horizontal'\n      }\n      aria-valuenow={undefined}\n      tabIndex={merged.disabled ? -1 : 0}\n      onKeyDown={(e) => {\n        // Allow keyboard resizing\n        if (merged.disabled) return\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          // Create synthetic pointer event for keyboard activation\n          const syntheticEvent = new PointerEvent('pointerdown', {\n            clientX: window.innerWidth / 2,\n            clientY: window.innerHeight / 2\n          })\n          props.onResizeStart?.(props.edge, syntheticEvent)\n        }\n      }}\n    >\n      {/* Visual indicator */}\n      <div\n        class=\"mcp-resize-indicator\"\n        style={indicatorStyle()}\n      />\n    </div>\n  )\n}\n\nexport default ResizeHandle\n"],"names":["getCursor","edge","getPositionStyle","hitAreaSize","halfSize","left","top","width","height","right","bottom","getIndicatorStyle","size","isActive","baseColor","common","position","transition","opacity","transform","ResizeHandle","props","merged","mergeProps","disabled","handlePointerDown","e","preventDefault","stopPropagation","onResizeStart","containerStyle","createMemo","cursor","indicatorStyle","classNames","classes","push","class","join","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","$$keydown","key","syntheticEvent","PointerEvent","clientX","window","innerWidth","clientY","innerHeight","$$pointerdown","_$setAttribute","undefined","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_$className","t","_$style","a","o","i","n","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}

package/dist/hooks/useAutocomplete.cjs

@@ -40,6 +40,7 @@ function useAutocomplete(options) {
   const [error, setError] = solidJs.createSignal(null);
   const [isOpen, setIsOpen] = solidJs.createSignal(false);
   const [resultType, setResultType] = solidJs.createSignal(null);
+  let currentRequestId = 0;
   const config = solidJs.createMemo(() => ({
     minChars: minCharsOption ?? (fieldConfig == null ? void 0 : fieldConfig.minChars) ?? (autocompleteCtx == null ? void 0 : autocompleteCtx.config.minChars) ?? 1,
     debounceMs: debounceOption ?? (fieldConfig == null ? void 0 : fieldConfig.debounceMs) ?? (autocompleteCtx == null ? void 0 : autocompleteCtx.config.debounceMs) ?? 150
@@ -66,6 +67,7 @@ function useAutocomplete(options) {
       });
       return;
     }
+    const requestId = ++currentRequestId;
     setIsLoading(true);
     setError(null);
     try {
@@ -76,6 +78,9 @@ function useAutocomplete(options) {
         targetPluginId,
         contextData
       );
+      if (requestId !== currentRequestId) {
+        return;
+      }
       solidJs.batch(() => {
         var _a;
         setResultType(result.type);
@@ -92,6 +97,9 @@ function useAutocomplete(options) {
         setIsLoading(false);
       });
     } catch (e) {
+      if (requestId !== currentRequestId) {
+        return;
+      }
       solidJs.batch(() => {
         setError(e instanceof Error ? e.message : "Unknown error");
         setIsLoading(false);