artifactuse 0.3.2 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -196,8 +196,24 @@ const PANEL_LANGUAGES = [
196
196
  'jsx', 'vue', 'html', 'htm',
197
197
  // Structured artifacts (form can be panel based on complexity)
198
198
  'form',
199
+ // Binary workspace files
200
+ 'image', 'audio', 'pdf', 'font', 'binary',
199
201
  ];
200
202
 
203
+ /**
204
+ * Maps each binary extension to its panel language group.
205
+ * Note: mp4/m4a/webm map to 'video'; svg maps to 'image' (not 'svg') for binary preview.
206
+ */
207
+ const BINARY_EXT_LANGUAGE = {
208
+ png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image',
209
+ ico: 'image', bmp: 'image', tiff: 'image', tif: 'image', svg: 'image',
210
+ mp3: 'audio', wav: 'audio', ogg: 'audio', flac: 'audio', aac: 'audio',
211
+ mp4: 'video', m4a: 'video', webm: 'video',
212
+ pdf: 'pdf',
213
+ woff: 'font', woff2: 'font', ttf: 'font', eot: 'font', otf: 'font',
214
+ bin: 'binary',
215
+ };
216
+
201
217
  /**
202
218
  * Generate unique artifact ID
203
219
  */
@@ -281,6 +297,12 @@ function getLanguageDisplayName(language) {
281
297
  // Structured artifacts
282
298
  form: 'Form',
283
299
  social: 'Social Preview',
300
+ // Binary workspace file types
301
+ image: 'Image',
302
+ audio: 'Audio',
303
+ pdf: 'PDF',
304
+ font: 'Font',
305
+ binary: 'Binary',
284
306
  txt: 'Plain Text',
285
307
  plaintext: 'Plain Text',
286
308
  text: 'Plain Text',
@@ -463,7 +485,8 @@ function getLanguageFromExtension(ext) {
463
485
  nim: 'nim',
464
486
  v: 'v',
465
487
  };
466
- return map[ext?.toLowerCase()] || null;
488
+ const lower = ext?.toLowerCase();
489
+ return map[lower] || BINARY_EXT_LANGUAGE[lower] || null;
467
490
  }
468
491
 
469
492
  /**
@@ -561,6 +584,12 @@ function getLanguageIcon(language) {
561
584
  zig: '<path d="M2 6h7l-5 12h7l5-12h7l-5 12h7" fill="none" stroke="currentColor" stroke-width="1.5"/>',
562
585
  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"/>',
563
586
  v: '<path d="M4 4l8 16 8-16" fill="none" stroke="currentColor" stroke-width="2"/>',
587
+ // Binary workspace file types
588
+ 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"/>',
589
+ audio: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
590
+ 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"/>',
591
+ font: '<path d="M4 7V4h16v3M9 20h6M12 4v16"/>',
592
+ 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"/>',
564
593
  // Text/document icon
565
594
  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"/>',
566
595
  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"/>',
@@ -2964,12 +2993,27 @@ function processImages(html) {
2964
2993
  'gi'
2965
2994
  );
2966
2995
  html = html.replace(imageLinkRegex, (match, imageUrl, linkText) => {
2967
- const meaningfulText = linkText && !linkText.match(/^(view|see|open|click|image|photo|picture)$/i)
2968
- ? linkText
2996
+ const meaningfulText = linkText &&
2997
+ !linkText.match(/^(view|see|open|click|image|photo|picture)$/i) &&
2998
+ !linkText.match(/^https?:\/\//i)
2999
+ ? linkText
2969
3000
  : '';
2970
3001
  return renderImageHtml(imageUrl, meaningfulText, meaningfulText);
2971
3002
  });
2972
3003
 
3004
+ // Re-protect any new <img> tags and containers created by the linkified URL step above,
3005
+ // so the raw URL regex below cannot double-process URLs inside caption divs.
3006
+ html = html.replace(/<img[^>]*>/gi, (match) => {
3007
+ const placeholder = `__IMG_PROTECTED_${protectedContent.length}__`;
3008
+ protectedContent.push(match);
3009
+ return placeholder;
3010
+ });
3011
+ html = html.replace(/<div class="artifactuse-image-container">[\s\S]*?<\/div>\s*<\/div>/gi, (match) => {
3012
+ const placeholder = `__IMG_PROTECTED_${protectedContent.length}__`;
3013
+ protectedContent.push(match);
3014
+ return placeholder;
3015
+ });
3016
+
2973
3017
  // Process raw image URLs (not already in tags)
2974
3018
  const rawImageRegex = new RegExp(
2975
3019
  `(?<!["'=])(https?:\\/\\/[^\\s<>"]+\\.(?:${extPattern})(\\?[^\\s<>"]*)?)(?!["'])`,
@@ -6705,6 +6749,9 @@ function loadKaTeX() {
6705
6749
  // Main entry point for Artifactuse SDK
6706
6750
 
6707
6751
 
6752
+ // Binary categories render inside the panel component — no CDN panel URL needed.
6753
+ const BINARY_PANEL_LANGS = new Set(Object.values(BINARY_EXT_LANGUAGE));
6754
+
6708
6755
  /**
6709
6756
  * Escape HTML for safe embedding in attributes/content
6710
6757
  */
