npm - semiotic - Versions diffs - 3.6.0 → 3.7.1 - Mend

semiotic 3.6.0 → 3.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/CLAUDE.md +192 -228
package/README.md +70 -17
package/ai/cli.js +41 -0
package/ai/componentMetadata.cjs +11 -2
package/ai/dist/mcp-server.js +625 -10
package/ai/examples.md +98 -0
package/ai/schema.json +581 -1
package/ai/system-prompt.md +7 -4
package/dist/components/AccessibleNavTree.d.ts +26 -0
package/dist/components/Annotation.d.ts +41 -15
package/dist/components/CategoryColors.d.ts +1 -1
package/dist/components/ChartContainer.d.ts +32 -2
package/dist/components/ChartGrid.d.ts +1 -1
package/dist/components/ContextLayout.d.ts +1 -1
package/dist/components/DataSummaryContext.d.ts +1 -1
package/dist/components/DetailsPanel.d.ts +1 -1
package/dist/components/Legend.d.ts +3 -2
package/dist/components/LinkedCharts.d.ts +1 -1
package/dist/components/ThemeProvider.d.ts +1 -1
package/dist/components/Tooltip/FlippingTooltip.d.ts +1 -1
package/dist/components/Tooltip/Tooltip.d.ts +2 -2
package/dist/components/ai/annotationProvenance.d.ts +349 -0
package/dist/components/ai/audienceProfile.d.ts +60 -3
package/dist/components/ai/chartCapabilityTypes.d.ts +60 -2
package/dist/components/ai/chartRoles.d.ts +27 -0
package/dist/components/ai/conversationArc.d.ts +379 -0
package/dist/components/ai/dataScaleProfile.d.ts +320 -0
package/dist/components/ai/describeChart.d.ts +114 -0
package/dist/components/ai/navigationTree.d.ts +45 -0
package/dist/components/ai/qualityScorecard.d.ts +11 -0
package/dist/components/ai/readerGrounding.d.ts +70 -0
package/dist/components/ai/suggestCharts.d.ts +34 -1
package/dist/components/ai/useConversationArc.d.ts +89 -0
package/dist/components/ai/useNavigationSync.d.ts +61 -0
package/dist/components/ai/variantDiscovery.d.ts +168 -0
package/dist/components/charts/geo/ChoroplethMap.d.ts +2 -1
package/dist/components/charts/network/CirclePack.d.ts +2 -1
package/dist/components/charts/network/OrbitDiagram.d.ts +1 -1
package/dist/components/charts/network/TreeDiagram.d.ts +2 -1
package/dist/components/charts/network/Treemap.d.ts +2 -1
package/dist/components/charts/realtime/RealtimeHeatmap.d.ts +3 -0
package/dist/components/charts/realtime/RealtimeHistogram.d.ts +4 -1
package/dist/components/charts/realtime/RealtimeLineChart.d.ts +3 -0
package/dist/components/charts/realtime/RealtimeSwarmChart.d.ts +3 -0
package/dist/components/charts/realtime/RealtimeWaterfallChart.d.ts +3 -0
package/dist/components/charts/shared/ChartError.d.ts +2 -1
package/dist/components/charts/shared/annotationHierarchy.d.ts +42 -0
package/dist/components/charts/shared/annotationResolvers.d.ts +3 -2
package/dist/components/charts/shared/annotationRules.d.ts +16 -0
package/dist/components/charts/shared/annotationTypes.d.ts +14 -0
package/dist/components/charts/shared/auditAccessibility.d.ts +90 -0
package/dist/components/charts/shared/chartSpecs.d.ts +2 -3
package/dist/components/charts/shared/diagnoseConfig.d.ts +4 -6
package/dist/components/charts/shared/selectionUtils.d.ts +5 -2
package/dist/components/charts/shared/streamPropsHelpers.d.ts +2 -0
package/dist/components/charts/shared/types.d.ts +5 -1
package/dist/components/charts/shared/withChartWrapper.d.ts +1 -1
package/dist/components/charts/value/BigNumber.capability.d.ts +13 -0
package/dist/components/charts/value/BigNumber.d.ts +14 -0
package/dist/components/charts/value/formatting.d.ts +40 -0
package/dist/components/charts/value/thresholdSparkline.d.ts +40 -0
package/dist/components/charts/value/types.d.ts +292 -0
package/dist/components/charts/xy/MinimapChart.d.ts +2 -1
package/dist/components/charts/xy/ScatterplotMatrix.d.ts +2 -1
package/dist/components/realtime/lifecycleBands.d.ts +44 -0
package/dist/components/realtime/types.d.ts +23 -8
package/dist/components/recipes/annotationDensity.d.ts +69 -0
package/dist/components/recipes/annotationLayout.d.ts +93 -0
package/dist/components/semiotic-ai.d.ts +38 -15
package/dist/components/semiotic-realtime.d.ts +2 -0
package/dist/components/semiotic-recipes.d.ts +4 -0
package/dist/components/semiotic-server.d.ts +2 -1
package/dist/components/semiotic-utils.d.ts +8 -0
package/dist/components/semiotic-value.d.ts +55 -0
package/dist/components/semiotic.d.ts +7 -0
package/dist/components/server/renderEvidence.d.ts +92 -0
package/dist/components/server/renderToStaticSVG.d.ts +14 -1
package/dist/components/server/staticAnnotations.d.ts +2 -0
package/dist/components/stream/AccessibleDataTable.d.ts +15 -6
package/dist/components/stream/FocusRing.d.ts +2 -1
package/dist/components/stream/MarginalGraphics.d.ts +2 -1
package/dist/components/stream/NetworkSVGOverlay.d.ts +13 -6
package/dist/components/stream/OrdinalBrushOverlay.d.ts +19 -1
package/dist/components/stream/OrdinalSVGOverlay.d.ts +4 -2
package/dist/components/stream/SVGOverlay.d.ts +5 -2
package/dist/components/stream/XYBrushOverlay.d.ts +21 -1
package/dist/components/stream/geoTypes.d.ts +3 -0
package/dist/components/stream/networkTypes.d.ts +2 -0
package/dist/components/stream/ordinalTypes.d.ts +2 -0
package/dist/components/stream/types.d.ts +2 -0
package/dist/geo.min.js +1 -1
package/dist/geo.module.min.js +1 -1
package/dist/network.min.js +1 -1
package/dist/network.module.min.js +1 -1
package/dist/ordinal.min.js +1 -1
package/dist/ordinal.module.min.js +1 -1
package/dist/realtime.min.js +1 -1
package/dist/realtime.module.min.js +1 -1
package/dist/semiotic-ai.d.ts +38 -15
package/dist/semiotic-ai.min.js +1 -1
package/dist/semiotic-ai.module.min.js +1 -1
package/dist/semiotic-realtime.d.ts +2 -0
package/dist/semiotic-recipes.d.ts +4 -0
package/dist/semiotic-recipes.min.js +1 -1
package/dist/semiotic-recipes.module.min.js +1 -1
package/dist/semiotic-server.d.ts +2 -1
package/dist/semiotic-themes.min.js +1 -1
package/dist/semiotic-themes.module.min.js +1 -1
package/dist/semiotic-utils.d.ts +8 -0
package/dist/semiotic-utils.min.js +1 -1
package/dist/semiotic-utils.module.min.js +1 -1
package/dist/semiotic-value.d.ts +55 -0
package/dist/semiotic-value.min.js +2 -0
package/dist/semiotic-value.module.min.js +2 -0
package/dist/semiotic.d.ts +7 -0
package/dist/semiotic.min.js +1 -1
package/dist/semiotic.module.min.js +1 -1
package/dist/server.min.js +1 -1
package/dist/server.module.min.js +1 -1
package/dist/xy.min.js +1 -1
package/dist/xy.module.min.js +1 -1
package/package.json +19 -5

