@scalar/api-client 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/api-client
 
+## 3.2.1
+
+### Patch Changes
+
+- [#8940](https://github.com/scalar/scalar/pull/8940): feat(api-client): support header for web layout
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/style.css

@@ -2948,8 +2948,8 @@
   left: 10px;
 }
 
-.scalar-app .left-4 {
-  left: 16px;
+.scalar-app .left-3 {
+  left: 12px;
 }
 
 .scalar-app .left-border {
@@ -4252,6 +4252,10 @@
   top: 16px;
 }
 
+.scalar-app .top-14 {
+  top: 56px;
+}
+
 .scalar-app .top-\[calc\(100\%\+4px\)\] {
   top: calc(100% + 4px);
 }
@@ -4312,8 +4316,8 @@
   left: 8px;
 }
 
-.scalar-app .left-3 {
-  left: 12px;
+.scalar-app .left-4 {
+  left: 16px;
 }
 
 .scalar-app .-z-1 {
@@ -4328,10 +4332,6 @@
   z-index: 1;
 }
 
-.scalar-app .z-2 {
-  z-index: 2;
-}
-
 .scalar-app .z-10 {
   z-index: 10;
   z-index: 10;
@@ -4342,12 +4342,12 @@
   z-index: 50;
 }
 
-.scalar-app .z-\[1\] {
-  z-index: 1;
+.scalar-app .z-60 {
+  z-index: 60;
 }
 
-.scalar-app .z-\[60\] {
-  z-index: 60;
+.scalar-app .z-\[1\] {
+  z-index: 1;
 }
 
 .scalar-app .z-context {
@@ -4795,6 +4795,10 @@
   height: 100%;
 }
 
+.scalar-app .h-header {
+  height: 48px;
+}
+
 .scalar-app .h-min {
   height: min-content;
 }
@@ -7217,18 +7221,22 @@
     position: absolute !important;
   }
 
-  .scalar-app .max-md\:fixed\! {
-    position: fixed !important;
-  }
-
   .scalar-app .max-md\:inset-y-0 {
     inset-block: 0;
   }
 
+  .scalar-app .max-md\:top-4 {
+    top: 16px;
+  }
+
   .scalar-app .max-md\:z-2 {
     z-index: 2;
   }
 
+  .scalar-app .max-md\:z-5 {
+    z-index: 5;
+  }
+
   .scalar-app .max-md\:flex\! {
     display: flex !important;
   }
@@ -7241,9 +7249,25 @@
     width: 100% !important;
   }
 
+  .scalar-app .max-md\:pt-2 {
+    padding-top: 8px;
+  }
+
   .scalar-app .max-md\:pt-12 {
     padding-top: 48px;
   }
+
+  .scalar-app .max-md\:pl-4\! {
+    padding-left: 16px !important;
+  }
+
+  .scalar-app .max-md\:pl-10 {
+    padding-left: 40px;
+  }
+
+  .scalar-app .max-md\:pl-14 {
+    padding-left: 56px;
+  }
 }
 
 @media (min-width: 600px) {
@@ -8342,27 +8366,27 @@ to {
   background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.1));
 }
 
-.empty-sidebar-item-content[data-v-96a54993] {
+.empty-sidebar-item-content[data-v-8269f62b] {
   display: none;
 }
-.empty-sidebar-item .empty-sidebar-item-content[data-v-96a54993] {
+.empty-sidebar-item .empty-sidebar-item-content[data-v-8269f62b] {
   display: block;
 }
-.rabbitjump[data-v-96a54993] {
+.rabbitjump[data-v-8269f62b] {
   opacity: 0;
 }
-.empty-sidebar-item:hover .rabbitjump[data-v-96a54993] {
+.empty-sidebar-item:hover .rabbitjump[data-v-8269f62b] {
   opacity: 1;
-  animation: rabbitAnimation-96a54993 0.5s steps(1) infinite;
+  animation: rabbitAnimation-8269f62b 0.5s steps(1) infinite;
 }
-.empty-sidebar-item:hover .rabbitsit[data-v-96a54993] {
+.empty-sidebar-item:hover .rabbitsit[data-v-8269f62b] {
   opacity: 0;
-  animation: rabbitAnimation2-96a54993 0.5s steps(1) infinite;
+  animation: rabbitAnimation2-8269f62b 0.5s steps(1) infinite;
 }
-.empty-sidebar-item:hover .rabbit-ascii[data-v-96a54993] {
-  animation: rabbitRun-96a54993 8s infinite linear;
+.empty-sidebar-item:hover .rabbit-ascii[data-v-8269f62b] {
+  animation: rabbitRun-8269f62b 8s infinite linear;
 }
-@keyframes rabbitRun-96a54993 {
+@keyframes rabbitRun-8269f62b {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -8382,7 +8406,7 @@ to {
     transform: translate3d(0, 0, 0);
 }
 }
-@keyframes rabbitAnimation-96a54993 {
+@keyframes rabbitAnimation-8269f62b {
 0%,
   100% {
     opacity: 1;
@@ -8391,7 +8415,7 @@ to {
     opacity: 0;
 }
 }
-@keyframes rabbitAnimation2-96a54993 {
+@keyframes rabbitAnimation2-8269f62b {
 0%,
   100% {
     opacity: 0;

package/dist/v2/components/sidebar/Sidebar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"names":[],"mappings":"AAuMA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,iDAAiD;IACjD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,MAAM,EAAE,YAAY,CAAA;IACpB,qCAAqC;IACrC,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,2CAA2C;IAC3C,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,+CAA+C;IAC/C,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EACR,OAAO,GACP,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,CAAA;CACxE,CAAC;AAkBF,KAAK,WAAW,GAAG;IACjB,uCAAuC;IACvC,eAAe,CAAC,IAAI,OAAO,CAAA;IAC3B,sDAAsD;IACtD,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IACpD,mDAAmD;IACnD,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IAChD,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;IAC9B,iDAAiD;IACjD,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC/D,CAAC;AAiCF,KAAK,gBAAgB,GAAG;IACxB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAqSxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Sidebar.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"names":[],"mappings":"AAgNA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,iDAAiD;IACjD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,MAAM,EAAE,YAAY,CAAA;IACpB,qCAAqC;IACrC,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,2CAA2C;IAC3C,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,+CAA+C;IAC/C,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EACR,OAAO,GACP,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,CAAA;CACxE,CAAC;AAkBF,KAAK,WAAW,GAAG;IACjB,uCAAuC;IACvC,eAAe,CAAC,IAAI,OAAO,CAAA;IAC3B,sDAAsD;IACtD,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IACpD,mDAAmD;IACnD,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IAChD,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;IAC9B,iDAAiD;IACjD,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC/D,CAAC;AAiCF,KAAK,gBAAgB,GAAG;IACxB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA8TxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/components/sidebar/Sidebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref } from 'vue'\n\nimport { Resize } from '@/v2/components/resize'\nimport { useSearchIndex } from '@/v2/features/search'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport SidebarMenu from './SidebarMenu.vue'\n\nconst { documents, sidebarState, layout } = defineProps<{\n  /** All documents to display sidebar items for */\n  sidebarState: SidebarState<TraversedEntry>\n  /** Layout for the client */\n  layout: ClientLayout\n  /** The currently active workspace */\n  activeWorkspace: { id: string }\n  /** The list of all available workspaces */\n  workspaces: WorkspaceGroup[]\n  /** The documents belonging to the workspace */\n  documents: WorkspaceDocument[]\n  /**\n   * Prevents sidebar items from being hovered and dropped into. Can be either a function or a boolean\n   *\n   * @default true\n   */\n  isDroppable?:\n    | boolean\n    | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean)\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an item is selected */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when sidebar items are reordered via drag and drop */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\nconst slots = defineSlots<{\n  /** Slot to add the workspace button */\n  workspaceButton?(): unknown\n  /** Slot to add additional content to the decorator */\n  decorator?(props: { item: TraversedEntry }): unknown\n  /** Slot to add additional content to the footer */\n  footer?(): unknown\n  /** Slot to add additional content to the empty folder */\n  empty?(props: { item: TraversedEntry }): unknown\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n  /** Slot to add additional content to the icon */\n  icon?(props: { item: TraversedEntry; open: boolean }): unknown\n}>()\n\n/** Controls the visibility of the search input */\nconst isSearchVisible = ref(false)\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\nconst isDraft = (item: TraversedEntry) => {\n  return item.type === 'example' && item.title === 'draft'\n}\n\n/** We handle search results out here so we can show them in the sidebar */\nconst { query, results } = useSearchIndex(() => documents)\n\n/** We show either the search results or the sidebar items */\nconst items = computed(() => results.value ?? sidebarState.items.value)\n\n/** Select an item and clear the search query */\nconst handleSelectItem = (id: string) => {\n  emit('selectItem', id)\n  query.value = ''\n  isSearchVisible.value = false\n}\n</script>\n<template>\n  <Resize\n    v-model:width=\"sidebarWidth\"\n    class=\"flex flex-col\">\n    <template #default>\n      <ScalarSidebar\n        class=\"flex w-auto flex-1\"\n        :indent=\"20\"\n        :isDraggable=\"layout !== 'modal'\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"sidebarState.isExpanded\"\n        :isSelected=\"sidebarState.isSelected\"\n        :items\n        layout=\"client\"\n        :options=\"{ hideOperationDefaultExamples: layout === 'modal' }\"\n        @reorder=\"\n          (draggingItem, hoveredItem) =>\n            emit('reorder', draggingItem, hoveredItem)\n        \"\n        @selectItem=\"handleSelectItem\">\n        <template #header>\n          <!-- drag region (macos) -->\n          <div class=\"mac:h-12 mac:app-drag-region h-2\"></div>\n          <div\n            class=\"bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5\"\n            :class=\"{ 'max-md:pt-12': layout !== 'modal' }\">\n            <div class=\"flex items-center justify-between\">\n              <!-- Desktop gets the workspace menu here  -->\n              <SidebarMenu\n                v-if=\"layout !== 'modal'\"\n                :activeWorkspace=\"activeWorkspace\"\n                :workspaces=\"workspaces\"\n                @create:workspace=\"emit('create:workspace')\"\n                @navigate:to:settings=\"emit('navigate:to:settings')\"\n                @select:workspace=\"(id) => emit('select:workspace', id)\">\n                <template #sidebarMenuActions>\n                  <slot name=\"sidebarMenuActions\" />\n                </template>\n              </SidebarMenu>\n\n              <!-- Placeholder for the sidebar toggle in modal layout -->\n              <div v-else-if=\"layout === 'modal'\"></div>\n\n              <!-- Toggle search, always visible on web -->\n              <ScalarIconButton\n                :icon=\"ScalarIconMagnifyingGlass\"\n                label=\"Search\"\n                @click=\"isSearchVisible = !isSearchVisible\" />\n            </div>\n\n            <ScalarSidebarSearchInput\n              v-if=\"isSearchVisible\"\n              v-model=\"query\"\n              autofocus />\n          </div>\n        </template>\n\n        <template #spacer>\n          <div class=\"flex-1\"></div>\n        </template>\n\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"decoratorProps\">\n          <slot\n            v-bind=\"decoratorProps\"\n            name=\"decorator\" />\n        </template>\n\n        <template #icon=\"iconProps\">\n          <template v-if=\"slots.icon || isDraft(iconProps.item)\">\n            <ScalarIconFileDashed v-if=\"isDraft(iconProps.item)\" />\n            <slot\n              v-bind=\"iconProps\"\n              name=\"icon\" />\n          </template>\n        </template>\n\n        <!-- Empty folder slot -->\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"emptyProps\">\n          <slot\n            v-bind=\"emptyProps\"\n            name=\"empty\" />\n        </template>\n\n        <template #before>\n          <slot name=\"workspaceButton\" />\n        </template>\n\n        <template #footer>\n          <slot name=\"footer\" />\n        </template>\n      </ScalarSidebar>\n    </template>\n  </Resize>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Sidebar.vue.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref } from 'vue'\n\nimport { Resize } from '@/v2/components/resize'\nimport { useSearchIndex } from '@/v2/features/search'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport SidebarMenu from './SidebarMenu.vue'\n\nconst { documents, sidebarState, layout } = defineProps<{\n  /** All documents to display sidebar items for */\n  sidebarState: SidebarState<TraversedEntry>\n  /** Layout for the client */\n  layout: ClientLayout\n  /** The currently active workspace */\n  activeWorkspace: { id: string }\n  /** The list of all available workspaces */\n  workspaces: WorkspaceGroup[]\n  /** The documents belonging to the workspace */\n  documents: WorkspaceDocument[]\n  /**\n   * Prevents sidebar items from being hovered and dropped into. Can be either a function or a boolean\n   *\n   * @default true\n   */\n  isDroppable?:\n    | boolean\n    | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean)\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an item is selected */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when sidebar items are reordered via drag and drop */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\nconst slots = defineSlots<{\n  /** Slot to add the workspace button */\n  workspaceButton?(): unknown\n  /** Slot to add additional content to the decorator */\n  decorator?(props: { item: TraversedEntry }): unknown\n  /** Slot to add additional content to the footer */\n  footer?(): unknown\n  /** Slot to add additional content to the empty folder */\n  empty?(props: { item: TraversedEntry }): unknown\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n  /** Slot to add additional content to the icon */\n  icon?(props: { item: TraversedEntry; open: boolean }): unknown\n}>()\n\n/** Controls the visibility of the search input */\nconst isSearchVisible = ref(false)\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\nconst isDraft = (item: TraversedEntry) => {\n  return item.type === 'example' && item.title === 'draft'\n}\n\n/** We handle search results out here so we can show them in the sidebar */\nconst { query, results } = useSearchIndex(() => documents)\n\n/** We show either the search results or the sidebar items */\nconst items = computed(() => results.value ?? sidebarState.items.value)\n\n/** Select an item and clear the search query */\nconst handleSelectItem = (id: string) => {\n  emit('selectItem', id)\n  query.value = ''\n  isSearchVisible.value = false\n}\n</script>\n<template>\n  <Resize\n    v-model:width=\"sidebarWidth\"\n    class=\"flex flex-col\">\n    <template #default>\n      <ScalarSidebar\n        class=\"flex w-auto flex-1\"\n        :indent=\"20\"\n        :isDraggable=\"layout !== 'modal'\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"sidebarState.isExpanded\"\n        :isSelected=\"sidebarState.isSelected\"\n        :items\n        layout=\"client\"\n        :options=\"{ hideOperationDefaultExamples: layout === 'modal' }\"\n        @reorder=\"\n          (draggingItem, hoveredItem) =>\n            emit('reorder', draggingItem, hoveredItem)\n        \"\n        @selectItem=\"handleSelectItem\">\n        <template #header>\n          <!-- drag region (macos) -->\n          <div class=\"mac:h-12 mac:app-drag-region h-2\"></div>\n          <div\n            class=\"bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5\"\n            :class=\"{\n              'max-md:pt-12': layout === 'desktop',\n              'max-md:pt-2 max-md:pl-4!': layout === 'modal',\n              'pt-1 max-md:pt-2 max-md:pl-14': layout === 'web',\n            }\">\n            <div\n              v-if=\"layout !== 'web'\"\n              class=\"flex items-center justify-between\"\n              :class=\"{ 'max-md:pl-10': layout === 'desktop' }\">\n              <!-- Desktop gets the workspace menu here  -->\n              <SidebarMenu\n                v-if=\"layout !== 'modal'\"\n                :activeWorkspace=\"activeWorkspace\"\n                :workspaces=\"workspaces\"\n                @create:workspace=\"emit('create:workspace')\"\n                @navigate:to:settings=\"emit('navigate:to:settings')\"\n                @select:workspace=\"(id) => emit('select:workspace', id)\">\n                <template #sidebarMenuActions>\n                  <slot name=\"sidebarMenuActions\" />\n                </template>\n              </SidebarMenu>\n\n              <!-- Placeholder for the sidebar toggle in modal layout -->\n              <div v-else-if=\"layout === 'modal'\"></div>\n\n              <!-- Toggle search, always visible on web -->\n              <ScalarIconButton\n                class=\"hover:bg-b-2 active:text-c-1 size-8 rounded p-2\"\n                :icon=\"ScalarIconMagnifyingGlass\"\n                label=\"Search\"\n                size=\"sm\"\n                @click=\"isSearchVisible = !isSearchVisible\" />\n            </div>\n\n            <ScalarSidebarSearchInput\n              v-if=\"isSearchVisible || layout === 'web'\"\n              v-model=\"query\"\n              :autofocus=\"layout !== 'web'\" />\n          </div>\n        </template>\n\n        <template #spacer>\n          <div class=\"flex-1\"></div>\n        </template>\n\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"decoratorProps\">\n          <slot\n            v-bind=\"decoratorProps\"\n            name=\"decorator\" />\n        </template>\n\n        <template #icon=\"iconProps\">\n          <template v-if=\"slots.icon || isDraft(iconProps.item)\">\n            <ScalarIconFileDashed v-if=\"isDraft(iconProps.item)\" />\n            <slot\n              v-bind=\"iconProps\"\n              name=\"icon\" />\n          </template>\n        </template>\n\n        <!-- Empty folder slot -->\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"emptyProps\">\n          <slot\n            v-bind=\"emptyProps\"\n            name=\"empty\" />\n        </template>\n\n        <template #before>\n          <slot name=\"workspaceButton\" />\n        </template>\n\n        <template #footer>\n          <slot name=\"footer\" />\n        </template>\n      </ScalarSidebar>\n    </template>\n  </Resize>\n</template>\n"],"mappings":""}

package/dist/v2/components/sidebar/Sidebar.vue.script.js

@@ -6,8 +6,7 @@ import { ScalarIconButton, ScalarSidebarSearchInput } from "@scalar/components";
 import { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from "@scalar/icons";
 import { ScalarSidebar } from "@scalar/sidebar";
 //#region src/v2/components/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex items-center justify-between" };
-var _hoisted_2 = { key: 1 };
+var _hoisted_1 = { key: 1 };
 var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Sidebar",
 	props: /* @__PURE__ */ mergeModels({
@@ -70,7 +69,14 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					onReorder: _cache[5] || (_cache[5] = (draggingItem, hoveredItem) => emit("reorder", draggingItem, hoveredItem)),
 					onSelectItem: handleSelectItem
 				}, createSlots({
-					header: withCtx(() => [_cache[7] || (_cache[7] = createElementVNode("div", { class: "mac:h-12 mac:app-drag-region h-2" }, null, -1)), createElementVNode("div", { class: normalizeClass(["bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5", { "max-md:pt-12": __props.layout !== "modal" }]) }, [createElementVNode("div", _hoisted_1, [__props.layout !== "modal" ? (openBlock(), createBlock(SidebarMenu_default, {
+					header: withCtx(() => [_cache[7] || (_cache[7] = createElementVNode("div", { class: "mac:h-12 mac:app-drag-region h-2" }, null, -1)), createElementVNode("div", { class: normalizeClass(["bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5", {
+						"max-md:pt-12": __props.layout === "desktop",
+						"max-md:pt-2 max-md:pl-4!": __props.layout === "modal",
+						"pt-1 max-md:pt-2 max-md:pl-14": __props.layout === "web"
+					}]) }, [__props.layout !== "web" ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["flex items-center justify-between", { "max-md:pl-10": __props.layout === "desktop" }])
+					}, [__props.layout !== "modal" ? (openBlock(), createBlock(SidebarMenu_default, {
 						key: 0,
 						activeWorkspace: __props.activeWorkspace,
 						workspaces: __props.workspaces,
@@ -80,16 +86,18 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					}, {
 						sidebarMenuActions: withCtx(() => [renderSlot(_ctx.$slots, "sidebarMenuActions")]),
 						_: 3
-					}, 8, ["activeWorkspace", "workspaces"])) : __props.layout === "modal" ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true), createVNode(unref(ScalarIconButton), {
+					}, 8, ["activeWorkspace", "workspaces"])) : __props.layout === "modal" ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true), createVNode(unref(ScalarIconButton), {
+						class: "hover:bg-b-2 active:text-c-1 size-8 rounded p-2",
 						icon: unref(ScalarIconMagnifyingGlass),
 						label: "Search",
+						size: "sm",
 						onClick: _cache[3] || (_cache[3] = ($event) => isSearchVisible.value = !isSearchVisible.value)
-					}, null, 8, ["icon"])]), isSearchVisible.value ? (openBlock(), createBlock(unref(ScalarSidebarSearchInput), {
-						key: 0,
+					}, null, 8, ["icon"])], 2)) : createCommentVNode("", true), isSearchVisible.value || __props.layout === "web" ? (openBlock(), createBlock(unref(ScalarSidebarSearchInput), {
+						key: 1,
 						modelValue: unref(query),
 						"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(query) ? query.value = $event : null),
-						autofocus: ""
-					}, null, 8, ["modelValue"])) : createCommentVNode("", true)], 2)]),
+						autofocus: __props.layout !== "web"
+					}, null, 8, ["modelValue", "autofocus"])) : createCommentVNode("", true)], 2)]),
 					spacer: withCtx(() => [_cache[8] || (_cache[8] = createElementVNode("div", { class: "flex-1" }, null, -1))]),
 					icon: withCtx((iconProps) => [slots.icon || isDraft(iconProps.item) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [isDraft(iconProps.item) ? (openBlock(), createBlock(unref(ScalarIconFileDashed), { key: 0 })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconProps)))], 64)) : createCommentVNode("", true)]),
 					before: withCtx(() => [renderSlot(_ctx.$slots, "workspaceButton")]),

package/dist/v2/components/sidebar/Sidebar.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref } from 'vue'\n\nimport { Resize } from '@/v2/components/resize'\nimport { useSearchIndex } from '@/v2/features/search'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport SidebarMenu from './SidebarMenu.vue'\n\nconst { documents, sidebarState, layout } = defineProps<{\n  /** All documents to display sidebar items for */\n  sidebarState: SidebarState<TraversedEntry>\n  /** Layout for the client */\n  layout: ClientLayout\n  /** The currently active workspace */\n  activeWorkspace: { id: string }\n  /** The list of all available workspaces */\n  workspaces: WorkspaceGroup[]\n  /** The documents belonging to the workspace */\n  documents: WorkspaceDocument[]\n  /**\n   * Prevents sidebar items from being hovered and dropped into. Can be either a function or a boolean\n   *\n   * @default true\n   */\n  isDroppable?:\n    | boolean\n    | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean)\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an item is selected */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when sidebar items are reordered via drag and drop */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\nconst slots = defineSlots<{\n  /** Slot to add the workspace button */\n  workspaceButton?(): unknown\n  /** Slot to add additional content to the decorator */\n  decorator?(props: { item: TraversedEntry }): unknown\n  /** Slot to add additional content to the footer */\n  footer?(): unknown\n  /** Slot to add additional content to the empty folder */\n  empty?(props: { item: TraversedEntry }): unknown\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n  /** Slot to add additional content to the icon */\n  icon?(props: { item: TraversedEntry; open: boolean }): unknown\n}>()\n\n/** Controls the visibility of the search input */\nconst isSearchVisible = ref(false)\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\nconst isDraft = (item: TraversedEntry) => {\n  return item.type === 'example' && item.title === 'draft'\n}\n\n/** We handle search results out here so we can show them in the sidebar */\nconst { query, results } = useSearchIndex(() => documents)\n\n/** We show either the search results or the sidebar items */\nconst items = computed(() => results.value ?? sidebarState.items.value)\n\n/** Select an item and clear the search query */\nconst handleSelectItem = (id: string) => {\n  emit('selectItem', id)\n  query.value = ''\n  isSearchVisible.value = false\n}\n</script>\n<template>\n  <Resize\n    v-model:width=\"sidebarWidth\"\n    class=\"flex flex-col\">\n    <template #default>\n      <ScalarSidebar\n        class=\"flex w-auto flex-1\"\n        :indent=\"20\"\n        :isDraggable=\"layout !== 'modal'\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"sidebarState.isExpanded\"\n        :isSelected=\"sidebarState.isSelected\"\n        :items\n        layout=\"client\"\n        :options=\"{ hideOperationDefaultExamples: layout === 'modal' }\"\n        @reorder=\"\n          (draggingItem, hoveredItem) =>\n            emit('reorder', draggingItem, hoveredItem)\n        \"\n        @selectItem=\"handleSelectItem\">\n        <template #header>\n          <!-- drag region (macos) -->\n          <div class=\"mac:h-12 mac:app-drag-region h-2\"></div>\n          <div\n            class=\"bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5\"\n            :class=\"{ 'max-md:pt-12': layout !== 'modal' }\">\n            <div class=\"flex items-center justify-between\">\n              <!-- Desktop gets the workspace menu here  -->\n              <SidebarMenu\n                v-if=\"layout !== 'modal'\"\n                :activeWorkspace=\"activeWorkspace\"\n                :workspaces=\"workspaces\"\n                @create:workspace=\"emit('create:workspace')\"\n                @navigate:to:settings=\"emit('navigate:to:settings')\"\n                @select:workspace=\"(id) => emit('select:workspace', id)\">\n                <template #sidebarMenuActions>\n                  <slot name=\"sidebarMenuActions\" />\n                </template>\n              </SidebarMenu>\n\n              <!-- Placeholder for the sidebar toggle in modal layout -->\n              <div v-else-if=\"layout === 'modal'\"></div>\n\n              <!-- Toggle search, always visible on web -->\n              <ScalarIconButton\n                :icon=\"ScalarIconMagnifyingGlass\"\n                label=\"Search\"\n                @click=\"isSearchVisible = !isSearchVisible\" />\n            </div>\n\n            <ScalarSidebarSearchInput\n              v-if=\"isSearchVisible\"\n              v-model=\"query\"\n              autofocus />\n          </div>\n        </template>\n\n        <template #spacer>\n          <div class=\"flex-1\"></div>\n        </template>\n\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"decoratorProps\">\n          <slot\n            v-bind=\"decoratorProps\"\n            name=\"decorator\" />\n        </template>\n\n        <template #icon=\"iconProps\">\n          <template v-if=\"slots.icon || isDraft(iconProps.item)\">\n            <ScalarIconFileDashed v-if=\"isDraft(iconProps.item)\" />\n            <slot\n              v-bind=\"iconProps\"\n              name=\"icon\" />\n          </template>\n        </template>\n\n        <!-- Empty folder slot -->\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"emptyProps\">\n          <slot\n            v-bind=\"emptyProps\"\n            name=\"empty\" />\n        </template>\n\n        <template #before>\n          <slot name=\"workspaceButton\" />\n        </template>\n\n        <template #footer>\n          <slot name=\"footer\" />\n        </template>\n      </ScalarSidebar>\n    </template>\n  </Resize>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Sidebar.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref } from 'vue'\n\nimport { Resize } from '@/v2/components/resize'\nimport { useSearchIndex } from '@/v2/features/search'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport SidebarMenu from './SidebarMenu.vue'\n\nconst { documents, sidebarState, layout } = defineProps<{\n  /** All documents to display sidebar items for */\n  sidebarState: SidebarState<TraversedEntry>\n  /** Layout for the client */\n  layout: ClientLayout\n  /** The currently active workspace */\n  activeWorkspace: { id: string }\n  /** The list of all available workspaces */\n  workspaces: WorkspaceGroup[]\n  /** The documents belonging to the workspace */\n  documents: WorkspaceDocument[]\n  /**\n   * Prevents sidebar items from being hovered and dropped into. Can be either a function or a boolean\n   *\n   * @default true\n   */\n  isDroppable?:\n    | boolean\n    | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean)\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when an item is selected */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when sidebar items are reordered via drag and drop */\n  (e: 'reorder', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\nconst slots = defineSlots<{\n  /** Slot to add the workspace button */\n  workspaceButton?(): unknown\n  /** Slot to add additional content to the decorator */\n  decorator?(props: { item: TraversedEntry }): unknown\n  /** Slot to add additional content to the footer */\n  footer?(): unknown\n  /** Slot to add additional content to the empty folder */\n  empty?(props: { item: TraversedEntry }): unknown\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n  /** Slot to add additional content to the icon */\n  icon?(props: { item: TraversedEntry; open: boolean }): unknown\n}>()\n\n/** Controls the visibility of the search input */\nconst isSearchVisible = ref(false)\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\nconst isDraft = (item: TraversedEntry) => {\n  return item.type === 'example' && item.title === 'draft'\n}\n\n/** We handle search results out here so we can show them in the sidebar */\nconst { query, results } = useSearchIndex(() => documents)\n\n/** We show either the search results or the sidebar items */\nconst items = computed(() => results.value ?? sidebarState.items.value)\n\n/** Select an item and clear the search query */\nconst handleSelectItem = (id: string) => {\n  emit('selectItem', id)\n  query.value = ''\n  isSearchVisible.value = false\n}\n</script>\n<template>\n  <Resize\n    v-model:width=\"sidebarWidth\"\n    class=\"flex flex-col\">\n    <template #default>\n      <ScalarSidebar\n        class=\"flex w-auto flex-1\"\n        :indent=\"20\"\n        :isDraggable=\"layout !== 'modal'\"\n        :isDroppable=\"isDroppable\"\n        :isExpanded=\"sidebarState.isExpanded\"\n        :isSelected=\"sidebarState.isSelected\"\n        :items\n        layout=\"client\"\n        :options=\"{ hideOperationDefaultExamples: layout === 'modal' }\"\n        @reorder=\"\n          (draggingItem, hoveredItem) =>\n            emit('reorder', draggingItem, hoveredItem)\n        \"\n        @selectItem=\"handleSelectItem\">\n        <template #header>\n          <!-- drag region (macos) -->\n          <div class=\"mac:h-12 mac:app-drag-region h-2\"></div>\n          <div\n            class=\"bg-sidebar-b-1 z-1 flex flex-col gap-1.5 px-3 pb-1.5\"\n            :class=\"{\n              'max-md:pt-12': layout === 'desktop',\n              'max-md:pt-2 max-md:pl-4!': layout === 'modal',\n              'pt-1 max-md:pt-2 max-md:pl-14': layout === 'web',\n            }\">\n            <div\n              v-if=\"layout !== 'web'\"\n              class=\"flex items-center justify-between\"\n              :class=\"{ 'max-md:pl-10': layout === 'desktop' }\">\n              <!-- Desktop gets the workspace menu here  -->\n              <SidebarMenu\n                v-if=\"layout !== 'modal'\"\n                :activeWorkspace=\"activeWorkspace\"\n                :workspaces=\"workspaces\"\n                @create:workspace=\"emit('create:workspace')\"\n                @navigate:to:settings=\"emit('navigate:to:settings')\"\n                @select:workspace=\"(id) => emit('select:workspace', id)\">\n                <template #sidebarMenuActions>\n                  <slot name=\"sidebarMenuActions\" />\n                </template>\n              </SidebarMenu>\n\n              <!-- Placeholder for the sidebar toggle in modal layout -->\n              <div v-else-if=\"layout === 'modal'\"></div>\n\n              <!-- Toggle search, always visible on web -->\n              <ScalarIconButton\n                class=\"hover:bg-b-2 active:text-c-1 size-8 rounded p-2\"\n                :icon=\"ScalarIconMagnifyingGlass\"\n                label=\"Search\"\n                size=\"sm\"\n                @click=\"isSearchVisible = !isSearchVisible\" />\n            </div>\n\n            <ScalarSidebarSearchInput\n              v-if=\"isSearchVisible || layout === 'web'\"\n              v-model=\"query\"\n              :autofocus=\"layout !== 'web'\" />\n          </div>\n        </template>\n\n        <template #spacer>\n          <div class=\"flex-1\"></div>\n        </template>\n\n        <template\n          v-if=\"slots.decorator\"\n          #decorator=\"decoratorProps\">\n          <slot\n            v-bind=\"decoratorProps\"\n            name=\"decorator\" />\n        </template>\n\n        <template #icon=\"iconProps\">\n          <template v-if=\"slots.icon || isDraft(iconProps.item)\">\n            <ScalarIconFileDashed v-if=\"isDraft(iconProps.item)\" />\n            <slot\n              v-bind=\"iconProps\"\n              name=\"icon\" />\n          </template>\n        </template>\n\n        <!-- Empty folder slot -->\n        <template\n          v-if=\"slots.empty\"\n          #empty=\"emptyProps\">\n          <slot\n            v-bind=\"emptyProps\"\n            name=\"empty\" />\n        </template>\n\n        <template #before>\n          <slot name=\"workspaceButton\" />\n        </template>\n\n        <template #footer>\n          <slot name=\"footer\" />\n        </template>\n      </ScalarSidebar>\n    </template>\n  </Resize>\n</template>\n"],"mappings":"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"}

