@illuma-ai/codeviz 1.0.0

package/dist/CodeViz.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { CodeVizProps, CodeVizHandle } from './types';
+
+/**
+ * CodeViz — A lightweight single-file React/HTML preview component.
+ *
+ * Drop-in Sandpack replacement for Ranger artifacts. Features:
+ * - Monaco editor with syntax highlighting and VS Code-style diff decorations
+ * - Sucrase in-browser JSX/TSX transpilation (no remote bundler)
+ * - Import maps + esm.sh CDN for dependency resolution
+ * - Streaming API for live LLM token-by-token updates
+ * - Structured error reporting with line numbers
+ * - Code/Preview tab switching; side-by-side Split at wide screens or fullscreen
+ * - Window controls: fullscreen (Fullscreen API) + close (event to parent)
+ */
+export declare const CodeViz: React.MemoExoticComponent<React.ForwardRefExoticComponent<CodeVizProps & React.RefAttributes<CodeVizHandle>>>;
+//# sourceMappingURL=CodeViz.d.ts.map

package/dist/CodeViz.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeViz.d.ts","sourceRoot":"","sources":["../src/CodeViz.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAgB,MAAM,SAAS,CAAC;AAqBzE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,+GA+VnB,CAAC"}

package/dist/EditorPane.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { editor } from 'monaco-editor';
+
+export interface EditorPaneProps {
+    code: string;
+    language: string;
+    onChange?: (value: string) => void;
+    theme?: 'light' | 'dark';
+    readOnly?: boolean;
+    options?: editor.IStandaloneEditorConstructionOptions;
+    editorRef?: React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
+    /** Base code for diff decorations — lines that differ get gutter markers */
+    baseCode?: string | null;
+}
+/**
+ * Monaco editor with VS Code-style inline diff decorations.
+ *
+ * When `baseCode` is provided, computes a line-level diff and shows:
+ * - Green gutter bar: new/added lines
+ * - Blue gutter bar: modified lines
+ *
+ * Uses Monaco's `deltaDecorations` API (not DiffEditor) for inline markers.
+ */
+export declare const EditorPane: React.NamedExoticComponent<EditorPaneProps>;
+//# sourceMappingURL=EditorPane.d.ts.map

package/dist/EditorPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorPane.d.ts","sourceRoot":"","sources":["../src/EditorPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,oCAAoC,CAAC;IACtD,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC;IACxE,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,6CAwHrB,CAAC"}

package/dist/Loader.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+/**
+ * CodeSandbox-style loading animation with three bouncing cubes.
+ * Pure CSS animation — no external dependencies.
+ */
+export declare const Loader: React.NamedExoticComponent<{
+    size?: "sm" | "md" | "lg";
+    label?: string;
+}>;
+//# sourceMappingURL=Loader.d.ts.map

package/dist/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../src/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,MAAM;WAIV,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;EAwBd,CAAC"}

package/dist/PreviewPane.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { ImportMap, PreviewTemplate, PreviewError } from './types';
+
+export interface PreviewPaneProps {
+    code: string;
+    template: PreviewTemplate;
+    importMap?: ImportMap;
+    dependencies?: Record<string, string>;
+    cdnBase?: string;
+    tailwindCdn?: string | false;
+    externalResources?: string[];
+    files?: Record<string, string>;
+    onError?: (error: PreviewError) => void;
+    onLoad?: () => void;
+    theme?: 'light' | 'dark';
+    showLoader?: boolean;
+    loader?: React.ReactNode;
+}
+/**
+ * Iframe-based preview pane that transpiles code with Sucrase and
+ * renders it using import maps + esm.sh CDN.
+ *
+ * Returns structured PreviewError objects with line numbers and
+ * source context for agent consumption.
+ */
+export declare const PreviewPane: React.NamedExoticComponent<PreviewPaneProps>;
+//# sourceMappingURL=PreviewPane.d.ts.map

package/dist/PreviewPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewPane.d.ts","sourceRoot":"","sources":["../src/PreviewPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAiB,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAmBD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,8CA2ItB,CAAC"}

package/dist/StatusBar.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { PreviewError } from './types';
+
+interface StatusBarProps {
+    errors: PreviewError[];
+    isLoading: boolean;
+    isStreaming: boolean;
+    language: string;
+    theme: 'light' | 'dark';
+}
+/**
+ * VS Code-style status bar showing build state, errors, and language.
+ */
+export declare const StatusBar: React.NamedExoticComponent<StatusBarProps>;
+export {};
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../src/StatusBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,UAAU,cAAc;IACtB,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,4CAuDpB,CAAC"}

package/dist/Toolbar.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+
+export type ViewMode = 'split' | 'code' | 'preview';
+interface ToolbarProps {
+    view: ViewMode;
+    onViewChange: (view: ViewMode) => void;
+    onRefresh: () => void;
+    errorCount: number;
+    isLoading: boolean;
+    theme: 'light' | 'dark';
+    /** Whether the component is in fullscreen mode */
+    isFullscreen?: boolean;
+    /** Toggle fullscreen on the container */
+    onFullscreenToggle?: () => void;
+    /** Download the current content */
+    onDownload?: () => void;
+    /** Close button — emits event for parent (Ranger) to handle */
+    onClose?: () => void;
+}
+/**
+ * Modern toolbar with view switcher, window controls (fullscreen, close).
+ *
+ * Split view only available at wide screen (>=768px) or in fullscreen.
+ * Right side has refresh, fullscreen toggle, and close — like window operations.
+ */
+export declare const Toolbar: React.NamedExoticComponent<ToolbarProps>;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEpD,UAAU,YAAY;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAKD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,0CAgPlB,CAAC"}

