artifactuse 0.2.0 → 0.2.3

package/dist/styles/components/panel.css

@@ -772,6 +772,112 @@
   background: rgba(var(--artifactuse-success), 0.1);
 }
 
+/* File tabs (multi-tab mode) */
+.artifactuse-panel__file-tabs {
+  display: flex;
+  border-bottom: 1px solid rgba(var(--artifactuse-border), 1);
+  background: rgba(var(--artifactuse-bg-secondary), 1);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.artifactuse-panel__file-tabs-scroll {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.artifactuse-panel__file-tabs-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.artifactuse-panel__file-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 6px 12px;
+  border: none;
+  border-right: 1px solid rgba(var(--artifactuse-border), 0.5);
+  background: transparent;
+  color: rgba(var(--artifactuse-text-secondary), 1);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: auto;
+  max-width: 160px;
+  transition: background 0.15s, color 0.15s;
+  position: relative;
+}
+
+.artifactuse-panel__file-tab:hover {
+  background: rgba(var(--artifactuse-bg-tertiary), 1);
+  color: rgba(var(--artifactuse-text), 1);
+}
+
+.artifactuse-panel__file-tab--active {
+  background: rgba(var(--artifactuse-bg), 1);
+  color: rgba(var(--artifactuse-text), 1);
+}
+
+.artifactuse-panel__file-tab--active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: rgba(var(--artifactuse-primary), 1);
+}
+
+.artifactuse-panel__file-tab-icon {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+
+.artifactuse-panel__file-tab-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.artifactuse-panel__file-tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.artifactuse-panel__file-tab-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: rgba(var(--artifactuse-text-muted), 1);
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.artifactuse-panel__file-tab:hover .artifactuse-panel__file-tab-close,
+.artifactuse-panel__file-tab--active .artifactuse-panel__file-tab-close {
+  opacity: 1;
+}
+
+.artifactuse-panel__file-tab-close:hover {
+  background: rgba(var(--artifactuse-border), 1);
+  color: rgba(var(--artifactuse-text), 1);
+}
+
+.artifactuse-panel__file-tab-close svg {
+  width: 12px;
+  height: 12px;
+}
+
 /* Navigation */
 .artifactuse-panel__nav {
   position: relative;

package/dist/svelte/index.d.ts

@@ -40,6 +40,9 @@ export function createArtifactuseStores(config?: {
                 isPanelOpen: boolean;
                 viewMode: string;
                 isFullscreen: boolean;
+                openTabs: any[];
+                tabViewModes: {};
+                forceEmptyView: boolean;
             };
             subscribe: (callback: any) => () => void;
             addArtifact: (artifact: any) => void;
@@ -55,6 +58,11 @@ export function createArtifactuseStores(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;
+            closeAllTabs: () => void;
             clear: () => void;
             batch: (updateFn: any) => void;
         };
@@ -64,6 +72,9 @@ export function createArtifactuseStores(config?: {
             isPanelOpen: boolean;
             viewMode: string;
             isFullscreen: boolean;
+            openTabs: any[];
+            tabViewModes: {};
+            forceEmptyView: boolean;
         };
         subscribe: (callback: any) => () => void;
         processMessage: (content: any, messageId: any, overrides?: {}) => {
@@ -101,12 +112,16 @@ export function createArtifactuseStores(config?: {
             createdAt: string;
         };
         updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+        openPanel: () => void;
         closePanel: () => void;
         togglePanel: () => void;
         toggleFullscreen: () => void;
         setViewMode: (mode: any) => void;
         getPanelUrl: (artifact: any, options?: {}) => any;
         sendToPanel: (action: any, data: any) => void;
+        closeTab: (artifactId: any) => void;
+        closeOtherTabs: (artifactId: any) => void;
+        closeAllTabs: () => void;
         hasPanel: (artifact: any) => any;
         registerPanel: (typesOrLang: string | string[], panel: string | object) => void;
         unregisterPanel: (typesOrLang: string | string[]) => void;
@@ -216,6 +231,7 @@ export function createArtifactuseStores(config?: {
         createdAt: string;
     };
     updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+    openPanel: () => void;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -226,6 +242,9 @@ export function createArtifactuseStores(config?: {
     registerPanel: (type: any, panel: any) => void;
     unregisterPanel: (type: any) => void;
     getPanelTypes: () => any;
+    closeTab: (artifactId: any) => void;
+    closeOtherTabs: (artifactId: any) => void;
+    closeAllTabs: () => void;
     on: (event: any, callback: any) => () => void;
     off: (event: any, callback: any) => void;
     clearArtifacts: () => void;
@@ -258,6 +277,9 @@ export function setArtifactuseContext(config?: {}): {
                 isPanelOpen: boolean;
                 viewMode: string;
                 isFullscreen: boolean;
+                openTabs: any[];
+                tabViewModes: {};
+                forceEmptyView: boolean;
             };
             subscribe: (callback: any) => () => void;
             addArtifact: (artifact: any) => void;
@@ -273,6 +295,11 @@ export function setArtifactuseContext(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;
+            closeAllTabs: () => void;
             clear: () => void;
             batch: (updateFn: any) => void;
         };
@@ -282,6 +309,9 @@ export function setArtifactuseContext(config?: {}): {
             isPanelOpen: boolean;
             viewMode: string;
             isFullscreen: boolean;
+            openTabs: any[];
+            tabViewModes: {};
+            forceEmptyView: boolean;
         };
         subscribe: (callback: any) => () => void;
         processMessage: (content: any, messageId: any, overrides?: {}) => {
@@ -319,12 +349,16 @@ export function setArtifactuseContext(config?: {}): {
             createdAt: string;
         };
         updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+        openPanel: () => void;
         closePanel: () => void;
         togglePanel: () => void;
         toggleFullscreen: () => void;
         setViewMode: (mode: any) => void;
         getPanelUrl: (artifact: any, options?: {}) => any;
         sendToPanel: (action: any, data: any) => void;
+        closeTab: (artifactId: any) => void;
+        closeOtherTabs: (artifactId: any) => void;
+        closeAllTabs: () => void;
         hasPanel: (artifact: any) => any;
         registerPanel: (typesOrLang: string | string[], panel: string | object) => void;
         unregisterPanel: (typesOrLang: string | string[]) => void;
@@ -434,6 +468,7 @@ export function setArtifactuseContext(config?: {}): {
         createdAt: string;
     };
     updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+    openPanel: () => void;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -444,6 +479,9 @@ export function setArtifactuseContext(config?: {}): {
     registerPanel: (type: any, panel: any) => void;
     unregisterPanel: (type: any) => void;
     getPanelTypes: () => any;
+    closeTab: (artifactId: any) => void;
+    closeOtherTabs: (artifactId: any) => void;
+    closeAllTabs: () => void;
     on: (event: any, callback: any) => () => void;
     off: (event: any, callback: any) => void;
     clearArtifacts: () => void;
@@ -469,6 +507,9 @@ export function useArtifactuse(config?: {}): {
                 isPanelOpen: boolean;
                 viewMode: string;
                 isFullscreen: boolean;
+                openTabs: any[];
+                tabViewModes: {};
+                forceEmptyView: boolean;
             };
             subscribe: (callback: any) => () => void;
             addArtifact: (artifact: any) => void;
@@ -484,6 +525,11 @@ export function useArtifactuse(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;
+            closeAllTabs: () => void;
             clear: () => void;
             batch: (updateFn: any) => void;
         };
@@ -493,6 +539,9 @@ export function useArtifactuse(config?: {}): {
             isPanelOpen: boolean;
             viewMode: string;
             isFullscreen: boolean;
+            openTabs: any[];
+            tabViewModes: {};
+            forceEmptyView: boolean;
         };
         subscribe: (callback: any) => () => void;
         processMessage: (content: any, messageId: any, overrides?: {}) => {
@@ -530,12 +579,16 @@ export function useArtifactuse(config?: {}): {
             createdAt: string;
         };
         updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+        openPanel: () => void;
         closePanel: () => void;
         togglePanel: () => void;
         toggleFullscreen: () => void;
         setViewMode: (mode: any) => void;
         getPanelUrl: (artifact: any, options?: {}) => any;
         sendToPanel: (action: any, data: any) => void;
+        closeTab: (artifactId: any) => void;
+        closeOtherTabs: (artifactId: any) => void;
+        closeAllTabs: () => void;
         hasPanel: (artifact: any) => any;
         registerPanel: (typesOrLang: string | string[], panel: string | object) => void;
         unregisterPanel: (typesOrLang: string | string[]) => void;
@@ -645,6 +698,7 @@ export function useArtifactuse(config?: {}): {
         createdAt: string;
     };
     updateFile: (artifactOrId: any, code: any, options?: {}) => any;
+    openPanel: () => void;
     closePanel: () => void;
     togglePanel: () => void;
     toggleFullscreen: () => void;
@@ -655,6 +709,9 @@ export function useArtifactuse(config?: {}): {
     registerPanel: (type: any, panel: any) => void;
     unregisterPanel: (type: any) => void;
     getPanelTypes: () => any;
+    closeTab: (artifactId: any) => void;
+    closeOtherTabs: (artifactId: any) => void;
+    closeAllTabs: () => void;
     on: (event: any, callback: any) => () => void;
     off: (event: any, callback: any) => void;
     clearArtifacts: () => void;