artifactuse 0.2.2 → 0.2.4

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>`;
 }
@@ -897,6 +1040,8 @@ function createState() {
     // Multi-tab support
     openTabs: [],        // Array of artifact IDs open as tabs (ordered)
     tabViewModes: {},    // { [artifactId]: 'preview' | 'code' | 'split' | 'edit' }
+    // Panel empty view
+    forceEmptyView: false, // When true, panel shows empty state regardless of artifacts
   };
 
   // Subscribers
@@ -1021,6 +1166,7 @@ function createState() {
       ...state,
       activeArtifactId: artifactId,
       viewMode,
+      forceEmptyView: false,
     };
 
     notify();
@@ -1086,6 +1232,17 @@ function createState() {
     notify();
   }
 
+  /**
+   * Set force empty view state
+   */
+  function setForceEmptyView(value) {
+    state = {
+      ...state,
+      forceEmptyView: !!value,
+    };
+    notify();
+  }
+
   /**
    * Get artifacts by message ID
    */
@@ -1218,6 +1375,7 @@ function createState() {
       isFullscreen: false,
       openTabs: [],
       tabViewModes: {},
+      forceEmptyView: false,
     };
 
     notify();
@@ -1275,6 +1433,7 @@ function createState() {
     setPanelOpen,
     setViewMode,
     setFullscreen,
+    setForceEmptyView,
 
     // Multi-tab
     openTab,
@@ -6541,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
 
@@ -7337,6 +7376,7 @@ function createArtifactuse(userConfig = {}) {
       state.setActiveArtifact(artifact.id);
     }
 
+    state.setForceEmptyView(false);
     state.setPanelOpen(true);
     if (artifact.viewMode) {
       state.setViewMode(artifact.viewMode);
@@ -7352,6 +7392,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 });
   }
 
@@ -7392,6 +7443,17 @@ function createArtifactuse(userConfig = {}) {
     return state.getArtifact(id);
   }
 
+  /**
+   * Open panel in empty state
+   */
+  function openPanel() {
+    state.clearActiveArtifact();
+    state.setForceEmptyView(true);
+    state.setPanelOpen(true);
+
+    emit('panel:opened');
+  }
+
   /**
    * Close panel
    */
@@ -7629,6 +7691,7 @@ function createArtifactuse(userConfig = {}) {
     openFile,
     openCode,
     updateFile,
+    openPanel,
     closePanel,
     togglePanel,
     toggleFullscreen,
@@ -7768,6 +7831,7 @@ function provideArtifactuse(config = {}) {
     isFullscreen: false,
     openTabs: [],
     tabViewModes: {},
+    forceEmptyView: false,
   });
 
   // Subscribe to state changes
@@ -7779,6 +7843,7 @@ function provideArtifactuse(config = {}) {
     state.isFullscreen = newState.isFullscreen;
     state.openTabs = newState.openTabs;
     state.tabViewModes = newState.tabViewModes;
+    state.forceEmptyView = newState.forceEmptyView;
   });
 
   // Computed
@@ -7822,6 +7887,7 @@ function provideArtifactuse(config = {}) {
     openFile: instance.openFile,
     openCode: instance.openCode,
     updateFile: instance.updateFile,
+    openPanel: instance.openPanel,
     closePanel: instance.closePanel,
     togglePanel: instance.togglePanel,
     toggleFullscreen: instance.toggleFullscreen,
@@ -7890,6 +7956,7 @@ function createArtifactuseComposable(config = {}) {
     isFullscreen: false,
     openTabs: [],
     tabViewModes: {},
+    forceEmptyView: false,
   });
 
   // Subscribe to state changes
@@ -7904,6 +7971,7 @@ function createArtifactuseComposable(config = {}) {
       state.isFullscreen = newState.isFullscreen;
       state.openTabs = newState.openTabs;
       state.tabViewModes = newState.tabViewModes;
+      state.forceEmptyView = newState.forceEmptyView;
     });
     
     // Apply theme
@@ -7952,6 +8020,7 @@ function createArtifactuseComposable(config = {}) {
     openFile: instance.openFile,
     openCode: instance.openCode,
     updateFile: instance.updateFile,
+    openPanel: instance.openPanel,
     closePanel: instance.closePanel,
     togglePanel: instance.togglePanel,
     toggleFullscreen: instance.toggleFullscreen,
@@ -27566,6 +27635,10 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27710,7 +27783,7 @@ var script$1 = defineComponent({
     
     // Effective panel width - smaller for list/empty views
     const effectivePanelWidth = computed(() => {
-      if (!activeArtifact.value) {
+      if (!activeArtifact.value && !state.forceEmptyView) {
         return Math.min(panelWidth.value, 30);
       }
       return panelWidth.value;
@@ -27719,11 +27792,13 @@ var script$1 = defineComponent({
     const panelClasses = computed(() => {
       return {
         'artifactuse-panel--fullscreen': state.isFullscreen,
-        'artifactuse-panel--list': !activeArtifact.value && hasArtifacts.value,
-        'artifactuse-panel--empty': !hasArtifacts.value,
+        'artifactuse-panel--list': !activeArtifact.value && hasArtifacts.value && !state.forceEmptyView,
+        'artifactuse-panel--empty': !hasArtifacts.value && !state.forceEmptyView,
       };
     });
-    
+
+    const forceEmptyView = computed(() => state.forceEmptyView);
+
     // Smartdiff: per-line language-aware highlighting
     function highlightSmartDiff(artifact) {
       if (artifact.language !== 'smartdiff') return null;
@@ -28382,6 +28457,7 @@ var script$1 = defineComponent({
       showBranding,
       effectivePanelWidth,
       panelClasses,
+      forceEmptyView,
       sharingEnabled,
       isAuthenticated,
       isEditorAvailable,
@@ -28472,7 +28548,7 @@ var __vue_render__$1 = function () {
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                !_vm.hasArtifacts
+                !_vm.hasArtifacts || _vm.forceEmptyView
                   ? [
                       _c(
                         "header",
@@ -28489,26 +28565,51 @@ var __vue_render__$1 = function () {
                                 "span",
                                 { staticClass: "artifactuse-panel__icon" },
                                 [
-                                  _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.forceEmptyView
+                                    ? _c(
+                                        "svg",
+                                        {
+                                          attrs: {
+                                            viewBox: "0 0 24 24",
+                                            fill: "none",
+                                            stroke: "currentColor",
+                                            "stroke-width": "2",
+                                          },
+                                        },
+                                        [
+                                          _c("path", {
+                                            attrs: {
+                                              d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z",
+                                            },
+                                          }),
+                                          _vm._v(" "),
+                                          _c("polyline", {
+                                            attrs: { points: "14 2 14 8 20 8" },
+                                          }),
+                                        ]
+                                      )
+                                    : _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._v(" "),
@@ -28522,7 +28623,15 @@ var __vue_render__$1 = function () {
                                   _c(
                                     "span",
                                     { staticClass: "artifactuse-panel__name" },
-                                    [_vm._v("Artifacts")]
+                                    [
+                                      _vm._v(
+                                        _vm._s(
+                                          _vm.forceEmptyView
+                                            ? "Artifact Viewer"
+                                            : "Artifacts"
+                                        )
+                                      ),
+                                    ]
                                   ),
                                 ]
                               ),
@@ -28612,7 +28721,15 @@ var __vue_render__$1 = function () {
                         _c(
                           "h3",
                           { staticClass: "artifactuse-panel__empty-title" },
-                          [_vm._v("No artifacts yet")]
+                          [
+                            _vm._v(
+                              _vm._s(
+                                _vm.forceEmptyView
+                                  ? "No artifact selected"
+                                  : "No artifacts yet"
+                              )
+                            ),
+                          ]
                         ),
                         _vm._v(" "),
                         _c(
@@ -28620,7 +28737,13 @@ var __vue_render__$1 = function () {
                           { staticClass: "artifactuse-panel__empty-text" },
                           [
                             _vm._v(
-                              "\n            Code blocks, forms, and other interactive content will appear here as the AI generates them.\n          "
+                              "\n            " +
+                                _vm._s(
+                                  _vm.forceEmptyView
+                                    ? "Open an artifact to have it appear here"
+                                    : "Code blocks, forms, and other interactive content will appear here as the AI generates them."
+                                ) +
+                                "\n          "
                             ),
                           ]
                         ),
@@ -28680,7 +28803,7 @@ var __vue_render__$1 = function () {
                         ]
                       ),
                     ]
-                  : !_vm.activeArtifact
+                  : !_vm.activeArtifact && !_vm.forceEmptyView
                   ? [
                       _c(
                         "header",

package/package.json

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