@seed-ship/mcp-ui-solid 6.8.2 → 6.9.0

package/dist/utils/degraded-projections.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Degraded-fallback projections (audit 2026-05-30, P2.5).
+ *
+ * Pure functions that turn a heavy renderer's params into a flat
+ * `{ columns, rows }` table for `<DegradedFallback>` — the middle rung of
+ * the fallback ladder shown when the native render (G6 / Leaflet / Chart.js)
+ * is unavailable or throws. No peer deps, no side effects, fully testable.
+ *
+ * These are best-effort views: they surface the underlying data so the user
+ * isn't left with a blank space, not faithful reproductions of the chart/
+ * map/graph.
+ */
+export interface DegradedTable {
+    columns: string[];
+    rows: Array<Array<string | number>>;
+}
+/**
+ * Graph → edge table when edges exist (Source / Target / Label), else a
+ * node list (Node / Label). The graph renderer can therefore degrade to a
+ * readable relationship listing instead of a blank canvas.
+ */
+export declare function graphToDegradedTable(params: {
+    nodes?: Array<{
+        id: string;
+        label?: string;
+    }>;
+    edges?: Array<{
+        source: string;
+        target: string;
+        label?: string;
+        weight?: number;
+    }>;
+}): DegradedTable;
+/**
+ * Map → a coordinate table. Markers become Lat/Lng/Label rows; GeoJSON
+ * features become Type / Lat / Lng (+ a compact properties summary). So a
+ * map that can't paint still lists where its points are.
+ */
+export declare function mapToDegradedTable(params: {
+    markers?: Array<{
+        position: [number, number] | {
+            lat: number;
+            lng: number;
+        };
+        tooltip?: string;
+        popup?: string;
+    }>;
+    geojson?: unknown;
+}): DegradedTable;
+/**
+ * Chart → a series table: one row per label, one column per dataset. So a
+ * chart that can't draw still shows its numbers. Point/object data (scatter,
+ * bubble, time series) is stringified per cell.
+ */
+export declare function chartToDegradedTable(params: {
+    data?: {
+        labels?: Array<string | number>;
+        datasets?: Array<{
+            label?: string;
+            data?: unknown[];
+        }>;
+    };
+}): DegradedTable;
+//# sourceMappingURL=degraded-projections.d.ts.map

package/dist/utils/degraded-projections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"degraded-projections.d.ts","sourceRoot":"","sources":["../../src/utils/degraded-projections.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CACrC;AAmBD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE;IAC3C,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpF,GAAG,aAAa,CAkBhB;AAoBD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;QAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,aAAa,CA8BhB;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE;IAC3C,IAAI,CAAC,EAAE;QACL,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;QAChC,QAAQ,CAAC,EAAE,KAAK,CAAC;YAAE,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;SAAE,CAAC,CAAC;KACxD,CAAC;CACH,GAAG,aAAa,CAWhB"}

package/dist/utils/degraded-projections.js