package/ai/dist/mcp-server.js CHANGED Viewed

@@ -6890,7 +6890,7 @@ var require_dist = __commonJS({
 var require_componentMetadata = __commonJS({
   "ai/componentMetadata.cjs"(exports2, module2) {
     "use strict";
-    var CATEGORY_ORDER = ["xy", "ordinal", "network", "geo", "realtime"];
+    var CATEGORY_ORDER = ["xy", "ordinal", "network", "geo", "realtime", "value"];
     var COMPONENTS_BY_CATEGORY = {
       xy: [
         "LineChart",
@@ -6947,6 +6947,9 @@ var require_componentMetadata = __commonJS({
         "RealtimeSwarmChart",
         "RealtimeWaterfallChart",
         "RealtimeHeatmap"
+      ],
+      value: [
+        "BigNumber"
       ]
     };
     var COMPONENT_TO_CATEGORY = /* @__PURE__ */ new Map();
@@ -6972,11 +6975,12 @@ var require_componentMetadata = __commonJS({
       const name = typeof entryOrName === "string" ? entryOrName : entryOrName.name;
       const category = categoryForComponent(name);
       const isPushOnly = category === "realtime" && name.startsWith("Realtime");
+      const isValueCategory = category === "value";
       return {
         name,
         category,
         importPath: importPathForCategory(category),
-        renderable: !isPushOnly,
+        renderable: !isPushOnly && !isValueCategory,
         description: typeof entryOrName === "string" ? void 0 : entryOrName.description
       };
     }
@@ -32429,6 +32433,7 @@ ${errors.join("\n")}`
 }
 // ai/mcp-server.ts
+var import_server2 = require("semiotic/server");
 var import_ai3 = require("semiotic/ai");
 var {
   componentIndexFromSchema,
@@ -32454,6 +32459,8 @@ for (const tool of schema.tools) {
 var allComponentNames = Object.keys(schemaByComponent).sort();
 var componentNames = Object.keys(COMPONENT_REGISTRY).sort();
 var REPO = "nteract/semiotic";
+var SEMIOTIC_CHART_WIDGET_URI = "ui://semiotic/chart-widget.html";
+var MCP_APP_MIME_TYPE = "text/html;profile=mcp-app";
 function aiFilePath(fileName) {
   return path.resolve(__dirname, "..", fileName);
 }
@@ -32472,6 +32479,30 @@ function textResource(uri, mimeType, text) {
     }]
   };
 }
+function appResource(uri, text) {
+  return {
+    contents: [{
+      uri: uri.href,
+      mimeType: MCP_APP_MIME_TYPE,
+      text,
+      _meta: {
+        ui: {
+          prefersBorder: true,
+          csp: {
+            connectDomains: [],
+            resourceDomains: []
+          }
+        },
+        "openai/widgetDescription": "Interactive Semiotic chart preview rendered by the semiotic-mcp server.",
+        "openai/widgetPrefersBorder": true,
+        "openai/widgetCSP": {
+          connect_domains: [],
+          resource_domains: []
+        }
+      }
+    }]
+  };
+}
 function promptMessage(text) {
   return {
     messages: [{
@@ -32483,6 +32514,279 @@ function promptMessage(text) {
     }]
   };
 }
+function stripUnsafeSvg(svg) {
+  return svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/\son[a-z]+\s*=\s*"[^"]*"/gi, "").replace(/\son[a-z]+\s*=\s*'[^']*'/gi, "").replace(/\s(href|xlink:href)\s*=\s*(["'])\s*javascript:[^"']*\2/gi, "");
+}
+function parseRenderEvidence(result) {
+  const evidenceText = result.content.find((block) => block.text.startsWith("Render evidence:\n"))?.text;
+  if (!evidenceText) return null;
+  try {
+    return JSON.parse(evidenceText.replace(/^Render evidence:\n/, ""));
+  } catch {
+    return null;
+  }
+}
+function chartTitleFromProps(component, props) {
+  return typeof props.title === "string" && props.title.trim() ? props.title.trim() : component;
+}
+function chartDatumCount(props) {
+  if (Array.isArray(props.data)) return props.data.length;
+  if (Array.isArray(props.nodes)) return props.nodes.length;
+  if (Array.isArray(props.edges)) return props.edges.length;
+  if (Array.isArray(props.links)) return props.links.length;
+  return null;
+}
+function renderSemioticChartWidgetHTML() {
+  return `
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root {
+      color-scheme: light dark;
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --bg: Canvas;
+      --fg: CanvasText;
+      --muted: color-mix(in srgb, CanvasText 62%, Canvas 38%);
+      --border: color-mix(in srgb, CanvasText 16%, Canvas 84%);
+      --panel: color-mix(in srgb, Canvas 94%, CanvasText 6%);
+      --accent: #2f6fed;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); }
+    main { display: grid; gap: 10px; padding: 12px; min-height: 100vh; }
+    header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
+    h1 { font-size: 16px; line-height: 1.25; margin: 0; font-weight: 650; }
+    .summary { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
+    .toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
+    button {
+      border: 1px solid var(--border);
+      background: var(--panel);
+      color: var(--fg);
+      border-radius: 6px;
+      font: inherit;
+      font-size: 12px;
+      padding: 6px 8px;
+      cursor: pointer;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+    label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+    input[type="range"] { width: 92px; }
+    .chart-shell {
+      overflow: auto;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      min-height: 260px;
+      background: white;
+    }
+    .chart-shell.fit svg { width: 100%; height: auto; }
+    .chart {
+      min-width: 360px;
+      padding: 10px;
+      transform-origin: top left;
+    }
+    .chart svg { display: block; max-width: none; }
+    .empty {
+      min-height: 240px;
+      display: grid;
+      place-items: center;
+      color: var(--muted);
+      text-align: center;
+      padding: 24px;
+    }
+    .drawer {
+      display: none;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: auto;
+      max-height: 220px;
+    }
+    .drawer.open { display: block; }
+    pre {
+      margin: 0;
+      padding: 10px;
+      font-size: 12px;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+    }
+    table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    th, td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
+    th { position: sticky; top: 0; background: var(--panel); }
+    .hover {
+      position: fixed;
+      pointer-events: none;
+      z-index: 10;
+      max-width: 280px;
+      padding: 6px 8px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--fg);
+      box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+      font-size: 12px;
+      display: none;
+    }
+    @media (max-width: 520px) {
+      main { padding: 10px; }
+      header { display: grid; }
+      .toolbar { justify-content: start; }
+      .chart { min-width: 300px; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <div>
+        <h1 id="title">Semiotic chart</h1>
+        <div class="summary" id="summary">Waiting for a tool result...</div>
+      </div>
+      <div class="toolbar" aria-label="Chart controls">
+        <button id="fit" type="button" aria-pressed="true">Fit</button>
+        <button id="data" type="button" aria-pressed="false">Data</button>
+        <button id="evidence" type="button" aria-pressed="false">Evidence</button>
+        <label>Zoom <input id="zoom" type="range" min="60" max="180" value="100" /></label>
+      </div>
+    </header>
+    <section id="chartShell" class="chart-shell fit" aria-label="Rendered Semiotic chart">
+      <div id="chart" class="chart"><div class="empty">Ask ChatGPT to render a Semiotic chart.</div></div>
+    </section>
+    <section id="dataDrawer" class="drawer" aria-label="Chart data"></section>
+    <section id="evidenceDrawer" class="drawer" aria-label="Render evidence"><pre id="evidenceText">{}</pre></section>
+  </main>
+  <div id="hover" class="hover" role="status" aria-live="polite"></div>
+  <script>
+    const state = { output: null, meta: null };
+    const titleEl = document.getElementById("title");
+    const summaryEl = document.getElementById("summary");
+    const chartEl = document.getElementById("chart");
+    const chartShell = document.getElementById("chartShell");
+    const dataDrawer = document.getElementById("dataDrawer");
+    const evidenceDrawer = document.getElementById("evidenceDrawer");
+    const evidenceText = document.getElementById("evidenceText");
+    const hover = document.getElementById("hover");
+    const fitButton = document.getElementById("fit");
+    const dataButton = document.getElementById("data");
+    const evidenceButton = document.getElementById("evidence");
+    const zoom = document.getElementById("zoom");
+    function html(value) {
+      return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;"
+      })[char]);
+    }
+    function currentPayload() {
+      const openai = window.openai || {};
+      const output = state.output || openai.toolOutput || null;
+      const meta = state.meta || openai.toolResultMetadata || openai.toolResponseMetadata || openai._meta || null;
+      return { output, meta };
+    }
+    function sampleRows(meta) {
+      const props = meta?.props || {};
+      if (Array.isArray(props.data)) return props.data.slice(0, 50);
+      if (Array.isArray(props.nodes)) return props.nodes.slice(0, 50);
+      if (Array.isArray(props.edges)) return props.edges.slice(0, 50);
+      if (Array.isArray(props.links)) return props.links.slice(0, 50);
+      return [];
+    }
+    function renderTable(rows) {
+      if (!rows.length) return '<pre>No row data was provided in the widget metadata.</pre>';
+      const columns = Array.from(rows.reduce((set, row) => {
+        Object.keys(row || {}).forEach((key) => set.add(key));
+        return set;
+      }, new Set()));
+      return '<table><thead><tr>' + columns.map((col) => '<th>' + html(col) + '</th>').join('') +
+        '</tr></thead><tbody>' + rows.map((row) => '<tr>' + columns.map((col) => '<td>' + html(row?.[col]) + '</td>').join('') + '</tr>').join('') + '</tbody></table>';
+    }
+    function render(output, meta) {
+      const payload = output || {};
+      const hidden = meta || {};
+      titleEl.textContent = payload.title || payload.component || "Semiotic chart";
+      summaryEl.textContent = payload.summary || "Rendered by semiotic-mcp.";
+      const svg = hidden.svg || payload.svg;
+      if (svg) {
+        chartEl.innerHTML = svg;
+      } else {
+        chartEl.innerHTML = '<div class="empty">No SVG payload received. The model-visible chart summary is still available above.</div>';
+      }
+      const rows = sampleRows(hidden);
+      dataDrawer.innerHTML = renderTable(rows);
+      evidenceText.textContent = JSON.stringify(payload.evidence || hidden.evidence || {}, null, 2);
+    }
+    function rerenderFromGlobals() {
+      const payload = currentPayload();
+      render(payload.output, payload.meta);
+    }
+    fitButton.addEventListener("click", () => {
+      const enabled = !chartShell.classList.contains("fit");
+      chartShell.classList.toggle("fit", enabled);
+      fitButton.setAttribute("aria-pressed", String(enabled));
+    });
+    dataButton.addEventListener("click", () => {
+      const open = !dataDrawer.classList.contains("open");
+      dataDrawer.classList.toggle("open", open);
+      dataButton.setAttribute("aria-pressed", String(open));
+    });
+    evidenceButton.addEventListener("click", () => {
+      const open = !evidenceDrawer.classList.contains("open");
+      evidenceDrawer.classList.toggle("open", open);
+      evidenceButton.setAttribute("aria-pressed", String(open));
+    });
+    zoom.addEventListener("input", () => {
+      chartEl.style.transform = 'scale(' + Number(zoom.value) / 100 + ')';
+      chartEl.style.width = (10000 / Number(zoom.value)) + '%';
+    });
+    chartEl.addEventListener("mousemove", (event) => {
+      const target = event.target;
+      if (!(target instanceof Element) || target === chartEl) {
+        hover.style.display = "none";
+        return;
+      }
+      const label = target.getAttribute("aria-label") || target.textContent?.trim() || target.tagName.toLowerCase();
+      hover.textContent = label.slice(0, 180);
+      hover.style.left = Math.min(event.clientX + 12, window.innerWidth - 300) + "px";
+      hover.style.top = Math.min(event.clientY + 12, window.innerHeight - 70) + "px";
+      hover.style.display = "block";
+    });
+    chartEl.addEventListener("mouseleave", () => {
+      hover.style.display = "none";
+    });
+    window.addEventListener("message", (event) => {
+      if (event.source !== window.parent) return;
+      const message = event.data;
+      if (!message || message.jsonrpc !== "2.0") return;
+      if (message.method === "ui/notifications/tool-result") {
+        state.output = message.params?.structuredContent || null;
+        state.meta = message.params?._meta || null;
+        render(state.output, state.meta);
+      }
+    }, { passive: true });
+    window.addEventListener("openai:set_globals", (event) => {
+      const globals = event.detail?.globals || {};
+      state.output = globals.toolOutput || state.output;
+      state.meta = globals.toolResultMetadata || globals.toolResponseMetadata || globals._meta || state.meta;
+      rerenderFromGlobals();
+    }, { passive: true });
+    rerenderFromGlobals();
+  </script>
+</body>
+</html>`.trim();
+}
 async function getSchemaHandler(args) {
   const component = args.component;
   if (!component) {
@@ -32559,6 +32863,17 @@ async function renderChartHandler(args) {
     };
   }
   let svg = result.svg;
+  let evidenceBlock = null;
+  try {
+    const { svg: evidenceSvg, evidence } = (0, import_server2.renderChartWithEvidence)(component, props);
+    svg = evidenceSvg;
+    evidenceBlock = {
+      type: "text",
+      text: `Render evidence:
+${JSON.stringify(evidence, null, 2)}`
+    };
+  } catch {
+  }
   if (theme && Object.keys(theme).length > 0) {
     const validVars = Object.entries(theme).filter(([k]) => k.startsWith("--semiotic-")).map(([k, v]) => `${k}: ${v}`).join("; ");
     if (validVars) {
@@ -32572,7 +32887,10 @@ async function renderChartHandler(args) {
       const pngBuffer = await sharpFn(Buffer.from(svg)).png().toBuffer();
       const base643 = pngBuffer.toString("base64");
       return {
-        content: [{ type: "text", text: `data:image/png;base64,${base643}` }]
+        content: [
+          { type: "text", text: `data:image/png;base64,${base643}` },
+          ...evidenceBlock ? [evidenceBlock] : []
+        ]
       };
     } catch (err) {
       if (err.code === "MODULE_NOT_FOUND" || err.code === "ERR_MODULE_NOT_FOUND") {
@@ -32595,7 +32913,52 @@ ${svg}` }],
     }
   }
   return {
-    content: [{ type: "text", text: svg }]
+    content: [
+      { type: "text", text: svg },
+      ...evidenceBlock ? [evidenceBlock] : []
+    ]
+  };
+}
+async function renderInteractiveChartHandler(args) {
+  const component = args.component;
+  const props = args.props ?? {};
+  const rendered = await renderChartHandler({
+    component,
+    props,
+    theme: args.theme,
+    format: "svg"
+  });
+  if (rendered.isError) return rendered;
+  const svg = stripUnsafeSvg(rendered.content[0]?.text ?? "");
+  const evidence = parseRenderEvidence(rendered);
+  const title = chartTitleFromProps(component || "Semiotic chart", props);
+  const datumCount = chartDatumCount(props);
+  const summary = [
+    `Rendered ${title} with ${component}.`,
+    datumCount == null ? "No row count was inferred from props." : `${datumCount} input row${datumCount === 1 ? "" : "s"} available in the widget data drawer.`,
+    "Use the widget controls to zoom, fit width, inspect data, and inspect render evidence."
+  ].join(" ");
+  return {
+    content: [{
+      type: "text",
+      text: `Rendered ${title} (${component}) as an interactive ChatGPT Apps widget.`
+    }],
+    structuredContent: {
+      component: component ?? "SemioticChart",
+      title,
+      summary,
+      datumCount,
+      evidence
+    },
+    _meta: {
+      component,
+      title,
+      props,
+      theme: args.theme ?? null,
+      svg,
+      evidence,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    }
   };
 }
 function filterUsageModeDiagnoses(component, usageMode, diagnoses) {
@@ -32643,6 +33006,22 @@ ${contracts}` : msg}` }] };
     isError: true
   };
 }
