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

package/dist/components/EditableUIResourceRenderer.js.map

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

package/dist/components/GhostText.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-overlay aria-hidden=true style=position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;white-space:pre;padding:inherit;font:inherit;line-height:inherit;letter-spacing:inherit><span style=visibility:hidden></span><span style=color:#9ca3af;opacity:0.7>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-hint style="position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:0.75rem;color:#6b7280;background-color:rgba(255, 255, 255, 0.9);padding:2px 6px;border-radius:4px;pointer-events:none">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-loading style=position:absolute;right:8px;top:50%;transform:translateY(-50%)><span style="display:inline-block;width:12px;height:12px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div style=position:relative;display:inline-block;width:100%><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-ghost-text-input-wrapper style=position:relative><!$><!/><input style=position:relative;background-color:transparent;caret-color:inherit>`);
+const GhostText = (props) => {
+  const shouldShow = solidJs.createMemo(() => props.visible !== false && props.ghostText && props.ghostText.length > 0);
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = web.getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$3] = web.getNextMarker(_el$10.nextSibling);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return shouldShow();
+      },
+      get children() {
+        var _el$2 = web.getNextElement(_tmpl$), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        web.insert(_el$3, () => props.inputValue);
+        web.insert(_el$4, () => props.ghostText);
+        web.effect(() => web.className(_el$4, `mcp-ghost-text ${props.ghostClass || ""}`));
+        return _el$2;
+      }
+    }), _el$9, _co$);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return web.memo(() => !!shouldShow())() && props.hintText;
+      },
+      get children() {
+        var _el$5 = web.getNextElement(_tmpl$2);
+        web.insert(_el$5, () => props.hintText);
+        return _el$5;
+      }
+    }), _el$1, _co$2);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.isLoading;
+      },
+      get children() {
+        var _el$6 = web.getNextElement(_tmpl$3);
+        _el$6.firstChild;
+        return _el$6;
+      }
+    }), _el$11, _co$3);
+    web.effect(() => web.className(_el$, `mcp-ghost-text-container ${props.class || ""}`));
+    return _el$;
+  })();
+};
+const GhostTextInput = (props) => {
+  return (() => {
+    var _el$12 = web.getNextElement(_tmpl$5), _el$14 = _el$12.firstChild, [_el$15, _co$4] = web.getNextMarker(_el$14.nextSibling), _el$13 = _el$15.nextSibling;
+    web.insert(_el$12, web.createComponent(GhostText, {
+      get inputValue() {
+        return props.value;
+      },
+      get ghostText() {
+        return props.ghostText;
+      },
+      get visible() {
+        return props.showGhost;
+      },
+      get hintText() {
+        return props.hintText;
+      },
+      get isLoading() {
+        return props.isLoading;
+      }
+    }), _el$15, _co$4);
+    _el$13.$$keydown = (e) => {
+      var _a;
+      return (_a = props.onKeyDown) == null ? void 0 : _a.call(props, e);
+    };
+    _el$13.$$input = (e) => {
+      var _a;
+      return (_a = props.onInput) == null ? void 0 : _a.call(props, e.currentTarget.value);
+    };
+    web.spread(_el$13, web.mergeProps({
+      get type() {
+        return props.type || "text";
+      },
+      get id() {
+        return props.id;
+      },
+      get name() {
+        return props.name;
+      },
+      get value() {
+        return props.value;
+      },
+      get placeholder() {
+        return props.placeholder;
+      },
+      get disabled() {
+        return props.disabled;
+      },
+      get ["class"]() {
+        return `mcp-ghost-text-input ${props.class || ""}`;
+      }
+    }, () => props.inputProps || {}), false, false);
+    web.runHydrationEvents();
+    return _el$12;
+  })();
+};
+web.delegateEvents(["input", "keydown"]);
+exports.GhostText = GhostText;
+exports.GhostTextInput = GhostTextInput;
+exports.default = GhostText;
+//# sourceMappingURL=GhostText.cjs.map