@@ -0,0 +1,87 @@
+const MAX_PROJECTED_ROWS = 200;
+function cell(value) {
+  if (value == null) return "";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+function graphToDegradedTable(params) {
+  const edges = params.edges ?? [];
+  if (edges.length > 0) {
+    return {
+      columns: ["Source", "Target", "Label"],
+      rows: edges.slice(0, MAX_PROJECTED_ROWS).map((e) => {
+        const label = [e.weight != null ? String(e.weight) : "", e.label ?? ""].filter(Boolean).join(" · ");
+        return [cell(e.source), cell(e.target), label];
+      })
+    };
+  }
+  const nodes = params.nodes ?? [];
+  return {
+    columns: ["Node", "Label"],
+    rows: nodes.slice(0, MAX_PROJECTED_ROWS).map((n) => [cell(n.id), cell(n.label ?? n.id)])
+  };
+}
+function firstLngLat(coords) {
+  let c = coords;
+  while (Array.isArray(c) && Array.isArray(c[0])) c = c[0];
+  if (Array.isArray(c) && typeof c[0] === "number" && typeof c[1] === "number") {
+    return [c[0], c[1]];
+  }
+  return null;
+}
+function mapToDegradedTable(params) {
+  var _a, _b, _c, _d;
+  const rows = [];
+  for (const m of params.markers ?? []) {
+    const lat = Array.isArray(m.position) ? m.position[0] : (_a = m.position) == null ? void 0 : _a.lat;
+    const lng = Array.isArray(m.position) ? m.position[1] : (_b = m.position) == null ? void 0 : _b.lng;
+    rows.push(["marker", cell(lat), cell(lng), cell(m.tooltip ?? m.popup ?? "")]);
+  }
+  const fc = params.geojson;
+  const features = Array.isArray(fc == null ? void 0 : fc.features) ? fc.features : [];
+  for (const f of features) {
+    const ll = firstLngLat((_c = f.geometry) == null ? void 0 : _c.coordinates);
+    const props = f.properties ?? {};
+    const propSummary = Object.keys(props).slice(0, 3).map((k) => `${k}=${cell(props[k])}`).join(", ");
+    rows.push([
+      cell(((_d = f.geometry) == null ? void 0 : _d.type) ?? "feature"),
+      ll ? cell(ll[1]) : "",
+      ll ? cell(ll[0]) : "",
+      propSummary
+    ]);
+  }
+  return {
+    columns: ["Type", "Lat", "Lng", "Info"],
+    rows: rows.slice(0, MAX_PROJECTED_ROWS)
+  };
+}
+function chartToDegradedTable(params) {
+  var _a, _b;
+  const datasets = ((_a = params.data) == null ? void 0 : _a.datasets) ?? [];
+  const labels = ((_b = params.data) == null ? void 0 : _b.labels) ?? [];
+  const rowCount = Math.max(labels.length, ...datasets.map((d) => {
+    var _a2;
+    return ((_a2 = d.data) == null ? void 0 : _a2.length) ?? 0;
+  }), 0);
+  const columns = ["", ...datasets.map((d, i) => d.label ?? `Series ${i + 1}`)];
+  const rows = [];
+  for (let r = 0; r < Math.min(rowCount, MAX_PROJECTED_ROWS); r++) {
+    rows.push([cell(labels[r] ?? r + 1), ...datasets.map((d) => {
+      var _a2;
+      return cell((_a2 = d.data) == null ? void 0 : _a2[r]);
+    })]);
+  }
+  return { columns, rows };
+}
+export {
+  chartToDegradedTable,
+  graphToDegradedTable,
+  mapToDegradedTable
+};
+//# sourceMappingURL=degraded-projections.js.map

package/dist/utils/degraded-projections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"degraded-projections.js","sources":["../../src/utils/degraded-projections.ts"],"sourcesContent":["/**\n * Degraded-fallback projections (audit 2026-05-30, P2.5).\n *\n * Pure functions that turn a heavy renderer's params into a flat\n * `{ columns, rows }` table for `<DegradedFallback>` — the middle rung of\n * the fallback ladder shown when the native render (G6 / Leaflet / Chart.js)\n * is unavailable or throws. No peer deps, no side effects, fully testable.\n *\n * These are best-effort views: they surface the underlying data so the user\n * isn't left with a blank space, not faithful reproductions of the chart/\n * map/graph.\n */\n\nexport interface DegradedTable {\n  columns: string[];\n  rows: Array<Array<string | number>>;\n}\n\nconst MAX_PROJECTED_ROWS = 200;\n\n/** Compact a value to a single table cell string. */\nfunction cell(value: unknown): string {\n  if (value == null) return '';\n  if (typeof value === 'object') {\n    try {\n      return JSON.stringify(value);\n    } catch {\n      return String(value);\n    }\n  }\n  return String(value);\n}\n\n// ─── Graph ───────────────────────────────────────────────────────────────\n\n/**\n * Graph → edge table when edges exist (Source / Target / Label), else a\n * node list (Node / Label). The graph renderer can therefore degrade to a\n * readable relationship listing instead of a blank canvas.\n */\nexport function graphToDegradedTable(params: {\n  nodes?: Array<{ id: string; label?: string }>;\n  edges?: Array<{ source: string; target: string; label?: string; weight?: number }>;\n}): DegradedTable {\n  const edges = params.edges ?? [];\n  if (edges.length > 0) {\n    return {\n      columns: ['Source', 'Target', 'Label'],\n      rows: edges.slice(0, MAX_PROJECTED_ROWS).map((e) => {\n        const label = [e.weight != null ? String(e.weight) : '', e.label ?? '']\n          .filter(Boolean)\n          .join(' · ');\n        return [cell(e.source), cell(e.target), label];\n      }),\n    };\n  }\n  const nodes = params.nodes ?? [];\n  return {\n    columns: ['Node', 'Label'],\n    rows: nodes.slice(0, MAX_PROJECTED_ROWS).map((n) => [cell(n.id), cell(n.label ?? n.id)]),\n  };\n}\n\n// ─── Map ───────────────────────────────────────────────────────────────────\n\ninterface GeoJSONLikeFeature {\n  geometry?: { type?: string; coordinates?: unknown } | null;\n  properties?: Record<string, unknown> | null;\n}\n\n/** Pull a representative `[lng, lat]` pair out of a geometry's coordinates. */\nfunction firstLngLat(coords: unknown): [number, number] | null {\n  let c: unknown = coords;\n  // Descend nested arrays until we reach a [number, number, ...] position.\n  while (Array.isArray(c) && Array.isArray(c[0])) c = c[0];\n  if (Array.isArray(c) && typeof c[0] === 'number' && typeof c[1] === 'number') {\n    return [c[0], c[1]];\n  }\n  return null;\n}\n\n/**\n * Map → a coordinate table. Markers become Lat/Lng/Label rows; GeoJSON\n * features become Type / Lat / Lng (+ a compact properties summary). So a\n * map that can't paint still lists where its points are.\n */\nexport function mapToDegradedTable(params: {\n  markers?: Array<{\n    position: [number, number] | { lat: number; lng: number };\n    tooltip?: string;\n    popup?: string;\n  }>;\n  geojson?: unknown;\n}): DegradedTable {\n  const rows: Array<Array<string | number>> = [];\n\n  for (const m of params.markers ?? []) {\n    const lat = Array.isArray(m.position) ? m.position[0] : m.position?.lat;\n    const lng = Array.isArray(m.position) ? m.position[1] : m.position?.lng;\n    rows.push(['marker', cell(lat), cell(lng), cell(m.tooltip ?? m.popup ?? '')]);\n  }\n\n  const fc = params.geojson as { features?: GeoJSONLikeFeature[] } | undefined;\n  const features = Array.isArray(fc?.features) ? fc!.features : [];\n  for (const f of features) {\n    const ll = firstLngLat(f.geometry?.coordinates);\n    const props = f.properties ?? {};\n    const propSummary = Object.keys(props)\n      .slice(0, 3)\n      .map((k) => `${k}=${cell(props[k])}`)\n      .join(', ');\n    rows.push([\n      cell(f.geometry?.type ?? 'feature'),\n      ll ? cell(ll[1]) : '',\n      ll ? cell(ll[0]) : '',\n      propSummary,\n    ]);\n  }\n\n  return {\n    columns: ['Type', 'Lat', 'Lng', 'Info'],\n    rows: rows.slice(0, MAX_PROJECTED_ROWS),\n  };\n}\n\n// ─── Chart ───────────────────────────────────────────────────────────────\n\n/**\n * Chart → a series table: one row per label, one column per dataset. So a\n * chart that can't draw still shows its numbers. Point/object data (scatter,\n * bubble, time series) is stringified per cell.\n */\nexport function chartToDegradedTable(params: {\n  data?: {\n    labels?: Array<string | number>;\n    datasets?: Array<{ label?: string; data?: unknown[] }>;\n  };\n}): DegradedTable {\n  const datasets = params.data?.datasets ?? [];\n  const labels = params.data?.labels ?? [];\n  const rowCount = Math.max(labels.length, ...datasets.map((d) => d.data?.length ?? 0), 0);\n\n  const columns = ['', ...datasets.map((d, i) => d.label ?? `Series ${i + 1}`)];\n  const rows: Array<Array<string | number>> = [];\n  for (let r = 0; r < Math.min(rowCount, MAX_PROJECTED_ROWS); r++) {\n    rows.push([cell(labels[r] ?? r + 1), ...datasets.map((d) => cell(d.data?.[r]))]);\n  }\n  return { columns, rows };\n}\n"],"names":["_a"],"mappings":"AAkBA,MAAM,qBAAqB;AAG3B,SAAS,KAAK,OAAwB;AACpC,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,OAAO,UAAU,UAAU;AAC7B,QAAI;AACF,aAAO,KAAK,UAAU,KAAK;AAAA,IAC7B,QAAQ;AACN,aAAO,OAAO,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAO,OAAO,KAAK;AACrB;AASO,SAAS,qBAAqB,QAGnB;AAChB,QAAM,QAAQ,OAAO,SAAS,CAAA;AAC9B,MAAI,MAAM,SAAS,GAAG;AACpB,WAAO;AAAA,MACL,SAAS,CAAC,UAAU,UAAU,OAAO;AAAA,MACrC,MAAM,MAAM,MAAM,GAAG,kBAAkB,EAAE,IAAI,CAAC,MAAM;AAClD,cAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,SAAS,EAAE,EACnE,OAAO,OAAO,EACd,KAAK,KAAK;AACb,eAAO,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK;AAAA,MAC/C,CAAC;AAAA,IAAA;AAAA,EAEL;AACA,QAAM,QAAQ,OAAO,SAAS,CAAA;AAC9B,SAAO;AAAA,IACL,SAAS,CAAC,QAAQ,OAAO;AAAA,IACzB,MAAM,MAAM,MAAM,GAAG,kBAAkB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;AAAA,EAAA;AAE3F;AAUA,SAAS,YAAY,QAA0C;AAC7D,MAAI,IAAa;AAEjB,SAAO,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,EAAE,CAAC,CAAC,EAAG,KAAI,EAAE,CAAC;AACvD,MAAI,MAAM,QAAQ,CAAC,KAAK,OAAO,EAAE,CAAC,MAAM,YAAY,OAAO,EAAE,CAAC,MAAM,UAAU;AAC5E,WAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;AAAA,EACpB;AACA,SAAO;AACT;AAOO,SAAS,mBAAmB,QAOjB;AA3ElB;AA4EE,QAAM,OAAsC,CAAA;AAE5C,aAAW,KAAK,OAAO,WAAW,CAAA,GAAI;AACpC,UAAM,MAAM,MAAM,QAAQ,EAAE,QAAQ,IAAI,EAAE,SAAS,CAAC,KAAI,OAAE,aAAF,mBAAY;AACpE,UAAM,MAAM,MAAM,QAAQ,EAAE,QAAQ,IAAI,EAAE,SAAS,CAAC,KAAI,OAAE,aAAF,mBAAY;AACpE,SAAK,KAAK,CAAC,UAAU,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,CAAC;AAAA,EAC9E;AAEA,QAAM,KAAK,OAAO;AAClB,QAAM,WAAW,MAAM,QAAQ,yBAAI,QAAQ,IAAI,GAAI,WAAW,CAAA;AAC9D,aAAW,KAAK,UAAU;AACxB,UAAM,KAAK,aAAY,OAAE,aAAF,mBAAY,WAAW;AAC9C,UAAM,QAAQ,EAAE,cAAc,CAAA;AAC9B,UAAM,cAAc,OAAO,KAAK,KAAK,EAClC,MAAM,GAAG,CAAC,EACV,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,IAAI;AACZ,SAAK,KAAK;AAAA,MACR,OAAK,OAAE,aAAF,mBAAY,SAAQ,SAAS;AAAA,MAClC,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI;AAAA,MACnB,KAAK,KAAK,GAAG,CAAC,CAAC,IAAI;AAAA,MACnB;AAAA,IAAA,CACD;AAAA,EACH;AAEA,SAAO;AAAA,IACL,SAAS,CAAC,QAAQ,OAAO,OAAO,MAAM;AAAA,IACtC,MAAM,KAAK,MAAM,GAAG,kBAAkB;AAAA,EAAA;AAE1C;AASO,SAAS,qBAAqB,QAKnB;AAvHlB;AAwHE,QAAM,aAAW,YAAO,SAAP,mBAAa,aAAY,CAAA;AAC1C,QAAM,WAAS,YAAO,SAAP,mBAAa,WAAU,CAAA;AACtC,QAAM,WAAW,KAAK,IAAI,OAAO,QAAQ,GAAG,SAAS,IAAI,CAAC;AA1H5D,QAAAA;AA0HkE,aAAAA,MAAA,EAAE,SAAF,gBAAAA,IAAQ,WAAU;AAAA,GAAC,GAAG,CAAC;AAEvF,QAAM,UAAU,CAAC,IAAI,GAAG,SAAS,IAAI,CAAC,GAAG,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,EAAE,CAAC;AAC5E,QAAM,OAAsC,CAAA;AAC5C,WAAS,IAAI,GAAG,IAAI,KAAK,IAAI,UAAU,kBAAkB,GAAG,KAAK;AAC/D,SAAK,KAAK,CAAC,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,GAAG,SAAS,IAAI,CAAC;AA/H1D,UAAAA;AA+HgE,mBAAKA,MAAA,EAAE,SAAF,gBAAAA,IAAS,EAAE;AAAA,KAAC,CAAC,CAAC;AAAA,EACjF;AACA,SAAO,EAAE,SAAS,KAAA;AACpB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "6.8.2",
+  "version": "6.9.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ChartJSRenderer.tsx

@@ -8,41 +8,44 @@
  * ```
  */
 
-import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js'
-import type { UIComponent, ChartComponentParams } from '../types'
-import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { Component, createEffect, onCleanup, createSignal, Show } from 'solid-js';
+import type { UIComponent, ChartComponentParams } from '../types';
+import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
+import { DegradedFallback } from './DegradedFallback';
+import { chartToDegradedTable } from '../utils/degraded-projections';
+import { useTelemetry } from '../context/MCPUITelemetryContext';
 
 // Lazy load Chart.js to avoid bundling if not used
-let ChartJS: any = null
-let chartJSLoadPromise: Promise<any> | null = null
+let ChartJS: any = null;
+let chartJSLoadPromise: Promise<any> | null = null;
 
 const loadChartJS = async () => {
-  if (ChartJS) return ChartJS
+  if (ChartJS) return ChartJS;
 
   if (!chartJSLoadPromise) {
     chartJSLoadPromise = import('chart.js/auto')
       .then((module) => {
-        ChartJS = module.default || module.Chart
-        return ChartJS
+        ChartJS = module.default || module.Chart;
+        return ChartJS;
       })
       .catch((err) => {
-        chartJSLoadPromise = null
-        throw err
-      })
+        chartJSLoadPromise = null;
+        throw err;
+      });
   }
 
-  return chartJSLoadPromise
-}
+  return chartJSLoadPromise;
+};
 
 /**
  * Check if Chart.js is available
  */
 export async function isChartJSAvailable(): Promise<boolean> {
   try {
-    await loadChartJS()
-    return true
+    await loadChartJS();
+    return true;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -50,18 +53,18 @@ export interface ChartJSRendererProps {
   /**
    * UIComponent with chart params
    */
-  component: UIComponent
+  component: UIComponent;
 
   /**
    * Error callback
    */
-  onError?: (error: Error) => void
+  onError?: (error: Error) => void;
 
   /**
    * Forwarded to the underlying `<ExpandableWrapper>` (v6.3.1).
    * @see ExpandableWrapperProps.toolbarVariant
    */
-  toolbarVariant?: 'hover' | 'always-visible'
+  toolbarVariant?: 'hover' | 'always-visible';
 }
 
 /**
@@ -87,50 +90,51 @@ export interface ChartJSRendererProps {
  * ```
  */
 export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
-  const [isLoading, setIsLoading] = createSignal(true)
-  const [error, setError] = createSignal<string>()
-  let canvasRef: HTMLCanvasElement | undefined
-  let chartInstance: any
+  const [isLoading, setIsLoading] = createSignal(true);
+  const [error, setError] = createSignal<string>();
+  let canvasRef: HTMLCanvasElement | undefined;
+  let chartInstance: any;
 
-  const params = () => props.component.params as ChartComponentParams
-  const isExpanded = useExpanded()
+  const params = () => props.component.params as ChartComponentParams;
+  const isExpanded = useExpanded();
+  const telemetry = useTelemetry();
 
   // v6.1.0 — export visibility :
   //   - undefined / true  → button shown (new default, was opt-in)
   //   - false             → button hidden (explicit opt-out, unchanged)
-  const exportEnabled = () => params().exportable !== false
+  const exportEnabled = () => params().exportable !== false;
 
   // v6.1.0 — copy data for the ExpandableWrapper modal-header copy button.
   // Lazy-stringified each time the button is clicked.
-  const copyDataJSON = () => JSON.stringify({ type: params().type, data: params().data }, null, 2)
+  const copyDataJSON = () => JSON.stringify({ type: params().type, data: params().data }, null, 2);
 
   // Chart PNG export
   const handleExportPNG = () => {
-    if (!canvasRef) return
-    const url = canvasRef.toDataURL('image/png')
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${(params().title || 'chart').replace(/\s+/g, '-').toLowerCase()}.png`
-    a.click()
-  }
+    if (!canvasRef) return;
+    const url = canvasRef.toDataURL('image/png');
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${(params().title || 'chart').replace(/\s+/g, '-').toLowerCase()}.png`;
+    a.click();
+  };
 
   // Create/update chart when params change
   createEffect(async () => {
-    if (!canvasRef) return
+    if (!canvasRef) return;
 
     // Access params to track dependencies
-    const chartParams = params()
+    const chartParams = params();
 
-    setIsLoading(true)
-    setError(undefined)
+    setIsLoading(true);
+    setError(undefined);
 
     try {
-      const Chart = await loadChartJS()
+      const Chart = await loadChartJS();
 
       // Destroy previous instance
       if (chartInstance) {
-        chartInstance.destroy()
-        chartInstance = null
+        chartInstance.destroy();
+        chartInstance = null;
       }
 
       // Build options, merging time-axis config if present (v3.1.0)
@@ -146,11 +150,11 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             ...chartParams.options?.plugins?.legend,
           },
         },
-      }
+      };
 
       // Time-series axis (v3.1.0)
       if (chartParams.timeAxis) {
-        const ta = chartParams.timeAxis
+        const ta = chartParams.timeAxis;
         baseOptions.scales = {
           ...baseOptions.scales,
           x: {
@@ -164,7 +168,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             ...(ta.min ? { min: ta.min } : {}),
             ...(ta.max ? { max: ta.max } : {}),
           },
-        }
+        };
       }
 
       // Create new chart