+async function auditAccessibilityHandler(args) {
+  const component = args.component;
+  const props = args.props ?? {};
+  if (!component) {
+    return {
+      content: [{ type: "text", text: "Missing 'component' field. Provide { component: 'LineChart', props: { ... } }." }],
+      isError: true
+    };
+  }
+  const result = (0, import_ai3.auditAccessibility)(component, props, { inChartContainer: args.inChartContainer === true, describe: args.describe === true, navigable: args.navigable === true });
+  return {
+    content: [{ type: "text", text: (0, import_ai3.formatAccessibilityAudit)(result) }],
+    // Only block on provable critical failures; warnings/manual items are advisory.
+    isError: !result.ok
+  };
+}
 async function reportIssueHandler(args) {
   const title = args.title;
   const body = args.body;
@@ -32743,6 +33122,99 @@ Dark-mode presets: ${THEME_PRESET_NAMES.filter((n) => n.includes("dark")).join("
     content: [{ type: "text", text: usage.join("\n") }]
   };
 }
+function profileInputFromVariantArgs(args) {
+  const props = args.props ?? {};
+  if (Array.isArray(args.data)) {
+    return { data: args.data };
+  }
+  if (Array.isArray(props.data)) {
+    return { data: props.data };
+  }
+  if (Array.isArray(props.nodes) && (Array.isArray(props.edges) || Array.isArray(props.links))) {
+    return {
+      data: [],
+      rawInput: {
+        nodes: props.nodes,
+        edges: props.edges ?? props.links
+      }
+    };
+  }
+  if (props.data && typeof props.data === "object" && !Array.isArray(props.data)) {
+    return { data: [], rawInput: props.data };
+  }
+  return { data: [] };
+}
+function buildVariantProposalProps(proposal, profile, audience) {
+  if (proposal.buildProps) return proposal.buildProps(profile, audience);
+  const capability = (0, import_ai3.getCapability)(proposal.baseComponent);
+  const variant = proposal.variantKey ? capability?.variants?.find((v) => v.key === proposal.variantKey) : void 0;
+  return capability ? capability.buildProps(profile, variant) : {};
+}
+async function proposeChartVariantsHandler(args) {
+  const { component, intent, maxResults, audience } = args;
+  const capability = (0, import_ai3.getCapability)(component);
+  if (!capability) {
+    return {
+      content: [{ type: "text", text: `No chart capability registered for "${component}". Call suggestCharts first to pick from known capability components.` }],
+      isError: true
+    };
+  }
+  const { data, rawInput } = profileInputFromVariantArgs(args);
+  const profile = (0, import_ai3.profileData)(data, { rawInput });
+  const intentArg = Array.isArray(intent) ? intent : intent ? [intent] : void 0;
+  const fitReason = capability.fits(profile);
+  const proposals = (0, import_ai3.proposeVariant)(component, capability, {
+    profile,
+    audience,
+    intent: intentArg,
+    existingVariants: capability.variants
+  });
+  const ranked = proposals.map((proposal) => {
+    const score = (0, import_ai3.evaluateVariantProposal)(proposal, profile, audience, {
+      intent: intentArg,
+      baselineComponent: component
+    });
+    const { buildProps: _buildProps, ...proposalMeta } = proposal;
+    return {
+      proposal: proposalMeta,
+      score,
+      props: buildVariantProposalProps(proposal, profile, audience)
+    };
+  }).sort((a, b) => {
+    if (b.score.fit !== a.score.fit) return b.score.fit - a.score.fit;
+    if (a.score.risk !== b.score.risk) return a.score.risk - b.score.risk;
+    return b.score.novelty - a.score.novelty;
+  }).slice(0, maxResults ?? 8);
+  const lines = [
+    `${ranked.length} variant proposal${ranked.length === 1 ? "" : "s"} for ${component}${intentArg ? ` (intent: ${intentArg.join(", ")})` : ""}:`,
+    ...fitReason ? [`Base chart fit warning: ${fitReason}`] : [],
+    "",
+    ...ranked.map((entry, i) => {
+      const label = entry.proposal.label ?? entry.proposal.variantKey ?? entry.proposal.id;
+      const tags = entry.proposal.tags?.length ? ` [${entry.proposal.tags.join(", ")}]` : "";
+      const reasons = entry.score.reasons.length ? `
+   ${entry.score.reasons.join("; ")}` : "";
+      return `${i + 1}. ${entry.proposal.baseComponent} / ${label}${tags} (fit ${entry.score.fit.toFixed(1)}/5, novelty ${entry.score.novelty.toFixed(2)}, risk ${entry.score.risk.toFixed(2)})${reasons}`;
+    })
+  ];
+  return {
+    content: [{ type: "text", text: lines.join("\n") }],
+    structuredContent: {
+      component,
+      profile: {
+        rowCount: profile.rowCount,
+        primary: profile.primary,
+        categoryCount: profile.categoryCount ?? null,
+        seriesCount: profile.seriesCount ?? null,
+        hasHierarchy: profile.hasHierarchy,
+        hasNetwork: profile.hasNetwork,
+        hasGeo: profile.hasGeo
+      },
+      fitReason,
+      proposals: ranked
+    }
+  };
+}
 async function suggestChartsHandler(args) {
   const { data, intent, maxResults, allow, deny, audience } = args;
   const intentArg = Array.isArray(intent) ? intent : intent ? [intent] : void 0;
@@ -32903,6 +33375,34 @@ Contextual instructions:
   }
   return { content, structuredContent: { summary, component, props } };
 }
