artifactuse 0.2.2 → 0.2.3

package/dist/vue2/composables.d.ts

@@ -42,6 +42,7 @@ export function provideArtifactuse(config?: {
                 isFullscreen: boolean;
                 openTabs: any[];
                 tabViewModes: {};
+                forceEmptyView: boolean;
             };
             subscribe: (callback: any) => () => void;
             addArtifact: (artifact: any) => void;
@@ -57,6 +58,7 @@ export function provideArtifactuse(config?: {
             setPanelOpen: (isOpen: any) => void;
             setViewMode: (mode: any) => void;
             setFullscreen: (isFullscreen: any) => void;
+            setForceEmptyView: (value: any) => void;
             openTab: (artifactId: any) => void;
             closeTab: (artifactId: any) => void;
             closeOtherTabs: (keepArtifactId: any) => void;
@@ -72,6 +74,7 @@ export function provideArtifactuse(config?: {
             isFullscreen: boolean;
             openTabs: any[];
             tabViewModes: {};
+            forceEmptyView: boolean;
         };
         subscribe: (callback: any) => () => void;
         processMessage: (content: any, messageId: any, overrides?: {}) => {
@@ -109,6 +112,7 @@ export function provideArtifactuse(config?: {
             createdAt: string;
         };
         updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+        openPanel: () => void;
         closePanel: () => void;
         togglePanel: () => void;
         toggleFullscreen: () => void;
@@ -190,6 +194,7 @@ export function provideArtifactuse(config?: {
         isFullscreen: boolean;
         openTabs: any[];
         tabViewModes: {};
+        forceEmptyView: boolean;
     };
     activeArtifact: import("vue").ComputedRef<any>;
     artifactCount: import("vue").ComputedRef<number>;
@@ -231,6 +236,7 @@ export function provideArtifactuse(config?: {
         createdAt: string;
     };
     updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+    openPanel: () => void;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -270,6 +276,7 @@ export function createArtifactuseComposable(config?: {}): {
                 isFullscreen: boolean;
                 openTabs: any[];
                 tabViewModes: {};
+                forceEmptyView: boolean;
             };
             subscribe: (callback: any) => () => void;
             addArtifact: (artifact: any) => void;
@@ -285,6 +292,7 @@ export function createArtifactuseComposable(config?: {}): {
             setPanelOpen: (isOpen: any) => void;
             setViewMode: (mode: any) => void;
             setFullscreen: (isFullscreen: any) => void;
+            setForceEmptyView: (value: any) => void;
             openTab: (artifactId: any) => void;
             closeTab: (artifactId: any) => void;
             closeOtherTabs: (keepArtifactId: any) => void;
@@ -300,6 +308,7 @@ export function createArtifactuseComposable(config?: {}): {
             isFullscreen: boolean;
             openTabs: any[];
             tabViewModes: {};
+            forceEmptyView: boolean;
         };
         subscribe: (callback: any) => () => void;
         processMessage: (content: any, messageId: any, overrides?: {}) => {
@@ -337,6 +346,7 @@ export function createArtifactuseComposable(config?: {}): {
             createdAt: string;
         };
         updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+        openPanel: () => void;
         closePanel: () => void;
         togglePanel: () => void;
         toggleFullscreen: () => void;
@@ -418,6 +428,7 @@ export function createArtifactuseComposable(config?: {}): {
         isFullscreen: boolean;
         openTabs: any[];
         tabViewModes: {};
+        forceEmptyView: boolean;
     };
     activeArtifact: import("vue").ComputedRef<any>;
     artifactCount: import("vue").ComputedRef<number>;
@@ -459,6 +470,7 @@ export function createArtifactuseComposable(config?: {}): {
         createdAt: string;
     };
     updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+    openPanel: () => void;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;

package/dist/vue2/index.js

@@ -897,6 +897,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 +1023,7 @@ function createState() {
       ...state,
       activeArtifactId: artifactId,
       viewMode,
+      forceEmptyView: false,
     };
 
     notify();
@@ -1086,6 +1089,17 @@ function createState() {
     notify();
   }
 
+  /**
+   * Set force empty view state
+   */
+  function setForceEmptyView(value) {
+    state = {
+      ...state,
+      forceEmptyView: !!value,
+    };
+    notify();
+  }
+
   /**
    * Get artifacts by message ID
    */
@@ -1218,6 +1232,7 @@ function createState() {
       isFullscreen: false,
       openTabs: [],
       tabViewModes: {},
+      forceEmptyView: false,
     };
 
     notify();
@@ -1275,6 +1290,7 @@ function createState() {
     setPanelOpen,
     setViewMode,
     setFullscreen,
+    setForceEmptyView,
 
     // Multi-tab
     openTab,
@@ -7337,6 +7353,7 @@ function createArtifactuse(userConfig = {}) {
       state.setActiveArtifact(artifact.id);
     }
 
+    state.setForceEmptyView(false);
     state.setPanelOpen(true);
     if (artifact.viewMode) {
       state.setViewMode(artifact.viewMode);
@@ -7392,6 +7409,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 +7657,7 @@ function createArtifactuse(userConfig = {}) {
     openFile,
     openCode,
     updateFile,
+    openPanel,
     closePanel,
     togglePanel,
     toggleFullscreen,
@@ -7768,6 +7797,7 @@ function provideArtifactuse(config = {}) {
     isFullscreen: false,
     openTabs: [],
     tabViewModes: {},
+    forceEmptyView: false,
   });
 
   // Subscribe to state changes
@@ -7779,6 +7809,7 @@ function provideArtifactuse(config = {}) {
     state.isFullscreen = newState.isFullscreen;
     state.openTabs = newState.openTabs;
     state.tabViewModes = newState.tabViewModes;
+    state.forceEmptyView = newState.forceEmptyView;
   });
 
   // Computed
@@ -7822,6 +7853,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 +7922,7 @@ function createArtifactuseComposable(config = {}) {
     isFullscreen: false,
     openTabs: [],
     tabViewModes: {},
+    forceEmptyView: false,
   });
 
   // Subscribe to state changes
@@ -7904,6 +7937,7 @@ function createArtifactuseComposable(config = {}) {
       state.isFullscreen = newState.isFullscreen;
       state.openTabs = newState.openTabs;
       state.tabViewModes = newState.tabViewModes;
+      state.forceEmptyView = newState.forceEmptyView;
     });
     
     // Apply theme
@@ -7952,6 +7986,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 +27601,10 @@ var JSZip = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 //
 //
 //
+//
+//
+//
+//
 
 
 var script$1 = defineComponent({
@@ -27710,7 +27749,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 +27758,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 +28423,7 @@ var script$1 = defineComponent({
       showBranding,
       effectivePanelWidth,
       panelClasses,
+      forceEmptyView,
       sharingEnabled,
       isAuthenticated,
       isEditorAvailable,
@@ -28472,7 +28514,7 @@ var __vue_render__$1 = function () {
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                !_vm.hasArtifacts
+                !_vm.hasArtifacts || _vm.forceEmptyView
                   ? [
                       _c(
                         "header",
@@ -28489,26 +28531,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 +28589,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 +28687,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 +28703,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 +28769,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.3",
   "type": "module",
   "description": "The Artifact SDK for AI Agents - Turn AI outputs into interactive experiences",
   "author": "Artifactuse",