@seed-ship/mcp-ui-solid 3.0.5 → 4.0.0

package/dist/types.d.ts

@@ -64,10 +64,17 @@ export interface ChartComponentParams {
         labels: string[];
         datasets: Array<{
             label: string;
-            data: number[];
+            data: number[] | Array<{
+                x: string | number;
+                y: number;
+            }>;
             backgroundColor?: string | string[];
             borderColor?: string | string[];
             borderWidth?: number;
+            /** Fill area under line (useful for time-series) */
+            fill?: boolean | string;
+            /** Line tension (0 = straight, 0.4 = smooth) */
+            tension?: number;
         }>;
     };
     options?: {
@@ -88,6 +95,22 @@ export interface ChartComponentParams {
      * Enable PNG export button (v2.2.0)
      */
     exportable?: boolean;
+    /**
+     * Time-series axis configuration (v3.1.0).
+     * When set, x-axis labels are parsed as dates.
+     */
+    timeAxis?: {
+        /** Date format for parsing labels (Chart.js adapter format, e.g. 'yyyy-MM-dd') */
+        parser?: string;
+        /** Display unit for x-axis ticks */
+        unit?: 'day' | 'week' | 'month' | 'quarter' | 'year';
+        /** Date format for tooltip display */
+        tooltipFormat?: string;
+        /** Min date (ISO string) */
+        min?: string;
+        /** Max date (ISO string) */
+        max?: string;
+    };
     /**
      * Chart container height as CSS value (v2.2.0, default '250px')
      */
@@ -602,9 +625,57 @@ export interface MapClusterOptions {
      */
     animateAddingMarkers?: boolean;
 }
+/**
+ * GeoJSON feature popup configuration (v3.1.0)
+ */
+export interface MapPopupConfig {
+    /** Property key used as popup title */
+    titleField?: string;
+    /** Property keys to display in popup body */
+    fields?: string[];
+    /** Custom HTML template (use {{property}} placeholders) */
+    template?: string;
+}
+/**
+ * GeoJSON style configuration (v3.1.0)
+ * Supports static styles and choropleth (data-driven) coloring.
+ */
+export interface MapGeoJSONStyle {
+    /** Fill color (CSS color or choropleth config) */
+    fillColor?: string;
+    /** Fill opacity (0-1, default: 0.6) */
+    fillOpacity?: number;
+    /** Stroke color (default: '#333') */
+    strokeColor?: string;
+    /** Stroke width (default: 1) */
+    strokeWeight?: number;
+    /** Stroke opacity (0-1, default: 1) */
+    strokeOpacity?: number;
+    /** Choropleth: property key for data-driven coloring */
+    choroplethField?: string;
+    /** Choropleth: color scale stops [value, color][] sorted ascending */
+    choroplethScale?: Array<[number, string]>;
+    /** Choropleth: color for features with missing/null values */
+    choroplethFallback?: string;
+}
+/**
+ * Named GeoJSON layer for multi-layer maps (v3.1.0)
+ */
+export interface MapLayer {
+    /** Layer name (shown in layer control) */
+    name: string;
+    /** Is this layer visible by default? */
+    visible?: boolean;
+    /** GeoJSON FeatureCollection (inline or from API) */
+    geojson: unknown;
+    /** Per-layer style override */
+    style?: MapGeoJSONStyle;
+    /** Per-layer popup config */
+    popup?: MapPopupConfig;
+}
 /**
  * Map component parameters (Sprint 6)
- * Updated Sprint Ultimate U.2: Added clustering support
+ * Updated v3.1.0: GeoJSON, choropleth, popups, layers
  */
 export interface MapComponentParams {
     /**
@@ -624,7 +695,7 @@ export interface MapComponentParams {
      */
     height?: string;
     /**
-     * Auto-fit bounds to show all markers (default: false)
+     * Auto-fit bounds to show all markers/features (default: false)
      */
     fitBounds?: boolean;
     /**
@@ -645,15 +716,73 @@ export interface MapComponentParams {
     attribution?: string;
     /**
      * Enable marker clustering (Sprint Ultimate U.2)
-     * - true: Enable with default options
-     * - false: Disable clustering
-     * - MapClusterOptions: Enable with custom options
      */
     clustering?: boolean | MapClusterOptions;
     /**
      * Custom CSS class (Sprint 7)
      */
     className?: string;
+    /**
+     * GeoJSON FeatureCollection to render on the map.
+     * Use this for polygons, lines, points from structured data.
+     */
+    geojson?: unknown;
+    /**
+     * Style for the GeoJSON layer.
+     * Supports static colors and choropleth (data-driven) coloring.
+     */
+    geojsonStyle?: MapGeoJSONStyle;
+    /**
+     * Popup configuration for GeoJSON features.
+     * Shown on feature click.
+     */
+    popup?: MapPopupConfig;
+    /**
+     * Named layers for multi-layer maps.
+     * Each layer has its own GeoJSON, style, and popup config.
+     * A Leaflet layer control is added when layers are present.
+     */
+    layers?: MapLayer[];
+    /**
+     * PMTiles vector tile source for large datasets (>5000 features).
+     * Requires protomaps-leaflet peer dependency.
+     * Pipeline: GeoParquet -> Tippecanoe -> PMTiles (static file on S3/CDN).
+     */
+    pmtiles?: MapPMTilesConfig;
+}
+/**
+ * PMTiles configuration for large vector tile datasets (v3.1.0)
+ */
+export interface MapPMTilesConfig {
+    /** URL to the .pmtiles file (S3, CDN, local) */
+    url: string;
+    /** Attribution text for this tile source */
+    attribution?: string;
+    /** Style rules for vector features */
+    paintRules?: Array<{
+        /** Layer name in the PMTiles source */
+        dataLayer: string;
+        /** Symbol type */
+        symbolizer: 'polygon' | 'line' | 'circle';
+        /** Fill/stroke color (CSS color or function name) */
+        color?: string;
+        /** Stroke width */
+        width?: number;
+        /** Fill opacity */
+        opacity?: number;
+    }>;
+    /** Label rules for text labels */
+    labelRules?: Array<{
+        dataLayer: string;
+        /** Property key for label text */
+        textField: string;
+        /** Font size */
+        fontSize?: number;
+    }>;
+    /** Max zoom level */
+    maxZoom?: number;
+    /** Min zoom level */
+    minZoom?: number;
 }
 /**
  * Grid component parameters (Phase 5.0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "3.0.5",
+  "version": "4.0.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -112,6 +112,7 @@
     "highlight.js": "^11.9.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.0",
+    "protomaps-leaflet": "^4.0.0",
     "solid-js": "^1.9.0"
   },
   "peerDependenciesMeta": {
@@ -132,6 +133,9 @@
     },
     "@tanstack/solid-virtual": {
       "optional": true
+    },
+    "protomaps-leaflet": {
+      "optional": true
     }
   },
   "dependencies": {

package/src/components/ChartJSRenderer.tsx

@@ -117,23 +117,45 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         chartInstance = null
       }
 
+      // Build options, merging time-axis config if present (v3.1.0)
+      const baseOptions: any = {
+        responsive: true,
+        maintainAspectRatio: false,
+        ...chartParams.options,
+        plugins: {
+          ...chartParams.options?.plugins,
+          legend: {
+            display: true,
+            position: 'bottom',
+            ...chartParams.options?.plugins?.legend,
+          },
+        },
+      }
+
+      // Time-series axis (v3.1.0)
+      if (chartParams.timeAxis) {
+        const ta = chartParams.timeAxis
+        baseOptions.scales = {
+          ...baseOptions.scales,
+          x: {
+            ...baseOptions.scales?.x,
+            type: 'time',
+            time: {
+              parser: ta.parser,
+              unit: ta.unit,
+              tooltipFormat: ta.tooltipFormat,
+            },
+            ...(ta.min ? { min: ta.min } : {}),
+            ...(ta.max ? { max: ta.max } : {}),
+          },
+        }
+      }
+
       // Create new chart
       chartInstance = new Chart(canvasRef, {
         type: chartParams.type,
         data: chartParams.data,
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          ...chartParams.options,
-          plugins: {
-            ...chartParams.options?.plugins,
-            legend: {
-              display: true,
-              position: 'bottom',
-              ...chartParams.options?.plugins?.legend,
-            },
-          },
-        },
+        options: baseOptions,
       })
 
       setIsLoading(false)

package/src/components/DataPreviewSection.tsx

@@ -0,0 +1,206 @@
+/**
+ * DataPreviewSection — paginated data table with export
+ * v3.1.0: Replaces LLM-generated markdown tables with exact source data
+ *
+ * @experimental
+ *
+ * Features:
+ * - Column types (number right-aligned, string left-aligned)
+ * - Pagination (configurable page size)
+ * - CSV / JSON export buttons
+ * - Source attribution + freshness label
+ * - Number formatting (FR locale)
+ */
+
+import { createSignal, createMemo, For, Show } from 'solid-js'
+import type { DataPreviewContent, DataPreviewColumn } from '../types/chat-bus'
+
+export interface DataPreviewSectionProps {
+  content: DataPreviewContent
+}
+
+/** Format a number for display (French locale) */
+function formatNumber(value: unknown, format?: string): string {
+  if (typeof value !== 'number' || !isFinite(value)) return String(value ?? '')
+  // Simple formatting: use locale
+  if (format === 'percent') return `${(value * 100).toFixed(1)}%`
+  if (format === 'currency') return `${value.toLocaleString('fr-FR')} EUR`
+  if (Number.isInteger(value)) return value.toLocaleString('fr-FR')
+  return value.toLocaleString('fr-FR', { maximumFractionDigits: 2 })
+}
+
+/** Format a cell value based on column type */
+function formatCell(value: unknown, col: DataPreviewColumn): string {
+  if (value == null) return '—'
+  if (col.type === 'number') return formatNumber(value, col.format)
+  if (col.type === 'date' && typeof value === 'string') {
+    try {
+      return new Date(value).toLocaleDateString('fr-FR')
+    } catch {
+      return value
+    }
+  }
+  return String(value)
+}
+
+/** Generate CSV from columns + rows */
+function toCSV(columns: DataPreviewColumn[], rows: Record<string, unknown>[]): string {
+  const header = columns.map(c => `"${c.label.replace(/"/g, '""')}"`).join(';')
+  const body = rows.map(row =>
+    columns.map(c => {
+      const val = row[c.key]
+      if (val == null) return ''
+      if (typeof val === 'string') return `"${val.replace(/"/g, '""')}"`
+      return String(val)
+    }).join(';')
+  ).join('\n')
+  return `${header}\n${body}`
+}
+
+/** Trigger browser download */
+function downloadFile(content: string, filename: string, mimeType: string) {
+  const blob = new Blob([content], { type: mimeType })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+export function DataPreviewSection(props: DataPreviewSectionProps) {
+  const content = () => props.content
+  const pageSize = () => content().pageSize || 25
+  const [page, setPage] = createSignal(0)
+
+  const totalRows = () => content().rows.length
+  const totalPages = () => Math.max(1, Math.ceil(totalRows() / pageSize()))
+
+  const pagedRows = createMemo(() => {
+    const start = page() * pageSize()
+    return content().rows.slice(start, start + pageSize())
+  })
+
+  const handleExportCSV = () => {
+    const csv = toCSV(content().columns, content().rows)
+    downloadFile(csv, 'data-export.csv', 'text/csv;charset=utf-8')
+  }
+
+  const handleExportJSON = () => {
+    const json = JSON.stringify(content().rows, null, 2)
+    downloadFile(json, 'data-export.json', 'application/json')
+  }
+
+  const columnAlign = (col: DataPreviewColumn) => {
+    if (col.align) return col.align
+    if (col.type === 'number') return 'right'
+    return 'left'
+  }
+
+  return (
+    <div class="data-preview-section">
+      {/* Header with source + export */}
+      <div class="flex items-center justify-between mb-2">
+        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+          <Show when={content().source}>
+            <span class="font-medium">{content().source}</span>
+          </Show>
+          <Show when={content().freshness}>
+            <span class="px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">
+              {content().freshness}
+            </span>
+          </Show>
+        </div>
+
+        <Show when={content().exportable !== false}>
+          <div class="flex items-center gap-1">
+            <button
+              class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              onClick={handleExportCSV}
+              title="Export CSV"
+            >
+              CSV
+            </button>
+            <button
+              class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+              onClick={handleExportJSON}
+              title="Export JSON"
+            >
+              JSON
+            </button>
+          </div>
+        </Show>
+      </div>
+
+      {/* Table */}
+      <div class="overflow-x-auto rounded border border-gray-200 dark:border-gray-700">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="bg-gray-50 dark:bg-gray-800">
+              <For each={content().columns}>
+                {(col) => (
+                  <th
+                    class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700"
+                    style={{ "text-align": columnAlign(col) }}
+                  >
+                    {col.label}
+                  </th>
+                )}
+              </For>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={pagedRows()}>
+              {(row, i) => (
+                <tr
+                  class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                  classList={{ 'bg-gray-25 dark:bg-gray-850': i() % 2 === 1 }}
+                >
+                  <For each={content().columns}>
+                    {(col) => (
+                      <td
+                        class="px-3 py-2 text-gray-800 dark:text-gray-200"
+                        style={{ "text-align": columnAlign(col) }}
+                      >
+                        {formatCell(row[col.key], col)}
+                      </td>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Footer: pagination + row count */}
+      <div class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400">
+        <span>
+          {content().totalRows
+            ? `${totalRows()} / ${content().totalRows!.toLocaleString('fr-FR')} rows`
+            : `${totalRows()} row${totalRows() !== 1 ? 's' : ''}`}
+        </span>
+
+        <Show when={totalPages() > 1}>
+          <div class="flex items-center gap-1">
+            <button
+              class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
+              disabled={page() === 0}
+              onClick={() => setPage(p => p - 1)}
+            >
+              &laquo;
+            </button>
+            <span>{page() + 1} / {totalPages()}</span>
+            <button
+              class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 transition-colors"
+              disabled={page() >= totalPages() - 1}
+              onClick={() => setPage(p => p + 1)}
+            >
+              &raquo;
+            </button>
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/MapRenderer.test.tsx

@@ -1,6 +1,6 @@
 /**
  * MapRenderer Tests
- * Sprint 6 Refinement
+ * Sprint 6 + v3.1.0: GeoJSON, choropleth, popups
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -24,6 +24,7 @@ const mapMock = {
     remove: removeMock,
     getZoom: vi.fn(() => 13),
     fitBounds: fitBoundsMock.mockReturnThis(),
+    addLayer: addLayerMock,
 }
 
 const markerMock = {
@@ -37,11 +38,21 @@ const tileLayerMock = {
 }
 
 const controlMock = {
-    attribution: vi.fn(() => ({ addTo: vi.fn() }))
+    attribution: vi.fn(() => ({ addTo: vi.fn() })),
+    layers: vi.fn(() => ({ addTo: vi.fn() }))
 }
 
 const featureGroupMock = {
-    getBounds: vi.fn(() => ({ pad: vi.fn() }))
+    getBounds: vi.fn(() => ({ pad: vi.fn(), isValid: vi.fn(() => true) }))
+}
+
+const geoJSONMock = {
+    addTo: vi.fn().mockReturnThis(),
+    getBounds: vi.fn(() => ({ pad: vi.fn(), isValid: vi.fn(() => true) })),
+}
+
+const circleMarkerMock = {
+    bindPopup: vi.fn().mockReturnThis(),
 }
 
 vi.mock('leaflet', () => ({
@@ -51,6 +62,11 @@ vi.mock('leaflet', () => ({
         marker: vi.fn(() => markerMock),
         featureGroup: vi.fn(() => featureGroupMock),
         control: controlMock,
+        geoJSON: vi.fn(() => geoJSONMock),
+        circleMarker: vi.fn(() => circleMarkerMock),
+        GeoJSON: class {},
+        CircleMarker: class {},
+        Marker: class {},
         Icon: {
             Default: {
                 prototype: { _getIconUrl: vi.fn() },
@@ -82,8 +98,7 @@ describe('MapRenderer', () => {
         expect(mapDiv).toBeTruthy()
     })
 
-    it('renders with new marker format', () => {
-        // This test mostly verifies type check and structural validity since actual logic is mocked
+    it('renders with marker format', () => {
         const { container } = render(() => <MapRenderer params={{
             markers: [{ position: [10, 20], tooltip: 'Hello', popup: 'World' }]
         }} />)
@@ -97,4 +112,78 @@ describe('MapRenderer', () => {
         }} />)
         expect(container).toBeTruthy()
     })
+
+    // ─── GeoJSON tests (v3.1.0) ────────────────────────
+
+    const SAMPLE_GEOJSON = {
+        type: 'FeatureCollection',
+        features: [
+            {
+                type: 'Feature',
+                geometry: { type: 'Polygon', coordinates: [[[2.3, 48.8], [2.4, 48.8], [2.4, 48.9], [2.3, 48.9], [2.3, 48.8]]] },
+                properties: { name: 'Zone A', prix_m2: 3500 }
+            },
+            {
+                type: 'Feature',
+                geometry: { type: 'Polygon', coordinates: [[[2.4, 48.8], [2.5, 48.8], [2.5, 48.9], [2.4, 48.9], [2.4, 48.8]]] },
+                properties: { name: 'Zone B', prix_m2: 4200 }
+            }
+        ]
+    }
+
+    it('renders with GeoJSON data', () => {
+        const { container } = render(() => <MapRenderer params={{
+            geojson: SAMPLE_GEOJSON,
+            fitBounds: true,
+        }} />)
+        expect(container).toBeTruthy()
+    })
+
+    it('renders with GeoJSON + popup config', () => {
+        const { container } = render(() => <MapRenderer params={{
+            geojson: SAMPLE_GEOJSON,
+            popup: { titleField: 'name', fields: ['prix_m2'] },
+        }} />)
+        expect(container).toBeTruthy()
+    })
+
+    it('renders with choropleth style', () => {
+        const { container } = render(() => <MapRenderer params={{
+            geojson: SAMPLE_GEOJSON,
+            geojsonStyle: {
+                choroplethField: 'prix_m2',
+                choroplethScale: [[2000, '#eff3ff'], [3000, '#6baed6'], [5000, '#084594']],
+                fillOpacity: 0.7,
+            },
+        }} />)
+        expect(container).toBeTruthy()
+    })
+
+    it('renders with multiple named layers', () => {
+        const { container } = render(() => <MapRenderer params={{
+            layers: [
+                { name: 'Zones', geojson: SAMPLE_GEOJSON, visible: true },
+                { name: 'Points', geojson: { type: 'FeatureCollection', features: [] }, visible: false },
+            ],
+        }} />)
+        expect(container).toBeTruthy()
+    })
+
+    it('renders with custom height', () => {
+        const { container } = render(() => <MapRenderer params={{
+            geojson: SAMPLE_GEOJSON,
+            height: '600px',
+        }} />)
+        const mapDiv = container.querySelector('div[style*="height: 600px"]')
+        expect(mapDiv).toBeTruthy()
+    })
+
+    it('renders with className', () => {
+        const { container } = render(() => <MapRenderer params={{
+            geojson: SAMPLE_GEOJSON,
+            className: 'custom-map',
+        }} />)
+        const wrapper = container.querySelector('.custom-map')
+        expect(wrapper).toBeTruthy()
+    })
 })