> ## Documentation Index
> Fetch the complete documentation index at: https://artifactuse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Changelog

> Latest updates and releases

<Update label="v0.4.1" description="Fix duplicate image in agent message">
  ## Bug Fixes

  * **Duplicate image rendered in agent messages** — When a message contained a raw image URL (e.g. `https://example.com/photo.png`), the image processor was rendering the image twice: once from the auto-linked `<a>` tag and a second time from the URL leaking as plain text into the image caption div. The fix strips raw URLs from caption text and adds a re-protection step between the two image-processing passes so the raw-URL regex can never double-process content created in the same pass.
</Update>

<Update label="v0.4.0" description="Binary Workspace File Preview">
  ## New Features

  * **Workspace file preview** — Binary files from a workspace (images, audio, video, PDFs, fonts) can now be displayed in the panel by passing base64 content in an artifact. The panel converts them to blob URLs and renders the appropriate element.
  * **Six preview categories** — `image` (`<img>`), `audio` (`<audio controls>`), `video` (`<video controls>`), `pdf` (embedded viewer), `font` (`@font-face` glyph preview), `binary` (hex dump fallback).
  * **Automatic blob URL management** — The panel creates and revokes `Object URL`s internally. No cleanup needed by the caller.
  * **Extensible** — `BINARY_EXTS`, `BINARY_EXT_LANGUAGE`, `getMimeType`, `base64ToObjectUrl`, and `revokeBlobUrl` are exported as public API so developers can register additional extensions.

  ## New Exports

  ```js theme={null}
  import {
    BINARY_EXTS,
    BINARY_EXT_LANGUAGE,
    getMimeType,
    base64ToObjectUrl,
    revokeBlobUrl,
  } from '@artifactuse/sdk';
  ```

  ## Usage

  ```js theme={null}
  import { BINARY_EXT_LANGUAGE } from '@artifactuse/sdk';

  const ext = 'png';
  sdk.createArtifact(base64Content, BINARY_EXT_LANGUAGE[ext], {
    title: 'logo.png',
    fileExtension: ext,
  });
  ```

  ## Documentation

  * Added [Workspace Files](/docs/artifacts/files) page
</Update>

