artifactuse 0.1.21 → 0.1.22

package/README.md

@@ -525,9 +525,14 @@ const {
   closePanel,         // Close panel
   togglePanel,        // Toggle panel visibility
   toggleFullscreen,   // Toggle fullscreen mode
-  setViewMode,        // Set 'preview' | 'code' | 'split'
+  setViewMode,        // Set 'preview' | 'code' | 'split' | 'edit'
   getPanelUrl,        // Get panel URL for artifact
-  
+
+  // Programmatic API
+  openFile,           // Open file in panel (auto-detect language from extension)
+  openCode,           // Open code in panel (explicit language)
+  clearArtifacts,     // Clear all artifacts
+
   // Panel management
   hasPanel,           // Check if panel exists for artifact
   registerPanel,      // Register panel (string or string[])
@@ -585,6 +590,24 @@ provideArtifactuse({
     minLines: 3,
     minLength: 50,
   },
+
+  // Code Editor (Optional) — CodeMirror 6 for the edit tab
+  // Requires: @codemirror/state, @codemirror/view, @codemirror/commands,
+  //           @codemirror/language, @codemirror/autocomplete
+  // Optional: @codemirror/lang-javascript, @codemirror/lang-python, @lezer/highlight
+  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
+      langPython: cmLangPython,             // @codemirror/lang-python
+      lezerHighlight: lezerHighlight,       // @lezer/highlight (for syntax colors)
+    },
+    theme: 'dark', // 'dark' | 'light' | 'auto'
+  },
 });
 ```
 
@@ -658,6 +681,71 @@ on('social:copy', ({ platform, text }) => {
 on('media:open', ({ type, src, alt, caption }) => {
   console.log('Media opened:', type, src);
 });
+
+// Code editor saved (edit tab)
+on('edit:save', ({ artifactId, artifact, code }) => {
+  console.log('Code saved:', code);
+});
+```
+
+## Programmatic API
+
+Open artifacts directly without processing AI message content:
+
+### openFile
+
+Opens a file in the panel, auto-detecting the language from the file extension:
+
+```js
+const { openFile } = useArtifactuse();
+
+// Basic usage
+openFile('app.jsx', code);
+
+// With options
+openFile('utils.py', code, {
+  title: 'My Utils',           // Custom display title (defaults to filename)
+  tabs: ['code', 'edit'],       // Control which tabs are visible
+  viewMode: 'code',             // Initial view mode
+});
+```
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `filename` | `string` | Yes | Filename with extension (e.g. `'app.jsx'`, `'style.css'`) |
+| `code` | `string` | Yes | The file content |
+| `options.title` | `string` | No | Custom title (defaults to filename) |
+| `options.tabs` | `string[]` | No | Visible tabs: `'preview'`, `'code'`, `'split'`, `'edit'` |
+| `options.viewMode` | `string` | No | Initial view mode |
+| `options.language` | `string` | No | Override auto-detected language |
+
+### openCode
+
+Opens code in the panel with an explicit language:
+
+```js
+const { openCode } = useArtifactuse();
+
+openCode('console.log("hello")', 'javascript');
+openCode(pythonCode, 'python', { title: 'My Script', tabs: ['code', 'edit'] });
+```
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `code` | `string` | Yes | The code content |
+| `language` | `string` | Yes | Language identifier (e.g. `'javascript'`, `'python'`, `'html'`) |
+| `options` | `object` | No | Same options as `openFile` |
+
+> **Note:** If the language has no registered panel, it falls back to `txt` (plain text) in the code panel.
+
+### clearArtifacts
+
+Removes all artifacts and closes the panel:
+
+```js
+const { clearArtifacts } = useArtifactuse();
+
+clearArtifacts();
 ```
 
 ## Framework Support

package/dist/core/detector.d.ts

@@ -22,6 +22,10 @@ export function getLanguageDisplayName(language: any): any;
  * Get file extension for language/type
  */
 export function getFileExtension(language: any): any;
+/**
+ * Get language from file extension (reverse of getFileExtension)
+ */
+export function getLanguageFromExtension(ext: any): any;
 /**
  * Get language/type icon SVG path
  */
@@ -59,6 +63,29 @@ export function shouldFormBeInline(code: any): boolean;
  * Determine if artifact should be inline based on language
  */
 export function getIsInline(language: any, code: any): boolean;
+/**
+ * Create artifact from code block
+ * Unified method for all artifact types (code, form, social)
+ *
+ * @param {string} code - Code/JSON content
+ * @param {string} language - Language identifier (js, html, form, social, etc.)
+ * @param {string} messageId - Message ID
+ * @param {number} blockIndex - Block index
+ */
+export function createArtifact(code: string, language: string, messageId: string, blockIndex: number): {
+    id: string;
+    messageId: string;
+    type: string;
+    language: string;
+    title: any;
+    code: string;
+    isInline: boolean;
+    isPreviewable: boolean;
+    isPanelArtifact: boolean;
+    size: number;
+    lineCount: number;
+    createdAt: string;
+};
 /**
  * Parse artifacts from rendered HTML (simple detection, no replacement)
  */

package/dist/core/editor.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Create an editor manager that uses user-provided CodeMirror modules
+ *
+ * @param {object} editorConfig - config.editor from SDK config
+ * @param {object} editorConfig.modules - CodeMirror module imports
+ * @param {string} editorConfig.theme - 'dark' | 'light' | 'auto'
+ * @returns {object} Editor manager with create/destroy methods
+ */
+export function createEditorManager(editorConfig?: {
+    modules: object;
+    theme: string;
+}): object;
+export default createEditorManager;

package/dist/core/index.d.ts

@@ -42,6 +42,34 @@ export function createArtifactuse(userConfig?: {}): {
     };
     initializeContent: (container?: Document) => Promise<void>;
     openArtifact: (artifact: any) => void;
+    openFile: (filename: any, code: any, options?: {}) => {
+        id: string;
+        messageId: string;
+        type: string;
+        language: string;
+        title: any;
+        code: string;
+        isInline: boolean;
+        isPreviewable: boolean;
+        isPanelArtifact: boolean;
+        size: number;
+        lineCount: number;
+        createdAt: string;
+    };
+    openCode: (code: any, language: any, options?: {}) => {
+        id: string;
+        messageId: string;
+        type: string;
+        language: string;
+        title: any;
+        code: string;
+        isInline: boolean;
+        isPreviewable: boolean;
+        isPanelArtifact: boolean;
+        size: number;
+        lineCount: number;
+        createdAt: string;
+    };
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -73,6 +101,7 @@ export function createArtifactuse(userConfig?: {}): {
     on: (event: any, callback: any) => () => void;
     off: (event: any, callback: any) => void;
     emit: (event: any, data: any) => void;
+    editor: any;
     bridge: {
         setIframe: (iframe: any) => void;
         send: (action: string, data: any, requestId?: string, targetOrigin?: string) => string;
@@ -116,6 +145,7 @@ export * from "./highlight.js";
 export { createState } from "./state.js";
 export { createBridge } from "./bridge.js";
 export { createTheme } from "./theme.js";
+export { createEditorManager } from "./editor.js";
 export default createArtifactuse;
 export namespace DEFAULT_PANELS {
     let form: string;
@@ -129,6 +159,7 @@ export namespace DEFAULT_PANELS {
     let svg: string;
     let diff: string;
     let patch: string;
+    let txt: string;
     let javascript: string;
     let js: string;
     let python: string;