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

package/src/components/DraggableGridItem.tsx

@@ -0,0 +1,274 @@
+/**
+ * DraggableGridItem Component
+ * Wrapper for grid items that enables drag-and-drop reordering and resizing
+ *
+ * Sprint Drag-Drop Feature
+ */
+
+import { Component, JSX, Show, createMemo, mergeProps } from 'solid-js'
+import type { GridPosition, ResizeConstraints } from '../types'
+import { ResizeHandle } from './ResizeHandle'
+
+/**
+ * Props for DraggableGridItem
+ */
+export interface DraggableGridItemProps {
+  /**
+   * Component ID
+   */
+  id: string
+
+  /**
+   * Grid position
+   */
+  position: GridPosition
+
+  /**
+   * Whether dragging is enabled
+   */
+  draggable?: boolean
+
+  /**
+   * Whether resizing is enabled
+   */
+  resizable?: boolean
+
+  /**
+   * Resize constraints
+   */
+  constraints?: ResizeConstraints
+
+  /**
+   * Whether this item is currently being dragged
+   */
+  isDragging?: boolean
+
+  /**
+   * Whether this item is a drop target
+   */
+  isDropTarget?: boolean
+
+  /**
+   * Preview position during resize
+   */
+  previewPosition?: GridPosition | null
+
+  /**
+   * Drag props from useDragDrop
+   */
+  dragProps?: {
+    draggable: boolean
+    onDragStart: (e: DragEvent) => void
+    onDragOver: (e: DragEvent) => void
+    onDragEnter: (e: DragEvent) => void
+    onDragLeave: (e: DragEvent) => void
+    onDrop: (e: DragEvent) => void
+    onDragEnd: (e: DragEvent) => void
+  }
+
+  /**
+   * Callback when resize starts
+   */
+  onResizeStart?: (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => void
+
+  /**
+   * Callback for resize preview
+   */
+  onResizePreview?: (position: GridPosition) => void
+
+  /**
+   * Callback when resize completes
+   */
+  onResize?: (position: GridPosition) => void
+
+  /**
+   * Whether resize is in progress
+   */
+  isResizing?: boolean
+
+  /**
+   * Show grid overlay during drag/resize
+   */
+  showGridOverlay?: boolean
+
+  /**
+   * Custom CSS class
+   */
+  class?: string
+
+  /**
+   * Custom styles
+   */
+  style?: JSX.CSSProperties
+
+  /**
+   * Children to render
+   */
+  children?: JSX.Element
+}
+
+/**
+ * Generate CSS Grid style string from position
+ */
+function getGridStyle(position: GridPosition): JSX.CSSProperties {
+  return {
+    'grid-column': `${position.colStart} / span ${position.colSpan}`,
+    'grid-row': position.rowStart
+      ? `${position.rowStart} / span ${position.rowSpan || 1}`
+      : undefined
+  }
+}
+
+/**
+ * DraggableGridItem Component
+ */
+export const DraggableGridItem: Component<DraggableGridItemProps> = (props) => {
+  const merged = mergeProps(
+    {
+      draggable: false,
+      resizable: false,
+      isDragging: false,
+      isDropTarget: false,
+      isResizing: false,
+      showGridOverlay: false
+    },
+    props
+  )
+
+  // Use preview position during resize if available
+  const effectivePosition = createMemo(() =>
+    merged.previewPosition || props.position
+  )
+
+  // Compute grid style
+  const gridStyle = createMemo(() => getGridStyle(effectivePosition()))
+
+  // Compute combined style
+  const combinedStyle = createMemo((): JSX.CSSProperties => {
+    const base: JSX.CSSProperties = {
+      ...gridStyle(),
+      position: 'relative',
+      transition: merged.isResizing ? 'none' : 'all 200ms ease-out'
+    }
+
+    // Add drag/drop visual feedback
+    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'
+    }
+
+    // Merge with custom styles
+    if (props.style) {
+      Object.assign(base, props.style)
+    }
+
+    return base
+  })
+
+  // Build class names
+  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(' ')
+  })
+
+  // Handle resize start
+  const handleResizeStart = (edge: 'left' | 'right' | 'top' | 'bottom', event: PointerEvent) => {
+    props.onResizeStart?.(edge, event)
+  }
+
+  return (
+    <div
+      class={classNames()}
+      style={combinedStyle()}
+      data-component-id={props.id}
+      {...(merged.draggable && props.dragProps ? props.dragProps : {})}
+    >
+      {/* Drag handle indicator */}
+      <Show when={merged.draggable && !merged.isResizing}>
+        <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'
+          }}
+        />
+      </Show>
+
+      {/* Resize handles */}
+      <Show when={merged.resizable && !merged.isDragging}>
+        <ResizeHandle
+          edge="left"
+          onResizeStart={handleResizeStart}
+          disabled={merged.constraints?.lockHorizontal}
+        />
+        <ResizeHandle
+          edge="right"
+          onResizeStart={handleResizeStart}
+          disabled={merged.constraints?.lockHorizontal}
+        />
+        <ResizeHandle
+          edge="top"
+          onResizeStart={handleResizeStart}
+          disabled={merged.constraints?.lockVertical}
+        />
+        <ResizeHandle
+          edge="bottom"
+          onResizeStart={handleResizeStart}
+          disabled={merged.constraints?.lockVertical}
+        />
+      </Show>
+
+      {/* Drop indicator line */}
+      <Show when={merged.isDropTarget && !merged.isDragging}>
+        <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'
+          }}
+        />
+      </Show>
+
+      {/* Content */}
+      <div class="mcp-grid-item-content" style={{ position: 'relative', 'z-index': '1' }}>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default DraggableGridItem

