@mcp-html-bridge/ui-engine 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-html-bridge/ui-engine",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Core UI rendering engine — schema/data → self-contained HTML",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/engine.ts

@@ -1,26 +1,48 @@
-// ── Engine Orchestrator: main entry point ──
+// ── Engine Orchestrator: JSON → self-contained HTML document ──
 import type { EngineInput, RenderOptions, JSONSchema } from './types.js';
 import { document as htmlDocument } from './html-builder.js';
 import { generateThemeCSS } from './theme.js';
 import { generateBridgeJS } from './bridge.js';
-import { sniff, sniffSchema } from './data-sniffer.js';
+import { renderJSON, getRendererCSS, getRendererJS } from './renderer.js';
 import { renderForm, getFormCSS } from './renderers/form.js';
-import { renderDataGrid, getDataGridCSS, getDataGridJS } from './renderers/data-grid.js';
-import { renderJsonTree, getJsonTreeCSS, getJsonTreeJS } from './renderers/json-tree.js';
-import { renderReadingBlock, getReadingBlockCSS } from './renderers/reading-block.js';
-import { renderMetricsCard, getMetricsCardCSS } from './renderers/metrics-card.js';
-import { renderComposite, getCompositeCSS } from './renderers/composite.js';
 import { generatePlaygroundHTML, getPlaygroundCSS, getPlaygroundJS } from './playground.js';
 
+/** Options for rendering */
+interface DataRenderOptions extends RenderOptions {
+  toolName?: string;
+  toolDescription?: string;
+}
+
+/** Render any JSON data as a full HTML document. Pure structural rendering. */
+export function renderFromData(
+  data: unknown,
+  options: DataRenderOptions = {}
+): string {
+  const body = renderJSON(data);
+  const cssParts = [generateThemeCSS(), getRendererCSS()];
+  const jsParts = [generateBridgeJS(), getRendererJS()];
+
+  if (options.debug) {
+    cssParts.push(getPlaygroundCSS());
+    jsParts.push(getPlaygroundJS());
+  }
+
+  const playgroundHTML = options.debug ? generatePlaygroundHTML() : '';
+
+  return htmlDocument({
+    title: options.title ?? options.toolName ?? 'MCP Result',
+    css: cssParts.join('\n'),
+    body: body + playgroundHTML,
+    js: jsParts.join('\n'),
+  });
+}
+
 /** Render a form from a JSON Schema (for tool input) */
 export function renderFromSchema(
   schema: JSONSchema,
-  options: RenderOptions & { toolName?: string; toolDescription?: string } = {}
+  options: DataRenderOptions = {}
 ): string {
-  const sniffResult = sniffSchema(schema as Record<string, unknown>);
-
   const body = renderForm(schema, {
-    ...sniffResult.metadata,
     toolName: options.toolName,
     toolDescription: options.toolDescription,
   });
@@ -46,68 +68,8 @@ export function renderFromSchema(
   });
 }
 
-/** Render HTML from tool result data */
-export function renderFromData(
-  data: unknown,
-  options: RenderOptions & { toolName?: string; toolDescription?: string } = {}
-): string {
-  const results = sniff(data);
-  const best = results[0];
-
-  let body: string;
-  const cssParts = [generateThemeCSS()];
-  const jsParts = [generateBridgeJS()];
-
-  switch (best.intent) {
-    case 'data-grid':
-      body = renderDataGrid(data, best.metadata);
-      cssParts.push(getDataGridCSS());
-      jsParts.push(getDataGridJS());
-      break;
-    case 'metrics-card':
-      body = renderMetricsCard(data, best.metadata);
-      cssParts.push(getMetricsCardCSS());
-      break;
-    case 'reading-block':
-      body = renderReadingBlock(data, best.metadata);
-      cssParts.push(getReadingBlockCSS());
-      break;
-    case 'json-tree':
-      body = renderJsonTree(data, best.metadata);
-      cssParts.push(getJsonTreeCSS());
-      jsParts.push(getJsonTreeJS());
-      // Inject tree data for copy-all
-      jsParts.push(`__mcpTreeData = ${JSON.stringify(data)};`);
-      break;
-    case 'composite':
-      body = renderComposite(data, best.metadata);
-      // Composite may use all renderers, include all CSS/JS
-      cssParts.push(getDataGridCSS(), getMetricsCardCSS(), getReadingBlockCSS(), getJsonTreeCSS(), getCompositeCSS());
-      jsParts.push(getDataGridJS(), getJsonTreeJS());
-      break;
-    default:
-      body = renderJsonTree(data, best.metadata);
-      cssParts.push(getJsonTreeCSS());
-      jsParts.push(getJsonTreeJS());
-      jsParts.push(`__mcpTreeData = ${JSON.stringify(data)};`);
-  }
-
-  if (options.debug) {
-    body += generatePlaygroundHTML();
-    cssParts.push(getPlaygroundCSS());
-    jsParts.push(getPlaygroundJS());
-  }
-
-  return htmlDocument({
-    title: options.title ?? options.toolName ?? 'MCP Result',
-    css: cssParts.join('\n'),
-    body,
-    js: jsParts.join('\n'),
-  });
-}
-
 /** Unified API */
