artifactuse 0.2.4 → 0.2.6

package/dist/vue2/index.js

@@ -6862,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,
 
@@ -7418,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);
@@ -7437,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) });
@@ -27639,6 +27645,18 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27658,6 +27676,10 @@ var script$1 = defineComponent({
       type: Number,
       default: undefined,
     },
+    externalPreview: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   
   setup(props, { emit }) {
@@ -27763,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);
 
@@ -27912,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;
@@ -28455,6 +28488,7 @@ var script$1 = defineComponent({
       nonInlineArtifacts,
       currentNonInlineIndex,
       showBranding,
+      showExternalPreview,
       effectivePanelWidth,
       panelClasses,
       forceEmptyView,
@@ -28479,6 +28513,7 @@ var script$1 = defineComponent({
       startPanelResize,
       startSplitResize,
       handleEditorSave,
+      handleExternalPreview,
 
       // Multi-tab methods
       selectTab,
@@ -29514,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",
                                 {
@@ -29832,7 +29911,7 @@ var __vue_render__$1 = function () {
                                           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",
+                                            "camera; microphone; fullscreen; geolocation; display-capture; autoplay; clipboard-write; encrypted-media; gyroscope; accelerometer; picture-in-picture",
                                         },
                                         on: {
                                           load: _vm.handleIframeLoad,

package/package.json

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