package/dist/components/GhostText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GhostText.cjs","sources":["../../src/components/GhostText.tsx"],"sourcesContent":["/**\n * GhostText Component\n * Displays LLM-style ghost text completion overlay\n *\n * Sprint Autocomplete Feature\n */\n\nimport { Component, Show, JSX, createMemo } from 'solid-js'\n\n/**\n * Props for GhostText component\n */\nexport interface GhostTextProps {\n  /**\n   * Current input value\n   */\n  inputValue: string\n\n  /**\n   * Ghost text to show (the completion after input)\n   */\n  ghostText: string\n\n  /**\n   * Whether ghost text is visible\n   */\n  visible?: boolean\n\n  /**\n   * Custom class for the container\n   */\n  class?: string\n\n  /**\n   * Custom class for the ghost text\n   */\n  ghostClass?: string\n\n  /**\n   * Accept hint text (e.g., \"Tab to accept\")\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n}\n\n/**\n * GhostText Component\n * Overlays ghost text on an input field to show completion suggestions\n */\nexport const GhostText: Component<GhostTextProps> = (props) => {\n  const shouldShow = createMemo(() =>\n    props.visible !== false && props.ghostText && props.ghostText.length > 0\n  )\n\n  return (\n    <div\n      class={`mcp-ghost-text-container ${props.class || ''}`}\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '100%'\n      }}\n    >\n      {/* Ghost text overlay */}\n      <Show when={shouldShow()}>\n        <div\n          class=\"mcp-ghost-text-overlay\"\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            'pointer-events': 'none',\n            overflow: 'hidden',\n            'white-space': 'pre',\n            padding: 'inherit',\n            font: 'inherit',\n            'line-height': 'inherit',\n            'letter-spacing': 'inherit'\n          }}\n          aria-hidden=\"true\"\n        >\n          {/* Invisible placeholder for input text */}\n          <span style={{ visibility: 'hidden' }}>{props.inputValue}</span>\n          {/* Visible ghost text */}\n          <span\n            class={`mcp-ghost-text ${props.ghostClass || ''}`}\n            style={{\n              color: '#9ca3af',\n              opacity: '0.7'\n            }}\n          >\n            {props.ghostText}\n          </span>\n        </div>\n      </Show>\n\n      {/* Hint text */}\n      <Show when={shouldShow() && props.hintText}>\n        <div\n          class=\"mcp-ghost-text-hint\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)',\n            'font-size': '0.75rem',\n            color: '#6b7280',\n            'background-color': 'rgba(255, 255, 255, 0.9)',\n            padding: '2px 6px',\n            'border-radius': '4px',\n            'pointer-events': 'none'\n          }}\n        >\n          {props.hintText}\n        </div>\n      </Show>\n\n      {/* Loading indicator */}\n      <Show when={props.isLoading}>\n        <div\n          class=\"mcp-ghost-text-loading\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)'\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              width: '12px',\n              height: '12px',\n              border: '2px solid #e5e7eb',\n              'border-top-color': '#3b82f6',\n              'border-radius': '50%',\n              animation: 'mcp-spin 0.6s linear infinite'\n            }}\n          />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Input wrapper that includes ghost text functionality\n */\nexport interface GhostTextInputProps {\n  /**\n   * Current input value\n   */\n  value: string\n\n  /**\n   * Ghost text to show\n   */\n  ghostText: string\n\n  /**\n   * onChange handler\n   */\n  onInput?: (value: string) => void\n\n  /**\n   * onKeyDown handler\n   */\n  onKeyDown?: (e: KeyboardEvent) => void\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n\n  /**\n   * Input type\n   */\n  type?: 'text' | 'email' | 'search'\n\n  /**\n   * Whether input is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Input name\n   */\n  name?: string\n\n  /**\n   * Input ID\n   */\n  id?: string\n\n  /**\n   * Custom class for input\n   */\n  class?: string\n\n  /**\n   * Accept hint\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n\n  /**\n   * Whether ghost text is visible\n   */\n  showGhost?: boolean\n\n  /**\n   * Additional input attributes\n   */\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * GhostTextInput Component\n * Input field with integrated ghost text overlay\n */\nexport const GhostTextInput: Component<GhostTextInputProps> = (props) => {\n  return (\n    <div class=\"mcp-ghost-text-input-wrapper\" style={{ position: 'relative' }}>\n      <GhostText\n        inputValue={props.value}\n        ghostText={props.ghostText}\n        visible={props.showGhost}\n        hintText={props.hintText}\n        isLoading={props.isLoading}\n      />\n      <input\n        type={props.type || 'text'}\n        id={props.id}\n        name={props.name}\n        value={props.value}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        class={`mcp-ghost-text-input ${props.class || ''}`}\n        style={{\n          position: 'relative',\n          'background-color': 'transparent',\n          'caret-color': 'inherit'\n        }}\n        onInput={(e) => props.onInput?.(e.currentTarget.value)}\n        onKeyDown={(e) => props.onKeyDown?.(e)}\n        {...(props.inputProps || {})}\n      />\n    </div>\n  )\n}\n\nexport default GhostText\n"],"names":["GhostText","props","shouldShow","createMemo","visible","ghostText","length","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$","_el$3","_el$4","inputValue","_$effect","_$className","ghostClass","_$memo","hintText","_el$5","_tmpl$2","isLoading","_el$6","_tmpl$3","class","GhostTextInput","_el$12","_tmpl$5","_el$14","_el$15","_co$4","_el$13","value","showGhost","$$keydown","e","onKeyDown","$$input","onInput","currentTarget","_$spread","_$mergeProps","type","id","name","placeholder","disabled","inputProps","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}

package/dist/components/GhostText.d.ts

@@ -0,0 +1,113 @@
+/**
+ * GhostText Component
+ * Displays LLM-style ghost text completion overlay
+ *
+ * Sprint Autocomplete Feature
+ */
+import { Component, JSX } from 'solid-js';
+/**
+ * Props for GhostText component
+ */
+export interface GhostTextProps {
+    /**
+     * Current input value
+     */
+    inputValue: string;
+    /**
+     * Ghost text to show (the completion after input)
+     */
+    ghostText: string;
+    /**
+     * Whether ghost text is visible
+     */
+    visible?: boolean;
+    /**
+     * Custom class for the container
+     */
+    class?: string;
+    /**
+     * Custom class for the ghost text
+     */
+    ghostClass?: string;
+    /**
+     * Accept hint text (e.g., "Tab to accept")
+     */
+    hintText?: string;
+    /**
+     * Whether loading
+     */
+    isLoading?: boolean;
+}
+/**
+ * GhostText Component
+ * Overlays ghost text on an input field to show completion suggestions
+ */
+export declare const GhostText: Component<GhostTextProps>;
+/**
+ * Input wrapper that includes ghost text functionality
+ */
+export interface GhostTextInputProps {
+    /**
+     * Current input value
+     */
+    value: string;
+    /**
+     * Ghost text to show
+     */
+    ghostText: string;
+    /**
+     * onChange handler
+     */
+    onInput?: (value: string) => void;
+    /**
+     * onKeyDown handler
+     */
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Input type
+     */
+    type?: 'text' | 'email' | 'search';
+    /**
+     * Whether input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * Input ID
+     */
+    id?: string;
+    /**
+     * Custom class for input
+     */
+    class?: string;
+    /**
+     * Accept hint
+     */
+    hintText?: string;
+    /**
+     * Whether loading
+     */
+    isLoading?: boolean;
+    /**
+     * Whether ghost text is visible
+     */
+    showGhost?: boolean;
+    /**
+     * Additional input attributes
+     */
+    inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * GhostTextInput Component
+ * Input field with integrated ghost text overlay
+ */
+export declare const GhostTextInput: Component<GhostTextInputProps>;
+export default GhostText;
+//# sourceMappingURL=GhostText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GhostText.d.ts","sourceRoot":"","sources":["../../src/components/GhostText.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAQ,GAAG,EAAc,MAAM,UAAU,CAAA;AAE3D;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,cAAc,CAgG/C,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAElC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;CACvD;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CA6BzD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/components/GhostText.js

@@ -0,0 +1,105 @@
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, className, memo, spread, mergeProps, runHydrationEvents } from "solid-js/web";
+import { createMemo, Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=mcp-ghost-text-overlay aria-hidden=true style=position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;white-space:pre;padding:inherit;font:inherit;line-height:inherit;letter-spacing:inherit><span style=visibility:hidden></span><span style=color:#9ca3af;opacity:0.7>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-hint style="position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:0.75rem;color:#6b7280;background-color:rgba(255, 255, 255, 0.9);padding:2px 6px;border-radius:4px;pointer-events:none">`), _tmpl$3 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-loading style=position:absolute;right:8px;top:50%;transform:translateY(-50%)><span style="display:inline-block;width:12px;height:12px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite">`), _tmpl$4 = /* @__PURE__ */ template(`<div style=position:relative;display:inline-block;width:100%><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<div class=mcp-ghost-text-input-wrapper style=position:relative><!$><!/><input style=position:relative;background-color:transparent;caret-color:inherit>`);
+const GhostText = (props) => {
+  const shouldShow = createMemo(() => props.visible !== false && props.ghostText && props.ghostText.length > 0);
+  return (() => {
+    var _el$ = getNextElement(_tmpl$4), _el$8 = _el$.firstChild, [_el$9, _co$] = getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$3] = getNextMarker(_el$10.nextSibling);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return shouldShow();
+      },
+      get children() {
+        var _el$2 = getNextElement(_tmpl$), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        insert(_el$3, () => props.inputValue);
+        insert(_el$4, () => props.ghostText);
+        effect(() => className(_el$4, `mcp-ghost-text ${props.ghostClass || ""}`));
+        return _el$2;
+      }
+    }), _el$9, _co$);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!shouldShow())() && props.hintText;
+      },
+      get children() {
+        var _el$5 = getNextElement(_tmpl$2);
+        insert(_el$5, () => props.hintText);
+        return _el$5;
+      }
+    }), _el$1, _co$2);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.isLoading;
+      },
+      get children() {
+        var _el$6 = getNextElement(_tmpl$3);
+        _el$6.firstChild;
+        return _el$6;
+      }
+    }), _el$11, _co$3);
+    effect(() => className(_el$, `mcp-ghost-text-container ${props.class || ""}`));
+    return _el$;
+  })();
+};
+const GhostTextInput = (props) => {
+  return (() => {
+    var _el$12 = getNextElement(_tmpl$5), _el$14 = _el$12.firstChild, [_el$15, _co$4] = getNextMarker(_el$14.nextSibling), _el$13 = _el$15.nextSibling;
+    insert(_el$12, createComponent(GhostText, {
+      get inputValue() {
+        return props.value;
+      },
+      get ghostText() {
+        return props.ghostText;
+      },
+      get visible() {
+        return props.showGhost;
+      },
+      get hintText() {
+        return props.hintText;
+      },
+      get isLoading() {
+        return props.isLoading;
+      }
+    }), _el$15, _co$4);
+    _el$13.$$keydown = (e) => {
+      var _a;
+      return (_a = props.onKeyDown) == null ? void 0 : _a.call(props, e);
+    };
+    _el$13.$$input = (e) => {
+      var _a;
+      return (_a = props.onInput) == null ? void 0 : _a.call(props, e.currentTarget.value);
+    };
+    spread(_el$13, mergeProps({
+      get type() {
+        return props.type || "text";
+      },
+      get id() {
+        return props.id;
+      },
+      get name() {
+        return props.name;
+      },
+      get value() {
+        return props.value;
+      },
+      get placeholder() {
+        return props.placeholder;
+      },
+      get disabled() {
+        return props.disabled;
+      },
+      get ["class"]() {
+        return `mcp-ghost-text-input ${props.class || ""}`;
+      }
+    }, () => props.inputProps || {}), false, false);
+    runHydrationEvents();
+    return _el$12;
+  })();
+};
+delegateEvents(["input", "keydown"]);
+export {
+  GhostText,
+  GhostTextInput,
+  GhostText as default
+};
+//# sourceMappingURL=GhostText.js.map