@@ -7398,7 +7445,7 @@ function createArtifactuse(userConfig = {}) {
7398
7445
  * Open a file by name — auto-detects language from extension
7399
7446
  */
7400
7447
  function openFile(filename, code, options = {}) {
7401
- const ext = filename.split('.').pop();
7448
+ const ext = filename.split('.').pop().toLowerCase();
7402
7449
  const language = options.language || getLanguageFromExtension(ext) || ext;
7403
7450
  const title = options.title || filename;
7404
7451
 
@@ -7412,7 +7459,7 @@ function createArtifactuse(userConfig = {}) {
7412
7459
  return state.getArtifact(existing.id);
7413
7460
  }
7414
7461
 
7415
- return openCode(code, language, { ...options, title });
7462
+ return openCode(code, language, { ...options, title, fileExtension: ext });
7416
7463
  }
7417
7464
 
7418
7465
  /**
@@ -7420,11 +7467,12 @@ function createArtifactuse(userConfig = {}) {
7420
7467
  */
7421
7468
  function openCode(code, language, options = {}) {
7422
7469
  const msgId = options.messageId || generateArtifactId('open');
7423
- const resolvedLang = hasPanel({ type: language, language }) ? language : 'txt';
7470
+ const resolvedLang = (hasPanel({ type: language, language }) || BINARY_PANEL_LANGS.has(language)) ? language : 'txt';
7424
7471
  const artifact = createArtifact(code, resolvedLang, msgId, 0);
7425
7472
  artifact.title = options.title || artifact.title;
7426
7473
  artifact.isInline = false;
7427
7474
  artifact.editorLanguage = language;
7475
+ if (options.fileExtension) artifact.fileExtension = options.fileExtension;
7428
7476
  if (options.tabs) artifact.tabs = options.tabs;
7429
7477
  if (options.panelUrl) artifact.panelUrl = options.panelUrl;
7430
7478
  if (options.externalPreview !== undefined) artifact.externalPreview = options.externalPreview;
@@ -12209,6 +12257,50 @@ __vue_render__$2._withStripped = true;
12209
12257
  __vue_inject_styles__$2,
12210
12258
  __vue_script__$2);
12211
12259
 
12260
+ const MIME_MAP = {
12261
+ png: 'image/png',
12262
+ jpg: 'image/jpeg',
12263
+ jpeg: 'image/jpeg',
12264
+ gif: 'image/gif',
12265
+ webp: 'image/webp',
12266
+ ico: 'image/x-icon',
12267
+ bmp: 'image/bmp',
12268
+ tiff: 'image/tiff',
12269
+ tif: 'image/tiff',
12270
+ svg: 'image/svg+xml',
12271
+ mp3: 'audio/mpeg',
12272
+ wav: 'audio/wav',
12273
+ ogg: 'audio/ogg',
12274
+ flac: 'audio/flac',
12275
+ aac: 'audio/aac',
12276
+ mp4: 'video/mp4',
12277
+ m4a: 'video/mp4',
12278
+ webm: 'video/webm',
12279
+ pdf: 'application/pdf',
12280
+ woff: 'font/woff',
12281
+ woff2: 'font/woff2',
12282
+ ttf: 'font/ttf',
12283
+ eot: 'application/vnd.ms-fontobject',
12284
+ otf: 'font/otf',
12285
+ bin: 'application/octet-stream',
12286
+ };
12287
+
12288
+ function getMimeType(ext) {
12289
+ return MIME_MAP[ext?.toLowerCase()] ?? 'application/octet-stream';
12290
+ }
12291
+
12292
+ function base64ToObjectUrl(base64, mimeType) {
12293
+ const bytes = atob(base64);
12294
+ const arr = new Uint8Array(bytes.length);
12295
+ for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
12296
+ const blob = new Blob([arr], { type: mimeType });
12297
+ return URL.createObjectURL(blob);
12298
+ }
12299
+
12300
+ function revokeBlobUrl(url) {
12301
+ if (url?.startsWith('blob:')) URL.revokeObjectURL(url);
12302
+ }
12303
+
12212
12304
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
12213
12305
 
12214
12306
  function getDefaultExportFromCjs (x) {
@@ -27690,6 +27782,36 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
27690
27782
  //
27691
27783
  //
27692
27784
  //
27785
+ //
27786
+ //
27787
+ //
27788
+ //
27789
+ //
27790
+ //
27791
+ //
27792
+ //
27793
+ //
27794
+ //
27795
+ //
27796
+ //
27797
+ //
27798
+ //
27799
+ //
27800
+ //
27801
+ //
27802
+ //
27803
+ //
27804
+ //
27805
+ //
27806
+ //
27807
+ //
27808
+ //
27809
+ //
27810
+ //
27811
+ //
27812
+ //
27813
+ //
27814
+ //
27693
27815
 
27694
27816
 
27695
27817
  var script$1 = defineComponent({
@@ -27748,6 +27870,9 @@ var script$1 = defineComponent({
27748
27870
  const isTransitioning = ref(false);
27749
27871
  const cameFromList = ref(false);
27750
27872
  const isDownloadingAll = ref(false);
27873
+ const BINARY_CATEGORIES = ['image', 'audio', 'video', 'pdf', 'font', 'binary'];
27874
+ let blobUrlCache = {};
27875
+ let fontStyleEl = null;
27751
27876
 
27752
27877
  // Share modal state
27753
27878
  const showShareModal = ref(false);
@@ -27829,6 +27954,54 @@ var script$1 = defineComponent({
27829
27954
  return instance.config?.branding !== false;
27830
27955
  });
27831
27956
 
27957
+ const isBinaryArtifact = computed(() => {
27958
+ return BINARY_CATEGORIES.includes(activeArtifact.value && activeArtifact.value.language);
27959
+ });
27960
+
27961
+ const binaryCategory = computed(() => {
27962
+ return isBinaryArtifact.value ? activeArtifact.value.language : null;
27963
+ });
27964
+
27965
+ const fontPreviewName = computed(() => {
27966
+ if (binaryCategory.value !== 'font' || !activeArtifact.value) return '';
27967
+ return 'apfont_' + activeArtifact.value.id.replace(/[^a-zA-Z0-9]/g, '_');
27968
+ });
27969
+
27970
+ const hexDump = computed(() => {
27971
+ if (binaryCategory.value !== 'binary' || !(activeArtifact.value && activeArtifact.value.code)) return '';
27972
+ try {
27973
+ const raw = atob(activeArtifact.value.code.slice(0, 684));
27974
+ const bytes = Math.min(raw.length, 512);
27975
+ const lines = [];
27976
+ for (let i = 0; i < bytes; i += 16) {
27977
+ const chunk = raw.slice(i, i + 16);
27978
+ const hex = Array.from(chunk).map(function(c) { return c.charCodeAt(0).toString(16).padStart(2, '0'); }).join(' ');
27979
+ const ascii = Array.from(chunk).map(function(c) { const code = c.charCodeAt(0); return code >= 32 && code < 127 ? c : '.'; }).join('');
27980
+ lines.push(i.toString(16).padStart(8, '0') + ' ' + hex.padEnd(47, ' ') + ' ' + ascii);
27981
+ }
27982
+ if (bytes < raw.length || activeArtifact.value.code.length > 684) lines.push('...');
27983
+ return lines.join('\n');
27984
+ } catch (e) {
27985
+ return '(unable to decode)';
27986
+ }
27987
+ });
27988
+
27989
+ function getBlobUrl(artifact) {
27990
+ if (!artifact || !artifact.code) return null;
27991
+ if (blobUrlCache[artifact.id]) return blobUrlCache[artifact.id];
27992
+ const ext = artifact.fileExtension || artifact.language;
27993
+ const url = base64ToObjectUrl(artifact.code, getMimeType(ext));
27994
+ blobUrlCache[artifact.id] = url;
27995
+ return url;
27996
+ }
27997
+
27998
+ function releaseBlobUrl(artifactId) {
27999
+ if (blobUrlCache[artifactId]) {
28000
+ revokeBlobUrl(blobUrlCache[artifactId]);
28001
+ delete blobUrlCache[artifactId];
28002
+ }
28003
+ }
28004
+
27832
28005
  const showExternalPreview = computed(() => {
27833
28006
  if (!panelUrl.value) return false;
27834
28007
  if (activeArtifact.value?.externalPreview !== undefined) return activeArtifact.value.externalPreview;
@@ -28283,6 +28456,7 @@ var script$1 = defineComponent({
28283
28456
  }
28284
28457
 
28285
28458
  function handleCloseTab(artifactId) {
28459
+ releaseBlobUrl(artifactId);
28286
28460
  instance.closeTab(artifactId);
28287
28461
  if (state.openTabs.length === 0) {
28288
28462
  cameFromList.value = false;
@@ -28423,6 +28597,9 @@ var script$1 = defineComponent({
28423
28597
  resetCodeContainerStyles();
28424
28598
  iframeLoading.value = true;
28425
28599
  startIframeLoadTimeout();
28600
+ if (BINARY_CATEGORIES.indexOf(newArtifact.language) !== -1 && state.viewMode !== 'preview') {
28601
+ setViewMode('preview');
28602
+ }
28426
28603
  }
28427
28604
 
28428
28605
  // Check if code changed
@@ -28511,6 +28688,18 @@ var script$1 = defineComponent({
28511
28688
  });
28512
28689
  });
28513
28690
 
28691
+ watch([binaryCategory, fontPreviewName], function(vals) {
28692
+ var cat = vals[0]; var name = vals[1];
28693
+ if (fontStyleEl) { fontStyleEl.remove(); fontStyleEl = null; }
28694
+ if (cat === 'font' && name && activeArtifact.value && activeArtifact.value.code) {
28695
+ var ext = activeArtifact.value.fileExtension || 'ttf';
28696
+ var mime = getMimeType(ext);
28697
+ fontStyleEl = document.createElement('style');
28698
+ fontStyleEl.textContent = '@font-face { font-family: "' + name + '"; src: url("data:' + mime + ';base64,' + activeArtifact.value.code + '"); }';
28699
+ document.head.appendChild(fontStyleEl);
28700
+ }
28701
+ });
28702
+
28514
28703
  onUnmounted(() => {
28515
28704
  stopPanelResize();
28516
28705
  stopSplitResize();
@@ -28519,6 +28708,8 @@ var script$1 = defineComponent({
28519
28708
  clearTimeout(streamEndTimer);
28520
28709
  clearTimeout(iframeLoadTimer);
28521
28710
  if (unsubConsole) unsubConsole();
28711
+ if (fontStyleEl) { fontStyleEl.remove(); fontStyleEl = null; }
28712
+ Object.keys(blobUrlCache).forEach(function(id) { releaseBlobUrl(id); });
28522
28713
  });
28523
28714
 
28524
28715
  return {
@@ -28626,6 +28817,11 @@ var script$1 = defineComponent({
28626
28817
  formatExpiryDate,
28627
28818
 
28628
28819
  // Utils
28820
+ isBinaryArtifact,
28821
+ binaryCategory,
28822
+ fontPreviewName,
28823
+ hexDump,
28824
+ getBlobUrl,
28629
28825
  getLanguageDisplayName,
28630
28826
  formatBytes,
28631
28827
  };
@@ -29446,8 +29642,9 @@ var __vue_render__$1 = function () {
29446
29642
  )
29447
29643
  : _vm._e(),
29448
29644
  _vm._v(" "),
29449
- !_vm.activeArtifact.tabs ||
29450
- _vm.activeArtifact.tabs.includes("code")
29645
+ (!_vm.activeArtifact.tabs ||
29646
+ _vm.activeArtifact.tabs.includes("code")) &&
29647
+ !_vm.isBinaryArtifact
29451
29648
  ? _c(
29452
29649
  "button",
29453
29650
  {
@@ -29490,8 +29687,9 @@ var __vue_render__$1 = function () {
29490
29687
  )
29491
29688
  : _vm._e(),
29492
29689
  _vm._v(" "),
29493
- !_vm.activeArtifact.tabs ||
29494
- _vm.activeArtifact.tabs.includes("split")
29690
+ (!_vm.activeArtifact.tabs ||
29691
+ _vm.activeArtifact.tabs.includes("split")) &&
29692
+ !_vm.isBinaryArtifact
29495
29693
  ? _c(
29496
29694
  "button",
29497
29695
  {
@@ -29974,7 +30172,9 @@ var __vue_render__$1 = function () {
29974
30172
  : null,
29975
30173
  },
29976
30174
  [
29977
- _vm.iframeLoading && _vm.panelUrl
30175
+ _vm.iframeLoading &&
30176
+ _vm.panelUrl &&
30177
+ !_vm.isBinaryArtifact
29978
30178
  ? _c(
29979
30179
  "div",
29980
30180
  {
@@ -29990,77 +30190,219 @@ var __vue_render__$1 = function () {
29990
30190
  )
29991
30191
  : _vm._e(),
29992
30192
  _vm._v(" "),
29993
- _vm.panelUrl
29994
- ? _c("iframe", {
29995
- ref: "iframeRef",
29996
- staticClass:
29997
- "artifactuse-panel__iframe",
29998
- class: {
29999
- "artifactuse-panel__iframe--loading":
30000
- _vm.iframeLoading,
30001
- },
30002
- attrs: {
30003
- src: _vm.panelUrl,
30004
- sandbox:
30005
- "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
30006
- allow:
30007
- "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write; encrypted-media; gyroscope; accelerometer; picture-in-picture",
30008
- },
30009
- on: {
30010
- load: _vm.handleIframeLoad,
30011
- error: _vm.handleIframeError,
30012
- },
30013
- })
30014
- : _c(
30015
- "div",
30016
- {
30017
- staticClass:
30018
- "artifactuse-panel__no-preview",
30019
- },
30020
- [
30021
- _c(
30022
- "svg",
30023
- {
30193
+ _vm.isBinaryArtifact
30194
+ ? [
30195
+ _vm.binaryCategory === "image"
30196
+ ? _c(
30197
+ "div",
30198
+ {
30199
+ staticClass:
30200
+ "artifactuse-panel__binary artifactuse-panel__binary--image",
30201
+ },
30202
+ [
30203
+ _c("img", {
30204
+ attrs: {
30205
+ src: _vm.getBlobUrl(
30206
+ _vm.activeArtifact
30207
+ ),
30208
+ alt: _vm.activeArtifact
30209
+ .title,
30210
+ },
30211
+ }),
30212
+ ]
30213
+ )
30214
+ : _vm.binaryCategory === "audio"
30215
+ ? _c(
30216
+ "div",
30217
+ {
30218
+ staticClass:
30219
+ "artifactuse-panel__binary artifactuse-panel__binary--audio",
30220
+ },
30221
+ [
30222
+ _c("audio", {
30223
+ attrs: {
30224
+ controls: "",
30225
+ src: _vm.getBlobUrl(
30226
+ _vm.activeArtifact
30227
+ ),
30228
+ },
30229
+ }),
30230
+ ]
30231
+ )
30232
+ : _vm.binaryCategory === "video"
30233
+ ? _c(
30234
+ "div",
30235
+ {
30236
+ staticClass:
30237
+ "artifactuse-panel__binary artifactuse-panel__binary--video",
30238
+ },
30239
+ [
30240
+ _c("video", {
30241
+ attrs: {
30242
+ controls: "",
30243
+ src: _vm.getBlobUrl(
30244
+ _vm.activeArtifact
30245
+ ),
30246
+ },
30247
+ }),
30248
+ ]
30249
+ )
30250
+ : _vm.binaryCategory === "pdf"
30251
+ ? _c(
30252
+ "div",
30253
+ {
30254
+ staticClass:
30255
+ "artifactuse-panel__binary artifactuse-panel__binary--pdf",
30256
+ },
30257
+ [
30258
+ _c("iframe", {
30259
+ attrs: {
30260
+ src:
30261
+ _vm.getBlobUrl(
30262
+ _vm.activeArtifact
30263
+ ) + "#toolbar=1",
30264
+ frameborder: "0",
30265
+ },
30266
+ }),
30267
+ ]
30268
+ )
30269
+ : _vm.binaryCategory === "font"
30270
+ ? _c(
30271
+ "div",
30272
+ {
30273
+ staticClass:
30274
+ "artifactuse-panel__binary artifactuse-panel__binary--font",
30275
+ },
30276
+ [
30277
+ _c(
30278
+ "div",
30279
+ {
30280
+ staticClass:
30281
+ "artifactuse-panel__font-sample",
30282
+ style: {
30283
+ fontFamily:
30284
+ _vm.fontPreviewName,
30285
+ },
30286
+ },
30287
+ [
30288
+ _vm._v(
30289
+ "\n AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz\n "
30290
+ ),
30291
+ ]
30292
+ ),
30293
+ _vm._v(" "),
30294
+ _c(
30295
+ "div",
30296
+ {
30297
+ staticClass:
30298
+ "artifactuse-panel__font-sample artifactuse-panel__font-sample--sm",
30299
+ style: {
30300
+ fontFamily:
30301
+ _vm.fontPreviewName,
30302
+ },
30303
+ },
30304
+ [
30305
+ _vm._v(
30306
+ "\n 0123456789 !@#$%^&*()\n "
30307
+ ),
30308
+ ]
30309
+ ),
30310
+ ]
30311
+ )
30312
+ : _c(
30313
+ "div",
30314
+ {
30315
+ staticClass:
30316
+ "artifactuse-panel__binary artifactuse-panel__binary--hex",
30317
+ },
30318
+ [
30319
+ _c(
30320
+ "pre",
30321
+ {
30322
+ staticClass:
30323
+ "artifactuse-panel__hex-dump",
30324
+ },
30325
+ [_vm._v(_vm._s(_vm.hexDump))]
30326
+ ),
30327
+ ]
30328
+ ),
30329
+ ]
30330
+ : [
30331
+ _vm.panelUrl
30332
+ ? _c("iframe", {
30333
+ ref: "iframeRef",
30334
+ staticClass:
30335
+ "artifactuse-panel__iframe",
30336
+ class: {
30337
+ "artifactuse-panel__iframe--loading":
30338
+ _vm.iframeLoading,
30339
+ },
30024
30340
  attrs: {
30025
- viewBox: "0 0 24 24",
30026
- fill: "none",
30027
- stroke: "currentColor",
30028
- "stroke-width": "1.5",
30341
+ src: _vm.panelUrl,
30342
+ sandbox:
30343
+ "allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads allow-top-navigation-by-user-activation",
30344
+ allow:
30345
+ "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write; encrypted-media; gyroscope; accelerometer; picture-in-picture",
30029
30346
  },
30030
- },
30031
- [
30032
- _c("path", {
30033
- attrs: {
30034
- d: "M9 17H7A5 5 0 0 1 7 7h2",
30035
- },
30036
- }),
30037
- _vm._v(" "),
30038
- _c("path", {
30039
- attrs: {
30040
- d: "M15 7h2a5 5 0 1 1 0 10h-2",
30041
- },
30042
- }),
30043
- _vm._v(" "),
30044
- _c("line", {
30045
- attrs: {
30046
- x1: "8",
30047
- y1: "12",
30048
- x2: "16",
30049
- y2: "12",
30050
- },
30051
- }),
30052
- ]
30053
- ),
30054
- _vm._v(" "),
30055
- _c("p", [
30056
- _vm._v(
30057
- "Preview not available for " +
30058
- _vm._s(_vm.languageDisplay)
30347
+ on: {
30348
+ load: _vm.handleIframeLoad,
30349
+ error: _vm.handleIframeError,
30350
+ },
30351
+ })
30352
+ : _c(
30353
+ "div",
30354
+ {
30355
+ staticClass:
30356
+ "artifactuse-panel__no-preview",
30357
+ },
30358
+ [
30359
+ _c(
30360
+ "svg",
30361
+ {
30362
+ attrs: {
30363
+ viewBox: "0 0 24 24",
30364
+ fill: "none",
30365
+ stroke: "currentColor",
30366
+ "stroke-width": "1.5",
30367
+ },
30368
+ },
30369
+ [
30370
+ _c("path", {
30371
+ attrs: {
30372
+ d: "M9 17H7A5 5 0 0 1 7 7h2",
30373
+ },
30374
+ }),
30375
+ _vm._v(" "),
30376
+ _c("path", {
30377
+ attrs: {
30378
+ d: "M15 7h2a5 5 0 1 1 0 10h-2",
30379
+ },
30380
+ }),
30381
+ _vm._v(" "),
30382
+ _c("line", {
30383
+ attrs: {
30384
+ x1: "8",
30385
+ y1: "12",
30386
+ x2: "16",
30387
+ y2: "12",
30388
+ },
30389
+ }),
30390
+ ]
30391
+ ),
30392
+ _vm._v(" "),
30393
+ _c("p", [
30394
+ _vm._v(
30395
+ "Preview not available for " +
30396
+ _vm._s(
30397
+ _vm.languageDisplay
30398
+ )
30399
+ ),
30400
+ ]),
30401
+ ]
30059
30402
  ),
30060
- ]),
30061
- ]
30062
- ),
30063
- ]
30403
+ ],
30404
+ ],
30405
+ 2
30064
30406
  )
30065
30407
  : _vm._e(),
30066
30408
  _vm._v(" "),