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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,46 +8,117 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "solid": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./components": {
-      "types": "./dist/components.d.ts",
       "solid": "./src/components/index.ts",
-      "import": "./dist/components.js",
-      "require": "./dist/components.cjs"
+      "import": {
+        "types": "./dist/components.d.ts",
+        "default": "./dist/components.js"
+      },
+      "require": {
+        "types": "./dist/components.d.cts",
+        "default": "./dist/components.cjs"
+      }
     },
     "./hooks": {
-      "types": "./dist/hooks.d.ts",
       "solid": "./src/hooks/index.ts",
-      "import": "./dist/hooks.js",
-      "require": "./dist/hooks.cjs"
+      "import": {
+        "types": "./dist/hooks.d.ts",
+        "default": "./dist/hooks.js"
+      },
+      "require": {
+        "types": "./dist/hooks.d.cts",
+        "default": "./dist/hooks.cjs"
+      }
     },
     "./types": {
-      "types": "./dist/types.d.ts",
       "solid": "./src/types/index.ts",
-      "import": "./dist/types.js",
-      "require": "./dist/types.cjs"
+      "import": {
+        "types": "./dist/types.d.ts",
+        "default": "./dist/types.js"
+      },
+      "require": {
+        "types": "./dist/types.d.cts",
+        "default": "./dist/types.cjs"
+      }
     },
     "./validation": {
-      "types": "./dist/validation.d.ts",
       "solid": "./src/validation.ts",
-      "import": "./dist/validation.js",
-      "require": "./dist/validation.cjs"
+      "import": {
+        "types": "./dist/validation.d.ts",
+        "default": "./dist/validation.js"
+      },
+      "require": {
+        "types": "./dist/validation.d.cts",
+        "default": "./dist/validation.cjs"
+      }
     },
     "./types-only": {
-      "types": "./dist/types-export.d.ts",
       "solid": "./src/types-export.ts",
-      "import": "./dist/types-export.js",
-      "require": "./dist/types-export.cjs"
+      "import": {
+        "types": "./dist/types-export.d.ts",
+        "default": "./dist/types-export.js"
+      },
+      "require": {
+        "types": "./dist/types-export.d.cts",
+        "default": "./dist/types-export.cjs"
+      }
     },
     "./src/*": "./src/*"
   },
+  "size-limit": [
+    {
+      "name": "Streaming renderer",
+      "path": "dist/index.js",
+      "import": "{ StreamingUIRenderer }",
+      "limit": "30 KB"
+    },
+    {
+      "name": "Hooks only",
+      "path": "dist/index.js",
+      "import": "{ useStreamingUI, useAction }",
+      "limit": "25 KB"
+    },
+    {
+      "name": "Full bundle (with deps)",
+      "path": "dist/index.js",
+      "limit": "350 KB"
+    }
+  ],
   "peerDependencies": {
+    "@tanstack/solid-virtual": "^3.0.0",
+    "chart.js": "^4.0.0",
+    "highlight.js": "^11.9.0",
+    "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.0",
     "solid-js": "^1.9.0"
   },
+  "peerDependenciesMeta": {
+    "chart.js": {
+      "optional": true
+    },
+    "highlight.js": {
+      "optional": true
+    },
+    "leaflet": {
+      "optional": true
+    },
+    "leaflet.markercluster": {
+      "optional": true
+    },
+    "@tanstack/solid-virtual": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@types/dompurify": "^3.0.5",
     "dompurify": "^3.3.0",
@@ -55,13 +126,22 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@size-limit/esbuild": "^12.0.0",
+    "@size-limit/esbuild-why": "^12.0.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@solidjs/testing-library": "^0.8.5",
+    "@tanstack/solid-virtual": "^3.13.18",
+    "@types/leaflet": "^1.9.8",
+    "@types/leaflet.markercluster": "^1.5.6",
     "@types/node": "^20.10.0",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "@vitest/ui": "^4.0.9",
+    "chart.js": "^4.5.1",
     "eslint": "^8.56.0",
     "jsdom": "^27.2.0",
+    "leaflet.markercluster": "^1.5.3",
+    "size-limit": "^12.0.0",
     "solid-js": "^1.9.10",
     "typescript": "^5.3.3",
     "vite": "^6.3.6",
@@ -77,11 +157,11 @@
     "dashboard",
     "generative-ui"
   ],
-  "author": "Gabriel Brument",
+  "author": "Nicolas GEYSSE",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/theseedship/mcp-ui.git",
+    "url": "git+https://github.com/theseedship/mcp-ui.git",
     "directory": "mcp-ui-solid"
   },
   "homepage": "https://github.com/theseedship/mcp-ui#readme",
