artifactuse 0.1.21 → 0.1.23

package/dist/vue2/index.js

@@ -47,6 +47,13 @@ const PANEL_LANGUAGES = [
   'form',
 ];
 
+/**
+ * Generate unique artifact ID
+ */
+function generateArtifactId(prefix = 'artifact') {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
 /**
  * Check if language/type supports preview
  */
@@ -120,6 +127,7 @@ function getLanguageDisplayName(language) {
     // Structured artifacts
     form: 'Form',
     social: 'Social Preview',
+    txt: 'Plain Text',
   };
   return names[language?.toLowerCase()] || language?.toUpperCase() || 'Code';
 }
@@ -171,6 +179,41 @@ function getFileExtension$1(language) {
   return extensions[language?.toLowerCase()] || 'txt';
 }
 
+/**
+ * Get language from file extension (reverse of getFileExtension)
+ */
+function getLanguageFromExtension(ext) {
+  const map = {
+    html: 'html', htm: 'html',
+    css: 'css',
+    js: 'javascript', mjs: 'javascript',
+    ts: 'typescript',
+    jsx: 'jsx', tsx: 'tsx',
+    vue: 'vue',
+    py: 'python',
+    java: 'java',
+    cs: 'csharp',
+    cpp: 'cpp', c: 'c', h: 'c',
+    go: 'go',
+    rs: 'rust',
+    rb: 'ruby',
+    php: 'php',
+    swift: 'swift',
+    kt: 'kotlin',
+    scala: 'scala',
+    sql: 'sql',
+    sh: 'bash',
+    json: 'json',
+    xml: 'xml',
+    yaml: 'yaml', yml: 'yaml',
+    md: 'markdown',
+    svg: 'svg',
+    diff: 'diff',
+    patch: 'patch',
+  };
+  return map[ext?.toLowerCase()] || null;
+}
+
 /**
  * Get language/type icon SVG path
  */
