@illuma-ai/codeviz 1.0.0 → 1.0.1

package/dist/previewTemplate.d.ts

@@ -15,5 +15,9 @@ export declare function buildPreviewHtml(options: {
     tailwindCdn?: string | false;
     externalResources?: string[];
     extraFiles?: Record<string, string>;
+    /** Theme CSS injected as a <style> tag — agent never sees this */
+    themeCSS?: string;
+    /** Pre-transpiled component code prepended to user code — agent uses them directly */
+    componentsPreamble?: string;
 }): string;
 //# sourceMappingURL=previewTemplate.d.ts.map

package/dist/previewTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"previewTemplate.d.ts","sourceRoot":"","sources":["../src/previewTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK1D;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,MAAM,CA6CT"}
+{"version":3,"file":"previewTemplate.d.ts","sourceRoot":"","sources":["../src/previewTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK1D;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,GAAG,MAAM,CAgET"}

package/dist/templates.d.ts

@@ -1,13 +1,11 @@
 /**
- * Pre-built starter templates for Ranger's LLM agent.
+ * Template Registry — lightweight API for managing preview templates.
  *
- * KEY DESIGN: Every template includes the FULL dependency preamble (even unused
- * imports). This means the agent NEVER hits missing-dep errors — it just
- * uses whatever it needs from the imports already present. Unused imports
- * are tree-shaken by the browser (never fetched if not used).
+ * The library ships NO templates. Consumers register their own
+ * templates at startup via `registerTemplate()` / `registerTemplates()`.
  *
- * The agent picks a template based on user query, then edits the body.
- * The preamble + structure stays intact, saving hundreds of tokens.
+ * The agent system prompt, template picker, and CodeViz component all read
+ * from this shared registry.
  */
 export interface Template {
     id: string;
@@ -16,21 +14,34 @@ export interface Template {
     /** Keywords that help the agent pick this template from a user query */
     keywords: string[];
     code: string;
-    type: 'react-ts' | 'html' | 'markdown' | 'mermaid' | 'svg' | 'csv' | 'json';
+    type: 'react-ts' | 'html' | 'markdown' | 'mermaid' | 'svg' | 'csv' | 'json' | 'dot' | 'latex' | 'architecture';
     language: string;
 }
+/** Internal registry — consumers populate via registerTemplate(). */
 export declare const templates: Record<string, Template>;
-/** Get a template by ID */
+/** Register a single template. Overwrites if id already exists. */
+export declare function registerTemplate(template: Template): void;
+/** Register multiple templates at once. */
+export declare function registerTemplates(list: Template[]): void;
+/** Remove a template by ID. */
+export declare function unregisterTemplate(id: string): void;
+/** Remove all registered templates. */
+export declare function clearTemplates(): void;
+/** Get a template by ID. */
 export declare function getTemplate(id: string): Template | undefined;
-/** Get all template IDs */
+/** Get all template IDs. */
 export declare function getTemplateIds(): string[];
+/** Get all registered templates as an array. */
+export declare function getTemplates(): Template[];
 /**
  * Returns a summary of all templates for agent system prompts.
+ * Each line: `- **id**: description [keywords: ...]`
  */
 export declare function getTemplateSummary(): string;
 /**
  * Pick the best template based on user query keywords.
- * Returns the template ID, or 'blank' if no strong match.
+ * Returns the template ID with the highest keyword overlap.
+ * Falls back to the first registered template, or empty string if none.
  */
-export declare function pickTemplate(query: string): string;
+export declare function pickTemplate(query: string, fallback?: string): string;
 //# sourceMappingURL=templates.d.ts.map

package/dist/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC5E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAyCD,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAiyB9C,CAAC;AAEF,2BAA2B;AAC3B,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAE5D;AAED,2BAA2B;AAC3B,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAiBlD"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,cAAc,CAAC;IAC/G,QAAQ,EAAE,MAAM,CAAC;CAClB;AAID,qEAAqE;AACrE,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAM,CAAC;AAEtD,mEAAmE;AACnE,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEzD;AAED,2CAA2C;AAC3C,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAIxD;AAED,+BAA+B;AAC/B,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAEnD;AAED,uCAAuC;AACvC,wBAAgB,cAAc,IAAI,IAAI,CAIrC;AAID,4BAA4B;AAC5B,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAE5D;AAED,4BAA4B;AAC5B,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC;AAED,gDAAgD;AAChD,wBAAgB,YAAY,IAAI,QAAQ,EAAE,CAEzC;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAM3C;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAmBrE"}

package/dist/transpiler.d.ts

@@ -1,15 +1,37 @@
 import { PreviewError } from './types';
 
+/** A named section found in the source via @section markers */
+export interface SectionMarker {
+    /** Section name (e.g., "overview", "KPI Cards", "Revenue Chart") */
+    name: string;
+    /** Start line (1-indexed) — the line containing the @section comment */
+    startLine: number;
+    /** End line (1-indexed) — line before the next @section or end of enclosing block */
+    endLine: number;
+}
 export interface TranspileResult {
     code: string;
+    /** Primary error (first in errors array), or null if clean */
     error: PreviewError | null;
+    /** All errors — transpilation + ES module validation */
+    errors: PreviewError[];
+    /**
+     * Structure map — named sections found via `{/* @section: name *\/}` markers.
+     * Returned on EVERY transpile (success or error) so the agent can always
+     * locate sections without reading the whole file.
+     */
+    sections: SectionMarker[];
 }
 /**
- * Transpile TSX/JSX source code to plain JavaScript using Sucrase.
+ * Transpile TSX/JSX source code to plain JavaScript using Sucrase,
+ * then validate the output with acorn (ES module parser) to catch
+ * issues Sucrase doesn't flag (e.g., duplicate `export default`).
+ *
+ * This is the SINGLE SOURCE OF TRUTH for code validation —
+ * both CodeViz preview and server-side verify call this function.
  *
- * Sucrase is ~20x faster than Babel and handles JSX/TypeScript
- * without a full bundler. The output uses ES module imports which
- * are resolved by the browser via import maps.
+ * Pipeline: Source → Sucrase (strip TS + JSX) → acorn (validate ES module)
+ *         → scope analysis (undeclared refs) → result
  *
  * Returns structured errors with line/column for agent consumption.
  */

package/dist/transpiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transpiler.d.ts","sourceRoot":"","sources":["../src/transpiler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;CAC5B;AAID;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;CACZ,GACL,eAAe,CA0BjB;AAwDD;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC5B,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAMjC"}
+{"version":3,"file":"transpiler.d.ts","sourceRoot":"","sources":["../src/transpiler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,+DAA+D;AAC/D,MAAM,WAAW,aAAa;IAC5B,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAsbD;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,MAAM,EACd,OAAO,GAAE;IACP,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;CACZ,GACL,eAAe,CA8GjB;AAiOD;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC5B,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAMjC"}

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { editor } from 'monaco-editor';
 
 /** Supported preview template types */
-export type PreviewTemplate = 'react' | 'react-ts' | 'html' | 'markdown' | 'mermaid' | 'svg' | 'csv' | 'json';
+export type PreviewTemplate = 'react' | 'react-ts' | 'html' | 'markdown' | 'mermaid' | 'svg' | 'csv' | 'json' | 'dot' | 'latex' | 'architecture';
 /** Import map structure for the preview iframe */
 export interface ImportMap {
     imports: Record<string, string>;
@@ -33,9 +33,16 @@ export interface PreviewError {
     column?: number;
     /**
      * Surrounding source lines for context.
-     * Format: "lineNum: content" per line.
+     * Format: "lineNum: content" per line.  Error line marked with >>>.
      */
     sourceContext?: string;
+    /**
+     * Human-readable location in the file — tells the agent WHERE the error is
+     * without reading the whole file.
+     *
+     * Example: "inside export default function App (line 85), inside activePage === 'overview' block (line 120)"
+     */
+    location?: string;
     /** ISO 8601 timestamp */
     timestamp: string;
 }
@@ -91,15 +98,30 @@ export interface CodeVizProps {
     showToolbar?: boolean;
     /** Show/hide the status bar (default: true) */
     showStatusBar?: boolean;
-    /** Called when the close button is clicked — Ranger can unmount or hide the preview */
+    /** Called when the close button is clicked — host app can unmount or hide the preview */
     onClose?: () => void;
     /** Called when fullscreen state changes */
     onFullscreenChange?: (isFullscreen: boolean) => void;
+    /** Filename to display in the status bar / footer center */
+    filename?: string;
+    /** Hide the split view option from the toolbar */
+    hideSplit?: boolean;
+    /** Custom React node rendered in the status bar (e.g., version controls) */
+    footerSlot?: React.ReactNode;
+    /**
+     * External streaming flag — controlled by the host app.
+     *
+     * When true, CodeViz stays in code view and won't auto-switch to preview.
+     * When it transitions from true → false, CodeViz attempts the preview switch
+     * (if no errors). This lets the host (e.g., Ranger's `isSubmitting`) control
+     * the full agent lifecycle — including verify/edit steps after commitCode().
+     */
+    isStreaming?: boolean;
 }
 /**
  * Imperative handle exposed by CodeViz via React.forwardRef.
  *
- * This is the primary API for Ranger to control the preview programmatically.
+ * This is the primary API for the host app to control the preview programmatically.
  * Matches CodeSandboxHandle patterns where applicable.
  *
  * @example

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/ui/components.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Built-in UI components — pre-transpiled and prepended to user code in the iframe.
+ *
+ * These components are available in every template without imports.
+ * The agent just uses them: <DataTable columns={...} data={...} />
+ *
+ * Written as a TSX source string, transpiled once at build time via Sucrase,
+ * then injected before the user's code in the iframe module.
+ *
+ * Design: shadcn/Tailwind patterns + banking theme utility classes.
+ * The agent doesn't manage or even see these — they're library code.
+ */
+/**
+ * TSX source for all built-in components.
+ * Uses the same imports as the template (React hooks, lucide-react icons).
+ * Gets transpiled by the same Sucrase pipeline as user code.
+ */
+export declare const BUILTIN_COMPONENTS_TSX = "\n// \u2500\u2500 Built-in UI Components (auto-injected by CodeViz) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Agent code can use these directly: <DataTable />, <MetricCard />, etc.\n// Do NOT remove or modify \u2014 these are managed by the platform.\n\n/**\n * DataTable \u2014 Searchable, sortable, paginated table.\n * Banking standard: right-aligned numerics, formatted values.\n *\n * @param columns - Array of { key, label, align?, render?, sortable? }\n * @param data - Array of row objects\n * @param searchable - Show search bar (default: true)\n * @param pageSize - Rows per page (default: 10)\n * @param onRowClick - Optional row click handler\n */\nfunction DataTable({ columns = [], data = [], searchable = true, pageSize = 10, onRowClick }) {\n  const [search, setSearch] = useState('');\n  const [sortKey, setSortKey] = useState(null);\n  const [sortDir, setSortDir] = useState('asc');\n  const [page, setPage] = useState(0);\n\n  const filtered = useMemo(() => {\n    if (!search.trim()) return data;\n    const q = search.toLowerCase();\n    return data.filter(row =>\n      columns.some(col => String(row[col.key] ?? '').toLowerCase().includes(q))\n    );\n  }, [data, search, columns]);\n\n  const sorted = useMemo(() => {\n    if (!sortKey) return filtered;\n    return [...filtered].sort((a, b) => {\n      const av = a[sortKey] ?? '', bv = b[sortKey] ?? '';\n      const cmp = typeof av === 'number' && typeof bv === 'number'\n        ? av - bv\n        : String(av).localeCompare(String(bv));\n      return sortDir === 'asc' ? cmp : -cmp;\n    });\n  }, [filtered, sortKey, sortDir]);\n\n  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n  const pageData = sorted.slice(page * pageSize, (page + 1) * pageSize);\n\n  const handleSort = (key) => {\n    if (sortKey === key) {\n      setSortDir(d => d === 'asc' ? 'desc' : 'asc');\n    } else {\n      setSortKey(key);\n      setSortDir('asc');\n    }\n  };\n\n  return (\n    <div className=\"bg-surface-secondary border border-border-light rounded-lg overflow-hidden\">\n      {searchable && (\n        <div className=\"px-4 py-3 border-b border-border-light\">\n          <input\n            type=\"text\"\n            placeholder=\"Search...\"\n            value={search}\n            onChange={e => { setSearch(e.target.value); setPage(0); }}\n            className=\"w-full px-3 py-1.5 text-sm rounded-md bg-surface-tertiary text-text-primary border border-border-light focus:outline-none focus:border-[#00C1D5] placeholder:text-text-tertiary\"\n          />\n        </div>\n      )}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"bg-surface-tertiary\">\n              {columns.map(col => (\n                <th\n                  key={col.key}\n                  onClick={() => col.sortable !== false && handleSort(col.key)}\n                  className={cn(\n                    'px-4 py-2.5 text-xs font-semibold text-text-secondary whitespace-nowrap',\n                    col.align === 'right' ? 'text-right' : 'text-left',\n                    col.sortable !== false && 'cursor-pointer hover:text-text-primary select-none'\n                  )}\n                >\n                  <span className=\"inline-flex items-center gap-1\">\n                    {col.label}\n                    {sortKey === col.key && (\n                      <span className=\"text-[10px]\">{sortDir === 'asc' ? '\u25B2' : '\u25BC'}</span>\n                    )}\n                  </span>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-border-light\">\n            {pageData.map((row, idx) => (\n              <tr\n                key={idx}\n                onClick={() => onRowClick && onRowClick(row, idx)}\n                className={cn('transition-colors', onRowClick && 'cursor-pointer', 'hover:bg-surface-tertiary')}\n              >\n                {columns.map(col => (\n                  <td\n                    key={col.key}\n                    className={cn(\n                      'px-4 py-2.5 text-sm',\n                      col.align === 'right' ? 'text-right tabular-nums' : 'text-left',\n                      'text-text-primary'\n                    )}\n                  >\n                    {col.render ? col.render(row[col.key], row) : row[col.key]}\n                  </td>\n                ))}\n              </tr>\n            ))}\n            {pageData.length === 0 && (\n              <tr>\n                <td colSpan={columns.length} className=\"px-4 py-8 text-center text-text-tertiary text-sm\">\n                  {search ? 'No results found' : 'No data'}\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n      </div>\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between px-4 py-2.5 border-t border-border-light text-xs text-text-secondary\">\n          <span>{sorted.length} row{sorted.length !== 1 ? 's' : ''}</span>\n          <div className=\"flex items-center gap-2\">\n            <button\n              onClick={() => setPage(p => Math.max(0, p - 1))}\n              disabled={page === 0}\n              className=\"px-2 py-1 rounded bg-surface-tertiary disabled:opacity-40 hover:bg-surface-primary\"\n            >\n              Prev\n            </button>\n            <span>{page + 1} / {totalPages}</span>\n            <button\n              onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}\n              disabled={page >= totalPages - 1}\n              className=\"px-2 py-1 rounded bg-surface-tertiary disabled:opacity-40 hover:bg-surface-primary\"\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * MetricCard \u2014 Single KPI display with trend indicator.\n * Banking standard: formatted value, comparison period, trend arrow.\n *\n * @param label - Metric name (e.g., \"Total AUM\")\n * @param value - Formatted value (e.g., \"$1.2B\")\n * @param trend - Trend percentage (e.g., \"+3.2%\") \u2014 positive = green, negative = red\n * @param trendLabel - Comparison period (e.g., \"vs last quarter\")\n * @param icon - Optional lucide-react icon component\n * @param iconColor - Optional icon color (default: #00C1D5)\n */\nfunction MetricCard({ label, value, trend, trendLabel, icon, iconColor = '#00C1D5' }) {\n  const isPositive = trend && !trend.startsWith('-');\n  const isNegative = trend && trend.startsWith('-');\n  const IconComp = icon;\n\n  return (\n    <div className=\"bg-surface-secondary border border-border-light rounded-xl p-5\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <p className=\"text-text-secondary text-xs font-medium uppercase tracking-wide\">{label}</p>\n        {IconComp && <IconComp className=\"w-4 h-4\" style={{ color: iconColor }} />}\n      </div>\n      <p className=\"text-2xl font-bold text-text-primary tabular-nums\">{value}</p>\n      {trend && (\n        <div className=\"flex items-center gap-1.5 mt-2\">\n          <span className={cn('text-xs font-semibold', isPositive && 'text-status-positive', isNegative && 'text-status-negative')}>\n            {isPositive && '\u25B2'}{isNegative && '\u25BC'} {trend}\n          </span>\n          {trendLabel && <span className=\"text-text-tertiary text-xs\">{trendLabel}</span>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * StatusBadge \u2014 Colored pill for status display.\n * Banking standard: green (active/on-track), amber (watch), red (action needed).\n *\n * @param status - \"positive\" | \"negative\" | \"warning\" | \"neutral\"\n * @param label - Display text\n */\nfunction StatusBadge({ status = 'neutral', label }) {\n  const styles = {\n    positive: 'bg-[rgba(22,163,74,0.12)] text-status-positive',\n    negative: 'bg-[rgba(220,38,38,0.12)] text-status-negative',\n    warning: 'bg-[rgba(217,119,6,0.12)] text-status-warning',\n    neutral: 'bg-surface-tertiary text-text-secondary',\n  };\n\n  return (\n    <span className={cn('inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', styles[status] || styles.neutral)}>\n      {label}\n    </span>\n  );\n}\n\n/**\n * DetailCard \u2014 Entity header with key fields + optional tabbed content.\n * For: client profiles, account detail, loan summary.\n *\n * @param title - Entity name/title\n * @param subtitle - Secondary info (ID, type)\n * @param status - Optional StatusBadge props { status, label }\n * @param fields - Array of { label, value } for the key metrics row\n * @param tabs - Optional array of { id, label, content: ReactNode }\n * @param children - Content below the header (if no tabs)\n */\nfunction DetailCard({ title, subtitle, status, fields = [], tabs, children }) {\n  const [activeTab, setActiveTab] = useState(tabs?.[0]?.id || '');\n\n  return (\n    <div className=\"bg-surface-secondary border border-border-light rounded-xl overflow-hidden\">\n      <div className=\"p-5 border-b border-border-light\">\n        <div className=\"flex items-start justify-between mb-3\">\n          <div>\n            <h2 className=\"text-xl font-bold text-text-primary\">{title}</h2>\n            {subtitle && <p className=\"text-text-secondary text-sm mt-0.5\">{subtitle}</p>}\n          </div>\n          {status && <StatusBadge status={status.status} label={status.label} />}\n        </div>\n        {fields.length > 0 && (\n          <div className=\"flex flex-wrap gap-6 mt-4\">\n            {fields.map((f, i) => (\n              <div key={i}>\n                <p className=\"text-text-tertiary text-xs uppercase tracking-wide\">{f.label}</p>\n                <p className=\"text-text-primary font-semibold text-sm mt-0.5 tabular-nums\">{f.value}</p>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n      {tabs && tabs.length > 0 && (\n        <>\n          <div className=\"flex border-b border-border-light\">\n            {tabs.map(tab => (\n              <button\n                key={tab.id}\n                onClick={() => setActiveTab(tab.id)}\n                className={cn(\n                  'px-4 py-2.5 text-sm font-medium transition-colors',\n                  activeTab === tab.id\n                    ? 'text-[#00C1D5] border-b-2 border-[#00C1D5]'\n                    : 'text-text-secondary hover:text-text-primary'\n                )}\n              >\n                {tab.label}\n              </button>\n            ))}\n          </div>\n          <div className=\"p-5\">\n            {tabs.find(t => t.id === activeTab)?.content}\n          </div>\n        </>\n      )}\n      {!tabs && children && <div className=\"p-5\">{children}</div>}\n    </div>\n  );\n}\n\n/**\n * StepWizard \u2014 Multi-step form with progress indicator.\n * For: loan origination, account opening, KYC onboarding.\n *\n * @param steps - Array of { id, label, content: ReactNode, validate?: () => boolean }\n * @param onComplete - Called when final step is submitted\n */\nfunction StepWizard({ steps = [], onComplete }) {\n  const [current, setCurrent] = useState(0);\n\n  const next = () => {\n    const step = steps[current];\n    if (step.validate && !step.validate()) return;\n    if (current < steps.length - 1) setCurrent(c => c + 1);\n    else if (onComplete) onComplete();\n  };\n\n  const prev = () => setCurrent(c => Math.max(0, c - 1));\n\n  return (\n    <div className=\"bg-surface-secondary border border-border-light rounded-xl overflow-hidden\">\n      <div className=\"flex items-center px-5 py-3 border-b border-border-light gap-2\">\n        {steps.map((step, i) => (\n          <div key={step.id} className=\"flex items-center gap-2\">\n            <div className={cn(\n              'flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold',\n              i < current && 'bg-[#00C1D5] text-white',\n              i === current && 'bg-[#00C1D5] text-white ring-2 ring-[#00C1D5]/30',\n              i > current && 'bg-surface-tertiary text-text-tertiary'\n            )}>\n              {i < current ? '\u2713' : i + 1}\n            </div>\n            <span className={cn('text-sm hidden sm:inline', i === current ? 'text-text-primary font-medium' : 'text-text-tertiary')}>\n              {step.label}\n            </span>\n            {i < steps.length - 1 && <div className=\"w-8 h-px bg-border-light\" />}\n          </div>\n        ))}\n      </div>\n      <div className=\"p-5 min-h-[200px]\">\n        {steps[current]?.content}\n      </div>\n      <div className=\"flex items-center justify-between px-5 py-3 border-t border-border-light\">\n        <button\n          onClick={prev}\n          disabled={current === 0}\n          className=\"px-4 py-1.5 text-sm rounded-lg bg-surface-tertiary text-text-secondary disabled:opacity-40 hover:bg-surface-primary\"\n        >\n          Back\n        </button>\n        <button\n          onClick={next}\n          className=\"px-4 py-1.5 text-sm rounded-lg bg-[#00C1D5] text-white hover:bg-[#00a8b9]\"\n        >\n          {current === steps.length - 1 ? 'Submit' : 'Next'}\n        </button>\n      </div>\n    </div>\n  );\n}\n\n// \u2500\u2500 End built-in components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n";
+/** List of component names — used to add to BUILTIN_GLOBALS in the transpiler */
+export declare const BUILTIN_COMPONENT_NAMES: readonly ["DataTable", "MetricCard", "StatusBadge", "DetailCard", "StepWizard"];
+//# sourceMappingURL=components.d.ts.map

package/dist/ui/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/ui/components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,q5aAwUlC,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,iFAM1B,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Built-in UI module — theme + components auto-injected into the preview iframe.
+ *
+ * The host app (Ranger) configures which UI set to use.
+ * CodeViz handles injection into the iframe HTML + transpiler globals.
+ */
+export { BANKING_THEME_CSS } from './theme';
+export { BUILTIN_COMPONENTS_TSX, BUILTIN_COMPONENT_NAMES } from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC"}

package/dist/ui/theme.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Banking theme CSS — injected as a <style> tag in the preview iframe.
+ *
+ * Provides CSS custom properties + utility classes that auto-switch
+ * with dark/light mode via .theme-dark / .theme-light root classes.
+ *
+ * The agent never sees this CSS — it's injected automatically.
+ * Agent just uses the utility classes: bg-surface-secondary, text-text-primary, etc.
+ *
+ * IMPORTANT: Keep in sync with ranger/client/src/utils/codeviz/templates.ts
+ *            and ranger/api/server/services/Tools/templateDefinitions.js
+ */
+export declare const BANKING_THEME_CSS = "\n/* \u2500\u2500 Banking Theme: CSS Custom Properties \u2500\u2500 */\n.theme-light {\n  --surface-primary: #ffffff;\n  --surface-secondary: #f7f7f8;\n  --surface-tertiary: #ececf1;\n  --text-primary: #212121;\n  --text-secondary: #666666;\n  --text-tertiary: #999999;\n  --border-light: #e5e5e5;\n  --border-medium: #d1d1d1;\n  --accent-cyan: #00C1D5;\n  --accent-navy: #000033;\n  --status-positive: #16a34a;\n  --status-negative: #dc2626;\n  --status-warning: #d97706;\n}\n.theme-dark {\n  --surface-primary: #0d0d0d;\n  --surface-secondary: #212121;\n  --surface-tertiary: #2f2f2f;\n  --text-primary: #ececec;\n  --text-secondary: #a0a0a0;\n  --text-tertiary: #737373;\n  --border-light: #3a3a3b;\n  --border-medium: #4a4a4b;\n  --accent-cyan: #00C1D5;\n  --accent-navy: #000033;\n  --status-positive: #22c55e;\n  --status-negative: #ef4444;\n  --status-warning: #f59e0b;\n}\n\n/* \u2500\u2500 Utility Classes (Tailwind-style) \u2500\u2500 */\n.bg-surface-primary { background-color: var(--surface-primary); }\n.bg-surface-secondary { background-color: var(--surface-secondary); }\n.bg-surface-tertiary { background-color: var(--surface-tertiary); }\n.text-text-primary { color: var(--text-primary); }\n.text-text-secondary { color: var(--text-secondary); }\n.text-text-tertiary { color: var(--text-tertiary); }\n.border-border-light { border-color: var(--border-light); }\n.border-border-medium { border-color: var(--border-medium); }\n.text-accent-cyan { color: var(--accent-cyan); }\n.text-accent-navy { color: var(--accent-navy); }\n.bg-accent-cyan { background-color: var(--accent-cyan); }\n.bg-accent-navy { background-color: var(--accent-navy); }\n.text-status-positive { color: var(--status-positive); }\n.text-status-negative { color: var(--status-negative); }\n.text-status-warning { color: var(--status-warning); }\n.bg-status-positive { background-color: var(--status-positive); }\n.bg-status-negative { background-color: var(--status-negative); }\n.bg-status-warning { background-color: var(--status-warning); }\n";
+//# sourceMappingURL=theme.d.ts.map

package/dist/ui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,o/DAoD7B,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,17 @@
+import { PreviewTemplate } from './types';
+
+/** Returns true if the given template type supports live preview */
+export declare function hasPreviewSupport(template: string): boolean;
+/** Auto-detect preview template from language/file extension */
+export declare function inferTemplate(lang: string): PreviewTemplate;
+/**
+ * Build downloadable content based on file type.
+ * TSX/JSX -> self-contained HTML with import maps (runs standalone in browser).
+ * Everything else -> native format.
+ */
+export declare function buildDownload(code: string, template: PreviewTemplate, lang: string): {
+    filename: string;
+    content: string;
+    mime: string;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,oEAAoE;AACpE,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAE3D;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CA2C3D;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAE,MAAM,GACX;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAuErD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@illuma-ai/codeviz",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Multi-format code & content preview — Monaco editor, live React/HTML/Markdown/SVG/CSV/JSON rendering, streaming API, zoom/pan, download",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,11 +18,13 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite serve demo",
+    "dev": "vite serve --config vite.demo.config.ts",
     "build": "vite build",
     "build:demo": "vite build --config vite.demo.config.ts",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
@@ -31,6 +33,8 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "acorn": "^8.16.0",
+    "acorn-walk": "^8.3.5",
     "monaco-editor": "^0.47.0",
     "sucrase": "^3.35.0"
   },
@@ -43,7 +47,8 @@
     "typescript": "^5.3.0",
     "vite": "^5.4.0",
     "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^3.9.0"
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^4.1.1"
   },
   "repository": {
     "type": "git",