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

package/src/components/GhostText.tsx

@@ -0,0 +1,262 @@
+/**
+ * GhostText Component
+ * Displays LLM-style ghost text completion overlay
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import { Component, Show, JSX, createMemo } 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 const GhostText: Component<GhostTextProps> = (props) => {
+  const shouldShow = createMemo(() =>
+    props.visible !== false && props.ghostText && props.ghostText.length > 0
+  )
+
+  return (
+    <div
+      class={`mcp-ghost-text-container ${props.class || ''}`}
+      style={{
+        position: 'relative',
+        display: 'inline-block',
+        width: '100%'
+      }}
+    >
+      {/* Ghost text overlay */}
+      <Show when={shouldShow()}>
+        <div
+          class="mcp-ghost-text-overlay"
+          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'
+          }}
+          aria-hidden="true"
+        >
+          {/* Invisible placeholder for input text */}
+          <span style={{ visibility: 'hidden' }}>{props.inputValue}</span>
+          {/* Visible ghost text */}
+          <span
+            class={`mcp-ghost-text ${props.ghostClass || ''}`}
+            style={{
+              color: '#9ca3af',
+              opacity: '0.7'
+            }}
+          >
+            {props.ghostText}
+          </span>
+        </div>
+      </Show>
+
+      {/* Hint text */}
+      <Show when={shouldShow() && props.hintText}>
+        <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'
+          }}
+        >
+          {props.hintText}
+        </div>
+      </Show>
+
+      {/* Loading indicator */}
+      <Show when={props.isLoading}>
+        <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'
+            }}
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * 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 const GhostTextInput: Component<GhostTextInputProps> = (props) => {
+  return (
+    <div class="mcp-ghost-text-input-wrapper" style={{ position: 'relative' }}>
+      <GhostText
+        inputValue={props.value}
+        ghostText={props.ghostText}
+        visible={props.showGhost}
+        hintText={props.hintText}
+        isLoading={props.isLoading}
+      />
+      <input
+        type={props.type || 'text'}
+        id={props.id}
+        name={props.name}
+        value={props.value}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        class={`mcp-ghost-text-input ${props.class || ''}`}
+        style={{
+          position: 'relative',
+          'background-color': 'transparent',
+          'caret-color': 'inherit'
+        }}
+        onInput={(e) => props.onInput?.(e.currentTarget.value)}
+        onKeyDown={(e) => props.onKeyDown?.(e)}
+        {...(props.inputProps || {})}
+      />
+    </div>
+  )
+}
+
+export default GhostText

package/src/components/ResizeHandle.tsx

@@ -0,0 +1,262 @@
+/**
+ * ResizeHandle Component
+ * Visual handle for resizing grid components
+ *
+ * Sprint Drag-Drop Feature
+ */
+
+import { Component, JSX, createMemo, mergeProps } from 'solid-js'
+
+/**
+ * Resize edge types
+ */
+export type ResizeEdge = 'left' | 'right' | 'top' | 'bottom'
+
+/**
+ * Props for ResizeHandle
+ */
+export interface ResizeHandleProps {
+  /**
+   * Which edge this handle is on
+   */
+  edge: ResizeEdge
+
+  /**
+   * Callback when resize starts
+   */
+  onResizeStart?: (edge: ResizeEdge) => void
+
+  /**
+   * Whether the handle is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Whether resize is active
+   */
+  isActive?: boolean
+
+  /**
+   * Custom class
+   */
+  class?: string
+
+  /**
+   * Handle size in pixels
+   */
+  size?: number
+
+  /**
+   * Hit area size in pixels (larger than visible size for easier grabbing)
+   */
+  hitAreaSize?: number
+}
+
+/**
+ * Get cursor style for edge
+ */
+function getCursor(edge: ResizeEdge): string {
+  switch (edge) {
+    case 'left':
+    case 'right':
+      return 'ew-resize'
+    case 'top':
+    case 'bottom':
+      return 'ns-resize'
+    default:
+      return 'default'
+  }
+}
+
+/**
+ * Get position styles for edge
+ */
+function getPositionStyle(
+  edge: ResizeEdge,
+  hitAreaSize: number
+): JSX.CSSProperties {
+  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 {}
+  }
+}
+
+/**
+ * Get visual indicator styles for edge
+ */
+function getIndicatorStyle(
+  edge: ResizeEdge,
+  size: number,
+  isActive: boolean
+): JSX.CSSProperties {
+  const baseColor = isActive ? '#3b82f6' : '#9ca3af'
+
+  const common: JSX.CSSProperties = {
+    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
+  }
+}
+
+/**
+ * ResizeHandle Component
+ */
+export const ResizeHandle: Component<ResizeHandleProps> = (props) => {
+  const merged = mergeProps(
+    {
+      disabled: false,
+      isActive: false,
+      size: 4,
+      hitAreaSize: 12
+    },
+    props
+  )
+
+  const handlePointerDown = (e: PointerEvent) => {
+    if (merged.disabled) return
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    props.onResizeStart?.(props.edge)
+  }
+
+  // Container styles
+  const containerStyle = createMemo((): JSX.CSSProperties => ({
+    position: 'absolute',
+    'z-index': '10',
+    cursor: merged.disabled ? 'default' : getCursor(props.edge),
+    'user-select': 'none',
+    'touch-action': 'none',
+    ...getPositionStyle(props.edge, merged.hitAreaSize)
+  }))
+
+  // Indicator styles
+  const indicatorStyle = createMemo(() =>
+    getIndicatorStyle(props.edge, merged.size, merged.isActive)
+  )
+
+  // Class names
+  const classNames = 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 (
+    <div
+      class={classNames()}
+      style={containerStyle()}
+      onPointerDown={handlePointerDown}
+      data-resize-edge={props.edge}
+      role="separator"
+      aria-orientation={
+        props.edge === 'left' || props.edge === 'right'
+          ? 'vertical'
+          : 'horizontal'
+      }
+      aria-valuenow={undefined}
+      tabIndex={merged.disabled ? -1 : 0}
+      onKeyDown={(e) => {
+        // Allow keyboard resizing
+        if (merged.disabled) return
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          props.onResizeStart?.(props.edge)
+        }
+      }}
+    >
+      {/* Visual indicator */}
+      <div
+        class="mcp-resize-indicator"
+        style={indicatorStyle()}
+      />
+    </div>
+  )
+}
+
+export default ResizeHandle