package/src/components/EditableUIResourceRenderer.tsx

@@ -0,0 +1,268 @@
+/**
+ * EditableUIResourceRenderer Component
+ * Extends UIResourceRenderer with drag-and-drop reordering and resizing capabilities
+ *
+ * Sprint Drag-Drop Feature
+ */
+
+import {
+  Component,
+  For,
+  Show,
+  createSignal,
+  createMemo,
+  createEffect,
+  on,
+  JSX
+} from 'solid-js'
+import type {
+  UIComponent,
+  UILayout,
+  RendererError,
+  GridPosition,
+  DragDropConfig
+} from '../types'
+import { useDragDrop } from '../hooks/useDragDrop'
+import { useResize, ResizeEdge } from '../hooks/useResize'
+import { DraggableGridItem } from './DraggableGridItem'
+import { UIResourceRenderer } from './UIResourceRenderer'
+
+/**
+ * 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
+}
+
+/**
+ * Grid overlay component for visual feedback
+ */
+const GridOverlay: Component<{ columns: number; visible: boolean }> = (props) => {
+  return (
+    <Show when={props.visible}>
+      <div
+        class="mcp-grid-overlay"
+        style={{
+          position: 'absolute',
+          inset: '0',
+          display: 'grid',
+          'grid-template-columns': `repeat(${props.columns}, 1fr)`,
+          gap: '1rem',
+          padding: '0',
+          'pointer-events': 'none',
+          'z-index': '0'
+        }}
+      >
+        <For each={Array(props.columns).fill(0)}>
+          {() => (
+            <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'
+              }}
+            />
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}
+
+/**
+ * EditableUIResourceRenderer Component
+ */
+export const EditableUIResourceRenderer: Component<EditableUIResourceRendererProps> = (props) => {
+  // Internal state for components (allows editing)
+  const [components, setComponents] = createSignal<UIComponent[]>(props.layout.components)
+  const [activeResizeId, setActiveResizeId] = createSignal<string | null>(null)
+  const [previewPositions, setPreviewPositions] = createSignal<Map<string, GridPosition>>(new Map())
+  const [gridContainerRef, setGridContainerRef] = createSignal<HTMLElement | null>(null)
+
+  // Sync with external layout changes
+  createEffect(on(() => props.layout.components, (newComponents) => {
+    setComponents(newComponents)
+  }))
+
+  // Drag-drop configuration
+  const dragDropConfig = createMemo(() => ({
+    enabled: props.dragDrop?.enabled ?? false,
+    reorder: props.dragDrop?.reorder ?? true,
+    resize: props.dragDrop?.resize ?? true,
+    constraints: props.dragDrop?.constraints ?? {},
+    showGridLines: props.dragDrop?.showGridLines ?? true,
+    animationDuration: props.dragDrop?.animationDuration ?? 200
+  }))
+
+  // Handle reorder from drag-drop
+  const handleReorder = (newComponents: UIComponent[]) => {
+    setComponents(newComponents)
+
+    const newLayout: UILayout = {
+      ...props.layout,
+      components: newComponents
+    }
+
+    props.dragDrop?.onReorder?.(newComponents)
+    props.dragDrop?.onChange?.(newLayout)
+    props.onLayoutChange?.(newLayout)
+  }
+
+  // Handle resize completion
+  const handleResize = (componentId: string, newPosition: GridPosition) => {
+    const updatedComponents = components().map(c =>
+      c.id === componentId ? { ...c, position: newPosition } : c
+    )
+
+    setComponents(updatedComponents)
+    setActiveResizeId(null)
+    setPreviewPositions(new Map())
+
+    const newLayout: UILayout = {
+      ...props.layout,
+      components: updatedComponents
+    }
+
+    props.dragDrop?.onResize?.(componentId, newPosition)
+    props.dragDrop?.onChange?.(newLayout)
+    props.onLayoutChange?.(newLayout)
+  }
+
+  // Handle resize preview
+  const handleResizePreview = (componentId: string, previewPosition: GridPosition) => {
+    setPreviewPositions(prev => {
+      const next = new Map(prev)
+      next.set(componentId, previewPosition)
+      return next
+    })
+  }
+
+  // Initialize drag-drop hook
+  const dragDrop = useDragDrop({
+    components,
+    onReorder: handleReorder,
+    enabled: dragDropConfig().enabled && dragDropConfig().reorder
+  })
+
+  // Grid container style
+  const gridContainerStyle = createMemo((): JSX.CSSProperties => ({
+    display: 'grid',
+    'grid-template-columns': `repeat(${props.layout.grid.columns}, 1fr)`,
+    gap: props.layout.grid.gap,
+    position: 'relative'
+  }))
+
+  // Check if we should show grid overlay
+  const showOverlay = createMemo(() =>
+    dragDropConfig().showGridLines && (dragDrop.isDragging() || activeResizeId() !== null)
+  )
+
+  // Get effective position for a component (preview if resizing, otherwise actual)
+  const getEffectivePosition = (component: UIComponent): GridPosition => {
+    const preview = previewPositions().get(component.id)
+    return preview || component.position
+  }
+
+  // If drag-drop is not enabled, just render the standard UIResourceRenderer
+  if (!props.dragDrop?.enabled) {
+    return (
+      <UIResourceRenderer
+        content={props.layout}
+        onError={props.onError}
+        class={props.class}
+      />
+    )
+  }
+
+  return (
+    <div class={`w-full editable-ui-renderer ${props.class || ''}`}>
+      <div
+        ref={setGridContainerRef}
+        class="grid relative"
+        style={gridContainerStyle()}
+        data-grid-container
+      >
+        {/* Grid overlay */}
+        <GridOverlay
+          columns={props.layout.grid.columns}
+          visible={showOverlay()}
+        />
+
+        {/* Render components with drag-drop wrappers */}
+        <For each={components()}>
+          {(component) => {
+            // Create resize hook for each 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 (
+              <DraggableGridItem
+                id={component.id}
+                position={effectivePosition()}
+                draggable={dragDropConfig().enabled && dragDropConfig().reorder}
+                resizable={dragDropConfig().enabled && dragDropConfig().resize}
+                constraints={dragDropConfig().constraints}
+                isDragging={dragDrop.isComponentDragging(component.id)}
+                isDropTarget={dragDrop.isDropTarget(component.id)}
+                isResizing={activeResizeId() === component.id}
+                previewPosition={previewPositions().get(component.id) || null}
+                dragProps={dragDrop.getDragProps(component.id)}
+                onResizeStart={(edge, event) => {
+                  setActiveResizeId(component.id)
+                  resize.handleResizeStart(event, edge as ResizeEdge)
+                }}
+              >
+                {/* Render component using UIResourceRenderer for single component */}
+                <UIResourceRenderer
+                  content={component}
+                  onError={props.onError}
+                />
+              </DraggableGridItem>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export default EditableUIResourceRenderer