@seed-ship/mcp-ui-solid 6.23.0 → 6.25.1

package/CHANGELOG.md

@@ -5,6 +5,173 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.25.1] - 2026-10-18
+
+### Security
+
+- Raise the published DOMPurify floor to `^3.4.17` (lockfile: 3.4.17), covering
+  both reported `IN_PLACE` advisories and subsequent upstream hardening. The
+  library's existing string-based sanitization profiles remain unchanged.
+- Update workspace Solid to 1.9.17 and Seroval/Seroval plugins to 1.6.11,
+  using Solid's supported 1.6.x dependency range instead of the stale 1.5.x
+  override. Add real asynchronous SSR and JSON serialization compatibility tests.
+- Update build/test resolutions to `source-map-js` 1.2.2 and `brace-expansion`
+  5.0.12. Audit falls from nine advisories to one remaining HIGH advisory in
+  the distinct, unpatched development dependency `braces` 3.0.3. No audit ignore
+  or advisory dismissal is added; see `docs/SECURITY-DEPENDENCIES.md`.
+- Workspace overrides do not propagate to consuming applications. Hosts must
+  separately update their Solid/Seroval lockfiles; the public Solid peer range
+  and component APIs are unchanged.
+
+## [6.25.0] - 2026-10-18
+
+### Added
+
+- Inherited `--mcp-ui-*` CSS theme tokens with per-use original color fallbacks
+  for prompts, resource/table chrome, scratchpads, form controls, autocomplete,
+  expanded dialogs, export menus and chart/graph chrome. No required provider,
+  new dependency, global root defaults or component prop changes.
+- Body portal theme synchronization, including local `.dark`, live ancestor
+  token changes and removal; fullscreen content retains its original DOM.
+- Scoped Chart.js/G6 series, grid, axis, label and tooltip tokens with live
+  updates and explicit caller color precedence; original engine defaults are
+  retained when no host tokens are supplied.
+- Frozen 6.24.0 Chromium computed-style comparisons, host/portal regressions,
+  static Tailwind class checks and theming documentation with coverage limits.
+
+### Fixed
+
+- Form input and autocomplete text respects the host foreground without a
+  `.dark` class, preserving inherited default colors and muted field states.
+- Explicit point paints no longer block themed line/radar strokes. Live
+  Chart.js theme updates also refresh resolved shared point/bar colors without
+  replacing their options or changing caller-provided non-color settings.
+
+## [6.24.0] - 2026-10-03
+
+Explicit missing values in charts and tables, and a unit per chart — lot 1 of
+the GeoAI display brief (`deposium_geoai/docs/handoffs/2026-10-03-mcp-ui-geoai-display-brief.md`).
+Released with `@seed-ship/mcp-ui-spec` 5.7.0, whose chart schema accepts both;
+the dependency floor moves to `^5.7.0`.
+
+### The rule
+
+Absence is never zero. A `null` keeps its slot — its label stays on the axis,
+its row stays in the table — and every view marks it, visibly and for screen
+readers. Until now `validateComponent` refused any chart carrying a `null`, so
+a host that drops invalid components (Deposium's chat does) showed nothing.
+
+Only an explicit entry is a missing value: `null` (or a non-finite number, or a
+point whose `y` is one). A dataset with no entry at all (`data: []`) is not —
+it renders exactly as it did in 6.23.0.
+
+### Added
+
+- **Charts accept `null`** in line, bar, radar, scatter and bubble datasets,
+  as a number slot or as a point's `y`:
+  - a line or a radar breaks at the missing value: `spanGaps: false` is set on
+    every dataset of a chart that has one, so nothing joins the neighbours,
+    and the date stays on the axis;
+  - a missing bar is drawn as a dashed outline at the baseline, so it cannot
+    be read as a zero bar (Chart.js draws nothing for both). Stacked or
+    overlaid bars get no outline — their baseline belongs to the series below,
+    so an outline there would point at the wrong series — and their note says
+    the values are not plotted;
+  - scatter and bubble charts leave the point out;
+  - a series whose every entry is missing keeps its legend entry, marked
+    `chartLegendNoData` ("(no data)"), and a chart with nothing to plot says
+    so in its plot area (`chartNoData`);
+  - a note under the chart explains how this chart shows a missing value
+    (`chartMissingGaps`, `chartMissingBars`, `chartMissingPoints`), shown when
+    a reader can actually see the mark, and names the series with no data
+    (`chartSeriesNoData`, joined with `Intl.ListFormat` in the strings
+    `locale`). The canvas's `aria-describedby` includes it. DOM hooks:
+    `[data-mcp-chart-notes]` and
+    `[data-mcp-chart-note="gaps|bars|omitted|no-data"]`;
+  - a tooltip names a missing bar (`missingValue`) instead of printing `0`.
+
+  Pie, doughnut and polar-area charts refuse `null`, as a bare value or as a
+  point's `y`, because Chart.js parses a missing share as `0` and would draw
+  every other share wrong. `validateChartComponent` reports
+  `MISSING_VALUE_UNSUPPORTED`. If a host bypasses validation, the renderer
+  shows its data table with `chartMissingUnsupported` instead of a misleading
+  chart.
+- **`unit`** on chart params: the value-axis title (bar, line, scatter and
+  bubble, unless `options.scales` already sets one), the tooltip value
+  (`chartValueWithUnit`, except on scatter and bubble, whose value is a pair)
+  and the column headers of the data view and of the degraded table
+  (`chartLabelWithUnit`). `validateChartComponent` reports `INVALID_UNIT` for
+  a non-string unit or one longer than 32 characters; an empty string is
+  tolerated and means "no unit".
+- **Tables.** A cell that already displayed as `-` — `null`, `undefined`, an
+  empty or whitespace-only string, `"undefined"` (after the backend's
+  `"X – undefined"` debris is stripped) or a literal `-` — is now muted,
+  hidden from assistive technology and followed by a visually-hidden
+  `missingValue`. A legend (`missingValueLegend`, `[data-mcp-missing-legend]`)
+  follows any table with such a cell. It is computed on every row, so it does
+  not flicker while paging. Missing cells sort last in both directions (an
+  empty string no longer sorts as `0`), a numeric column is detected from its
+  first present value, and search never matches a missing cell.
+- **The chart data view and the degraded tables** mark missing cells the same
+  way, under the same legend. `chartToDataTable` and `chartToDegradedTable`
+  return an extra `missing` matrix shaped like `rows`, which still hold `''`.
+  One exception: the degraded table prints point data (scatter, bubble,
+  `{x, y}` series) as JSON, where `"y":null` reads as such, and does not mark
+  it. `DegradedFallback` takes an optional `missing` prop; the graph and map
+  degraded tables do not change.
+- Ten `MCPUIStrings` keys (275 → 285), English defaults, French in the README
+  dictionary: `missingValue`, `missingValueLegend`, `chartMissingGaps`,
+  `chartMissingBars`, `chartMissingPoints`, `chartSeriesNoData`,
+  `chartLegendNoData`, `chartValueWithUnit`, `chartLabelWithUnit`,
+  `chartMissingUnsupported`.
+- `examples/geoai-daily-forecast/`: a synthetic, clearly labelled GeoAI pilot
+  (daily table, one chart per variable, comparison, map, thresholds, sources
+  and limits) built with `createComparisonLayout`, `createGeographyLayout` and
+  `createEvidenceLayout`, with tests for the brief's validation criteria that a
+  library can check. Not published, since it is outside `files`;
+  type-checked by `pnpm typecheck` (`tsconfig.examples.json`).
+
+### Unchanged on purpose
+
+- A chart with no missing entry and no unit builds exactly the 6.23.0
+  Chart.js config, and a table with no missing cell renders the 6.23.0 DOM
+  (both tested; the table against a capture taken before the change).
+- `renderCellValue` still returns `-` for a missing value; it now shares its
+  `"X – undefined"` cleanup with the table marks, so both always agree. CSV
+  and TSV exports still write an empty field, JSON still writes `null`.
+- Chart.js's default interaction (`nearest`, `intersect: true`) is kept. A
+  missing bar has no height, so its tooltip only appears in `index` mode.
+- No time axis is introduced: daily dates are categorical ISO labels. The
+  opt-in QuickChart renderer receives the payload as before; the unit and the
+  missing-value outlines, notes and legend belong to the native renderer.
+
+### Changed — for code that reads these types
+
+- `ChartComponentParams` datasets' `data` is now `Array<number | null>`, or
+  points whose `y` is `number | null`. Code that reads chart payloads under
+  `strictNullChecks` has to handle the missing value.
+- `chartToDataTable` and `chartToDegradedTable` always return the extra
+  `missing` matrix; code asserting their exact shape sees one more key.
+- `ChartDataTableLabels.withUnit` and `DegradedProjectionLabels.withUnit` are
+  new **optional** fields, so a complete labels table written for
+  6.20.0–6.23.0 as an object literal still type-checks (a
+  `Record<keyof …, string>` does not, as with any new key).
+  `CHART_DATA_TABLE_LABELS` and `DEGRADED_PROJECTION_LABELS` are now typed
+  `Required<…>`.
+- The `INVALID_DATA_TYPE` and `INVALID_POINT_DATA` messages now mention
+  `null`; the codes do not change.
+
+### For hosts
+
+- **Deposium (consumer):** bump to 6.24.0 and add the ten keys to the French
+  dictionary; `satisfies Required<MCPUIStrings>` fails until they are there.
+  The visually-hidden text uses an inline style, not Tailwind's `sr-only`, so
+  the Tailwind configuration needs no change.
+- **Producers:** emit `null` only in line, bar, radar, scatter and bubble
+  charts, never `0` for a missing value and never a shortened array. A
+  hand-copied schema mirror needs both `null` and `unit` (see the spec 5.7.0
+  changelog).
+
 ## [6.23.0] - 2026-09-18
 
 ### Added

package/README.md

@@ -5,6 +5,63 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
 [![npm version](https://img.shields.io/npm/v/@seed-ship/mcp-ui-solid.svg)](https://www.npmjs.com/package/@seed-ship/mcp-ui-solid)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+## What's New in v6.25.1
+
+DOMPurify now requires `^3.4.17`. The workspace uses the compatible Solid
+1.9.17 patch with corrected Seroval and build-tool dependency resolutions,
+covered by a real server-rendering/serialization smoke test. These workspace
+overrides do not update an application's own Solid/Seroval lockfile.
+See [security dependency notes](./docs/SECURITY-DEPENDENCIES.md) for host
+upgrade guidance and the remaining unpatched development-tooling advisory.
+
+## What's New in v6.25.0
+
+Inherited `--mcp-ui-*` CSS tokens theme prompts, resource/table chrome,
+scratchpads, form controls, autocomplete and chart/graph chrome. Body portals
+follow their local host theme; mounted Chart.js/G6 instances update without
+losing their identity. Existing colors remain the defaults.
+
+## Theming
+
+Set variables on an ancestor; no provider or extra stylesheet is required
+for the Tailwind-based components. Keep scanning this package's `src/**/*.{ts,tsx}`
+with Tailwind v4 and your existing class-based `.dark` variant.
+
+```css
+.app-theme {
+  --mcp-ui-surface: #ffffff;
+  --mcp-ui-surface-muted: #f1f5f9;
+  --mcp-ui-fg: #0f172a;
+  --mcp-ui-fg-muted: #475569;
+  --mcp-ui-border: #cbd5e1;
+  --mcp-ui-accent: #1d4ed8;
+}
+.dark .app-theme {
+  --mcp-ui-surface: #0f172a;
+  --mcp-ui-surface-muted: #1e293b;
+  --mcp-ui-fg: #f8fafc;
+  --mcp-ui-fg-muted: #cbd5e1;
+  --mcp-ui-border: #64748b;
+  --mcp-ui-accent: #93c5fd;
+}
+```
+
+The library deliberately does not redeclare public tokens on nested roots:
+an ancestor's tokens keep inheriting. Each use falls back to its original
+color, preserving the existing light/dark distinctions. Optional autocomplete
+CSS is still imported as before. See [the complete token reference, portal
+behavior, contrast limits and migration coverage](./docs/THEMING.md).
+
+## What's New in v6.24.0
+
+Explicit missing values in charts and tables, and a `unit` per chart. A `null`
+in a line, bar, radar, scatter or bubble dataset is now accepted and shown as
+missing, never as zero. Lines break, a missing bar gets a dashed outline, and a
+note under the chart says how. Table cells with no value are announced to
+screen readers and explained by a legend. Ten new `MCPUIStrings` keys; requires
+`@seed-ship/mcp-ui-spec` 5.7.0. See
+[Missing values and units in charts](#missing-values-and-units-in-charts-v6240).
+
 ## What's New in v6.23.0
 
 Opt-in LaTeX in markdown text components and table cells, with the same
@@ -715,6 +772,73 @@ Requires `protomaps-leaflet` peer dependency.
 }} />
 ```
 
+## Missing values and units in charts (v6.24.0)
+
+`null` in a chart dataset is an **explicit missing value**: the value belongs
+to the series' grid (its label stays on the axis) but was not observed. Send
+`null` rather than `0`, and rather than a shorter array, whenever a value is
+absent; a series with no value at all is all `null`.
+
+```tsx
+<UIResourceRenderer content={{
+  id: 'wind',
+  type: 'chart',
+  position: { colStart: 1, colSpan: 12 },
+  params: {
+    type: 'line',
+    title: 'Wind speed',
+    unit: 'km/h',
+    data: {
+      labels: ['2026-10-04', '2026-10-05', '2026-10-06'],
+      datasets: [
+        { label: 'Lyon', data: [18, null, 31] },   // a hole on day 2
+        { label: 'Brest', data: [null, null, null] }, // no value at all
+      ],
+    },
+  },
+}} />
+```
+
+| Chart type | A missing value is drawn as | Note under the chart |
+|---|---|---|
+| `line`, `radar` | a break in the line — never joined to its neighbours (`spanGaps: false` is forced) | `chartMissingGaps` |
+| `bar` | a dashed outline at the baseline, so it cannot read as a zero bar | `chartMissingBars` |
+| `scatter`, `bubble` | nothing: the point is not plotted | `chartMissingPoints` |
+| `bar` with `stacked` scales | nothing: the baseline belongs to the series below, so no outline is drawn | `chartMissingPoints` |
+| `pie`, `doughnut`, `polarArea` | refused: Chart.js would draw a missing share as `0` — validation reports `MISSING_VALUE_UNSUPPORTED` | — |
+
+A series whose every entry is `null` keeps its legend entry, marked
+`chartLegendNoData`, and is named in a `chartSeriesNoData` note. A chart with
+nothing to plot says `chartNoData` in its plot area. Only an explicit entry is
+a missing value: a dataset with no entry (`data: []`) renders as it always
+did. The notes are linked to
+the canvas through `aria-describedby`, and the **Data** view marks every
+missing cell with the same `-` and screen-reader text as the table component,
+under a `missingValueLegend` line.
+
+`unit` (one per chart — split values with different units into separate
+charts) titles the value axis unless `options.scales` already does, follows
+each tooltip value (`chartValueWithUnit`), and joins the data-view column
+headers (`chartLabelWithUnit`).
+
+Daily series read best with ISO dates as plain category labels, as above:
+`timeAxis` needs a Chart.js date adapter the host must register itself.
+
+Tables follow the same rule: a cell that displays as `-` — `null`,
+`undefined`, an empty or whitespace-only string, `"undefined"`, or a literal
+`-` — shows a muted `-` with a visually-hidden `missingValue`, a
+`missingValueLegend` line follows the table, missing cells sort last, and
+search never matches them.
+
+The outlines, notes, legend marks and `unit` belong to the native Chart.js
+renderer. The opt-in QuickChart renderer receives the payload as is.
+
+A synthetic, end-to-end example — daily table, one chart per variable,
+comparison, map, thresholds, sources and limits, built with the three
+presentation recipes — lives in
+[`examples/geoai-daily-forecast/`](./examples/geoai-daily-forecast/) (not
+published; its tests run with the package's).
+
 ## Chat Bus — Agent Interactions (`@experimental`)
 
 Bidirectional event/command system for agent-driven chat interactions. Your app keeps full control of its chat UI — the bus adds structured interactivity on top.
@@ -1530,6 +1654,20 @@ formatMCPUIString('Export CSV ({count} rows)', { count: 42 }) // 'Export CSV (42
 | `sizeBytes` | `{size} B` | `ArtifactRenderer` — file size below 1 KB (template) |
 | `sizeKilobytes` | `{size} KB` | `ArtifactRenderer` — file size in kilobytes (template) |
 | `sizeMegabytes` | `{size} MB` | `ArtifactRenderer` — file size in megabytes (template) |
+| `zoomIn` | `Zoom in` | `LightboxOverlay`, `ChartJSRenderer` — zoom-in button `title`/`aria-label` (v6.22.0) |
+| `zoomOut` | `Zoom out` | `LightboxOverlay`, `ChartJSRenderer` — zoom-out button `title`/`aria-label` (v6.22.0) |
+| `zoomReset` | `Reset zoom` | `LightboxOverlay`, `ChartJSRenderer` — reset button, shown while zoomed (v6.22.0) |
+| `zoomLevel` | `Zoom {percent}%` | `LightboxOverlay` — zoom-level readout (template, v6.22.0) |
+| `missingValue` | `Missing value` | Tables, chart data view, degraded tables — screen-reader text of a missing cell; tooltip value of a missing bar (v6.24.0) |
+| `missingValueLegend` | `“{marker}” marks a missing value.` | Legend under a table or data view with a missing cell (template, `{marker}` = `-`, v6.24.0) |
+| `chartMissingGaps` | `Breaks in a line mark missing values.` | `ChartJSRenderer` — note under a line or radar chart with a missing value (v6.24.0) |
+| `chartMissingBars` | `Dashed outlines mark missing values.` | `ChartJSRenderer` — note under a bar chart with a missing value (v6.24.0) |
+| `chartMissingPoints` | `Missing values are not plotted.` | `ChartJSRenderer` — note under a scatter, bubble or stacked bar chart with a missing value (v6.24.0) |
+| `chartSeriesNoData` | `No data for {series}.` | `ChartJSRenderer` — note naming the series with no value at all (template, `{series}` joined as a list in `locale`, v6.24.0) |
+| `chartLegendNoData` | `{series} (no data)` | `ChartJSRenderer` — legend entry of a series with no value at all (template, v6.24.0) |
+| `chartValueWithUnit` | `{value} {unit}` | `ChartJSRenderer` — tooltip value followed by the chart `unit` (template, v6.24.0) |
+| `chartLabelWithUnit` | `{label} ({unit})` | Chart data view and degraded chart tables — column header followed by the chart `unit` (template, v6.24.0) |
+| `chartMissingUnsupported` | `This chart type cannot show missing values.` | `ChartJSRenderer` — shown instead of a pie, doughnut or polar-area chart that received a missing value (v6.24.0) |
 
 ### `locale` — number, date and sort formatting (default change in v6.20.0)
 
@@ -1867,6 +2005,20 @@ const fr: MCPUIStrings = {
   sizeBytes: '{size} o',
   sizeKilobytes: '{size} Ko',
   sizeMegabytes: '{size} Mo',
+  zoomIn: 'Zoom avant',
+  zoomOut: 'Zoom arrière',
+  zoomReset: 'Réinitialiser le zoom',
+  zoomLevel: 'Zoom {percent} %',
+  missingValue: 'Valeur manquante',
+  missingValueLegend: '« {marker} » signale une valeur manquante.',
+  chartMissingGaps: 'Une interruption de la courbe signale une valeur manquante.',
+  chartMissingBars: 'Un contour en pointillés signale une valeur manquante.',
+  chartMissingPoints: 'Les valeurs manquantes ne sont pas tracées.',
+  chartSeriesNoData: 'Aucune donnée pour {series}.',
+  chartLegendNoData: '{series} (aucune donnée)',
+  chartValueWithUnit: '{value} {unit}',
+  chartLabelWithUnit: '{label} ({unit})',
+  chartMissingUnsupported: 'Ce type de graphique ne peut pas afficher de valeurs manquantes.',
 }
 
 <MCPUIStringsProvider strings={fr}><App /></MCPUIStringsProvider>
@@ -1901,8 +2053,8 @@ exported default table:
 | `adapters/connector.ts` (`/adapters`) | `connectorResultToUILayout` | `options.messages?: Partial<ConnectorAdapterMessages>` | `DEFAULT_CONNECTOR_MESSAGES` | `degradedNotice`, `degradedVersionSuffix`, `versionWarning` |
 | `adapters/macro-run.ts` (`/adapters`) | `macroRunToScratchpadState`, `macroInterrogationToChatPromptConfig` | `options.messages?: Partial<MacroRunAdapterMessages>` | `DEFAULT_MACRO_RUN_MESSAGES` | `agentSectionTitle`, `progressSectionTitle`, `resultSectionTitle`, `runAborted`, `runFailed`, `confirmDefault` |
 | `services/validation.ts` (root, `/validation`) | `validateFieldValue`, `validateFormData` | `messages?: Partial<FormValidationMessages>` | `DEFAULT_VALIDATION_MESSAGES` | `required`, `mustBeChecked`, `minLength`, `maxLength`, `invalidPattern`, `invalidEmail`, `invalidNumber`, `minValue`, `maxValue`, `minDate`, `maxDate`, `invalidOption`, `invalidFormat` |
-| `utils/degraded-projections.ts` (root) | `graphToDegradedTable`, `mapToDegradedTable`, `chartToDegradedTable` | `labels?: Partial<DegradedProjectionLabels>` | `DEGRADED_PROJECTION_LABELS` | `source`, `target`, `label`, `node`, `type`, `lat`, `lng`, `info`, `marker`, `feature`, `series` |
-| `components/chart-data-table.ts` (root) | `chartToDataTable` | `labels?: Partial<ChartDataTableLabels>` | `CHART_DATA_TABLE_LABELS` | `series`, `point`, `label`, `seriesName`, `x`, `y`, `r` |
+| `utils/degraded-projections.ts` (root) | `graphToDegradedTable`, `mapToDegradedTable`, `chartToDegradedTable` | `labels?: Partial<DegradedProjectionLabels>` | `DEGRADED_PROJECTION_LABELS` | `source`, `target`, `label`, `node`, `type`, `lat`, `lng`, `info`, `marker`, `feature`, `series`, `withUnit` (optional, v6.24.0: `{label} ({unit})`, chart headers when the chart has a unit) |
+| `components/chart-data-table.ts` (root) | `chartToDataTable` | `labels?: Partial<ChartDataTableLabels>` | `CHART_DATA_TABLE_LABELS` | `series`, `point`, `label`, `seriesName`, `x`, `y`, `r`, `withUnit` (optional, v6.24.0: `{label} ({unit})`, value headers when the chart has a unit) |
 | `hooks/useStreamingUI.ts` (root, `/hooks`) | `useStreamingUI` | `options.messages?: Partial<StreamingUIMessages>` | `DEFAULT_STREAMING_UI_MESSAGES` | `initializing`, `connecting`, `loadingComponent`, `dashboardLoaded`, `errorProgress`, `connectionFailed`, `requestFailed`, `emptyResponse`, `serverSide`, `unknownError` |
 
 Every option is a trailing OPTIONAL parameter, so existing calls keep

package/dist/components/ActionGroupRenderer.cjs

@@ -33,17 +33,17 @@ const ActionButton = (props) => {
   const variantClass = () => {
     switch (props.action.variant) {
       case "primary":
-        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+        return "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-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";
+        return "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-300,#d1d5db))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       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";
+        return "border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       case "ghost":
-        return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500";
+        return "text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       case "danger":
-        return "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500";
+        return "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-red-500))]";
       default:
-        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+        return "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]";
     }
   };
   const sizeClass = () => {

package/dist/components/ActionGroupRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroupRenderer.cjs","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, executeAction, isExecuting } = useAction()\n\n  // tool-call and submit both go through the host executor — they show a\n  // loading state and gate disabled while running. link does neither.\n  const isExecutable = () =>\n    props.action.action === 'tool-call' || props.action.action === 'submit'\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'submit') {\n      // submit is NOT a tool call — route it through the executor with the\n      // `action: 'submit'` kind preserved so the host can POST to\n      // params.submit_url etc. Works without a surrounding <form>.\n      e.preventDefault()\n      await executeAction({\n        action: 'submit',\n        toolName: props.action.toolName || 'submit',\n        params: props.action.params || {},\n      })\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (isExecutable() && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n      case 'secondary':\n        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'\n      case 'outline':\n        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'\n      case 'ghost':\n        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'danger':\n        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'\n      default:\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={safeUrl(props.action.url ?? '') ?? '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        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()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      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()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && isExecutable()}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && isExecutable())}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || strings.actionGroupLabel}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","executeAction","isExecuting","useAction","isExecutable","action","handleClick","e","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","safeUrl","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","strings","useMCPUIStrings","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","actionGroupLabel","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"ActionGroupRenderer.cjs","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, executeAction, isExecuting } = useAction()\n\n  // tool-call and submit both go through the host executor — they show a\n  // loading state and gate disabled while running. link does neither.\n  const isExecutable = () =>\n    props.action.action === 'tool-call' || props.action.action === 'submit'\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'submit') {\n      // submit is NOT a tool call — route it through the executor with the\n      // `action: 'submit'` kind preserved so the host can POST to\n      // params.submit_url etc. Works without a surrounding <form>.\n      e.preventDefault()\n      await executeAction({\n        action: 'submit',\n        toolName: props.action.toolName || 'submit',\n        params: props.action.params || {},\n      })\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (isExecutable() && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'\n      case 'secondary':\n        return 'bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-300,#d1d5db))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'outline':\n        return 'border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'ghost':\n        return 'text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'danger':\n        return 'bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-red-500))]'\n      default:\n        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={safeUrl(props.action.url ?? '') ?? '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        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()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      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()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && isExecutable()}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && isExecutable())}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || strings.actionGroupLabel}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","executeAction","isExecuting","useAction","isExecutable","action","handleClick","e","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","safeUrl","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","strings","useMCPUIStrings","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","actionGroupLabel","_$delegateEvents"],"mappings":"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"}

package/dist/components/ActionGroupRenderer.js

@@ -31,17 +31,17 @@ const ActionButton = (props) => {
   const variantClass = () => {
     switch (props.action.variant) {
       case "primary":
-        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+        return "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-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";
+        return "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-300,#d1d5db))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       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";
+        return "border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       case "ghost":
-        return "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500";
+        return "text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]";
       case "danger":
-        return "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500";
+        return "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-red-500))]";
       default:
-        return "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500";
+        return "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]";
     }
   };
   const sizeClass = () => {

package/dist/components/ActionGroupRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroupRenderer.js","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, executeAction, isExecuting } = useAction()\n\n  // tool-call and submit both go through the host executor — they show a\n  // loading state and gate disabled while running. link does neither.\n  const isExecutable = () =>\n    props.action.action === 'tool-call' || props.action.action === 'submit'\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'submit') {\n      // submit is NOT a tool call — route it through the executor with the\n      // `action: 'submit'` kind preserved so the host can POST to\n      // params.submit_url etc. Works without a surrounding <form>.\n      e.preventDefault()\n      await executeAction({\n        action: 'submit',\n        toolName: props.action.toolName || 'submit',\n        params: props.action.params || {},\n      })\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (isExecutable() && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n      case 'secondary':\n        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'\n      case 'outline':\n        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'\n      case 'ghost':\n        return 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-gray-500'\n      case 'danger':\n        return 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'\n      default:\n        return 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={safeUrl(props.action.url ?? '') ?? '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        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()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      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()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && isExecutable()}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && isExecutable())}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || strings.actionGroupLabel}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","executeAction","isExecuting","useAction","isExecutable","action","handleClick","e","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","safeUrl","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","strings","useMCPUIStrings","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","actionGroupLabel","_$delegateEvents"],"mappings":";;;;;;AA0BA,MAAMA,eAGAC,CAAAA,UAAU;AACd,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAeC;AAAAA,EAAAA,IAAgBC,UAAAA;AAIhD,QAAMC,eAAeA,MACnBL,MAAMM,OAAOA,WAAW,eAAeN,MAAMM,OAAOA,WAAW;AAEjE,QAAMC,cAAc,OAAOC,MAAkB;AAC3C,QAAIR,MAAMM,OAAOG,SAAU;AAE3B,QAAIT,MAAMM,OAAOA,WAAW,eAAeN,MAAMM,OAAOI,UAAU;AAChEF,QAAEG,eAAAA;AACF,YAAMV,QAAQD,MAAMM,OAAOI,UAAUV,MAAMM,OAAOM,UAAU,EAAE;AAAA,IAChE,WAAWZ,MAAMM,OAAOA,WAAW,UAAU;AAI3CE,QAAEG,eAAAA;AACF,YAAMT,cAAc;AAAA,QAClBI,QAAQ;AAAA,QACRI,UAAUV,MAAMM,OAAOI,YAAY;AAAA,QACnCE,QAAQZ,MAAMM,OAAOM,UAAU,CAAA;AAAA,MAAC,CACjC;AAAA,IACH,WAAWZ,MAAMM,OAAOA,WAAW,UAAUN,MAAMM,OAAOO,KAAK;AAC7DC,aAAOC,KAAKf,MAAMM,OAAOO,KAAK,UAAU,qBAAqB;AAAA,IAC/D;AAAA,EACF;AAEA,QAAMG,aAAaA,MACjBhB,MAAMM,OAAOG,YAAaJ,aAAAA,KAAkBF,YAAAA;AAE9C,QAAMc,eAAeA,MAAM;AACzB,YAAQjB,MAAMM,OAAOY,SAAAA;AAAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,YAAYA,MAAM;AACtB,YAAQnB,MAAMM,OAAOc,MAAAA;AAAAA,MACnB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAGA,MAAIpB,MAAMM,OAAOe,SAAS,UAAWrB,MAAMM,OAAOA,WAAW,UAAUN,MAAMM,OAAOO,KAAM;AACxF,YAAA,MAAA;AAAA,UAAAS,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAA,CAAAC,OAAAC,IAAA,IAAAC,cAAAJ,MAAAK,WAAA,GAAAC,QAAAJ,MAAAG,aAAA,CAAAE,OAAAC,KAAA,IAAAJ,cAAAE,MAAAD,WAAA;AAAAI,aAAAZ,MAAAa,gBASKC,MAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAErC,MAAMM,OAAOgC;AAAAA,QAAI;AAAA,QAAA,IAAAC,WAAA;AAAA,cAAAC,QAAAjB,eAAAkB,MAAA;AAAAP,iBAAAM,OAAA,MACCxC,MAAMM,OAAOgC,IAAI;AAAA,iBAAAE;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAb,OAAAC,IAAA;AAAAM,aAAAZ,MAAA,MAE9CtB,MAAMM,OAAOoC,OAAKV,OAAAC,KAAA;AAAAU,aAAAC,CAAAA,QAAA;AAAA,YAAAC,MAVbC,QAAQ9C,MAAMM,OAAOO,OAAO,EAAE,KAAK,KAAGkC,OAGrC,8IAA8I9B,aAAAA,CAAc,IAAIE,UAAAA,CAAW,IAChLH,WAAAA,IAAe,sDAAsD,EAAE;AACvE6B,gBAAAD,IAAApC,KAAAwC,aAAA1B,MAAA,QAAAsB,IAAApC,IAAAqC,GAAA;AAAAE,iBAAAH,IAAAK,KAAAC,UAAA5B,MAAAsB,IAAAK,IAAAF,IAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,QAAApC,GAAA2C;AAAAA,QAAAF,GAAAE;AAAAA,MAAAA,CAAA;AAAA,aAAA7B;AAAAA,IAAA,GAAA;AAAA,EAQR;AAEA,UAAA,MAAA;AAAA,QAAA8B,QAAA7B,eAAA8B,OAAA,GAAAC,QAAAF,MAAA1B,YAAA,CAAA6B,OAAAC,KAAA,IAAA3B,cAAAyB,MAAAxB,WAAA,GAAA2B,SAAAF,MAAAzB,aAAA,CAAA4B,QAAAC,KAAA,IAAA9B,cAAA4B,OAAA3B,WAAA,GAAA8B,SAAAF,OAAA5B,aAAA,CAAA+B,QAAAC,KAAA,IAAAjC,cAAA+B,OAAA9B,WAAA;AAAAsB,UAAAW,UAGaxD;AAAW2B,WAAAkB,OAAAjB,gBAMnBC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE2B,aAAA7D,aAAa,EAAA,KAAIE,aAAAA;AAAAA,MAAc;AAAA,MAAA,IAAAkC,WAAA;AAAA,eAAAhB,eAAA0C,OAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAV,OAAAC,KAAA;AAAAtB,WAAAkB,OAAAjB,gBAG1CC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE2B,KAAA,MAAA,CAAA,CAAAhE,MAAMM,OAAOgC,IAAI,EAAA,KAAI,EAAEnC,iBAAiBE;MAAe;AAAA,MAAA,IAAAkC,WAAA;AAAA,YAAA2B,QAAA3C,eAAAkB,MAAA;AAAAP,eAAAgC,OAAA,MACrClE,MAAMM,OAAOgC,IAAI;AAAA,eAAA4B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAR,QAAAC,KAAA;AAAAzB,WAAAkB,OAAA,MAE9CpD,MAAMM,OAAOoC,OAAKmB,QAAAC,KAAA;AAAAnB,WAAAC,CAAAA,QAAA;AAAA,UAAAuB,OAXTnD,WAAAA,GAAYoD,OACf,8IAA8InD,aAAAA,CAAc,IAAIE,UAAAA,CAAW,IAChLH,WAAAA,IAAe,kCAAkC,EAAE;AACnDmD,eAAAvB,IAAApC,KAAA6D,YAAAjB,OAAA,YAAAR,IAAApC,IAAA2D,IAAA;AAAAC,eAAAxB,IAAAK,KAAAC,UAAAE,OAAAR,IAAAK,IAAAmB,IAAA;AAAA,aAAAxB;AAAAA,IAAA,GAAA;AAAA,MAAApC,GAAA2C;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAAmB,uBAAAA;AAAA,WAAAlB;AAAAA,EAAA,GAAA;AAWR;AAuBO,MAAMmB,sBAA4DvE,CAAAA,UAAU;AACjF,QAAMwE,UAAUC,gBAAAA;AAChB,QAAM7D,SAASA,MAAAA;;AAAMZ,iBAAMY,YAAWZ,WAAM0E,cAAN1E,mBAAiBY,WAAgC;AAAA,MAAE+D,SAAS,CAAA;AAAA,IAAA;AAAA;AAElG,QAAMC,cAAcA,MAAM;;AACxB,aAAQhE,YAAAA,MAAAA,mBAAUiE,QAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAMC,WAAWA,MAAM;;AACrB,aAAQlE,YAAAA,MAAAA,mBAAUmE,KAAAA;AAAAA,MAChB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,UAAA,MAAA;AAAA,QAAAC,SAAAzD,eAAA0D,OAAA;AAAA/C,WAAA8C,QAAA7C,gBAMK+C,KAAG;AAAA,MAAA,IAACC,OAAI;;AAAA,iBAAEvE,YAAAA,MAAAA,mBAAU+D,YAAW,CAAA;AAAA,MAAE;AAAA,MAAApC,UAC/BA,CAACjC,QAAQ8E,UAAKjD,gBAAMpC,cAAY;AAAA,QAACO;AAAAA,QAAc,IAAE8E,QAAK;AAAA,iBAAEA,MAAAA;AAAAA,QAAO;AAAA,MAAA,CAAA;AAAA,IAAA,CAAI,CAAA;AAAAzC,WAAAC,CAAAA,QAAA;;AAAA,UAAAyC,OAL/D,GAAGT,YAAAA,CAAa,IAAIE,SAAAA,CAAU,MAAIlE,YAAAA,MAAAA,mBAAU0E,aAAY,WAAW,EAAE,IAAEC,SAElE3E,kBAAAA,mBAAU8B,UAAS8B,QAAQgB;AAAgBH,eAAAzC,IAAApC,KAAA0C,UAAA8B,QAAApC,IAAApC,IAAA6E,IAAA;AAAAE,eAAA3C,IAAAK,KAAAD,aAAAgC,QAAA,cAAApC,IAAAK,IAAAsC,IAAA;AAAA,aAAA3C;AAAAA,IAAA,GAAA;AAAA,MAAApC,GAAA2C;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA6B;AAAAA,EAAA,GAAA;AAO7D;AAACS,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"ActionGroupRenderer.js","sources":["../../src/components/ActionGroupRenderer.tsx"],"sourcesContent":["/**\n * ActionGroupRenderer - Group of actions with layout options\n * Sprint 3: UX Improvements\n */\n\nimport { Component, For, Show } from 'solid-js'\nimport type { UIComponent, ActionGroupParams, ActionComponentParams } from '../types'\nimport { useAction } from '../hooks/useAction'\nimport { safeUrl } from '../utils/safe-url'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ActionGroupRendererProps {\n  /**\n   * UIComponent with action-group params (for declarative use)\n   */\n  component?: UIComponent\n\n  /**\n   * Direct action group params (alternative to component)\n   */\n  params?: ActionGroupParams\n}\n\n/**\n * Render a single action button with variants and click handling\n */\nconst ActionButton: Component<{\n  action: ActionComponentParams\n  index: number\n}> = (props) => {\n  const { execute, executeAction, isExecuting } = useAction()\n\n  // tool-call and submit both go through the host executor — they show a\n  // loading state and gate disabled while running. link does neither.\n  const isExecutable = () =>\n    props.action.action === 'tool-call' || props.action.action === 'submit'\n\n  const handleClick = async (e: MouseEvent) => {\n    if (props.action.disabled) return\n\n    if (props.action.action === 'tool-call' && props.action.toolName) {\n      e.preventDefault()\n      await execute(props.action.toolName, props.action.params || {})\n    } else if (props.action.action === 'submit') {\n      // submit is NOT a tool call — route it through the executor with the\n      // `action: 'submit'` kind preserved so the host can POST to\n      // params.submit_url etc. Works without a surrounding <form>.\n      e.preventDefault()\n      await executeAction({\n        action: 'submit',\n        toolName: props.action.toolName || 'submit',\n        params: props.action.params || {},\n      })\n    } else if (props.action.action === 'link' && props.action.url) {\n      window.open(props.action.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const isDisabled = () =>\n    props.action.disabled || (isExecutable() && isExecuting())\n\n  const variantClass = () => {\n    switch (props.action.variant) {\n      case 'primary':\n        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'\n      case 'secondary':\n        return 'bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-300,#d1d5db))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-600,#4b5563))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'outline':\n        return 'border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'ghost':\n        return 'text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))]'\n      case 'danger':\n        return 'bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-red-500))]'\n      default:\n        return 'bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))]'\n    }\n  }\n\n  const sizeClass = () => {\n    switch (props.action.size) {\n      case 'sm':\n        return 'px-2 py-1 text-xs'\n      case 'lg':\n        return 'px-6 py-3 text-base'\n      default:\n        return 'px-4 py-2 text-sm'\n    }\n  }\n\n  // Render as link if it's a link action\n  if (props.action.type === 'link' || (props.action.action === 'link' && props.action.url)) {\n    return (\n      <a\n        href={safeUrl(props.action.url ?? '') ?? '#'}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        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()} ${\n          isDisabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''\n        }`}\n      >\n        <Show when={props.action.icon}>\n          <span class=\"text-current\">{props.action.icon}</span>\n        </Show>\n        {props.action.label}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isDisabled()}\n      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()} ${\n        isDisabled() ? 'opacity-50 cursor-not-allowed' : ''\n      }`}\n    >\n      <Show when={isExecuting() && isExecutable()}>\n        <span class=\"animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full\" />\n      </Show>\n      <Show when={props.action.icon && !(isExecuting() && isExecutable())}>\n        <span class=\"text-current\">{props.action.icon}</span>\n      </Show>\n      {props.action.label}\n    </button>\n  )\n}\n\n/**\n * Action group component for rendering multiple actions with consistent layout\n *\n * @example\n * ```tsx\n * const actionGroup: UIComponent = {\n *   id: 'form-actions',\n *   type: 'action-group',\n *   position: { colStart: 1, colSpan: 12 },\n *   params: {\n *     layout: 'end',\n *     gap: 'md',\n *     actions: [\n *       { label: 'Cancel', variant: 'outline', action: 'link', url: '/back' },\n *       { label: 'Save', variant: 'primary', action: 'tool-call', toolName: 'save' },\n *     ],\n *   },\n * }\n * <ActionGroupRenderer component={actionGroup} />\n * ```\n */\nexport const ActionGroupRenderer: Component<ActionGroupRendererProps> = (props) => {\n  const strings = useMCPUIStrings()\n  const params = () => props.params || (props.component?.params as ActionGroupParams) || { actions: [] }\n\n  const layoutClass = () => {\n    switch (params()?.layout) {\n      case 'vertical':\n        return 'flex flex-col'\n      case 'space-between':\n        return 'flex justify-between'\n      case 'end':\n        return 'flex justify-end'\n      case 'center':\n        return 'flex justify-center'\n      default: // horizontal\n        return 'flex'\n    }\n  }\n\n  const gapClass = () => {\n    switch (params()?.gap) {\n      case 'none':\n        return 'gap-0'\n      case 'sm':\n        return 'gap-1'\n      case 'lg':\n        return 'gap-4'\n      default: // md\n        return 'gap-2'\n    }\n  }\n\n  return (\n    <div\n      class={`${layoutClass()} ${gapClass()} ${params()?.fullWidth ? 'w-full' : ''}`}\n      role=\"group\"\n      aria-label={params()?.label || strings.actionGroupLabel}\n    >\n      <For each={params()?.actions || []}>\n        {(action, index) => <ActionButton action={action} index={index()} />}\n      </For>\n    </div>\n  )\n}\n"],"names":["ActionButton","props","execute","executeAction","isExecuting","useAction","isExecutable","action","handleClick","e","disabled","toolName","preventDefault","params","url","window","open","isDisabled","variantClass","variant","sizeClass","size","type","_el$","_$getNextElement","_tmpl$2","_el$3","firstChild","_el$4","_co$","_$getNextMarker","nextSibling","_el$5","_el$6","_co$2","_$insert","_$createComponent","Show","when","icon","children","_el$2","_tmpl$","label","_$effect","_p$","_v$","safeUrl","_v$2","_$setAttribute","t","_$className","undefined","_el$7","_tmpl$4","_el$0","_el$1","_co$3","_el$10","_el$11","_co$4","_el$12","_el$13","_co$5","$$click","_$memo","_tmpl$3","_el$9","_v$3","_v$4","_$setProperty","_$runHydrationEvents","ActionGroupRenderer","strings","useMCPUIStrings","component","actions","layoutClass","layout","gapClass","gap","_el$14","_tmpl$5","For","each","index","_v$5","fullWidth","_v$6","actionGroupLabel","_$delegateEvents"],"mappings":"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"}