<Update label="v0.3.0" description="Console Output & Log Filtering">
  ## New Features

  * **Console capture** — HTML artifacts now capture `console.log`, `console.warn`, `console.error`, `console.info`, and uncaught exceptions from user code.
  * **Console footer** — A collapsible console footer appears in the panel when log entries exist. Auto-expands when an error is captured.
  * **Log type filters** — Clickable filter chips in the console header let you show/hide entries by type (error, warn, info, log).
  * **`console:log` event** — Listen for console output from artifacts to send errors back to your AI agent for auto-fixing.

  ## New Config Options

  ```js theme={null}
  provideArtifactuse({
    consolePanel: true, // Show console footer (default: true)
  })
  ```

  ## New Events

  ```js theme={null}
  const { on } = useArtifactuse()

  on('console:log', ({ artifactId, entry }) => {
    // entry: { type: 'log'|'warn'|'error'|'info', content: string, timestamp: number, stack?: string }
    if (entry.type === 'error') {
      // Send error back to AI for auto-fix
    }
  })
  ```

  Set `consolePanel: false` in config or per-artifact options to hide the footer UI while still receiving events.

  ## Documentation

  * Added [Console Output](/docs/artifacts/code#console-output) section to Code artifacts page
</Update>

<Update label="v0.2.2" description="Multi-Tab Artifact Panel">
  ## New Features

  * **Multi-tab mode** — Open multiple artifacts as tabs, like a code editor. Switch between tabs, close individually, and each tab remembers its own view mode. Opt-in via `multiTab: true` in config.

  ## New Config Options

  ```js theme={null}
  provideArtifactuse({
    multiTab: true,
  })
  ```

  ## New Methods

  | Method                       | Description                             |
  | ---------------------------- | --------------------------------------- |
  | `closeTab(artifactId)`       | Close a specific tab                    |
  | `closeOtherTabs(artifactId)` | Close all tabs except the specified one |
  | `closeAllTabs()`             | Close all open tabs                     |

  ## How It Works

  * Clicking an artifact card or using `openFile()` / `openCode()` opens the artifact in a new tab (or focuses it if already open)
  * Each tab preserves its own view mode (preview, code, split, edit)
  * Closing the active tab switches to the adjacent tab
  * The old prev/next navigation is hidden when multi-tab is active
  * When disabled (default), the existing single-artifact behavior is unchanged

  ## Documentation

  * Added [Multi-Tab](/docs/components/panel#multi-tab) section to ArtifactusePanel page
</Update>

<Update label="v0.2.1" description="Configurable Panel Width & Split Position">
  ## New Features

  * **`panelWidth` config & prop** — Set the initial panel width as a percentage (25–75). Configurable globally or per-component. Users can still drag to resize.
  * **`splitPosition` config & prop** — Set the initial split view position as a percentage (20–80). Configurable globally or per-component.

  ## New Config Options

  ```js theme={null}
  provideArtifactuse({
    panelWidth: 50,
    splitPosition: 60,
  })
  ```

  ## New Component Props

  | Prop            | Type     | Default | Description                     |
  | --------------- | -------- | ------- | ------------------------------- |
  | `panelWidth`    | `Number` | `65`    | Initial panel width (25–75%)    |
  | `splitPosition` | `Number` | `50`    | Initial split position (20–80%) |

  ## Documentation

  * Added [Props](/docs/components/panel#props) section to ArtifactusePanel page
  * Updated [Theming](/docs/customization/theming#configuration) with layout config options
</Update>

<Update label="v0.2.0" description="All Panels Now Free & Open Source">
  ## All Panels Are Now Free

  Every panel — including Canvas Editor, Video Editor, and Code Runtime — is now **free and open source** under the MIT license. No more Pro-gated features.

  ### What changed

  * **Canvas Editor** — previously Pro, now free
  * **Video Editor** — previously Pro, now free
  * **Code Runtime** (JavaScript & Python) — previously Pro, now free
  * All panels can be self-hosted without restrictions

  ### New pricing model

  |                      | Free | Pro |
  | -------------------- | ---- | --- |
  | All panels           | Yes  | Yes |
  | Save, share, publish | Yes  | Yes |
  | Shared CDN           | Yes  | Yes |
  | Custom domain        | —    | Yes |
  | Dedicated CDN        | —    | Yes |
  | No badge             | —    | Yes |
  | Priority support     | —    | Yes |

  ### Why

  We believe the interaction layer for AI should be open and accessible to everyone. The value we provide is in managed infrastructure — CDN hosting, cloud services, and custom domains — not in gating panel features.
</Update>

<Update label="v0.1.31" description="CSV/TSV Spreadsheet Panel">
  ## New Features

  * **CSV/TSV Spreadsheet Panel** - New `sheet-panel` renders CSV and TSV data in an interactive spreadsheet powered by jspreadsheet-ce. Auto-detects delimiters (comma, tab, pipe, semicolon). Cells are editable with auto-save back to the artifact.

  ## Supported Languages

  | Language | Code Block | Panel         |
  | -------- | ---------- | ------------- |
  | CSV      | ` ```csv ` | `sheet-panel` |
  | TSV      | ` ```tsv ` | `sheet-panel` |

  ## Documentation

  * Added [CSV / TSV](/docs/artifacts/code#csv--tsv) section to Code artifacts page
  * Updated panel README with sheet-panel docs
</Update>

<Update label="v0.1.30" description="Exclude Languages">
  ## New Features

  * **`excludeLanguages`** - Exclude specific languages from inline preview when using `languages: true`. Excluded languages fall back to artifact cards.

  ## New Config Options

  ```js theme={null}
  provideArtifactuse({
    inlinePreview: {
      languages: true,
      excludeLanguages: ['typescript', 'go'],
    },
  })
  ```

  ## Documentation

  * Added [Exclude Languages](/docs/components/agent-message#exclude-languages) section
</Update>

<Update label="v0.1.27" description="Inline Code Preview, Smart Diff & Component Config">
  ## New Features

  * **Inline Code Preview** - Code artifacts now show a truncated syntax-highlighted preview directly in the message instead of a plain card. Click to open in panel. Configurable per language.
  * **Smart Diff (`smartdiff`)** - New language identifier for structured JSON diffs (`{oldCode, newCode, language}`). Uses the actual language grammar for syntax highlighting with red/green line backgrounds for deletions/insertions.
  * **Standard `diff` preserved** - ` ```diff ` blocks now render normally with Prism's built-in diff grammar, separate from the structured JSON format.
  * **Inline Code (`inlineCode`)** - Show full syntax-highlighted code directly in the message without extraction or panel. Code stays as normal `<pre><code>` blocks.
  * **Component-Level Config** - All config options (`inlinePreview`, `inlineCode`, `tabs`, `viewMode`, `inlineCards`) now work as both global config and per-message component props with clean precedence: component prop → global config → default.
  * **Global `tabs` & `viewMode`** - Control visible panel tabs and initial view mode globally or per-message.
  * **`minClickableLines`** - Disable clicking on short inline previews where the panel adds no value. Supports `ignoreLanguages` to exempt previewable languages (HTML, markdown).
  * **`actionLabel`** - Customize the fade overlay label per language (e.g., "Open preview" for HTML, "Open document" for markdown).

  ## New Config Options

  ```js theme={null}
  provideArtifactuse({
    inlinePreview: {
      maxLines: 15,
      languages: ['smartdiff', 'html', 'javascript'],
      minClickableLines: { lines: 10, ignoreLanguages: ['html', 'markdown'] },
      actionLabel: { html: 'Open preview', default: 'View full code' },
    },
    inlineCode: {
      languages: ['css', 'bash', 'sql'],
    },
    inlineCards: true,
    tabs: ['preview', 'code'],
    viewMode: 'preview',
  })
  ```

  ## New Component Props

  | Prop            | Type       | Default | Description                                      |
  | --------------- | ---------- | ------- | ------------------------------------------------ |
  | `inlinePreview` | `object`   | `null`  | Override global `inlinePreview` for this message |
  | `inlineCode`    | `object`   | `null`  | Override global `inlineCode` for this message    |
  | `tabs`          | `string[]` | `null`  | Override visible panel tabs for this message     |
  | `viewMode`      | `string`   | `null`  | Override initial view mode for this message      |

  ## Documentation

  * Added [Smart Diff](/docs/artifacts/code#smart-diff) section to Code artifacts page
  * Added [Inline Code](/docs/components/agent-message#inline-code), [Tabs & View Mode](/docs/components/agent-message#tabs--view-mode), and [Config Precedence](/docs/components/agent-message#config-precedence) sections
  * Updated [Inline Code Preview](/docs/components/agent-message#inline-code-preview) with per-message override examples
  * Updated panel mappings to include `smartdiff`
  * Added [Non-Clickable Short Code](/docs/components/agent-message#non-clickable-short-code) and [Custom Action Labels](/docs/components/agent-message#custom-action-labels) sections
</Update>

<Update label="v0.1.25" description="Update Artifacts In Place">
  ## New Features

  * **`updateFile()`** — Update an existing artifact's code and refresh the panel in place, without creating duplicate tabs. Accepts the artifact object (returned by `openFile`) or an artifact ID string.

  ## New Methods

  | Method                                 | Description                                       |
  | -------------------------------------- | ------------------------------------------------- |
  | `updateFile(artifact, code, options?)` | Update existing artifact's code and refresh panel |

  ```js theme={null}
  // Open a file — keep reference
  const artifact = openFile('app.html', code, { panelUrl: '...' });

  // Later — update in place (same tab, iframe reloads)
  updateFile(artifact, newCode);
  updateFile(artifact.id, newCode, { panelUrl: newUrl });
  ```

  ## New Events

  | Event              | Payload                    | Description                       |
  | ------------------ | -------------------------- | --------------------------------- |
  | `artifact:updated` | `{ artifactId, artifact }` | Artifact updated via `updateFile` |

  ## Documentation

  * Added [`updateFile`](/docs/artifacts/code#updatefile) section to Code artifacts page
  * Updated all framework guides with `updateFile` in API listings
  * Updated [Panel component](/docs/components/panel) with `updateFile` example
</Update>

<Update label="v0.1.22" description="Programmatic API & Edit Tab">
  ## New Features

  * **`openFile()` / `openCode()`** - Open artifacts programmatically without processing AI messages. `openFile` auto-detects language from the file extension, `openCode` accepts an explicit language
  * **Tab Filtering** - Control which view mode tabs are visible with the `tabs` option: `['preview', 'code', 'split', 'edit']`
  * **Edit Tab** - In-panel code editor powered by CodeMirror 6 with syntax highlighting for 18+ languages. Users provide CodeMirror modules via the `editor` config option
  * **`clearArtifacts()`** - Remove all artifacts and close the panel
  * **`panelUrl` Option** - Pass a custom iframe URL to `openFile`/`openCode` to bypass the panel registry for one-off custom viewers
  * **Plain Text Fallback** - Unknown file extensions automatically fall back to `txt` type, rendered in the code panel as plain text

  ## New Methods

  | Method                               | Description                                              |
  | ------------------------------------ | -------------------------------------------------------- |
  | `openFile(filename, code, options?)` | Open file in panel (auto-detect language from extension) |
  | `openCode(code, language, options?)` | Open code in panel (explicit language)                   |
  | `clearArtifacts()`                   | Clear all artifacts and close panel                      |

  ## New Events

  | Event       | Payload                          | Description              |
  | ----------- | -------------------------------- | ------------------------ |
  | `edit:save` | `{ artifactId, artifact, code }` | Code saved from edit tab |

  ## New Config Options

  ```javascript theme={null}
  provideArtifactuse({
    // CodeMirror 6 integration for the edit tab (optional)
    editor: {
      modules: {
        state: cmState,             // @codemirror/state
        view: cmView,               // @codemirror/view
        commands: cmCommands,        // @codemirror/commands
        language: cmLanguage,        // @codemirror/language
        autocomplete: cmAutocomplete,// @codemirror/autocomplete
        langJavascript: cmLangJavascript, // @codemirror/lang-javascript (optional)
        langPython: cmLangPython,    // @codemirror/lang-python (optional)
        lezerHighlight: lezerHighlight,   // @lezer/highlight (optional)
      },
      theme: 'dark', // 'dark' | 'light' | 'auto'
    },
  })
  ```

  ## Documentation

  * Added [Programmatic API](/docs/artifacts/code#programmatic-api) section to Code artifacts page
  * Added [Edit Tab](/docs/artifacts/code#edit-tab) setup guide with CodeMirror configuration
  * Updated all framework guides with `openFile`, `openCode`, `clearArtifacts`, and `edit:save`
  * Updated [Panel component](/docs/components/panel#view-modes) with edit view mode and tab filtering
  * Added `txt` to default panels list
</Update>

<Update label="v0.1.17" description="Cloudflare Workers Deployment">
  ## New Features

  * **Cloudflare Workers Deployment** - Deploy panels to Cloudflare's edge network with a single command
  * **Simplified Self-Hosting** - New `npm run deploy:cf` command for instant global deployment
  * **Automatic CORS** - Cloudflare Worker handles CORS headers automatically

  ## New Deployment Commands

  ```bash theme={null}
  npm run deploy:cf              # Deploy to production
  npm run deploy:cf:staging      # Deploy to staging
  npm run cf:dev                 # Local development server
  ```

  ## Quick Start

  ```bash theme={null}
  # Clone panels repo
  git clone https://github.com/artifactuse/panels.git
  cd panels

  # Install and deploy
  npm install
  wrangler login
  npm run deploy:cf
  ```

  ## Documentation

  * Updated [CDN page](/docs/cdn) with Cloudflare Workers as recommended option
  * Added deployment comparison table (Artifactuse CDN vs Cloudflare vs AWS)
  * Added custom domain configuration guide
</Update>

<Update label="v0.1.15" description="Configurable Panels">
  ## New Features

  * **Configurable Panels** - Add, override, or disable panels via configuration without modifying SDK source code
  * **Runtime Panel Registration** - Register and unregister panels at runtime with `registerPanel()` and `unregisterPanel()`
  * **Array Type Support** - Register multiple types/aliases at once: `registerPanel(['python', 'py'], 'code-panel')`
  * **Mixed CDN Support** - Use different CDNs for different panel types

  ## New Config Options

  ```javascript theme={null}
  provideArtifactuse({
    // Panel configuration
    panels: {
      'chart': 'chart-panel',                    // Add new panel (uses cdnUrl)
      'video': 'https://my-cdn.com/video-panel', // Full URL override
      'diagram': { path: 'panel', cdn: '...' },  // Explicit CDN
      'canvas': null,                             // Disable panel
    }
  })
  ```

  ## New Methods

  | Method                        | Description                                  |
  | ----------------------------- | -------------------------------------------- |
  | `hasPanel(artifact)`          | Check if panel exists for artifact           |
  | `registerPanel(types, panel)` | Register panel (accepts string or string\[]) |
  | `unregisterPanel(types)`      | Disable panel (accepts string or string\[])  |
  | `getPanelTypes()`             | Get list of registered panel types           |

  ## New Computed/Stores

  | Property         | Description                             |
  | ---------------- | --------------------------------------- |
  | `panelTypes`     | Reactive list of registered panel types |
  | `activePanelUrl` | URL for active artifact's panel         |

  ## React Hook

  New `usePanelRegistry()` hook for panel management:

  ```javascript theme={null}
  const { register, unregister, isRegistered, types } = usePanelRegistry();
  ```

  ## Documentation

  * Added [Panels configuration guide](/docs/panels#registering-custom-panels)
  * Updated [CDN page](/docs/cdn) with panel configuration options
  * Updated README with Panels section
</Update>

<Update label="v0.1.1" description="Media Lightbox & Modular CSS">
  ## New Features

  * **Media Lightbox** - Images and PDFs now open in a fullscreen viewer with zoom, download, and keyboard controls
  * **Typing Indicator** - New `typing` prop on ArtifactuseAgentMessage for streaming responses
  * **Modular CSS** - Styles split into 19 files for tree-shaking and easier maintenance

  ## Breaking Changes

  * **Form buttons structure** - Buttons now use `data.fields` array with `type: "button"` instead of `data.buttons`

  ```json theme={null}
  // Before (no longer supported)
  {
    "variant": "buttons",
    "data": {
      "buttons": [
        {"id": "yes", "label": "Yes", "style": "primary"}
      ]
    }
  }

  // After
  {
    "variant": "buttons",
    "data": {
      "fields": [
        {"type": "button", "id": "yes", "label": "Yes", "style": "primary"}
      ]
    }
  }
  ```

  ## New Events

  * `media-open` - Fired when image/PDF opens in lightbox viewer

  ## Documentation

  * Added dedicated component pages for ArtifactuseAgentMessage, ArtifactusePanel, ArtifactusePanelToggle
  * Added modular CSS imports guide to Theming page
  * Added Custom Panels page with framework-agnostic development guide
  * Added PANEL\_URL\_MAP extension documentation for custom panel registration
</Update>

<Update label="v0.1.0" description="Initial Release">
  ## Features

  * **Canvas Artifacts** - Create graphics, banners, logos, diagrams
  * **Video Artifacts** - Timeline-based video editing with effects and transitions
  * **Code Artifacts** - HTML, React, Vue, JavaScript, Python with live preview
  * **Form Artifacts** - Interactive forms, wizards, button groups
  * **Social Artifacts** - Twitter, LinkedIn, Instagram, Facebook previews

  ## Framework Support

  * React 18+
  * Vue 3 (and Vue 2 with @vue/composition-api)
  * Svelte 4+
  * Vanilla JavaScript

  ## Packages

  * `artifactuse` - Core SDK
  * `@artifactuse/prompts` - AI system prompts
  * `@artifactuse/panels` - CDN panel renderers
</Update>