artifactuse 0.2.3 → 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>`;
 }
@@ -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
 
@@ -7369,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 });
   }
 

package/package.json

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