artifactuse 0.3.1 → 0.4.0

package/dist/vue2/index.js

@@ -196,8 +196,24 @@ const PANEL_LANGUAGES = [
   'jsx', 'vue', 'html', 'htm',
   // Structured artifacts (form can be panel based on complexity)
   'form',
+  // Binary workspace files
+  'image', 'audio', 'pdf', 'font', 'binary',
 ];
 
+/**
+ * Maps each binary extension to its panel language group.
+ * Note: mp4/m4a/webm map to 'video'; svg maps to 'image' (not 'svg') for binary preview.
+ */
+const BINARY_EXT_LANGUAGE = {
+  png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image',
+  ico: 'image', bmp: 'image', tiff: 'image', tif: 'image', svg: 'image',
+  mp3: 'audio', wav: 'audio', ogg: 'audio', flac: 'audio', aac: 'audio',
+  mp4: 'video', m4a: 'video', webm: 'video',
+  pdf: 'pdf',
+  woff: 'font', woff2: 'font', ttf: 'font', eot: 'font', otf: 'font',
+  bin: 'binary',
+};
+
 /**
  * Generate unique artifact ID
  */
@@ -281,6 +297,12 @@ function getLanguageDisplayName(language) {
     // Structured artifacts
     form: 'Form',
     social: 'Social Preview',
+    // Binary workspace file types
+    image: 'Image',
+    audio: 'Audio',
+    pdf: 'PDF',
+    font: 'Font',
+    binary: 'Binary',
     txt: 'Plain Text',
     plaintext: 'Plain Text',
     text: 'Plain Text',
@@ -401,7 +423,8 @@ function getFileExtension$1(language) {
     nim: 'nim',
     v: 'v',
   };
-  return extensions[language?.toLowerCase()] || 'txt';
+  const lang = language?.toLowerCase();
+  return extensions[lang] || lang || 'txt';
 }
 
 /**
@@ -462,7 +485,8 @@ function getLanguageFromExtension(ext) {
     nim: 'nim',
     v: 'v',
   };
-  return map[ext?.toLowerCase()] || null;
+  const lower = ext?.toLowerCase();
+  return map[lower] || BINARY_EXT_LANGUAGE[lower] || null;
 }
 
 /**
@@ -560,6 +584,12 @@ function getLanguageIcon(language) {
     zig: '<path d="M2 6h7l-5 12h7l5-12h7l-5 12h7" fill="none" stroke="currentColor" stroke-width="1.5"/>',
     nim: '<path d="M12 2l3 5h5l-3 5 3 5h-5l-3 5-3-5H4l3-5-3-5h5l3-5z" fill="none" stroke="currentColor" stroke-width="1.2"/>',
     v: '<path d="M4 4l8 16 8-16" fill="none" stroke="currentColor" stroke-width="2"/>',
+    // Binary workspace file types
+    image: '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>',
+    audio: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
+    pdf: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M10 11h4M10 14h4M10 17h2"/>',
+    font: '<path d="M4 7V4h16v3M9 20h6M12 4v16"/>',
+    binary: '<path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M7 8v8M10 8v8M14 8h2v3h-2v2h2v3h-2M7.5 12h3"/>',
     // Text/document icon
     txt: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/>',
     plaintext: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/>',
@@ -6704,6 +6734,9 @@ function loadKaTeX() {
 // Main entry point for Artifactuse SDK
 
 
+// Binary categories render inside the panel component — no CDN panel URL needed.
+const BINARY_PANEL_LANGS = new Set(Object.values(BINARY_EXT_LANGUAGE));
+
 /**
  * Escape HTML for safe embedding in attributes/content
  */