package/dist/v2/components/sidebar/SidebarToggle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggle.vue.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2\"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SidebarToggle.vue.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded p-2\"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":""}

package/dist/v2/components/sidebar/SidebarToggle.vue.script.js

@@ -24,7 +24,7 @@ var SidebarToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", {
 				"aria-pressed": isSidebarOpen.value,
-				class: "scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2",
+				class: "scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded p-2",
 				type: "button",
 				onClick: _cache[0] || (_cache[0] = ($event) => isSidebarOpen.value = !isSidebarOpen.value)
 			}, [createElementVNode("span", _hoisted_2, toDisplayString(isSidebarOpen.value ? "Hide" : "Show") + " sidebar", 1), (openBlock(), createElementBlock("svg", _hoisted_3, [

package/dist/v2/components/sidebar/SidebarToggle.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggle.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2\"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EACA,MAAM,gBAAgB,SAAoB,SAAA,aAEzC;;uBAGC,mBAgCS,UAAA;IA/BN,gBAAc,cAAA;IACf,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAa,CAAI,cAAA;OACzB,mBAA0E,QAA1E,YAA0E,gBAAjD,cAAA,QAAa,SAAA,OAAA,GAAqB,YAAQ,EAAA,GAAA,WAAA,EACnE,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,QAAM,EAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,cAAA,QAAa,kBAAA,mBAAA,CAAA;KACrB,GAAE;KACF,MAAK;;8BAET,mBAKqB,QAAA;KAJnB,GAAE;KACF,QAAO;KACP,kBAAe;KACf,mBAAgB;KAChB,gBAAa"}
+{"version":3,"file":"SidebarToggle.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst isSidebarOpen = defineModel<boolean>({\n  required: true,\n})\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded p-2\"\n    type=\"button\"\n    @click=\"isSidebarOpen = !isSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EACA,MAAM,gBAAgB,SAAoB,SAAA,aAEzC;;uBAGC,mBAgCS,UAAA;IA/BN,gBAAc,cAAA;IACf,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAa,CAAI,cAAA;OACzB,mBAA0E,QAA1E,YAA0E,gBAAjD,cAAA,QAAa,SAAA,OAAA,GAAqB,YAAQ,EAAA,GAAA,WAAA,EACnE,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,QAAM,EAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,cAAA,QAAa,kBAAA,mBAAA,CAAA;KACrB,GAAE;KACF,MAAK;;8BAET,mBAKqB,QAAA;KAJnB,GAAE;KACF,QAAO;KACP,kBAAe;KACf,mBAAgB;KAChB,gBAAa"}

package/dist/v2/constants.js

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.2.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.2.1";
 //#endregion
 export { APP_VERSION };
 

package/dist/v2/features/app/App.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/App.vue"],"names":[],"mappings":"AAuRA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAW7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+DAA+D,CAAA;AAKxG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAK3C;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD,+FAA+F;4BACvE,0BAA0B;;;;YAL1C,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD,+FAA+F;4BACvE,0BAA0B;;IAYlD;;;OAGG;4BACqB,MAAM,OAAO;IACrC;;;OAGG;yBACkB,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,OAAO;EAuX9D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/App.vue"],"names":[],"mappings":"AA0RA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAW7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+DAA+D,CAAA;AAKxG,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAA;AAK3C;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;YAER,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD,+FAA+F;4BACvE,0BAA0B;;;;YAL1C,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC;cAC5B,YAAY,EAAE;iBACX,MAAM,QAAQ;4BACH,MAAM,mBAAmB;IACjD,+FAA+F;4BACvE,0BAA0B;;IAYlD;;;OAGG;4BACqB,MAAM,OAAO;IACrC;;;OAGG;yBACkB,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,OAAO;EAuX9D,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/features/app/App.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.vue.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Main entry point for the API client for electron and web.\n *\n * This component handles all events and store business logic for the application.\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarTeleportRoot,\n  useModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type { ImportDocumentFromRegistry } from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { type AppState } from './app-state'\nimport AppSidebar from './components/AppSidebar.vue'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n  layout,\n  plugins = [],\n  getAppState,\n  getCommandPaletteState,\n  fetchRegistryDocument,\n} = defineProps<{\n  layout: Exclude<ClientLayout, 'modal'>\n  plugins?: ClientPlugin[]\n  getAppState: () => AppState\n  getCommandPaletteState: () => CommandPaletteState\n  /** Fetches the full document from registry by meta. Passed through to route props for sync. */\n  fetchRegistryDocument?: ImportDocumentFromRegistry\n}>()\n\ndefineSlots<{\n  /**\n   * Slot for customizing the actions section of the sidebar menu.\n   * This slot is used to render custom actions or components within the actions section.\n   */\n  'sidebar-menu-actions': () => unknown\n  /**\n   * Slot for customizing the create workspace modal.\n   * This slot is used to render custom actions or components within the create workspace modal.\n   */\n  'create-workspace'?: (payload: { state: ModalState }) => unknown\n}>()\n\ndefineExpose({\n  openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/** Expose workspace store to window for debugging purposes. */\nif (typeof window !== 'undefined') {\n  window.dataDumpWorkspace = () => app.store.value\n  window.dumpAppState = () => app\n}\n\n/** Call lifecycle hooks on plugins and subscribe to event bus events */\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n  plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n  if (plugin.on) {\n    for (const [event, handler] of Object.entries(plugin.on)) {\n      pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n    }\n  }\n}\n\n/** Notify plugins when telemetry config changes */\nwatch(app.telemetry, () => {\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onConfigChange?.({\n      config: { telemetry: app.telemetry.value },\n    })\n  }\n})\n\nonBeforeUnmount(() => {\n  for (const unsub of pluginUnsubscribes) {\n    unsub()\n  }\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onDestroy?.()\n  }\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/** Watch the active document for changes and rebase it with its remote source */\nuseDocumentWatcher({\n  documentName: () =>\n    app.store.value?.workspace[extensions.workspace.activeDocument],\n  store: app.store,\n  initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/** Color mode */\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/** Setup monaco editor configuration */\nuseMonacoEditorConfiguration({\n  theme: currentTheme,\n  darkMode: isDarkMode,\n})\n\nconst navigateToWorkspaceOverview = (namespace?: string, slug?: string) => {\n  app.eventBus.emit('ui:navigate', {\n    page: 'workspace',\n    path: 'environment',\n    namespace,\n    workspaceSlug: slug,\n  })\n}\n\n/** Sets the active workspace by ID: finds the workspace in the list and updates app state & navigation. */\nconst setActiveWorkspace = (id?: string) => {\n  if (!id) {\n    return\n  }\n  const workspace = app.workspace.workspaceList.value?.find(\n    (workspace) => workspace.id === id,\n  )\n  if (!workspace) {\n    return\n  }\n\n  navigateToWorkspaceOverview(workspace.namespace, workspace.slug)\n}\n\nconst createWorkspaceModalState = useModal()\n\n/** Props to pass to the RouterView component. */\nconst routerViewProps = computed<RouteProps>(() => {\n  return {\n    documentSlug: app.activeEntities.documentSlug.value ?? '',\n    document: app.store.value?.workspace.activeDocument ?? null,\n    environment: app.environment.value,\n    eventBus: app.eventBus,\n    exampleName: app.activeEntities.exampleName.value,\n    fetchRegistryDocument,\n    layout,\n    method: app.activeEntities.method.value,\n    path: app.activeEntities.path.value,\n    workspaceStore: app.store.value!,\n    activeWorkspace: app.workspace.activeWorkspace.value!,\n    plugins,\n    isDarkMode: app.isDarkMode.value,\n    currentTheme: app.theme.styles.value.themeStyles,\n    customThemes: toValue(app.theme.customThemes),\n    telemetry: app.telemetry.value,\n    onUpdateTelemetry: (value: boolean) => {\n      app.telemetry.value = value\n    },\n    options: app.options,\n  }\n})\n</script>\n\n<template>\n  <ScalarTeleportRoot>\n    <!-- Theme style tag -->\n    <div v-html=\"app.theme.themeStyleTag.value\" />\n\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- Main content -->\n    <main\n      v-if=\"\n        app.store.value !== null &&\n        app.workspace.activeWorkspace.value !== null &&\n        !app.loading.value\n      \">\n      <div class=\"relative flex h-dvh w-dvw flex-1 flex-col\">\n        <SidebarToggle\n          v-model=\"app.sidebar.isOpen.value\"\n          class=\"absolute top-4 left-3 z-[60] md:hidden\" />\n        <div class=\"flex min-h-0 flex-1 flex-row\">\n          <!-- App sidebar -->\n          <AppSidebar\n            v-model:isSidebarOpen=\"app.sidebar.isOpen.value\"\n            :activeWorkspace=\"app.workspace.activeWorkspace.value\"\n            :eventBus=\"app.eventBus\"\n            :isWorkspaceOpen=\"app.workspace.isOpen.value\"\n            :layout\n            :sidebarState=\"app.sidebar.state\"\n            :sidebarWidth=\"app.sidebar.width.value\"\n            :store=\"app.store.value!\"\n            :workspaces=\"app.workspace.workspaceGroups.value\"\n            @click:workspace=\"navigateToWorkspaceOverview\"\n            @create:workspace=\"createWorkspaceModalState.show()\"\n            @select:workspace=\"setActiveWorkspace\"\n            @selectItem=\"app.sidebar.handleSelectItem\"\n            @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\">\n            <template #sidebarMenuActions>\n              <slot name=\"sidebar-menu-actions\" />\n            </template>\n          </AppSidebar>\n\n          <div class=\"flex flex-1 flex-col\">\n            <!-- App Tabs -->\n            <DesktopTabs\n              v-if=\"layout === 'desktop'\"\n              :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n              :eventBus=\"app.eventBus\"\n              :tabs=\"app.tabs.state.value\" />\n\n            <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n            <div class=\"bg-b-1 relative min-h-0 flex-1\">\n              <RouterView v-bind=\"routerViewProps\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <slot\n        name=\"create-workspace\"\n        :state=\"createWorkspaceModalState\">\n        <!-- Create workspace modal -->\n        <CreateWorkspaceModal\n          :state=\"createWorkspaceModalState\"\n          @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n      </slot>\n\n      <!-- Popup command palette to add resources from anywhere -->\n      <TheCommandPalette\n        :eventBus=\"app.eventBus\"\n        :paletteState=\"paletteState\"\n        :workspaceStore=\"app.store.value!\" />\n    </main>\n    <!-- Splash screen -->\n    <main v-else>\n      <SplashScreen />\n    </main>\n  </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"App.vue.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Main entry point for the API client for electron and web.\n *\n * This component handles all events and store business logic for the application.\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarTeleportRoot,\n  useModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type { ImportDocumentFromRegistry } from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { type AppState } from './app-state'\nimport AppSidebar from './components/AppSidebar.vue'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n  layout,\n  plugins = [],\n  getAppState,\n  getCommandPaletteState,\n  fetchRegistryDocument,\n} = defineProps<{\n  layout: Exclude<ClientLayout, 'modal'>\n  plugins?: ClientPlugin[]\n  getAppState: () => AppState\n  getCommandPaletteState: () => CommandPaletteState\n  /** Fetches the full document from registry by meta. Passed through to route props for sync. */\n  fetchRegistryDocument?: ImportDocumentFromRegistry\n}>()\n\ndefineSlots<{\n  /**\n   * Slot for customizing the actions section of the sidebar menu.\n   * This slot is used to render custom actions or components within the actions section.\n   */\n  'sidebar-menu-actions': () => unknown\n  /**\n   * Slot for customizing the create workspace modal.\n   * This slot is used to render custom actions or components within the create workspace modal.\n   */\n  'create-workspace'?: (payload: { state: ModalState }) => unknown\n}>()\n\ndefineExpose({\n  openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/** Expose workspace store to window for debugging purposes. */\nif (typeof window !== 'undefined') {\n  window.dataDumpWorkspace = () => app.store.value\n  window.dumpAppState = () => app\n}\n\n/** Call lifecycle hooks on plugins and subscribe to event bus events */\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n  plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n  if (plugin.on) {\n    for (const [event, handler] of Object.entries(plugin.on)) {\n      pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n    }\n  }\n}\n\n/** Notify plugins when telemetry config changes */\nwatch(app.telemetry, () => {\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onConfigChange?.({\n      config: { telemetry: app.telemetry.value },\n    })\n  }\n})\n\nonBeforeUnmount(() => {\n  for (const unsub of pluginUnsubscribes) {\n    unsub()\n  }\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onDestroy?.()\n  }\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/** Watch the active document for changes and rebase it with its remote source */\nuseDocumentWatcher({\n  documentName: () =>\n    app.store.value?.workspace[extensions.workspace.activeDocument],\n  store: app.store,\n  initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/** Color mode */\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/** Setup monaco editor configuration */\nuseMonacoEditorConfiguration({\n  theme: currentTheme,\n  darkMode: isDarkMode,\n})\n\nconst navigateToWorkspaceOverview = (namespace?: string, slug?: string) => {\n  app.eventBus.emit('ui:navigate', {\n    page: 'workspace',\n    path: 'environment',\n    namespace,\n    workspaceSlug: slug,\n  })\n}\n\n/** Sets the active workspace by ID: finds the workspace in the list and updates app state & navigation. */\nconst setActiveWorkspace = (id?: string) => {\n  if (!id) {\n    return\n  }\n  const workspace = app.workspace.workspaceList.value?.find(\n    (workspace) => workspace.id === id,\n  )\n  if (!workspace) {\n    return\n  }\n\n  navigateToWorkspaceOverview(workspace.namespace, workspace.slug)\n}\n\nconst createWorkspaceModalState = useModal()\n\n/** Props to pass to the RouterView component. */\nconst routerViewProps = computed<RouteProps>(() => {\n  return {\n    documentSlug: app.activeEntities.documentSlug.value ?? '',\n    document: app.store.value?.workspace.activeDocument ?? null,\n    environment: app.environment.value,\n    eventBus: app.eventBus,\n    exampleName: app.activeEntities.exampleName.value,\n    fetchRegistryDocument,\n    layout,\n    method: app.activeEntities.method.value,\n    path: app.activeEntities.path.value,\n    workspaceStore: app.store.value!,\n    activeWorkspace: app.workspace.activeWorkspace.value!,\n    plugins,\n    isDarkMode: app.isDarkMode.value,\n    currentTheme: app.theme.styles.value.themeStyles,\n    customThemes: toValue(app.theme.customThemes),\n    telemetry: app.telemetry.value,\n    onUpdateTelemetry: (value: boolean) => {\n      app.telemetry.value = value\n    },\n    options: app.options,\n  }\n})\n</script>\n\n<template>\n  <ScalarTeleportRoot>\n    <!-- Theme style tag -->\n    <div v-html=\"app.theme.themeStyleTag.value\" />\n\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- Main content -->\n    <main\n      v-if=\"\n        app.store.value !== null &&\n        app.workspace.activeWorkspace.value !== null &&\n        !app.loading.value\n      \">\n      <div\n        class=\"relative flex w-dvw flex-col\"\n        :class=\"layout === 'web' ? 'min-h-0' : 'h-dvh'\">\n        <SidebarToggle\n          v-model=\"app.sidebar.isOpen.value\"\n          class=\"absolute z-60 md:hidden\"\n          :class=\"layout === 'desktop' ? 'top-14 left-4' : 'top-4 left-4'\" />\n        <div class=\"flex min-h-0 flex-1 flex-row\">\n          <!-- App sidebar -->\n          <AppSidebar\n            v-model:isSidebarOpen=\"app.sidebar.isOpen.value\"\n            :activeWorkspace=\"app.workspace.activeWorkspace.value\"\n            :eventBus=\"app.eventBus\"\n            :isWorkspaceOpen=\"app.workspace.isOpen.value\"\n            :layout\n            :sidebarState=\"app.sidebar.state\"\n            :sidebarWidth=\"app.sidebar.width.value\"\n            :store=\"app.store.value!\"\n            :workspaces=\"app.workspace.workspaceGroups.value\"\n            @click:workspace=\"navigateToWorkspaceOverview\"\n            @create:workspace=\"createWorkspaceModalState.show()\"\n            @select:workspace=\"setActiveWorkspace\"\n            @selectItem=\"app.sidebar.handleSelectItem\"\n            @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\">\n            <template #sidebarMenuActions>\n              <slot name=\"sidebar-menu-actions\" />\n            </template>\n          </AppSidebar>\n\n          <div class=\"flex min-h-0 flex-1 flex-col\">\n            <!-- App Tabs -->\n            <DesktopTabs\n              v-if=\"layout === 'desktop'\"\n              :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n              :eventBus=\"app.eventBus\"\n              :tabs=\"app.tabs.state.value\" />\n\n            <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n            <div class=\"bg-b-1 relative min-h-0 flex-1\">\n              <RouterView v-bind=\"routerViewProps\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <slot\n        name=\"create-workspace\"\n        :state=\"createWorkspaceModalState\">\n        <!-- Create workspace modal -->\n        <CreateWorkspaceModal\n          :state=\"createWorkspaceModalState\"\n          @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n      </slot>\n\n      <!-- Popup command palette to add resources from anywhere -->\n      <TheCommandPalette\n        :eventBus=\"app.eventBus\"\n        :paletteState=\"paletteState\"\n        :workspaceStore=\"app.store.value!\" />\n    </main>\n    <!-- Splash screen -->\n    <main v-else>\n      <SplashScreen />\n    </main>\n  </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n"],"mappings":""}

package/dist/v2/features/app/App.vue.script.js

@@ -8,7 +8,7 @@ import { useColorMode } from "../../hooks/use-color-mode.js";
 import { useGlobalHotKeys } from "../../hooks/use-global-hot-keys.js";
 import AppSidebar_default from "./components/AppSidebar.vue.js";
 import DesktopTabs_default from "./components/DesktopTabs.vue.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, onBeforeUnmount, openBlock, renderSlot, toValue, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, onBeforeUnmount, openBlock, renderSlot, toValue, unref, watch, withCtx } from "vue";
 import { ScalarTeleportRoot, useModal } from "@scalar/components";
 import { ScalarToasts } from "@scalar/use-toasts";
 import { RouterView } from "vue-router";
@@ -16,11 +16,10 @@ import { extensions } from "@scalar/workspace-store/schemas/extensions";
 //#region src/v2/features/app/App.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];
 var _hoisted_2 = { key: 0 };
-var _hoisted_3 = { class: "relative flex h-dvh w-dvw flex-1 flex-col" };
-var _hoisted_4 = { class: "flex min-h-0 flex-1 flex-row" };
-var _hoisted_5 = { class: "flex flex-1 flex-col" };
-var _hoisted_6 = { class: "bg-b-1 relative min-h-0 flex-1" };
-var _hoisted_7 = { key: 1 };
+var _hoisted_3 = { class: "flex min-h-0 flex-1 flex-row" };
+var _hoisted_4 = { class: "flex min-h-0 flex-1 flex-col" };
+var _hoisted_5 = { class: "bg-b-1 relative min-h-0 flex-1" };
+var _hoisted_6 = { key: 1 };
 var App_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "App",
 	props: {
@@ -115,11 +114,11 @@ var App_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 					createElementVNode("div", { innerHTML: unref(app).theme.themeStyleTag.value }, null, 8, _hoisted_1),
 					createVNode(unref(ScalarToasts)),
 					unref(app).store.value !== null && unref(app).workspace.activeWorkspace.value !== null && !unref(app).loading.value ? (openBlock(), createElementBlock("main", _hoisted_2, [
-						createElementVNode("div", _hoisted_3, [createVNode(unref(SidebarToggle_default), {
+						createElementVNode("div", { class: normalizeClass(["relative flex w-dvw flex-col", __props.layout === "web" ? "min-h-0" : "h-dvh"]) }, [createVNode(unref(SidebarToggle_default), {
 							modelValue: unref(app).sidebar.isOpen.value,
 							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(app).sidebar.isOpen.value = $event),
-							class: "absolute top-4 left-3 z-[60] md:hidden"
-						}, null, 8, ["modelValue"]), createElementVNode("div", _hoisted_4, [createVNode(AppSidebar_default, {
+							class: normalizeClass(["absolute z-60 md:hidden", __props.layout === "desktop" ? "top-14 left-4" : "top-4 left-4"])
+						}, null, 8, ["modelValue", "class"]), createElementVNode("div", _hoisted_3, [createVNode(AppSidebar_default, {
 							isSidebarOpen: unref(app).sidebar.isOpen.value,
 							"onUpdate:isSidebarOpen": _cache[1] || (_cache[1] = ($event) => unref(app).sidebar.isOpen.value = $event),
 							activeWorkspace: unref(app).workspace.activeWorkspace.value,
@@ -150,7 +149,7 @@ var App_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 							"workspaces",
 							"onSelectItem",
 							"onUpdate:sidebarWidth"
-						]), createElementVNode("div", _hoisted_5, [__props.layout === "desktop" ? (openBlock(), createBlock(DesktopTabs_default, {
+						]), createElementVNode("div", _hoisted_4, [__props.layout === "desktop" ? (openBlock(), createBlock(DesktopTabs_default, {
 							key: 0,
 							activeTabIndex: unref(app).tabs.activeTabIndex.value,
 							eventBus: unref(app).eventBus,
@@ -159,7 +158,7 @@ var App_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 							"activeTabIndex",
 							"eventBus",
 							"tabs"
-						])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createVNode(unref(RouterView), normalizeProps(guardReactiveProps(routerViewProps.value)), null, 16)])])])]),
+						])) : createCommentVNode("", true), createElementVNode("div", _hoisted_5, [createVNode(unref(RouterView), normalizeProps(guardReactiveProps(routerViewProps.value)), null, 16)])])])], 2),
 						renderSlot(_ctx.$slots, "create-workspace", { state: unref(createWorkspaceModalState) }, () => [createVNode(CreateWorkspaceModal_default, {
 							state: unref(createWorkspaceModalState),
 							"onCreate:workspace": _cache[3] || (_cache[3] = (payload) => unref(app).workspace.create(payload))
@@ -173,7 +172,7 @@ var App_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 							"paletteState",
 							"workspaceStore"
 						])
-					])) : (openBlock(), createElementBlock("main", _hoisted_7, [createVNode(SplashScreen_default)]))
+					])) : (openBlock(), createElementBlock("main", _hoisted_6, [createVNode(SplashScreen_default)]))
 				]),
 				_: 3
 			});