@@ -90,13 +170,17 @@
   },
   "scripts": {
     "build": "vite build && pnpm build:types",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist --composite false && cp dist/components/index.d.ts dist/components.d.ts 2>/dev/null || true && cp dist/hooks/index.d.ts dist/hooks.d.ts 2>/dev/null || true && cp dist/types/index.d.ts dist/types.d.ts 2>/dev/null || true",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist --composite false && pnpm build:types:copy",
+    "build:types:copy": "cp dist/components/index.d.ts dist/components.d.ts 2>/dev/null || true && cp dist/hooks/index.d.ts dist/hooks.d.ts 2>/dev/null || true && cp dist/types/index.d.ts dist/types.d.ts 2>/dev/null || true && pnpm build:types:cts",
+    "build:types:cts": "cp dist/index.d.ts dist/index.d.cts && cp dist/components.d.ts dist/components.d.cts 2>/dev/null || true && cp dist/hooks.d.ts dist/hooks.d.cts 2>/dev/null || true && cp dist/types.d.ts dist/types.d.cts 2>/dev/null || true && cp dist/validation.d.ts dist/validation.d.cts 2>/dev/null || true && cp dist/types-export.d.ts dist/types-export.d.cts 2>/dev/null || true",
     "dev": "vite build --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:browser": "vitest --mode browser",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "size": "size-limit",
+    "size:analyze": "size-limit --why"
   }
 }

package/src/components/ActionGroupRenderer.test.tsx

