artifactuse 0.1.24 → 0.1.27

package/README.md

@@ -8,6 +8,7 @@ Artifactuse is a lightweight SDK that transforms AI-generated content into rich,
 
 - 🎨 **Rich Content Detection** - Automatically detect and render code blocks, images, videos, maps, embeds, and more
 - 📦 **Artifact Cards** - Beautiful inline cards for code artifacts
+- 👁️ **Inline Code Preview** - Truncated syntax-highlighted code previews with click-to-open panel
 - 🖼️ **Media Lightbox** - Click images and PDFs to view fullscreen with zoom and download
 - 🖥️ **Panel Viewer** - Side panel with preview, code view, and split mode
 - 📝 **Interactive Forms** - Inline and panel forms with 17+ field types, auto-collapse after submission
@@ -421,11 +422,45 @@ Panel artifacts open in a side panel with preview, code view, and editing capabi
 - **HTML/React/Vue** - Live preview with code editing
 - **Mermaid** - Diagrams with live preview
 - **SVG** - SVG graphics with live preview and editing
-- **Diff / Patch** - Code diffs with side-by-side or unified view
+- **Diff / Patch** - Code diffs with side-by-side or unified view (`diff`, `patch`, or `smartdiff` for structured JSON diffs)
 - **Canvas / Whiteboard** - Interactive drawing canvas and whiteboard
 - **Video Editor** - Timeline-based video editing interface
 - **Forms (Panel)** - Complex forms with wizard variant, file uploads, or 4+ fields
 
+#### Inline Code Preview (Optional)
+
+By default, extracted code blocks render as compact artifact cards. With `inlinePreview` enabled, they show a **truncated syntax-highlighted preview** (first N lines) directly in the message. Click the preview to open the full artifact in the panel.
+
+- Configurable per language — unlisted languages still render as cards
+- Requires [Prism.js](https://prismjs.com/) for syntax highlighting (see [Syntax Highlighting](#syntax-highlighting))
+- `smartdiff` artifacts use the actual language for full syntax highlighting with deleted/inserted backgrounds
+- Truncated previews show a fade gradient with "View full code (N lines)" label
+
+```js
+provideArtifactuse({
+  inlinePreview: {
+    maxLines: 15,
+    languages: ['smartdiff', 'html', 'javascript'],
+  },
+});
+```
+
+All config options (`inlinePreview`, `inlineCode`, `tabs`, `viewMode`, `inlineCards`) also work as component props for per-message overrides. Precedence: **component prop → global config → default**.
+
+#### Inline Code (Optional)
+
+Show full syntax-highlighted code directly in the message without extraction or panel:
+
+```js
+provideArtifactuse({
+  inlineCode: {
+    languages: ['css', 'bash', 'sql'], // or true for all
+  },
+});
+```
+
+When a language matches both `inlineCode` and `inlinePreview`, `inlineCode` takes priority (no extraction).
+
 ### Inline Artifacts
 
 Inline artifacts render directly within the message.
@@ -531,6 +566,7 @@ const {
   // Programmatic API
   openFile,           // Open file in panel (auto-detect language from extension)
   openCode,           // Open code in panel (explicit language)
+  updateFile,          // Update existing artifact's code and refresh panel
   clearArtifacts,     // Clear all artifacts
 
   // Panel management
@@ -591,6 +627,30 @@ provideArtifactuse({
     minLength: 50,
   },
 
+  // Inline preview: show truncated code inline instead of artifact cards (optional)
+  // Default: null (disabled — all extracted code shows as cards)
+  inlinePreview: {
+    maxLines: 15,                                        // max lines before truncation
+    languages: ['smartdiff', 'html', 'javascript', 'jsx'], // or true for all extracted languages
+  },
+
+  // Inline code: show full code inline with Prism highlighting, no extraction (optional)
+  // Default: null (disabled). Takes priority over inlinePreview when both match.
+  inlineCode: {
+    languages: ['css', 'bash', 'sql'],                   // or true for all
+  },
+
+  // Show clickable artifact cards inline (default: true)
+  inlineCards: true,
+
+  // Visible panel tabs for all extracted artifacts (optional)
+  // Default: null (all tabs shown). Options: 'preview', 'code', 'split', 'edit'
+  tabs: ['preview', 'code'],
+
+  // Initial panel view mode for all extracted artifacts (optional)
+  // Default: null (first available tab). Options: 'preview', 'code', 'split', 'edit'
+  viewMode: 'preview',
+
   // Code Editor (Optional) — CodeMirror 6 for the edit tab
   // Requires: @codemirror/state, @codemirror/view, @codemirror/commands,
   //           @codemirror/language, @codemirror/autocomplete
@@ -758,6 +818,31 @@ openCode(pythonCode, 'python', { title: 'My Script', tabs: ['code', 'edit'] });
 
 > **Note:** If the language has no registered panel, it falls back to `txt` (plain text) in the code panel.
 
+### updateFile
+
+Updates an existing artifact's code in place and refreshes the panel (no duplicate tabs):
+
+```js
+const { openFile, updateFile } = useArtifactuse();
+
+// First open — returns artifact reference
+const artifact = openFile('app.html', code, { panelUrl: '...' });
+
+// Later — update in place, refreshes iframe
+updateFile(artifact, newCode);
+updateFile(artifact.id, newCode, { panelUrl: newUrl });
+```
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `artifact` | `object\|string` | Yes | Artifact object (from `openFile`) or artifact ID string |
+| `code` | `string` | Yes | New code content |
+| `options.title` | `string` | No | Update display title |
+| `options.tabs` | `string[]` | No | Update visible tabs |
+| `options.panelUrl` | `string` | No | Update custom iframe URL |
+
+> **Note:** `updateFile` triggers the `artifact:updated` event with `{ artifactId, artifact }`.
+
 ### clearArtifacts
 
 Removes all artifacts and closes the panel:

package/dist/core/detector.d.ts

@@ -54,6 +54,11 @@ export function decodeJsonFromAttribute(encoded: any): any;
  * Extract title from code content
  */
 export function extractArtifactTitle(code: any, language: any): any;
+/**
+ * Compute a simple line-by-line diff for inline preview display
+ * Produces +/- prefixed lines that Prism highlights with language-diff
+ */
+export function computeSimpleDiff(oldCode: any, newCode: any): string;
 /**
  * Determine if form should render inline or in panel
  * Parses JSON from code to check complexity

package/dist/core/index.d.ts

@@ -36,7 +36,7 @@ export function createArtifactuse(userConfig?: {}): {
         isFullscreen: boolean;
     };
     subscribe: (callback: any) => () => void;
-    processMessage: (content: any, messageId: any) => {
+    processMessage: (content: any, messageId: any, overrides?: {}) => {
         html: string | Promise<string>;
         artifacts: any[];
     };
@@ -70,6 +70,7 @@ export function createArtifactuse(userConfig?: {}): {
         lineCount: number;
         createdAt: string;
     };
+    updateFile: (artifactOrId: any, code: any, options?: {}) => any;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -159,6 +160,7 @@ export namespace DEFAULT_PANELS {
     let svg: string;
     let diff: string;
     let patch: string;
+    let smartdiff: string;
     let txt: string;
     let javascript: string;
     let js: string;