package/dist/components/AutocompleteDropdown.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
 const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<strong class=mcp-autocomplete-highlight>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-icon>`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-description>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-option-content><!$><!/><div class=mcp-autocomplete-option-text><span class=mcp-autocomplete-option-label></span><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-loading style="padding:12px 16px;color:#6b7280;font-size:0.875rem;display:flex;align-items:center;gap:8px"><span style="display:inline-block;width:14px;height:14px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite"></span><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-empty style="padding:12px 16px;color:#9ca3af;font-size:0.875rem;text-align:center">`), _tmpl$7 = /* @__PURE__ */ web.template(`<ul class=mcp-autocomplete-options style="margin:0;padding:4px 0;list-style:none">`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-footer style="padding:6px 12px;border-top:1px solid #e5e7eb;background-color:#f9fafb;font-size:0.75rem;color:#6b7280"><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↑</kbd> <kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↓</kbd><!$><!/><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Enter</kbd><!$><!/><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Esc</kbd><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<li role=option style="padding:8px 16px;font-size:0.875rem;transition:background-color 150ms ease">`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<strong class=mcp-autocomplete-highlight>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-icon>`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-description>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-option-content><!$><!/><div class=mcp-autocomplete-option-text><span class=mcp-autocomplete-option-label></span><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-loading style="padding:12px 16px;color:var(--mcp-ui-fg-muted, #6b7280);font-size:0.875rem;display:flex;align-items:center;gap:8px"><span style="display:inline-block;width:14px;height:14px;border:2px solid var(--mcp-ui-border, #e5e7eb);border-top-color:var(--mcp-ui-accent, #3b82f6);border-radius:50%;animation:mcp-spin 0.6s linear infinite"></span><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-empty style="padding:12px 16px;color:var(--mcp-ui-fg-subtle, #9ca3af);font-size:0.875rem;text-align:center">`), _tmpl$7 = /* @__PURE__ */ web.template(`<ul class=mcp-autocomplete-options style="margin:0;padding:4px 0;list-style:none">`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-footer style="padding:6px 12px;border-top:1px solid var(--mcp-ui-border, #e5e7eb);background-color:var(--mcp-ui-surface-muted, #f9fafb);font-size:0.75rem;color:var(--mcp-ui-fg-muted, #6b7280)"><kbd style="background-color:var(--mcp-ui-surface-hover, #e5e7eb);padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↑</kbd> <kbd style="background-color:var(--mcp-ui-surface-hover, #e5e7eb);padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↓</kbd><!$><!/><kbd style="background-color:var(--mcp-ui-surface-hover, #e5e7eb);padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Enter</kbd><!$><!/><kbd style="background-color:var(--mcp-ui-surface-hover, #e5e7eb);padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Esc</kbd><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<li role=option style="padding:8px 16px;font-size:0.875rem;transition:background-color 150ms ease">`);
 function highlightText(text, match) {
   if (!match || !text) {
     return text;
@@ -70,10 +70,10 @@ const AutocompleteDropdown = (props) => {
     left: "0",
     right: "0",
     "z-index": "50",
-    "background-color": "#ffffff",
-    border: "1px solid #e5e7eb",
+    "background-color": "var(--mcp-ui-surface, #ffffff)",
+    border: "1px solid var(--mcp-ui-border, #e5e7eb)",
     "border-radius": "6px",
-    "box-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    "box-shadow": "var(--mcp-ui-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06))",
     "max-height": props.maxHeight || "240px",
     overflow: "auto",
     ...positionStyles()
@@ -150,7 +150,7 @@ const AutocompleteDropdown = (props) => {
                   }
                 }));
                 web.effect((_p$) => {
-                  var _v$4 = isSelected(), _v$5 = isDisabled(), _v$6 = `mcp-autocomplete-option ${isSelected() ? "mcp-autocomplete-option-selected" : ""} ${isDisabled() ? "mcp-autocomplete-option-disabled" : ""}`, _v$7 = isDisabled() ? "not-allowed" : "pointer", _v$8 = isSelected() ? "#eff6ff" : "transparent", _v$9 = isDisabled() ? "#9ca3af" : "#374151";
+                  var _v$4 = isSelected(), _v$5 = isDisabled(), _v$6 = `mcp-autocomplete-option ${isSelected() ? "mcp-autocomplete-option-selected" : ""} ${isDisabled() ? "mcp-autocomplete-option-disabled" : ""}`, _v$7 = isDisabled() ? "not-allowed" : "pointer", _v$8 = isSelected() ? "var(--mcp-ui-accent-soft, #eff6ff)" : "transparent", _v$9 = isDisabled() ? "var(--mcp-ui-fg-subtle, #9ca3af)" : "var(--mcp-ui-fg, #374151)";
                   _v$4 !== _p$.e && web.setAttribute(_el$36, "aria-selected", _p$.e = _v$4);
                   _v$5 !== _p$.t && web.setAttribute(_el$36, "aria-disabled", _p$.t = _v$5);
                   _v$6 !== _p$.a && web.className(_el$36, _p$.a = _v$6);
@@ -187,7 +187,7 @@ const AutocompleteDropdown = (props) => {
         }
       }), _el$35, _co$0);
       web.effect((_p$) => {
-        var _v$ = `mcp-autocomplete-dropdown ${props.class || ""}`, _v$2 = containerStyles(), _v$3 = strings.autocompleteSuggestions;
+        var _v$ = `mcp-ui-root mcp-autocomplete-dropdown ${props.class || ""}`, _v$2 = containerStyles(), _v$3 = strings.autocompleteSuggestions;
         _v$ !== _p$.e && web.className(_el$1, _p$.e = _v$);
         _p$.t = web.style(_el$1, _v$2, _p$.t);
         _v$3 !== _p$.a && web.setAttribute(_el$1, "aria-label", _p$.a = _v$3);