semiotic 3.7.0 → 3.7.1

package/CLAUDE.md

@@ -4,7 +4,7 @@
 - Install: `npm install semiotic`
 <!-- semiotic-bundle-sizes:start -->
 <!-- Auto-generated by scripts/sync-bundle-sizes.mjs — do not edit by hand. -->
-- **Use sub-path imports** — `semiotic/xy` (90KB gz), `semiotic/ordinal` (74KB gz), `semiotic/network` (68KB gz), `semiotic/geo` (55KB gz), `semiotic/realtime` (95KB gz), `semiotic/server` (127KB gz), `semiotic/utils` (37KB gz), `semiotic/recipes` (9KB gz), `semiotic/themes` (4KB gz), `semiotic/data` (3KB gz), `semiotic/value` (6KB gz), `semiotic/ai` (246KB gz). Full `semiotic` is 203KB gz.
+- **Use sub-path imports** — `semiotic/xy` (90KB gz), `semiotic/ordinal` (74KB gz), `semiotic/network` (68KB gz), `semiotic/geo` (55KB gz), `semiotic/realtime` (95KB gz), `semiotic/server` (128KB gz), `semiotic/utils` (38KB gz), `semiotic/recipes` (9KB gz), `semiotic/themes` (4KB gz), `semiotic/data` (3KB gz), `semiotic/value` (6KB gz), `semiotic/ai` (250KB gz). Full `semiotic` is 203KB gz.
 <!-- semiotic-bundle-sizes:end -->
 - CLI: `npx semiotic-ai [--schema|--compact|--examples|--doctor|--audit-a11y]` · MCP: `npx semiotic-mcp`
 