@@ -0,0 +1,318 @@
+/**
+ * ActionGroupRenderer Tests
+ * Sprint 3: UX Improvements
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@solidjs/testing-library'
+import { ActionGroupRenderer } from './ActionGroupRenderer'
+import type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'
+
+// Mock useAction hook
+vi.mock('../hooks/useAction', () => ({
+  useAction: () => ({
+    execute: vi.fn().mockResolvedValue({ success: true }),
+    isExecuting: () => false,
+    lastResult: () => undefined,
+    lastError: () => undefined,
+  }),
+}))
+
+// Mock window.open for link actions
+const mockWindowOpen = vi.fn()
+vi.stubGlobal('open', mockWindowOpen)
+
+describe('ActionGroupRenderer', () => {
+  const createActionGroup = (
+    actions: ActionComponentParams[],
+    options: Partial<ActionGroupParams> = {}
+  ): UIComponent => ({
+    id: 'test-action-group',
+    type: 'action-group',
+    position: { colStart: 1, colSpan: 12 },
+    params: {
+      actions,
+      ...options,
+    } as ActionGroupParams,
+  })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders action buttons', () => {
+    const component = createActionGroup([
+      { label: 'Save', variant: 'primary' },
+      { label: 'Cancel', variant: 'outline' },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeTruthy()
+  })
+
+  it('renders with direct params', () => {
+    render(() => (
+      <ActionGroupRenderer
+        params={{
+          actions: [
+            { label: 'Action 1' },
+            { label: 'Action 2' },
+          ],
+        }}
+      />
+    ))
+
+    expect(screen.getByRole('button', { name: 'Action 1' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Action 2' })).toBeTruthy()
+  })
+
+  it('renders link type as anchor', () => {
+    const component = createActionGroup([
+      { label: 'Visit Site', type: 'link', url: 'https://example.com' },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const link = screen.getByRole('link', { name: 'Visit Site' })
+    expect(link).toBeTruthy()
+    expect(link.getAttribute('href')).toBe('https://example.com')
+    expect(link.getAttribute('target')).toBe('_blank')
+  })
+
+  it('renders link action as anchor', () => {
+    const component = createActionGroup([
+      { label: 'External Link', action: 'link', url: 'https://example.com' },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const link = screen.getByRole('link', { name: 'External Link' })
+    expect(link).toBeTruthy()
+  })
+
+  it('disables button when disabled prop is true', () => {
+    const component = createActionGroup([
+      { label: 'Disabled Action', disabled: true },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const button = screen.getByRole('button', { name: 'Disabled Action' })
+    expect(button.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('renders different variants', () => {
+    const variants: Array<'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'> = [
+      'primary',
+      'secondary',
+      'outline',
+      'ghost',
+      'danger',
+    ]
+
+    const actions = variants.map((variant) => ({
+      label: `${variant} Button`,
+      variant,
+    }))
+
+    const component = createActionGroup(actions)
+    render(() => <ActionGroupRenderer component={component} />)
+
+    for (const variant of variants) {
+      expect(screen.getByRole('button', { name: `${variant} Button` })).toBeTruthy()
+    }
+  })
+
+  it('renders different sizes', () => {
+    const component = createActionGroup([
+      { label: 'Small', size: 'sm' },
+      { label: 'Medium', size: 'md' },
+      { label: 'Large', size: 'lg' },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    expect(screen.getByRole('button', { name: 'Small' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Medium' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Large' })).toBeTruthy()
+  })
+
+  it('renders icon in button', () => {
+    const component = createActionGroup([
+      { label: 'With Icon', icon: '🔍' },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    expect(screen.getByText('🔍')).toBeTruthy()
+  })
+
+  it('applies horizontal layout by default', () => {
+    const component = createActionGroup(
+      [{ label: 'Action 1' }, { label: 'Action 2' }],
+      { layout: 'horizontal' }
+    )
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('flex')).toBe(true)
+  })
+
+  it('applies vertical layout', () => {
+    const component = createActionGroup(
+      [{ label: 'Action 1' }, { label: 'Action 2' }],
+      { layout: 'vertical' }
+    )
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('flex-col')).toBe(true)
+  })
+
+  it('applies space-between layout', () => {
+    const component = createActionGroup(
+      [{ label: 'Action 1' }, { label: 'Action 2' }],
+      { layout: 'space-between' }
+    )
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('justify-between')).toBe(true)
+  })
+
+  it('applies end layout', () => {
+    const component = createActionGroup(
+      [{ label: 'Action 1' }, { label: 'Action 2' }],
+      { layout: 'end' }
+    )
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('justify-end')).toBe(true)
+  })
+
+  it('applies center layout', () => {
+    const component = createActionGroup(
+      [{ label: 'Action 1' }, { label: 'Action 2' }],
+      { layout: 'center' }
+    )
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('justify-center')).toBe(true)
+  })
+
+  it('applies different gap sizes', () => {
+    const gaps: Array<'none' | 'sm' | 'md' | 'lg'> = ['none', 'sm', 'md', 'lg']
+    const expectedClasses = ['gap-0', 'gap-1', 'gap-2', 'gap-4']
+
+    gaps.forEach((gap, index) => {
+      const component = createActionGroup([{ label: 'Action' }], { gap })
+      const { unmount } = render(() => <ActionGroupRenderer component={component} />)
+
+      const group = screen.getByRole('group')
+      expect(group.classList.contains(expectedClasses[index])).toBe(true)
+
+      unmount()
+    })
+  })
+
+  it('applies fullWidth class', () => {
+    const component = createActionGroup([{ label: 'Action' }], { fullWidth: true })
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.classList.contains('w-full')).toBe(true)
+  })
+
+  it('sets aria-label from label prop', () => {
+    const component = createActionGroup([{ label: 'Action' }], { label: 'Form Actions' })
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group', { name: 'Form Actions' })
+    expect(group).toBeTruthy()
+  })
+
+  it('uses default aria-label when no label provided', () => {
+    const component = createActionGroup([{ label: 'Action' }])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group', { name: 'Action group' })
+    expect(group).toBeTruthy()
+  })
+
+  it('handles tool-call action click', async () => {
+    const component = createActionGroup([
+      {
+        label: 'Execute Tool',
+        action: 'tool-call',
+        toolName: 'test-tool',
+        params: { key: 'value' },
+      },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const button = screen.getByRole('button', { name: 'Execute Tool' })
+    fireEvent.click(button)
+
+    // The action should be triggered (mocked useAction.execute)
+    await waitFor(() => {
+      expect(button).toBeTruthy()
+    })
+  })
+
+  it('handles link action click', async () => {
+    const component = createActionGroup([
+      {
+        label: 'Open Link',
+        action: 'link',
+        url: 'https://example.com',
+      },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    // Link action renders as anchor, not button with click handler
+    const link = screen.getByRole('link', { name: 'Open Link' })
+    expect(link.getAttribute('href')).toBe('https://example.com')
+  })
+
+  it('does not trigger action when button is disabled', () => {
+    const component = createActionGroup([
+      {
+        label: 'Disabled Tool',
+        action: 'tool-call',
+        toolName: 'test-tool',
+        disabled: true,
+      },
+    ])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const button = screen.getByRole('button', { name: 'Disabled Tool' })
+    fireEvent.click(button)
+
+    // Button should be disabled and not trigger action
+    expect(button.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('renders empty state when no actions provided', () => {
+    const component = createActionGroup([])
+
+    render(() => <ActionGroupRenderer component={component} />)
+
+    const group = screen.getByRole('group')
+    expect(group.children.length).toBe(0)
+  })
+})

package/src/components/ActionGroupRenderer.tsx

@@ -0,0 +1,175 @@
+/**
+ * ActionGroupRenderer - Group of actions with layout options
+ * Sprint 3: UX Improvements
+ */
+
+import { Component, For, Show } from 'solid-js'
+import type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'
+import { useAction } from '../hooks/useAction'
+
+export interface ActionGroupRendererProps {
+  /**
+   * UIComponent with action-group params (for declarative use)
+   */
+  component?: UIComponent
+
+  /**
+   * Direct action group params (alternative to component)
+   */
+  params?: ActionGroupParams
+}
+
+/**
+ * Render a single action button with variants and click handling
+ */
+const ActionButton: Component<{
+  action: ActionComponentParams
+  index: number
+}> = (props) => {
+  const { execute, isExecuting } = useAction()
+
+  const handleClick = async (e: MouseEvent) => {
+    if (props.action.disabled) return
+
+    if (props.action.action === 'tool-call' && props.action.toolName) {
+      e.preventDefault()
+      await execute(props.action.toolName, props.action.params || {})
+    } else if (props.action.action === 'link' && props.action.url) {
+      window.open(props.action.url, '_blank', 'noopener,noreferrer')
+    }
+  }
+
+  const isDisabled = () =>
+    props.action.disabled || (props.action.action === 'tool-call' && isExecuting())
+
+  const variantClass = () => {
+    switch (props.action.variant) {
+      case 'primary':
+        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'
+      case 'secondary':
+        return 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 focus:ring-gray-500'
+      case 'outline':
+        return 'border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500'
+      case 'ghost':
+        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'
+      case 'danger':
+        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
+      default:
+        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'
+    }
+  }
+
+  const sizeClass = () => {
+    switch (props.action.size) {
+      case 'sm':
+        return 'px-2 py-1 text-xs'
+      case 'lg':
+        return 'px-6 py-3 text-base'
+      default:
+        return 'px-4 py-2 text-sm'
+    }
+  }
+
+  // Render as link if it's a link action
+  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {
+    return (
+      <a
+        href={props.action.url || '#'}
+        target="_blank"
+        rel="noopener noreferrer"
+        class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${
+          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
+        }`}
+      >
+        <Show when={props.action.icon}>
+          <span class="text-current">{props.action.icon}</span>
+        </Show>
+        {props.action.label}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={isDisabled()}
+      class={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${variantClass()} ${sizeClass()} ${
+        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''
+      }`}
+    >
+      <Show when={isExecuting() && props.action.action === 'tool-call'}>
+        <span class="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
+      </Show>
+      <Show when={props.action.icon && !(isExecuting() && props.action.action === 'tool-call')}>
+        <span class="text-current">{props.action.icon}</span>
+      </Show>
+      {props.action.label}
+    </button>
+  )
+}
+
+/**
+ * Action group component for rendering multiple actions with consistent layout
+ *
+ * @example
+ * ```tsx
+ * const actionGroup: UIComponent = {
+ *   id: 'form-actions',
+ *   type: 'action-group',
+ *   position: { colStart: 1, colSpan: 12 },
+ *   params: {
+ *     layout: 'end',
+ *     gap: 'md',
+ *     actions: [
+ *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },
+ *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },
+ *     ],
+ *   },
+ * }
+ * <ActionGroupRenderer component={actionGroup} />
+ * ```
+ */
+export const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {
+  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }
+
+  const layoutClass = () => {
+    switch (params()?.layout) {
+      case 'vertical':
+        return 'flex flex-col'
+      case 'space-between':
+        return 'flex justify-between'
+      case 'end':
+        return 'flex justify-end'
+      case 'center':
+        return 'flex justify-center'
+      default: // horizontal
+        return 'flex'
+    }
+  }
+
+  const gapClass = () => {
+    switch (params()?.gap) {
+      case 'none':
+        return 'gap-0'
+      case 'sm':
+        return 'gap-1'
+      case 'lg':
+        return 'gap-4'
+      default: // md
+        return 'gap-2'
+    }
+  }
+
+  return (
+    <div
+      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}
+      role="group"
+      aria-label={params()?.label || 'Action group'}
+    >
+      <For each={params()?.actions || []}>
+        {(action, index) => <ActionButton action={action} index={index()} />}
+      </For>
+    </div>
+  )
+}