@@ -172,24 +176,33 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         type: chartParams.type,
         data: chartParams.data,
         options: baseOptions,
-      })
+      });
 
-      setIsLoading(false)
+      setIsLoading(false);
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Chart rendering failed')
-      setError(error.message)
-      setIsLoading(false)
-      props.onError?.(error)
+      const error = err instanceof Error ? err : new Error('Chart rendering failed');
+      setError(error.message);
+      setIsLoading(false);
+      // Fallback ladder (P2.5): record the failure so it's observable, then
+      // degrade to the series table below instead of a blank canvas.
+      telemetry?.dispatch({
+        type: 'render:error',
+        errorMessage: error.message,
+        id: props.component?.id ?? '',
+        componentType: 'chart',
+        ts: Date.now(),
+      });
+      props.onError?.(error);
     }
-  })
+  });
 
   // Cleanup on unmount
   onCleanup(() => {
     if (chartInstance) {
-      chartInstance.destroy()
-      chartInstance = null
+      chartInstance.destroy();
+      chartInstance = null;
     }
-  })
+  });
 
   return (
     <ExpandableWrapper
@@ -198,15 +211,15 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
       copyLabel="Copy chart data (JSON)"
       toolbarVariant={props.toolbarVariant}
     >
-      <div class={`relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${
-        isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
-      }`}>
+      <div
+        class={`relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${
+          isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''
+        }`}
+      >
         <Show when={params().title || exportEnabled()}>
           <div class="flex items-center justify-between mb-3 flex-shrink-0">
             <Show when={params().title}>
-              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
-                {params().title}
-              </h3>
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params().title}</h3>
             </Show>
             <Show when={exportEnabled()}>
               <button