@@ -160,9 +160,10 @@ Also: **ScatterplotMatrix**, **ChartContainer** (`title`, `subtitle`, `actions`)
 HOC charts render SVG automatically in server environments. For standalone generation:
 
 ```ts
-import { renderChart, renderToImage, renderToAnimatedGif, renderDashboard } from "semiotic/server"
+import { renderChart, renderChartWithEvidence, renderToImage, renderToAnimatedGif, renderDashboard } from "semiotic/server"
 
 const svg = renderChart("BarChart", { data, categoryAccessor, valueAccessor, theme: "tufte", showLegend, showGrid, annotations })
+const { svg: svg2, evidence } = renderChartWithEvidence("BarChart", { data, categoryAccessor, valueAccessor })  // evidence: { markCount, markCountByType, empty, xDomain?, yDomain?, categories?, nodeCount?, edgeCount?, annotationCount, ariaLabel, warnings } — ground truth from the rendered scene; check `evidence.empty`/`markCount` instead of parsing SVG. MCP renderChart returns the same block.
 const png = await renderToImage("LineChart", { ... }, { format: "png", scale: 2 })  // requires sharp
 const gif = await renderToAnimatedGif("line", data, { xAccessor, yAccessor, theme: "dark" }, { fps: 12, transitionFrames: 4, decay: { type: "linear" } })  // requires sharp + gifenc
 const dashboard = renderDashboard([{ component: "BarChart", props }, { component: "PieChart", colSpan: 2, props }], { title, theme, layout: { columns: 2 } })

package/README.md

@@ -35,11 +35,11 @@ generate correct code without examples.
 Semiotic ships with everything an AI coding assistant needs to generate
 correct visualizations without trial and error:
 
-- **`semiotic/ai`** — a single import with the 47-chart capability catalog (XY, ordinal, network, realtime, geo, value), optimized for LLM code generation. Prefer family subpaths such as `semiotic/xy`, `semiotic/geo`, and `semiotic/value` when bundle size matters.
+- **`semiotic/ai`** — a single import with the 47-chart capability catalog (XY, ordinal, network, realtime, geo, value), optimized for LLM code generation. Note: the published entry files are pre-bundled, so importing one chart from `semiotic/ai` still ships most of the bundle — treat it as a codegen/tooling surface and use family subpaths (`semiotic/xy`, `semiotic/geo`, `semiotic/value`, …) in production code, at roughly half the single-chart cost.
 - **`ai/schema.json`** — machine-readable prop schemas for every component
 - **`npx semiotic-mcp`** — an MCP server for tool-based chart rendering in any MCP client
 - **`npx semiotic-ai --doctor`** — validate component + props JSON from the command line with typo suggestions and anti-pattern detection
-- **`diagnoseConfig(component, props)`** — programmatic anti-pattern detector with 12 checks and actionable fixes
+- **`diagnoseConfig(component, props)`** — programmatic anti-pattern detector with actionable fixes, spanning validation, encoding, accessibility, and misleading-design (deception) checks
 - **`CLAUDE.md`** — instruction files auto-synced for Claude, Cursor, Copilot, Windsurf, and Cline
 - **`llms.txt`** — machine-readable documentation following the emerging standard
 
@@ -320,13 +320,13 @@ Semiotic ships 12 entry points. **Don't import from `"semiotic"` unless you need
 | `semiotic/network` | **68 KB** | ForceDirectedGraph, SankeyDiagram, ProcessSankey, Treemap, + 4 more |
 | `semiotic/geo` | **55 KB** | ChoroplethMap, FlowMap, DistanceCartogram, ProportionalSymbolMap |
 | `semiotic/realtime` | **95 KB** | RealtimeLineChart, RealtimeHistogram, + 4 streaming charts |
-| `semiotic/server` | **127 KB** | renderChart, renderDashboard, renderToImage, renderToAnimatedGif |
-| `semiotic/utils` | **37 KB** | ThemeProvider, validators, serialization — no chart components |
+| `semiotic/server` | **128 KB** | renderChart, renderDashboard, renderToImage, renderToAnimatedGif |
+| `semiotic/utils` | **38 KB** | ThemeProvider, validators, serialization — no chart components |
 | `semiotic/recipes` | **9 KB** | Pure layout functions (waffle, marimekko, flextree, dagre, …) |
 | `semiotic/themes` | **4 KB** | Theme presets only (tufte, carbon, etc.) |
 | `semiotic/data` | **3 KB** | bin, rollup, groupBy, pivot, fromVegaLite |
 | `semiotic/value` | **6 KB** | BigNumber — focal-value KPI / scorecard (SingleValueFrame POC) |
-| `semiotic/ai` | **246 KB** | All 47 schema-backed charts + validation — optimized for LLM code generation |
+| `semiotic/ai` | **250 KB** | All 47 schema-backed charts + validation — optimized for LLM code generation |
 | `semiotic` | **203 KB** | Everything below (full bundle) |
 
 <!-- semiotic-bundle-sizes:end -->
@@ -411,13 +411,16 @@ Add to your MCP client config (e.g. `claude_desktop_config.json` for Claude Desk
 }
 ```
 
-No API keys or authentication required. The server runs locally via stdio. HTTP mode is also available for inspectors and web clients: `npx semiotic-mcp --http --port 3001`.
+No API keys or authentication required. The server runs locally via stdio. HTTP mode is also available for inspectors, web clients, and ChatGPT Apps SDK experiments: `npx semiotic-mcp --http --port 3001`.
+
+For ChatGPT developer mode, expose the HTTP endpoint over HTTPS with a tunnel and create a connector that points at `https://<your-tunnel>/mcp`. The experimental Apps SDK surface is `renderInteractiveChart`, which returns a `text/html;profile=mcp-app` widget template plus a hidden SVG payload rendered by Semiotic on the MCP server.
 
 ### Tools
 
 | Tool | Description |
 |------|-------------|
-| **`renderChart`** | Render a Semiotic chart to static SVG. Supports the components returned by `getSchema` that are marked `[renderable]`. Pass `{ component: "LineChart", props: { data: [...], xAccessor: "x", yAccessor: "y" } }`. Returns SVG string or validation errors with fix suggestions. |
+| **`renderChart`** | Render a Semiotic chart to static SVG. Supports the components returned by `getSchema` that are marked `[renderable]`. Pass `{ component: "LineChart", props: { data: [...], xAccessor: "x", yAccessor: "y" } }`. Returns SVG string plus a "Render evidence" JSON block (mark counts by scene type, resolved axis domains, empty flag, annotation count, accessible name) so agents can verify the chart drew data marks, or validation errors with fix suggestions. |
+| **`renderInteractiveChart`** | Render a static-data chart as a ChatGPT Apps widget. Uses the same Semiotic server render path as `renderChart`, then hydrates an iframe UI with fit, zoom, data, hover, and render-evidence controls. |
 | **`getSchema`** | Return the prop schema for a specific component. Pass `{ component: "LineChart" }` to get its props, or omit `component` to list all 47 chart schemas. Components marked `[renderable]` are available through `renderChart`; realtime charts require a browser/live environment. |
 | **`suggestChart`** | Legacy sample-row recommender. Pass `{ data: [{...}, ...] }` with 1–5 sample objects plus optional broad intent/capability filters. |
 | **`suggestCharts`** | Capability-based recommender for bounded row data. Returns ranked chart suggestions with scores, reasons, caveats, import paths, and ready-to-use props. |
