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

package/dist/components/DraggableGridItem.js

@@ -0,0 +1,133 @@
+import { getNextElement, template, getNextMarker, spread, mergeProps as mergeProps$1, insert, createComponent, memo, runHydrationEvents } from "solid-js/web";
+import { mergeProps, createMemo, Show } from "solid-js";
+import { ResizeHandle } from "./ResizeHandle.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=mcp-drag-handle style="position:absolute;top:4px;left:50%;transform:translateX(-50%);width:40px;height:4px;background-color:rgba(0, 0, 0, 0.2);border-radius:2px;cursor:grab;opacity:0;transition:opacity 150ms ease;z-index:5">`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mcp-drop-indicator style=position:absolute;top:-2px;left:0;right:0;height:4px;background-color:#3b82f6;border-radius:2px;z-index:20>`), _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><div class=mcp-grid-item-content style=position:relative;z-index:1>`);
+function getGridStyle(position) {
+  return {
+    "grid-column": `${position.colStart} / span ${position.colSpan}`,
+    "grid-row": position.rowStart ? `${position.rowStart} / span ${position.rowSpan || 1}` : void 0
+  };
+}
+const DraggableGridItem = (props) => {
+  const merged = mergeProps({
+    draggable: false,
+    resizable: false,
+    isDragging: false,
+    isDropTarget: false,
+    isResizing: false,
+    showGridOverlay: false
+  }, props);
+  const effectivePosition = createMemo(() => merged.previewPosition || props.position);
+  const gridStyle = createMemo(() => getGridStyle(effectivePosition()));
+  const combinedStyle = createMemo(() => {
+    const base = {
+      ...gridStyle(),
+      position: "relative",
+      transition: merged.isResizing ? "none" : "all 200ms ease-out"
+    };
+    if (merged.isDragging) {
+      base.opacity = "0.5";
+      base.transform = "scale(1.02)";
+      base["z-index"] = "100";
+    }
+    if (merged.isDropTarget && !merged.isDragging) {
+      base["box-shadow"] = "0 0 0 2px #3b82f6";
+      base["border-radius"] = "4px";
+    }
+    if (merged.isResizing) {
+      base["z-index"] = "100";
+    }
+    if (props.style) {
+      Object.assign(base, props.style);
+    }
+    return base;
+  });
+  const classNames = createMemo(() => {
+    const classes = ["mcp-draggable-grid-item"];
+    if (merged.draggable) classes.push("mcp-draggable");
+    if (merged.resizable) classes.push("mcp-resizable");
+    if (merged.isDragging) classes.push("mcp-dragging");
+    if (merged.isDropTarget) classes.push("mcp-drop-target");
+    if (merged.isResizing) classes.push("mcp-resizing");
+    if (props.class) classes.push(props.class);
+    return classes.join(" ");
+  });
+  const handleResizeStart = (edge) => {
+    var _a;
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, edge);
+  };
+  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;
+    spread(_el$, mergeProps$1({
+      get ["class"]() {
+        return classNames();
+      },
+      get style() {
+        return combinedStyle();
+      },
+      get ["data-component-id"]() {
+        return props.id;
+      }
+    }, () => merged.draggable && props.dragProps ? props.dragProps : {}), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!merged.draggable)() && !merged.isResizing;
+      },
+      get children() {
+        return getNextElement(_tmpl$);
+      }
+    }), _el$6, _co$);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!merged.resizable)() && !merged.isDragging;
+      },
+      get children() {
+        return [createComponent(ResizeHandle, {
+          edge: "left",
+          onResizeStart: handleResizeStart,
+          get disabled() {
+            var _a;
+            return (_a = merged.constraints) == null ? void 0 : _a.lockHorizontal;
+          }
+        }), createComponent(ResizeHandle, {
+          edge: "right",
+          onResizeStart: handleResizeStart,
+          get disabled() {
+            var _a;
+            return (_a = merged.constraints) == null ? void 0 : _a.lockHorizontal;
+          }
+        }), createComponent(ResizeHandle, {
+          edge: "top",
+          onResizeStart: handleResizeStart,
+          get disabled() {
+            var _a;
+            return (_a = merged.constraints) == null ? void 0 : _a.lockVertical;
+          }
+        }), createComponent(ResizeHandle, {
+          edge: "bottom",
+          onResizeStart: handleResizeStart,
+          get disabled() {
+            var _a;
+            return (_a = merged.constraints) == null ? void 0 : _a.lockVertical;
+          }
+        })];
+      }
+    }), _el$8, _co$2);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!merged.isDropTarget)() && !merged.isDragging;
+      },
+      get children() {
+        return getNextElement(_tmpl$2);
+      }
+    }), _el$0, _co$3);
+    insert(_el$4, () => props.children);
+    runHydrationEvents();
+    return _el$;
+  })();
+};
+export {
+  DraggableGridItem,
+  DraggableGridItem as default
+};
+//# sourceMappingURL=DraggableGridItem.js.map