@@ -215,8 +228,18 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
                 title="Download PNG"
                 aria-label="Download chart as PNG"
               >
-                <svg class="w-3 h-3 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                <svg
+                  class="w-3 h-3 text-gray-500 dark:text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
                 </svg>
               </button>
             </Show>
@@ -232,28 +255,14 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
           </div>
         </Show>
 
+        {/* Fallback ladder (P2.5): degrade to a series table on render error
+            instead of a bare "Chart Error" message. */}
         <Show when={error()}>
-          <div class="absolute inset-0 flex items-center justify-center p-4 bg-white dark:bg-gray-800">
-            <div class="text-center">
-              <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-3">
-                <svg
-                  class="w-6 h-6 text-red-600 dark:text-red-400"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                  />
-                </svg>
-              </div>
-              <p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p>
-              <p class="text-gray-600 dark:text-gray-400 text-xs mt-1 max-w-xs">{error()}</p>
-            </div>
-          </div>
+          <DegradedFallback
+            message={`Chart rendering failed: ${error()}`}
+            caption="Showing the chart data as a table — the interactive chart is unavailable."
+            {...chartToDegradedTable(params() ?? {})}
+          />
         </Show>
 
         <div
@@ -270,5 +279,5 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
         </div>
       </div>
     </ExpandableWrapper>