package/dist/agentContext.d.ts

@@ -0,0 +1,71 @@
+/**
+ * File types that CodeViz can render.
+ * Use this to tell the agent what it CAN produce as artifacts.
+ */
+export declare const RENDERABLE_TYPES: {
+    readonly 'application/vnd.react': {
+        readonly description: "React TSX component (single file, default export)";
+        readonly extension: ".tsx";
+        readonly template: "react-ts";
+        readonly example: "export default function App() { return <h1>Hello</h1>; }";
+    };
+    readonly 'text/html': {
+        readonly description: "Static HTML (rendered directly, Tailwind CSS available)";
+        readonly extension: ".html";
+        readonly template: "html";
+        readonly example: "<div class=\"p-4\"><h1 class=\"text-2xl font-bold\">Hello</h1></div>";
+    };
+    readonly 'text/markdown': {
+        readonly description: "Markdown with Mermaid diagram support (GFM, rendered with github-markdown-css)";
+        readonly extension: ".md";
+        readonly template: "markdown";
+        readonly example: "# Hello\n\nSome text\n\n```mermaid\ngraph TD\n  A-->B\n```";
+    };
+    readonly 'application/vnd.mermaid': {
+        readonly description: "Standalone Mermaid diagram with zoom/pan viewer (flowchart, sequence, gantt, etc.)";
+        readonly extension: ".mermaid";
+        readonly template: "mermaid";
+        readonly example: "graph TD\n  A[Start] --> B{Decision}\n  B -->|Yes| C[OK]\n  B -->|No| D[End]";
+    };
+    readonly 'image/svg+xml': {
+        readonly description: "SVG image with zoom/pan viewer";
+        readonly extension: ".svg";
+        readonly template: "svg";
+        readonly example: "<svg viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"#818cf8\"/></svg>";
+    };
+    readonly 'text/csv': {
+        readonly description: "CSV data rendered as a styled, sortable table";
+        readonly extension: ".csv";
+        readonly template: "csv";
+        readonly example: "Name,Age,City\nAlice,30,NYC\nBob,25,LA";
+    };
+    readonly 'application/json': {
+        readonly description: "JSON data with collapsible tree view and syntax highlighting";
+        readonly extension: ".json";
+        readonly template: "json";
+        readonly example: "{\"users\": [{\"name\": \"Alice\", \"role\": \"admin\"}]}";
+    };
+};
+export type RenderableType = keyof typeof RENDERABLE_TYPES;
+/**
+ * Get the list of renderable artifact types for agent context.
+ */
+export declare function getRenderableTypes(): typeof RENDERABLE_TYPES;
+/**
+ * Returns a complete system prompt section for the LLM agent.
+ *
+ * Include this in the agent's system prompt so it knows:
+ * 1. What artifact types it can render
+ * 2. What packages are available (no install needed)
+ * 3. What templates to start from
+ * 4. Rules for producing valid artifacts
+ *
+ * This saves tokens because the agent doesn't need to guess.
+ */
+export declare function getAgentSystemPrompt(): string;
+/**
+ * Pick the best template for a user query.
+ * Convenience re-export for Ranger integration.
+ */
+export { pickTemplate } from './templates';
+//# sourceMappingURL=agentContext.d.ts.map

package/dist/agentContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentContext.d.ts","sourceRoot":"","sources":["../src/agentContext.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE3D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,gBAAgB,CAE5D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAmC7C;AAED;;;GAGG;AACH,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC"}

package/dist/importMap.d.ts

@@ -0,0 +1,27 @@
+import { ImportMap } from './types';
+
+/**
+ * Builds a batteries-included import map for the preview iframe.
+ *
+ * The goal: the agent writes `import { format } from 'date-fns'` instead
+ * of generating a custom date formatter — saving tokens and reducing errors.
+ *
+ * Uses esm.sh CDN with `?external=react,react-dom` so that all packages
+ * emit bare `import 'react'` specifiers, resolved by the browser to a
+ * SINGLE React instance via the import map scopes.
+ */
+export declare function buildImportMap(options?: {
+    cdnBase?: string;
+    dependencies?: Record<string, string>;
+    overrides?: ImportMap;
+}): ImportMap;
+/**
+ * Serialize an import map to a <script type="importmap"> tag string
+ */
+export declare function importMapToScript(map: ImportMap): string;
+/**
+ * Returns a human-readable list of all available packages for agent prompts.
+ * Agents can include this in their system prompt so the LLM knows what's available.
+ */
+export declare function getAvailablePackages(): string;
+//# sourceMappingURL=importMap.d.ts.map

package/dist/importMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"importMap.d.ts","sourceRoot":"","sources":["../src/importMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,OAAO,GAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CAClB,GACL,SAAS,CAmNX;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,GAAG,MAAM,CAExD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CA+B7C"}