package/dist/components/GhostText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GhostText.js","sources":["../../src/components/GhostText.tsx"],"sourcesContent":["/**\n * GhostText Component\n * Displays LLM-style ghost text completion overlay\n *\n * Sprint Autocomplete Feature\n */\n\nimport { Component, Show, JSX, createMemo } from 'solid-js'\n\n/**\n * Props for GhostText component\n */\nexport interface GhostTextProps {\n  /**\n   * Current input value\n   */\n  inputValue: string\n\n  /**\n   * Ghost text to show (the completion after input)\n   */\n  ghostText: string\n\n  /**\n   * Whether ghost text is visible\n   */\n  visible?: boolean\n\n  /**\n   * Custom class for the container\n   */\n  class?: string\n\n  /**\n   * Custom class for the ghost text\n   */\n  ghostClass?: string\n\n  /**\n   * Accept hint text (e.g., \"Tab to accept\")\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n}\n\n/**\n * GhostText Component\n * Overlays ghost text on an input field to show completion suggestions\n */\nexport const GhostText: Component<GhostTextProps> = (props) => {\n  const shouldShow = createMemo(() =>\n    props.visible !== false && props.ghostText && props.ghostText.length > 0\n  )\n\n  return (\n    <div\n      class={`mcp-ghost-text-container ${props.class || ''}`}\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '100%'\n      }}\n    >\n      {/* Ghost text overlay */}\n      <Show when={shouldShow()}>\n        <div\n          class=\"mcp-ghost-text-overlay\"\n          style={{\n            position: 'absolute',\n            top: '0',\n            left: '0',\n            right: '0',\n            bottom: '0',\n            'pointer-events': 'none',\n            overflow: 'hidden',\n            'white-space': 'pre',\n            padding: 'inherit',\n            font: 'inherit',\n            'line-height': 'inherit',\n            'letter-spacing': 'inherit'\n          }}\n          aria-hidden=\"true\"\n        >\n          {/* Invisible placeholder for input text */}\n          <span style={{ visibility: 'hidden' }}>{props.inputValue}</span>\n          {/* Visible ghost text */}\n          <span\n            class={`mcp-ghost-text ${props.ghostClass || ''}`}\n            style={{\n              color: '#9ca3af',\n              opacity: '0.7'\n            }}\n          >\n            {props.ghostText}\n          </span>\n        </div>\n      </Show>\n\n      {/* Hint text */}\n      <Show when={shouldShow() && props.hintText}>\n        <div\n          class=\"mcp-ghost-text-hint\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)',\n            'font-size': '0.75rem',\n            color: '#6b7280',\n            'background-color': 'rgba(255, 255, 255, 0.9)',\n            padding: '2px 6px',\n            'border-radius': '4px',\n            'pointer-events': 'none'\n          }}\n        >\n          {props.hintText}\n        </div>\n      </Show>\n\n      {/* Loading indicator */}\n      <Show when={props.isLoading}>\n        <div\n          class=\"mcp-ghost-text-loading\"\n          style={{\n            position: 'absolute',\n            right: '8px',\n            top: '50%',\n            transform: 'translateY(-50%)'\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              width: '12px',\n              height: '12px',\n              border: '2px solid #e5e7eb',\n              'border-top-color': '#3b82f6',\n              'border-radius': '50%',\n              animation: 'mcp-spin 0.6s linear infinite'\n            }}\n          />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n/**\n * Input wrapper that includes ghost text functionality\n */\nexport interface GhostTextInputProps {\n  /**\n   * Current input value\n   */\n  value: string\n\n  /**\n   * Ghost text to show\n   */\n  ghostText: string\n\n  /**\n   * onChange handler\n   */\n  onInput?: (value: string) => void\n\n  /**\n   * onKeyDown handler\n   */\n  onKeyDown?: (e: KeyboardEvent) => void\n\n  /**\n   * Placeholder text\n   */\n  placeholder?: string\n\n  /**\n   * Input type\n   */\n  type?: 'text' | 'email' | 'search'\n\n  /**\n   * Whether input is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Input name\n   */\n  name?: string\n\n  /**\n   * Input ID\n   */\n  id?: string\n\n  /**\n   * Custom class for input\n   */\n  class?: string\n\n  /**\n   * Accept hint\n   */\n  hintText?: string\n\n  /**\n   * Whether loading\n   */\n  isLoading?: boolean\n\n  /**\n   * Whether ghost text is visible\n   */\n  showGhost?: boolean\n\n  /**\n   * Additional input attributes\n   */\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * GhostTextInput Component\n * Input field with integrated ghost text overlay\n */\nexport const GhostTextInput: Component<GhostTextInputProps> = (props) => {\n  return (\n    <div class=\"mcp-ghost-text-input-wrapper\" style={{ position: 'relative' }}>\n      <GhostText\n        inputValue={props.value}\n        ghostText={props.ghostText}\n        visible={props.showGhost}\n        hintText={props.hintText}\n        isLoading={props.isLoading}\n      />\n      <input\n        type={props.type || 'text'}\n        id={props.id}\n        name={props.name}\n        value={props.value}\n        placeholder={props.placeholder}\n        disabled={props.disabled}\n        class={`mcp-ghost-text-input ${props.class || ''}`}\n        style={{\n          position: 'relative',\n          'background-color': 'transparent',\n          'caret-color': 'inherit'\n        }}\n        onInput={(e) => props.onInput?.(e.currentTarget.value)}\n        onKeyDown={(e) => props.onKeyDown?.(e)}\n        {...(props.inputProps || {})}\n      />\n    </div>\n  )\n}\n\nexport default GhostText\n"],"names":["GhostText","props","shouldShow","createMemo","visible","ghostText","length","_el$","_$getNextElement","_tmpl$4","_el$8","firstChild","_el$9","_co$","_$getNextMarker","nextSibling","_el$0","_el$1","_co$2","_el$10","_el$11","_co$3","_$insert","_$createComponent","Show","when","children","_el$2","_tmpl$","_el$3","_el$4","inputValue","_$effect","_$className","ghostClass","_$memo","hintText","_el$5","_tmpl$2","isLoading","_el$6","_tmpl$3","class","GhostTextInput","_el$12","_tmpl$5","_el$14","_el$15","_co$4","_el$13","value","showGhost","$$keydown","e","onKeyDown","$$input","onInput","currentTarget","_$spread","_$mergeProps","type","id","name","placeholder","disabled","inputProps","_$runHydrationEvents","_$delegateEvents"],"mappings":"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"}