-export function render(input: EngineInput, options: RenderOptions = {}): string {
+export function render(input: EngineInput, options: DataRenderOptions = {}): string {
   if (input.mode === 'schema') {
     return renderFromSchema(input.schema, {
       ...options,

package/src/index.ts

@@ -1,20 +1,28 @@
 // ── Public API ──
-export { render, renderFromSchema, renderFromData } from './engine.js';
-export { sniff, sniffSchema } from './data-sniffer.js';
+export {
+  render,
+  renderFromSchema,
+  renderFromData,
+} from './engine.js';
+
+// Universal JSON → HTML renderer (the core)
+export { renderJSON, getRendererCSS, getRendererJS } from './renderer.js';
+
+// Building blocks (for custom composition)
 export { generateThemeCSS } from './theme.js';
 export { generateBridgeJS } from './bridge.js';
 export { escapeHtml, tag, style, script, document } from './html-builder.js';
 
+// Form renderer (JSON Schema → form UI)
+export { renderForm, getFormCSS } from './renderers/form.js';
+
 // Re-export types
 export type {
-  RenderIntent,
-  SniffResult,
   RenderOptions,
   EngineInput,
   SchemaInput,
   DataInput,
   JSONSchema,
-  Renderer,
   MCPToolDefinition,
   MCPServerInfo,
 } from './types.js';

package/src/renderer.ts

@@ -0,0 +1,266 @@
+/**
+ * Universal JSON → HTML renderer.
+ *
+ * No hardcoded business logic. No status badges, no price formatting,
+ * no regex-based field type guessing. Just clean structural rendering:
+ *
+ *   Array<Object>  → sortable <table>
+ *   Object         → <dl> key-value pairs (recursive for nesting)
+ *   Array<scalar>  → <ul> list
+ *   string         → text
+ *   number         → number
+ *   boolean        → true/false
+ *   null           → placeholder
+ *
+ * All formatting decisions are the caller's responsibility (LLM or user).
+ */
+import { escapeHtml } from './html-builder.js';
+
+// ── Structural detection ──
+
+function isArrayOfObjects(data: unknown): data is Record<string, unknown>[] {
+  return Array.isArray(data) && data.length > 0 &&
+    data.every(item => item !== null && typeof item === 'object' && !Array.isArray(item));
+}
+
+function isFlatObject(data: unknown): data is Record<string, unknown> {
+  if (data === null || typeof data !== 'object' || Array.isArray(data)) return false;
+  return Object.values(data as Record<string, unknown>).every(
+    v => v === null || typeof v !== 'object'
+  );
+}
+
+function humanizeKey(key: string): string {
+  return key
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/[_-]/g, ' ')
+    .replace(/^\w/, c => c.toUpperCase())
+    .trim();
+}
+
+// ── Render primitives ──
+
+function renderValue(value: unknown, depth: number): string {
+  if (value === null || value === undefined) {
+    return '<span class="mcp-null">—</span>';
+  }
+  if (typeof value === 'boolean') {
+    return `<span class="mcp-bool">${value}</span>`;
+  }
+  if (typeof value === 'number') {
+    return `<span class="mcp-num">${value}</span>`;
+  }
+  if (typeof value === 'string') {
+    if (value.length > 300) {
+      return `<div class="mcp-text">${escapeHtml(value)}</div>`;
+    }
+    return escapeHtml(value);
+  }
+  // Recurse into objects/arrays
+  return renderAny(value, depth + 1);
+}
+
+// ── Core recursive renderer ──
+
+function renderTable(rows: Record<string, unknown>[]): string {
+  const columns = Object.keys(rows[0]);
+  const headerCells = columns
+    .map((col, i) =>
+      `<th onclick="__mcpSort(${i})" class="mcp-sortable">${escapeHtml(humanizeKey(col))}<span class="mcp-sort-icon">⇅</span></th>`)
+    .join('');
+
+  const bodyRows = rows
+    .map(row =>
+      `<tr>${columns.map(col => `<td>${renderValue(row[col], 0)}</td>`).join('')}</tr>`)
+    .join('\n');
+
+  return `<div class="mcp-table-wrap">
+  <div class="mcp-table-meta">${rows.length} rows × ${columns.length} columns</div>
+  <div class="mcp-table-scroll">
+    <table class="mcp-table" id="mcp-grid">
+      <thead><tr>${headerCells}</tr></thead>
+      <tbody>${bodyRows}</tbody>
+    </table>
+  </div>
+</div>`;
+}
+
+function renderKeyValue(obj: Record<string, unknown>, depth: number): string {
+  const entries = Object.entries(obj);
+  const items = entries.map(([key, val]) => {
+    const rendered = renderValue(val, depth);
+    return `<div class="mcp-kv">
+      <dt class="mcp-key">${escapeHtml(humanizeKey(key))}</dt>
+      <dd class="mcp-val">${rendered}</dd>
+    </div>`;
+  }).join('\n');
+
+  return `<dl class="mcp-dl">${items}</dl>`;
+}
+
+function renderList(arr: unknown[], depth: number): string {
+  const items = arr.map(item =>
+    `<li>${renderValue(item, depth)}</li>`
+  ).join('\n');
+  return `<ul class="mcp-list">${items}</ul>`;
+}
+
+function renderCollapsible(label: string, content: string, open = true): string {
+  return `<details class="mcp-details" ${open ? 'open' : ''}>
+  <summary class="mcp-summary">${escapeHtml(label)}</summary>
+  <div class="mcp-details-body">${content}</div>
+</details>`;
+}
+
+function renderAny(data: unknown, depth: number): string {
+  // Primitive
+  if (data === null || data === undefined || typeof data !== 'object') {
+    return renderValue(data, depth);
+  }
+
+  // Array of objects → table
+  if (isArrayOfObjects(data)) {
+    const content = renderTable(data);
+    return depth > 0 ? renderCollapsible(`Array (${data.length} items)`, content) : content;
+  }
+
+  // Generic array → list or collapsible
+  if (Array.isArray(data)) {
+    const content = renderList(data, depth);
+    return depth > 0 ? renderCollapsible(`Array (${data.length})`, content) : content;
+  }
+
+  // Flat object → key-value pairs
+  const obj = data as Record<string, unknown>;
+  if (isFlatObject(obj)) {
+    return renderKeyValue(obj, depth);
+  }
+
+  // Nested object → grouped sections
+  const entries = Object.entries(obj);
+  const sections = entries.map(([key, val]) => {
+    if (val !== null && typeof val === 'object') {
+      return renderCollapsible(humanizeKey(key), renderAny(val, depth + 1), depth < 2);
+    }
+    return `<div class="mcp-kv">
+      <dt class="mcp-key">${escapeHtml(humanizeKey(key))}</dt>
+      <dd class="mcp-val">${renderValue(val, depth)}</dd>
+    </div>`;
+  });
+
+  // If all entries are primitives at this level, use dl
+  const allPrimitive = entries.every(([, v]) => v === null || typeof v !== 'object');
+  if (allPrimitive) {
+    return renderKeyValue(obj, depth);
+  }
+
+  return `<div class="mcp-section">${sections.join('\n')}</div>`;
+}
+
+// ── Public API ──
+
+/** Render any JSON data as an HTML fragment. No business logic, pure structure. */
+export function renderJSON(data: unknown): string {
+  return `<div class="mcp-root">${renderAny(data, 0)}</div>`;
+}
+
+/** Get the CSS for the universal renderer */
+export function getRendererCSS(): string {
+  return `
+.mcp-root { max-width: 960px; margin: 0 auto; }
+
+/* Table */
+.mcp-table-wrap { overflow: hidden; }
+.mcp-table-meta {
+  font-size: var(--text-xs); color: var(--text-tertiary);
+  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
+  border-bottom: 1px solid var(--border);
+}
+.mcp-table-scroll { overflow-x: auto; }
+.mcp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.mcp-table th {
+  text-align: left; padding: var(--sp-2) var(--sp-3);
+  font-weight: 600; color: var(--text-secondary); font-size: var(--text-xs);
+  text-transform: uppercase; letter-spacing: 0.05em;
+  border-bottom: 2px solid var(--border);
+  white-space: nowrap; user-select: none;
+}
+.mcp-sortable { cursor: pointer; }
+.mcp-sortable:hover { color: var(--accent); }
+.mcp-sort-icon { margin-left: 4px; opacity: 0.3; font-size: 10px; }
+.mcp-table td {
+  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+.mcp-table tbody tr:hover { background: var(--accent-subtle); }
+
+/* Key-Value */
+.mcp-dl { display: grid; grid-template-columns: 1fr; gap: 0; }
+.mcp-kv {
+  display: grid; grid-template-columns: minmax(120px, auto) 1fr;
+  gap: var(--sp-3); padding: var(--sp-2) 0;
+  border-bottom: 1px solid var(--border);
+}
+.mcp-kv:last-child { border-bottom: none; }
+.mcp-key {
+  font-weight: 600; font-size: var(--text-sm); color: var(--text-secondary);
+  word-break: break-word;
+}
+.mcp-val { font-size: var(--text-sm); word-break: break-word; }
+
+/* List */
+.mcp-list {
+  list-style: none; padding: 0; margin: 0;
+  display: flex; flex-direction: column; gap: var(--sp-1);
+}
+.mcp-list li {
+  padding: var(--sp-1) var(--sp-2); font-size: var(--text-sm);
+  border-left: 2px solid var(--border); margin-left: var(--sp-2);
+}
+
+/* Collapsible sections */
+.mcp-details {
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  margin-bottom: var(--sp-2);
+}
+.mcp-summary {
+  padding: var(--sp-2) var(--sp-3); font-weight: 600; font-size: var(--text-sm);
+  cursor: pointer; user-select: none;
+}
+.mcp-summary:hover { color: var(--accent); }
+.mcp-details-body { padding: var(--sp-3); border-top: 1px solid var(--border); }
+
+/* Sections */
+.mcp-section { display: flex; flex-direction: column; gap: var(--sp-3); }
+
+/* Primitives */
+.mcp-null { color: var(--text-tertiary); font-style: italic; }
+.mcp-bool { font-weight: 600; }
+.mcp-num { font-variant-numeric: tabular-nums; }
+.mcp-text { white-space: pre-wrap; line-height: 1.6; }
+`;
+}
+
+/** Get the JS for table sorting (the only interactive behavior) */
+export function getRendererJS(): string {
+  return `
+function __mcpSort(colIdx) {
+  var table = document.getElementById('mcp-grid');
+  if (!table) return;
+  var tbody = table.tBodies[0];
+  var rows = Array.from(tbody.rows);
+  var dir = table.dataset.sortDir === 'asc' ? 'desc' : 'asc';
+  table.dataset.sortDir = dir;
+
+  rows.sort(function(a, b) {
+    var av = a.cells[colIdx].textContent.trim();
+    var bv = b.cells[colIdx].textContent.trim();
+    var an = parseFloat(av.replace(/[^\\d.-]/g, ''));
+    var bn = parseFloat(bv.replace(/[^\\d.-]/g, ''));
+    if (!isNaN(an) && !isNaN(bn)) return dir === 'asc' ? an - bn : bn - an;
+    return dir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
+  });
+
+  rows.forEach(function(row) { tbody.appendChild(row); });
+}`;
+}

package/src/types.ts

@@ -1,19 +1,3 @@
-// ── Render Intent ──
-export type RenderIntent =
-  | 'form'
-  | 'data-grid'
-  | 'json-tree'
-  | 'reading-block'
-  | 'metrics-card'
-  | 'composite';
-
-// ── Sniffer Result ──
-export interface SniffResult {
-  intent: RenderIntent;
-  confidence: number;
-  metadata: Record<string, unknown>;
-}
-
 // ── Render Options ──
 export interface RenderOptions {
   darkMode?: boolean;
@@ -61,13 +45,6 @@ export interface JSONSchema {
   additionalProperties?: boolean | JSONSchema;
 }
 
-// ── Renderer function signature ──
-export type Renderer = (
-  data: unknown,
-  metadata: Record<string, unknown>,
-  themeCSS: string
-) => string;
-
 // ── MCP Tool definition (from protocol) ──
 export interface MCPToolDefinition {
   name: string;

package/src/data-sniffer.ts

@@ -1,177 +0,0 @@
-// ── Data Sniffer: confidence-scored heuristic engine ──
-import type { SniffResult, RenderIntent } from './types.js';
-
-/** Measure maximum nesting depth of a value */
-function measureDepth(val: unknown, current = 0): number {
-  if (current > 20) return current; // guard
-  if (Array.isArray(val)) {
-    return val.reduce<number>((max, item) => Math.max(max, measureDepth(item, current + 1)), current);
-  }
-  if (val !== null && typeof val === 'object') {
-    return Object.values(val as Record<string, unknown>).reduce<number>(
-      (max, v) => Math.max(max, measureDepth(v, current + 1)),
-      current
-    );
-  }
-  return current;
-}
-
-/** Check if an array of objects has consistent keys */
-function keyConsistency(arr: Record<string, unknown>[]): number {
-  if (arr.length === 0) return 0;
-  const firstKeys = new Set(Object.keys(arr[0]));
-  let matchCount = 0;
-  for (let i = 1; i < arr.length; i++) {
-    const keys = Object.keys(arr[i]);
-    const overlap = keys.filter((k) => firstKeys.has(k)).length;
-    matchCount += overlap / Math.max(firstKeys.size, keys.length);
-  }
-  return matchCount / (arr.length - 1);
-}
-
-const READING_KEYS = new Set([
-  'description', 'content', 'body', 'text', 'message',
-  'summary', 'readme', 'notes', 'details', 'markdown',
-]);
-
-/** Detect data-grid intent */
-function detectDataGrid(data: unknown): SniffResult | null {
-  if (!Array.isArray(data) || data.length === 0) return null;
-  const objects = data.filter(
-    (item): item is Record<string, unknown> =>
-      item !== null && typeof item === 'object' && !Array.isArray(item)
-  );
-  if (objects.length < 2) return null;
-
-  const consistency = keyConsistency(objects);
-  if (consistency < 0.5) return null;
-
-  const confidence = Math.min(0.95, 0.5 + consistency * 0.3 + Math.min(objects.length / 20, 0.15));
-  return {
-    intent: 'data-grid',
-    confidence,
-    metadata: {
-      rowCount: objects.length,
-      columns: Object.keys(objects[0]),
-      keyConsistency: consistency,
-    },
-  };
-}
-
-/** Detect metrics-card intent */
-function detectMetricsCard(data: unknown): SniffResult | null {
-  if (data === null || typeof data !== 'object' || Array.isArray(data)) return null;
-  const entries = Object.entries(data as Record<string, unknown>);
-  if (entries.length === 0 || entries.length > 12) return null;
-
-  const numericCount = entries.filter(([, v]) => typeof v === 'number').length;
-  const ratio = numericCount / entries.length;
-
-  if (numericCount < 1 || ratio < 0.3) return null;
-
-  const confidence = Math.min(0.9, 0.4 + ratio * 0.4 + (entries.length <= 6 ? 0.1 : 0));
-  return {
-    intent: 'metrics-card',
-    confidence,
-    metadata: {
-      numericKeys: entries.filter(([, v]) => typeof v === 'number').map(([k]) => k),
-      totalKeys: entries.length,
-    },
-  };
-}
-
-/** Detect json-tree intent */
-function detectJsonTree(data: unknown): SniffResult | null {
-  const depth = measureDepth(data);
-  if (depth < 3) return null;
-
-  const confidence = Math.min(0.85, 0.3 + (depth - 2) * 0.1);
-  return {
-    intent: 'json-tree',
-    confidence,
-    metadata: { depth },
-  };
-}
-
-/** Detect reading-block intent */
-function detectReadingBlock(data: unknown): SniffResult | null {
-  if (typeof data === 'string' && data.length > 200) {
-    return {
-      intent: 'reading-block',
-      confidence: 0.85,
-      metadata: { length: data.length },
-    };
-  }
-  if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
-    const entries = Object.entries(data as Record<string, unknown>);
-    const longTextEntries = entries.filter(
-      ([k, v]) =>
-        (typeof v === 'string' && v.length > 200) || READING_KEYS.has(k.toLowerCase())
-    );
-    if (longTextEntries.length > 0) {
-      const confidence = Math.min(0.8, 0.4 + longTextEntries.length * 0.15);
-      return {
-        intent: 'reading-block',
-        confidence,
-        metadata: { textKeys: longTextEntries.map(([k]) => k) },
-      };
-    }
-  }
-  return null;
-}
-
-/** Main sniff function: returns ranked intents */
-export function sniff(data: unknown): SniffResult[] {
-  const results: SniffResult[] = [];
-
-  const grid = detectDataGrid(data);
-  if (grid) results.push(grid);
-
-  const metrics = detectMetricsCard(data);
-  if (metrics) results.push(metrics);
-
-  const tree = detectJsonTree(data);
-  if (tree) results.push(tree);
-
-  const reading = detectReadingBlock(data);
-  if (reading) results.push(reading);
-
-  // If multiple intents detected with similar confidence, suggest composite
-  if (results.length > 1) {
-    const topConfidence = Math.max(...results.map((r) => r.confidence));
-    const close = results.filter((r) => topConfidence - r.confidence < 0.2);
-    if (close.length > 1) {
-      results.push({
-        intent: 'composite',
-        confidence: topConfidence * 0.9,
-        metadata: { subIntents: close.map((r) => r.intent) },
-      });
-    }
-  }
-
-  // Fallback: if nothing detected, default to json-tree
-  if (results.length === 0) {
-    results.push({
-      intent: 'json-tree',
-      confidence: 0.3,
-      metadata: { fallback: true },
-    });
-  }
-
-  return results.sort((a, b) => b.confidence - a.confidence);
-}
-
-/** Detect intent from JSON Schema (for form rendering) */
-export function sniffSchema(schema: Record<string, unknown>): SniffResult {
-  const props = schema['properties'] as Record<string, unknown> | undefined;
-  const propCount = props ? Object.keys(props).length : 0;
-
-  return {
-    intent: 'form',
-    confidence: 0.95,
-    metadata: {
-      propertyCount: propCount,
-      required: schema['required'] ?? [],
-    },
-  };
-}

package/src/renderers/composite.ts

@@ -1,73 +0,0 @@
-// ── Composite Renderer: orchestrates multiple renderers for mixed data ──
-import { escapeHtml } from '../html-builder.js';
-import { sniff } from '../data-sniffer.js';
-import { renderDataGrid } from './data-grid.js';
-import { renderJsonTree } from './json-tree.js';
-import { renderReadingBlock } from './reading-block.js';
-import { renderMetricsCard } from './metrics-card.js';
-import type { RenderIntent } from '../types.js';
-
-function humanizeKey(key: string): string {
-  return key
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/[_-]/g, ' ')
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .trim();
-}
-
-function renderByIntent(intent: RenderIntent, data: unknown, metadata: Record<string, unknown>): string {
-  switch (intent) {
-    case 'data-grid':
-      return renderDataGrid(data, metadata);
-    case 'metrics-card':
-      return renderMetricsCard(data, metadata);
-    case 'reading-block':
-      return renderReadingBlock(data, metadata);
-    case 'json-tree':
-      return renderJsonTree(data, metadata);
-    default:
-      return renderJsonTree(data, metadata);
-  }
-}
-
-export function renderComposite(
-  data: unknown,
-  _metadata: Record<string, unknown>
-): string {
-  if (data === null || typeof data !== 'object' || Array.isArray(data)) {
-    // For arrays or primitives, just sniff and render directly
-    const results = sniff(data);
-    const best = results[0];
-    return renderByIntent(best.intent, data, best.metadata);
-  }
-
-  const obj = data as Record<string, unknown>;
-  const sections: string[] = [];
-
-  for (const [key, value] of Object.entries(obj)) {
-    const results = sniff(value);
-    const best = results[0];
-    const label = humanizeKey(key);
-
-    sections.push(`<section class="composite-section animate-in">
-  <h3 class="section-title">${escapeHtml(label)}</h3>
-  ${renderByIntent(best.intent, value, best.metadata)}
-</section>`);
-  }
-
-  return `<div class="composite-layout">${sections.join('\n')}</div>`;
-}
-
-export function getCompositeCSS(): string {
-  return `
-.composite-layout {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-8);
-}
-
-.composite-section {
-  /* Each section self-contained */
-}
-`;
-}

package/src/renderers/data-grid.ts

@@ -1,159 +0,0 @@
-// ── Data Grid Renderer: Array of objects → sortable table ──
-import { escapeHtml } from '../html-builder.js';
-
-const STATUS_MAP: Record<string, string> = {
-  active: 'badge-success',
-  enabled: 'badge-success',
-  available: 'badge-success',
-  in_stock: 'badge-success',
-  completed: 'badge-success',
-  inactive: 'badge-danger',
-  disabled: 'badge-danger',
-  out_of_stock: 'badge-danger',
-  backorder: 'badge-warning',
-  pending: 'badge-warning',
-  processing: 'badge-warning',
-  low_stock: 'badge-warning',
-  info: 'badge-info',
-  draft: 'badge-info',
-};
-
-function formatCell(value: unknown, key: string): string {
-  if (value === null || value === undefined) return '<span class="null">—</span>';
-
-  const strVal = String(value);
-
-  // Status badge detection
-  const normalized = strVal.toLowerCase().replace(/[\s-]+/g, '_');
-  if (STATUS_MAP[normalized]) {
-    return `<span class="badge ${STATUS_MAP[normalized]}">${escapeHtml(strVal)}</span>`;
-  }
-
-  // Price formatting detection
-  if (typeof value === 'number' && /price|cost|amount|total|revenue/i.test(key)) {
-    return `<span class="price">$${value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>`;
-  }
-
-  // Number formatting
-  if (typeof value === 'number') {
-    return `<span class="num">${value.toLocaleString()}</span>`;
-  }
-
-  // Boolean
-  if (typeof value === 'boolean') {
-    return value ? '<span class="bool-true">✓</span>' : '<span class="bool-false">✗</span>';
-  }
-
-  // Nested object/array → compact JSON
-  if (typeof value === 'object') {
-    return `<code class="cell-json">${escapeHtml(JSON.stringify(value))}</code>`;
-  }
-
-  return escapeHtml(strVal);
-}
-
-function humanizeKey(key: string): string {
-  return key
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/[_-]/g, ' ')
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .trim();
-}
-
-export function renderDataGrid(
-  data: unknown,
-  metadata: Record<string, unknown>
-): string {
-  const rows = data as Record<string, unknown>[];
-  const columns = (metadata['columns'] as string[]) ?? Object.keys(rows[0] ?? {});
-
-  const headerCells = columns
-    .map(
-      (col, i) =>
-        `<th onclick="__mcpSort(${i})" class="sortable">${escapeHtml(humanizeKey(col))}<span class="sort-icon">⇅</span></th>`
-    )
-    .join('');
-
-  const bodyRows = rows
-    .map(
-      (row, ri) =>
-        `<tr class="animate-in" style="animation-delay:${Math.min(ri * 20, 300)}ms">${columns.map((col) => `<td>${formatCell(row[col], col)}</td>`).join('')}</tr>`
-    )
-    .join('\n');
-
-  const rowCount = rows.length;
-  const colCount = columns.length;
-
-  return `<div class="grid-container card">
-  <div class="grid-header">
-    <span class="grid-meta">${rowCount} rows × ${colCount} columns</span>
-  </div>
-  <div class="table-wrap">
-    <table class="data-table" id="mcp-grid">
-      <thead><tr>${headerCells}</tr></thead>
-      <tbody>${bodyRows}</tbody>
-    </table>
-  </div>
-</div>`;
-}
-
-export function getDataGridCSS(): string {
-  return `
-.grid-container { overflow: hidden; }
-.grid-header {
-  display: flex; justify-content: space-between; align-items: center;
-  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
-}
-.grid-meta { font-size: var(--text-xs); color: var(--text-tertiary); }
-.table-wrap { overflow-x: auto; }
-.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
-.data-table th {
-  text-align: left; padding: var(--sp-2) var(--sp-3);
-  font-weight: 600; color: var(--text-secondary); font-size: var(--text-xs);
-  text-transform: uppercase; letter-spacing: 0.05em;
-  border-bottom: 2px solid var(--border);
-  white-space: nowrap; user-select: none;
-}
-.sortable { cursor: pointer; }
-.sortable:hover { color: var(--accent); }
-.sort-icon { margin-left: 4px; opacity: 0.3; font-size: 10px; }
-.data-table td {
-  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
-  vertical-align: middle;
-}
-.data-table tbody tr:hover { background: var(--accent-subtle); }
-.data-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
-.data-table tbody tr:nth-child(even):hover { background: var(--accent-subtle); }
-
-.null { color: var(--text-tertiary); }
-.price { font-weight: 600; font-variant-numeric: tabular-nums; }
-.num { font-variant-numeric: tabular-nums; }
-.bool-true { color: var(--success); font-weight: 700; }
-.bool-false { color: var(--danger); font-weight: 700; }
-.cell-json { font-size: var(--text-xs); max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
-`;
-}
-
-export function getDataGridJS(): string {
-  return `
-function __mcpSort(colIdx) {
-  var table = document.getElementById('mcp-grid');
-  if (!table) return;
-  var tbody = table.tBodies[0];
-  var rows = Array.from(tbody.rows);
-  var dir = table.dataset.sortDir === 'asc' ? 'desc' : 'asc';
-  table.dataset.sortDir = dir;
-  table.dataset.sortCol = colIdx;
-
-  rows.sort(function(a, b) {
-    var av = a.cells[colIdx].textContent.trim();
-    var bv = b.cells[colIdx].textContent.trim();
-    var an = parseFloat(av.replace(/[^\\d.-]/g, ''));
-    var bn = parseFloat(bv.replace(/[^\\d.-]/g, ''));
-    if (!isNaN(an) && !isNaN(bn)) return dir === 'asc' ? an - bn : bn - an;
-    return dir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
-  });
-
-  rows.forEach(function(row) { tbody.appendChild(row); });
-}`;
-}

package/src/renderers/json-tree.ts

@@ -1,141 +0,0 @@
-// ── JSON Tree Renderer: recursive collapsible tree ──
-import { escapeHtml } from '../html-builder.js';
-
-function typeClass(val: unknown): string {
-  if (val === null) return 'jt-null';
-  if (typeof val === 'string') return 'jt-string';
-  if (typeof val === 'number') return 'jt-number';
-  if (typeof val === 'boolean') return 'jt-boolean';
-  return '';
-}
-
-function formatValue(val: unknown): string {
-  if (val === null) return '<span class="jt-null">null</span>';
-  if (typeof val === 'string') return `<span class="jt-string">"${escapeHtml(val)}"</span>`;
-  if (typeof val === 'number') return `<span class="jt-number">${val}</span>`;
-  if (typeof val === 'boolean') return `<span class="jt-boolean">${val}</span>`;
-  return escapeHtml(String(val));
-}
-
-function renderNode(key: string | null, val: unknown, depth: number): string {
-  const keyHtml = key !== null ? `<span class="jt-key">${escapeHtml(key)}</span><span class="jt-colon">: </span>` : '';
-  const indent = depth * 16;
-  const nodeId = `jt-${Math.random().toString(36).slice(2, 8)}`;
-
-  if (val === null || typeof val !== 'object') {
-    return `<div class="jt-line" style="padding-left:${indent}px">
-  ${keyHtml}${formatValue(val)}
-  <button class="jt-copy" onclick="__mcpCopy(this)" data-val="${escapeHtml(JSON.stringify(val))}" title="Copy">⎘</button>
-</div>`;
-  }
-
-  const isArray = Array.isArray(val);
-  const entries = isArray
-    ? (val as unknown[]).map((v, i) => [String(i), v] as const)
-    : Object.entries(val as Record<string, unknown>);
-
-  const bracket = isArray ? ['[', ']'] : ['{', '}'];
-  const count = entries.length;
-  const preview = count === 0 ? (isArray ? '[]' : '{}') : '';
-
-  if (count === 0) {
-    return `<div class="jt-line" style="padding-left:${indent}px">${keyHtml}<span class="jt-bracket">${preview}</span></div>`;
-  }
-
-  const children = entries.map(([k, v]) => renderNode(isArray ? null : k, v, depth + 1)).join('\n');
-
-  return `<div class="jt-node" style="padding-left:${indent}px">
-  <div class="jt-toggle" onclick="__mcpToggle('${nodeId}')">
-    <span class="jt-arrow" id="${nodeId}-arrow">▼</span>
-    ${keyHtml}<span class="jt-bracket">${bracket[0]}</span>
-    <span class="jt-count">${count} ${isArray ? 'items' : 'keys'}</span>
-    <button class="jt-copy" onclick="event.stopPropagation();__mcpCopy(this)" data-val="${escapeHtml(JSON.stringify(val))}" title="Copy">⎘</button>
-  </div>
-  <div class="jt-children" id="${nodeId}">${children}</div>
-  <div style="padding-left:0"><span class="jt-bracket">${bracket[1]}</span></div>
-</div>`;
-}
-
-export function renderJsonTree(
-  data: unknown,
-  _metadata: Record<string, unknown>
-): string {
-  return `<div class="json-tree card">
-  <div class="jt-toolbar">
-    <button class="btn btn-ghost btn-sm" onclick="__mcpExpandAll()">Expand All</button>
-    <button class="btn btn-ghost btn-sm" onclick="__mcpCollapseAll()">Collapse All</button>
-    <button class="btn btn-ghost btn-sm" onclick="__mcpCopyAll()">Copy JSON</button>
-  </div>
-  <div class="jt-root">${renderNode(null, data, 0)}</div>
-</div>`;
-}
-
-export function getJsonTreeCSS(): string {
-  return `
-.json-tree { font-family: var(--font-mono); font-size: var(--text-sm); overflow-x: auto; }
-.jt-toolbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
-.btn-sm { padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); }
-
-.jt-line, .jt-node > .jt-toggle { padding: 2px 0; display: flex; align-items: center; gap: 4px; }
-.jt-toggle { cursor: pointer; user-select: none; }
-.jt-toggle:hover { background: var(--accent-subtle); border-radius: var(--radius-sm); }
-.jt-arrow { font-size: 10px; width: 14px; text-align: center; transition: transform var(--duration-fast) var(--ease-out); display: inline-block; }
-.jt-arrow.collapsed { transform: rotate(-90deg); }
-
-.jt-key { color: var(--accent); font-weight: 600; }
-.jt-colon { color: var(--text-tertiary); }
-.jt-string { color: #22863a; }
-.jt-number { color: #005cc5; }
-.jt-boolean { color: #d73a49; }
-.jt-null { color: var(--text-tertiary); font-style: italic; }
-.jt-bracket { color: var(--text-tertiary); font-weight: 700; }
-.jt-count { color: var(--text-tertiary); font-size: var(--text-xs); margin-left: var(--sp-1); }
-
-@media (prefers-color-scheme: dark) {
-  .jt-string { color: #7ee787; }
-  .jt-number { color: #79c0ff; }
-  .jt-boolean { color: #ff7b72; }
-}
-
-.jt-children { overflow: hidden; }
-.jt-children.hidden { display: none; }
-.jt-copy {
-  opacity: 0; border: none; background: none; cursor: pointer;
-  color: var(--text-tertiary); font-size: 14px; padding: 0 4px;
-  transition: opacity var(--duration-fast) var(--ease-out);
-}
-.jt-line:hover .jt-copy, .jt-toggle:hover .jt-copy { opacity: 1; }
-.jt-copy:hover { color: var(--accent); }
-`;
-}
-
-export function getJsonTreeJS(): string {
-  return `
-var __mcpTreeData;
-function __mcpToggle(id) {
-  var el = document.getElementById(id);
-  var arrow = document.getElementById(id + '-arrow');
-  if (!el) return;
-  el.classList.toggle('hidden');
-  if (arrow) arrow.classList.toggle('collapsed');
-}
-function __mcpExpandAll() {
-  document.querySelectorAll('.jt-children').forEach(function(el) { el.classList.remove('hidden'); });
-  document.querySelectorAll('.jt-arrow').forEach(function(el) { el.classList.remove('collapsed'); });
-}
-function __mcpCollapseAll() {
-  document.querySelectorAll('.jt-children').forEach(function(el) { el.classList.add('hidden'); });
-  document.querySelectorAll('.jt-arrow').forEach(function(el) { el.classList.add('collapsed'); });
-}
-function __mcpCopy(btn) {
-  var val = btn.getAttribute('data-val');
-  navigator.clipboard.writeText(val).then(function() {
-    var orig = btn.textContent;
-    btn.textContent = '✓';
-    setTimeout(function() { btn.textContent = orig; }, 1000);
-  });
-}
-function __mcpCopyAll() {
-  if (__mcpTreeData) navigator.clipboard.writeText(JSON.stringify(__mcpTreeData, null, 2));
-}`;
-}

package/src/renderers/metrics-card.ts

@@ -1,108 +0,0 @@
-// ── Metrics Card Renderer: KPI/summary → card layout ──
-import { escapeHtml } from '../html-builder.js';
-
-function formatMetricValue(value: number, key: string): string {
-  // Percentage
-  if (/rate|ratio|percent|pct/i.test(key)) {
-    return `${(value * (value <= 1 ? 100 : 1)).toFixed(1)}%`;
-  }
-  // Currency
-  if (/price|cost|revenue|amount|total|value/i.test(key)) {
-    if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(1)}M`;
-    if (value >= 1_000) return `$${(value / 1_000).toFixed(1)}K`;
-    return `$${value.toFixed(2)}`;
-  }
-  // Large numbers
-  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
-  // Scientific notation for very small/large
-  if (Math.abs(value) < 0.001 && value !== 0) return value.toExponential(2);
-
-  return Number.isInteger(value) ? value.toLocaleString() : value.toFixed(2);
-}
-
-function humanizeKey(key: string): string {
-  return key
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/[_-]/g, ' ')
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .trim();
-}
-
-export function renderMetricsCard(
-  data: unknown,
-  _metadata: Record<string, unknown>
-): string {
-  if (data === null || typeof data !== 'object' || Array.isArray(data)) {
-    return '<div class="card">Invalid metrics data</div>';
-  }
-
-  const obj = data as Record<string, unknown>;
-  const cards: string[] = [];
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (typeof value === 'number') {
-      const formatted = formatMetricValue(value, key);
-      const label = humanizeKey(key);
-      cards.push(`<div class="metric-card animate-in">
-  <div class="metric-label">${escapeHtml(label)}</div>
-  <div class="metric-value">${escapeHtml(formatted)}</div>
-</div>`);
-    } else if (typeof value === 'string') {
-      cards.push(`<div class="metric-card metric-text animate-in">
-  <div class="metric-label">${escapeHtml(humanizeKey(key))}</div>
-  <div class="metric-text-value">${escapeHtml(value)}</div>
-</div>`);
-    }
-  }
-
-  return `<div class="metrics-grid">${cards.join('\n')}</div>`;
-}
-
-export function getMetricsCardCSS(): string {
-  return `
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: var(--sp-4);
-}
-
-.metric-card {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: var(--sp-5);
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-  transition: box-shadow var(--duration-fast) var(--ease-out),
-              transform var(--duration-fast) var(--ease-out);
-}
-.metric-card:hover {
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.metric-label {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-tertiary);
-}
-
-.metric-value {
-  font-size: var(--text-3xl);
-  font-weight: 800;
-  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.02em;
-}
-
-.metric-text-value {
-  font-size: var(--text-base);
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-`;
-}

package/src/renderers/reading-block.ts

@@ -1,114 +0,0 @@
-// ── Reading Block Renderer: long text/markdown → formatted block ──
-import { escapeHtml } from '../html-builder.js';
-
-/** Simple markdown-like formatting (no dependencies) */
-function formatText(text: string): string {
-  let html = escapeHtml(text);
-
-  // Headers
-  html = html.replace(/^### (.+)$/gm, '<h3 class="rb-h3">$1</h3>');
-  html = html.replace(/^## (.+)$/gm, '<h2 class="rb-h2">$1</h2>');
-  html = html.replace(/^# (.+)$/gm, '<h1 class="rb-h1">$1</h1>');
-
-  // Bold and italic
-  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
-  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
-
-  // Inline code
-  html = html.replace(/`([^`]+)`/g, '<code class="rb-code">$1</code>');
-
-  // Code blocks
-  html = html.replace(/```[\s\S]*?```/g, (match) => {
-    const code = match.slice(3, -3).replace(/^\w*\n/, '');
-    return `<pre class="rb-pre"><code>${code}</code></pre>`;
-  });
-
-  // Line breaks → paragraphs
-  html = html
-    .split(/\n\n+/)
-    .map((p) => {
-      const trimmed = p.trim();
-      if (!trimmed) return '';
-      if (trimmed.startsWith('<h') || trimmed.startsWith('<pre')) return trimmed;
-      return `<p>${trimmed.replace(/\n/g, '<br>')}</p>`;
-    })
-    .filter(Boolean)
-    .join('\n');
-
-  return html;
-}
-
-export function renderReadingBlock(
-  data: unknown,
-  metadata: Record<string, unknown>
-): string {
-  const textKeys = metadata['textKeys'] as string[] | undefined;
-
-  // Direct string
-  if (typeof data === 'string') {
-    return `<article class="reading-block card animate-in">${formatText(data)}</article>`;
-  }
-
-  // Object with text keys
-  if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
-    const obj = data as Record<string, unknown>;
-    const sections: string[] = [];
-
-    for (const [key, value] of Object.entries(obj)) {
-      if (typeof value === 'string' && (value.length > 100 || (textKeys && textKeys.includes(key)))) {
-        const label = key.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^\w/, (c) => c.toUpperCase()).trim();
-        sections.push(`<section class="rb-section">
-  <h3 class="rb-section-title">${escapeHtml(label)}</h3>
-  <div class="rb-content">${formatText(value)}</div>
-</section>`);
-      } else {
-        // Non-text fields → small metadata row
-        sections.push(`<div class="rb-meta-row">
-  <span class="rb-meta-key">${escapeHtml(key)}</span>
-  <span class="rb-meta-val">${escapeHtml(String(value))}</span>
-</div>`);
-      }
-    }
-
-    return `<article class="reading-block card animate-in">${sections.join('\n')}</article>`;
-  }
-
-  // Fallback
-  return `<article class="reading-block card animate-in"><pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre></article>`;
-}
-
-export function getReadingBlockCSS(): string {
-  return `
-.reading-block { max-width: 720px; line-height: 1.75; }
-.reading-block p { margin-bottom: var(--sp-4); color: var(--text-primary); }
-.reading-block strong { font-weight: 700; }
-
-.rb-h1 { font-size: var(--text-2xl); font-weight: 800; margin: var(--sp-6) 0 var(--sp-3); }
-.rb-h2 { font-size: var(--text-xl); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
-.rb-h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
-
-.rb-code {
-  background: var(--bg-tertiary); padding: 2px 6px; border-radius: 4px;
-  font-family: var(--font-mono); font-size: 0.9em;
-}
-.rb-pre {
-  background: var(--bg-tertiary); padding: var(--sp-4); border-radius: var(--radius-sm);
-  overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm);
-  margin: var(--sp-4) 0;
-}
-
-.rb-section { margin-bottom: var(--sp-6); }
-.rb-section-title {
-  font-size: var(--text-base); font-weight: 700; color: var(--accent);
-  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--border);
-}
-.rb-content { color: var(--text-primary); }
-
-.rb-meta-row {
-  display: flex; gap: var(--sp-3); padding: var(--sp-1) 0;
-  font-size: var(--text-sm); border-bottom: 1px solid var(--border);
-}
-.rb-meta-key { font-weight: 600; color: var(--text-secondary); min-width: 120px; }
-.rb-meta-val { color: var(--text-primary); }
-`;
-}