@@ -7397,7 +7430,7 @@ function createArtifactuse(userConfig = {}) {
    * Open a file by name — auto-detects language from extension
    */
   function openFile(filename, code, options = {}) {
-    const ext = filename.split('.').pop();
+    const ext = filename.split('.').pop().toLowerCase();
     const language = options.language || getLanguageFromExtension(ext) || ext;
     const title = options.title || filename;
 
@@ -7411,7 +7444,7 @@ function createArtifactuse(userConfig = {}) {
       return state.getArtifact(existing.id);
     }
 
-    return openCode(code, language, { ...options, title });
+    return openCode(code, language, { ...options, title, fileExtension: ext });
   }
 
   /**
@@ -7419,11 +7452,12 @@ function createArtifactuse(userConfig = {}) {
    */
   function openCode(code, language, options = {}) {
     const msgId = options.messageId || generateArtifactId('open');
-    const resolvedLang = hasPanel({ type: language, language }) ? language : 'txt';
+    const resolvedLang = (hasPanel({ type: language, language }) || BINARY_PANEL_LANGS.has(language)) ? language : 'txt';
     const artifact = createArtifact(code, resolvedLang, msgId, 0);
     artifact.title = options.title || artifact.title;
     artifact.isInline = false;
     artifact.editorLanguage = language;
+    if (options.fileExtension) artifact.fileExtension = options.fileExtension;
     if (options.tabs) artifact.tabs = options.tabs;
     if (options.panelUrl) artifact.panelUrl = options.panelUrl;
     if (options.externalPreview !== undefined) artifact.externalPreview = options.externalPreview;
@@ -8203,7 +8237,7 @@ var script$6 = {
       const blob = new Blob([this.artifact.code], { type: 'text/plain' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
-      const extension = getFileExtension$1(this.artifact.language);
+      const extension = getFileExtension$1(this.artifact.editorLanguage || this.artifact.language);
       const filename = this.artifact.title?.replace(/[^a-z0-9]/gi, '_').toLowerCase() || 'code';
       a.href = url;
       a.download = `${filename}.${extension}`;
@@ -12208,6 +12242,50 @@ __vue_render__$2._withStripped = true;
     __vue_inject_styles__$2,
     __vue_script__$2);
 
+const MIME_MAP = {
+	png: 'image/png',
+	jpg: 'image/jpeg',
+	jpeg: 'image/jpeg',
+	gif: 'image/gif',
+	webp: 'image/webp',
+	ico: 'image/x-icon',
+	bmp: 'image/bmp',
+	tiff: 'image/tiff',
+	tif: 'image/tiff',
+	svg: 'image/svg+xml',
+	mp3: 'audio/mpeg',
+	wav: 'audio/wav',
+	ogg: 'audio/ogg',
+	flac: 'audio/flac',
+	aac: 'audio/aac',
+	mp4: 'video/mp4',
+	m4a: 'video/mp4',
+	webm: 'video/webm',
+	pdf: 'application/pdf',
+	woff: 'font/woff',
+	woff2: 'font/woff2',
+	ttf: 'font/ttf',
+	eot: 'application/vnd.ms-fontobject',
+	otf: 'font/otf',
+	bin: 'application/octet-stream',
+};
+
+function getMimeType(ext) {
+	return MIME_MAP[ext?.toLowerCase()] ?? 'application/octet-stream';
+}
+
+function base64ToObjectUrl(base64, mimeType) {
+	const bytes = atob(base64);
+	const arr = new Uint8Array(bytes.length);
+	for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
+	const blob = new Blob([arr], { type: mimeType });
+	return URL.createObjectURL(blob);
+}
+
+function revokeBlobUrl(url) {
+	if (url?.startsWith('blob:')) URL.revokeObjectURL(url);
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -27689,6 +27767,36 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27747,6 +27855,9 @@ var script$1 = defineComponent({
     const isTransitioning = ref(false);
     const cameFromList = ref(false);
     const isDownloadingAll = ref(false);
+    const BINARY_CATEGORIES = ['image', 'audio', 'video', 'pdf', 'font', 'binary'];
+    let blobUrlCache = {};
+    let fontStyleEl = null;
 
     // Share modal state
     const showShareModal = ref(false);
@@ -27828,6 +27939,54 @@ var script$1 = defineComponent({
       return instance.config?.branding !== false;
     });
 
+    const isBinaryArtifact = computed(() => {
+      return BINARY_CATEGORIES.includes(activeArtifact.value && activeArtifact.value.language);
+    });
+
+    const binaryCategory = computed(() => {
+      return isBinaryArtifact.value ? activeArtifact.value.language : null;
+    });
+
+    const fontPreviewName = computed(() => {
+      if (binaryCategory.value !== 'font' || !activeArtifact.value) return '';
+      return 'apfont_' + activeArtifact.value.id.replace(/[^a-zA-Z0-9]/g, '_');
+    });
+
+    const hexDump = computed(() => {
+      if (binaryCategory.value !== 'binary' || !(activeArtifact.value && activeArtifact.value.code)) return '';
+      try {
+        const raw = atob(activeArtifact.value.code.slice(0, 684));
+        const bytes = Math.min(raw.length, 512);
+        const lines = [];
+        for (let i = 0; i < bytes; i += 16) {
+          const chunk = raw.slice(i, i + 16);
+          const hex = Array.from(chunk).map(function(c) { return c.charCodeAt(0).toString(16).padStart(2, '0'); }).join(' ');
+          const ascii = Array.from(chunk).map(function(c) { const code = c.charCodeAt(0); return code >= 32 && code < 127 ? c : '.'; }).join('');
+          lines.push(i.toString(16).padStart(8, '0') + '  ' + hex.padEnd(47, ' ') + '  ' + ascii);
+        }
+        if (bytes < raw.length || activeArtifact.value.code.length > 684) lines.push('...');
+        return lines.join('\n');
+      } catch (e) {
+        return '(unable to decode)';
+      }
+    });
+
+    function getBlobUrl(artifact) {
+      if (!artifact || !artifact.code) return null;
+      if (blobUrlCache[artifact.id]) return blobUrlCache[artifact.id];
+      const ext = artifact.fileExtension || artifact.language;
+      const url = base64ToObjectUrl(artifact.code, getMimeType(ext));
+      blobUrlCache[artifact.id] = url;
+      return url;
+    }
+
+    function releaseBlobUrl(artifactId) {
+      if (blobUrlCache[artifactId]) {
+        revokeBlobUrl(blobUrlCache[artifactId]);
+        delete blobUrlCache[artifactId];
+      }
+    }
+
     const showExternalPreview = computed(() => {
       if (!panelUrl.value) return false;
       if (activeArtifact.value?.externalPreview !== undefined) return activeArtifact.value.externalPreview;
@@ -28045,8 +28204,8 @@ var script$1 = defineComponent({
     function handleDownload() {
       if (!activeArtifact.value) return;
       
-      const { code, language, title } = activeArtifact.value;
-      const extension = getFileExtension$1(language);
+      const { code, language, editorLanguage, title } = activeArtifact.value;
+      const extension = getFileExtension$1(editorLanguage || language);
       const filename = `${title.toLowerCase().replace(/\s+/g, '-')}.${extension}`;
       
       const blob = new Blob([code], { type: 'text/plain' });
@@ -28074,7 +28233,7 @@ var script$1 = defineComponent({
         for (const artifact of nonInlineArtifacts.value) {
           if (!artifact.code) continue;
           
-          const extension = getFileExtension$1(artifact.language);
+          const extension = getFileExtension$1(artifact.editorLanguage || artifact.language);
           let baseFilename = (artifact.title || 'untitled')
             .toLowerCase()
             .replace(/\s+/g, '-')
@@ -28282,6 +28441,7 @@ var script$1 = defineComponent({
     }
 
     function handleCloseTab(artifactId) {
+      releaseBlobUrl(artifactId);
       instance.closeTab(artifactId);
       if (state.openTabs.length === 0) {
         cameFromList.value = false;
@@ -28422,6 +28582,9 @@ var script$1 = defineComponent({
           resetCodeContainerStyles();
           iframeLoading.value = true;
           startIframeLoadTimeout();
+          if (BINARY_CATEGORIES.indexOf(newArtifact.language) !== -1 && state.viewMode !== 'preview') {
+            setViewMode('preview');
+          }
         }
 
         // Check if code changed
@@ -28510,6 +28673,18 @@ var script$1 = defineComponent({
       });
     });
     
+    watch([binaryCategory, fontPreviewName], function(vals) {
+      var cat = vals[0]; var name = vals[1];
+      if (fontStyleEl) { fontStyleEl.remove(); fontStyleEl = null; }
+      if (cat === 'font' && name && activeArtifact.value && activeArtifact.value.code) {
+        var ext = activeArtifact.value.fileExtension || 'ttf';
+        var mime = getMimeType(ext);
+        fontStyleEl = document.createElement('style');
+        fontStyleEl.textContent = '@font-face { font-family: "' + name + '"; src: url("data:' + mime + ';base64,' + activeArtifact.value.code + '"); }';
+        document.head.appendChild(fontStyleEl);
+      }
+    });
+
     onUnmounted(() => {
       stopPanelResize();
       stopSplitResize();
@@ -28518,6 +28693,8 @@ var script$1 = defineComponent({
       clearTimeout(streamEndTimer);
       clearTimeout(iframeLoadTimer);
       if (unsubConsole) unsubConsole();
+      if (fontStyleEl) { fontStyleEl.remove(); fontStyleEl = null; }
+      Object.keys(blobUrlCache).forEach(function(id) { releaseBlobUrl(id); });
     });
     
     return {
@@ -28625,6 +28802,11 @@ var script$1 = defineComponent({
       formatExpiryDate,
 
       // Utils
+      isBinaryArtifact,
+      binaryCategory,
+      fontPreviewName,
+      hexDump,
+      getBlobUrl,
       getLanguageDisplayName,
       formatBytes,
     };
@@ -29445,8 +29627,9 @@ var __vue_render__$1 = function () {
                                   )
                                 : _vm._e(),
                               _vm._v(" "),
-                              !_vm.activeArtifact.tabs ||
-                              _vm.activeArtifact.tabs.includes("code")
+                              (!_vm.activeArtifact.tabs ||
+                                _vm.activeArtifact.tabs.includes("code")) &&
+                              !_vm.isBinaryArtifact
                                 ? _c(
                                     "button",
                                     {
@@ -29489,8 +29672,9 @@ var __vue_render__$1 = function () {
                                   )
                                 : _vm._e(),
                               _vm._v(" "),
-                              !_vm.activeArtifact.tabs ||
-                              _vm.activeArtifact.tabs.includes("split")
+                              (!_vm.activeArtifact.tabs ||
+                                _vm.activeArtifact.tabs.includes("split")) &&
+                              !_vm.isBinaryArtifact
                                 ? _c(
                                     "button",
                                     {
@@ -29973,7 +30157,9 @@ var __vue_render__$1 = function () {
                                       : null,
                                 },
                                 [
-                                  _vm.iframeLoading && _vm.panelUrl
+                                  _vm.iframeLoading &&
+                                  _vm.panelUrl &&
+                                  !_vm.isBinaryArtifact
                                     ? _c(
                                         "div",
                                         {
@@ -29989,77 +30175,219 @@ var __vue_render__$1 = function () {
                                       )
                                     : _vm._e(),
                                   _vm._v(" "),
-                                  _vm.panelUrl
-                                    ? _c("iframe", {
-                                        ref: "iframeRef",
-                                        staticClass:
-                                          "artifactuse-panel__iframe",
-                                        class: {
-                                          "artifactuse-panel__iframe--loading":
-                                            _vm.iframeLoading,
-                                        },
-                                        attrs: {
-                                          src: _vm.panelUrl,
-                                          sandbox:
-                                            "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
-                                          allow:
-                                            "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write; encrypted-media; gyroscope; accelerometer; picture-in-picture",
-                                        },
-                                        on: {
-                                          load: _vm.handleIframeLoad,
-                                          error: _vm.handleIframeError,
-                                        },
-                                      })
-                                    : _c(
-                                        "div",
-                                        {
-                                          staticClass:
-                                            "artifactuse-panel__no-preview",
-                                        },
-                                        [
-                                          _c(
-                                            "svg",
-                                            {
+                                  _vm.isBinaryArtifact
+                                    ? [
+                                        _vm.binaryCategory === "image"
+                                          ? _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--image",
+                                              },
+                                              [
+                                                _c("img", {
+                                                  attrs: {
+                                                    src: _vm.getBlobUrl(
+                                                      _vm.activeArtifact
+                                                    ),
+                                                    alt: _vm.activeArtifact
+                                                      .title,
+                                                  },
+                                                }),
+                                              ]
+                                            )
+                                          : _vm.binaryCategory === "audio"
+                                          ? _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--audio",
+                                              },
+                                              [
+                                                _c("audio", {
+                                                  attrs: {
+                                                    controls: "",
+                                                    src: _vm.getBlobUrl(
+                                                      _vm.activeArtifact
+                                                    ),
+                                                  },
+                                                }),
+                                              ]
+                                            )
+                                          : _vm.binaryCategory === "video"
+                                          ? _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--video",
+                                              },
+                                              [
+                                                _c("video", {
+                                                  attrs: {
+                                                    controls: "",
+                                                    src: _vm.getBlobUrl(
+                                                      _vm.activeArtifact
+                                                    ),
+                                                  },
+                                                }),
+                                              ]
+                                            )
+                                          : _vm.binaryCategory === "pdf"
+                                          ? _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--pdf",
+                                              },
+                                              [
+                                                _c("iframe", {
+                                                  attrs: {
+                                                    src:
+                                                      _vm.getBlobUrl(
+                                                        _vm.activeArtifact
+                                                      ) + "#toolbar=1",
+                                                    frameborder: "0",
+                                                  },
+                                                }),
+                                              ]
+                                            )
+                                          : _vm.binaryCategory === "font"
+                                          ? _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--font",
+                                              },
+                                              [
+                                                _c(
+                                                  "div",
+                                                  {
+                                                    staticClass:
+                                                      "artifactuse-panel__font-sample",
+                                                    style: {
+                                                      fontFamily:
+                                                        _vm.fontPreviewName,
+                                                    },
+                                                  },
+                                                  [
+                                                    _vm._v(
+                                                      "\n                  AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n                "
+                                                    ),
+                                                  ]
+                                                ),
+                                                _vm._v(" "),
+                                                _c(
+                                                  "div",
+                                                  {
+                                                    staticClass:
+                                                      "artifactuse-panel__font-sample artifactuse-panel__font-sample--sm",
+                                                    style: {
+                                                      fontFamily:
+                                                        _vm.fontPreviewName,
+                                                    },
+                                                  },
+                                                  [
+                                                    _vm._v(
+                                                      "\n                  0123456789 !@#$%^&*()\n                "
+                                                    ),
+                                                  ]
+                                                ),
+                                              ]
+                                            )
+                                          : _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__binary artifactuse-panel__binary--hex",
+                                              },
+                                              [
+                                                _c(
+                                                  "pre",
+                                                  {
+                                                    staticClass:
+                                                      "artifactuse-panel__hex-dump",
+                                                  },
+                                                  [_vm._v(_vm._s(_vm.hexDump))]
+                                                ),
+                                              ]
+                                            ),
+                                      ]
+                                    : [
+                                        _vm.panelUrl
+                                          ? _c("iframe", {
+                                              ref: "iframeRef",
+                                              staticClass:
+                                                "artifactuse-panel__iframe",
+                                              class: {
+                                                "artifactuse-panel__iframe--loading":
+                                                  _vm.iframeLoading,
+                                              },
                                               attrs: {
-                                                viewBox: "0 0 24 24",
-                                                fill: "none",
-                                                stroke: "currentColor",
-                                                "stroke-width": "1.5",
+                                                src: _vm.panelUrl,
+                                                sandbox:
+                                                  "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
+                                                allow:
+                                                  "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write; encrypted-media; gyroscope; accelerometer; picture-in-picture",
                                               },
-                                            },
-                                            [
-                                              _c("path", {
-                                                attrs: {
-                                                  d: "M9 17H7A5 5 0 0 1 7 7h2",
-                                                },
-                                              }),
-                                              _vm._v(" "),
-                                              _c("path", {
-                                                attrs: {
-                                                  d: "M15 7h2a5 5 0 1 1 0 10h-2",
-                                                },
-                                              }),
-                                              _vm._v(" "),
-                                              _c("line", {
-                                                attrs: {
-                                                  x1: "8",
-                                                  y1: "12",
-                                                  x2: "16",
-                                                  y2: "12",
-                                                },
-                                              }),
-                                            ]
-                                          ),
-                                          _vm._v(" "),
-                                          _c("p", [
-                                            _vm._v(
-                                              "Preview not available for " +
-                                                _vm._s(_vm.languageDisplay)
+                                              on: {
+                                                load: _vm.handleIframeLoad,
+                                                error: _vm.handleIframeError,
+                                              },
+                                            })
+                                          : _c(
+                                              "div",
+                                              {
+                                                staticClass:
+                                                  "artifactuse-panel__no-preview",
+                                              },
+                                              [
+                                                _c(
+                                                  "svg",
+                                                  {
+                                                    attrs: {
+                                                      viewBox: "0 0 24 24",
+                                                      fill: "none",
+                                                      stroke: "currentColor",
+                                                      "stroke-width": "1.5",
+                                                    },
+                                                  },
+                                                  [
+                                                    _c("path", {
+                                                      attrs: {
+                                                        d: "M9 17H7A5 5 0 0 1 7 7h2",
+                                                      },
+                                                    }),
+                                                    _vm._v(" "),
+                                                    _c("path", {
+                                                      attrs: {
+                                                        d: "M15 7h2a5 5 0 1 1 0 10h-2",
+                                                      },
+                                                    }),
+                                                    _vm._v(" "),
+                                                    _c("line", {
+                                                      attrs: {
+                                                        x1: "8",
+                                                        y1: "12",
+                                                        x2: "16",
+                                                        y2: "12",
+                                                      },
+                                                    }),
+                                                  ]
+                                                ),
+                                                _vm._v(" "),
+                                                _c("p", [
+                                                  _vm._v(
+                                                    "Preview not available for " +
+                                                      _vm._s(
+                                                        _vm.languageDisplay
+                                                      )
+                                                  ),
+                                                ]),
+                                              ]
                                             ),
-                                          ]),
-                                        ]
-                                      ),
-                                ]
+                                      ],
+                                ],
+                                2
                               )
                             : _vm._e(),
                           _vm._v(" "),