+async function groundChartHandler(args) {
+  const component = args.component;
+  const props = args.props ?? {};
+  if (!component) {
+    return {
+      content: [{ type: "text", text: "Missing 'component' field. Provide { component: 'LineChart', props: { ... } }." }],
+      isError: true
+    };
+  }
+  const capability = (0, import_ai3.getCapability)(component);
+  const grounding = (0, import_ai3.buildReaderGrounding)(component, props, { capability });
+  const nodeCount = grounding.structure ? (0, import_ai3.countNodes)(grounding.structure) : 0;
+  const lines = [
+    `Reader grounding for ${component} \u2014 the payload an agent reads to interpret this chart without seeing it:`,
+    "",
+    `L1\u2013L3 (description): ${grounding.description.text}`,
+    grounding.intent ? `L4 (intent \xB7 ${grounding.intent.act}): ${grounding.intent.sentence}` : "L4 (intent): not resolved (no capability for this component).",
+    "",
+    `Structure: ${nodeCount} navigable node(s) (chart \u2192 axes/series \u2192 datum) in structuredContent.structure.`,
+    "",
+    "Combined text:",
+    grounding.text
+  ];
+  return {
+    content: [{ type: "text", text: lines.join("\n") }],
+    structuredContent: grounding
+  };
+}
 function createServer2() {
   const srv = new McpServer({
     name: "semiotic",
@@ -32961,6 +33461,27 @@ function createServer2() {
     },
     (uri) => textResource(uri, "text/markdown", readAIFile("examples.md"))
   );
+  srv.registerResource(
+    "semiotic-chatgpt-chart-widget",
+    SEMIOTIC_CHART_WIDGET_URI,
+    {
+      title: "Semiotic ChatGPT Chart Widget",
+      description: "MCP Apps widget template for interactive Semiotic chart previews inside ChatGPT.",
+      mimeType: MCP_APP_MIME_TYPE,
+      _meta: {
+        ui: {
+          prefersBorder: true,
+          csp: {
+            connectDomains: [],
+            resourceDomains: []
+          }
+        },
+        "openai/widgetDescription": "Interactive Semiotic chart preview rendered by the semiotic-mcp server.",
+        "openai/widgetPrefersBorder": true
+      }
+    },
+    (uri) => appResource(uri, renderSemioticChartWidgetHTML())
+  );
   srv.registerPrompt(
     "build-semiotic-chart",
     {
@@ -33050,7 +33571,7 @@ function createServer2() {
   );
   srv.tool(
     "renderChart",
-    `Render a Semiotic chart to static SVG or PNG. This is a static snapshot path: props must include data immediately, and ref/push-mode charts cannot be rendered through this tool. Returns SVG string (default) or Base64-encoded PNG image. Optionally pass theme CSS custom properties (--semiotic-bg, --semiotic-text, etc.) to style the output. PNG requires the 'sharp' package to be installed. Available components: ${componentNames.join(", ")}.`,
+    `Render a Semiotic chart to static SVG or PNG. This is a static snapshot path: props must include data immediately, and ref/push-mode charts cannot be rendered through this tool. Returns SVG string (default) or Base64-encoded PNG image, plus a "Render evidence" JSON block (mark counts by type, resolved axis domains, empty flag, annotation count, accessible name) \u2014 read the evidence instead of parsing the SVG to verify the chart actually rendered data marks. Optionally pass theme CSS custom properties (--semiotic-bg, --semiotic-text, etc.) to style the output. PNG requires the 'sharp' package to be installed. Available components: ${componentNames.join(", ")}.`,
     {
       component: external_exports3.string().describe("Chart component name, e.g. 'LineChart', 'BarChart'"),
       props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).optional().describe("Chart props object, e.g. { data: [...], xAccessor: 'x' }."),
@@ -33059,6 +33580,38 @@ function createServer2() {
     },
     renderChartHandler
   );
+  srv.registerTool(
+    "renderInteractiveChart",
+    {
+      title: "Render interactive Semiotic chart",
+      description: `Render a static-data Semiotic chart as a ChatGPT Apps widget. Use this after suggestCharts/getSchema/diagnoseConfig when the user wants to see an interactive chart inside ChatGPT. The server renders Semiotic to SVG and the widget adds fit, zoom, data, hover, and render-evidence controls. Available components: ${componentNames.join(", ")}.`,
+      inputSchema: {
+        component: external_exports3.string().describe("Renderable chart component name, e.g. 'LineChart', 'BarChart', 'GaugeChart'."),
+        props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).optional().describe("Static Semiotic chart props, including data/accessors where required."),
+        theme: external_exports3.record(external_exports3.string(), external_exports3.string()).optional().describe("CSS custom properties such as { '--semiotic-bg': '#fff', '--semiotic-text': '#111' }. Only --semiotic-* variables are applied.")
+      },
+      outputSchema: {
+        component: external_exports3.string(),
+        title: external_exports3.string(),
+        summary: external_exports3.string(),
+        datumCount: external_exports3.number().nullable(),
+        evidence: external_exports3.record(external_exports3.string(), external_exports3.unknown()).nullable()
+      },
+      annotations: {
+        readOnlyHint: true,
+        destructiveHint: false,
+        idempotentHint: true,
+        openWorldHint: false
+      },
+      _meta: {
+        ui: { resourceUri: SEMIOTIC_CHART_WIDGET_URI },
+        "openai/outputTemplate": SEMIOTIC_CHART_WIDGET_URI,
+        "openai/toolInvocation/invoking": "Rendering Semiotic chart...",
+        "openai/toolInvocation/invoked": "Rendered Semiotic chart."
+      }
+    },
+    renderInteractiveChartHandler
+  );
   srv.tool(
     "diagnoseConfig",
     "Diagnose a Semiotic chart configuration for common problems (empty data, bad dimensions, missing accessors, wrong data shape, color contrast issues, etc). Pass usageMode='push' for ref-based React HOCs that intentionally omit data; omit usageMode or pass 'static' for renderChart/MCP/server configs where data is required. Checks WCAG color contrast ratios and suggests COLOR_BLIND_SAFE_CATEGORICAL for accessibility. Returns a human-readable diagnostic report with actionable fixes.",
@@ -33069,6 +33622,18 @@ function createServer2() {
     },
     diagnoseConfigHandler
   );
+  srv.tool(
+    "auditAccessibility",
+    "Audit a Semiotic chart configuration against the Chartability (POUR-CAF) accessibility framework \u2014 Perceivable, Operable, Understandable, Robust, Compromising, Assistive, Flexible. Statically grades the config (no DOM/AT): credits the built-ins every HOC ships (keyboard nav, focus ring, skip link, screen-reader data table, reduced-motion + forced-colors, shareable state), flags author-actionable gaps (missing title/description/summary, low contrast, small text, color-only encoding, undescribed trends, data density), and routes everything that needs real assistive-technology testing to a 'manual' item. Returns a per-principle report with the 14 critical heuristics marked. Pass inChartContainer=true to credit data-download/share affordances. Pair with manual NVDA/JAWS/VoiceOver testing \u2014 Chartability is not a pass/fail certification.",
+    {
+      component: external_exports3.string().describe("Chart component name, e.g. 'LineChart'"),
+      props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).optional().describe("Chart props object, e.g. { data: [...], xAccessor: 'x', title: '...' }."),
+      inChartContainer: external_exports3.boolean().optional().describe("True if the chart is (or will be) wrapped in a ChartContainer exposing data-download/copy-config actions."),
+      describe: external_exports3.boolean().optional().describe("True if ChartContainer's describe option (auto-generated L1\u2013L3 description via describeChart) is enabled \u2014 passes the 'features described' heuristic."),
+      navigable: external_exports3.boolean().optional().describe("True if ChartContainer's navigable option (structured navigation tree via buildNavigationTree) is enabled \u2014 passes the 'navigable structure' heuristic.")
+    },
+    auditAccessibilityHandler
+  );
   srv.tool(
     "reportIssue",
     "Generate a GitHub issue URL for Semiotic bug reports or feature requests. Returns a URL the user can open to submit. For rendering bugs, include the component name, props summary, and any diagnoseConfig output in the body.",
@@ -33097,6 +33662,15 @@ function createServer2() {
     },
     interrogateChartHandler
   );
+  srv.tool(
+    "groundChart",
+    "Build the agent-reader grounding payload for a Semiotic chart: the layered L1\u2013L3 natural-language description, the L4 communicative-act sentence (what the chart is asking the reader to do \u2014 'this is an alerting chart; the spike warrants a closer look'), and a structured navigation tree (chart \u2192 axes/series \u2192 datum). This is the documented thing an LLM reads to interpret a chart faithfully without seeing the pixels \u2014 the reader-side complement to a capability descriptor. The L4 act is resolved from the chart's registered capability. Returns prose plus the full structured payload (description/intent/structure/text).",
+    {
+      component: external_exports3.string().describe("Chart component name, e.g. 'LineChart'"),
+      props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).describe("The full chart props including data")
+    },
+    groundChartHandler
+  );
   srv.tool(
     "suggestStreamCharts",
     "Recommend realtime/streaming Semiotic charts for a schema (not row data). Pass a schema describing field types plus optional throughput ('low'|'medium'|'high') and retention ('windowed'|'cumulative') hints; the engine ranks realtime charts (RealtimeLineChart, RealtimeHistogram, RealtimeHeatmap, RealtimeWaterfallChart, RealtimeSwarmChart, TemporalHistogram) by their fit. Use when the user is wiring up a live dashboard or monitoring view rather than visualizing a bounded dataset.",
@@ -33144,8 +33718,9 @@ function createServer2() {
             reason: external_exports3.string().optional()
           })
         ).optional(),
