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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-html-bridge/ui-engine",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "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,27 @@
 // ── Engine Orchestrator: JSON → self-contained HTML document ──
 import type { EngineInput, RenderOptions, JSONSchema } from './types.js';
+import type { LLMConfig } from './llm-renderer.js';
 import { document as htmlDocument } from './html-builder.js';
 import { generateThemeCSS } from './theme.js';
 import { generateBridgeJS } from './bridge.js';
 import { renderJSON, getRendererCSS, getRendererJS } from './renderer.js';
+import { renderWithLLM } from './llm-renderer.js';
 import { renderForm, getFormCSS } from './renderers/form.js';
 import { generatePlaygroundHTML, getPlaygroundCSS, getPlaygroundJS } from './playground.js';
+import { generateUtilityCSS } from './utilities.js';
 
 /** Options for rendering */
 interface DataRenderOptions extends RenderOptions {
   toolName?: string;
   toolDescription?: string;
+  /** LLM config for semantic rendering. Omit for structural fallback. */
+  llm?: LLMConfig;
 }
 
-/** 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()];
+/** Build the document wrapper around an HTML body fragment */
+function buildDocument(body: string, options: DataRenderOptions, extraCSS = '', extraJS = ''): string {
+  const cssParts = [generateThemeCSS(), generateUtilityCSS(), extraCSS];
+  const jsParts = [generateBridgeJS(), extraJS];
 
   if (options.debug) {
     cssParts.push(getPlaygroundCSS());
@@ -37,7 +38,38 @@ export function renderFromData(
   });
 }
 
