@mcp-html-bridge/ui-engine 0.1.0

package/src/renderers/reading-block.ts

@@ -0,0 +1,114 @@
+// ── 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); }
+`;
+}

package/src/theme.ts

@@ -0,0 +1,184 @@
+// ── Theme system: CSS variables + dark mode + glassmorphism ──
+
+export function generateThemeCSS(): string {
+  return `
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── CSS Variables (Light) ── */
+:root {
+  /* Surface */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fb;
+  --bg-tertiary: #f0f2f5;
+  --bg-elevated: #ffffff;
+
+  /* Text */
+  --text-primary: #1a1d23;
+  --text-secondary: #5f6672;
+  --text-tertiary: #9aa0ab;
+  --text-inverse: #ffffff;
+
+  /* Accent */
+  --accent: #4f6ef7;
+  --accent-hover: #3b5ce4;
+  --accent-subtle: #eef1fe;
+  --accent-text: #ffffff;
+
+  /* Semantic */
+  --success: #22c55e;
+  --success-subtle: #f0fdf4;
+  --warning: #f59e0b;
+  --warning-subtle: #fffbeb;
+  --danger: #ef4444;
+  --danger-subtle: #fef2f2;
+  --info: #3b82f6;
+  --info-subtle: #eff6ff;
+
+  /* Borders */
+  --border: #e2e5ea;
+  --border-strong: #cdd1d8;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
+
+  /* Glass */
+  --glass-bg: rgba(255,255,255,0.72);
+  --glass-border: rgba(255,255,255,0.2);
+  --glass-blur: 16px;
+
+  /* Typography scale */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 2rem;
+
+  /* Spacing scale */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 20px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+  --sp-10: 40px;
+  --sp-12: 48px;
+
+  /* Radius */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+
+  /* Transitions */
+  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --duration-fast: 120ms;
+  --duration-normal: 200ms;
+  --duration-slow: 350ms;
+}
+
+/* ── Dark Mode ── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #0f1117;
+    --bg-secondary: #161922;
+    --bg-tertiary: #1e212b;
+    --bg-elevated: #1e212b;
+
+    --text-primary: #e8eaed;
+    --text-secondary: #9aa0ab;
+    --text-tertiary: #6b7280;
+    --text-inverse: #0f1117;
+
+    --accent: #6b8aff;
+    --accent-hover: #8ba3ff;
+    --accent-subtle: #1c2444;
+    --accent-text: #0f1117;
+
+    --success-subtle: #052e16;
+    --warning-subtle: #451a03;
+    --danger-subtle: #450a0a;
+    --info-subtle: #172554;
+
+    --border: #2a2d38;
+    --border-strong: #3b3f4c;
+
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
+
+    --glass-bg: rgba(15,17,23,0.72);
+    --glass-border: rgba(255,255,255,0.08);
+  }
+}
+
+/* ── Base styles ── */
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  padding: var(--sp-6);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Utility classes ── */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+}
+
+.card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  padding: var(--sp-6);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.badge-success { background: var(--success-subtle); color: var(--success); }
+.badge-warning { background: var(--warning-subtle); color: var(--warning); }
+.badge-danger { background: var(--danger-subtle); color: var(--danger); }
+.badge-info { background: var(--info-subtle); color: var(--info); }
+
+.section-title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: var(--sp-4);
+  padding-bottom: var(--sp-2);
+  border-bottom: 2px solid var(--border);
+}
+
+/* ── Animations ── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in {
+  animation: fadeIn var(--duration-normal) var(--ease-out) both;
+}
+`;
+}

package/src/types.ts

@@ -0,0 +1,83 @@
+// ── 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;
+  debug?: boolean;
+  title?: string;
+}
+
+// ── Engine Input (discriminated union) ──
+export interface SchemaInput {
+  mode: 'schema';
+  schema: JSONSchema;
+  toolName?: string;
+  toolDescription?: string;
+}
+
+export interface DataInput {
+  mode: 'data';
+  data: unknown;
+  toolName?: string;
+  toolDescription?: string;
+}
+
+export type EngineInput = SchemaInput | DataInput;
+
+// ── JSON Schema subset (sufficient for MCP tool schemas) ──
+export interface JSONSchema {
+  type?: string | string[];
+  properties?: Record<string, JSONSchema>;
+  required?: string[];
+  items?: JSONSchema;
+  enum?: unknown[];
+  description?: string;
+  default?: unknown;
+  title?: string;
+  format?: string;
+  minimum?: number;
+  maximum?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  oneOf?: JSONSchema[];
+  anyOf?: JSONSchema[];
+  allOf?: JSONSchema[];
+  $ref?: string;
+  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;
+  description?: string;
+  inputSchema: JSONSchema;
+}
+
+// ── MCP Client types ──
+export interface MCPServerInfo {
+  name: string;
+  version: string;
+  tools: MCPToolDefinition[];
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}