-        exposureLevel: external_exports3.union([external_exports3.literal(0), external_exports3.literal(1), external_exports3.literal(2)]).optional()
-      }).describe("Audience profile \u2014 familiarity, targets, exposure level."),
+        exposureLevel: external_exports3.union([external_exports3.literal(0), external_exports3.literal(1), external_exports3.literal(2)]).optional(),
+        receptionModality: external_exports3.enum(["visual", "screen-reader", "sonified", "agent"]).optional().describe("Reception channel \u2014 see suggestCharts.")
+      }).describe("Audience profile \u2014 familiarity, targets, exposure level, reception modality."),
       intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional(),
       maxResults: external_exports3.number().int().min(1).max(20).optional()
     },
@@ -33162,6 +33737,32 @@ function createServer2() {
     },
     repairChartConfigHandler
   );
+  srv.tool(
+    "proposeChartVariants",
+    "Propose and score chart variants for a selected Semiotic component. Uses the capability registry plus heuristic variant discovery: registered variants, conservative transforms, and same-intent cross-family alternatives. Returns ranked proposals with fit/novelty/risk scores, rationale, and ready-to-use props. Use after suggestCharts when an agent wants to actively explore variants rather than stop at the first chart recommendation.",
+    {
+      component: external_exports3.string().describe("Base chart component to vary, e.g. 'LineChart', 'BarChart', or 'BoxPlot'."),
+      props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).optional().describe("Existing chart props. If props.data is present it is profiled; network/hierarchy/geo object data can be passed here as raw input."),
+      data: external_exports3.array(external_exports3.record(external_exports3.string(), external_exports3.unknown())).optional().describe("Row data to profile. Overrides props.data when present."),
+      intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional().describe("Ranking intent(s), e.g. trend, distribution, rank, compare-categories, composition-over-time."),
+      maxResults: external_exports3.number().int().min(1).max(20).optional().describe("Cap on proposals returned (default 8)."),
+      audience: external_exports3.object({
+        name: external_exports3.string().optional(),
+        familiarity: external_exports3.record(external_exports3.string(), external_exports3.number()).optional(),
+        targets: external_exports3.record(
+          external_exports3.string(),
+          external_exports3.object({
+            direction: external_exports3.enum(["increase", "decrease"]),
+            weight: external_exports3.number().int().min(1).max(3).optional(),
+            reason: external_exports3.string().optional()
+          })
+        ).optional(),
+        exposureLevel: external_exports3.union([external_exports3.literal(0), external_exports3.literal(1), external_exports3.literal(2)]).optional(),
+        receptionModality: external_exports3.enum(["visual", "screen-reader", "sonified", "agent"]).optional().describe("Reception channel \u2014 see suggestCharts.")
+      }).optional().describe("Audience profile \u2014 familiarity, adoption targets, exposure level, and reception modality.")
+    },
+    proposeChartVariantsHandler
+  );
   srv.tool(
     "suggestCharts",
     "Recommend Semiotic charts for a dataset using heuristic capability descriptors. Each chart declares which data shapes it serves and which intents (trend, compare-categories, distribution, correlation, part-to-whole, etc.) it answers \u2014 the engine returns a ranked list with scores, reasons, caveats, and ready-to-use props. Heuristic only; no LLM call. Use the result as structured context when answering 'what chart should I use?' or generating chart code.",
@@ -33170,7 +33771,21 @@ function createServer2() {
       intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional().describe("Ranking intent. One of: trend, compare-series, compare-categories, rank, part-to-whole, distribution, correlation, flow, hierarchy, geo, outlier-detection, composition-over-time, change-detection. Custom intents accepted."),
       maxResults: external_exports3.number().int().min(1).max(40).optional().describe("Cap on suggestions returned (default 8)."),
       allow: external_exports3.array(external_exports3.string()).optional().describe("Restrict to these component names."),
-      deny: external_exports3.array(external_exports3.string()).optional().describe("Exclude these component names.")
+      deny: external_exports3.array(external_exports3.string()).optional().describe("Exclude these component names."),
+      audience: external_exports3.object({
+        name: external_exports3.string().optional(),
+        familiarity: external_exports3.record(external_exports3.string(), external_exports3.number()).optional(),
+        targets: external_exports3.record(
+          external_exports3.string(),
+          external_exports3.object({
+            direction: external_exports3.enum(["increase", "decrease"]),
+            weight: external_exports3.number().int().min(1).max(3).optional(),
+            reason: external_exports3.string().optional()
+          })
+        ).optional(),
+        exposureLevel: external_exports3.union([external_exports3.literal(0), external_exports3.literal(1), external_exports3.literal(2)]).optional(),
+        receptionModality: external_exports3.enum(["visual", "screen-reader", "sonified", "agent"]).optional().describe("Reception channel. A non-visual value down-ranks charts the audience can't receive in that channel (e.g. a many-slice pie for a screen reader) and adds receivability caveats.")
+      }).optional().describe("Audience profile \u2014 familiarity, adoption targets, exposure level, and reception modality.")
     },
     suggestChartsHandler
   );
@@ -33220,8 +33835,8 @@ async function main() {
     });
     httpServer.listen(port, () => {
       console.error(`Semiotic MCP server (HTTP) listening on http://localhost:${port}`);
-      console.error("Tools: getSchema, suggestChart, suggestCharts, suggestStreamCharts, suggestDashboard, suggestStretchCharts, repairChartConfig, renderChart, interrogateChart, diagnoseConfig, reportIssue, applyTheme");
-      console.error("Resources: semiotic://schema, semiotic://components, semiotic://behavior-contracts, semiotic://system-prompt, semiotic://examples");
+      console.error("Tools: getSchema, suggestChart, suggestCharts, proposeChartVariants, suggestStreamCharts, suggestDashboard, suggestStretchCharts, repairChartConfig, renderChart, renderInteractiveChart, interrogateChart, groundChart, diagnoseConfig, auditAccessibility, reportIssue, applyTheme");
+      console.error("Resources: semiotic://schema, semiotic://components, semiotic://behavior-contracts, semiotic://system-prompt, semiotic://examples, ui://semiotic/chart-widget.html");
     });
   } else {
     const srv = createServer2();