-/** Render a form from a JSON Schema (for tool input) */
+/**
+ * Render any JSON data as a full HTML document.
+ *
+ * - If `options.llm` is provided: calls the LLM for semantic rendering (async).
+ * - If omitted: uses the structural renderer (sync, returned as resolved Promise).
+ */
+export async function renderFromData(
+  data: unknown,
+  options: DataRenderOptions = {}
+): Promise<string> {
+  if (options.llm) {
+    const body = await renderWithLLM(data, options.llm);
+    // Always include structural CSS/JS — the LLM fallback path may produce structural HTML
+    return buildDocument(body, options, getRendererCSS(), getRendererJS());
+  }
+
+  const body = renderJSON(data);
+  return buildDocument(body, options, getRendererCSS(), getRendererJS());
+}
+
+/**
+ * Sync structural rendering (no LLM). Use when you know you don't need LLM.
+ */
+export function renderFromDataSync(
+  data: unknown,
+  options: Omit<DataRenderOptions, 'llm'> = {}
+): string {
+  const body = renderJSON(data);
+  return buildDocument(body, options, getRendererCSS(), getRendererJS());
+}
+
+/** Render a form from a JSON Schema (for tool input). Always sync. */
 export function renderFromSchema(
   schema: JSONSchema,
   options: DataRenderOptions = {}
@@ -51,6 +83,7 @@ export function renderFromSchema(
 
   const css = [
     generateThemeCSS(),
+    generateUtilityCSS(),
     getFormCSS(),
     options.debug ? getPlaygroundCSS() : '',
   ].join('\n');
@@ -69,7 +102,7 @@ export function renderFromSchema(
 }
 
 /** Unified API */
-export function render(input: EngineInput, options: DataRenderOptions = {}): string {
+export async function render(input: EngineInput, options: DataRenderOptions = {}): Promise<string> {
   if (input.mode === 'schema') {
     return renderFromSchema(input.schema, {
       ...options,

package/src/index.ts

@@ -3,13 +3,19 @@ export {
   render,
   renderFromSchema,
   renderFromData,
+  renderFromDataSync,
 } from './engine.js';
 
-// Universal JSON → HTML renderer (the core)
+// Universal JSON → HTML renderer (structural fallback)
 export { renderJSON, getRendererCSS, getRendererJS } from './renderer.js';
 
+// LLM-powered semantic renderer
+export { renderWithLLM, RENDERING_PROMPT } from './llm-renderer.js';
+export type { LLMConfig } from './llm-renderer.js';
+
 // Building blocks (for custom composition)
 export { generateThemeCSS } from './theme.js';
+export { generateUtilityCSS } from './utilities.js';
 export { generateBridgeJS } from './bridge.js';
 export { escapeHtml, tag, style, script, document } from './html-builder.js';
 

package/src/llm-renderer.ts

@@ -0,0 +1,129 @@
+/**
+ * LLM-powered semantic renderer.
+ *
+ * The structural renderer (renderer.ts) maps JSON shapes to HTML mechanically.
+ * This module sends JSON to an LLM with a rendering prompt,
+ * letting the model understand semantics and produce the best HTML.
+ *
+ * Supports any OpenAI-compatible API.
+ */
+
+/** Configuration for the LLM endpoint */
+export interface LLMConfig {
+  /** API base URL (e.g. "http://localhost:11434/v1") */
+  apiUrl: string;
+  /** API key (optional for local models) */
+  apiKey?: string;
+  /** Model name */
+  model: string;
+}
+
+/**
+ * The rendering prompt.
+ *
+ * This is intentionally short and non-prescriptive. We tell the model
+ * WHAT to do (produce the best HTML for this data), not HOW to do it
+ * (don't enumerate SVG, markdown, etc.). The model should figure out
+ * the semantics on its own.
+ */
+const SYSTEM_PROMPT = `You are a JSON-to-HTML renderer. You receive JSON data and produce an HTML fragment that visualizes it in the best way possible.
+
+Rules:
+1. Output ONLY an HTML fragment. No <html>, <head>, <body> wrappers — those exist already.
+2. Understand what the data MEANS, not just its shape. Render content in its native form — if something is meant to be seen, show it; if it's meant to be read, format it; if it's structured, organize it.
+3. Use these CSS variables for theming (light/dark mode is handled automatically):
+   Colors: --bg-primary, --bg-secondary, --bg-tertiary, --bg-elevated, --text-primary, --text-secondary, --text-tertiary, --accent, --accent-subtle, --success, --warning, --danger, --info (each has a -subtle variant), --border, --border-strong
+   Typography: --font-sans, --font-mono, --text-xs to --text-3xl
+   Spacing: --sp-1 (4px) to --sp-12 (48px)
+   Radius: --radius-sm, --radius-md, --radius-lg, --radius-full
+   Shadows: --shadow-sm, --shadow-md, --shadow-lg
+   Utility classes: .card, .badge, .badge-success, .badge-warning, .badge-danger, .badge-info, .section-title
+4. Tailwind-compatible utility classes are available. Use them freely: flex, grid, gap-*, p-*, m-*, text-*, bg-*, border, rounded-*, shadow-*, font-*, items-*, justify-*, w-full, h-full, overflow-*, relative/absolute, etc. Responsive prefixes sm: and md: work too.
+5. Do not invent data. Do not add commentary. Just the HTML.
+6. Do not wrap output in markdown code fences.`;
+
+/**
+ * Call an OpenAI-compatible chat completions API.
+ */
+async function callLLM(
+  data: unknown,
+  config: LLMConfig
+): Promise<string> {
+  const url = config.apiUrl.replace(/\/+$/, '') + '/chat/completions';
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+  if (config.apiKey) {
+    headers['Authorization'] = `Bearer ${config.apiKey}`;
+  }
+
+  const body = {
+    model: config.model,
+    messages: [
+      { role: 'system', content: SYSTEM_PROMPT },
+      { role: 'user', content: JSON.stringify(data, null, 2) },
+    ],
+    temperature: 0.2,
+    max_tokens: 16384,
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(body),
+  });
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`LLM API ${response.status}: ${text.slice(0, 300)}`);
+  }
+
+  const result = await response.json() as {
+    choices?: Array<{ message?: { content?: string } }>;
+  };
+
+  const content = result.choices?.[0]?.message?.content;
+  if (!content) {
+    throw new Error('LLM returned empty response');
+  }
+
+  return stripCodeFences(content);
+}
+
+/** Remove markdown code fences if the LLM wrapped its output */
+function stripCodeFences(html: string): string {
+  const trimmed = html.trim();
+  const fenceMatch = trimmed.match(/^```(?:html)?\s*\n([\s\S]*?)\n\s*```$/);
+  if (fenceMatch) {
+    return fenceMatch[1].trim();
+  }
+  return trimmed;
+}
+
+/**
+ * Render JSON data using an LLM for semantic understanding.
+ * Returns an HTML fragment (not a full document).
+ * Falls back to structural renderer on failure.
+ */
+export async function renderWithLLM(
+  data: unknown,
+  config: LLMConfig
+): Promise<string> {
+  try {
+    const html = await callLLM(data, config);
+    return `<div class="mcp-root">${html}</div>`;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    console.error(`  LLM rendering failed: ${message}`);
+    console.error('  Falling back to structural renderer.');
+
+    const { renderJSON } = await import('./renderer.js');
+    const fallbackHTML = renderJSON(data);
+    const errorBanner = `<div style="padding:var(--sp-3);margin-bottom:var(--sp-4);background:var(--warning-subtle);border:1px solid var(--warning);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary)">LLM rendering failed: ${message.replace(/</g, '&lt;')}. Showing structural fallback.</div>`;
+    return `<div class="mcp-root">${errorBanner}${fallbackHTML}</div>`;
+  }
+}
+
+/** Export the system prompt for inspection/customization */
+export { SYSTEM_PROMPT as RENDERING_PROMPT };

package/src/renderer.ts

@@ -2,32 +2,49 @@
  * Universal JSON → HTML renderer.
  *
  * No hardcoded business logic. No status badges, no price formatting,
- * no regex-based field type guessing. Just clean structural rendering:
+ * no regex-based field type guessing. Just clean structural rendering
+ * that handles any JSON shape gracefully:
  *
- *   Array<Object>  → sortable <table>
+ *   Array<Object>  → sortable <table> (union of all keys)
  *   Object         → <dl> key-value pairs (recursive for nesting)
- *   Array<scalar>  → <ul> list
- *   string         → text
+ *   Array<mixed>   → <ul> list with recursive items
+ *   string         → text (auto-links URLs)
  *   number         → number
  *   boolean        → true/false
  *   null           → placeholder
+ *   empty          → explicit empty indicator
  *
  * All formatting decisions are the caller's responsibility (LLM or user).
  */
 import { escapeHtml } from './html-builder.js';
 
+// ── Constants ──
+
+const MAX_DEPTH = 30;
+const MAX_TABLE_ROWS = 500;
+const MAX_LIST_ITEMS = 200;
+const URL_REGEX = /^https?:\/\/[^\s<>"{}|\\^`[\]]+$/;
+const IMAGE_EXT_REGEX = /\.(png|jpe?g|gif|webp|svg|ico|bmp)(\?[^\s]*)?$/i;
+
 // ── 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));
+  if (!Array.isArray(data) || data.length === 0) return false;
+  // At least 80% must be non-null objects (tolerates a few nulls in the array)
+  let objCount = 0;
+  for (const item of data) {
+    if (item !== null && typeof item === 'object' && !Array.isArray(item)) {
+      objCount++;
+    }
+  }
+  return objCount / data.length >= 0.8 && objCount >= 1;
 }
 
 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'
-  );
+  const values = Object.values(data as Record<string, unknown>);
+  if (values.length === 0) return true;
+  return values.every(v => v === null || typeof v !== 'object');
 }
 
 function humanizeKey(key: string): string {
@@ -38,19 +55,38 @@ function humanizeKey(key: string): string {
     .trim();
 }
 
+function isUrl(value: string): boolean {
+  return URL_REGEX.test(value);
+}
+
+function isImageUrl(value: string): boolean {
+  return IMAGE_EXT_REGEX.test(value);
+}
+
 // ── Render primitives ──
 
 function renderValue(value: unknown, depth: number): string {
   if (value === null || value === undefined) {
-    return '<span class="mcp-null">—</span>';
+    return '<span class="mcp-null">\u2014</span>';
   }
   if (typeof value === 'boolean') {
-    return `<span class="mcp-bool">${value}</span>`;
+    return `<span class="mcp-bool mcp-bool-${value}">${value}</span>`;
   }
   if (typeof value === 'number') {
     return `<span class="mcp-num">${value}</span>`;
   }
   if (typeof value === 'string') {
+    if (value.length === 0) {
+      return '<span class="mcp-null">(empty)</span>';
+    }
+    // Auto-link URLs
+    if (isUrl(value)) {
+      const escaped = escapeHtml(value);
+      if (isImageUrl(value)) {
+        return `<a href="${escaped}" target="_blank" rel="noopener"><img class="mcp-img" src="${escaped}" alt="" loading="lazy"></a>`;
+      }
+      return `<a class="mcp-link" href="${escaped}" target="_blank" rel="noopener">${escaped}</a>`;
+    }
     if (value.length > 300) {
       return `<div class="mcp-text">${escapeHtml(value)}</div>`;
     }
@@ -62,22 +98,49 @@ function renderValue(value: unknown, depth: number): string {
 
 // ── Core recursive renderer ──
 
-function renderTable(rows: Record<string, unknown>[]): string {
-  const columns = Object.keys(rows[0]);
+/** Collect union of all keys across an array of objects, preserving order */
+function collectColumns(rows: Record<string, unknown>[]): string[] {
+  const seen = new Set<string>();
+  const columns: string[] = [];
+  for (const row of rows) {
+    for (const key of Object.keys(row)) {
+      if (!seen.has(key)) {
+        seen.add(key);
+        columns.push(key);
+      }
+    }
+  }
+  return columns;
+}
+
+function renderTable(rows: Record<string, unknown>[], tableId: string): string {
+  const columns = collectColumns(rows);
+  const truncated = rows.length > MAX_TABLE_ROWS;
+  const displayRows = truncated ? rows.slice(0, MAX_TABLE_ROWS) : rows;
+
   const headerCells = columns
     .map((col, i) =>
-      `<th onclick="__mcpSort(${i})" class="mcp-sortable">${escapeHtml(humanizeKey(col))}<span class="mcp-sort-icon">⇅</span></th>`)
+      `<th onclick="__mcpSort('${escapeHtml(tableId)}',${i})" class="mcp-sortable">${escapeHtml(humanizeKey(col))}<span class="mcp-sort-icon">\u21C5</span></th>`)
     .join('');
 
-  const bodyRows = rows
-    .map(row =>
-      `<tr>${columns.map(col => `<td>${renderValue(row[col], 0)}</td>`).join('')}</tr>`)
+  const bodyRows = displayRows
+    .map(row => {
+      const cells = columns.map(col => {
+        const val = Object.prototype.hasOwnProperty.call(row, col) ? row[col] : undefined;
+        return `<td>${renderValue(val, 1)}</td>`;
+      }).join('');
+      return `<tr>${cells}</tr>`;
+    })
     .join('\n');
 
+  const meta = truncated
+    ? `${rows.length} rows \u00D7 ${columns.length} columns (showing first ${MAX_TABLE_ROWS})`
+    : `${rows.length} rows \u00D7 ${columns.length} columns`;
+
   return `<div class="mcp-table-wrap">
-  <div class="mcp-table-meta">${rows.length} rows × ${columns.length} columns</div>
+  <div class="mcp-table-meta">${meta}</div>
   <div class="mcp-table-scroll">
-    <table class="mcp-table" id="mcp-grid">
+    <table class="mcp-table" id="${escapeHtml(tableId)}">
       <thead><tr>${headerCells}</tr></thead>
       <tbody>${bodyRows}</tbody>
     </table>
@@ -87,6 +150,9 @@ function renderTable(rows: Record<string, unknown>[]): string {
 
 function renderKeyValue(obj: Record<string, unknown>, depth: number): string {
   const entries = Object.entries(obj);
+  if (entries.length === 0) {
+    return '<div class="mcp-empty">(empty object)</div>';
+  }
   const items = entries.map(([key, val]) => {
     const rendered = renderValue(val, depth);
     return `<div class="mcp-kv">
@@ -99,10 +165,21 @@ function renderKeyValue(obj: Record<string, unknown>, depth: number): string {
 }
 
 function renderList(arr: unknown[], depth: number): string {
-  const items = arr.map(item =>
+  if (arr.length === 0) {
+    return '<div class="mcp-empty">(empty array)</div>';
+  }
+  const truncated = arr.length > MAX_LIST_ITEMS;
+  const displayItems = truncated ? arr.slice(0, MAX_LIST_ITEMS) : arr;
+
+  const items = displayItems.map(item =>
     `<li>${renderValue(item, depth)}</li>`
   ).join('\n');
-  return `<ul class="mcp-list">${items}</ul>`;
+
+  const suffix = truncated
+    ? `<li class="mcp-truncated">\u2026 and ${arr.length - MAX_LIST_ITEMS} more items</li>`
+    : '';
+
+  return `<ul class="mcp-list">${items}\n${suffix}</ul>`;
 }
 
 function renderCollapsible(label: string, content: string, open = true): string {
@@ -112,7 +189,15 @@ function renderCollapsible(label: string, content: string, open = true): string
 </details>`;
 }
 
+// Global table counter for unique IDs
+let tableCounter = 0;
+
 function renderAny(data: unknown, depth: number): string {
+  // Depth guard
+  if (depth > MAX_DEPTH) {
+    return '<span class="mcp-null">(max depth reached)</span>';
+  }
+
   // Primitive
   if (data === null || data === undefined || typeof data !== 'object') {
     return renderValue(data, depth);
@@ -120,7 +205,13 @@ function renderAny(data: unknown, depth: number): string {
 
   // Array of objects → table
   if (isArrayOfObjects(data)) {
-    const content = renderTable(data);
+    // Filter to only objects for the table, skip non-objects
+    const objectRows = (data as unknown[]).filter(
+      (item): item is Record<string, unknown> =>
+        item !== null && typeof item === 'object' && !Array.isArray(item)
+    );
+    const tableId = `mcp-grid-${tableCounter++}`;
+    const content = renderTable(objectRows, tableId);
     return depth > 0 ? renderCollapsible(`Array (${data.length} items)`, content) : content;
   }
 
@@ -138,6 +229,10 @@ function renderAny(data: unknown, depth: number): string {
 
   // Nested object → grouped sections
   const entries = Object.entries(obj);
+  if (entries.length === 0) {
+    return '<div class="mcp-empty">(empty object)</div>';
+  }
+
   const sections = entries.map(([key, val]) => {
     if (val !== null && typeof val === 'object') {
       return renderCollapsible(humanizeKey(key), renderAny(val, depth + 1), depth < 2);
@@ -161,6 +256,7 @@ function renderAny(data: unknown, depth: number): string {
 
 /** Render any JSON data as an HTML fragment. No business logic, pure structure. */
 export function renderJSON(data: unknown): string {
+  tableCounter = 0; // Reset per render call
   return `<div class="mcp-root">${renderAny(data, 0)}</div>`;
 }
 
@@ -184,13 +280,14 @@ export function getRendererCSS(): string {
   text-transform: uppercase; letter-spacing: 0.05em;
   border-bottom: 2px solid var(--border);
   white-space: nowrap; user-select: none;
+  position: sticky; top: 0; background: var(--bg-primary); z-index: 1;
 }
 .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;
+  vertical-align: top; max-width: 400px;
 }
 .mcp-table tbody tr:hover { background: var(--accent-subtle); }
 
@@ -236,25 +333,42 @@ export function getRendererCSS(): string {
 /* Primitives */
 .mcp-null { color: var(--text-tertiary); font-style: italic; }
 .mcp-bool { font-weight: 600; }
+.mcp-bool-true { color: var(--success); }
+.mcp-bool-false { color: var(--danger); }
 .mcp-num { font-variant-numeric: tabular-nums; }
 .mcp-text { white-space: pre-wrap; line-height: 1.6; }
+.mcp-empty { color: var(--text-tertiary); font-style: italic; padding: var(--sp-2) 0; }
+.mcp-truncated { color: var(--text-tertiary); font-style: italic; }
+
+/* Links & images */
+.mcp-link { color: var(--accent); text-decoration: none; word-break: break-all; }
+.mcp-link:hover { text-decoration: underline; }
+.mcp-img { max-width: 200px; max-height: 150px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
+
+/* Nested table styling */
+.mcp-details .mcp-table-wrap { margin: 0; }
+.mcp-details .mcp-table th { position: static; }
 `;
 }
 
-/** Get the JS for table sorting (the only interactive behavior) */
+/** Get the JS for table sorting (supports multiple tables) */
 export function getRendererJS(): string {
   return `
-function __mcpSort(colIdx) {
-  var table = document.getElementById('mcp-grid');
+function __mcpSort(tableId, colIdx) {
+  var table = document.getElementById(tableId);
   if (!table) return;
   var tbody = table.tBodies[0];
   var rows = Array.from(tbody.rows);
-  var dir = table.dataset.sortDir === 'asc' ? 'desc' : 'asc';
+  var key = tableId + '_' + colIdx;
+  var dir = table.dataset.sortKey === key && table.dataset.sortDir === 'asc' ? 'desc' : 'asc';
   table.dataset.sortDir = dir;
+  table.dataset.sortKey = key;
 
   rows.sort(function(a, b) {
-    var av = a.cells[colIdx].textContent.trim();
-    var bv = b.cells[colIdx].textContent.trim();
+    var ac = a.cells[colIdx], bc = b.cells[colIdx];
+    if (!ac || !bc) return 0;
+    var av = ac.textContent.trim();
+    var bv = bc.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;

package/src/utilities.ts

@@ -0,0 +1,319 @@
+/**
+ * Tailwind-like atomic utility classes.
+ *
+ * Maps familiar Tailwind class names to our CSS variable system.
+ * LLMs already know Tailwind syntax from training data — by providing
+ * these utilities, we ensure any model produces visually consistent HTML
+ * that automatically respects light/dark mode.
+ *
+ * This is NOT a full Tailwind build. It's a curated subset:
+ * - Layout (flex, grid, gap)
+ * - Spacing (p-*, m-*)
+ * - Typography (text-*, font-*)
+ * - Colors (text-*, bg-*, border-*)
+ * - Borders & radius
+ * - Shadows & effects
+ * - Sizing & overflow
+ */
+
+export function generateUtilityCSS(): string {
+  return `
+/* ══════════════════════════════════════════
+   Tailwind-compatible utility classes
+   Mapped to CSS variable theming system
+   ══════════════════════════════════════════ */
+
+/* ── Display ── */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.inline { display: inline; }
+.hidden { display: none; }
+
+/* ── Flex ── */
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.flex-row { flex-direction: row; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-none { flex: none; }
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.items-stretch { align-items: stretch; }
+.items-baseline { align-items: baseline; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+.self-start { align-self: flex-start; }
+.self-center { align-self: center; }
+.self-end { align-self: flex-end; }
+.shrink-0 { flex-shrink: 0; }
+.grow { flex-grow: 1; }
+
+/* ── Grid ── */
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-full { grid-column: 1 / -1; }
+
+/* ── Gap ── */
+.gap-1 { gap: var(--sp-1); }
+.gap-2 { gap: var(--sp-2); }
+.gap-3 { gap: var(--sp-3); }
+.gap-4 { gap: var(--sp-4); }
+.gap-5 { gap: var(--sp-5); }
+.gap-6 { gap: var(--sp-6); }
+.gap-8 { gap: var(--sp-8); }
+
+/* ── Padding ── */
+.p-0 { padding: 0; }
+.p-1 { padding: var(--sp-1); }
+.p-2 { padding: var(--sp-2); }
+.p-3 { padding: var(--sp-3); }
+.p-4 { padding: var(--sp-4); }
+.p-5 { padding: var(--sp-5); }
+.p-6 { padding: var(--sp-6); }
+.p-8 { padding: var(--sp-8); }
+.px-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
+.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
+.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
+.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
+.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
+.py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
+.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
+.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
+.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
+.py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
+.pt-2 { padding-top: var(--sp-2); }
+.pt-4 { padding-top: var(--sp-4); }
+.pb-2 { padding-bottom: var(--sp-2); }
+.pb-4 { padding-bottom: var(--sp-4); }
+.pl-3 { padding-left: var(--sp-3); }
+.pl-4 { padding-left: var(--sp-4); }
+.pr-3 { padding-right: var(--sp-3); }
+
+/* ── Margin ── */
+.m-0 { margin: 0; }
+.m-auto { margin: auto; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mt-1 { margin-top: var(--sp-1); }
+.mt-2 { margin-top: var(--sp-2); }
+.mt-3 { margin-top: var(--sp-3); }
+.mt-4 { margin-top: var(--sp-4); }
+.mt-6 { margin-top: var(--sp-6); }
+.mt-8 { margin-top: var(--sp-8); }
+.mb-1 { margin-bottom: var(--sp-1); }
+.mb-2 { margin-bottom: var(--sp-2); }
+.mb-3 { margin-bottom: var(--sp-3); }
+.mb-4 { margin-bottom: var(--sp-4); }
+.mb-6 { margin-bottom: var(--sp-6); }
+.ml-2 { margin-left: var(--sp-2); }
+.ml-3 { margin-left: var(--sp-3); }
+.mr-2 { margin-right: var(--sp-2); }
+.mr-3 { margin-right: var(--sp-3); }
+
+/* ── Width & Height ── */
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.w-fit { width: fit-content; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-3xl { max-width: 48rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-full { max-width: 100%; }
+.max-w-prose { max-width: 65ch; }
+.min-w-0 { min-width: 0; }
+.h-auto { height: auto; }
+.h-full { height: 100%; }
+.min-h-0 { min-height: 0; }
+
+/* ── Typography ── */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+.font-sans { font-family: var(--font-sans); }
+.font-mono { font-family: var(--font-mono); }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.italic { font-style: italic; }
+.not-italic { font-style: normal; }
+.leading-none { line-height: 1; }
+.leading-tight { line-height: 1.25; }
+.leading-snug { line-height: 1.375; }
+.leading-normal { line-height: 1.5; }
+.leading-relaxed { line-height: 1.625; }
+.tracking-tight { letter-spacing: -0.025em; }
+.tracking-normal { letter-spacing: 0; }
+.tracking-wide { letter-spacing: 0.025em; }
+.tracking-wider { letter-spacing: 0.05em; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.normal-case { text-transform: none; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+.line-through { text-decoration: line-through; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.whitespace-pre { white-space: pre; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.whitespace-nowrap { white-space: nowrap; }
+.break-words { word-break: break-word; overflow-wrap: break-word; }
+.break-all { word-break: break-all; }
+.tabular-nums { font-variant-numeric: tabular-nums; }
+
+/* ── Text Colors ── */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+.text-inverse { color: var(--text-inverse); }
+.text-accent { color: var(--accent); }
+.text-success { color: var(--success); }
+.text-warning { color: var(--warning); }
+.text-danger { color: var(--danger); }
+.text-info { color: var(--info); }
+
+/* ── Background Colors ── */
+.bg-primary { background-color: var(--bg-primary); }
+.bg-secondary { background-color: var(--bg-secondary); }
+.bg-tertiary { background-color: var(--bg-tertiary); }
+.bg-elevated { background-color: var(--bg-elevated); }
+.bg-accent { background-color: var(--accent); }
+.bg-accent-subtle { background-color: var(--accent-subtle); }
+.bg-success { background-color: var(--success); }
+.bg-success-subtle { background-color: var(--success-subtle); }
+.bg-warning { background-color: var(--warning); }
+.bg-warning-subtle { background-color: var(--warning-subtle); }
+.bg-danger { background-color: var(--danger); }
+.bg-danger-subtle { background-color: var(--danger-subtle); }
+.bg-info { background-color: var(--info); }
+.bg-info-subtle { background-color: var(--info-subtle); }
+.bg-transparent { background-color: transparent; }
+
+/* ── Borders ── */
+.border { border: 1px solid var(--border); }
+.border-2 { border: 2px solid var(--border); }
+.border-t { border-top: 1px solid var(--border); }
+.border-b { border-bottom: 1px solid var(--border); }
+.border-l { border-left: 1px solid var(--border); }
+.border-r { border-right: 1px solid var(--border); }
+.border-strong { border-color: var(--border-strong); }
+.border-accent { border-color: var(--accent); }
+.border-success { border-color: var(--success); }
+.border-warning { border-color: var(--warning); }
+.border-danger { border-color: var(--danger); }
+.border-transparent { border-color: transparent; }
+.border-none { border: none; }
+
+/* ── Border Radius ── */
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded { border-radius: var(--radius-md); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* ── Shadows ── */
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow { box-shadow: var(--shadow-md); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-none { box-shadow: none; }
+
+/* ── Overflow ── */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-scroll { overflow: scroll; }
+
+/* ── Position ── */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+
+/* ── Z-Index ── */
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-50 { z-index: 50; }
+
+/* ── Opacity ── */
+.opacity-0 { opacity: 0; }
+.opacity-25 { opacity: 0.25; }
+.opacity-50 { opacity: 0.5; }
+.opacity-75 { opacity: 0.75; }
+.opacity-100 { opacity: 1; }
+
+/* ── Cursor ── */
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.select-none { user-select: none; }
+
+/* ── Transitions ── */
+.transition { transition: all var(--duration-normal) var(--ease-out); }
+.transition-colors { transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
+
+/* ── List ── */
+.list-none { list-style: none; }
+.list-disc { list-style-type: disc; }
+.list-decimal { list-style-type: decimal; }
+.list-inside { list-style-position: inside; }
+
+/* ── Table ── */
+.table { display: table; }
+.table-auto { table-layout: auto; }
+.table-fixed { table-layout: fixed; }
+.border-collapse { border-collapse: collapse; }
+
+/* ── SVG ── */
+.fill-current { fill: currentColor; }
+.stroke-current { stroke: currentColor; }
+
+/* ── Responsive ── */
+@media (min-width: 640px) {
+  .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sm\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .sm\\:flex-row { flex-direction: row; }
+  .sm\\:text-lg { font-size: var(--text-lg); }
+  .sm\\:text-xl { font-size: var(--text-xl); }
+  .sm\\:p-6 { padding: var(--sp-6); }
+}
+@media (min-width: 768px) {
+  .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md\\:flex-row { flex-direction: row; }
+  .md\\:text-2xl { font-size: var(--text-2xl); }
+  .md\\:text-3xl { font-size: var(--text-3xl); }
+  .md\\:p-8 { padding: var(--sp-8); }
+}
+`;
+}