package/dist/v2/features/app/App.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.vue.script.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Main entry point for the API client for electron and web.\n *\n * This component handles all events and store business logic for the application.\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarTeleportRoot,\n  useModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type { ImportDocumentFromRegistry } from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { type AppState } from './app-state'\nimport AppSidebar from './components/AppSidebar.vue'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n  layout,\n  plugins = [],\n  getAppState,\n  getCommandPaletteState,\n  fetchRegistryDocument,\n} = defineProps<{\n  layout: Exclude<ClientLayout, 'modal'>\n  plugins?: ClientPlugin[]\n  getAppState: () => AppState\n  getCommandPaletteState: () => CommandPaletteState\n  /** Fetches the full document from registry by meta. Passed through to route props for sync. */\n  fetchRegistryDocument?: ImportDocumentFromRegistry\n}>()\n\ndefineSlots<{\n  /**\n   * Slot for customizing the actions section of the sidebar menu.\n   * This slot is used to render custom actions or components within the actions section.\n   */\n  'sidebar-menu-actions': () => unknown\n  /**\n   * Slot for customizing the create workspace modal.\n   * This slot is used to render custom actions or components within the create workspace modal.\n   */\n  'create-workspace'?: (payload: { state: ModalState }) => unknown\n}>()\n\ndefineExpose({\n  openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/** Expose workspace store to window for debugging purposes. */\nif (typeof window !== 'undefined') {\n  window.dataDumpWorkspace = () => app.store.value\n  window.dumpAppState = () => app\n}\n\n/** Call lifecycle hooks on plugins and subscribe to event bus events */\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n  plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n  if (plugin.on) {\n    for (const [event, handler] of Object.entries(plugin.on)) {\n      pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n    }\n  }\n}\n\n/** Notify plugins when telemetry config changes */\nwatch(app.telemetry, () => {\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onConfigChange?.({\n      config: { telemetry: app.telemetry.value },\n    })\n  }\n})\n\nonBeforeUnmount(() => {\n  for (const unsub of pluginUnsubscribes) {\n    unsub()\n  }\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onDestroy?.()\n  }\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/** Watch the active document for changes and rebase it with its remote source */\nuseDocumentWatcher({\n  documentName: () =>\n    app.store.value?.workspace[extensions.workspace.activeDocument],\n  store: app.store,\n  initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/** Color mode */\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/** Setup monaco editor configuration */\nuseMonacoEditorConfiguration({\n  theme: currentTheme,\n  darkMode: isDarkMode,\n})\n\nconst navigateToWorkspaceOverview = (namespace?: string, slug?: string) => {\n  app.eventBus.emit('ui:navigate', {\n    page: 'workspace',\n    path: 'environment',\n    namespace,\n    workspaceSlug: slug,\n  })\n}\n\n/** Sets the active workspace by ID: finds the workspace in the list and updates app state & navigation. */\nconst setActiveWorkspace = (id?: string) => {\n  if (!id) {\n    return\n  }\n  const workspace = app.workspace.workspaceList.value?.find(\n    (workspace) => workspace.id === id,\n  )\n  if (!workspace) {\n    return\n  }\n\n  navigateToWorkspaceOverview(workspace.namespace, workspace.slug)\n}\n\nconst createWorkspaceModalState = useModal()\n\n/** Props to pass to the RouterView component. */\nconst routerViewProps = computed<RouteProps>(() => {\n  return {\n    documentSlug: app.activeEntities.documentSlug.value ?? '',\n    document: app.store.value?.workspace.activeDocument ?? null,\n    environment: app.environment.value,\n    eventBus: app.eventBus,\n    exampleName: app.activeEntities.exampleName.value,\n    fetchRegistryDocument,\n    layout,\n    method: app.activeEntities.method.value,\n    path: app.activeEntities.path.value,\n    workspaceStore: app.store.value!,\n    activeWorkspace: app.workspace.activeWorkspace.value!,\n    plugins,\n    isDarkMode: app.isDarkMode.value,\n    currentTheme: app.theme.styles.value.themeStyles,\n    customThemes: toValue(app.theme.customThemes),\n    telemetry: app.telemetry.value,\n    onUpdateTelemetry: (value: boolean) => {\n      app.telemetry.value = value\n    },\n    options: app.options,\n  }\n})\n</script>\n\n<template>\n  <ScalarTeleportRoot>\n    <!-- Theme style tag -->\n    <div v-html=\"app.theme.themeStyleTag.value\" />\n\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- Main content -->\n    <main\n      v-if=\"\n        app.store.value !== null &&\n        app.workspace.activeWorkspace.value !== null &&\n        !app.loading.value\n      \">\n      <div class=\"relative flex h-dvh w-dvw flex-1 flex-col\">\n        <SidebarToggle\n          v-model=\"app.sidebar.isOpen.value\"\n          class=\"absolute top-4 left-3 z-[60] md:hidden\" />\n        <div class=\"flex min-h-0 flex-1 flex-row\">\n          <!-- App sidebar -->\n          <AppSidebar\n            v-model:isSidebarOpen=\"app.sidebar.isOpen.value\"\n            :activeWorkspace=\"app.workspace.activeWorkspace.value\"\n            :eventBus=\"app.eventBus\"\n            :isWorkspaceOpen=\"app.workspace.isOpen.value\"\n            :layout\n            :sidebarState=\"app.sidebar.state\"\n            :sidebarWidth=\"app.sidebar.width.value\"\n            :store=\"app.store.value!\"\n            :workspaces=\"app.workspace.workspaceGroups.value\"\n            @click:workspace=\"navigateToWorkspaceOverview\"\n            @create:workspace=\"createWorkspaceModalState.show()\"\n            @select:workspace=\"setActiveWorkspace\"\n            @selectItem=\"app.sidebar.handleSelectItem\"\n            @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\">\n            <template #sidebarMenuActions>\n              <slot name=\"sidebar-menu-actions\" />\n            </template>\n          </AppSidebar>\n\n          <div class=\"flex flex-1 flex-col\">\n            <!-- App Tabs -->\n            <DesktopTabs\n              v-if=\"layout === 'desktop'\"\n              :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n              :eventBus=\"app.eventBus\"\n              :tabs=\"app.tabs.state.value\" />\n\n            <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n            <div class=\"bg-b-1 relative min-h-0 flex-1\">\n              <RouterView v-bind=\"routerViewProps\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <slot\n        name=\"create-workspace\"\n        :state=\"createWorkspaceModalState\">\n        <!-- Create workspace modal -->\n        <CreateWorkspaceModal\n          :state=\"createWorkspaceModalState\"\n          @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n      </slot>\n\n      <!-- Popup command palette to add resources from anywhere -->\n      <TheCommandPalette\n        :eventBus=\"app.eventBus\"\n        :paletteState=\"paletteState\"\n        :workspaceStore=\"app.store.value!\" />\n    </main>\n    <!-- Splash screen -->\n    <main v-else>\n      <SplashScreen />\n    </main>\n  </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"App.vue.script.js","names":[],"sources":["../../../../src/v2/features/app/App.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Main entry point for the API client for electron and web.\n *\n * This component handles all events and store business logic for the application.\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarTeleportRoot,\n  useModal,\n  type ModalState,\n} from '@scalar/components'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport { extensions } from '@scalar/workspace-store/schemas/extensions'\nimport { computed, onBeforeUnmount, toValue, watch } from 'vue'\nimport { RouterView } from 'vue-router'\n\nimport { SidebarToggle } from '@/v2/components/sidebar'\nimport CreateWorkspaceModal from '@/v2/features/app/components/CreateWorkspaceModal.vue'\nimport SplashScreen from '@/v2/features/app/components/SplashScreen.vue'\nimport type { RouteProps } from '@/v2/features/app/helpers/routes'\nimport { useDocumentWatcher } from '@/v2/features/app/hooks/use-document-watcher'\nimport type { CommandPaletteState } from '@/v2/features/command-palette/hooks/use-command-palette-state'\nimport TheCommandPalette from '@/v2/features/command-palette/TheCommandPalette.vue'\nimport { useMonacoEditorConfiguration } from '@/v2/features/editor'\nimport { useColorMode } from '@/v2/hooks/use-color-mode'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport type { ImportDocumentFromRegistry } from '@/v2/types/configuration'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { type AppState } from './app-state'\nimport AppSidebar from './components/AppSidebar.vue'\nimport DesktopTabs from './components/DesktopTabs.vue'\n\nconst {\n  layout,\n  plugins = [],\n  getAppState,\n  getCommandPaletteState,\n  fetchRegistryDocument,\n} = defineProps<{\n  layout: Exclude<ClientLayout, 'modal'>\n  plugins?: ClientPlugin[]\n  getAppState: () => AppState\n  getCommandPaletteState: () => CommandPaletteState\n  /** Fetches the full document from registry by meta. Passed through to route props for sync. */\n  fetchRegistryDocument?: ImportDocumentFromRegistry\n}>()\n\ndefineSlots<{\n  /**\n   * Slot for customizing the actions section of the sidebar menu.\n   * This slot is used to render custom actions or components within the actions section.\n   */\n  'sidebar-menu-actions': () => unknown\n  /**\n   * Slot for customizing the create workspace modal.\n   * This slot is used to render custom actions or components within the create workspace modal.\n   */\n  'create-workspace'?: (payload: { state: ModalState }) => unknown\n}>()\n\ndefineExpose({\n  openCreateWorkspace: () => createWorkspaceModalState.show(),\n})\n\nconst app = getAppState()\nconst paletteState = getCommandPaletteState()\n\n/** Expose workspace store to window for debugging purposes. */\nif (typeof window !== 'undefined') {\n  window.dataDumpWorkspace = () => app.store.value\n  window.dumpAppState = () => app\n}\n\n/** Call lifecycle hooks on plugins and subscribe to event bus events */\nconst pluginUnsubscribes: (() => void)[] = []\n\nfor (const plugin of plugins) {\n  plugin.lifecycle?.onInit?.({ config: { telemetry: app.telemetry.value } })\n\n  if (plugin.on) {\n    for (const [event, handler] of Object.entries(plugin.on)) {\n      pluginUnsubscribes.push(app.eventBus.on(event as any, handler as any))\n    }\n  }\n}\n\n/** Notify plugins when telemetry config changes */\nwatch(app.telemetry, () => {\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onConfigChange?.({\n      config: { telemetry: app.telemetry.value },\n    })\n  }\n})\n\nonBeforeUnmount(() => {\n  for (const unsub of pluginUnsubscribes) {\n    unsub()\n  }\n  for (const plugin of plugins) {\n    plugin.lifecycle?.onDestroy?.()\n  }\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(app.eventBus, layout)\n\nconst DEFAULT_DOCUMENT_WATCH_TIMEOUT = 5000\n\n/** Watch the active document for changes and rebase it with its remote source */\nuseDocumentWatcher({\n  documentName: () =>\n    app.store.value?.workspace[extensions.workspace.activeDocument],\n  store: app.store,\n  initialTimeout: DEFAULT_DOCUMENT_WATCH_TIMEOUT,\n})\n\n/** Color mode */\nuseColorMode({ workspaceStore: app.store })\n\nconst currentTheme = computed(() => app.theme.styles.value.themeStyles)\nconst isDarkMode = computed(() => app.isDarkMode.value)\n\n/** Setup monaco editor configuration */\nuseMonacoEditorConfiguration({\n  theme: currentTheme,\n  darkMode: isDarkMode,\n})\n\nconst navigateToWorkspaceOverview = (namespace?: string, slug?: string) => {\n  app.eventBus.emit('ui:navigate', {\n    page: 'workspace',\n    path: 'environment',\n    namespace,\n    workspaceSlug: slug,\n  })\n}\n\n/** Sets the active workspace by ID: finds the workspace in the list and updates app state & navigation. */\nconst setActiveWorkspace = (id?: string) => {\n  if (!id) {\n    return\n  }\n  const workspace = app.workspace.workspaceList.value?.find(\n    (workspace) => workspace.id === id,\n  )\n  if (!workspace) {\n    return\n  }\n\n  navigateToWorkspaceOverview(workspace.namespace, workspace.slug)\n}\n\nconst createWorkspaceModalState = useModal()\n\n/** Props to pass to the RouterView component. */\nconst routerViewProps = computed<RouteProps>(() => {\n  return {\n    documentSlug: app.activeEntities.documentSlug.value ?? '',\n    document: app.store.value?.workspace.activeDocument ?? null,\n    environment: app.environment.value,\n    eventBus: app.eventBus,\n    exampleName: app.activeEntities.exampleName.value,\n    fetchRegistryDocument,\n    layout,\n    method: app.activeEntities.method.value,\n    path: app.activeEntities.path.value,\n    workspaceStore: app.store.value!,\n    activeWorkspace: app.workspace.activeWorkspace.value!,\n    plugins,\n    isDarkMode: app.isDarkMode.value,\n    currentTheme: app.theme.styles.value.themeStyles,\n    customThemes: toValue(app.theme.customThemes),\n    telemetry: app.telemetry.value,\n    onUpdateTelemetry: (value: boolean) => {\n      app.telemetry.value = value\n    },\n    options: app.options,\n  }\n})\n</script>\n\n<template>\n  <ScalarTeleportRoot>\n    <!-- Theme style tag -->\n    <div v-html=\"app.theme.themeStyleTag.value\" />\n\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- Main content -->\n    <main\n      v-if=\"\n        app.store.value !== null &&\n        app.workspace.activeWorkspace.value !== null &&\n        !app.loading.value\n      \">\n      <div\n        class=\"relative flex w-dvw flex-col\"\n        :class=\"layout === 'web' ? 'min-h-0' : 'h-dvh'\">\n        <SidebarToggle\n          v-model=\"app.sidebar.isOpen.value\"\n          class=\"absolute z-60 md:hidden\"\n          :class=\"layout === 'desktop' ? 'top-14 left-4' : 'top-4 left-4'\" />\n        <div class=\"flex min-h-0 flex-1 flex-row\">\n          <!-- App sidebar -->\n          <AppSidebar\n            v-model:isSidebarOpen=\"app.sidebar.isOpen.value\"\n            :activeWorkspace=\"app.workspace.activeWorkspace.value\"\n            :eventBus=\"app.eventBus\"\n            :isWorkspaceOpen=\"app.workspace.isOpen.value\"\n            :layout\n            :sidebarState=\"app.sidebar.state\"\n            :sidebarWidth=\"app.sidebar.width.value\"\n            :store=\"app.store.value!\"\n            :workspaces=\"app.workspace.workspaceGroups.value\"\n            @click:workspace=\"navigateToWorkspaceOverview\"\n            @create:workspace=\"createWorkspaceModalState.show()\"\n            @select:workspace=\"setActiveWorkspace\"\n            @selectItem=\"app.sidebar.handleSelectItem\"\n            @update:sidebarWidth=\"app.sidebar.handleSidebarWidthUpdate\">\n            <template #sidebarMenuActions>\n              <slot name=\"sidebar-menu-actions\" />\n            </template>\n          </AppSidebar>\n\n          <div class=\"flex min-h-0 flex-1 flex-col\">\n            <!-- App Tabs -->\n            <DesktopTabs\n              v-if=\"layout === 'desktop'\"\n              :activeTabIndex=\"app.tabs.activeTabIndex.value\"\n              :eventBus=\"app.eventBus\"\n              :tabs=\"app.tabs.state.value\" />\n\n            <!-- Router view min-h-0 is required for scrolling, do not remove it -->\n            <div class=\"bg-b-1 relative min-h-0 flex-1\">\n              <RouterView v-bind=\"routerViewProps\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <slot\n        name=\"create-workspace\"\n        :state=\"createWorkspaceModalState\">\n        <!-- Create workspace modal -->\n        <CreateWorkspaceModal\n          :state=\"createWorkspaceModalState\"\n          @create:workspace=\"(payload) => app.workspace.create(payload)\" />\n      </slot>\n\n      <!-- Popup command palette to add resources from anywhere -->\n      <TheCommandPalette\n        :eventBus=\"app.eventBus\"\n        :paletteState=\"paletteState\"\n        :workspaceStore=\"app.store.value!\" />\n    </main>\n    <!-- Splash screen -->\n    <main v-else>\n      <SplashScreen />\n    </main>\n  </ScalarTeleportRoot>\n</template>\n\n<style>\n#scalar-client {\n  position: relative;\n  background-color: var(--scalar-background-2);\n}\n.dark-mode #scalar-client {\n  background-color: color-mix(in srgb, var(--scalar-background-1) 65%, black);\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/features/app/components/AppSidebar.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import AppSidebar_vue_vue_type_script_setup_true_lang_default from "./AppSidebar.vue.script.js";
 /* empty css                         */
 //#region src/v2/features/app/components/AppSidebar.vue
-var AppSidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(AppSidebar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-96a54993"]]);
+var AppSidebar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(AppSidebar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8269f62b"]]);
 //#endregion
 export { AppSidebar_default as default };
 

package/dist/v2/features/app/components/AppSidebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.vue.js","names":[],"sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIconButton,\n  ScalarModal,\n  ScalarSidebarItem,\n  useModal,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport {\n  ScalarIconDotsThree,\n  ScalarIconGearSix,\n  ScalarIconPlus,\n} from '@scalar/icons'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { DraggingItem, HoveredItem, SidebarState } from '@scalar/sidebar'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getParentEntry } from '@scalar/workspace-store/navigation'\nimport type {\n  TraversedEntry,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { capitalize, computed, nextTick, ref } from 'vue'\n\nimport Rabbit from '@/assets/rabbit.ascii?raw'\nimport RabbitJump from '@/assets/rabbitjump.ascii?raw'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { Sidebar } from '@/v2/components/sidebar'\nimport DownloadAppButton from '@/v2/features/app/components/DownloadAppButton.vue'\nimport SidebarItemMenu from '@/v2/features/app/components/SidebarItemMenu.vue'\nimport { createTempOperation } from '@/v2/features/app/helpers/create-temp-operation'\nimport { dragHandleFactory } from '@/v2/helpers/drag-handle-factory'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { sidebarState, layout, activeWorkspace, workspaces, store, eventBus } =\n  defineProps<{\n    /**\n     * The current layout of the app (e.g., 'desktop', 'web')\n     */\n    layout: ClientLayout\n\n    /**\n     * The sidebar state, holding navigation items and state\n     */\n    sidebarState: SidebarState<TraversedEntry>\n\n    /**\n     * Whether the workspace overview sidebar is currently open\n     */\n    isWorkspaceOpen?: boolean\n    /**\n     * The currently active workspace.\n     * This represents the workspace that the user is currently working in.\n     */\n    activeWorkspace: { id: string; label: string }\n    /**\n     * The list of all available workspaces.\n     * Used to render options for workspace switching and selection.\n     */\n    workspaces: WorkspaceGroup[]\n    /**\n     * The workspace event bus for handling workspace-level events.\n     * Used for triggering and responding to workspace changes and actions.\n     */\n    eventBus: WorkspaceEventBus\n    /**\n     * The WorkspaceStore instance for managing workspace state and actions.\n     * Provides methods and state for interacting with the current workspace.\n     */\n    store: WorkspaceStore\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the workspace button in the sidebar is clicked */\n  (e: 'click:workspace'): void\n  /** Emitted when a navigation or sidebar item is selected by ID */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user requests to create a new workspace */\n  (e: 'create:workspace'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n\n/** The label for the workspace button in the sidebar */\nconst workspaceLabel = computed(() => capitalize(activeWorkspace.label))\n\n/** Controls the visibility of the sidebar */\nconst isSidebarOpen = defineModel<boolean>('isSidebarOpen', {\n  required: true,\n})\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\n/** Calculate if we should show the getting started section */\nconst showGettingStarted = computed(() => sidebarState.items.value.length <= 1)\n\n/*\n * Setup drag and drop handlers for sidebar items.\n * The dragHandleFactory takes the current workspace store and sidebar state,\n * and returns the appropriate handlers for drag ending and droppability.\n *\n * We use computed to ensure the handlers are recreated when the store or sidebarState changes,\n * so they always have access to the latest values.\n */\nconst dragHandlers = computed(() =>\n  dragHandleFactory({\n    store,\n    sidebarState,\n  }),\n)\n\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.handleDragEnd(draggingItem, hoveredItem)\n}\n\nconst isDroppable = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.isDroppable(draggingItem, hoveredItem)\n}\n\n/** The current target for the dropdown menu */\nconst menuTarget = ref<{\n  /** The sidebar item that the menu is targeting */\n  item: TraversedEntry\n  /** A reference to the element that the menu is for */\n  el: HTMLElement\n  /** Whether or not to show the menu */\n  showMenu: boolean\n} | null>(null)\n\nconst deleteModalState = useModal()\n\n/** Computes the message for the delete modal */\nconst deleteMessage = computed(() => {\n  const item = menuTarget.value?.item\n\n  if (item?.type === 'document') {\n    return \"This cannot be undone. You're about to delete the document and all tags and operations inside it.\"\n  }\n\n  return `Are you sure you want to delete this ${item?.type ?? 'item'}? This action cannot be undone.`\n})\n\n/** Deletes an item from the sidebar by emitting the appropriate event */\nconst handleDelete = () => {\n  const item = menuTarget.value?.item\n\n  if (!item) {\n    return\n  }\n\n  const result = sidebarState.getEntryById(item.id)\n\n  const document = getParentEntry('document', result)\n  const operation = getParentEntry('operation', result)\n\n  if (!document) {\n    return\n  }\n\n  if (item.type === 'document') {\n    eventBus.emit('document:delete:document', { name: document.name })\n  } else if (item.type === 'tag') {\n    eventBus.emit('tag:delete:tag', {\n      documentName: document.name,\n      name: item.name,\n    })\n  } else if (item.type === 'operation') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:operation', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n      },\n      documentName: document.name,\n    })\n  } else if (item.type === 'example') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:example', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n        exampleKey: item.name,\n      },\n      documentName: document.name,\n    })\n  }\n\n  /** Clean up after deletion */\n  deleteModalState.hide()\n  menuTarget.value = null\n}\n\n/** Opens the dropdown menu for the given item */\nconst openMenu = async (\n  event: MouseEvent | KeyboardEvent,\n  item: TraversedEntry,\n) => {\n  if (menuTarget.value?.showMenu) {\n    return\n  }\n\n  const el = event.currentTarget as HTMLElement\n  menuTarget.value = { item, el, showMenu: true }\n\n  // Wait for the target to bind to the element\n  await nextTick()\n\n  // Re-dispatch the event on the target to open the menu\n  const cloned =\n    event instanceof MouseEvent\n      ? new MouseEvent(event.type, event)\n      : new KeyboardEvent(event.type, event)\n\n  menuTarget.value?.el.dispatchEvent(cloned)\n}\n\n/** Closes the dropdown menu */\nconst closeMenu = () => {\n  if (menuTarget.value) {\n    menuTarget.value.showMenu = false\n  }\n}\n\n/**\n * Creates a new operation directly from the empty folder slot.\n * Uses a unique temporary path to avoid conflicts, then navigates to the operation,\n * updates the path to `/`, and focuses the address bar so the user can immediately start typing.\n */\nconst handleAddEmptyFolder = (item: TraversedEntry) => {\n  const itemWithParent = sidebarState.getEntryById(item.id)\n  const documentName = getParentEntry('document', itemWithParent)?.name\n  const tagName = getParentEntry('tag', itemWithParent)?.name\n\n  if (!documentName) {\n    console.error('Document name not found')\n    return\n  }\n  createTempOperation(documentName, {\n    existingPaths: new Set(\n      Object.keys(store.workspace.documents[documentName]?.paths ?? {}),\n    ),\n    eventBus,\n    tags: tagName ? [tagName] : undefined,\n  })\n}\n\n/**\n * Navigates to the operations page for the provided operation item.\n * Emits a navigation event for the operation overview page.\n */\nconst navigateToOperationsPage = (item: TraversedOperation) => {\n  const operationWithParent = sidebarState.getEntryById(item.id)\n  const documentSlug = getParentEntry('document', operationWithParent)?.name\n\n  eventBus.emit('ui:navigate', {\n    page: 'operation',\n    path: 'overview',\n    operationPath: item.path,\n    method: item.method,\n    documentSlug: documentSlug,\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex\">\n    <Sidebar\n      v-model:sidebarWidth=\"sidebarWidth\"\n      :activeWorkspace=\"activeWorkspace\"\n      :class=\"[\n        'max-md:inset-y-0 max-md:z-2 max-md:w-full!',\n        isSidebarOpen ? 'max-md:fixed! max-md:flex!' : 'max-md:hidden!',\n      ]\"\n      :documents=\"Object.values(store.workspace.documents)\"\n      :isDroppable=\"isDroppable\"\n      :layout=\"layout\"\n      :sidebarState=\"sidebarState\"\n      :workspaces=\"workspaces\"\n      @create:workspace=\"emit('create:workspace')\"\n      @navigate:to:settings=\"\n        eventBus.emit('ui:navigate', { page: 'workspace', path: 'settings' })\n      \"\n      @reorder=\"\n        (draggingItem, hoveredItem) => handleDragEnd(draggingItem, hoveredItem)\n      \"\n      @select:workspace=\"(id) => emit('select:workspace', id)\"\n      @selectItem=\"(id) => emit('selectItem', id)\">\n      <template #sidebarMenuActions>\n        <slot name=\"sidebarMenuActions\" />\n      </template>\n      <!-- Workspace Identifier -->\n      <template #workspaceButton>\n        <ScalarSidebarItem\n          is=\"button\"\n          :active=\"isWorkspaceOpen\"\n          @click=\"emit('click:workspace')\">\n          {{ workspaceLabel }}\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Decorator dropdown menu -->\n      <template #decorator=\"{ item }\">\n        <div class=\"flex items-center gap-0.5\">\n          <ScalarIconButton\n            v-if=\"item.type === 'operation'\"\n            :icon=\"ScalarIconGearSix\"\n            label=\"Operation settings\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"navigateToOperationsPage(item)\"\n            @keydown.enter.stop=\"navigateToOperationsPage(item)\"\n            @keydown.space.stop=\"navigateToOperationsPage(item)\" />\n          <ScalarIconButton\n            aria-expanded=\"false\"\n            aria-haspopup=\"menu\"\n            :icon=\"ScalarIconDotsThree\"\n            label=\"More options\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"(e: MouseEvent) => openMenu(e, item)\"\n            @keydown.down.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.enter.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.space.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.up.stop=\"(e: KeyboardEvent) => openMenu(e, item)\" />\n        </div>\n      </template>\n\n      <!-- Dirty document icon slot -->\n      <template #icon=\"{ item }\">\n        <template\n          v-if=\"\n            item.type === 'document' &&\n            store.workspace.documents[item.name]?.['x-scalar-is-dirty'] === true\n          \">\n          <div class=\"relative flex items-center\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n            <div\n              class=\"bg-c-accent absolute -top-0.5 -right-0.5 size-1.5 rounded-full\">\n              <span class=\"sr-only\">Unsaved changes</span>\n            </div>\n          </div>\n        </template>\n      </template>\n\n      <!-- Empty folder slot -->\n      <template #empty=\"{ item }\">\n        <ScalarSidebarItem\n          is=\"button\"\n          @click=\"handleAddEmptyFolder(item)\">\n          <template #icon>\n            <ScalarIconPlus />\n          </template>\n          <template #default>Add operation</template>\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Getting started section -->\n      <template\n        v-if=\"layout !== 'modal'\"\n        #footer>\n        <div\n          :class=\"{\n            'empty-sidebar-item border-t': showGettingStarted,\n          }\">\n          <div\n            v-if=\"showGettingStarted\"\n            class=\"empty-sidebar-item-content overflow-hidden px-2.5 py-2.5\">\n            <div class=\"rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]\">\n              <ScalarAsciiArt\n                :art=\"Rabbit\"\n                class=\"rabbitsit font-bold\" />\n              <ScalarAsciiArt\n                :art=\"RabbitJump\"\n                class=\"rabbitjump absolute top-0 left-0 font-bold\" />\n            </div>\n            <div class=\"mt-2 mb-2 text-center text-sm text-balance\">\n              <b class=\"font-medium\">Let's Get Started</b>\n              <p class=\"mt-2 leading-5\">\n                Create request, folder, collection or import from\n                OpenAPI/Postman\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1.5 p-2\">\n            <ScalarButton\n              v-if=\"showGettingStarted\"\n              class=\"w-full\"\n              size=\"sm\"\n              @click=\"\n                eventBus.emit('ui:open:command-palette', {\n                  action: 'import-from-openapi-swagger-postman-curl',\n                  payload: undefined,\n                })\n              \">\n              Import Collection\n            </ScalarButton>\n\n            <ScalarButton\n              class=\"w-full\"\n              hotkey=\"K\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"eventBus.emit('ui:open:command-palette')\">\n              Add Item &nbsp;\n\n              <span\n                class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n                <template v-if=\"isMacOS()\">\n                  <span class=\"sr-only\">Command</span>\n                  <span aria-hidden=\"true\">⌘</span>\n                </template>\n                <template v-else>\n                  <span class=\"sr-only\">CTRL</span>\n                  <span aria-hidden=\"true\">⌃</span>\n                </template>\n                K\n              </span>\n            </ScalarButton>\n            <DownloadAppButton v-if=\"layout === 'web'\" />\n          </div>\n        </div>\n      </template>\n    </Sidebar>\n    <SidebarItemMenu\n      v-if=\"menuTarget?.showMenu\"\n      :eventBus=\"eventBus\"\n      :item=\"menuTarget.item\"\n      :sidebarState=\"sidebarState\"\n      :target=\"menuTarget.el\"\n      :workspaceStore=\"store\"\n      @closeMenu=\"closeMenu\"\n      @showDeleteModal=\"deleteModalState.show()\" />\n\n    <!-- Delete Modal -->\n    <ScalarModal\n      v-if=\"menuTarget\"\n      size=\"xxs\"\n      :state=\"deleteModalState\"\n      :title=\"`Delete ${menuTarget.item.title}`\">\n      <DeleteSidebarListElement\n        :variableName=\"menuTarget.item.title\"\n        :warningMessage=\"deleteMessage\"\n        @close=\"deleteModalState.hide()\"\n        @delete=\"handleDelete\" />\n    </ScalarModal>\n  </div>\n</template>\n\n<style scoped>\n.empty-sidebar-item-content {\n  display: none;\n}\n.empty-sidebar-item .empty-sidebar-item-content {\n  display: block;\n}\n.rabbitjump {\n  opacity: 0;\n}\n.empty-sidebar-item:hover .rabbitjump {\n  opacity: 1;\n  animation: rabbitAnimation 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbitsit {\n  opacity: 0;\n  animation: rabbitAnimation2 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbit-ascii {\n  animation: rabbitRun 8s infinite linear;\n}\n@keyframes rabbitRun {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  25% {\n    transform: translate3d(250px, 0, 0);\n  }\n  25.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  75% {\n    transform: translate3d(250px, 0, 0);\n  }\n  75.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes rabbitAnimation {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n}\n@keyframes rabbitAnimation2 {\n  0%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n    transform: translate3d(0, -8px, 0);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AppSidebar.vue.js","names":[],"sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIconButton,\n  ScalarModal,\n  ScalarSidebarItem,\n  useModal,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport {\n  ScalarIconDotsThree,\n  ScalarIconGearSix,\n  ScalarIconPlus,\n} from '@scalar/icons'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { DraggingItem, HoveredItem, SidebarState } from '@scalar/sidebar'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getParentEntry } from '@scalar/workspace-store/navigation'\nimport type {\n  TraversedEntry,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { capitalize, computed, nextTick, ref } from 'vue'\n\nimport Rabbit from '@/assets/rabbit.ascii?raw'\nimport RabbitJump from '@/assets/rabbitjump.ascii?raw'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { Sidebar } from '@/v2/components/sidebar'\nimport DownloadAppButton from '@/v2/features/app/components/DownloadAppButton.vue'\nimport SidebarItemMenu from '@/v2/features/app/components/SidebarItemMenu.vue'\nimport { createTempOperation } from '@/v2/features/app/helpers/create-temp-operation'\nimport { dragHandleFactory } from '@/v2/helpers/drag-handle-factory'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { sidebarState, layout, activeWorkspace, workspaces, store, eventBus } =\n  defineProps<{\n    /**\n     * The current layout of the app (e.g., 'desktop', 'web')\n     */\n    layout: ClientLayout\n\n    /**\n     * The sidebar state, holding navigation items and state\n     */\n    sidebarState: SidebarState<TraversedEntry>\n\n    /**\n     * Whether the workspace overview sidebar is currently open\n     */\n    isWorkspaceOpen?: boolean\n    /**\n     * The currently active workspace.\n     * This represents the workspace that the user is currently working in.\n     */\n    activeWorkspace: { id: string; label: string }\n    /**\n     * The list of all available workspaces.\n     * Used to render options for workspace switching and selection.\n     */\n    workspaces: WorkspaceGroup[]\n    /**\n     * The workspace event bus for handling workspace-level events.\n     * Used for triggering and responding to workspace changes and actions.\n     */\n    eventBus: WorkspaceEventBus\n    /**\n     * The WorkspaceStore instance for managing workspace state and actions.\n     * Provides methods and state for interacting with the current workspace.\n     */\n    store: WorkspaceStore\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the workspace button in the sidebar is clicked */\n  (e: 'click:workspace'): void\n  /** Emitted when a navigation or sidebar item is selected by ID */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user requests to create a new workspace */\n  (e: 'create:workspace'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n\n/** The label for the workspace button in the sidebar */\nconst workspaceLabel = computed(() => capitalize(activeWorkspace.label))\n\n/** Controls the visibility of the sidebar */\nconst isSidebarOpen = defineModel<boolean>('isSidebarOpen', {\n  required: true,\n})\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\n/** Calculate if we should show the getting started section */\nconst showGettingStarted = computed(() => sidebarState.items.value.length <= 1)\n\n/*\n * Setup drag and drop handlers for sidebar items.\n * The dragHandleFactory takes the current workspace store and sidebar state,\n * and returns the appropriate handlers for drag ending and droppability.\n *\n * We use computed to ensure the handlers are recreated when the store or sidebarState changes,\n * so they always have access to the latest values.\n */\nconst dragHandlers = computed(() =>\n  dragHandleFactory({\n    store,\n    sidebarState,\n  }),\n)\n\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.handleDragEnd(draggingItem, hoveredItem)\n}\n\nconst isDroppable = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.isDroppable(draggingItem, hoveredItem)\n}\n\n/** The current target for the dropdown menu */\nconst menuTarget = ref<{\n  /** The sidebar item that the menu is targeting */\n  item: TraversedEntry\n  /** A reference to the element that the menu is for */\n  el: HTMLElement\n  /** Whether or not to show the menu */\n  showMenu: boolean\n} | null>(null)\n\nconst deleteModalState = useModal()\n\n/** Computes the message for the delete modal */\nconst deleteMessage = computed(() => {\n  const item = menuTarget.value?.item\n\n  if (item?.type === 'document') {\n    return \"This cannot be undone. You're about to delete the document and all tags and operations inside it.\"\n  }\n\n  return `Are you sure you want to delete this ${item?.type ?? 'item'}? This action cannot be undone.`\n})\n\n/** Deletes an item from the sidebar by emitting the appropriate event */\nconst handleDelete = () => {\n  const item = menuTarget.value?.item\n\n  if (!item) {\n    return\n  }\n\n  const result = sidebarState.getEntryById(item.id)\n\n  const document = getParentEntry('document', result)\n  const operation = getParentEntry('operation', result)\n\n  if (!document) {\n    return\n  }\n\n  if (item.type === 'document') {\n    eventBus.emit('document:delete:document', { name: document.name })\n  } else if (item.type === 'tag') {\n    eventBus.emit('tag:delete:tag', {\n      documentName: document.name,\n      name: item.name,\n    })\n  } else if (item.type === 'operation') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:operation', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n      },\n      documentName: document.name,\n    })\n  } else if (item.type === 'example') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:example', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n        exampleKey: item.name,\n      },\n      documentName: document.name,\n    })\n  }\n\n  /** Clean up after deletion */\n  deleteModalState.hide()\n  menuTarget.value = null\n}\n\n/** Opens the dropdown menu for the given item */\nconst openMenu = async (\n  event: MouseEvent | KeyboardEvent,\n  item: TraversedEntry,\n) => {\n  if (menuTarget.value?.showMenu) {\n    return\n  }\n\n  const el = event.currentTarget as HTMLElement\n  menuTarget.value = { item, el, showMenu: true }\n\n  // Wait for the target to bind to the element\n  await nextTick()\n\n  // Re-dispatch the event on the target to open the menu\n  const cloned =\n    event instanceof MouseEvent\n      ? new MouseEvent(event.type, event)\n      : new KeyboardEvent(event.type, event)\n\n  menuTarget.value?.el.dispatchEvent(cloned)\n}\n\n/** Closes the dropdown menu */\nconst closeMenu = () => {\n  if (menuTarget.value) {\n    menuTarget.value.showMenu = false\n  }\n}\n\n/**\n * Creates a new operation directly from the empty folder slot.\n * Uses a unique temporary path to avoid conflicts, then navigates to the operation,\n * updates the path to `/`, and focuses the address bar so the user can immediately start typing.\n */\nconst handleAddEmptyFolder = (item: TraversedEntry) => {\n  const itemWithParent = sidebarState.getEntryById(item.id)\n  const documentName = getParentEntry('document', itemWithParent)?.name\n  const tagName = getParentEntry('tag', itemWithParent)?.name\n\n  if (!documentName) {\n    console.error('Document name not found')\n    return\n  }\n  createTempOperation(documentName, {\n    existingPaths: new Set(\n      Object.keys(store.workspace.documents[documentName]?.paths ?? {}),\n    ),\n    eventBus,\n    tags: tagName ? [tagName] : undefined,\n  })\n}\n\n/**\n * Navigates to the operations page for the provided operation item.\n * Emits a navigation event for the operation overview page.\n */\nconst navigateToOperationsPage = (item: TraversedOperation) => {\n  const operationWithParent = sidebarState.getEntryById(item.id)\n  const documentSlug = getParentEntry('document', operationWithParent)?.name\n\n  eventBus.emit('ui:navigate', {\n    page: 'operation',\n    path: 'overview',\n    operationPath: item.path,\n    method: item.method,\n    documentSlug: documentSlug,\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex\">\n    <Sidebar\n      v-model:sidebarWidth=\"sidebarWidth\"\n      :activeWorkspace=\"activeWorkspace\"\n      :class=\"[\n        'max-md:inset-y-0 max-md:z-2 max-md:w-full!',\n        isSidebarOpen ? 'max-md:absolute! max-md:flex!' : 'max-md:hidden!',\n      ]\"\n      :documents=\"Object.values(store.workspace.documents)\"\n      :isDroppable=\"isDroppable\"\n      :layout=\"layout\"\n      :sidebarState=\"sidebarState\"\n      :workspaces=\"workspaces\"\n      @create:workspace=\"emit('create:workspace')\"\n      @navigate:to:settings=\"\n        eventBus.emit('ui:navigate', { page: 'workspace', path: 'settings' })\n      \"\n      @reorder=\"\n        (draggingItem, hoveredItem) => handleDragEnd(draggingItem, hoveredItem)\n      \"\n      @select:workspace=\"(id) => emit('select:workspace', id)\"\n      @selectItem=\"(id) => emit('selectItem', id)\">\n      <template #sidebarMenuActions>\n        <slot name=\"sidebarMenuActions\" />\n      </template>\n      <!-- Workspace Identifier -->\n      <template #workspaceButton>\n        <ScalarSidebarItem\n          is=\"button\"\n          :active=\"isWorkspaceOpen\"\n          @click=\"emit('click:workspace')\">\n          {{ workspaceLabel }}\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Decorator dropdown menu -->\n      <template #decorator=\"{ item }\">\n        <div class=\"flex items-center gap-0.5\">\n          <ScalarIconButton\n            v-if=\"item.type === 'operation'\"\n            :icon=\"ScalarIconGearSix\"\n            label=\"Operation settings\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"navigateToOperationsPage(item)\"\n            @keydown.enter.stop=\"navigateToOperationsPage(item)\"\n            @keydown.space.stop=\"navigateToOperationsPage(item)\" />\n          <ScalarIconButton\n            aria-expanded=\"false\"\n            aria-haspopup=\"menu\"\n            :icon=\"ScalarIconDotsThree\"\n            label=\"More options\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"(e: MouseEvent) => openMenu(e, item)\"\n            @keydown.down.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.enter.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.space.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.up.stop=\"(e: KeyboardEvent) => openMenu(e, item)\" />\n        </div>\n      </template>\n\n      <!-- Dirty document icon slot -->\n      <template #icon=\"{ item }\">\n        <template\n          v-if=\"\n            item.type === 'document' &&\n            store.workspace.documents[item.name]?.['x-scalar-is-dirty'] === true\n          \">\n          <div class=\"relative flex items-center\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n            <div\n              class=\"bg-c-accent absolute -top-0.5 -right-0.5 size-1.5 rounded-full\">\n              <span class=\"sr-only\">Unsaved changes</span>\n            </div>\n          </div>\n        </template>\n      </template>\n\n      <!-- Empty folder slot -->\n      <template #empty=\"{ item }\">\n        <ScalarSidebarItem\n          is=\"button\"\n          @click=\"handleAddEmptyFolder(item)\">\n          <template #icon>\n            <ScalarIconPlus />\n          </template>\n          <template #default>Add operation</template>\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Getting started section -->\n      <template\n        v-if=\"layout !== 'modal'\"\n        #footer>\n        <div\n          :class=\"{\n            'empty-sidebar-item border-t': showGettingStarted,\n          }\">\n          <div\n            v-if=\"showGettingStarted\"\n            class=\"empty-sidebar-item-content overflow-hidden px-2.5 py-2.5\">\n            <div class=\"rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]\">\n              <ScalarAsciiArt\n                :art=\"Rabbit\"\n                class=\"rabbitsit font-bold\" />\n              <ScalarAsciiArt\n                :art=\"RabbitJump\"\n                class=\"rabbitjump absolute top-0 left-0 font-bold\" />\n            </div>\n            <div class=\"mt-2 mb-2 text-center text-sm text-balance\">\n              <b class=\"font-medium\">Let's Get Started</b>\n              <p class=\"mt-2 leading-5\">\n                Create request, folder, collection or import from\n                OpenAPI/Postman\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1.5 p-2\">\n            <ScalarButton\n              v-if=\"showGettingStarted\"\n              class=\"w-full\"\n              size=\"sm\"\n              @click=\"\n                eventBus.emit('ui:open:command-palette', {\n                  action: 'import-from-openapi-swagger-postman-curl',\n                  payload: undefined,\n                })\n              \">\n              Import Collection\n            </ScalarButton>\n\n            <ScalarButton\n              class=\"w-full\"\n              hotkey=\"K\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"eventBus.emit('ui:open:command-palette')\">\n              Add Item &nbsp;\n\n              <span\n                class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n                <template v-if=\"isMacOS()\">\n                  <span class=\"sr-only\">Command</span>\n                  <span aria-hidden=\"true\">⌘</span>\n                </template>\n                <template v-else>\n                  <span class=\"sr-only\">CTRL</span>\n                  <span aria-hidden=\"true\">⌃</span>\n                </template>\n                K\n              </span>\n            </ScalarButton>\n            <DownloadAppButton v-if=\"layout === 'web'\" />\n          </div>\n        </div>\n      </template>\n    </Sidebar>\n    <SidebarItemMenu\n      v-if=\"menuTarget?.showMenu\"\n      :eventBus=\"eventBus\"\n      :item=\"menuTarget.item\"\n      :sidebarState=\"sidebarState\"\n      :target=\"menuTarget.el\"\n      :workspaceStore=\"store\"\n      @closeMenu=\"closeMenu\"\n      @showDeleteModal=\"deleteModalState.show()\" />\n\n    <!-- Delete Modal -->\n    <ScalarModal\n      v-if=\"menuTarget\"\n      size=\"xxs\"\n      :state=\"deleteModalState\"\n      :title=\"`Delete ${menuTarget.item.title}`\">\n      <DeleteSidebarListElement\n        :variableName=\"menuTarget.item.title\"\n        :warningMessage=\"deleteMessage\"\n        @close=\"deleteModalState.hide()\"\n        @delete=\"handleDelete\" />\n    </ScalarModal>\n  </div>\n</template>\n\n<style scoped>\n.empty-sidebar-item-content {\n  display: none;\n}\n.empty-sidebar-item .empty-sidebar-item-content {\n  display: block;\n}\n.rabbitjump {\n  opacity: 0;\n}\n.empty-sidebar-item:hover .rabbitjump {\n  opacity: 1;\n  animation: rabbitAnimation 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbitsit {\n  opacity: 0;\n  animation: rabbitAnimation2 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbit-ascii {\n  animation: rabbitRun 8s infinite linear;\n}\n@keyframes rabbitRun {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  25% {\n    transform: translate3d(250px, 0, 0);\n  }\n  25.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  75% {\n    transform: translate3d(250px, 0, 0);\n  }\n  75.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes rabbitAnimation {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n}\n@keyframes rabbitAnimation2 {\n  0%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n    transform: translate3d(0, -8px, 0);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/v2/features/app/components/AppSidebar.vue.script.js

@@ -176,7 +176,7 @@ var AppSidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					sidebarWidth: sidebarWidth.value,
 					"onUpdate:sidebarWidth": _cache[3] || (_cache[3] = ($event) => sidebarWidth.value = $event),
 					activeWorkspace: __props.activeWorkspace,
-					class: normalizeClass(["max-md:inset-y-0 max-md:z-2 max-md:w-full!", isSidebarOpen.value ? "max-md:fixed! max-md:flex!" : "max-md:hidden!"]),
+					class: normalizeClass(["max-md:inset-y-0 max-md:z-2 max-md:w-full!", isSidebarOpen.value ? "max-md:absolute! max-md:flex!" : "max-md:hidden!"]),
 					documents: Object.values(__props.store.workspace.documents),
 					isDroppable,
 					layout: __props.layout,

package/dist/v2/features/app/components/AppSidebar.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.vue.script.js","names":[],"sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIconButton,\n  ScalarModal,\n  ScalarSidebarItem,\n  useModal,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport {\n  ScalarIconDotsThree,\n  ScalarIconGearSix,\n  ScalarIconPlus,\n} from '@scalar/icons'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { DraggingItem, HoveredItem, SidebarState } from '@scalar/sidebar'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getParentEntry } from '@scalar/workspace-store/navigation'\nimport type {\n  TraversedEntry,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { capitalize, computed, nextTick, ref } from 'vue'\n\nimport Rabbit from '@/assets/rabbit.ascii?raw'\nimport RabbitJump from '@/assets/rabbitjump.ascii?raw'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { Sidebar } from '@/v2/components/sidebar'\nimport DownloadAppButton from '@/v2/features/app/components/DownloadAppButton.vue'\nimport SidebarItemMenu from '@/v2/features/app/components/SidebarItemMenu.vue'\nimport { createTempOperation } from '@/v2/features/app/helpers/create-temp-operation'\nimport { dragHandleFactory } from '@/v2/helpers/drag-handle-factory'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { sidebarState, layout, activeWorkspace, workspaces, store, eventBus } =\n  defineProps<{\n    /**\n     * The current layout of the app (e.g., 'desktop', 'web')\n     */\n    layout: ClientLayout\n\n    /**\n     * The sidebar state, holding navigation items and state\n     */\n    sidebarState: SidebarState<TraversedEntry>\n\n    /**\n     * Whether the workspace overview sidebar is currently open\n     */\n    isWorkspaceOpen?: boolean\n    /**\n     * The currently active workspace.\n     * This represents the workspace that the user is currently working in.\n     */\n    activeWorkspace: { id: string; label: string }\n    /**\n     * The list of all available workspaces.\n     * Used to render options for workspace switching and selection.\n     */\n    workspaces: WorkspaceGroup[]\n    /**\n     * The workspace event bus for handling workspace-level events.\n     * Used for triggering and responding to workspace changes and actions.\n     */\n    eventBus: WorkspaceEventBus\n    /**\n     * The WorkspaceStore instance for managing workspace state and actions.\n     * Provides methods and state for interacting with the current workspace.\n     */\n    store: WorkspaceStore\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the workspace button in the sidebar is clicked */\n  (e: 'click:workspace'): void\n  /** Emitted when a navigation or sidebar item is selected by ID */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user requests to create a new workspace */\n  (e: 'create:workspace'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n\n/** The label for the workspace button in the sidebar */\nconst workspaceLabel = computed(() => capitalize(activeWorkspace.label))\n\n/** Controls the visibility of the sidebar */\nconst isSidebarOpen = defineModel<boolean>('isSidebarOpen', {\n  required: true,\n})\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\n/** Calculate if we should show the getting started section */\nconst showGettingStarted = computed(() => sidebarState.items.value.length <= 1)\n\n/*\n * Setup drag and drop handlers for sidebar items.\n * The dragHandleFactory takes the current workspace store and sidebar state,\n * and returns the appropriate handlers for drag ending and droppability.\n *\n * We use computed to ensure the handlers are recreated when the store or sidebarState changes,\n * so they always have access to the latest values.\n */\nconst dragHandlers = computed(() =>\n  dragHandleFactory({\n    store,\n    sidebarState,\n  }),\n)\n\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.handleDragEnd(draggingItem, hoveredItem)\n}\n\nconst isDroppable = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.isDroppable(draggingItem, hoveredItem)\n}\n\n/** The current target for the dropdown menu */\nconst menuTarget = ref<{\n  /** The sidebar item that the menu is targeting */\n  item: TraversedEntry\n  /** A reference to the element that the menu is for */\n  el: HTMLElement\n  /** Whether or not to show the menu */\n  showMenu: boolean\n} | null>(null)\n\nconst deleteModalState = useModal()\n\n/** Computes the message for the delete modal */\nconst deleteMessage = computed(() => {\n  const item = menuTarget.value?.item\n\n  if (item?.type === 'document') {\n    return \"This cannot be undone. You're about to delete the document and all tags and operations inside it.\"\n  }\n\n  return `Are you sure you want to delete this ${item?.type ?? 'item'}? This action cannot be undone.`\n})\n\n/** Deletes an item from the sidebar by emitting the appropriate event */\nconst handleDelete = () => {\n  const item = menuTarget.value?.item\n\n  if (!item) {\n    return\n  }\n\n  const result = sidebarState.getEntryById(item.id)\n\n  const document = getParentEntry('document', result)\n  const operation = getParentEntry('operation', result)\n\n  if (!document) {\n    return\n  }\n\n  if (item.type === 'document') {\n    eventBus.emit('document:delete:document', { name: document.name })\n  } else if (item.type === 'tag') {\n    eventBus.emit('tag:delete:tag', {\n      documentName: document.name,\n      name: item.name,\n    })\n  } else if (item.type === 'operation') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:operation', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n      },\n      documentName: document.name,\n    })\n  } else if (item.type === 'example') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:example', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n        exampleKey: item.name,\n      },\n      documentName: document.name,\n    })\n  }\n\n  /** Clean up after deletion */\n  deleteModalState.hide()\n  menuTarget.value = null\n}\n\n/** Opens the dropdown menu for the given item */\nconst openMenu = async (\n  event: MouseEvent | KeyboardEvent,\n  item: TraversedEntry,\n) => {\n  if (menuTarget.value?.showMenu) {\n    return\n  }\n\n  const el = event.currentTarget as HTMLElement\n  menuTarget.value = { item, el, showMenu: true }\n\n  // Wait for the target to bind to the element\n  await nextTick()\n\n  // Re-dispatch the event on the target to open the menu\n  const cloned =\n    event instanceof MouseEvent\n      ? new MouseEvent(event.type, event)\n      : new KeyboardEvent(event.type, event)\n\n  menuTarget.value?.el.dispatchEvent(cloned)\n}\n\n/** Closes the dropdown menu */\nconst closeMenu = () => {\n  if (menuTarget.value) {\n    menuTarget.value.showMenu = false\n  }\n}\n\n/**\n * Creates a new operation directly from the empty folder slot.\n * Uses a unique temporary path to avoid conflicts, then navigates to the operation,\n * updates the path to `/`, and focuses the address bar so the user can immediately start typing.\n */\nconst handleAddEmptyFolder = (item: TraversedEntry) => {\n  const itemWithParent = sidebarState.getEntryById(item.id)\n  const documentName = getParentEntry('document', itemWithParent)?.name\n  const tagName = getParentEntry('tag', itemWithParent)?.name\n\n  if (!documentName) {\n    console.error('Document name not found')\n    return\n  }\n  createTempOperation(documentName, {\n    existingPaths: new Set(\n      Object.keys(store.workspace.documents[documentName]?.paths ?? {}),\n    ),\n    eventBus,\n    tags: tagName ? [tagName] : undefined,\n  })\n}\n\n/**\n * Navigates to the operations page for the provided operation item.\n * Emits a navigation event for the operation overview page.\n */\nconst navigateToOperationsPage = (item: TraversedOperation) => {\n  const operationWithParent = sidebarState.getEntryById(item.id)\n  const documentSlug = getParentEntry('document', operationWithParent)?.name\n\n  eventBus.emit('ui:navigate', {\n    page: 'operation',\n    path: 'overview',\n    operationPath: item.path,\n    method: item.method,\n    documentSlug: documentSlug,\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex\">\n    <Sidebar\n      v-model:sidebarWidth=\"sidebarWidth\"\n      :activeWorkspace=\"activeWorkspace\"\n      :class=\"[\n        'max-md:inset-y-0 max-md:z-2 max-md:w-full!',\n        isSidebarOpen ? 'max-md:fixed! max-md:flex!' : 'max-md:hidden!',\n      ]\"\n      :documents=\"Object.values(store.workspace.documents)\"\n      :isDroppable=\"isDroppable\"\n      :layout=\"layout\"\n      :sidebarState=\"sidebarState\"\n      :workspaces=\"workspaces\"\n      @create:workspace=\"emit('create:workspace')\"\n      @navigate:to:settings=\"\n        eventBus.emit('ui:navigate', { page: 'workspace', path: 'settings' })\n      \"\n      @reorder=\"\n        (draggingItem, hoveredItem) => handleDragEnd(draggingItem, hoveredItem)\n      \"\n      @select:workspace=\"(id) => emit('select:workspace', id)\"\n      @selectItem=\"(id) => emit('selectItem', id)\">\n      <template #sidebarMenuActions>\n        <slot name=\"sidebarMenuActions\" />\n      </template>\n      <!-- Workspace Identifier -->\n      <template #workspaceButton>\n        <ScalarSidebarItem\n          is=\"button\"\n          :active=\"isWorkspaceOpen\"\n          @click=\"emit('click:workspace')\">\n          {{ workspaceLabel }}\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Decorator dropdown menu -->\n      <template #decorator=\"{ item }\">\n        <div class=\"flex items-center gap-0.5\">\n          <ScalarIconButton\n            v-if=\"item.type === 'operation'\"\n            :icon=\"ScalarIconGearSix\"\n            label=\"Operation settings\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"navigateToOperationsPage(item)\"\n            @keydown.enter.stop=\"navigateToOperationsPage(item)\"\n            @keydown.space.stop=\"navigateToOperationsPage(item)\" />\n          <ScalarIconButton\n            aria-expanded=\"false\"\n            aria-haspopup=\"menu\"\n            :icon=\"ScalarIconDotsThree\"\n            label=\"More options\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"(e: MouseEvent) => openMenu(e, item)\"\n            @keydown.down.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.enter.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.space.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.up.stop=\"(e: KeyboardEvent) => openMenu(e, item)\" />\n        </div>\n      </template>\n\n      <!-- Dirty document icon slot -->\n      <template #icon=\"{ item }\">\n        <template\n          v-if=\"\n            item.type === 'document' &&\n            store.workspace.documents[item.name]?.['x-scalar-is-dirty'] === true\n          \">\n          <div class=\"relative flex items-center\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n            <div\n              class=\"bg-c-accent absolute -top-0.5 -right-0.5 size-1.5 rounded-full\">\n              <span class=\"sr-only\">Unsaved changes</span>\n            </div>\n          </div>\n        </template>\n      </template>\n\n      <!-- Empty folder slot -->\n      <template #empty=\"{ item }\">\n        <ScalarSidebarItem\n          is=\"button\"\n          @click=\"handleAddEmptyFolder(item)\">\n          <template #icon>\n            <ScalarIconPlus />\n          </template>\n          <template #default>Add operation</template>\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Getting started section -->\n      <template\n        v-if=\"layout !== 'modal'\"\n        #footer>\n        <div\n          :class=\"{\n            'empty-sidebar-item border-t': showGettingStarted,\n          }\">\n          <div\n            v-if=\"showGettingStarted\"\n            class=\"empty-sidebar-item-content overflow-hidden px-2.5 py-2.5\">\n            <div class=\"rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]\">\n              <ScalarAsciiArt\n                :art=\"Rabbit\"\n                class=\"rabbitsit font-bold\" />\n              <ScalarAsciiArt\n                :art=\"RabbitJump\"\n                class=\"rabbitjump absolute top-0 left-0 font-bold\" />\n            </div>\n            <div class=\"mt-2 mb-2 text-center text-sm text-balance\">\n              <b class=\"font-medium\">Let's Get Started</b>\n              <p class=\"mt-2 leading-5\">\n                Create request, folder, collection or import from\n                OpenAPI/Postman\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1.5 p-2\">\n            <ScalarButton\n              v-if=\"showGettingStarted\"\n              class=\"w-full\"\n              size=\"sm\"\n              @click=\"\n                eventBus.emit('ui:open:command-palette', {\n                  action: 'import-from-openapi-swagger-postman-curl',\n                  payload: undefined,\n                })\n              \">\n              Import Collection\n            </ScalarButton>\n\n            <ScalarButton\n              class=\"w-full\"\n              hotkey=\"K\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"eventBus.emit('ui:open:command-palette')\">\n              Add Item &nbsp;\n\n              <span\n                class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n                <template v-if=\"isMacOS()\">\n                  <span class=\"sr-only\">Command</span>\n                  <span aria-hidden=\"true\">⌘</span>\n                </template>\n                <template v-else>\n                  <span class=\"sr-only\">CTRL</span>\n                  <span aria-hidden=\"true\">⌃</span>\n                </template>\n                K\n              </span>\n            </ScalarButton>\n            <DownloadAppButton v-if=\"layout === 'web'\" />\n          </div>\n        </div>\n      </template>\n    </Sidebar>\n    <SidebarItemMenu\n      v-if=\"menuTarget?.showMenu\"\n      :eventBus=\"eventBus\"\n      :item=\"menuTarget.item\"\n      :sidebarState=\"sidebarState\"\n      :target=\"menuTarget.el\"\n      :workspaceStore=\"store\"\n      @closeMenu=\"closeMenu\"\n      @showDeleteModal=\"deleteModalState.show()\" />\n\n    <!-- Delete Modal -->\n    <ScalarModal\n      v-if=\"menuTarget\"\n      size=\"xxs\"\n      :state=\"deleteModalState\"\n      :title=\"`Delete ${menuTarget.item.title}`\">\n      <DeleteSidebarListElement\n        :variableName=\"menuTarget.item.title\"\n        :warningMessage=\"deleteMessage\"\n        @close=\"deleteModalState.hide()\"\n        @delete=\"handleDelete\" />\n    </ScalarModal>\n  </div>\n</template>\n\n<style scoped>\n.empty-sidebar-item-content {\n  display: none;\n}\n.empty-sidebar-item .empty-sidebar-item-content {\n  display: block;\n}\n.rabbitjump {\n  opacity: 0;\n}\n.empty-sidebar-item:hover .rabbitjump {\n  opacity: 1;\n  animation: rabbitAnimation 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbitsit {\n  opacity: 0;\n  animation: rabbitAnimation2 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbit-ascii {\n  animation: rabbitRun 8s infinite linear;\n}\n@keyframes rabbitRun {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  25% {\n    transform: translate3d(250px, 0, 0);\n  }\n  25.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  75% {\n    transform: translate3d(250px, 0, 0);\n  }\n  75.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes rabbitAnimation {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n}\n@keyframes rabbitAnimation2 {\n  0%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n    transform: translate3d(0, -8px, 0);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"AppSidebar.vue.script.js","names":[],"sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIconButton,\n  ScalarModal,\n  ScalarSidebarItem,\n  useModal,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport {\n  ScalarIconDotsThree,\n  ScalarIconGearSix,\n  ScalarIconPlus,\n} from '@scalar/icons'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { DraggingItem, HoveredItem, SidebarState } from '@scalar/sidebar'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getParentEntry } from '@scalar/workspace-store/navigation'\nimport type {\n  TraversedEntry,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { capitalize, computed, nextTick, ref } from 'vue'\n\nimport Rabbit from '@/assets/rabbit.ascii?raw'\nimport RabbitJump from '@/assets/rabbitjump.ascii?raw'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\nimport { Sidebar } from '@/v2/components/sidebar'\nimport DownloadAppButton from '@/v2/features/app/components/DownloadAppButton.vue'\nimport SidebarItemMenu from '@/v2/features/app/components/SidebarItemMenu.vue'\nimport { createTempOperation } from '@/v2/features/app/helpers/create-temp-operation'\nimport { dragHandleFactory } from '@/v2/helpers/drag-handle-factory'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nconst { sidebarState, layout, activeWorkspace, workspaces, store, eventBus } =\n  defineProps<{\n    /**\n     * The current layout of the app (e.g., 'desktop', 'web')\n     */\n    layout: ClientLayout\n\n    /**\n     * The sidebar state, holding navigation items and state\n     */\n    sidebarState: SidebarState<TraversedEntry>\n\n    /**\n     * Whether the workspace overview sidebar is currently open\n     */\n    isWorkspaceOpen?: boolean\n    /**\n     * The currently active workspace.\n     * This represents the workspace that the user is currently working in.\n     */\n    activeWorkspace: { id: string; label: string }\n    /**\n     * The list of all available workspaces.\n     * Used to render options for workspace switching and selection.\n     */\n    workspaces: WorkspaceGroup[]\n    /**\n     * The workspace event bus for handling workspace-level events.\n     * Used for triggering and responding to workspace changes and actions.\n     */\n    eventBus: WorkspaceEventBus\n    /**\n     * The WorkspaceStore instance for managing workspace state and actions.\n     * Provides methods and state for interacting with the current workspace.\n     */\n    store: WorkspaceStore\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the workspace button in the sidebar is clicked */\n  (e: 'click:workspace'): void\n  /** Emitted when a navigation or sidebar item is selected by ID */\n  (e: 'selectItem', id: string): void\n  /** Emitted when a workspace is selected by optional ID */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user requests to create a new workspace */\n  (e: 'create:workspace'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n\n/** The label for the workspace button in the sidebar */\nconst workspaceLabel = computed(() => capitalize(activeWorkspace.label))\n\n/** Controls the visibility of the sidebar */\nconst isSidebarOpen = defineModel<boolean>('isSidebarOpen', {\n  required: true,\n})\n\n/** Controls the width of the sidebar */\nconst sidebarWidth = defineModel<number>('sidebarWidth', {\n  required: true,\n  default: 288,\n})\n\n/** Calculate if we should show the getting started section */\nconst showGettingStarted = computed(() => sidebarState.items.value.length <= 1)\n\n/*\n * Setup drag and drop handlers for sidebar items.\n * The dragHandleFactory takes the current workspace store and sidebar state,\n * and returns the appropriate handlers for drag ending and droppability.\n *\n * We use computed to ensure the handlers are recreated when the store or sidebarState changes,\n * so they always have access to the latest values.\n */\nconst dragHandlers = computed(() =>\n  dragHandleFactory({\n    store,\n    sidebarState,\n  }),\n)\n\nconst handleDragEnd = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.handleDragEnd(draggingItem, hoveredItem)\n}\n\nconst isDroppable = (\n  draggingItem: DraggingItem,\n  hoveredItem: HoveredItem,\n): boolean => {\n  return dragHandlers.value.isDroppable(draggingItem, hoveredItem)\n}\n\n/** The current target for the dropdown menu */\nconst menuTarget = ref<{\n  /** The sidebar item that the menu is targeting */\n  item: TraversedEntry\n  /** A reference to the element that the menu is for */\n  el: HTMLElement\n  /** Whether or not to show the menu */\n  showMenu: boolean\n} | null>(null)\n\nconst deleteModalState = useModal()\n\n/** Computes the message for the delete modal */\nconst deleteMessage = computed(() => {\n  const item = menuTarget.value?.item\n\n  if (item?.type === 'document') {\n    return \"This cannot be undone. You're about to delete the document and all tags and operations inside it.\"\n  }\n\n  return `Are you sure you want to delete this ${item?.type ?? 'item'}? This action cannot be undone.`\n})\n\n/** Deletes an item from the sidebar by emitting the appropriate event */\nconst handleDelete = () => {\n  const item = menuTarget.value?.item\n\n  if (!item) {\n    return\n  }\n\n  const result = sidebarState.getEntryById(item.id)\n\n  const document = getParentEntry('document', result)\n  const operation = getParentEntry('operation', result)\n\n  if (!document) {\n    return\n  }\n\n  if (item.type === 'document') {\n    eventBus.emit('document:delete:document', { name: document.name })\n  } else if (item.type === 'tag') {\n    eventBus.emit('tag:delete:tag', {\n      documentName: document.name,\n      name: item.name,\n    })\n  } else if (item.type === 'operation') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:operation', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n      },\n      documentName: document.name,\n    })\n  } else if (item.type === 'example') {\n    if (!operation) {\n      return\n    }\n\n    eventBus.emit('operation:delete:example', {\n      meta: {\n        method: operation.method,\n        path: operation.path,\n        exampleKey: item.name,\n      },\n      documentName: document.name,\n    })\n  }\n\n  /** Clean up after deletion */\n  deleteModalState.hide()\n  menuTarget.value = null\n}\n\n/** Opens the dropdown menu for the given item */\nconst openMenu = async (\n  event: MouseEvent | KeyboardEvent,\n  item: TraversedEntry,\n) => {\n  if (menuTarget.value?.showMenu) {\n    return\n  }\n\n  const el = event.currentTarget as HTMLElement\n  menuTarget.value = { item, el, showMenu: true }\n\n  // Wait for the target to bind to the element\n  await nextTick()\n\n  // Re-dispatch the event on the target to open the menu\n  const cloned =\n    event instanceof MouseEvent\n      ? new MouseEvent(event.type, event)\n      : new KeyboardEvent(event.type, event)\n\n  menuTarget.value?.el.dispatchEvent(cloned)\n}\n\n/** Closes the dropdown menu */\nconst closeMenu = () => {\n  if (menuTarget.value) {\n    menuTarget.value.showMenu = false\n  }\n}\n\n/**\n * Creates a new operation directly from the empty folder slot.\n * Uses a unique temporary path to avoid conflicts, then navigates to the operation,\n * updates the path to `/`, and focuses the address bar so the user can immediately start typing.\n */\nconst handleAddEmptyFolder = (item: TraversedEntry) => {\n  const itemWithParent = sidebarState.getEntryById(item.id)\n  const documentName = getParentEntry('document', itemWithParent)?.name\n  const tagName = getParentEntry('tag', itemWithParent)?.name\n\n  if (!documentName) {\n    console.error('Document name not found')\n    return\n  }\n  createTempOperation(documentName, {\n    existingPaths: new Set(\n      Object.keys(store.workspace.documents[documentName]?.paths ?? {}),\n    ),\n    eventBus,\n    tags: tagName ? [tagName] : undefined,\n  })\n}\n\n/**\n * Navigates to the operations page for the provided operation item.\n * Emits a navigation event for the operation overview page.\n */\nconst navigateToOperationsPage = (item: TraversedOperation) => {\n  const operationWithParent = sidebarState.getEntryById(item.id)\n  const documentSlug = getParentEntry('document', operationWithParent)?.name\n\n  eventBus.emit('ui:navigate', {\n    page: 'operation',\n    path: 'overview',\n    operationPath: item.path,\n    method: item.method,\n    documentSlug: documentSlug,\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex\">\n    <Sidebar\n      v-model:sidebarWidth=\"sidebarWidth\"\n      :activeWorkspace=\"activeWorkspace\"\n      :class=\"[\n        'max-md:inset-y-0 max-md:z-2 max-md:w-full!',\n        isSidebarOpen ? 'max-md:absolute! max-md:flex!' : 'max-md:hidden!',\n      ]\"\n      :documents=\"Object.values(store.workspace.documents)\"\n      :isDroppable=\"isDroppable\"\n      :layout=\"layout\"\n      :sidebarState=\"sidebarState\"\n      :workspaces=\"workspaces\"\n      @create:workspace=\"emit('create:workspace')\"\n      @navigate:to:settings=\"\n        eventBus.emit('ui:navigate', { page: 'workspace', path: 'settings' })\n      \"\n      @reorder=\"\n        (draggingItem, hoveredItem) => handleDragEnd(draggingItem, hoveredItem)\n      \"\n      @select:workspace=\"(id) => emit('select:workspace', id)\"\n      @selectItem=\"(id) => emit('selectItem', id)\">\n      <template #sidebarMenuActions>\n        <slot name=\"sidebarMenuActions\" />\n      </template>\n      <!-- Workspace Identifier -->\n      <template #workspaceButton>\n        <ScalarSidebarItem\n          is=\"button\"\n          :active=\"isWorkspaceOpen\"\n          @click=\"emit('click:workspace')\">\n          {{ workspaceLabel }}\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Decorator dropdown menu -->\n      <template #decorator=\"{ item }\">\n        <div class=\"flex items-center gap-0.5\">\n          <ScalarIconButton\n            v-if=\"item.type === 'operation'\"\n            :icon=\"ScalarIconGearSix\"\n            label=\"Operation settings\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"navigateToOperationsPage(item)\"\n            @keydown.enter.stop=\"navigateToOperationsPage(item)\"\n            @keydown.space.stop=\"navigateToOperationsPage(item)\" />\n          <ScalarIconButton\n            aria-expanded=\"false\"\n            aria-haspopup=\"menu\"\n            :icon=\"ScalarIconDotsThree\"\n            label=\"More options\"\n            size=\"sm\"\n            weight=\"bold\"\n            @click.stop=\"(e: MouseEvent) => openMenu(e, item)\"\n            @keydown.down.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.enter.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.space.stop=\"(e: KeyboardEvent) => openMenu(e, item)\"\n            @keydown.up.stop=\"(e: KeyboardEvent) => openMenu(e, item)\" />\n        </div>\n      </template>\n\n      <!-- Dirty document icon slot -->\n      <template #icon=\"{ item }\">\n        <template\n          v-if=\"\n            item.type === 'document' &&\n            store.workspace.documents[item.name]?.['x-scalar-is-dirty'] === true\n          \">\n          <div class=\"relative flex items-center\">\n            <LibraryIcon\n              class=\"block\"\n              :src=\"\n                ('icon' in item && item.icon) || 'interface-content-folder'\n              \" />\n            <div\n              class=\"bg-c-accent absolute -top-0.5 -right-0.5 size-1.5 rounded-full\">\n              <span class=\"sr-only\">Unsaved changes</span>\n            </div>\n          </div>\n        </template>\n      </template>\n\n      <!-- Empty folder slot -->\n      <template #empty=\"{ item }\">\n        <ScalarSidebarItem\n          is=\"button\"\n          @click=\"handleAddEmptyFolder(item)\">\n          <template #icon>\n            <ScalarIconPlus />\n          </template>\n          <template #default>Add operation</template>\n        </ScalarSidebarItem>\n      </template>\n\n      <!-- Getting started section -->\n      <template\n        v-if=\"layout !== 'modal'\"\n        #footer>\n        <div\n          :class=\"{\n            'empty-sidebar-item border-t': showGettingStarted,\n          }\">\n          <div\n            v-if=\"showGettingStarted\"\n            class=\"empty-sidebar-item-content overflow-hidden px-2.5 py-2.5\">\n            <div class=\"rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]\">\n              <ScalarAsciiArt\n                :art=\"Rabbit\"\n                class=\"rabbitsit font-bold\" />\n              <ScalarAsciiArt\n                :art=\"RabbitJump\"\n                class=\"rabbitjump absolute top-0 left-0 font-bold\" />\n            </div>\n            <div class=\"mt-2 mb-2 text-center text-sm text-balance\">\n              <b class=\"font-medium\">Let's Get Started</b>\n              <p class=\"mt-2 leading-5\">\n                Create request, folder, collection or import from\n                OpenAPI/Postman\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1.5 p-2\">\n            <ScalarButton\n              v-if=\"showGettingStarted\"\n              class=\"w-full\"\n              size=\"sm\"\n              @click=\"\n                eventBus.emit('ui:open:command-palette', {\n                  action: 'import-from-openapi-swagger-postman-curl',\n                  payload: undefined,\n                })\n              \">\n              Import Collection\n            </ScalarButton>\n\n            <ScalarButton\n              class=\"w-full\"\n              hotkey=\"K\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"eventBus.emit('ui:open:command-palette')\">\n              Add Item &nbsp;\n\n              <span\n                class=\"text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase\">\n                <template v-if=\"isMacOS()\">\n                  <span class=\"sr-only\">Command</span>\n                  <span aria-hidden=\"true\">⌘</span>\n                </template>\n                <template v-else>\n                  <span class=\"sr-only\">CTRL</span>\n                  <span aria-hidden=\"true\">⌃</span>\n                </template>\n                K\n              </span>\n            </ScalarButton>\n            <DownloadAppButton v-if=\"layout === 'web'\" />\n          </div>\n        </div>\n      </template>\n    </Sidebar>\n    <SidebarItemMenu\n      v-if=\"menuTarget?.showMenu\"\n      :eventBus=\"eventBus\"\n      :item=\"menuTarget.item\"\n      :sidebarState=\"sidebarState\"\n      :target=\"menuTarget.el\"\n      :workspaceStore=\"store\"\n      @closeMenu=\"closeMenu\"\n      @showDeleteModal=\"deleteModalState.show()\" />\n\n    <!-- Delete Modal -->\n    <ScalarModal\n      v-if=\"menuTarget\"\n      size=\"xxs\"\n      :state=\"deleteModalState\"\n      :title=\"`Delete ${menuTarget.item.title}`\">\n      <DeleteSidebarListElement\n        :variableName=\"menuTarget.item.title\"\n        :warningMessage=\"deleteMessage\"\n        @close=\"deleteModalState.hide()\"\n        @delete=\"handleDelete\" />\n    </ScalarModal>\n  </div>\n</template>\n\n<style scoped>\n.empty-sidebar-item-content {\n  display: none;\n}\n.empty-sidebar-item .empty-sidebar-item-content {\n  display: block;\n}\n.rabbitjump {\n  opacity: 0;\n}\n.empty-sidebar-item:hover .rabbitjump {\n  opacity: 1;\n  animation: rabbitAnimation 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbitsit {\n  opacity: 0;\n  animation: rabbitAnimation2 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbit-ascii {\n  animation: rabbitRun 8s infinite linear;\n}\n@keyframes rabbitRun {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  25% {\n    transform: translate3d(250px, 0, 0);\n  }\n  25.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  75% {\n    transform: translate3d(250px, 0, 0);\n  }\n  75.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes rabbitAnimation {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n}\n@keyframes rabbitAnimation2 {\n  0%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n    transform: translate3d(0, -8px, 0);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/features/modal/Modal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA+MA,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,oBAAoB,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC/C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGAwQ3E,CAAC"}
+{"version":3,"file":"Modal.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/modal/Modal.vue"],"names":[],"mappings":"AA+MA,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,oBAAoB,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,GAAG,EACT,MAAM,KAAK,CAAA;AAIZ,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAKxF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAG7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;IAC9B,qDAAqD;IACrD,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC/C,iDAAiD;IACjD,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,4CAA4C;IAC5C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,mDAAmD;IACnD,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,sEAAsE;IACtE,+BAA+B,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC5D,2CAA2C;IAC3C,UAAU,EAAE,UAAU,CAAA;IACtB,0DAA0D;IAC1D,YAAY,EAAE,qBAAqB,CAAA;IACnC,iDAAiD;IACjD,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wDAAwD;IACxD,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;CAC5C,CAAA;AAED;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAC0C,mBAAmB;;;;;aAAnB,mBAAmB;iGA0Q3E,CAAC"}

package/dist/v2/features/modal/Modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-3 z-2\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Modal.vue.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":""}

package/dist/v2/features/modal/Modal.vue.script.js

@@ -85,13 +85,13 @@ var Modal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					createVNode(unref(SidebarToggle_default), {
 						modelValue: isSidebarOpen.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isSidebarOpen.value = $event),
-						class: "absolute top-2 left-3 z-2"
+						class: "absolute top-2 left-4 z-10 max-md:top-4"
 					}, null, 8, ["modelValue"]),
 					withDirectives(createVNode(unref(Sidebar_default), {
 						sidebarWidth: sidebarWidth.value,
 						"onUpdate:sidebarWidth": [_cache[1] || (_cache[1] = ($event) => sidebarWidth.value = $event), handleSidebarWidthUpdate],
 						activeWorkspace,
-						class: "h-full max-md:absolute! max-md:w-full!",
+						class: "h-full max-md:absolute! max-md:z-5 max-md:w-full!",
 						documents: [__props.document.value],
 						eventBus: __props.eventBus,
 						isDroppable: () => false,

package/dist/v2/features/modal/Modal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-3 z-2\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA8CuB,8BAAA,EA9CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAkCO,QAlCP,YAkCO;KA/BL,YAEsC,MAAA,sBAAA,EAAA;kBAD3B,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAcoB,mBAAA;MAbA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"Modal.vue.script.js","names":[],"sources":["../../../../src/v2/features/modal/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport type { ApiClientOptions } from '@/v2/types/options'\n\nexport type ModalProps = {\n  /** The workspace store must be initialized and passed in */\n  workspaceStore: WorkspaceStore\n  /** The document must be initialized and passed in */\n  document: ComputedRef<WorkspaceDocument | null>\n  /** The path must be initialized and passed in */\n  path: ComputedRef<string | undefined>\n  /** The event bus for handling all events */\n  eventBus: WorkspaceEventBus\n  /** The method must be initialized and passed in */\n  method: ComputedRef<HttpMethod | undefined>\n  /** The example name must be initialized and passed in */\n  exampleName: ComputedRef<string | undefined>\n  /** Selected anyOf/oneOf request-body variants keyed by schema path */\n  requestBodyCompositionSelection: Ref<Record<string, number>>\n  /** Controls the visibility of the modal */\n  modalState: ModalState\n  /** The sidebar state must be initialized and passed in */\n  sidebarState: UseModalSidebarReturn\n  /** Api client plugins to include in the modal */\n  plugins: ClientPlugin[]\n  /** Subset of the configuration options for the modal */\n  options: MaybeRefOrGetter<ApiClientOptions>\n}\n\n/**\n * Scalar Api Client Modal\n *\n * This component is used to render the API Client Modal\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { type ModalState, type ScalarListboxOption } from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { ClientPlugin } from '@scalar/oas-utils/helpers'\nimport { ScalarToasts } from '@scalar/use-toasts'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport { type WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { getActiveEnvironment } from '@scalar/workspace-store/request-example'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport {\n  computed,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type ComputedRef,\n  type Ref,\n} from 'vue'\n\nimport ModalClientContainer from '@/v2/components/modals/ModalClientContainer.vue'\nimport { Sidebar, SidebarToggle } from '@/v2/components/sidebar'\nimport { type UseModalSidebarReturn } from '@/v2/features/modal/hooks/use-modal-sidebar'\nimport { initializeModalEvents } from '@/v2/features/modal/modal-events'\nimport Operation from '@/v2/features/operation/Operation.vue'\nimport { useGlobalHotKeys } from '@/v2/hooks/use-global-hot-keys'\nimport { useScrollLock } from '@/v2/hooks/use-scroll-lock'\nimport type { ApiClientOptionsRef } from '@/v2/types/options'\n\nconst {\n  document,\n  eventBus,\n  modalState,\n  options,\n  plugins,\n  requestBodyCompositionSelection,\n  sidebarState,\n  workspaceStore,\n} = defineProps<\n  Omit<ModalProps, 'options'> & { options: ApiClientOptionsRef }\n>()\n\nconst activeWorkspace: ScalarListboxOption = {\n  label: 'default',\n  id: 'default',\n}\n\n/** Controls the visibility of the sidebar. */\nconst isSidebarOpen = ref(false)\n\n/** Initialize modal events */\ninitializeModalEvents({\n  eventBus,\n  isSidebarOpen,\n  requestBodyCompositionSelection,\n  sidebarState,\n  modalState,\n  store: workspaceStore,\n})\n\n/** Register global hotkeys for the app, passing the workspace event bus and layout state */\nuseGlobalHotKeys(eventBus, 'modal', () => !modalState.open)\n\n/** Clean up on close */\nconst cleanUp = () => {\n  eventBus.emit('operation:cancel:request')\n}\n\nconst isLocked = useScrollLock(() => {\n  if (typeof window !== 'undefined') {\n    return window.document.body\n  }\n  return null\n})\n\nwatch(\n  () => modalState.open,\n  (open) => {\n    // Make sure scrolling is locked or unlocked when the modal is opened or closed\n    isLocked.value = open\n\n    if (!open) {\n      cleanUp()\n    }\n  },\n)\n\n// Ensure we add our scalar wrapper class to the headless ui root\nonBeforeUnmount(() => cleanUp())\n\n/** Default sidebar width in pixels. */\nconst DEFAULT_SIDEBAR_WIDTH = 288\n\n/** Width of the sidebar, with fallback to default. */\nconst sidebarWidth = computed(\n  () =>\n    workspaceStore?.workspace?.['x-scalar-sidebar-width'] ??\n    DEFAULT_SIDEBAR_WIDTH,\n)\n\n/** Handler for sidebar width changes. */\nconst handleSidebarWidthUpdate = (width: number) =>\n  workspaceStore?.update('x-scalar-sidebar-width', width)\n\n/**\n * Merged environment variables from workspace and document levels.\n * Variables from both sources are combined, with document variables\n * taking precedence in case of naming conflicts.\n */\nconst environment = computed(\n  () => getActiveEnvironment(workspaceStore, document.value).environment,\n)\n\ndefineExpose({\n  sidebarWidth,\n  environment,\n})\n</script>\n\n<template>\n  <ModalClientContainer :modalState>\n    <!-- Toasts -->\n    <ScalarToasts />\n\n    <!-- If we have a document, path and method, render the operation -->\n    <main\n      v-if=\"document.value && path?.value && method?.value\"\n      class=\"relative flex h-full min-h-0 w-full flex-1\">\n      <SidebarToggle\n        v-model=\"isSidebarOpen\"\n        class=\"absolute top-2 left-4 z-10 max-md:top-4\" />\n      <Sidebar\n        v-show=\"isSidebarOpen\"\n        v-model:sidebarWidth=\"sidebarWidth\"\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"h-full max-md:absolute! max-md:z-5 max-md:w-full!\"\n        :documents=\"[document.value]\"\n        :eventBus\n        :isDroppable=\"() => false\"\n        layout=\"modal\"\n        :sidebarState=\"sidebarState.state\"\n        :workspaces=\"[]\"\n        @selectItem=\"sidebarState.handleSelectItem\"\n        @update:sidebarWidth=\"handleSidebarWidthUpdate\" />\n      <Operation\n        :activeWorkspace=\"activeWorkspace\"\n        class=\"flex-1\"\n        :document=\"document.value\"\n        :documentSlug=\"document.value['x-scalar-navigation']?.id ?? ''\"\n        :environment\n        :eventBus\n        :exampleName=\"exampleName?.value\"\n        layout=\"modal\"\n        :method=\"method?.value\"\n        :options\n        :path=\"path?.value\"\n        :plugins\n        :requestBodyCompositionSelection=\"requestBodyCompositionSelection.value\"\n        :workspaceStore />\n    </main>\n    <!-- Empty state -->\n    <div\n      v-else\n      class=\"flex h-full w-full items-center justify-center\">\n      <span class=\"text-c-3\">No document selected</span>\n    </div>\n  </ModalClientContainer>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EA,MAAM,kBAAuC;GAC3C,OAAO;GACP,IAAI;GACN;;EAGA,MAAM,gBAAgB,IAAI,MAAK;;AAG/B,wBAAsB;GACpB,UAAO,QAAA;GACP;GACA,iCAA8B,QAAA;GAC9B,cAAW,QAAA;GACX,YAAS,QAAA;GACT,OAAO,QAAA;GACR,CAAA;;AAGD,mBAAiB,QAAA,UAAU,eAAe,CAAC,QAAA,WAAW,KAAI;;EAG1D,MAAM,gBAAgB;AACpB,WAAA,SAAS,KAAK,2BAA0B;;EAG1C,MAAM,WAAW,oBAAoB;AACnC,OAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,UAAO;IACR;AAED,cACQ,QAAA,WAAW,OAChB,SAAS;AAER,YAAS,QAAQ;AAEjB,OAAI,CAAC,KACH,UAAQ;IAGd;AAGA,wBAAsB,SAAS,CAAA;;EAG/B,MAAM,wBAAwB;;EAG9B,MAAM,eAAe,eAEjB,QAAA,gBAAgB,YAAY,6BAC5B,sBACJ;;EAGA,MAAM,4BAA4B,UAChC,QAAA,gBAAgB,OAAO,0BAA0B,MAAK;;;;;;EAOxD,MAAM,cAAc,eACZ,qBAAqB,QAAA,gBAAgB,QAAA,SAAS,MAAM,CAAC,YAC7D;AAEA,WAAa;GACX;GACA;GACD,CAAA;;uBAIC,YA8CuB,8BAAA,EA9CA,YAAA,QAAA,YAAU,EAAA;2BAEf,CAAhB,YAAgB,MAAA,aAAA,CAAA,EAIR,QAAA,SAAS,SAAS,QAAA,MAAM,SAAS,QAAA,QAAQ,SAAA,WAAA,EADjD,mBAkCO,QAlCP,YAkCO;KA/BL,YAEoD,MAAA,sBAAA,EAAA;kBADzC,cAAA;iFAAa,QAAA;MACtB,OAAM;;oBACR,YAYoD,MAAA,gBAAA,EAAA;MAV1C,cAAc,aAAA;mFAAY,QAAA,SAUZ,yBAAA;MATJ;MAClB,OAAM;MACL,WAAS,CAAG,QAAA,SAAS,MAAK;MAC1B,UAAA,QAAA;MACA,mBAAa;MACd,QAAO;MACN,cAAc,QAAA,aAAa;MAC3B,YAAY,EAAE;MACd,cAAY,QAAA,aAAa;;;;;;;kBAVlB,cAAA,MAAa,CAAA,CAAA;KAYvB,YAcoB,mBAAA;MAbA;MAClB,OAAM;MACL,UAAU,QAAA,SAAS;MACnB,cAAc,QAAA,SAAS,MAAK,wBAAyB,MAAE;MACvD,aAAA,YAAA;MACA,UAAA,QAAA;MACA,aAAa,QAAA,aAAa;MAC3B,QAAO;MACN,QAAQ,QAAA,QAAQ;MAChB,SAAA,QAAA;MACA,MAAM,QAAA,MAAM;MACZ,SAAA,QAAA;MACA,iCAAiC,QAAA,gCAAgC;MACjE,gBAAA,QAAA;;;;;;;;;;;;;;wBAGL,mBAIM,OAJN,YAIM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAkD,QAAA,EAA5C,OAAM,YAAU,EAAC,wBAAoB,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA"}

package/package.json

@@ -18,7 +18,7 @@
     "rest",
     "testing"
   ],
-  "version": "3.2.0",
+  "version": "3.2.1",
   "engines": {
     "node": ">=22"
   },
@@ -332,20 +332,20 @@
     "vue-router": "5.0.4",
     "yaml": "^2.8.0",
     "zod": "^4.3.5",
+    "@scalar/components": "0.22.2",
     "@scalar/helpers": "0.5.1",
     "@scalar/icons": "0.7.2",
     "@scalar/oas-utils": "0.13.1",
-    "@scalar/components": "0.22.2",
     "@scalar/openapi-types": "0.8.0",
     "@scalar/json-magic": "0.12.7",
     "@scalar/postman-to-openapi": "0.7.0",
-    "@scalar/sidebar": "0.9.3",
     "@scalar/snippetz": "0.9.1",
+    "@scalar/sidebar": "0.9.3",
     "@scalar/themes": "0.15.3",
-    "@scalar/types": "0.9.1",
-    "@scalar/use-hooks": "0.4.3",
     "@scalar/use-codemirror": "0.14.11",
     "@scalar/use-toasts": "0.10.2",
+    "@scalar/use-hooks": "0.4.3",
+    "@scalar/types": "0.9.1",
     "@scalar/workspace-store": "0.46.2"
   },
   "devDependencies": {