package/dist/components/ResizeHandle.cjs

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div role=separator><div class=mcp-resize-indicator>`);
+function getCursor(edge) {
+  switch (edge) {
+    case "left":
+    case "right":
+      return "ew-resize";
+    case "top":
+    case "bottom":
+      return "ns-resize";
+    default:
+      return "default";
+  }
+}
+function getPositionStyle(edge, hitAreaSize) {
+  const halfSize = hitAreaSize / 2;
+  switch (edge) {
+    case "left":
+      return {
+        left: `-${halfSize}px`,
+        top: "0",
+        width: `${hitAreaSize}px`,
+        height: "100%"
+      };
+    case "right":
+      return {
+        right: `-${halfSize}px`,
+        top: "0",
+        width: `${hitAreaSize}px`,
+        height: "100%"
+      };
+    case "top":
+      return {
+        top: `-${halfSize}px`,
+        left: "0",
+        width: "100%",
+        height: `${hitAreaSize}px`
+      };
+    case "bottom":
+      return {
+        bottom: `-${halfSize}px`,
+        left: "0",
+        width: "100%",
+        height: `${hitAreaSize}px`
+      };
+    default:
+      return {};
+  }
+}
+function getIndicatorStyle(edge, size, isActive) {
+  const baseColor = isActive ? "#3b82f6" : "#9ca3af";
+  const common = {
+    position: "absolute",
+    "background-color": baseColor,
+    "border-radius": `${size / 2}px`,
+    transition: "background-color 150ms ease, opacity 150ms ease",
+    opacity: isActive ? "1" : "0"
+  };
+  switch (edge) {
+    case "left":
+      return {
+        ...common,
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        width: `${size}px`,
+        height: "40px",
+        "max-height": "60%"
+      };
+    case "right":
+      return {
+        ...common,
+        right: "50%",
+        top: "50%",
+        transform: "translate(50%, -50%)",
+        width: `${size}px`,
+        height: "40px",
+        "max-height": "60%"
+      };
+    case "top":
+      return {
+        ...common,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "40px",
+        "max-width": "60%",
+        height: `${size}px`
+      };
+    case "bottom":
+      return {
+        ...common,
+        bottom: "50%",
+        left: "50%",
+        transform: "translate(-50%, 50%)",
+        width: "40px",
+        "max-width": "60%",
+        height: `${size}px`
+      };
+    default:
+      return common;
+  }
+}
+const ResizeHandle = (props) => {
+  const merged = solidJs.mergeProps({
+    disabled: false,
+    isActive: false,
+    size: 4,
+    hitAreaSize: 12
+  }, props);
+  const handlePointerDown = (e) => {
+    var _a;
+    if (merged.disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+  };
+  const containerStyle = solidJs.createMemo(() => ({
+    position: "absolute",
+    "z-index": "10",
+    cursor: merged.disabled ? "default" : getCursor(props.edge),
+    "user-select": "none",
+    "touch-action": "none",
+    ...getPositionStyle(props.edge, merged.hitAreaSize)
+  }));
+  const indicatorStyle = solidJs.createMemo(() => getIndicatorStyle(props.edge, merged.size, merged.isActive));
+  const classNames = solidJs.createMemo(() => {
+    const classes = ["mcp-resize-handle", `mcp-resize-handle-${props.edge}`];
+    if (merged.disabled) classes.push("mcp-resize-handle-disabled");
+    if (merged.isActive) classes.push("mcp-resize-handle-active");
+    if (props.class) classes.push(props.class);
+    return classes.join(" ");
+  });
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild;
+    _el$.$$keydown = (e) => {
+      var _a;
+      if (merged.disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        (_a = props.onResizeStart) == null ? void 0 : _a.call(props, props.edge);
+      }
+    };
+    _el$.$$pointerdown = handlePointerDown;
+    web.setAttribute(_el$, "aria-valuenow", void 0);
+    web.effect((_p$) => {
+      var _v$ = classNames(), _v$2 = containerStyle(), _v$3 = props.edge, _v$4 = props.edge === "left" || props.edge === "right" ? "vertical" : "horizontal", _v$5 = merged.disabled ? -1 : 0, _v$6 = indicatorStyle();
+      _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
+      _p$.t = web.style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && web.setAttribute(_el$, "data-resize-edge", _p$.a = _v$3);
+      _v$4 !== _p$.o && web.setAttribute(_el$, "aria-orientation", _p$.o = _v$4);
+      _v$5 !== _p$.i && web.setAttribute(_el$, "tabindex", _p$.i = _v$5);
+      _p$.n = web.style(_el$2, _v$6, _p$.n);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    web.runHydrationEvents();
+    return _el$;
+  })();
+};
+web.delegateEvents(["pointerdown", "keydown"]);
+exports.ResizeHandle = ResizeHandle;
+exports.default = ResizeHandle;
+//# sourceMappingURL=ResizeHandle.cjs.map

package/dist/components/ResizeHandle.cjs.map

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