@@ -439,6 +442,7 @@ No API keys or authentication required. The server runs locally via stdio. HTTP
 | **`semiotic://behavior-contracts`** | Agent-visible semantic rules for color precedence, required prop combinations, push refs, and renderability. |
 | **`semiotic://system-prompt`** | Compact AI instructions with import rules, chart props, SSR guidance, and pitfalls. |
 | **`semiotic://examples`** | Copy-paste chart examples by data shape. |
+| **`ui://semiotic/chart-widget.html`** | ChatGPT Apps / MCP Apps widget template used by `renderInteractiveChart`. |
 
 ### Prompts
 
@@ -490,6 +494,25 @@ Args: {
 → Returns: <svg>...</svg>
 ```
 
+### Example: render a ChatGPT Apps widget
+
+```
+Tool: renderInteractiveChart
+Args: {
+  "component": "BarChart",
+  "props": {
+    "title": "Revenue by Quarter",
+    "data": [
+      { "quarter": "Q1", "revenue": 120 },
+      { "quarter": "Q2", "revenue": 180 }
+    ],
+    "categoryAccessor": "quarter",
+    "valueAccessor": "revenue"
+  }
+}
+→ Returns: structured chart summary for the model + hidden SVG/widget metadata for ChatGPT.
+```
+
 ### Example: diagnose a broken config
 
 ```

package/ai/dist/mcp-server.js

@@ -32433,6 +32433,7 @@ ${errors.join("\n")}`
 }
 
 // ai/mcp-server.ts
+var import_server2 = require("semiotic/server");
 var import_ai3 = require("semiotic/ai");
 var {
   componentIndexFromSchema,
@@ -32458,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);
 }
@@ -32476,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: [{
@@ -32487,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) {
@@ -32563,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) {
@@ -32576,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") {
@@ -32599,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) {
@@ -33102,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",
     {
@@ -33191,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' }."),
@@ -33200,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.",
@@ -33423,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, proposeChartVariants, suggestStreamCharts, suggestDashboard, suggestStretchCharts, repairChartConfig, renderChart, interrogateChart, groundChart, diagnoseConfig, auditAccessibility, 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();

package/ai/schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "name": "semiotic",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "React data visualization library for charts, networks, and beyond",
   "tools": [
     {

package/ai/system-prompt.md

@@ -2,7 +2,7 @@
 
 <!-- semiotic-bundle-sizes:start -->
 <!-- Auto-generated by scripts/sync-bundle-sizes.mjs — do not edit by hand. -->
-**Use sub-path imports** — `semiotic/xy` (90KB gz), `semiotic/ordinal` (74KB gz), `semiotic/network` (68KB gz), `semiotic/geo` (55KB gz), `semiotic/realtime` (95KB gz), `semiotic/server` (127KB gz), `semiotic/utils` (37KB gz), `semiotic/recipes` (9KB gz), `semiotic/themes` (4KB gz), `semiotic/data` (3KB gz), `semiotic/value` (6KB gz), `semiotic/ai` (246KB gz). Full `semiotic` is 203KB gz.
+**Use sub-path imports** — `semiotic/xy` (90KB gz), `semiotic/ordinal` (74KB gz), `semiotic/network` (68KB gz), `semiotic/geo` (55KB gz), `semiotic/realtime` (95KB gz), `semiotic/server` (128KB gz), `semiotic/utils` (38KB gz), `semiotic/recipes` (9KB gz), `semiotic/themes` (4KB gz), `semiotic/data` (3KB gz), `semiotic/value` (6KB gz), `semiotic/ai` (250KB gz). Full `semiotic` is 203KB gz.
 <!-- semiotic-bundle-sizes:end -->
 
 ## Flat Array Data (`data: object[]`)
@@ -140,7 +140,7 @@ These rules are generated from `ai/behaviorContracts.cjs` and are consumed by `s
 
 ## Key Patterns
 - **Percentile band + main line**: Layer `<AreaChart yAccessor="p95" y0Accessor="p5" showLine={false} />` + `<LineChart yAccessor="p50" />`. AreaChart's `showLine` only draws the top edge, NOT a separate main line.
-- **SSR**: `renderChart("BarChart", props)` from `semiotic/server` — uses HOC names. Also `"Sparkline"` (no axes, 2px margins). `renderToImage()` (PNG), `renderToAnimatedGif()` (GIF), `renderDashboard()` (multi-chart). All accept `theme`. Required props: StackedBarChart needs `stackBy`, GroupedBarChart needs `groupBy`, StackedAreaChart needs `areaBy`, BubbleChart needs `sizeBy`, FunnelChart uses `stepAccessor`, GaugeChart needs `value` (`thresholds` optional).
+- **SSR**: `renderChart("BarChart", props)` from `semiotic/server` — uses HOC names. Also `"Sparkline"` (no axes, 2px margins). `renderChartWithEvidence()` returns `{ svg, evidence }` (mark counts by scene type, axis domains, empty flag, annotation count, accessible name) so agents can verify the render drew data marks. `renderToImage()` (PNG), `renderToAnimatedGif()` (GIF), `renderDashboard()` (multi-chart). All accept `theme`. Required props: StackedBarChart needs `stackBy`, GroupedBarChart needs `groupBy`, StackedAreaChart needs `areaBy`, BubbleChart needs `sizeBy`, FunnelChart uses `stepAccessor`, GaugeChart needs `value` (`thresholds` optional).
 - **CLI**: `npx semiotic-ai --list` shows components/import paths/renderability; `npx semiotic-ai --schema GaugeChart` prints one component schema with metadata; `--doctor` validates props JSON and behavior contracts.
-- **MCP**: `npx semiotic-mcp` exposes tools (`getSchema`, `suggestChart`, `diagnoseConfig`, `renderChart`, `applyTheme`, `reportIssue`), resources (`semiotic://schema`, `semiotic://components`, `semiotic://behavior-contracts`, `semiotic://system-prompt`, `semiotic://examples`), and prompts (`build-semiotic-chart`, `debug-semiotic-chart`).
+- **MCP**: `npx semiotic-mcp` exposes schema, suggestion, diagnosis, accessibility, grounding, issue, theme, static render (`renderChart`), and ChatGPT Apps render (`renderInteractiveChart`) tools. Resources include `semiotic://schema`, `semiotic://components`, `semiotic://behavior-contracts`, `semiotic://system-prompt`, `semiotic://examples`, and the widget template `ui://semiotic/chart-widget.html`. Prompts: `build-semiotic-chart`, `debug-semiotic-chart`.
 - **exportChart**: Pass the wrapper div, not the SVG element: `exportChart(wrapperDiv, { format: "png" })`. It finds canvas+SVG internally.

package/dist/components/AccessibleNavTree.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { type NavTreeNode } from "./ai/navigationTree";
 export interface AccessibleNavTreeProps {
     tree: NavTreeNode;
@@ -22,4 +23,4 @@ export interface AccessibleNavTreeProps {
      */
     chartId?: string;
 }
-export declare function AccessibleNavTree({ tree, label, visible, className, onActiveChange, activeId: controlledActiveId, chartId }: AccessibleNavTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccessibleNavTree({ tree, label, visible, className, onActiveChange, activeId: controlledActiveId, chartId }: AccessibleNavTreeProps): React.JSX.Element;

package/dist/components/Annotation.d.ts

@@ -65,5 +65,5 @@ export interface AnnotationProps {
         [key: string]: unknown;
     };
 }
-export default function SemioticAnnotation(props: AnnotationProps): import("react/jsx-runtime").JSX.Element;
+export default function SemioticAnnotation(props: AnnotationProps): React.JSX.Element;
 export {};