-  )
-}
+  );
+};

package/src/components/DegradedFallback.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * Tests for <DegradedFallback> — the middle rung of the renderer fallback
+ * ladder (P2.5). Pure presentational component, no peers, no async.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, cleanup } from '@solidjs/testing-library';
+import { DegradedFallback } from './DegradedFallback';
+
+describe('<DegradedFallback>', () => {
+  it('shows the message and a default caption', () => {
+    const { getByText, container } = render(() => (
+      <DegradedFallback message="Graph rendering failed" />
+    ));
+    expect(getByText('Graph rendering failed')).toBeTruthy();
+    expect(container.textContent).toContain('interactive view is unavailable');
+    cleanup();
+  });
+
+  it('renders a table when columns + rows are provided', () => {
+    const { container } = render(() => (
+      <DegradedFallback
+        message="failed"
+        columns={['Source', 'Target', 'Label']}
+        rows={[
+          ['a', 'b', 'rel'],
+          ['b', 'c', ''],
+        ]}
+      />
+    ));
+    const headers = container.querySelectorAll('th');
+    expect(headers).toHaveLength(3);
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(container.textContent).toContain('rel');
+    cleanup();
+  });
+
+  it('shows no table when columns are empty', () => {
+    const { container } = render(() => <DegradedFallback message="failed" rows={[['x']]} />);
+    expect(container.querySelector('table')).toBeNull();
+    cleanup();
+  });
+
+  it('truncates rows past maxRows and notes the remainder', () => {
+    const rows = Array.from({ length: 5 }, (_, i) => [String(i)]);
+    const { container } = render(() => (
+      <DegradedFallback message="failed" columns={['n']} rows={rows} maxRows={2} />
+    ));
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(container.textContent).toContain('+3 more rows');
+    cleanup();
+  });
+
+  it('uses a custom caption when provided', () => {
+    const { container } = render(() => (
+      <DegradedFallback message="failed" caption="custom caption here" />
+    ));
+    expect(container.textContent).toContain('custom caption here');
+    cleanup();
+  });
+});