@@ -625,14 +668,18 @@ function createState() {
    */
   function setActiveArtifact(artifactId) {
     const artifact = getArtifact(artifactId);
-    
+
+    let viewMode = artifact?.isPreviewable === false ? 'code' : 'preview';
+    if (artifact?.tabs && !artifact.tabs.includes(viewMode)) {
+      viewMode = artifact.tabs[0];
+    }
+
     state = {
       ...state,
       activeArtifactId: artifactId,
-      // Set view mode based on artifact type
-      viewMode: artifact?.isPreviewable === false ? 'code' : 'preview',
+      viewMode,
     };
-    
+
     notify();
   }
   
@@ -665,7 +712,7 @@ function createState() {
    * Set view mode
    */
   function setViewMode(mode) {
-    if (!['preview', 'code', 'split'].includes(mode)) {
+    if (!['preview', 'code', 'split', 'edit'].includes(mode)) {
       console.warn(`Invalid view mode: ${mode}`);
       return;
     }
@@ -1764,6 +1811,389 @@ function createShareService(config = {}) {
   };
 }
 
+// artifactuse/core/editor.js
+// Optional CodeMirror 6 integration for the edit tab
+// Users must provide CodeMirror modules via config.editor.modules
+
+/**
+ * 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
+ */
+function createEditorManager(editorConfig = {}) {
+	const modules = editorConfig.modules || null;
+	let themePreference = editorConfig.theme || 'dark';
+
+	function isAvailable() {
+		return !!(modules?.state && modules?.view);
+	}
+
+	/**
+	 * Build dark theme using EditorView.theme
+	 */
+	function buildDarkTheme(EditorView) {
+		return EditorView.theme({
+			'&': {
+				backgroundColor: '#1e1e1e',
+				color: '#e4e4e7',
+				height: '100%',
+			},
+			'.cm-content': {
+				caretColor: 'var(--accent, #60a5fa)',
+				fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+				fontSize: '13px',
+				lineHeight: '1.6',
+				padding: '12px 0',
+			},
+			'.cm-cursor, .cm-dropCursor': {
+				borderLeftColor: 'var(--accent, #60a5fa)',
+				borderLeftWidth: '2px',
+			},
+			'.cm-selectionBackground, ::selection': {
+				backgroundColor: 'rgba(99, 102, 241, 0.3) !important',
+			},
+			'.cm-focused .cm-selectionBackground': {
+				backgroundColor: 'rgba(99, 102, 241, 0.3)',
+			},
+			'.cm-activeLine': {
+				backgroundColor: 'rgba(255, 255, 255, 0.03)',
+			},
+			'.cm-activeLineGutter': {
+				backgroundColor: 'rgba(255, 255, 255, 0.05)',
+			},
+			'.cm-gutters': {
+				backgroundColor: 'transparent',
+				color: '#52525b',
+				border: 'none',
+				paddingRight: '8px',
+			},
+			'.cm-lineNumbers .cm-gutterElement': {
+				padding: '0 8px 0 16px',
+				minWidth: '40px',
+			},
+			'.cm-foldGutter .cm-gutterElement': {
+				padding: '0 4px',
+				cursor: 'pointer',
+				color: '#71717a',
+			},
+			'.cm-foldGutter .cm-gutterElement:hover': {
+				color: '#a1a1aa',
+			},
+			'.cm-matchingBracket': {
+				backgroundColor: 'rgba(99, 102, 241, 0.25)',
+				outline: '1px solid rgba(99, 102, 241, 0.5)',
+			},
+			'.cm-tooltip': {
+				backgroundColor: '#27272a',
+				border: '1px solid #3f3f46',
+				borderRadius: '6px',
+			},
+			'.cm-tooltip-autocomplete': {
+				'& > ul': {
+					fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+				},
+				'& > ul > li': {
+					padding: '4px 8px',
+				},
+				'& > ul > li[aria-selected]': {
+					backgroundColor: 'rgba(99, 102, 241, 0.2)',
+				},
+			},
+			'.cm-scroller': {
+				overflow: 'auto',
+			},
+		}, { dark: true });
+	}
+
+	/**
+	 * Build light theme using EditorView.theme
+	 */
+	function buildLightTheme(EditorView) {
+		return EditorView.theme({
+			'&': {
+				backgroundColor: '#ffffff',
+				color: '#27272a',
+				height: '100%',
+			},
+			'.cm-content': {
+				caretColor: 'var(--accent, #3b82f6)',
+				fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+				fontSize: '13px',
+				lineHeight: '1.6',
+				padding: '12px 0',
+			},
+			'.cm-cursor, .cm-dropCursor': {
+				borderLeftColor: 'var(--accent, #3b82f6)',
+				borderLeftWidth: '2px',
+			},
+			'.cm-selectionBackground, ::selection': {
+				backgroundColor: 'rgba(59, 130, 246, 0.2) !important',
+			},
+			'.cm-focused .cm-selectionBackground': {
+				backgroundColor: 'rgba(59, 130, 246, 0.2)',
+			},
+			'.cm-activeLine': {
+				backgroundColor: 'rgba(0, 0, 0, 0.03)',
+			},
+			'.cm-activeLineGutter': {
+				backgroundColor: 'rgba(0, 0, 0, 0.05)',
+			},
+			'.cm-gutters': {
+				backgroundColor: 'transparent',
+				color: '#a1a1aa',
+				border: 'none',
+				paddingRight: '8px',
+			},
+			'.cm-lineNumbers .cm-gutterElement': {
+				padding: '0 8px 0 16px',
+				minWidth: '40px',
+			},
+			'.cm-foldGutter .cm-gutterElement': {
+				padding: '0 4px',
+				cursor: 'pointer',
+				color: '#a1a1aa',
+			},
+			'.cm-foldGutter .cm-gutterElement:hover': {
+				color: '#71717a',
+			},
+			'.cm-matchingBracket': {
+				backgroundColor: 'rgba(59, 130, 246, 0.15)',
+				outline: '1px solid rgba(59, 130, 246, 0.4)',
+			},
+			'.cm-tooltip': {
+				backgroundColor: '#ffffff',
+				border: '1px solid #e4e4e7',
+				borderRadius: '6px',
+				boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+			},
+			'.cm-tooltip-autocomplete': {
+				'& > ul': {
+					fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+				},
+				'& > ul > li': {
+					padding: '4px 8px',
+				},
+				'& > ul > li[aria-selected]': {
+					backgroundColor: 'rgba(59, 130, 246, 0.1)',
+				},
+			},
+			'.cm-scroller': {
+				overflow: 'auto',
+			},
+		}, { dark: false });
+	}
+
+	/**
+	 * Build syntax highlighting styles
+	 */
+	function buildHighlighting(HighlightStyle, tags, isDark) {
+		if (isDark) {
+			return HighlightStyle.define([
+				{ tag: tags.keyword, color: '#c084fc' },
+				{ tag: tags.operator, color: '#94a3b8' },
+				{ tag: tags.special(tags.variableName), color: '#67e8f9' },
+				{ tag: tags.typeName, color: '#fbbf24' },
+				{ tag: tags.atom, color: '#fb923c' },
+				{ tag: tags.number, color: '#fb923c' },
+				{ tag: tags.definition(tags.variableName), color: '#67e8f9' },
+				{ tag: tags.string, color: '#86efac' },
+				{ tag: tags.special(tags.string), color: '#86efac' },
+				{ tag: tags.comment, color: '#6b7280', fontStyle: 'italic' },
+				{ tag: tags.variableName, color: '#e4e4e7' },
+				{ tag: tags.tagName, color: '#f87171' },
+				{ tag: tags.bracket, color: '#a1a1aa' },
+				{ tag: tags.meta, color: '#fbbf24' },
+				{ tag: tags.link, color: '#60a5fa', textDecoration: 'underline' },
+				{ tag: tags.heading, fontWeight: 'bold', color: '#f472b6' },
+				{ tag: tags.emphasis, fontStyle: 'italic' },
+				{ tag: tags.strong, fontWeight: 'bold' },
+				{ tag: tags.strikethrough, textDecoration: 'line-through' },
+				{ tag: tags.className, color: '#fbbf24' },
+				{ tag: tags.propertyName, color: '#60a5fa' },
+				{ tag: tags.function(tags.variableName), color: '#60a5fa' },
+				{ tag: tags.function(tags.propertyName), color: '#60a5fa' },
+				{ tag: tags.bool, color: '#fb923c' },
+				{ tag: tags.null, color: '#fb923c' },
+				{ tag: tags.regexp, color: '#f87171' },
+			]);
+		}
+
+		return HighlightStyle.define([
+			{ tag: tags.keyword, color: '#7c3aed' },
+			{ tag: tags.operator, color: '#64748b' },
+			{ tag: tags.special(tags.variableName), color: '#0891b2' },
+			{ tag: tags.typeName, color: '#d97706' },
+			{ tag: tags.atom, color: '#ea580c' },
+			{ tag: tags.number, color: '#ea580c' },
+			{ tag: tags.definition(tags.variableName), color: '#0891b2' },
+			{ tag: tags.string, color: '#16a34a' },
+			{ tag: tags.special(tags.string), color: '#16a34a' },
+			{ tag: tags.comment, color: '#9ca3af', fontStyle: 'italic' },
+			{ tag: tags.variableName, color: '#27272a' },
+			{ tag: tags.tagName, color: '#dc2626' },
+			{ tag: tags.bracket, color: '#71717a' },
+			{ tag: tags.meta, color: '#d97706' },
+			{ tag: tags.link, color: '#2563eb', textDecoration: 'underline' },
+			{ tag: tags.heading, fontWeight: 'bold', color: '#db2777' },
+			{ tag: tags.emphasis, fontStyle: 'italic' },
+			{ tag: tags.strong, fontWeight: 'bold' },
+			{ tag: tags.strikethrough, textDecoration: 'line-through' },
+			{ tag: tags.className, color: '#d97706' },
+			{ tag: tags.propertyName, color: '#2563eb' },
+			{ tag: tags.function(tags.variableName), color: '#2563eb' },
+			{ tag: tags.function(tags.propertyName), color: '#2563eb' },
+			{ tag: tags.bool, color: '#ea580c' },
+			{ tag: tags.null, color: '#ea580c' },
+			{ tag: tags.regexp, color: '#dc2626' },
+		]);
+	}
+
+	/**
+	 * Resolve language extension from language string
+	 */
+	function getLanguageExtension(lang) {
+		const normalized = lang?.toLowerCase();
+		if ((normalized === 'javascript' || normalized === 'js' || normalized === 'jsx' || normalized === 'tsx' || normalized === 'typescript' || normalized === 'ts') && modules.langJavascript) {
+			return modules.langJavascript.javascript();
+		}
+		if ((normalized === 'python' || normalized === 'py') && modules.langPython) {
+			return modules.langPython.python();
+		}
+		// No language extension — plain text
+		return [];
+	}
+
+	/**
+	 * Resolve whether to use dark theme
+	 */
+	function isDark(sdkTheme) {
+		if (themePreference === 'auto') {
+			return sdkTheme === 'dark';
+		}
+		return themePreference === 'dark';
+	}
+
+	/**
+	 * Create a CodeMirror editor instance
+	 *
+	 * @param {HTMLElement} container - DOM element to mount editor in
+	 * @param {object} options
+	 * @param {string} options.code - Initial code content
+	 * @param {string} options.language - Language for syntax highlighting
+	 * @param {string} options.sdkTheme - Current SDK theme ('dark'|'light')
+	 * @param {function} options.onChange - Called on content changes with new code
+	 * @returns {{ view: EditorView, getCode: () => string, setCode: (code: string) => void, destroy: () => void }}
+	 */
+	function create(container, options = {}) {
+		if (!isAvailable()) {
+			console.warn('Artifactuse: CodeMirror modules not provided. Editor not available.');
+			return null;
+		}
+
+		const { EditorState } = modules.state;
+		const {
+			EditorView, keymap, lineNumbers, highlightActiveLineGutter,
+			highlightSpecialChars, drawSelection, dropCursor,
+			rectangularSelection, crosshairCursor, highlightActiveLine
+		} = modules.view;
+		const { defaultKeymap, history, historyKeymap, indentWithTab } = modules.commands;
+		const {
+			indentOnInput, syntaxHighlighting, bracketMatching,
+			foldGutter, foldKeymap, HighlightStyle
+		} = modules.language;
+		const {
+			closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap
+		} = modules.autocomplete;
+
+		const tags = modules.lezerHighlight?.tags || modules.language?.tags;
+		const dark = isDark(options.sdkTheme);
+		const theme = dark ? buildDarkTheme(EditorView) : buildLightTheme(EditorView);
+
+		const extensions = [
+			lineNumbers(),
+			highlightActiveLineGutter(),
+			highlightSpecialChars(),
+			history(),
+			foldGutter({
+				openText: '\u25BE',
+				closedText: '\u25B8',
+			}),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			...(tags ? [syntaxHighlighting(buildHighlighting(HighlightStyle, tags, dark))] : []),
+			bracketMatching(),
+			closeBrackets(),
+			autocompletion(),
+			rectangularSelection(),
+			crosshairCursor(),
+			highlightActiveLine(),
+			keymap.of([
+				...closeBracketsKeymap,
+				...defaultKeymap,
+				...historyKeymap,
+				...foldKeymap,
+				...completionKeymap,
+				indentWithTab,
+			]),
+			getLanguageExtension(options.language),
+			theme,
+		];
+
+		if (options.onChange) {
+			extensions.push(
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged) {
+						options.onChange(update.state.doc.toString());
+					}
+				})
+			);
+		}
+
+		const state = EditorState.create({
+			doc: options.code || '',
+			extensions,
+		});
+
+		const view = new EditorView({
+			state,
+			parent: container,
+		});
+
+		return {
+			view,
+			getCode() {
+				return view.state.doc.toString();
+			},
+			setCode(code) {
+				const currentCode = view.state.doc.toString();
+				if (currentCode !== code) {
+					view.dispatch({
+						changes: { from: 0, to: currentCode.length, insert: code },
+					});
+				}
+			},
+			destroy() {
+				view.destroy();
+			},
+		};
+	}
+
+	function setTheme(newTheme) {
+		themePreference = newTheme;
+	}
+
+	return {
+		isAvailable,
+		create,
+		setTheme,
+	};
+}
+
 /**
  * marked v17.0.1 - a markdown parser
  * Copyright (c) 2018-2025, MarkedJS. (MIT License)
@@ -5849,6 +6279,9 @@ const DEFAULT_PANELS = {
   diff: 'diff-panel',
   patch: 'diff-panel',
   
+  // Plain text
+  txt: 'code-panel',
+
   // Programming languages
   javascript: 'code-panel',
   js: 'code-panel',
@@ -6218,6 +6651,9 @@ function createArtifactuse(userConfig = {}) {
   // Create share service
   const share = createShareService(config.sharing);
 
+  // Create editor manager (CodeMirror integration — optional)
+  const editor = createEditorManager(config.editor);
+
   /**
    * Process AI agent message content
    * Returns processed HTML with artifact placeholders
@@ -6364,7 +6800,35 @@ function createArtifactuse(userConfig = {}) {
     
     emit('artifact:opened', artifact);
   }
-  
+
+  /**
+   * Open a file by name — auto-detects language from extension
+   */
+  function openFile(filename, code, options = {}) {
+    const ext = filename.split('.').pop();
+    const language = options.language || getLanguageFromExtension(ext) || ext;
+    const title = options.title || filename;
+    return openCode(code, language, { ...options, title });
+  }
+
+  /**
+   * Open code with explicit language
+   */
+  function openCode(code, language, options = {}) {
+    const msgId = options.messageId || generateArtifactId('open');
+    const resolvedLang = hasPanel({ type: language, language }) ? language : 'txt';
+    const artifact = createArtifact(code, resolvedLang, msgId, 0);
+    artifact.title = options.title || artifact.title;
+    artifact.isInline = false;
+    if (options.tabs) artifact.tabs = options.tabs;
+    if (options.panelUrl) artifact.panelUrl = options.panelUrl;
+    state.addArtifact(artifact);
+    openArtifact(artifact);
+    if (options.viewMode) state.setViewMode(options.viewMode);
+    else if (options.tabs) state.setViewMode(options.tabs[0]);
+    return artifact;
+  }
+
   /**
    * Close panel
    */
