semiotic 3.7.0 → 3.7.2

package/ai/dist/mcp-server.js

@@ -7,7 +7,11 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -7030,7 +7034,7 @@ var require_chartSuggestions = __commonJS({
   "ai/chartSuggestions.cjs"(exports2, module2) {
     "use strict";
     var path2 = require("path");
-    var VALID_INTENTS = [
+    var VALID_INTENTS2 = [
       "comparison",
       "trend",
       "distribution",
@@ -7163,10 +7167,10 @@ var require_chartSuggestions = __commonJS({
       const data = args.data;
       const intent = args.intent;
       const capabilities = args.capabilities;
-      if (intent && !VALID_INTENTS.includes(intent)) {
+      if (intent && !VALID_INTENTS2.includes(intent)) {
         return {
           ok: false,
-          error: `Unknown intent "${intent}". Expected one of: ${VALID_INTENTS.join(", ")}.`
+          error: `Unknown intent "${intent}". Expected one of: ${VALID_INTENTS2.join(", ")}.`
         };
       }
       if (capabilities) {
@@ -7384,7 +7388,7 @@ ${result.filteredOut.map((s) => `- ${s.component}: ${s.reason}`).join("\n")}
 
 Relax the capability constraints, or use getSchema to browse alternatives.` : `
 
-Try providing intent ('${VALID_INTENTS.join("', '")}') to narrow recommendations, or use getSchema to browse available components.`;
+Try providing intent ('${VALID_INTENTS2.join("', '")}') to narrow recommendations, or use getSchema to browse available components.`;
         return `Could not confidently recommend a chart type.
 
 ${result.fieldSummary}${tail}`;
@@ -7423,7 +7427,7 @@ For accessibility, use \`colorScheme={COLOR_BLIND_SAFE_CATEGORICAL}\` (import fr
       return Object.entries(capabilities).filter(([, v]) => v != null).map(([k, v]) => `${k}=${v}`).join(", ");
     }
     module2.exports = {
-      VALID_INTENTS,
+      VALID_INTENTS: VALID_INTENTS2,
       VALID_CAPABILITY_KEYS,
       formatSuggestionReport: formatSuggestionReport2,
       suggestCharts: suggestCharts2,
@@ -7453,8 +7457,8 @@ var require_behaviorContracts = __commonJS({
           const schema2 = JSON.parse(fs2.readFileSync(schemaPath2, "utf8"));
           const out = /* @__PURE__ */ new Set();
           for (const tool of schema2.tools || []) {
-            const required2 = tool.function?.parameters?.required || [];
-            if (required2.includes("data")) out.add(tool.function.name);
+            const properties = tool.function?.parameters?.properties || {};
+            if ("data" in properties) out.add(tool.function.name);
           }
           if (out.size > 0) return out;
         } catch {
@@ -7520,6 +7524,10 @@ var require_behaviorContracts = __commonJS({
       "Scatterplot",
       "BubbleChart",
       "ConnectedScatterplot",
+      "CandlestickChart",
+      "MultiAxisLineChart",
+      "QuadrantChart",
+      "DifferenceChart",
       "BarChart",
       "StackedBarChart",
       "GroupedBarChart",
@@ -32433,22 +32441,27 @@ ${errors.join("\n")}`
 }
 
 // ai/mcp-server.ts
+var import_server2 = require("semiotic/server");
 var import_ai3 = require("semiotic/ai");
+var import_componentMetadata = __toESM(require_componentMetadata());
+var import_chartSuggestions = __toESM(require_chartSuggestions());
+var import_behaviorContracts = __toESM(require_behaviorContracts());
 var {
   componentIndexFromSchema,
   metadataForComponent
-} = require_componentMetadata();
+} = import_componentMetadata.default;
 var {
   formatSuggestionReport,
-  suggestCharts
-} = require_chartSuggestions();
+  suggestCharts,
+  VALID_INTENTS
+} = import_chartSuggestions.default;
 var {
   BEHAVIOR_CONTRACTS,
   behaviorContractsFor,
   dataRequiredForUsageMode,
   formatDoctorBehaviorContracts,
   normalizeUsageMode
-} = require_behaviorContracts();
+} = import_behaviorContracts.default;
 var schemaPath = path.resolve(__dirname, "../schema.json");
 var schema = JSON.parse(fs.readFileSync(schemaPath, "utf-8"));
 var schemaByComponent = {};
@@ -32458,6 +32471,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 +32491,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 +32526,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) {
@@ -32524,8 +32836,23 @@ ${JSON.stringify(contracts, null, 2)}` : "";
 ${JSON.stringify(entry, null, 2)}${contractText}` }]
   };
 }
+var SUGGEST_INTENT_ALIASES = {
+  "compare-series": "comparison",
+  "compare-categories": "comparison",
+  "rank": "comparison",
+  "part-to-whole": "composition",
+  "composition-over-time": "composition",
+  "correlation": "relationship",
+  "flow": "network",
+  "geo": "geographic",
+  "outlier-detection": "distribution",
+  "change-detection": "trend"
+};
 async function suggestChartHandler(args) {
-  const result = suggestCharts(args);
+  let intent = args.intent;
+  if (intent && SUGGEST_INTENT_ALIASES[intent]) intent = SUGGEST_INTENT_ALIASES[intent];
+  if (intent && !VALID_INTENTS.includes(intent)) intent = void 0;
+  const result = suggestCharts({ ...args, intent });
   const content = [{ type: "text", text: formatSuggestionReport(result) }];
   if (!result.ok) {
     return { content, isError: true, structuredContent: result };
@@ -32563,6 +32890,21 @@ 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 {
+    evidenceBlock = {
+      type: "text",
+      text: `Render evidence: unavailable for ${component} (no server render config). The SVG above is the validated React render; mark-count / domain evidence is only produced for components with a server render path.`
+    };
+  }
   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 +32918,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 +32944,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) {
@@ -32687,23 +33077,26 @@ async function reportIssueHandler(args) {
 ${url2}` }]
   };
 }
-var THEME_PRESET_NAMES = [
-  "light",
-  "dark",
-  "high-contrast",
-  "pastels",
-  "pastels-dark",
-  "bi-tool",
-  "bi-tool-dark",
-  "italian",
-  "italian-dark",
-  "tufte",
-  "tufte-dark",
-  "journalist",
-  "journalist-dark",
-  "playful",
-  "playful-dark"
-];
+var THEME_PRESETS = {
+  "light": "LIGHT_THEME",
+  "dark": "DARK_THEME",
+  "high-contrast": "HIGH_CONTRAST_THEME",
+  "pastels": "PASTELS_LIGHT",
+  "pastels-dark": "PASTELS_DARK",
+  "bi-tool": "BI_TOOL_LIGHT",
+  "bi-tool-dark": "BI_TOOL_DARK",
+  "italian": "ITALIAN_LIGHT",
+  "italian-dark": "ITALIAN_DARK",
+  "tufte": "TUFTE_LIGHT",
+  "tufte-dark": "TUFTE_DARK",
+  "journalist": "JOURNALIST_LIGHT",
+  "journalist-dark": "JOURNALIST_DARK",
+  "playful": "PLAYFUL_LIGHT",
+  "playful-dark": "PLAYFUL_DARK",
+  "carbon": "CARBON_LIGHT",
+  "carbon-dark": "CARBON_DARK"
+};
+var THEME_PRESET_NAMES = Object.keys(THEME_PRESETS);
 async function applyThemeHandler(args) {
   const name = args.name;
   if (!name) {
@@ -32723,6 +33116,7 @@ Dark-mode presets: ${THEME_PRESET_NAMES.filter((n) => n.includes("dark")).join("
       isError: true
     };
   }
+  const exportName = THEME_PRESETS[name];
   const usage = [
     `## Theme: "${name}"`,
     "",
@@ -32736,24 +33130,23 @@ Dark-mode presets: ${THEME_PRESET_NAMES.filter((n) => n.includes("dark")).join("
     "",
     "### Option 2: Import the theme object",
     "```jsx",
-    `import { ${name.replace(/-./g, (c) => c[1].toUpperCase()).replace(/^./, (c) => c.toUpperCase()).replace(/Dark$/, "_DARK").replace(/([a-z])([A-Z])/g, "$1_$2").toUpperCase()} } from "semiotic/themes"`,
-    `<ThemeProvider theme={themeObject}>`,
+    `import { ${exportName} } from "semiotic/themes"`,
+    `<ThemeProvider theme={${exportName}}>`,
     `  <BarChart ... />`,
     `</ThemeProvider>`,
     "```",
     "",
     "### Option 3: CSS custom properties (no React required)",
     "```jsx",
-    `import { themeToCSS } from "semiotic/themes"`,
-    `import { ${name.replace(/-./g, (c) => c[1].toUpperCase()).replace(/^./, (c) => c.toUpperCase()).replace(/Dark$/, "_DARK").replace(/([a-z])([A-Z])/g, "$1_$2").toUpperCase()} } from "semiotic/themes"`,
-    `const css = themeToCSS(themeObject, ".my-charts")`,
+    `import { themeToCSS, ${exportName} } from "semiotic/themes"`,
+    `const css = themeToCSS(${exportName}, ".my-charts")`,
     "// Outputs CSS custom properties string for embedding in a stylesheet",
     "```",
     "",
     "### Option 4: Design tokens JSON",
     "```jsx",
-    `import { themeToTokens } from "semiotic/themes"`,
-    `const tokens = themeToTokens(themeObject)`,
+    `import { themeToTokens, ${exportName} } from "semiotic/themes"`,
+    `const tokens = themeToTokens(${exportName})`,
     "// Style Dictionary / DTCG-compatible token format",
     "```",
     "",
@@ -33044,6 +33437,12 @@ async function groundChartHandler(args) {
     structuredContent: grounding
   };
 }
+var READ_ONLY_TOOL_ANNOTATIONS = {
+  readOnlyHint: true,
+  destructiveHint: false,
+  idempotentHint: true,
+  openWorldHint: false
+};
 function createServer2() {
   const srv = new McpServer({
     name: "semiotic",
@@ -33102,6 +33501,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",
     {
@@ -33167,14 +33587,15 @@ function createServer2() {
     "getSchema",
     `Return the prop schema for a Semiotic chart component. Pass { component: '<name>' } to get its props, or omit component to list all available components. Components marked [renderable] can be passed to renderChart for static SVG output.`,
     { component: external_exports3.string().optional().describe("Component name, e.g. 'LineChart'. Omit to list all.") },
+    READ_ONLY_TOOL_ANNOTATIONS,
     getSchemaHandler
   );
   srv.tool(
     "suggestChart",
-    "Recommend Semiotic chart types for a given data sample. Pass { data: [...] } with 1-5 sample objects. Optionally pass intent to narrow suggestions, or capabilities to require/forbid features (push API, linked hover, SSR, selection, legend). Returns ranked recommendations with example props; charts that don't satisfy the capability constraints are dropped.",
+    "Lightweight heuristic chart recommender for a small data sample (1-5 rows) with capability filtering (push API, linked hover, SSR, selection, legend). Returns ranked recommendations with example props. For richer capability-descriptor ranking (scores, reasons, caveats) and the full 13-intent taxonomy, prefer `suggestCharts` (plural).",
     {
       data: external_exports3.array(external_exports3.record(external_exports3.string(), external_exports3.unknown())).min(1).max(5).describe("1-5 sample data objects"),
-      intent: external_exports3.enum(["comparison", "trend", "distribution", "relationship", "composition", "geographic", "network", "hierarchy"]).optional().describe("Visualization intent to narrow suggestions"),
+      intent: external_exports3.string().optional().describe("Visualization intent. Accepts this engine's intents (comparison, trend, distribution, relationship, composition, geographic, network, hierarchy) AND the richer suggestCharts taxonomy (compare-categories, part-to-whole, correlation, flow, geo, rank, \u2026), which is translated automatically; an unrecognized intent is ignored rather than rejected."),
       capabilities: external_exports3.object({
         push: external_exports3.boolean().optional().describe("Require ref-based push API (live streaming via ref.current.push())"),
         linkedHover: external_exports3.boolean().optional().describe("Require cross-chart linked hover support"),
@@ -33187,19 +33608,53 @@ function createServer2() {
         // validation from being unreachable from MCP callers.
       }).strict().optional().describe("Capability constraints \u2014 set a key to true to require, false to forbid. Unset keys are ignored.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     suggestChartHandler
   );
   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' }."),
       theme: external_exports3.record(external_exports3.string(), external_exports3.string()).optional().describe("CSS custom properties for theming, e.g. { '--semiotic-bg': '#1a1a2e', '--semiotic-text': '#ededed' }. Only --semiotic-* variables are applied."),
       format: external_exports3.enum(["svg", "png"]).optional().describe("Output format: 'svg' (default) returns SVG markup, 'png' returns a Base64-encoded PNG image. PNG requires the 'sharp' package.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     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.",
@@ -33208,6 +33663,7 @@ function createServer2() {
       props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).optional().describe("Chart props object, e.g. { data: [...], xAccessor: 'x' }."),
       usageMode: external_exports3.enum(["static", "push", "renderChart", "server"]).optional().describe("Validation mode. Use 'push' for ref-based React HOCs that omit data; use 'static' or omit for renderChart/MCP/static data configs.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     diagnoseConfigHandler
   );
   srv.tool(
@@ -33220,6 +33676,7 @@ function createServer2() {
       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.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     auditAccessibilityHandler
   );
   srv.tool(
@@ -33230,6 +33687,7 @@ function createServer2() {
       body: external_exports3.string().optional().describe("Issue body with details, reproduction steps, diagnoseConfig output"),
       labels: external_exports3.union([external_exports3.array(external_exports3.string()), external_exports3.string()]).optional().describe("GitHub labels, e.g. ['bug'] or 'bug'")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     reportIssueHandler
   );
   srv.tool(
@@ -33238,6 +33696,7 @@ function createServer2() {
     {
       name: external_exports3.string().optional().describe("Theme preset name, e.g. 'tufte', 'pastels-dark', 'bi-tool'. Omit to list all available themes.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     applyThemeHandler
   );
   srv.tool(
@@ -33248,6 +33707,7 @@ function createServer2() {
       props: external_exports3.record(external_exports3.string(), external_exports3.unknown()).describe("The full chart props including data"),
       query: external_exports3.string().optional().describe("A natural language question about the chart data")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     interrogateChartHandler
   );
   srv.tool(
@@ -33257,6 +33717,7 @@ function createServer2() {
       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")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     groundChartHandler
   );
   srv.tool(
@@ -33277,6 +33738,7 @@ function createServer2() {
       intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional().describe("Ranking intent."),
       maxResults: external_exports3.number().int().min(1).max(20).optional()
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     suggestStreamChartsHandler
   );
   srv.tool(
@@ -33288,6 +33750,7 @@ function createServer2() {
       maxPanels: external_exports3.number().int().min(1).max(12).optional().describe("Maximum panels (default 6)."),
       diversifyByFamily: external_exports3.boolean().optional().describe("Prefer not to repeat chart families across panels (default true).")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     suggestDashboardHandler
   );
   srv.tool(
@@ -33312,6 +33775,7 @@ function createServer2() {
       intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional(),
       maxResults: external_exports3.number().int().min(1).max(20).optional()
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     suggestStretchChartsHandler
   );
   srv.tool(
@@ -33323,6 +33787,7 @@ function createServer2() {
       intent: external_exports3.union([external_exports3.string(), external_exports3.array(external_exports3.string())]).optional().describe("User intent \u2014 informs ranking of alternatives when the chart doesn't fit."),
       maxAlternatives: external_exports3.number().int().min(1).max(10).optional().describe("Cap on alternatives returned (default 3).")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     repairChartConfigHandler
   );
   srv.tool(
@@ -33349,6 +33814,7 @@ function createServer2() {
         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.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     proposeChartVariantsHandler
   );
   srv.tool(
@@ -33375,6 +33841,7 @@ function createServer2() {
         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.")
     },
+    READ_ONLY_TOOL_ANNOTATIONS,
     suggestChartsHandler
   );
   return srv;
@@ -33386,45 +33853,95 @@ var parsedPort = portFlagIndex !== -1 && cliArgs[portFlagIndex + 1] != null ? pa
 var port = Number.isFinite(parsedPort) ? parsedPort : 3001;
 async function main() {
   if (httpMode) {
-    const sessions = /* @__PURE__ */ new Map();
+    const allowedHosts = (process.env.MCP_ALLOWED_HOSTS || "").split(",").map((h) => h.trim().toLowerCase()).filter(Boolean);
+    const healthBody = () => JSON.stringify({
+      status: "ok",
+      name: "semiotic-mcp",
+      version: schema.version || "3.0.0",
+      transport: "streamable-http",
+      mode: "stateless"
+    });
     const httpServer = http.createServer(async (req, res) => {
       res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
-      res.setHeader("Access-Control-Allow-Headers", "Content-Type, mcp-session-id");
-      res.setHeader("Access-Control-Expose-Headers", "mcp-session-id");
+      res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+      res.setHeader(
+        "Access-Control-Allow-Headers",
+        "Content-Type, Accept, Authorization, mcp-session-id, MCP-Protocol-Version, Last-Event-ID"
+      );
+      res.setHeader("Access-Control-Expose-Headers", "MCP-Protocol-Version");
       if (req.method === "OPTIONS") {
         res.writeHead(204);
         res.end();
         return;
       }
-      const sessionId = req.headers["mcp-session-id"];
-      if (sessionId && sessions.has(sessionId)) {
-        const session = sessions.get(sessionId);
-        await session.transport.handleRequest(req, res);
-      } else if (!sessionId) {
-        const transport = new StreamableHTTPServerTransport({
-          sessionIdGenerator: () => `semiotic-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+      const pathname = (() => {
+        try {
+          return new URL(req.url || "/", "http://localhost").pathname;
+        } catch {
+          return "/";
+        }
+      })();
+      if (allowedHosts.length > 0) {
+        const rawHost = String(req.headers.host || "").trim().toLowerCase();
+        const normalizedHost = rawHost.startsWith("[") ? rawHost.replace(/^\[([^\]]+)\](?::\d+)?$/, "$1") : rawHost.split(":")[0];
+        if (!allowedHosts.includes(rawHost) && !allowedHosts.includes(normalizedHost)) {
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ jsonrpc: "2.0", error: { code: -32e3, message: "Forbidden host" }, id: null }));
+          return;
+        }
+      }
+      if (req.method === "GET" && (pathname === "/healthz" || pathname === "/health")) {
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(healthBody());
+        return;
+      }
+      if (pathname !== "/" && pathname !== "/mcp") {
+        res.writeHead(404, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Not found" }));
+        return;
+      }
+      if (req.method === "GET") {
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(healthBody());
+        return;
+      }
+      if (req.method !== "POST") {
+        res.writeHead(405, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ jsonrpc: "2.0", error: { code: -32e3, message: "Method not allowed" }, id: null }));
+        return;
+      }
+      const srv = createServer2();
+      const transport = new StreamableHTTPServerTransport({
+        sessionIdGenerator: void 0,
+        enableJsonResponse: true
+      });
+      let torndown = false;
+      const teardown = () => {
+        if (torndown) return;
+        torndown = true;
+        Promise.resolve(transport.close()).catch(() => {
+        });
+        Promise.resolve(srv.close()).catch(() => {
         });
-        const srv = createServer2();
+      };
+      res.on("close", teardown);
+      try {
         await srv.connect(transport);
-        transport.onclose = () => {
-          const sid2 = transport.sessionId;
-          if (sid2) sessions.delete(sid2);
-        };
         await transport.handleRequest(req, res);
-        const sid = transport.sessionId;
-        if (sid) {
-          sessions.set(sid, { server: srv, transport });
+      } catch (err) {
+        console.error("Request handling error:", err);
+        if (!res.headersSent) {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ jsonrpc: "2.0", error: { code: -32603, message: "Internal server error" }, id: null }));
         }
-      } else {
-        res.writeHead(400, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ jsonrpc: "2.0", error: { code: -32e3, message: "Unknown session. Send a request without mcp-session-id to start a new session." }, id: null }));
+      } finally {
+        teardown();
       }
     });
     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();