@scalar/api-client 3.14.0 → 3.16.0

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 { ScalarIconButton } from '@scalar/components/icon-button'\nimport type { WorkspaceGroup } from '@scalar/components/menu'\nimport { ScalarSidebarSearchInput } from '@scalar/components/sidebar'\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 { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\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(() =>\n  documents.filter(isOpenApiDocument),\n)\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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"}
+{"version":3,"file":"Sidebar.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport type { WorkspaceGroup } from '@scalar/components/menu'\nimport { ScalarSidebarSearchInput } from '@scalar/components/sidebar'\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 { isOpenApiDocument } from '@scalar/workspace-store/schemas/type-guards'\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(() =>\n  documents.filter(isOpenApiDocument),\n)\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/SidebarMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/sidebar/SidebarMenu.vue"],"names":[],"mappings":"AA2EA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAA;AAGhC,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAA;CAC7B,CAAC;AAcF,KAAK,WAAW,GAAG;IACjB,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;CAC/B,CAAC;AAyJF,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":"SidebarMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/sidebar/SidebarMenu.vue"],"names":[],"mappings":"AA2EA,OAAO,EAQL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAA;AAGhC,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAA;CAC7B,CAAC;AAcF,KAAK,WAAW,GAAG;IACjB,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;CAC/B,CAAC;AA4JF,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/SidebarMenu.vue.script.js

