artifactuse 0.2.3 → 0.2.5

package/dist/vue2/composables.d.ts

@@ -83,20 +83,7 @@ export function provideArtifactuse(config?: {
         };
         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;
-        };
+        openFile: (filename: any, code: any, options?: {}) => any;
         openCode: (code: any, language: any, options?: {}) => {
             id: string;
             messageId: string;
@@ -207,20 +194,7 @@ export function provideArtifactuse(config?: {
     };
     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;
-    };
+    openFile: (filename: any, code: any, options?: {}) => any;
     openCode: (code: any, language: any, options?: {}) => {
         id: string;
         messageId: string;
@@ -317,20 +291,7 @@ export function createArtifactuseComposable(config?: {}): {
         };
         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;
-        };
+        openFile: (filename: any, code: any, options?: {}) => any;
         openCode: (code: any, language: any, options?: {}) => {
             id: string;
             messageId: string;
@@ -441,20 +402,7 @@ export function createArtifactuseComposable(config?: {}): {
     };
     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;
-    };
+    openFile: (filename: any, code: any, options?: {}) => any;
     openCode: (code: any, language: any, options?: {}) => {
         id: string;
         messageId: string;

package/dist/vue2/index.js

@@ -6,9 +6,160 @@ import require$$2 from 'events';
 import require$$0$1 from 'buffer';
 import require$$1 from 'util';
 
+// artifactuse/core/highlight.js
+// Optional Prism.js integration for syntax highlighting
+// Users must provide Prism.js themselves
+
+/**
+ * Check if Prism is available
+ */
+function isPrismAvailable() {
+  return typeof window !== 'undefined' && window.Prism;
+}
+
+/**
+ * Highlight all code blocks in a container
+ * @param {HTMLElement|string} container - Container element or selector
+ */
+function highlightAll(container) {
+  if (!isPrismAvailable()) {
+    console.warn('Artifactuse: Prism.js not found. Install and include Prism.js for syntax highlighting.');
+    return;
+  }
+  
+  const element = typeof container === 'string' 
+    ? document.querySelector(container) 
+    : container;
+  
+  if (!element) return;
+  
+  // Find all code blocks
+  const codeBlocks = element.querySelectorAll('pre code');
+  
+  codeBlocks.forEach(block => {
+    // Skip if already highlighted
+    if (block.classList.contains('prism-highlighted')) return;
+    
+    // Detect language from class
+    const language = detectLanguage(block);
+    
+    if (language) {
+      // Add language class if not present
+      if (!block.className.includes(`language-${language}`)) {
+        block.classList.add(`language-${language}`);
+      }
+      
+      // Highlight
+      window.Prism.highlightElement(block);
+      block.classList.add('prism-highlighted');
+    }
+  });
+}
+
+/**
+ * Highlight code string and return HTML
+ * @param {string} code - Code to highlight
+ * @param {string} language - Language identifier
+ * @returns {string} - Highlighted HTML
+ */
+function highlightCode(code, language) {
+  if (!isPrismAvailable()) return escapeHtml$4(code);
+  
+  const grammar = window.Prism.languages[language];
+  
+  if (!grammar) {
+    return escapeHtml$4(code);
+  }
+  
+  return window.Prism.highlight(code, grammar, language);
+}
+
+/**
+ * Detect language from element classes
+ * @param {HTMLElement} element - Code element
+ * @returns {string|null} - Detected language or null
+ */
+function detectLanguage(element) {
+  // Check element classes
+  const classes = element.className.split(/\s+/);
+  
+  for (const cls of classes) {
+    // Match language-xxx or lang-xxx
+    const match = cls.match(/^(?:language-|lang-)(.+)$/);
+    if (match) {
+      return normalizeLanguage(match[1]);
+    }
+  }
+  
+  // Check parent <pre> classes
+  const pre = element.closest('pre');
+  if (pre) {
+    const preClasses = pre.className.split(/\s+/);
+    for (const cls of preClasses) {
+      const match = cls.match(/^(?:language-|lang-)(.+)$/);
+      if (match) {
+        return normalizeLanguage(match[1]);
+      }
+    }
+  }
+  
+  // Check data-language attribute
+  const dataLang = element.dataset.language || pre?.dataset.language;
+  if (dataLang) {
+    return normalizeLanguage(dataLang);
+  }
+  
+  return null;
+}
+
+/**
+ * Normalize language identifier to Prism-compatible name
+ */
+function normalizeLanguage(lang) {
+  const aliases = {
+    'js': 'javascript',
+    'ts': 'typescript',
+    'py': 'python',
+    'rb': 'ruby',
+    'sh': 'bash',
+    'shell': 'bash',
+    'zsh': 'bash',
+    'yml': 'yaml',
+    'md': 'markdown',
+    'html': 'markup',
+    'xml': 'markup',
+    'svg': 'markup',
+    'vue': 'markup',
+    'jsx': 'jsx',
+    'tsx': 'tsx',
+    'c++': 'cpp',
+    'c#': 'csharp',
+    'cs': 'csharp',
+    'f#': 'fsharp',
+    'objective-c': 'objectivec',
+    'objc': 'objectivec',
+  };
+  
+  const normalized = lang.toLowerCase();
+  return aliases[normalized] || normalized;
+}
+
+/**
+ * Escape HTML special characters
+ */
+function escapeHtml$4(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 // artifactuse/core/detector.js
 // Artifact detection and extraction from AI responses
 
+
 /**
  * Artifact type definitions
  */
@@ -447,18 +598,6 @@ function decodeHtml(encoded) {
     .replace(/&nbsp;/g, ' ');
 }
 
-/**
- * Encode HTML for safe embedding
- */
-function encodeHtml(code) {
-  return code
-    .replace(/&/g, '&amp;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-}
-
 /**
  * Encode JSON for safe embedding in HTML attributes using Base64
  */
@@ -624,16 +763,18 @@ function createInlinePreview(artifact, code, langLower, inlinePreview) {
       // Separate markers (+/-/space) from code content
       const markers = truncDiffLines.map(l => l[0] || ' ');
       const codeLines = truncDiffLines.map(l => l.slice(1));
-      const encoded = encodeHtml(codeLines.join('\n'));
-      const isTruncated = allDiffLines.length > maxLines;
       const actualLang = diffData.language || 'plaintext';
+      const normalizedActualLang = normalizeLanguage(actualLang);
+      const encoded = highlightCode(codeLines.join('\n'), normalizedActualLang);
+      const isPreHighlighted = isPrismAvailable() && window.Prism.languages[normalizedActualLang];
+      const isTruncated = allDiffLines.length > maxLines;
       const nonClickable = isNonClickable(allDiffLines.length, isTruncated);
       const staticClass = nonClickable ? ' artifactuse-inline-preview--static' : '';
       const staticAttr = nonClickable ? ' data-non-clickable="true"' : '';
       const actionText = getActionLabel('smartdiff', allDiffLines.length);
 
       return `<div class="artifactuse-inline-preview${isTruncated ? ' artifactuse-inline-preview--truncated' : ''}${staticClass}" data-artifact-id="${artifact.id}" data-smartdiff="true" data-smartdiff-markers="${markers.join(',')}"${staticAttr}>`
-        + `<pre class="artifactuse-inline-preview__pre"><code class="language-${actualLang}">${encoded}</code></pre>`
+        + `<pre class="artifactuse-inline-preview__pre${isPreHighlighted ? ' language-' + actualLang : ''}"><code class="language-${actualLang}${isPreHighlighted ? ' prism-highlighted' : ''}">${encoded}</code></pre>`
         + (isTruncated ? `<div class="artifactuse-inline-preview__fade"><span class="artifactuse-inline-preview__action">${actionText}</span></div>` : '')
         + `</div>`;
     } catch {
@@ -647,7 +788,9 @@ function createInlinePreview(artifact, code, langLower, inlinePreview) {
 
   const lines = previewCode.split('\n');
   const truncated = lines.slice(0, maxLines).join('\n');
-  const encoded = encodeHtml(truncated);
+  const normalizedLang = normalizeLanguage(previewLang);
+  const encoded = highlightCode(truncated, normalizedLang);
+  const isPreHighlighted = isPrismAvailable() && window.Prism.languages[normalizedLang];
   const isTruncated = lines.length > maxLines;
   const nonClickable = isNonClickable(lines.length, isTruncated);
   const staticClass = nonClickable ? ' artifactuse-inline-preview--static' : '';
@@ -655,7 +798,7 @@ function createInlinePreview(artifact, code, langLower, inlinePreview) {
   const actionText = getActionLabel(langLower, lines.length);
 
   return `<div class="artifactuse-inline-preview${isTruncated ? ' artifactuse-inline-preview--truncated' : ''}${staticClass}" data-artifact-id="${artifact.id}"${staticAttr}>`
-    + `<pre class="artifactuse-inline-preview__pre"><code class="language-${previewLang}">${encoded}</code></pre>`
+    + `<pre class="artifactuse-inline-preview__pre${isPreHighlighted ? ' language-' + previewLang : ''}"><code class="language-${previewLang}${isPreHighlighted ? ' prism-highlighted' : ''}">${encoded}</code></pre>`
     + (isTruncated ? `<div class="artifactuse-inline-preview__fade"><span class="artifactuse-inline-preview__action">${actionText}</span></div>` : '')
     + `</div>`;
 }
@@ -6557,126 +6700,6 @@ function loadKaTeX() {
   return katexLoadingPromise;
 }
 
-// artifactuse/core/highlight.js
-// Optional Prism.js integration for syntax highlighting
-// Users must provide Prism.js themselves
-
-/**
- * Check if Prism is available
- */
-function isPrismAvailable() {
-  return typeof window !== 'undefined' && window.Prism;
-}
-
-/**
- * Highlight all code blocks in a container
- * @param {HTMLElement|string} container - Container element or selector
- */
-function highlightAll(container) {
-  if (!isPrismAvailable()) {
-    console.warn('Artifactuse: Prism.js not found. Install and include Prism.js for syntax highlighting.');
-    return;
-  }
-  
-  const element = typeof container === 'string' 
-    ? document.querySelector(container) 
-    : container;
-  
-  if (!element) return;
-  
-  // Find all code blocks
-  const codeBlocks = element.querySelectorAll('pre code');
-  
-  codeBlocks.forEach(block => {
-    // Skip if already highlighted
-    if (block.classList.contains('prism-highlighted')) return;
-    
-    // Detect language from class
-    const language = detectLanguage(block);
-    
-    if (language) {
-      // Add language class if not present
-      if (!block.className.includes(`language-${language}`)) {
-        block.classList.add(`language-${language}`);
-      }
-      
-      // Highlight
-      window.Prism.highlightElement(block);
-      block.classList.add('prism-highlighted');
-    }
-  });
-}
-
-/**
- * Detect language from element classes
- * @param {HTMLElement} element - Code element
- * @returns {string|null} - Detected language or null
- */
-function detectLanguage(element) {
-  // Check element classes
-  const classes = element.className.split(/\s+/);
-  
-  for (const cls of classes) {
-    // Match language-xxx or lang-xxx
-    const match = cls.match(/^(?:language-|lang-)(.+)$/);
-    if (match) {
-      return normalizeLanguage(match[1]);
-    }
-  }
-  
-  // Check parent <pre> classes
-  const pre = element.closest('pre');
-  if (pre) {
-    const preClasses = pre.className.split(/\s+/);
-    for (const cls of preClasses) {
-      const match = cls.match(/^(?:language-|lang-)(.+)$/);
-      if (match) {
-        return normalizeLanguage(match[1]);
-      }
-    }
-  }
-  
-  // Check data-language attribute
-  const dataLang = element.dataset.language || pre?.dataset.language;
-  if (dataLang) {
-    return normalizeLanguage(dataLang);
-  }
-  
-  return null;
-}
-
-/**
- * Normalize language identifier to Prism-compatible name
- */
-function normalizeLanguage(lang) {
-  const aliases = {
-    'js': 'javascript',
-    'ts': 'typescript',
-    'py': 'python',
-    'rb': 'ruby',
-    'sh': 'bash',
-    'shell': 'bash',
-    'zsh': 'bash',
-    'yml': 'yaml',
-    'md': 'markdown',
-    'html': 'markup',
-    'xml': 'markup',
-    'svg': 'markup',
-    'vue': 'markup',
-    'jsx': 'jsx',
-    'tsx': 'tsx',
-    'c++': 'cpp',
-    'c#': 'csharp',
-    'cs': 'csharp',
-    'f#': 'fsharp',
-    'objective-c': 'objectivec',
-    'objc': 'objectivec',
-  };
-  
-  const normalized = lang.toLowerCase();
-  return aliases[normalized] || normalized;
-}
-
 // artifactuse/core/index.js
 // Main entry point for Artifactuse SDK
 
@@ -6839,6 +6862,10 @@ const DEFAULT_CONFIG = {
   // Can be overridden per-component via props
   splitPosition: 50,
 
+  // Show "Open in new tab" button in panel header to open preview URL externally
+  // Can be overridden per-artifact via openFile/openCode options or per-component via props
+  externalPreview: false,
+
   // Enable multi-tab mode (open multiple artifacts as tabs)
   multiTab: false,
 
@@ -7369,6 +7396,17 @@ function createArtifactuse(userConfig = {}) {
     const ext = filename.split('.').pop();
     const language = options.language || getLanguageFromExtension(ext) || ext;
     const title = options.title || filename;
+
+    // Deduplicate: if an artifact with the same title already exists, update + focus it
+    const existing = state.getState().artifacts.find(a => a.title === title && !a.isInline);
+    if (existing) {
+      updateFile(existing.id, code, { ...options, title });
+      openArtifact(existing);
+      if (options.viewMode) state.setViewMode(options.viewMode);
+      else if (options.tabs) state.setViewMode(options.tabs[0]);
+      return state.getArtifact(existing.id);
+    }
+
     return openCode(code, language, { ...options, title });
   }
 
@@ -7384,6 +7422,7 @@ function createArtifactuse(userConfig = {}) {
     artifact.editorLanguage = language;
     if (options.tabs) artifact.tabs = options.tabs;
     if (options.panelUrl) artifact.panelUrl = options.panelUrl;
+    if (options.externalPreview !== undefined) artifact.externalPreview = options.externalPreview;
     state.addArtifact(artifact);
     openArtifact(artifact);
     if (options.viewMode) state.setViewMode(options.viewMode);
@@ -7403,6 +7442,7 @@ function createArtifactuse(userConfig = {}) {
     if (options.title !== undefined) updates.title = options.title;
     if (options.tabs !== undefined) updates.tabs = options.tabs;
     if (options.panelUrl !== undefined) updates.panelUrl = options.panelUrl;
+    if (options.externalPreview !== undefined) updates.externalPreview = options.externalPreview;
 
     state.addArtifact(updates);
     emit('artifact:updated', { artifactId: id, artifact: state.getArtifact(id) });
@@ -27605,6 +27645,18 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27624,6 +27676,10 @@ var script$1 = defineComponent({
       type: Number,
       default: undefined,
     },
+    externalPreview: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   
   setup(props, { emit }) {
@@ -27729,6 +27785,13 @@ var script$1 = defineComponent({
       return instance.config?.branding !== false;
     });
 
+    const showExternalPreview = computed(() => {
+      if (!panelUrl.value) return false;
+      if (activeArtifact.value?.externalPreview !== undefined) return activeArtifact.value.externalPreview;
+      if (props.externalPreview !== undefined) return props.externalPreview;
+      return instance.config?.externalPreview ?? false;
+    });
+
     // Multi-tab computed
     const isMultiTab = computed(() => instance.config?.multiTab === true);
 
@@ -27878,6 +27941,10 @@ var script$1 = defineComponent({
       });
     }
 
+    function handleExternalPreview() {
+      if (panelUrl.value) window.open(panelUrl.value, '_blank', 'noopener,noreferrer');
+    }
+
     function handleIframeLoad() {
       clearTimeout(iframeLoadTimer);
       iframeLoading.value = false;
@@ -28421,6 +28488,7 @@ var script$1 = defineComponent({
       nonInlineArtifacts,
       currentNonInlineIndex,
       showBranding,
+      showExternalPreview,
       effectivePanelWidth,
       panelClasses,
       forceEmptyView,
@@ -28445,6 +28513,7 @@ var script$1 = defineComponent({
       startPanelResize,
       startSplitResize,
       handleEditorSave,
+      handleExternalPreview,
 
       // Multi-tab methods
       selectTab,
@@ -29480,6 +29549,50 @@ var __vue_render__$1 = function () {
                                   )
                                 : _vm._e(),
                               _vm._v(" "),
+                              _vm.showExternalPreview
+                                ? _c(
+                                    "button",
+                                    {
+                                      staticClass: "artifactuse-panel__action",
+                                      attrs: { title: "Open in new tab" },
+                                      on: { click: _vm.handleExternalPreview },
+                                    },
+                                    [
+                                      _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
+                                        },
+                                        [
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("polyline", {
+                                            attrs: { points: "15 3 21 3 21 9" },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("line", {
+                                            attrs: {
+                                              x1: "10",
+                                              y1: "14",
+                                              x2: "21",
+                                              y2: "3",
+                                            },
+                                          }),
+                                        ]
+                                      ),
+                                    ]
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
                               _c(
                                 "button",
                                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artifactuse",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "The Artifact SDK for AI Agents - Turn AI outputs into interactive experiences",
   "author": "Artifactuse",