package/dist/components/DraggableGridItem.js.map

@@ -0,0 +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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"}

package/dist/components/EditableUIResourceRenderer.cjs

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+const useDragDrop = require("../hooks/useDragDrop.cjs");
+const useResize = require("../hooks/useResize.cjs");
+const DraggableGridItem = require("./DraggableGridItem.cjs");
+const UIResourceRenderer = require("./UIResourceRenderer.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class=mcp-grid-overlay style=position:absolute;inset:0;display:grid;gap:1rem;padding:0;pointer-events:none;z-index:0>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mcp-grid-overlay-column style="background-color:rgba(59, 130, 246, 0.05);border:1px dashed rgba(59, 130, 246, 0.2);border-radius:4px">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div><div class="grid relative"data-grid-container><!$><!/><!$><!/>`);
+const GridOverlay = (props) => {
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return props.visible;
+    },
+    get children() {
+      var _el$ = web.getNextElement(_tmpl$);
+      web.insert(_el$, web.createComponent(solidJs.For, {
+        get each() {
+          return Array(props.columns).fill(0);
+        },
+        children: () => web.getNextElement(_tmpl$2)
+      }));
+      web.effect((_$p) => web.setStyleProperty(_el$, "grid-template-columns", `repeat(${props.columns}, 1fr)`));
+      return _el$;
+    }
+  });
+};
+const EditableUIResourceRenderer = (props) => {
+  var _a;
+  const [components, setComponents] = solidJs.createSignal(props.layout.components);
+  const [activeResizeId, setActiveResizeId] = solidJs.createSignal(null);
+  const [previewPositions, setPreviewPositions] = solidJs.createSignal(/* @__PURE__ */ new Map());
+  const [gridContainerRef, setGridContainerRef] = solidJs.createSignal(null);
+  solidJs.createEffect(solidJs.on(() => props.layout.components, (newComponents) => {
+    setComponents(newComponents);
+  }));
+  const dragDropConfig = solidJs.createMemo(() => {
+    var _a2, _b, _c, _d, _e, _f;
+    return {
+      enabled: ((_a2 = props.dragDrop) == null ? void 0 : _a2.enabled) ?? false,
+      reorder: ((_b = props.dragDrop) == null ? void 0 : _b.reorder) ?? true,
+      resize: ((_c = props.dragDrop) == null ? void 0 : _c.resize) ?? true,
+      constraints: ((_d = props.dragDrop) == null ? void 0 : _d.constraints) ?? {},
+      showGridLines: ((_e = props.dragDrop) == null ? void 0 : _e.showGridLines) ?? true,
+      animationDuration: ((_f = props.dragDrop) == null ? void 0 : _f.animationDuration) ?? 200
+    };
+  });
+  const handleReorder = (newComponents) => {
+    var _a2, _b, _c, _d, _e;
+    setComponents(newComponents);
+    const newLayout = {
+      ...props.layout,
+      components: newComponents
+    };
+    (_b = (_a2 = props.dragDrop) == null ? void 0 : _a2.onReorder) == null ? void 0 : _b.call(_a2, newComponents);
+    (_d = (_c = props.dragDrop) == null ? void 0 : _c.onChange) == null ? void 0 : _d.call(_c, newLayout);
+    (_e = props.onLayoutChange) == null ? void 0 : _e.call(props, newLayout);
+  };
+  const handleResize = (componentId, newPosition) => {
+    var _a2, _b, _c, _d, _e;
+    const updatedComponents = components().map((c) => c.id === componentId ? {
+      ...c,
+      position: newPosition
+    } : c);
+    setComponents(updatedComponents);
+    setActiveResizeId(null);
+    setPreviewPositions(/* @__PURE__ */ new Map());
+    const newLayout = {
+      ...props.layout,
+      components: updatedComponents
+    };
+    (_b = (_a2 = props.dragDrop) == null ? void 0 : _a2.onResize) == null ? void 0 : _b.call(_a2, componentId, newPosition);
+    (_d = (_c = props.dragDrop) == null ? void 0 : _c.onChange) == null ? void 0 : _d.call(_c, newLayout);
+    (_e = props.onLayoutChange) == null ? void 0 : _e.call(props, newLayout);
+  };
+  const handleResizePreview = (componentId, previewPosition) => {
+    setPreviewPositions((prev) => {
+      const next = new Map(prev);
+      next.set(componentId, previewPosition);
+      return next;
+    });
+  };
+  const dragDrop = useDragDrop.useDragDrop({
+    components,
+    onReorder: handleReorder,
+    enabled: dragDropConfig().enabled && dragDropConfig().reorder
+  });
+  const gridContainerStyle = solidJs.createMemo(() => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${props.layout.grid.columns}, 1fr)`,
+    gap: props.layout.grid.gap,
+    position: "relative"
+  }));
+  const showOverlay = solidJs.createMemo(() => dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null));
+  const getEffectivePosition = (component) => {
+    const preview = previewPositions().get(component.id);
+    return preview || component.position;
+  };
+  if (!((_a = props.dragDrop) == null ? void 0 : _a.enabled)) {
+    return web.createComponent(UIResourceRenderer.UIResourceRenderer, {
+      get content() {
+        return props.layout;
+      },
+      get onError() {
+        return props.onError;
+      },
+      get ["class"]() {
+        return props.class;
+      }
+    });
+  }
+  return (() => {
+    var _el$3 = web.getNextElement(_tmpl$3), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = web.getNextMarker(_el$7.nextSibling);
+    web.use(setGridContainerRef, _el$4);
+    web.insert(_el$4, web.createComponent(GridOverlay, {
+      get columns() {
+        return props.layout.grid.columns;
+      },
+      get visible() {
+        return showOverlay();
+      }
+    }), _el$6, _co$);
+    web.insert(_el$4, web.createComponent(solidJs.For, {
+      get each() {
+        return components();
+      },
+      children: (component) => {
+        const resize = useResize.useResize({
+          componentId: component.id,
+          currentPosition: () => component.position,
+          onResize: (pos) => handleResize(component.id, pos),
+          onResizePreview: (pos) => handleResizePreview(component.id, pos),
+          constraints: dragDropConfig().constraints,
+          gridContainer: gridContainerRef,
+          gridColumns: props.layout.grid.columns,
+          enabled: dragDropConfig().enabled && dragDropConfig().resize
+        });
+        const effectivePosition = () => getEffectivePosition(component);
+        return web.createComponent(DraggableGridItem.DraggableGridItem, {
+          get id() {
+            return component.id;
+          },
+          get position() {
+            return effectivePosition();
+          },
+          get draggable() {
+            return web.memo(() => !!dragDropConfig().enabled)() && dragDropConfig().reorder;
+          },
+          get resizable() {
+            return web.memo(() => !!dragDropConfig().enabled)() && dragDropConfig().resize;
+          },
+          get constraints() {
+            return dragDropConfig().constraints;
+          },
+          get isDragging() {
+            return dragDrop.isComponentDragging(component.id);
+          },
+          get isDropTarget() {
+            return dragDrop.isDropTarget(component.id);
+          },
+          get isResizing() {
+            return activeResizeId() === component.id;
+          },
+          get previewPosition() {
+            return previewPositions().get(component.id) || null;
+          },
+          get dragProps() {
+            return dragDrop.getDragProps(component.id);
+          },
+          onResizeStart: (edge) => {
+            setActiveResizeId(component.id);
+            const syntheticEvent = new PointerEvent("pointerdown", {
+              clientX: 0,
+              clientY: 0
+            });
+            resize.handleResizeStart(syntheticEvent, edge);
+          },
+          get children() {
+            return web.createComponent(UIResourceRenderer.UIResourceRenderer, {
+              content: component,
+              get onError() {
+                return props.onError;
+              }
+            });
+          }
+        });
+      }
+    }), _el$8, _co$2);
+    web.effect((_p$) => {
+      var _v$ = `w-full editable-ui-renderer ${props.class || ""}`, _v$2 = gridContainerStyle();
+      _v$ !== _p$.e && web.className(_el$3, _p$.e = _v$);
+      _p$.t = web.style(_el$4, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$3;
+  })();
+};
+exports.EditableUIResourceRenderer = EditableUIResourceRenderer;
+exports.default = EditableUIResourceRenderer;
+//# sourceMappingURL=EditableUIResourceRenderer.cjs.map

package/dist/components/EditableUIResourceRenderer.cjs.map

@@ -0,0 +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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"}

package/dist/components/EditableUIResourceRenderer.d.ts

@@ -0,0 +1,43 @@
+/**
+ * EditableUIResourceRenderer Component
+ * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities
+ *
+ * Sprint Drag-Drop Feature
+ */
+import { Component } from 'solid-js';
+import type { UILayout, RendererError, DragDropConfig } from '../types';
+/**
+ * Props for EditableUIResourceRenderer
+ */
+export interface EditableUIResourceRendererProps {
+    /**
+     * Layout to render (must be UILayout, not single component)
+     */
+    layout: UILayout;
+    /**
+     * Drag-drop configuration
+     */
+    dragDrop?: DragDropConfig;
+    /**
+     * Error callback
+     */
+    onError?: (error: RendererError) => void;
+    /**
+     * Callback when layout changes (reorder or resize)
+     */
+    onLayoutChange?: (layout: UILayout) => void;
+    /**
+     * Custom CSS class
+     */
+    class?: string;
+    /**
+     * Show grid overlay during editing
+     */
+    showGridOverlay?: boolean;
+}
+/**
+ * EditableUIResourceRenderer Component
+ */
+export declare const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps>;
+export default EditableUIResourceRenderer;
+//# sourceMappingURL=EditableUIResourceRenderer.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/EditableUIResourceRenderer.js

@@ -0,0 +1,203 @@
+import { createComponent, getNextElement, template, getNextMarker, use, insert, memo, effect, className, style, setStyleProperty } from "solid-js/web";
+import { createSignal, createEffect, on, createMemo, For, Show } from "solid-js";
+import { useDragDrop } from "../hooks/useDragDrop.js";
+import { useResize } from "../hooks/useResize.js";
+import { DraggableGridItem } from "./DraggableGridItem.js";
+import { UIResourceRenderer } from "./UIResourceRenderer.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=mcp-grid-overlay style=position:absolute;inset:0;display:grid;gap:1rem;padding:0;pointer-events:none;z-index:0>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mcp-grid-overlay-column style="background-color:rgba(59, 130, 246, 0.05);border:1px dashed rgba(59, 130, 246, 0.2);border-radius:4px">`), _tmpl$3 = /* @__PURE__ */ template(`<div><div class="grid relative"data-grid-container><!$><!/><!$><!/>`);
+const GridOverlay = (props) => {
+  return createComponent(Show, {
+    get when() {
+      return props.visible;
+    },
+    get children() {
+      var _el$ = getNextElement(_tmpl$);
+      insert(_el$, createComponent(For, {
+        get each() {
+          return Array(props.columns).fill(0);
+        },
+        children: () => getNextElement(_tmpl$2)
+      }));
+      effect((_$p) => setStyleProperty(_el$, "grid-template-columns", `repeat(${props.columns}, 1fr)`));
+      return _el$;
+    }
+  });
+};
+const EditableUIResourceRenderer = (props) => {
+  var _a;
+  const [components, setComponents] = createSignal(props.layout.components);
+  const [activeResizeId, setActiveResizeId] = createSignal(null);
+  const [previewPositions, setPreviewPositions] = createSignal(/* @__PURE__ */ new Map());
+  const [gridContainerRef, setGridContainerRef] = createSignal(null);
+  createEffect(on(() => props.layout.components, (newComponents) => {
+    setComponents(newComponents);
+  }));
+  const dragDropConfig = createMemo(() => {
+    var _a2, _b, _c, _d, _e, _f;
+    return {
+      enabled: ((_a2 = props.dragDrop) == null ? void 0 : _a2.enabled) ?? false,
+      reorder: ((_b = props.dragDrop) == null ? void 0 : _b.reorder) ?? true,
+      resize: ((_c = props.dragDrop) == null ? void 0 : _c.resize) ?? true,
+      constraints: ((_d = props.dragDrop) == null ? void 0 : _d.constraints) ?? {},
+      showGridLines: ((_e = props.dragDrop) == null ? void 0 : _e.showGridLines) ?? true,
+      animationDuration: ((_f = props.dragDrop) == null ? void 0 : _f.animationDuration) ?? 200
+    };
+  });
+  const handleReorder = (newComponents) => {
+    var _a2, _b, _c, _d, _e;
+    setComponents(newComponents);
+    const newLayout = {
+      ...props.layout,
+      components: newComponents
+    };
+    (_b = (_a2 = props.dragDrop) == null ? void 0 : _a2.onReorder) == null ? void 0 : _b.call(_a2, newComponents);
+    (_d = (_c = props.dragDrop) == null ? void 0 : _c.onChange) == null ? void 0 : _d.call(_c, newLayout);
+    (_e = props.onLayoutChange) == null ? void 0 : _e.call(props, newLayout);
+  };
+  const handleResize = (componentId, newPosition) => {
+    var _a2, _b, _c, _d, _e;
+    const updatedComponents = components().map((c) => c.id === componentId ? {
+      ...c,
+      position: newPosition
+    } : c);
+    setComponents(updatedComponents);
+    setActiveResizeId(null);
+    setPreviewPositions(/* @__PURE__ */ new Map());
+    const newLayout = {
+      ...props.layout,
+      components: updatedComponents
+    };
+    (_b = (_a2 = props.dragDrop) == null ? void 0 : _a2.onResize) == null ? void 0 : _b.call(_a2, componentId, newPosition);
+    (_d = (_c = props.dragDrop) == null ? void 0 : _c.onChange) == null ? void 0 : _d.call(_c, newLayout);
+    (_e = props.onLayoutChange) == null ? void 0 : _e.call(props, newLayout);
+  };
+  const handleResizePreview = (componentId, previewPosition) => {
+    setPreviewPositions((prev) => {
+      const next = new Map(prev);
+      next.set(componentId, previewPosition);
+      return next;
+    });
+  };
+  const dragDrop = useDragDrop({
+    components,
+    onReorder: handleReorder,
+    enabled: dragDropConfig().enabled && dragDropConfig().reorder
+  });
+  const gridContainerStyle = createMemo(() => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${props.layout.grid.columns}, 1fr)`,
+    gap: props.layout.grid.gap,
+    position: "relative"
+  }));
+  const showOverlay = createMemo(() => dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null));
+  const getEffectivePosition = (component) => {
+    const preview = previewPositions().get(component.id);
+    return preview || component.position;
+  };
+  if (!((_a = props.dragDrop) == null ? void 0 : _a.enabled)) {
+    return createComponent(UIResourceRenderer, {
+      get content() {
+        return props.layout;
+      },
+      get onError() {
+        return props.onError;
+      },
+      get ["class"]() {
+        return props.class;
+      }
+    });
+  }
+  return (() => {
+    var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling);
+    use(setGridContainerRef, _el$4);
+    insert(_el$4, createComponent(GridOverlay, {
+      get columns() {
+        return props.layout.grid.columns;
+      },
+      get visible() {
+        return showOverlay();
+      }
+    }), _el$6, _co$);
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return components();
+      },
+      children: (component) => {
+        const resize = useResize({
+          componentId: component.id,
+          currentPosition: () => component.position,
+          onResize: (pos) => handleResize(component.id, pos),
+          onResizePreview: (pos) => handleResizePreview(component.id, pos),
+          constraints: dragDropConfig().constraints,
+          gridContainer: gridContainerRef,
+          gridColumns: props.layout.grid.columns,
+          enabled: dragDropConfig().enabled && dragDropConfig().resize
+        });
+        const effectivePosition = () => getEffectivePosition(component);
+        return createComponent(DraggableGridItem, {
+          get id() {
+            return component.id;
+          },
+          get position() {
+            return effectivePosition();
+          },
+          get draggable() {
+            return memo(() => !!dragDropConfig().enabled)() && dragDropConfig().reorder;
+          },
+          get resizable() {
+            return memo(() => !!dragDropConfig().enabled)() && dragDropConfig().resize;
+          },
+          get constraints() {
+            return dragDropConfig().constraints;
+          },
+          get isDragging() {
+            return dragDrop.isComponentDragging(component.id);
+          },
+          get isDropTarget() {
+            return dragDrop.isDropTarget(component.id);
+          },
+          get isResizing() {
+            return activeResizeId() === component.id;
+          },
+          get previewPosition() {
+            return previewPositions().get(component.id) || null;
+          },
+          get dragProps() {
+            return dragDrop.getDragProps(component.id);
+          },
+          onResizeStart: (edge) => {
+            setActiveResizeId(component.id);
+            const syntheticEvent = new PointerEvent("pointerdown", {
+              clientX: 0,
+              clientY: 0
+            });
+            resize.handleResizeStart(syntheticEvent, edge);
+          },
+          get children() {
+            return createComponent(UIResourceRenderer, {
+              content: component,
+              get onError() {
+                return props.onError;
+              }
+            });
+          }
+        });
+      }
+    }), _el$8, _co$2);
+    effect((_p$) => {
+      var _v$ = `w-full editable-ui-renderer ${props.class || ""}`, _v$2 = gridContainerStyle();
+      _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+      _p$.t = style(_el$4, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$3;
+  })();
+};
+export {
+  EditableUIResourceRenderer,
+  EditableUIResourceRenderer as default
+};
+//# sourceMappingURL=EditableUIResourceRenderer.js.map