@@ -2,7 +2,7 @@ import { createBlock, createTextVNode, createVNode, defineComponent, openBlock,
 import { ScalarIconGear } from "@scalar/icons";
 import { ScalarMenu, ScalarMenuLink, ScalarMenuProducts, ScalarMenuResources, ScalarMenuSection, ScalarMenuSupport, ScalarMenuWorkspacePicker } from "@scalar/components/menu";
 //#region src/v2/components/sidebar/SidebarMenu.vue?vue&type=script&setup=true&lang.ts
-var SidebarMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SidebarMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SidebarMenu",
 	props: {
 		activeWorkspace: {},

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarMenu,\n  ScalarMenuLink,\n  ScalarMenuProducts,\n  ScalarMenuResources,\n  ScalarMenuSection,\n  ScalarMenuSupport,\n  ScalarMenuWorkspacePicker,\n  type WorkspaceGroup,\n} from '@scalar/components/menu'\nimport { ScalarIconGear } from '@scalar/icons'\n\nconst { activeWorkspace, workspaces } = defineProps<{\n  /**\n   * The currently active workspace.\n   * This represents the workspace that the user is currently working in.\n   */\n  activeWorkspace: { id: 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\nconst emit = defineEmits<{\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when the user selects a workspace */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n</script>\n<template>\n  <!-- Desktop app menu -->\n  <ScalarMenu>\n    <template #products>\n      <ScalarMenuProducts selected=\"client\" />\n    </template>\n    <template #sections=\"{ close }\">\n      <ScalarMenuSection>\n        <slot name=\"sidebarMenuActions\">\n          <ScalarMenuWorkspacePicker\n            :modelValue=\"activeWorkspace.id\"\n            :workspaceOptions=\"workspaces\"\n            @createWorkspace=\"emit('create:workspace')\"\n            @update:modelValue=\"(value) => emit('select:workspace', value)\" />\n          <ScalarMenuLink\n            is=\"button\"\n            :icon=\"ScalarIconGear\"\n            @click=\"\n              () => {\n                close()\n                emit('navigate:to:settings')\n              }\n            \">\n            Settings\n          </ScalarMenuLink>\n        </slot>\n      </ScalarMenuSection>\n      <ScalarMenuResources />\n      <ScalarMenuSupport />\n    </template>\n  </ScalarMenu>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;uBAgBX,YA4Ba,MAAA,WAAA,EAAA,MAAA;IA3BA,UAAQ,cACuB,CAAxC,YAAwC,MAAA,mBAAA,EAAA,EAApB,UAAS,UAAQ,CAAA,CAAA,CAAA;IAE5B,UAAQ,SAoBG,EApBC,YAAK;KAC1B,YAmBoB,MAAA,kBAAA,EAAA,MAAA;6BADX,CAjBP,WAiBO,KAAA,QAAA,sBAAA,EAAA,QAAA,CAhBL,YAIoE,MAAA,0BAAA,EAAA;OAHjE,YAAY,QAAA,gBAAgB;OAC5B,kBAAkB,QAAA;OAClB,mBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAA;OACrB,uBAAiB,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,oBAAqB,MAAK;uDAC/D,YAUiB,MAAA,eAAA,EAAA;OATf,IAAG;OACF,MAAM,MAAA,eAAc;OACpB,eAAA;AAA8C,eAAK;AAAmB,aAAI,uBAAA;;;8BAO7E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,cAEJ,GAAA,CAAA,EAAA,CAAA;;;;;KAGJ,YAAuB,MAAA,oBAAA,CAAA;KACvB,YAAqB,MAAA,kBAAA,CAAA"}
+{"version":3,"file":"SidebarMenu.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/SidebarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarMenu,\n  ScalarMenuLink,\n  ScalarMenuProducts,\n  ScalarMenuResources,\n  ScalarMenuSection,\n  ScalarMenuSupport,\n  ScalarMenuWorkspacePicker,\n  type WorkspaceGroup,\n} from '@scalar/components/menu'\nimport { ScalarIconGear } from '@scalar/icons'\n\nconst { activeWorkspace, workspaces } = defineProps<{\n  /**\n   * The currently active workspace.\n   * This represents the workspace that the user is currently working in.\n   */\n  activeWorkspace: { id: 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\nconst emit = defineEmits<{\n  /** Emitted when the user wants to create a new workspace */\n  (e: 'create:workspace'): void\n  /** Emitted when the user selects a workspace */\n  (e: 'select:workspace', id?: string): void\n  /** Emitted when the user wants to open the settings */\n  (e: 'navigate:to:settings'): void\n}>()\n\ndefineSlots<{\n  /** Slot for customizing the actions section of the sidebar menu. */\n  sidebarMenuActions?(): unknown\n}>()\n</script>\n<template>\n  <!-- Desktop app menu -->\n  <ScalarMenu>\n    <template #products>\n      <ScalarMenuProducts selected=\"client\" />\n    </template>\n    <template #sections=\"{ close }\">\n      <ScalarMenuSection>\n        <slot name=\"sidebarMenuActions\">\n          <ScalarMenuWorkspacePicker\n            :modelValue=\"activeWorkspace.id\"\n            :workspaceOptions=\"workspaces\"\n            @createWorkspace=\"emit('create:workspace')\"\n            @update:modelValue=\"(value) => emit('select:workspace', value)\" />\n          <ScalarMenuLink\n            is=\"button\"\n            :icon=\"ScalarIconGear\"\n            @click=\"\n              () => {\n                close()\n                emit('navigate:to:settings')\n              }\n            \">\n            Settings\n          </ScalarMenuLink>\n        </slot>\n      </ScalarMenuSection>\n      <ScalarMenuResources />\n      <ScalarMenuSupport />\n    </template>\n  </ScalarMenu>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;uBAgBX,YA4Ba,MAAA,UAAA,GAAA,MAAA;IA3BA,UAAQ,cACuB,CAAxC,YAAwC,MAAA,kBAAA,GAAA,EAApB,UAAS,SAAQ,CAAA,CAAA,CAAA;IAE5B,UAAQ,SAoBG,EApBC,YAAK;KAC1B,YAmBoB,MAAA,iBAAA,GAAA,MAAA;6BADX,CAjBP,WAiBO,KAAA,QAAA,sBAAA,CAAA,SAAA,CAhBL,YAIoE,MAAA,yBAAA,GAAA;OAHjE,YAAY,QAAA,gBAAgB;OAC5B,kBAAkB,QAAA;OAClB,mBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,kBAAA;OACrB,uBAAiB,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,oBAAqB,KAAK;uDAC/D,YAUiB,MAAA,cAAA,GAAA;OATf,IAAG;OACF,MAAM,MAAA,cAAA;OACN,eAAA;QAA8C,MAAK;QAAmB,KAAI,sBAAA;;;8BAO7E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,cAEJ,EAAA,CAAA,EAAA,CAAA;;;;;KAGJ,YAAuB,MAAA,mBAAA,CAAA;KACvB,YAAqB,MAAA,iBAAA,CAAA"}

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

@@ -9,7 +9,7 @@ var _hoisted_3 = {
 	xmlns: "http://www.w3.org/2000/svg"
 };
 var _hoisted_4 = { "clip-path": "url(#mask)" };
-var SidebarToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SidebarToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SidebarToggle",
 	props: {
 		"modelValue": {

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 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,YAEzC;;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,MAAA,IAAqB,YAAQ,CAAA,IAAA,UAAA,GACnE,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,OAAM,GAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,cAAA,QAAa,kBAAA,kBAAA,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.14.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.16.0";
 //#endregion
 export { APP_VERSION };
 

package/dist/v2/features/command-palette/components/CommandActionForm.vue.script.js

@@ -4,7 +4,7 @@ import { useBindCx } from "@scalar/use-hooks/useBindCx";
 //#region src/v2/features/command-palette/components/CommandActionForm.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex gap-2" };
 var _hoisted_2 = { class: "flex max-h-8 flex-1" };
-var CommandActionForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CommandActionForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "CommandActionForm",
 	props: {
 		loader: {},

package/dist/v2/features/command-palette/components/CommandActionForm.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandActionForm.vue.script.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Form Component\n *\n * A reusable form wrapper for command palette actions.\n * Provides a consistent layout with a main content area, optional controls,\n * and a submit button. Prevents form submission when disabled.\n *\n * @example\n * <CommandActionForm\n *   :loader\n *   :disabled=\"isDisabled\"\n *   @submit=\"handleSubmit\"\n *   @cancel=\"handleCancel\"\n *   @back=\"handleBack\"\n * >\n *   <!-- Main content goes in default slot -->\n *   <CommandActionInput v-model=\"value\" />\n *\n *   <!-- Optional controls in options slot -->\n *   <template #options>\n *     <ScalarCheckbox v-model=\"option\" />\n *   </template>\n *\n *   <!-- Custom submit button text -->\n *   <template #submit>Create</template>\n * </CommandActionForm>\n */\nexport default {\n  name: 'CommandActionForm',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport type { LoadingState } from '@scalar/components/loading'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { loader, disabled = false } = defineProps<{\n  /** Loading state from useLoadingState composable to show spinner on submit button */\n  loader?: LoadingState\n  /** Whether the form and submit button are disabled */\n  disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the form is submitted (if not disabled) */\n  (event: 'submit'): void\n  /** Emitted when the action is cancelled */\n  (event: 'cancel'): void\n  /** Emitted when user presses back (e.g., Escape key) */\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Main content area for form inputs */\n  default(): void\n  /** Optional controls displayed before the submit button (e.g., checkboxes, toggles, dropdowns) */\n  options(): void\n  /** Custom text or content for the submit button (defaults to \"Continue\") */\n  submit(): void\n}>()\n\nconst { cx } = useBindCx()\n\n/** Handle form submission, only emit if not disabled */\nconst handleSubmit = (): void => {\n  if (!disabled) {\n    emit('submit')\n  }\n}\n</script>\n\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"handleSubmit\">\n    <!-- Main content area with minimum height and rounded corners -->\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n\n    <!-- Action bar with optional controls and submit button -->\n    <div class=\"flex gap-2\">\n      <!-- Optional controls slot (e.g., checkboxes, toggles) -->\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n\n      <!-- Submit button with customizable text -->\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;CA6BE,MAAM;;;;;;;;;;;;;;EAgBR,MAAM,OAAO;EAkBb,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,qBAA2B;AAC/B,OAAI,CAAC,QAAA,SACH,MAAK,SAAQ;;;uBAMf,mBAyBO,QAAA;IAxBL,OAAM;IACL,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,oBAAR,IAAmB,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA;IAClB,UAAM,cAAe,cAAY,CAAA,WAAA,OAAA,CAAA;OAElC,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,0CAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAIV,mBAcM,OAdN,YAcM,CAZJ,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA,EAIzB,YAMe,MAAA,aAAA,EAAA;IALb,OAAM;IACL,UAAU,QAAA;IACV,QAAA,QAAA;IACD,MAAK;;2BAC8B,CAAnC,WAAmC,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAf,YAAQ,GAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"CommandActionForm.vue.script.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Form Component\n *\n * A reusable form wrapper for command palette actions.\n * Provides a consistent layout with a main content area, optional controls,\n * and a submit button. Prevents form submission when disabled.\n *\n * @example\n * <CommandActionForm\n *   :loader\n *   :disabled=\"isDisabled\"\n *   @submit=\"handleSubmit\"\n *   @cancel=\"handleCancel\"\n *   @back=\"handleBack\"\n * >\n *   <!-- Main content goes in default slot -->\n *   <CommandActionInput v-model=\"value\" />\n *\n *   <!-- Optional controls in options slot -->\n *   <template #options>\n *     <ScalarCheckbox v-model=\"option\" />\n *   </template>\n *\n *   <!-- Custom submit button text -->\n *   <template #submit>Create</template>\n * </CommandActionForm>\n */\nexport default {\n  name: 'CommandActionForm',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport type { LoadingState } from '@scalar/components/loading'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { loader, disabled = false } = defineProps<{\n  /** Loading state from useLoadingState composable to show spinner on submit button */\n  loader?: LoadingState\n  /** Whether the form and submit button are disabled */\n  disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the form is submitted (if not disabled) */\n  (event: 'submit'): void\n  /** Emitted when the action is cancelled */\n  (event: 'cancel'): void\n  /** Emitted when user presses back (e.g., Escape key) */\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Main content area for form inputs */\n  default(): void\n  /** Optional controls displayed before the submit button (e.g., checkboxes, toggles, dropdowns) */\n  options(): void\n  /** Custom text or content for the submit button (defaults to \"Continue\") */\n  submit(): void\n}>()\n\nconst { cx } = useBindCx()\n\n/** Handle form submission, only emit if not disabled */\nconst handleSubmit = (): void => {\n  if (!disabled) {\n    emit('submit')\n  }\n}\n</script>\n\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"handleSubmit\">\n    <!-- Main content area with minimum height and rounded corners -->\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n\n    <!-- Action bar with optional controls and submit button -->\n    <div class=\"flex gap-2\">\n      <!-- Optional controls slot (e.g., checkboxes, toggles) -->\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n\n      <!-- Submit button with customizable text -->\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;CA6BE,MAAM;;;;;;;;;;;;;;EAgBR,MAAM,OAAO;EAkBb,MAAM,EAAE,OAAO,UAAU;;EAGzB,MAAM,qBAA2B;GAC/B,IAAI,CAAC,QAAA,UACH,KAAK,QAAQ;EAEjB;;uBAIE,mBAyBO,QAAA;IAxBL,OAAM;IACL,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,oBAAR,CAAA,GAAmB,CAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA;IAClB,UAAM,cAAe,cAAY,CAAA,WAAA,MAAA,CAAA;OAElC,mBAEM,OAAA,eAAA,mBAFO,MAAA,EAAA,CAAE,CAAA,yCAAA,CAAA,CAAA,GAAA,CACb,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,GAIV,mBAcM,OAdN,YAcM,CAZJ,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,GAIzB,YAMe,MAAA,YAAA,GAAA;IALb,OAAM;IACL,UAAU,QAAA;IACV,QAAA,QAAA;IACD,MAAK;;2BAC8B,CAAnC,WAAmC,KAAA,QAAA,UAAA,CAAA,SAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAf,YAAQ,EAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/v2/features/command-palette/components/CommandActionInput.vue.script.js

@@ -1,7 +1,7 @@
 import { computed, createElementBlock, defineComponent, mergeProps, nextTick, onMounted, openBlock, ref, vModelText, withDirectives, withKeys } from "vue";
 //#region src/v2/features/command-palette/components/CommandActionInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["placeholder"];
-var CommandActionInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CommandActionInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "CommandActionInput",
 	inheritAttrs: false,
 	props: {

package/dist/v2/features/command-palette/components/CommandActionInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandActionInput.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":";;;;CAkBE,MAAM;;;;;;;;;;;;EAoBR,MAAM,OAAO;EASb,MAAM,QAAQ,IAAgC,KAAI;;;;;EAMlD,MAAM,QAAQ,SAAiB;GAC7B,WAAW,QAAA,cAAc;GACzB,MAAM,UAAU,KAAK,qBAAqB,MAAM;GACjD,CAAA;;;;;AAMD,kBAAgB;AACd,kBAAe;AACb,QAAI,QAAA,UACF,OAAM,OAAO,OAAM;KAEtB;IACF;;;;;EAMD,MAAM,eAAe,UAA+B;AAClD,OAAI,MAAM,YAAY,CAAC,MAAM,OAC3B;AAGF,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;GACrB,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,YAAY,MAAM,CAAA;AAC5D,UAAO,MAAM,cAAc,YAAW;;;;;;EAOxC,MAAM,gBAAgB,UAA+B;AACnD,OAAI,MAAM,UAAU,GAClB;AAGF,SAAM,gBAAe;AACrB,SAAM,iBAAgB;AACtB,QAAK,UAAU,MAAK;;;uCAKpB,mBASiC,YATjC,WASiC;IAR/B,IAAG;aACC;IAAJ,KAAI;uEACU,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACzB,MAAK;MACGA,KAAAA,QAAM,EACb,WAAO,CAAA,SAAS,cAAY,CAAA,SAAA,CAAA,EAAA,SACb,aAAW,CAAA,QAAA,CAAA,CAAA,EAAA,CAAA,EAAA,MAAA,IAAA,WAAA,GAAA,CAAA,CAAA,YANlB,MAAA,MAAK,CAAA,CAAA"}
+{"version":3,"file":"CommandActionInput.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":";;;;CAkBE,MAAM;;;;;;;;;;;;EAoBR,MAAM,OAAO;EASb,MAAM,QAAQ,IAAgC,IAAI;;;;;EAMlD,MAAM,QAAQ,SAAiB;GAC7B,WAAW,QAAA,cAAc;GACzB,MAAM,UAAU,KAAK,qBAAqB,KAAK;EACjD,CAAC;;;;;EAMD,gBAAgB;GACd,eAAe;IACb,IAAI,QAAA,WACF,MAAM,OAAO,MAAM;GAEvB,CAAC;EACH,CAAC;;;;;EAMD,MAAM,eAAe,UAA+B;GAClD,IAAI,MAAM,YAAY,CAAC,MAAM,QAC3B;GAGF,MAAM,eAAe;GAErB,MAAM,SAAS,MAAM;GACrB,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,YAAY,KAAK,CAAC;GAC5D,OAAO,MAAM,cAAc,WAAW;EACxC;;;;;EAMA,MAAM,gBAAgB,UAA+B;GACnD,IAAI,MAAM,UAAU,IAClB;GAGF,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,KAAK,UAAU,KAAK;EACtB;;uCAIE,mBASiC,YATjC,WASiC;IAR/B,IAAG;aACC;IAAJ,KAAI;uEACU,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACzB,MAAK;MACGA,KAAAA,QAAM,EACb,WAAO,CAAA,SAAS,cAAY,CAAA,QAAA,CAAA,GAAA,SACb,aAAW,CAAA,OAAA,CAAA,CAAA,EAAA,CAAA,GAAA,MAAA,IAAA,UAAA,IAAA,CAAA,CAAA,YANlB,MAAA,KAAK,CAAA,CAAA"}

package/dist/v2/features/environments/EnvironmentsList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentsList.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"names":[],"mappings":"AAuGA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAQpH,KAAK,WAAW,GAAG;IACb,kEAAkE;IAClE,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,mDAAmD;IACnD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,cAAc,CAAC;AAoLvB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentsList.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"names":[],"mappings":"AAuGA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAQpH,KAAK,WAAW,GAAG;IACb,kEAAkE;IAClE,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,mDAAmD;IACnD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,cAAc,CAAC;AAwLvB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/EnvironmentsList.vue.script.js

@@ -7,7 +7,7 @@ import { ScalarIconPlus } from "@scalar/icons";
 import { useModal } from "@scalar/components/modal";
 //#region src/v2/features/environments/EnvironmentsList.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "text-c-3 flex h-full items-center justify-center rounded-lg border p-4" };
-var EnvironmentsList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentsList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentsList",
 	props: {
 		environments: {},

package/dist/v2/features/environments/EnvironmentsList.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentsList.vue.script.js","names":[],"sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { ref } from 'vue'\n\nimport EnvironmentCreateModal from '@/v2/features/environments/components/EnvironmentCreateModal.vue'\nimport EnvironmentDeleteModal from '@/v2/features/environments/components/EnvironmentDeleteModal.vue'\n\nimport EnvironmentComponent from './components/Environment.vue'\n\nconst { environments, eventBus, collectionType, activeEnvironment } =\n  defineProps<\n    {\n      /** List of environments, ensured to be non-nullable for safety */\n      environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n      /** Event bus to handle workspace-related events */\n      eventBus: WorkspaceEventBus\n      /** The currently active environment name */\n      activeEnvironment?: string\n    } & CollectionType\n  >()\n\nconst createEnvironmentModalState = useModal()\nconst deleteEnvironmentModalState = useModal()\n\n/** Track the currently selected environment for editing or deleting */\nconst selectedEnvironmentName = ref<string | null>(null)\n\n/** Opens the delete modal */\nconst openDeleteModal = (name: string) => {\n  selectedEnvironmentName.value = name\n  deleteEnvironmentModalState.show()\n}\n\n/** Deletes the selected environment */\nconst deleteEnvironment = () => {\n  if (!selectedEnvironmentName.value) {\n    return\n  }\n  eventBus.emit('environment:delete:environment', {\n    environmentName: selectedEnvironmentName.value,\n    collectionType,\n  })\n}\n\n/** Opens the upsert modal, leave name empty for add */\nconst openUpsertModal = (name?: string) => {\n  selectedEnvironmentName.value = name ?? null\n  createEnvironmentModalState.show()\n}\n</script>\n\n<template>\n  <EnvironmentComponent\n    v-for=\"[environmentName, environment] in Object.entries(environments)\"\n    :key=\"environmentName\"\n    :collectionType=\"collectionType\"\n    :environment\n    :environmentName\n    :eventBus=\"eventBus\"\n    :isActive=\"activeEnvironment === environmentName\"\n    @delete=\"() => openDeleteModal(environmentName)\"\n    @edit=\"() => openUpsertModal(environmentName)\" />\n\n  <!-- Add Environment CTA -->\n  <div\n    class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n    <ScalarButton\n      class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n      size=\"xs\"\n      variant=\"ghost\"\n      @click=\"() => openUpsertModal()\">\n      <ScalarIconPlus />\n      Add Environment\n    </ScalarButton>\n  </div>\n\n  <!-- Upsert Modal -->\n  <EnvironmentCreateModal\n    :collectionType=\"collectionType\"\n    :environments\n    :eventBus\n    :selectedEnvironmentName\n    :state=\"createEnvironmentModalState\" />\n\n  <!-- Delete Modal -->\n  <EnvironmentDeleteModal\n    :name=\"selectedEnvironmentName\"\n    :state=\"deleteEnvironmentModalState\"\n    @submit=\"deleteEnvironment\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA4BA,MAAM,8BAA8B,UAAS;EAC7C,MAAM,8BAA8B,UAAS;;EAG7C,MAAM,0BAA0B,IAAmB,KAAI;;EAGvD,MAAM,mBAAmB,SAAiB;AACxC,2BAAwB,QAAQ;AAChC,+BAA4B,MAAK;;;EAInC,MAAM,0BAA0B;AAC9B,OAAI,CAAC,wBAAwB,MAC3B;AAEF,WAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,wBAAwB;IACzC,gBAAa,QAAA;IACd,CAAA;;;EAIH,MAAM,mBAAmB,SAAkB;AACzC,2BAAwB,QAAQ,QAAQ;AACxC,+BAA4B,MAAK;;;;sBAKjC,mBASmD,UAAA,MAAA,WARR,OAAO,QAAQ,QAAA,aAAY,GAAA,CAA5D,iBAAiB,iBAAW;yBADtC,YASmD,qBAAA;MAPhD,KAAK;MACL,gBAAgB,QAAA;MAChB;MACA;MACA,UAAU,QAAA;MACV,UAAU,QAAA,sBAAsB;MAChC,gBAAc,gBAAgB,gBAAe;MAC7C,cAAY,gBAAgB,gBAAe;;;;;;;;;;;IAG9C,mBAUM,OAVN,YAUM,CARJ,YAOe,MAAA,aAAA,EAAA;KANb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAQ,iBAAe;;4BACX,CAAlB,YAAkB,MAAA,eAAA,CAAA,EAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,qBAEpB,GAAA,EAAA,CAAA;;;IAIF,YAKyC,gCAAA;KAJtC,gBAAgB,QAAA;KAChB,cAAA,QAAA;KACA,UAAA,QAAA;KACA,yBAAA,wBAAA;KACA,OAAO,MAAA,4BAA2B;;;;;;;;IAGrC,YAGgC,gCAAA;KAF7B,MAAM,wBAAA;KACN,OAAO,MAAA,4BAA2B;KAClC,UAAQ"}
+{"version":3,"file":"EnvironmentsList.vue.script.js","names":[],"sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { ref } from 'vue'\n\nimport EnvironmentCreateModal from '@/v2/features/environments/components/EnvironmentCreateModal.vue'\nimport EnvironmentDeleteModal from '@/v2/features/environments/components/EnvironmentDeleteModal.vue'\n\nimport EnvironmentComponent from './components/Environment.vue'\n\nconst { environments, eventBus, collectionType, activeEnvironment } =\n  defineProps<\n    {\n      /** List of environments, ensured to be non-nullable for safety */\n      environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n      /** Event bus to handle workspace-related events */\n      eventBus: WorkspaceEventBus\n      /** The currently active environment name */\n      activeEnvironment?: string\n    } & CollectionType\n  >()\n\nconst createEnvironmentModalState = useModal()\nconst deleteEnvironmentModalState = useModal()\n\n/** Track the currently selected environment for editing or deleting */\nconst selectedEnvironmentName = ref<string | null>(null)\n\n/** Opens the delete modal */\nconst openDeleteModal = (name: string) => {\n  selectedEnvironmentName.value = name\n  deleteEnvironmentModalState.show()\n}\n\n/** Deletes the selected environment */\nconst deleteEnvironment = () => {\n  if (!selectedEnvironmentName.value) {\n    return\n  }\n  eventBus.emit('environment:delete:environment', {\n    environmentName: selectedEnvironmentName.value,\n    collectionType,\n  })\n}\n\n/** Opens the upsert modal, leave name empty for add */\nconst openUpsertModal = (name?: string) => {\n  selectedEnvironmentName.value = name ?? null\n  createEnvironmentModalState.show()\n}\n</script>\n\n<template>\n  <EnvironmentComponent\n    v-for=\"[environmentName, environment] in Object.entries(environments)\"\n    :key=\"environmentName\"\n    :collectionType=\"collectionType\"\n    :environment\n    :environmentName\n    :eventBus=\"eventBus\"\n    :isActive=\"activeEnvironment === environmentName\"\n    @delete=\"() => openDeleteModal(environmentName)\"\n    @edit=\"() => openUpsertModal(environmentName)\" />\n\n  <!-- Add Environment CTA -->\n  <div\n    class=\"text-c-3 flex h-full items-center justify-center rounded-lg border p-4\">\n    <ScalarButton\n      class=\"hover:bg-b-2 hover:text-c-1 flex items-center gap-2\"\n      size=\"xs\"\n      variant=\"ghost\"\n      @click=\"() => openUpsertModal()\">\n      <ScalarIconPlus />\n      Add Environment\n    </ScalarButton>\n  </div>\n\n  <!-- Upsert Modal -->\n  <EnvironmentCreateModal\n    :collectionType=\"collectionType\"\n    :environments\n    :eventBus\n    :selectedEnvironmentName\n    :state=\"createEnvironmentModalState\" />\n\n  <!-- Delete Modal -->\n  <EnvironmentDeleteModal\n    :name=\"selectedEnvironmentName\"\n    :state=\"deleteEnvironmentModalState\"\n    @submit=\"deleteEnvironment\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA4BA,MAAM,8BAA8B,SAAS;EAC7C,MAAM,8BAA8B,SAAS;;EAG7C,MAAM,0BAA0B,IAAmB,IAAI;;EAGvD,MAAM,mBAAmB,SAAiB;GACxC,wBAAwB,QAAQ;GAChC,4BAA4B,KAAK;EACnC;;EAGA,MAAM,0BAA0B;GAC9B,IAAI,CAAC,wBAAwB,OAC3B;GAEF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,wBAAwB;IACzC,gBAAa,QAAA;GACf,CAAC;EACH;;EAGA,MAAM,mBAAmB,SAAkB;GACzC,wBAAwB,QAAQ,QAAQ;GACxC,4BAA4B,KAAK;EACnC;;;sBAIE,mBASmD,UAAA,MAAA,WARR,OAAO,QAAQ,QAAA,YAAY,IAAA,CAA5D,iBAAiB,iBAAW;yBADtC,YASmD,qBAAA;MAPhD,KAAK;MACL,gBAAgB,QAAA;MAChB;MACA;MACA,UAAU,QAAA;MACV,UAAU,QAAA,sBAAsB;MAChC,gBAAc,gBAAgB,eAAe;MAC7C,cAAY,gBAAgB,eAAe;;;;;;;;;;;IAG9C,mBAUM,OAVN,YAUM,CARJ,YAOe,MAAA,YAAA,GAAA;KANb,OAAM;KACN,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAQ,gBAAe;;4BACX,CAAlB,YAAkB,MAAA,cAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,gBAAA,qBAEpB,EAAA,EAAA,CAAA;;;IAIF,YAKyC,gCAAA;KAJtC,gBAAgB,QAAA;KAChB,cAAA,QAAA;KACA,UAAA,QAAA;KACA,yBAAA,wBAAA;KACA,OAAO,MAAA,2BAAA;;;;;;;;IAGV,YAGgC,gCAAA;KAF7B,MAAM,wBAAA;KACN,OAAO,MAAA,2BAAA;KACP,UAAQ"}

package/dist/v2/features/environments/components/Environment.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAInH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,cAAc,CAAC;AA6LrB,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Environment.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAInH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,cAAc,CAAC;AA+LrB,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/Environment.vue.script.js

@@ -12,7 +12,7 @@ var _hoisted_4 = {
 	title: "This is the active environment"
 };
 var _hoisted_5 = { class: "hidden flex-row items-center gap-1 group-hover:flex" };
-var Environment_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Environment_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Environment",
 	props: {
 		environment: {},

package/dist/v2/features/environments/components/Environment.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          title=\"This is the active environment\">\n          <span class=\"size-1.5 rounded-full bg-current\"></span>\n          Active\n        </span>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          label=\"Edit Environment\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          label=\"Delete Environment\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;uBAMX,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,sDACE,QAAA,WAAQ,kCAAA,GAAA,CAAA,EAAA,EAAA,CAEhB,mBAoCM,OAAA,EAnCJ,OAAK,eAAA,CAAC,uDACE,QAAA,WAAQ,mBAAA,SAAA,CAAA,EAAA,EAAA,CAChB,mBAiBM,OAjBN,YAiBM;IAhBJ,mBAIM,OAJN,YAIM,CAHJ,mBAEyD,QAAA;KADvD,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAY,OAAK,CAAA;;IAEhD,mBAEO,QAFP,YAEO,gBADF,QAAA,gBAAe,EAAA,EAAA;IAIZ,QAAA,YAAA,WAAA,EADR,mBAMO,QANP,YAMO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFL,mBAAsD,QAAA,EAAhD,OAAM,oCAAkC,EAAA,MAAA,GAAA,EAAA,gBAAQ,YAExD,GAAA,CAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA;OAIF,mBAYM,OAZN,YAYM,CAXJ,YAI0B,MAAA,iBAAA,EAAA;IAHvB,MAAM,MAAA,qBAAoB;IAC3B,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;0BAEd,YAI4B,MAAA,iBAAA,EAAA;IAHzB,MAAM,MAAA,gBAAe;IACtB,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,SAAA;iCAKlB,YAIc,mCAAA;IAHX,gBAAA,QAAA;IACA,aAAA,QAAA;IACA,iBAAA,QAAA;IACA,UAAA,QAAA"}
+{"version":3,"file":"Environment.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { ScalarIconNotePencil, ScalarIconTrash } from '@scalar/icons'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\n\nimport EnvironmentVariablesTable from '@/v2/features/environments/components/EnvironmentVariablesTable.vue'\n\nconst {\n  environmentName,\n  environment,\n  eventBus,\n  collectionType,\n  isActive = false,\n} = defineProps<\n  {\n    environment: XScalarEnvironment\n    environmentName: string\n    eventBus: WorkspaceEventBus\n    isActive?: boolean\n  } & CollectionType\n>()\n\nconst emit = defineEmits<{\n  (e: 'edit'): void\n  (e: 'delete'): void\n}>()\n</script>\n<template>\n  <div\n    class=\"group relative rounded-lg border transition-colors\"\n    :class=\"isActive ? 'border-c-accent bg-c-accent/5' : ''\">\n    <!-- Info -->\n    <div\n      class=\"flex justify-between rounded-t-lg px-1 py-1 text-sm\"\n      :class=\"isActive ? 'bg-c-accent/10' : 'bg-b-2'\">\n      <div class=\"flex items-center gap-1.5\">\n        <div class=\"flex h-6 w-6 items-center justify-center p-1\">\n          <span\n            class=\"h-2.5 w-2.5 rounded-full\"\n            :style=\"{ backgroundColor: environment.color }\"></span>\n        </div>\n        <span class=\"px-1 py-0.5 text-sm font-medium\">\n          {{ environmentName }}\n        </span>\n        <!-- Active badge -->\n        <span\n          v-if=\"isActive\"\n          class=\"bg-c-accent text-b-1 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium\"\n          title=\"This is the active environment\">\n          <span class=\"size-1.5 rounded-full bg-current\"></span>\n          Active\n        </span>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"hidden flex-row items-center gap-1 group-hover:flex\">\n        <ScalarIconButton\n          :icon=\"ScalarIconNotePencil\"\n          label=\"Edit Environment\"\n          size=\"sm\"\n          @click=\"emit('edit')\" />\n\n        <ScalarIconButton\n          :icon=\"ScalarIconTrash\"\n          label=\"Delete Environment\"\n          size=\"sm\"\n          @click=\"emit('delete')\" />\n      </div>\n    </div>\n\n    <!-- Variables Table -->\n    <EnvironmentVariablesTable\n      :collectionType\n      :environment\n      :environmentName\n      :eventBus />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;uBAMX,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,sDACE,QAAA,WAAQ,kCAAA,EAAA,CAAA,EAAA,GAAA,CAEhB,mBAoCM,OAAA,EAnCJ,OAAK,eAAA,CAAC,uDACE,QAAA,WAAQ,mBAAA,QAAA,CAAA,EAAA,GAAA,CAChB,mBAiBM,OAjBN,YAiBM;IAhBJ,mBAIM,OAJN,YAIM,CAHJ,mBAEyD,QAAA;KADvD,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,YAAY,MAAK,CAAA;;IAEhD,mBAEO,QAFP,YAEO,gBADF,QAAA,eAAe,GAAA,CAAA;IAIZ,QAAA,YAAA,UAAA,GADR,mBAMO,QANP,YAMO,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFL,mBAAsD,QAAA,EAAhD,OAAM,mCAAkC,GAAA,MAAA,EAAA,GAAA,gBAAQ,YAExD,EAAA,CAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;OAIF,mBAYM,OAZN,YAYM,CAXJ,YAI0B,MAAA,gBAAA,GAAA;IAHvB,MAAM,MAAA,oBAAA;IACP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;0BAEd,YAI4B,MAAA,gBAAA,GAAA;IAHzB,MAAM,MAAA,eAAA;IACP,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;iCAKlB,YAIc,mCAAA;IAHX,gBAAA,QAAA;IACA,aAAA,QAAA;IACA,iBAAA,QAAA;IACA,UAAA,QAAA"}

package/dist/v2/features/environments/components/EnvironmentColors.vue.script.js

@@ -13,7 +13,7 @@ var _hoisted_3 = {
 var _hoisted_4 = ["placeholder"];
 var DEFAULT_GRADIENT = "linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))";
 /** Check if the active color is one of the preset options. */
-var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentColors",
 	props: { activeColor: {} },
 	emits: ["select"],
@@ -71,7 +71,8 @@ var EnvironmentColors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		* Ensures the color value has a # prefix for hex colors.
 		*/
 		const selectColor = (color) => {
-			emit("select", color && !color.startsWith("#") ? `#${color}` : color);
+			const formattedColor = color && !color.startsWith("#") ? `#${color}` : color;
+			emit("select", formattedColor);
 			showSelector.value = false;
 		};
 		/**

package/dist/v2/features/environments/components/EnvironmentColors.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.includes(activeColor as (typeof colorOptions)[number]),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAiCA,IAAM,mBACJ;;;;;;;EA1BF,MAAM,OAAO;EAIb,MAAM,cAAc,IAAI,GAAE;EAC1B,MAAM,sBAAsB,IAA6B,KAAI;EAC7D,MAAM,kBAAkB,IAAI,MAAK;EACjC,MAAM,eAAe,IAAI,MAAK;;;;;EAM9B,MAAM,eAAe;GACnB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;;EAOD,MAAM,gBAAgB,eACpB,aAAa,SAAS,QAAA,YAA6C,CACrE;;EAGA,MAAM,gBAAgB,eACd,QAAA,eAAe,CAAC,cAAc,SAAS,CAAC,gBAAgB,MAChE;;EAGA,MAAM,iBAAiB,UAA2B,QAAA,gBAAgB;;;;;EAMlE,MAAM,oBAAoB,eAAe;GACvC,MAAM,eAAe,YAAY,SAAS,QAAA;AAC1C,UAAO,cAAc,SAAS,YAAY,QACtC,qBAAqB,aAAa,KAClC,eAAe,iBAAiB;IACrC;;;;;EAMD,MAAM,oBAAoB,YAAY;AACpC,mBAAgB,QAAQ,CAAC,gBAAgB;AACzC,gBAAa,QAAQ;AAErB,OAAI,CAAC,gBAAgB,MACnB;AAGF,SAAM,UAAS;AACf,uBAAoB,OAAO,OAAM;;;EAInC,MAAM,uBAA6B;AACjC,gBAAa,QAAQ,CAAC,aAAa;;;;;;EAOrC,MAAM,eAAe,UAAwB;AAE3C,QAAK,UADkB,SAAS,CAAC,MAAM,WAAW,IAAI,GAAG,IAAI,UAAU,MAC1C;AAC7B,gBAAa,QAAQ;;;;;;EAOvB,MAAM,+BAAqC;AACzC,OAAI,CAAC,YAAY,MACf;GAGF,MAAM,iBAAiB,YAAY,MAAM,WAAW,IAAG,GACnD,YAAY,QACZ,IAAI,YAAY;AAEpB,eAAY,QAAQ;AACpB,eAAY,eAAc;;;uBAI1B,mBAyEM,OAAA,MAAA;KAtEK,gBAAA,SAAe,CAAK,aAAA,SAAA,WAAA,EAD7B,mBAUM,OAAA;;KARJ,OAAM;KACL,OAAK,eAAA,EAAA,iBAAqB,QAAA,aAAW,CAAA;KACrC,SAAO;QAEA,QAAA,eAAA,WAAA,EADR,YAIc,MAAA,WAAA,EAAA;;KAFZ,OAAM;KACN,MAAK;KACL,MAAK;;KAKA,gBAAA,SAAmB,aAAA,SAAA,WAAA,EAD5B,mBAgCM,OAhCN,YAgCM;mBA5BJ,mBAWM,UAAA,MAAA,WAVa,eAAV,WAAM;aADf,mBAWM,OAAA;OATH,KAAK;OACN,OAAM;OACL,OAAK,eAAA,EAAA,iBAAqB,QAAM,CAAA;OAChC,UAAK,WAAE,YAAY,OAAM;UAElB,cAAc,OAAM,IAAA,WAAA,EAD5B,YAIc,MAAA,WAAA,EAAA;;OAFZ,OAAM;OACN,MAAK;OACL,MAAK;;;+BAIT,mBAA8C,MAAA,EAA1C,OAAM,mCAAiC,EAAA,MAAA,GAAA;KAG3C,mBAUS,UAAA;MATP,OAAM;MACL,OAAK,eAAE,kBAAA,MAAiB;MACzB,MAAK;MACJ,SAAO;SAEA,cAAA,SAAA,WAAA,EADR,YAIc,MAAA,WAAA,EAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;;;IAMH,gBAAA,SAAA,WAAA,EADR,mBAsBM,OAtBN,YAsBM;+BAnBJ,mBAAmE,QAAA,EAA7D,OAAM,sDAAoD,EAAA,MAAA,GAAA;KAChE,mBAE+B,QAAA;MAD7B,OAAM;MACL,OAAK,eAAE,kBAAA,MAAiB;;oBAC3B,mBAMoC,SAAA;eAL9B;MAAJ,KAAI;+EACgB,QAAA;MACpB,OAAM;MACL,aAAa,QAAA,eAAW;MACzB,MAAK;MACJ,SAAO;6CAJC,YAAA,MAAW,CAAA,CAAA;KAKtB,mBAOS,UAAA;MANP,OAAM;MACN,MAAK;MACJ,SAAO;SACR,YAEc,MAAA,WAAA,EAAA;MADZ,MAAK;MACL,MAAK"}
+{"version":3,"file":"EnvironmentColors.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { computed, nextTick, ref } from 'vue'\n\nconst { activeColor } = defineProps<{\n  activeColor: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', color: string): void\n}>()\n\nconst customColor = ref('')\nconst customColorInputRef = ref<HTMLInputElement | null>(null)\nconst showCustomInput = ref(false)\nconst showSelector = ref(false)\n\n/**\n * Predefined color options available in the color picker.\n * Each option provides a standard color choice for the environment.\n */\nconst colorOptions = [\n  '#FFFFFF',\n  '#EF0006',\n  '#EDBE20',\n  '#069061',\n  '#FB892C',\n  '#0082D0',\n  '#5203D1',\n  '#FFC0CB',\n] as const\n\n/** Default gradient shown when no custom color is selected. */\nconst DEFAULT_GRADIENT =\n  'linear-gradient(to right, rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122))'\n\n/** Check if the active color is one of the preset options. */\nconst isPresetColor = computed(() =>\n  colorOptions.includes(activeColor as (typeof colorOptions)[number]),\n)\n\n/** Check if a custom color is being used (not in the preset list). */\nconst isCustomColor = computed(\n  () => activeColor && !isPresetColor.value && !showCustomInput.value,\n)\n\n/** Check if the given color matches the currently active color. */\nconst isActiveColor = (color: string): boolean => activeColor === color\n\n/**\n * Style for the custom color button.\n * Shows the actual color if custom, otherwise shows a gradient.\n */\nconst customButtonStyle = computed(() => {\n  const displayColor = customColor.value || activeColor\n  return isCustomColor.value || customColor.value\n    ? `background-color: ${displayColor};`\n    : `background: ${DEFAULT_GRADIENT};`\n})\n\n/**\n * Toggle the custom color input visibility.\n * Focuses the input after it becomes visible.\n */\nconst toggleCustomInput = async () => {\n  showCustomInput.value = !showCustomInput.value\n  showSelector.value = false\n\n  if (!showCustomInput.value) {\n    return\n  }\n\n  await nextTick()\n  customColorInputRef.value?.focus()\n}\n\n/** Toggle the color selector visibility. */\nconst toggleSelector = (): void => {\n  showSelector.value = !showSelector.value\n}\n\n/**\n * Select a color and emit the selection event.\n * Ensures the color value has a # prefix for hex colors.\n */\nconst selectColor = (color: string): void => {\n  const formattedColor = color && !color.startsWith('#') ? `#${color}` : color\n  emit('select', formattedColor)\n  showSelector.value = false\n}\n\n/**\n * Handle custom color input changes.\n * Formats the color and emits the selection.\n */\nconst handleCustomColorInput = (): void => {\n  if (!customColor.value) {\n    return\n  }\n\n  const formattedColor = customColor.value.startsWith('#')\n    ? customColor.value\n    : `#${customColor.value}`\n\n  customColor.value = formattedColor\n  selectColor(formattedColor)\n}\n</script>\n<template>\n  <div>\n    <!-- Collapsed view: single color dot -->\n    <div\n      v-if=\"!showCustomInput && !showSelector\"\n      class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n      :style=\"{ backgroundColor: activeColor }\"\n      @click=\"toggleSelector\">\n      <ScalarIcon\n        v-if=\"activeColor\"\n        class=\"text-c-btn p-0.5\"\n        icon=\"Checkmark\"\n        size=\"xs\" />\n    </div>\n\n    <!-- Expanded view: color palette selector -->\n    <div\n      v-if=\"!showCustomInput && showSelector\"\n      class=\"color-selector flex h-4 flex-row items-center justify-between gap-1.5 space-x-1\">\n      <!-- Preset color options -->\n      <div\n        v-for=\"option in colorOptions\"\n        :key=\"option\"\n        class=\"flex h-4 w-4 cursor-pointer items-center justify-center rounded-full\"\n        :style=\"{ backgroundColor: option }\"\n        @click=\"selectColor(option)\">\n        <ScalarIcon\n          v-if=\"isActiveColor(option)\"\n          class=\"text-c-btn p-0.5\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </div>\n\n      <!-- Divider -->\n      <hr class=\"border-ghost h-5 w-0.5 border-l\" />\n\n      <!-- Custom color button -->\n      <button\n        class=\"z-10 flex h-4 w-4 cursor-pointer flex-row items-center justify-center gap-2 rounded-full\"\n        :style=\"customButtonStyle\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          v-if=\"isCustomColor\"\n          class=\"text-c-btn\"\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n\n    <!-- Custom color input view -->\n    <div\n      v-if=\"showCustomInput\"\n      class=\"color-selector flex h-4 flex-1 items-center gap-2 rounded\">\n      <span class=\"absolute h-4 w-4 rounded-full border border-dashed\" />\n      <span\n        class=\"z-[1] h-4 w-4 rounded-full\"\n        :style=\"customButtonStyle\" />\n      <input\n        ref=\"customColorInputRef\"\n        v-model=\"customColor\"\n        class=\"w-full flex-1 border-transparent text-sm outline-none\"\n        :placeholder=\"activeColor || '#000000'\"\n        type=\"text\"\n        @input=\"handleCustomColorInput\" />\n      <button\n        class=\"text-c-3 hover:bg-b-2 rounded-lg p-1.5\"\n        type=\"button\"\n        @click=\"toggleCustomInput\">\n        <ScalarIcon\n          icon=\"Checkmark\"\n          size=\"xs\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AAkJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACvE,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAUpH,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAkNrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentCreateModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"names":[],"mappings":"AAkJA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACvE,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAA;AAUpH,KAAK,WAAW,GAAG;IACf,YAAY,EAAE,WAAW,CAAC,mBAAmB,CAAC,uBAAuB,CAAC,CAAC,CAAA;IACvE,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAoNrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.script.js

@@ -10,7 +10,7 @@ var _hoisted_2 = {
 	class: "text-red text-xs"
 };
 var DEFAULT_COLOR = "#FFFFFF";
-var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentCreateModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentCreateModal",
 	props: {
 		environments: {},

package/dist/v2/features/environments/components/EnvironmentCreateModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,GAAE;EACnB,MAAM,gBAAgB,IAAI,cAAa;;AAGvC,cACQ,QAAA,MAAM,OACX,WAAW;AACV,OAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;AAG5D,QAAI,QAAA,2BAA2B,aAAa;AAC1C,UAAK,QAAQ,QAAA;AACb,mBAAc,QAAQ,YAAY;WAI/B;AACH,UAAK,QAAQ;AACb,mBAAc,QAAQ;;;IAI9B;;;;;EAMA,MAAM,qBAAqB,UAAwB;AACjD,iBAAc,QAAQ;;;EAIxB,MAAM,qBAA2B;AAE/B,OAAI,QAAA,wBACF,SAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,OACtB;IACD,iBAAiB,KAAK,MAAM,MAAM;IAClC,gBAAa,QAAA;IACd,CAAA;OAID,SAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,MAAM;IAClC,SAAS,EACP,OAAO,cAAc,OACtB;IACD,gBAAa,QAAA;IACd,CAAA;AAGH,WAAA,MAAM,MAAK;;;EAIb,MAAM,kBAAkB,eAAe;AACrC,OAAI,QAAA,wBACF,QACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;AAIjD,UAAO,OAAO,KAAK,QAAA,aAAa,CAAC,SAAS,KAAK,MAAK;IACrD;;uBAIC,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,MAAA,0BAAA,EAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,MAAI,IAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,MAAA,GAAsB,iBAClD,EAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,MAAA,2BAAA,EAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,WAAA,EADR,mBAIM,OAJN,YAE2B,6CAE3B,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"EnvironmentCreateModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport type {\n  CollectionType,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nimport EnvironmentColors from './EnvironmentColors.vue'\n\nconst {\n  state,\n  eventBus,\n  collectionType,\n  environments,\n  selectedEnvironmentName,\n} = defineProps<\n  {\n    environments: NonNullable<XScalarEnvironments['x-scalar-environments']>\n    selectedEnvironmentName: string | null\n    state: ModalState\n    eventBus: WorkspaceEventBus\n  } & CollectionType\n>()\n\n/** Default color for new environments. */\nconst DEFAULT_COLOR = '#FFFFFF'\n\nconst name = ref('')\nconst selectedColor = ref(DEFAULT_COLOR)\n\n/** Ensure [re]set the form on open */\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (isOpen) {\n      const environment = environments[selectedEnvironmentName ?? '']\n\n      // We are editing so lets fill in the form with the existing data\n      if (selectedEnvironmentName && environment) {\n        name.value = selectedEnvironmentName\n        selectedColor.value = environment.color\n      }\n\n      // We are adding a new environment so lets clear the form\n      else {\n        name.value = ''\n        selectedColor.value = DEFAULT_COLOR\n      }\n    }\n  },\n)\n\n/**\n * Handle color selection from the color picker.\n * Updates the selected color for the new environment.\n */\nconst handleColorSelect = (color: string): void => {\n  selectedColor.value = color\n}\n\n/** Emits an event to create the environment with the provided name and color. */\nconst handleSubmit = (): void => {\n  // Editing an existing environment\n  if (selectedEnvironmentName) {\n    eventBus.emit('environment:upsert:environment', {\n      oldEnvironmentName: selectedEnvironmentName,\n      payload: {\n        color: selectedColor.value,\n      },\n      environmentName: name.value.trim(),\n      collectionType,\n    })\n  }\n  // Adding a new environment\n  else {\n    eventBus.emit('environment:upsert:environment', {\n      environmentName: name.value.trim(),\n      payload: {\n        color: selectedColor.value,\n      },\n      collectionType,\n    })\n  }\n\n  state.hide()\n}\n\n/** Check if the environment name is a duplicate */\nconst isDuplicateName = computed(() => {\n  if (selectedEnvironmentName) {\n    return (\n      name.value !== selectedEnvironmentName &&\n      Object.keys(environments).includes(name.value)\n    )\n  }\n\n  return Object.keys(environments).includes(name.value)\n})\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg\"\n    size=\"xs\"\n    :state=\"state\">\n    <CommandActionForm\n      :disabled=\"!name.trim() || isDuplicateName\"\n      @submit=\"handleSubmit\">\n      <div class=\"flex items-start gap-2\">\n        <!-- Color picker for environment -->\n        <EnvironmentColors\n          :activeColor=\"selectedColor\"\n          class=\"peer\"\n          @select=\"handleColorSelect\" />\n\n        <!-- Environment name input, hidden when color selector is expanded -->\n        <CommandActionInput\n          v-model=\"name\"\n          class=\"-mt-[.5px] !p-0 peer-has-[.color-selector]:hidden\"\n          placeholder=\"Environment name\" />\n      </div>\n\n      <!-- Error message -->\n      <div\n        v-if=\"isDuplicateName\"\n        class=\"text-red text-xs\">\n        This environment name is already in use.\n      </div>\n\n      <!-- Submit button -->\n      <template #submit>\n        {{ selectedEnvironmentName ? 'Update' : 'Add' }} Environment\n      </template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;AAgCA,IAAM,gBAAgB;;;;;;;;;;;;EAEtB,MAAM,OAAO,IAAI,EAAE;EACnB,MAAM,gBAAgB,IAAI,aAAa;;EAGvC,YACQ,QAAA,MAAM,OACX,WAAW;GACV,IAAI,QAAQ;IACV,MAAM,cAAc,QAAA,aAAa,QAAA,2BAA2B;IAG5D,IAAI,QAAA,2BAA2B,aAAa;KAC1C,KAAK,QAAQ,QAAA;KACb,cAAc,QAAQ,YAAY;IACpC,OAGK;KACH,KAAK,QAAQ;KACb,cAAc,QAAQ;IACxB;GACF;EACF,CACF;;;;;EAMA,MAAM,qBAAqB,UAAwB;GACjD,cAAc,QAAQ;EACxB;;EAGA,MAAM,qBAA2B;GAE/B,IAAI,QAAA,yBACF,QAAA,SAAS,KAAK,kCAAkC;IAC9C,oBAAoB,QAAA;IACpB,SAAS,EACP,OAAO,cAAc,MACvB;IACA,iBAAiB,KAAK,MAAM,KAAK;IACjC,gBAAa,QAAA;GACf,CAAC;QAID,QAAA,SAAS,KAAK,kCAAkC;IAC9C,iBAAiB,KAAK,MAAM,KAAK;IACjC,SAAS,EACP,OAAO,cAAc,MACvB;IACA,gBAAa,QAAA;GACf,CAAC;GAGH,QAAA,MAAM,KAAK;EACb;;EAGA,MAAM,kBAAkB,eAAe;GACrC,IAAI,QAAA,yBACF,OACE,KAAK,UAAU,QAAA,2BACf,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;GAIjD,OAAO,OAAO,KAAK,QAAA,YAAY,CAAC,CAAC,SAAS,KAAK,KAAK;EACtD,CAAC;;uBAIC,YAiCc,MAAA,WAAA,GAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;;2BA6BY,CA5BpB,YA4BoB,MAAA,yBAAA,GAAA;KA3BjB,UAAQ,CAAG,KAAA,MAAK,KAAI,KAAM,gBAAA;KAC1B,UAAQ;;KAuBE,QAAM,cACiC,CAAA,gBAAA,gBAA7C,QAAA,0BAAuB,WAAA,KAAA,IAAsB,iBAClD,CAAA,CAAA,CAAA;4BAZM,CAZN,mBAYM,OAZN,YAYM,CAVJ,YAGgC,2BAAA;MAF7B,aAAa,cAAA;MACd,OAAM;MACL,UAAQ;mCAGX,YAGmC,MAAA,0BAAA,GAAA;kBAFxB,KAAA;wEAAI,QAAA;MACb,OAAM;MACN,aAAY;oCAKR,gBAAA,SAAA,UAAA,GADR,mBAIM,OAJN,YAE2B,4CAE3B,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AAuDA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAEvE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AA4HF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"names":[],"mappings":"AAuDA,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAEvE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB,CAAC;AA8HF,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.script.js

@@ -3,7 +3,7 @@ import { ScalarButton } from "@scalar/components/button";
 import { ScalarModal } from "@scalar/components/modal";
 //#region src/v2/features/environments/components/EnvironmentDeleteModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex justify-between" };
-var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentDeleteModal_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentDeleteModal",
 	props: {
 		state: {},

package/dist/v2/features/environments/components/EnvironmentDeleteModal.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,YAAA,EAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,+CAA6C,EAAC,qFAGvD,GAAA,GACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,GAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,aAAA,EAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;AAAiC,WAAI,SAAA;AAAuB,cAAA,MAAM,MAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"EnvironmentDeleteModal.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentDeleteModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\n\nconst { state, name = 'unknown' } = defineProps<{\n  state: ModalState\n  name: string | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (event: 'submit'): void\n}>()\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"border-t-0 rounded-t-lg flex flex-col gap-4\"\n    size=\"xxs\"\n    :state=\"state\"\n    :title=\"`Delete ${name}`\">\n    <p class=\"text-c-2 text-sm leading-normal text-pretty\">\n      Are you sure you want to delete this environment? This action cannot be\n      undone.\n    </p>\n    <div class=\"flex justify-between\">\n      <ScalarButton\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"\n          () => {\n            emit('cancel')\n            state.hide()\n          }\n        \">\n        Cancel\n      </ScalarButton>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"danger\"\n        @click=\"\n          () => {\n            emit('submit')\n            state.hide()\n          }\n        \">\n        Delete Environment\n      </ScalarButton>\n    </div>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,MAAM,OAAO;;uBAOX,YAiCc,MAAA,WAAA,GAAA;IAhCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAK,UAAY,QAAA;;2BAId,CAAA,OAAA,OAAA,OAAA,KAHJ,mBAGI,KAAA,EAHD,OAAM,8CAA6C,GAAC,qFAGvD,EAAA,IACA,mBAuBM,OAvBN,YAuBM,CAtBJ,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,YAEJ,EAAA,CAAA,EAAA,CAAA;;QACA,YAUe,MAAA,YAAA,GAAA;KATb,MAAK;KACL,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,WAAA;MAAiC,KAAI,QAAA;MAAuB,QAAA,MAAM,KAAI;;;4BAO9E,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFI,wBAEJ,EAAA,CAAA,EAAA,CAAA"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AAmTA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AA8aF,QAAA,MAAM,YAAY;gCA1QiB,IAAI,GAAG,MAAM;;;;;;;;;;;kFA8Q9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"names":[],"mappings":"AAmTA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AASnH,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,iFAAiF;IACjF,oBAAoB,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC;AAibF,QAAA,MAAM,YAAY;gCA7QiB,IAAI,GAAG,MAAM;;;;;;;;;;;kFAiR9C,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js

@@ -19,7 +19,7 @@ var _hoisted_4 = {
 };
 var _hoisted_5 = { class: "max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap" };
 var DROPDOWN_LIMIT = 12;
-var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentVariablesDropdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentVariablesDropdown",
 	props: {
 		query: {},

package/dist/v2/features/environments/components/EnvironmentVariablesDropdown.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        aria-label=\"Variable suggestions\"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"EnvironmentVariablesDropdown.vue.script.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTeleport } from '@scalar/components/teleport'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport { POPULAR_CONTEXT_FUNCTION_KEYS } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, watch, type CSSProperties } from 'vue'\n\ntype DropdownRow =\n  | { kind: 'env'; key: string; secondary: string }\n  | { kind: 'context'; key: string; secondary: string }\n\nconst {\n  query,\n  environment,\n  dropdownPosition,\n  contextFunctionItems = [],\n  listboxId,\n} = defineProps<{\n  query: string\n  environment?: XScalarEnvironment\n  dropdownPosition?: { left: number; top: number }\n  /** Runtime placeholders such as `{{$guid}}`, shown with environment variables */\n  contextFunctionItems?: { key: string; description: string }[]\n  /**\n   * Id for the `role=\"listbox\"` element. When set, each option also receives a\n   * stable id so the owning combobox input can reference the active option via\n   * `aria-activedescendant` (W3C combobox pattern).\n   */\n  listboxId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n  (e: 'redirect'): void\n  /**\n   * Fired when the user dismisses the panel by clicking outside. The owning\n   * combobox needs this to clear its `aria-expanded`/`aria-controls` state,\n   * which would otherwise keep pointing at a listbox that is no longer mounted.\n   */\n  (e: 'close'): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\n\nconst redirectToEnvironment = () => {\n  emit('redirect')\n  isOpen.value = false\n  // The panel is gone, so tell the combobox to drop its aria-expanded /\n  // aria-controls — otherwise they keep pointing at a dismissed listbox.\n  emit('close')\n}\n\n/** Normalize the variables to have a name and value */\nconst normalizedVariables = computed(() =>\n  (environment?.variables ?? []).map((v) => ({\n    key: v.name,\n    value: typeof v.value === 'string' ? v.value : v.value.default,\n  })),\n)\n\nconst contextRows = computed((): DropdownRow[] =>\n  contextFunctionItems.map((item) => ({\n    kind: 'context',\n    key: item.key,\n    secondary: item.description,\n  })),\n)\n\nconst envRows = computed((): DropdownRow[] =>\n  normalizedVariables.value\n    .filter(({ key, value }) => key !== '' || value !== '')\n    .map(({ key, value }) => ({\n      kind: 'env' as const,\n      key,\n      secondary: value,\n    })),\n)\n\ntype FuseRow = DropdownRow & { fuseText: string }\n\nconst envFuseSource = computed((): FuseRow[] =>\n  envRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst contextFuseSource = computed((): FuseRow[] =>\n  contextRows.value.map((row) => ({\n    ...row,\n    fuseText: `${row.key} ${row.secondary}`,\n  })),\n)\n\nconst fuseEnv = computed(\n  () =>\n    new Fuse(envFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst fuseContext = computed(\n  () =>\n    new Fuse(contextFuseSource.value, {\n      keys: ['fuseText'],\n      threshold: 0.35,\n    }),\n)\n\nconst popularContextRows = computed((): DropdownRow[] => {\n  const byKey = new Map(contextFunctionItems.map((c) => [c.key, c]))\n  return POPULAR_CONTEXT_FUNCTION_KEYS.flatMap((key) => {\n    const item = byKey.get(key)\n    return item\n      ? [\n          {\n            kind: 'context' as const,\n            key: item.key,\n            secondary: item.description,\n          },\n        ]\n      : []\n  })\n})\n\nconst DROPDOWN_LIMIT = 12\n\nconst filteredVariables = computed((): DropdownRow[] => {\n  if (!query.trim()) {\n    const envSlice = envRows.value.slice(-4)\n    return [...envSlice, ...popularContextRows.value]\n  }\n\n  const q = query.trim()\n  const envMatches = fuseEnv.value\n    .search(q, { limit: DROPDOWN_LIMIT })\n    .map((res) => {\n      const { kind, key, secondary } = res.item\n      return { kind, key, secondary }\n    })\n\n  const remaining = DROPDOWN_LIMIT - envMatches.length\n  const contextMatches =\n    remaining > 0\n      ? fuseContext.value.search(q, { limit: remaining }).map((res) => {\n          const { kind, key, secondary } = res.item\n          return { kind, key, secondary }\n        })\n      : []\n\n  return [...envMatches, ...contextMatches]\n})\n\nconst optionId = (index: number): string | undefined =>\n  listboxId ? `${listboxId}-option-${index}` : undefined\n\n/**\n * Id of the currently highlighted option, for the combobox's\n * `aria-activedescendant`. Undefined when there is no list to point at.\n */\nconst activeOptionId = computed((): string | undefined =>\n  filteredVariables.value.length\n    ? optionId(selectedVariableIndex.value)\n    : undefined,\n)\n\nconst selectVariable = (variableKey: string): void => {\n  emit('select', variableKey)\n}\n\n// Narrowing the query shrinks the list; keep the highlight in range so both the\n// visible selection and `aria-activedescendant` never reference a dropped option.\nwatch(\n  () => filteredVariables.value.length,\n  (length) => {\n    if (selectedVariableIndex.value > length - 1) {\n      selectedVariableIndex.value = Math.max(0, length - 1)\n    }\n  },\n)\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n  activeOptionId,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n    emit('close')\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll z-context fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\"\n      @mousedown.prevent>\n      <!--\n        Always rendered (even with no matches) so the combobox's `aria-controls`\n        always resolves to a real listbox; an empty list simply has no options.\n      -->\n      <ul\n        :id=\"listboxId\"\n        aria-label=\"Variable suggestions\"\n        class=\"gap-1/2 flex flex-col\"\n        role=\"listbox\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"`${item.kind}-${item.key}`\">\n          <li\n            :id=\"optionId(index)\"\n            :aria-selected=\"index === selectedVariableIndex\"\n            class=\"font-code text-xxs hover:bg-b-3 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-3': index === selectedVariableIndex }\"\n            role=\"option\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"item.kind === 'env'\"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: environment?.color,\n                }\" />\n              <span\n                v-else\n                class=\"text-c-3 bg-b-3 flex h-4.5 min-w-4.5 items-center justify-center rounded px-0.5 font-sans text-[9px] font-semibold\">\n                fn\n              </span>\n              {{ item.key }}\n            </div>\n            <span\n              class=\"max-w-[9rem] overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.secondary }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-if=\"!filteredVariables.length\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-3 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentVariablesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"names":[],"mappings":"AA2KA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAWnH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAgWrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"EnvironmentVariablesTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/environments/components/EnvironmentVariablesTable.vue"],"names":[],"mappings":"AA2KA,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAWnH,KAAK,WAAW,GAAG;IACf,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GAAG,cAAc,CAAC;AAmWrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default from "./EnvironmentVariablesTable.vue.script.js";
 /* empty css                                        */
 //#region src/v2/features/environments/components/EnvironmentVariablesTable.vue
-var EnvironmentVariablesTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5b336842"]]);
+var EnvironmentVariablesTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5b336842"]]);
 //#endregion
 export { EnvironmentVariablesTable_default as default };
 

package/dist/v2/features/environments/components/EnvironmentVariablesTable.vue.script.js

@@ -7,7 +7,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconTrash } from "@scalar/icons";
 //#region src/v2/features/environments/components/EnvironmentVariablesTable.vue?vue&type=script&setup=true&lang.ts
-var EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EnvironmentVariablesTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "EnvironmentVariablesTable",
 	props: {
 		environment: {},