package/src/components/DegradedFallback.tsx

@@ -0,0 +1,93 @@
+/**
+ * DegradedFallback — the middle rung of the renderer fallback ladder
+ * (audit 2026-05-30, P2.5).
+ *
+ * Each heavy renderer (graph / map / chart) follows the same contract:
+ *   1. native render when its peer lib is available and succeeds;
+ *   2. **degraded but useful** view when the native render throws — this
+ *      component: a visible notice + a plain data table so the user still
+ *      sees the underlying data instead of a blank space;
+ *   3. (the caller also emits a `component:error` telemetry event).
+ *
+ * Pure / presentational — no peer deps, no side effects — so a render-path
+ * failure in a heavy lib can never cascade into the fallback itself, and it
+ * is trivially unit-testable. Rows/cells are rendered as text; callers are
+ * responsible for stringifying complex cell values.
+ */
+
+import { Component, For, Show } from 'solid-js';
+
+export interface DegradedFallbackProps {
+  /** Short, human-readable reason the native render was skipped/failed. */
+  message: string;
+  /**
+   * Column headers for the degraded data table. When omitted (or empty),
+   * only the notice banner is shown.
+   */
+  columns?: string[];
+  /** Row data — each row is an array of cells aligned to `columns`. */
+  rows?: Array<Array<string | number>>;
+  /**
+   * Caption under the table. Defaults to a generic
+   * "interactive view unavailable" line.
+   */
+  caption?: string;
+  /** Max rows to render before truncating (default 50). */
+  maxRows?: number;
+}
+
+export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
+  const maxRows = () => props.maxRows ?? 50;
+  const allRows = () => props.rows ?? [];
+  const shownRows = () => allRows().slice(0, maxRows());
+  const hiddenCount = () => Math.max(0, allRows().length - shownRows().length);
+  const hasTable = () => (props.columns?.length ?? 0) > 0 && allRows().length > 0;
+
+  return (
+    <div
+      class="w-full rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20"
+      role="alert"
+    >
+      <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{props.message}</p>
+      <p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300">
+        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}
+      </p>
+
+      <Show when={hasTable()}>
+        <div class="mt-2 max-h-64 overflow-auto rounded border border-amber-200 dark:border-amber-800">
+          <table class="w-full border-collapse text-left text-xs">
+            <thead class="sticky top-0 bg-amber-100 dark:bg-amber-900/40">
+              <tr>
+                <For each={props.columns}>
+                  {(col) => (
+                    <th class="px-2 py-1 font-medium text-amber-900 dark:text-amber-100">{col}</th>
+                  )}
+                </For>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={shownRows()}>
+                {(row) => (
+                  <tr class="border-t border-amber-100 dark:border-amber-800/60">
+                    <For each={props.columns}>
+                      {(_col, i) => (
+                        <td class="px-2 py-1 text-amber-800 dark:text-amber-200">
+                          {String(row[i()] ?? '')}
+                        </td>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+          </table>
+        </div>
+        <Show when={hiddenCount() > 0}>
+          <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
+            +{hiddenCount()} more rows not shown.
+          </p>
+        </Show>
+      </Show>
+    </div>
+  );
+};