@@ -6417,7 +6881,10 @@ function createArtifactuse(userConfig = {}) {
    */
   function getPanelUrl(artifact, options = {}) {
     if (!artifact) return null;
-    
+
+    // Custom panel URL takes priority over registry lookup
+    if (artifact.panelUrl) return artifact.panelUrl;
+
     const { type, language } = artifact;
     
     // Build options for panel URL
@@ -6590,6 +7057,8 @@ function createArtifactuse(userConfig = {}) {
     
     // Panel control
     openArtifact,
+    openFile,
+    openCode,
     closePanel,
     togglePanel,
     toggleFullscreen,
@@ -6615,6 +7084,9 @@ function createArtifactuse(userConfig = {}) {
     off,
     emit,
     
+    // Editor (CodeMirror integration)
+    editor,
+
     // Bridge (for advanced use)
     bridge,
 
@@ -6768,6 +7240,8 @@ function provideArtifactuse(config = {}) {
     processMessage: instance.processMessage,
     initializeContent: instance.initializeContent,
     openArtifact: instance.openArtifact,
+    openFile: instance.openFile,
+    openCode: instance.openCode,
     closePanel: instance.closePanel,
     togglePanel: instance.togglePanel,
     toggleFullscreen: instance.toggleFullscreen,
@@ -6886,6 +7360,8 @@ function createArtifactuseComposable(config = {}) {
     processMessage: instance.processMessage,
     initializeContent: instance.initializeContent,
     openArtifact: instance.openArtifact,
+    openFile: instance.openFile,
+    openCode: instance.openCode,
     closePanel: instance.closePanel,
     togglePanel: instance.togglePanel,
     toggleFullscreen: instance.toggleFullscreen,
@@ -26386,6 +26862,41 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -26419,6 +26930,7 @@ var script$1 = defineComponent({
     const contentRef = ref(null);
     const lineNumbersRef = ref(null);
     const codeScrollRef = ref(null);
+    const editorContainerRef = ref(null);
     
     // State
     const copied = ref(false);
@@ -26449,7 +26961,11 @@ var script$1 = defineComponent({
     // Timers
     let streamEndTimer = null;
     let iframeLoadTimer = null;
-    
+
+    // Editor (CodeMirror) instance — not reactive to avoid proxy overhead
+    let editorInstance = null;
+    const isEditorAvailable = computed(() => instance.editor?.isAvailable() || false);
+
     // Computed
     const languageDisplay = computed(() => {
       if (!activeArtifact.value) return '';
@@ -26570,7 +27086,35 @@ var script$1 = defineComponent({
         highlightCode();
       });
     }
-    
+
+    // Editor (CodeMirror) functions
+    function initEditor() {
+      if (!isEditorAvailable.value || !editorContainerRef.value || !activeArtifact.value) return;
+      destroyEditor();
+      editorInstance = instance.editor.create(editorContainerRef.value, {
+        code: activeArtifact.value.code || '',
+        language: activeArtifact.value.language || 'plaintext',
+        sdkTheme: instance.getTheme(),
+      });
+    }
+
+    function destroyEditor() {
+      if (editorInstance) {
+        editorInstance.destroy();
+        editorInstance = null;
+      }
+    }
+
+    function handleEditorSave() {
+      if (!editorInstance || !activeArtifact.value) return;
+      const code = editorInstance.getCode();
+      instance.emit('edit:save', {
+        artifactId: activeArtifact.value.id,
+        artifact: activeArtifact.value,
+        code,
+      });
+    }
+
     function handleIframeLoad() {
       clearTimeout(iframeLoadTimer);
       iframeLoading.value = false;
@@ -26975,10 +27519,19 @@ var script$1 = defineComponent({
         }
 
         // Check if code changed
-        if (!oldArtifact || newArtifact.code !== oldArtifact.code) {
+        if (!oldArtifact || newArtifact.id !== oldArtifact.id || newArtifact.code !== oldArtifact.code) {
           // Update code view immediately on each change
           updateCodeView();
 
+          // Update editor content if in edit mode
+          if (state.viewMode === 'edit') {
+            if (!oldArtifact || newArtifact.id !== oldArtifact.id) {
+              nextTick(() => initEditor());
+            } else if (editorInstance) {
+              editorInstance.setCode(newArtifact.code || '');
+            }
+          }
+
           // Debounce iframe updates only
           clearTimeout(streamEndTimer);
           streamEndTimer = setTimeout(() => {
@@ -26995,8 +27548,21 @@ var script$1 = defineComponent({
       if (mode === 'code' || mode === 'split') {
         updateCodeView();
       }
+      if (mode === 'edit') {
+        nextTick(() => initEditor());
+      }
     });
-    
+
+    // Watch panel open state — v-if destroys DOM on close, need to re-render code on reopen
+    watch(() => state.isPanelOpen, (isOpen) => {
+      if (isOpen && activeArtifact.value) {
+        updateCodeView();
+      }
+      if (!isOpen) {
+        destroyEditor();
+      }
+    });
+
     onMounted(() => {
       instance.on('ai:request', (data) => emit('ai-request', data));
       instance.on('save:request', (data) => emit('save', data));
@@ -27012,6 +27578,7 @@ var script$1 = defineComponent({
     onUnmounted(() => {
       stopPanelResize();
       stopSplitResize();
+      destroyEditor();
       document.removeEventListener('click', handleClickOutside);
       clearTimeout(streamEndTimer);
       clearTimeout(iframeLoadTimer);
@@ -27033,6 +27600,7 @@ var script$1 = defineComponent({
       contentRef,
       lineNumbersRef,
       codeScrollRef,
+      editorContainerRef,
       
       // State
       copied,
@@ -27069,6 +27637,7 @@ var script$1 = defineComponent({
       panelClasses,
       sharingEnabled,
       isAuthenticated,
+      isEditorAvailable,
 
       // Methods
       handleIframeLoad,
@@ -27084,6 +27653,7 @@ var script$1 = defineComponent({
       getArtifactIconHtml,
       startPanelResize,
       startSplitResize,
+      handleEditorSave,
 
       // Share methods
       toggleSharePopup,
@@ -27816,141 +28386,205 @@ var __vue_render__$1 = function () {
                             "div",
                             { staticClass: "artifactuse-panel__tabs" },
                             [
-                              _c(
-                                "button",
-                                {
-                                  staticClass: "artifactuse-panel__tab",
-                                  class: {
-                                    "artifactuse-panel__tab--active":
-                                      _vm.state.viewMode === "preview",
-                                  },
-                                  attrs: {
-                                    disabled: !_vm.activeArtifact.isPreviewable,
-                                    title: "Preview",
-                                  },
-                                  on: {
-                                    click: function ($event) {
-                                      return _vm.setViewMode("preview")
-                                    },
-                                  },
-                                },
-                                [
-                                  _c(
-                                    "svg",
+                              !_vm.activeArtifact.tabs ||
+                              _vm.activeArtifact.tabs.includes("preview")
+                                ? _c(
+                                    "button",
                                     {
+                                      staticClass: "artifactuse-panel__tab",
+                                      class: {
+                                        "artifactuse-panel__tab--active":
+                                          _vm.state.viewMode === "preview",
+                                      },
                                       attrs: {
-                                        viewBox: "0 0 24 24",
-                                        fill: "none",
-                                        stroke: "currentColor",
-                                        "stroke-width": "2",
+                                        disabled:
+                                          !_vm.activeArtifact.isPreviewable,
+                                        title: "Preview",
+                                      },
+                                      on: {
+                                        click: function ($event) {
+                                          return _vm.setViewMode("preview")
+                                        },
                                       },
                                     },
                                     [
-                                      _c("path", {
-                                        attrs: {
-                                          d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
                                         },
-                                      }),
-                                      _vm._v(" "),
-                                      _c("circle", {
-                                        attrs: { cx: "12", cy: "12", r: "3" },
-                                      }),
+                                        [
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("circle", {
+                                            attrs: {
+                                              cx: "12",
+                                              cy: "12",
+                                              r: "3",
+                                            },
+                                          }),
+                                        ]
+                                      ),
                                     ]
-                                  ),
-                                ]
-                              ),
+                                  )
+                                : _vm._e(),
                               _vm._v(" "),
-                              _c(
-                                "button",
-                                {
-                                  staticClass: "artifactuse-panel__tab",
-                                  class: {
-                                    "artifactuse-panel__tab--active":
-                                      _vm.state.viewMode === "code",
-                                  },
-                                  attrs: { title: "Code" },
-                                  on: {
-                                    click: function ($event) {
-                                      return _vm.setViewMode("code")
-                                    },
-                                  },
-                                },
-                                [
-                                  _c(
-                                    "svg",
+                              !_vm.activeArtifact.tabs ||
+                              _vm.activeArtifact.tabs.includes("code")
+                                ? _c(
+                                    "button",
                                     {
-                                      attrs: {
-                                        viewBox: "0 0 24 24",
-                                        fill: "none",
-                                        stroke: "currentColor",
-                                        "stroke-width": "2",
+                                      staticClass: "artifactuse-panel__tab",
+                                      class: {
+                                        "artifactuse-panel__tab--active":
+                                          _vm.state.viewMode === "code",
+                                      },
+                                      attrs: { title: "Code" },
+                                      on: {
+                                        click: function ($event) {
+                                          return _vm.setViewMode("code")
+                                        },
                                       },
                                     },
                                     [
-                                      _c("polyline", {
-                                        attrs: { points: "16 18 22 12 16 6" },
-                                      }),
-                                      _vm._v(" "),
-                                      _c("polyline", {
-                                        attrs: { points: "8 6 2 12 8 18" },
-                                      }),
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
+                                        },
+                                        [
+                                          _c("polyline", {
+                                            attrs: {
+                                              points: "16 18 22 12 16 6",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("polyline", {
+                                            attrs: { points: "8 6 2 12 8 18" },
+                                          }),
+                                        ]
+                                      ),
                                     ]
-                                  ),
-                                ]
-                              ),
+                                  )
+                                : _vm._e(),
                               _vm._v(" "),
-                              _c(
-                                "button",
-                                {
-                                  staticClass: "artifactuse-panel__tab",
-                                  class: {
-                                    "artifactuse-panel__tab--active":
-                                      _vm.state.viewMode === "split",
-                                  },
-                                  attrs: {
-                                    disabled: !_vm.activeArtifact.isPreviewable,
-                                    title: "Split view",
-                                  },
-                                  on: {
-                                    click: function ($event) {
-                                      return _vm.setViewMode("split")
-                                    },
-                                  },
-                                },
-                                [
-                                  _c(
-                                    "svg",
+                              !_vm.activeArtifact.tabs ||
+                              _vm.activeArtifact.tabs.includes("split")
+                                ? _c(
+                                    "button",
                                     {
+                                      staticClass: "artifactuse-panel__tab",
+                                      class: {
+                                        "artifactuse-panel__tab--active":
+                                          _vm.state.viewMode === "split",
+                                      },
                                       attrs: {
-                                        viewBox: "0 0 24 24",
-                                        fill: "none",
-                                        stroke: "currentColor",
-                                        "stroke-width": "2",
+                                        disabled:
+                                          !_vm.activeArtifact.isPreviewable,
+                                        title: "Split view",
+                                      },
+                                      on: {
+                                        click: function ($event) {
+                                          return _vm.setViewMode("split")
+                                        },
                                       },
                                     },
                                     [
-                                      _c("rect", {
-                                        attrs: {
-                                          x: "3",
-                                          y: "3",
-                                          width: "18",
-                                          height: "18",
-                                          rx: "2",
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
                                         },
-                                      }),
-                                      _vm._v(" "),
-                                      _c("line", {
-                                        attrs: {
-                                          x1: "12",
-                                          y1: "3",
-                                          x2: "12",
-                                          y2: "21",
+                                        [
+                                          _c("rect", {
+                                            attrs: {
+                                              x: "3",
+                                              y: "3",
+                                              width: "18",
+                                              height: "18",
+                                              rx: "2",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("line", {
+                                            attrs: {
+                                              x1: "12",
+                                              y1: "3",
+                                              x2: "12",
+                                              y2: "21",
+                                            },
+                                          }),
+                                        ]
+                                      ),
+                                    ]
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
+                              _vm.activeArtifact.tabs &&
+                              _vm.activeArtifact.tabs.includes("edit") &&
+                              _vm.isEditorAvailable
+                                ? _c(
+                                    "button",
+                                    {
+                                      staticClass: "artifactuse-panel__tab",
+                                      class: {
+                                        "artifactuse-panel__tab--active":
+                                          _vm.state.viewMode === "edit",
+                                      },
+                                      attrs: { title: "Edit" },
+                                      on: {
+                                        click: function ($event) {
+                                          return _vm.setViewMode("edit")
                                         },
-                                      }),
+                                      },
+                                    },
+                                    [
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
+                                        },
+                                        [
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",
+                                            },
+                                          }),
+                                        ]
+                                      ),
                                     ]
-                                  ),
-                                ]
-                              ),
+                                  )
+                                : _vm._e(),
                             ]
                           ),
                           _vm._v(" "),
@@ -27958,6 +28592,48 @@ var __vue_render__$1 = function () {
                             "div",
                             { staticClass: "artifactuse-panel__actions" },
                             [
+                              _vm.state.viewMode === "edit"
+                                ? _c(
+                                    "button",
+                                    {
+                                      staticClass:
+                                        "artifactuse-panel__action artifactuse-panel__action--save",
+                                      attrs: { title: "Save" },
+                                      on: { click: _vm.handleEditorSave },
+                                    },
+                                    [
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
+                                        },
+                                        [
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("polyline", {
+                                            attrs: {
+                                              points: "17 21 17 13 7 13 7 21",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("polyline", {
+                                            attrs: { points: "7 3 7 8 15 8" },
+                                          }),
+                                        ]
+                                      ),
+                                    ]
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
                               _c(
                                 "button",
                                 {
@@ -28308,6 +28984,28 @@ var __vue_render__$1 = function () {
                               ),
                             ]
                           ),
+                          _vm._v(" "),
+                          _c(
+                            "div",
+                            {
+                              directives: [
+                                {
+                                  name: "show",
+                                  rawName: "v-show",
+                                  value: _vm.state.viewMode === "edit",
+                                  expression: "state.viewMode === 'edit'",
+                                },
+                              ],
+                              staticClass: "artifactuse-panel__edit",
+                            },
+                            [
+                              _c("div", {
+                                ref: "editorContainerRef",
+                                staticClass:
+                                  "artifactuse-panel__editor-container",
+                              }),
+                            ]
+                          ),
                         ]
                       ),
                       _vm._v(" "),