@scalar/api-client 3.8.2 → 3.8.3

package/dist/v2/components/server/ServerDropdownItem.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdownItem.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAeA,MAAM,OAAO;EAOb,MAAM,SAAS,OAAM;EAErB,MAAM,qBAAqB;AACzB,UAAO,OAAO,KAAK,QAAA,QAAQ,aAAa,EAAE,CAAC,CAAC,SAAS;;EAGvD,MAAM,mBAAmB,eAAe,QAAA,aAAa,OAAO,QAAA,QAAQ,IAAG;EACvE,MAAM,aAAa,eAAe,iBAAiB,SAAS,cAAc,CAAA;;uBAGxE,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,qDAAmD,EAAA,sBAAA,CACxB,iBAAA,OAAgB,CAAA,CAAA,EAAA,EAAA,CACjD,mBAWS,UAXT,WACU,WAUD,QAVW,EAAA,iBAAsB,MAAA,OAAM,EAAA,GAAA,EAAA,EAAA;IAC7C,iBAAe,WAAA;IAChB,OAAK,CAAC,mEACE,iBAAA,QAAgB,oBAAA,eAAA;IACxB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAA;QACZ,YAAsD,MAAA,sBAAA,EAAA,EAA9B,UAAU,iBAAA,OAAgB,EAAA,MAAA,GAAA,CAAA,WAAA,CAAA,EAClD,mBAEO,QAFP,YAEO,gBADF,QAAA,aAAa,MAAK,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,EAKjB,WAAA,SAAA,WAAA,EADR,mBAgBM,OAAA;;IAdH,IAAI,MAAA,OAAM;IACX,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;OACX,YAIM,6BAAA;IAHH,WAAW,QAAA,QAAQ;IACnB,qBAAe,OAAA,OAAA,OAAA,MAAc,KAAK,UAAU,KAAI,mBAAoB,KAAK,MAAK;+BAItE,QAAA,QAAQ,eAAA,WAAA,EAAnB,mBAIM,OAAA,YAAA,CAHJ,mBAEM,OAFN,YAEM,CADJ,YAA8C,MAAA,eAAA,EAAA,EAA7B,OAAO,QAAA,OAAO,aAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ServerDropdownItem.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox } from '@scalar/components/listbox'\nimport { ScalarMarkdown } from '@scalar/components/markdown'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,OAAO;EAOb,MAAM,SAAS,OAAM;EAErB,MAAM,qBAAqB;AACzB,UAAO,OAAO,KAAK,QAAA,QAAQ,aAAa,EAAE,CAAC,CAAC,SAAS;;EAGvD,MAAM,mBAAmB,eAAe,QAAA,aAAa,OAAO,QAAA,QAAQ,IAAG;EACvE,MAAM,aAAa,eAAe,iBAAiB,SAAS,cAAc,CAAA;;uBAGxE,mBAiCM,OAAA,EAhCJ,OAAK,eAAA,CAAC,qDAAmD,EAAA,sBAAA,CACxB,iBAAA,OAAgB,CAAA,CAAA,EAAA,EAAA,CACjD,mBAWS,UAXT,WACU,WAUD,QAVW,EAAA,iBAAsB,MAAA,OAAM,EAAA,GAAA,EAAA,EAAA;IAC7C,iBAAe,WAAA;IAChB,OAAK,CAAC,mEACE,iBAAA,QAAgB,oBAAA,eAAA;IACxB,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAA;QACZ,YAAsD,MAAA,sBAAA,EAAA,EAA9B,UAAU,iBAAA,OAAgB,EAAA,MAAA,GAAA,CAAA,WAAA,CAAA,EAClD,mBAEO,QAFP,YAEO,gBADF,QAAA,aAAa,MAAK,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,EAKjB,WAAA,SAAA,WAAA,EADR,mBAgBM,OAAA;;IAdH,IAAI,MAAA,OAAM;IACX,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;OACX,YAIM,6BAAA;IAHH,WAAW,QAAA,QAAQ;IACnB,qBAAe,OAAA,OAAA,OAAA,MAAc,KAAK,UAAU,KAAI,mBAAoB,KAAK,MAAK;+BAItE,QAAA,QAAQ,eAAA,WAAA,EAAnB,mBAIM,OAAA,YAAA,CAHJ,mBAEM,OAFN,YAEM,CADJ,YAA8C,MAAA,eAAA,EAAA,EAA7B,OAAO,QAAA,OAAO,aAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA"}

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

@@ -1,4 +1,4 @@
-import { type WorkspaceGroup } from '@scalar/components';
+import type { WorkspaceGroup } from '@scalar/components/menu';
 import { type DraggingItem, type HoveredItem, type SidebarState } from '@scalar/sidebar';
 import type { WorkspaceDocument } from '@scalar/workspace-store/schemas';
 import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation';

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { 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":""}
+{"version":3,"file":"Sidebar.vue.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":""}

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

@@ -2,8 +2,9 @@ import Resize_default from "../resize/Resize.vue.js";
 import { useSearchIndex } from "../../features/search/hooks/use-search-index.js";
 import SidebarMenu_default from "./SidebarMenu.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useSlots, withCtx } from "vue";
-import { ScalarIconButton, ScalarSidebarSearchInput } from "@scalar/components";
 import { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from "@scalar/icons";
+import { ScalarIconButton } from "@scalar/components/icon-button";
+import { ScalarSidebarSearchInput } from "@scalar/components/sidebar";
 import { ScalarSidebar } from "@scalar/sidebar";
 import { isOpenApiDocument } from "@scalar/workspace-store/schemas/type-guards";
 //#region src/v2/components/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.vue.script.js","names":[],"sources":["../../../../src/v2/components/sidebar/Sidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchInput,\n  type WorkspaceGroup,\n} from '@scalar/components'\nimport { ScalarIconFileDashed, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport {\n  ScalarSidebar,\n  type DraggingItem,\n  type HoveredItem,\n  type SidebarState,\n} from '@scalar/sidebar'\nimport type { WorkspaceDocument } from '@scalar/workspace-store/schemas'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport { 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,OAAO;EAab,MAAM,QAAQ,UAAA;;EAgBd,MAAM,kBAAkB,IAAI,MAAK;;EAGjC,MAAM,eAAe,SAAmB,SAAC,eAGxC;EAED,MAAM,WAAW,SAAyB;AACxC,UAAO,KAAK,SAAS,aAAa,KAAK,UAAU;;;EAInD,MAAM,EAAE,OAAO,YAAY,qBACzB,QAAA,UAAU,OAAO,kBAAkB,CACrC;;EAGA,MAAM,QAAQ,eAAe,QAAQ,SAAS,QAAA,aAAa,MAAM,MAAK;;EAGtE,MAAM,oBAAoB,OAAe;AACvC,QAAK,cAAc,GAAE;AACrB,SAAM,QAAQ;AACd,mBAAgB,QAAQ;;;uBAIxB,YAwGS,MAAA,eAAA,EAAA;IAvGC,OAAO,aAAA;yEAAY,QAAA;IAC3B,OAAM;;IACK,SAAO,cAmGA,CAlGhB,YAkGgB,MAAA,cAAA,EAAA;KAjGd,OAAM;KACL,QAAQ;KACR,aAAa,QAAA,WAAM;KACnB,aAAa,QAAA;KACb,YAAY,QAAA,aAAa;KACzB,YAAY,QAAA,aAAa;KACzB,OAAA,MAAA;KACD,QAAO;KACN,SAAO,EAAA,8BAAkC,QAAA,WAAM,SAAA;KAC/C,WAAO,OAAA,OAAA,OAAA,MAAc,cAAc,gBAA4B,KAAI,WAAY,cAAc,YAAW;KAIxG,cAAY;;KACF,QAAM,cAEqC,CAAA,OAAA,OAAA,OAAA,KAApD,mBAAoD,OAAA,EAA/C,OAAM,oCAAkC,EAAA,MAAA,GAAA,GAC7C,mBAwCM,OAAA,EAvCJ,OAAK,eAAA,CAAC,wDAAsD;sBACpB,QAAA,WAAM;kCAA0D,QAAA,WAAM;uCAA6D,QAAA,WAAM;aAMzK,QAAA,WAAM,SAAA,WAAA,EADd,mBA2BM,OAAA;;MAzBJ,OAAK,eAAA,CAAC,qCAAmC,EAAA,gBACf,QAAA,WAAM,WAAA,CAAA,CAAA;SAGxB,QAAA,WAAM,WAAA,WAAA,EADd,YAUc,qBAAA;;MARX,iBAAiB,QAAA;MACjB,YAAY,QAAA;MACZ,sBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAA;MACtB,0BAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,uBAAA;MAC1B,sBAAgB,OAAA,OAAA,OAAA,MAAG,OAAO,KAAI,oBAAqB,GAAE;;MAC3C,oBAAkB,cACO,CAAlC,WAAkC,KAAA,QAAA,qBAAA,CAAA,CAAA;;iDAKtB,QAAA,WAAM,WAAA,WAAA,EAAtB,mBAA0C,OAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAG1C,YAKgD,MAAA,iBAAA,EAAA;MAJ9C,OAAM;MACL,MAAM,MAAA,0BAAyB;MAChC,OAAM;MACN,MAAK;MACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,gBAAA,QAAe,CAAI,gBAAA;iEAIvB,gBAAA,SAAmB,QAAA,WAAM,SAAA,WAAA,EADjC,YAGkC,MAAA,yBAAA,EAAA;;kBADvB,MAAA,MAAK;wFAAA,QAAA,SAAA;MACb,WAAW,QAAA,WAAM;;KAIb,QAAM,cACW,CAAA,OAAA,OAAA,OAAA,KAA1B,mBAA0B,OAAA,EAArB,OAAM,UAAQ,EAAA,MAAA,GAAA,EAAA,CAAA;KAWV,MAAI,SAAE,cAAS,CACR,MAAM,QAAQ,QAAQ,UAAU,KAAI,IAAA,WAAA,EAApD,mBAKW,UAAA,EAAA,KAAA,GAAA,EAAA,CAJmB,QAAQ,UAAU,KAAI,IAAA,WAAA,EAAlD,YAAuD,MAAA,qBAAA,EAAA,EAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EACvD,WAEgB,KAAA,QAAA,QAAA,eAAA,mBADN,UAAS,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA;KAcZ,QAAM,cACgB,CAA/B,WAA+B,KAAA,QAAA,kBAAA,CAAA,CAAA;KAGtB,QAAM,cACO,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA;;QA9BhB,MAAM,YAAA;WACX;kBAAW,mBAAc,CAC1B,WAEqB,KAAA,QAAA,aAAA,eAAA,mBADX,eAAc,CAAA,CAAA,CAAA,CAAA;;gBAelB,MAAM,QAAA;WACX;kBAAO,eAAU,CAClB,WAEiB,KAAA,QAAA,SAAA,eAAA,mBADP,WAAU,CAAA,CAAA,CAAA,CAAA"}
+{"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

@@ -1,4 +1,4 @@
-import { type WorkspaceGroup } from '@scalar/components';
+import { type WorkspaceGroup } from '@scalar/components/menu';
 type __VLS_Props = {
     /**
      * The currently active workspace.

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,oBAAoB,CAAA;AAG3B,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;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.vue.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'\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":""}
+{"version":3,"file":"SidebarMenu.vue.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":""}

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

@@ -1,6 +1,6 @@
 import { createBlock, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
-import { ScalarMenu, ScalarMenuLink, ScalarMenuProducts, ScalarMenuResources, ScalarMenuSection, ScalarMenuSupport, ScalarMenuWorkspacePicker } from "@scalar/components";
 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({
 	__name: "SidebarMenu",

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'\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,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"}

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.8.2";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.8.3";
 //#endregion
 export { APP_VERSION };
 

package/dist/v2/features/command-palette/components/CommandActionForm.vue.d.ts

@@ -1,4 +1,4 @@
-import { type LoadingState } from '@scalar/components';
+import type { LoadingState } from '@scalar/components/loading';
 /**
  * Command Action Form Component
  *

package/dist/v2/features/command-palette/components/CommandActionForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandActionForm.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"names":[],"mappings":"AAsGA,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAG/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,qFAAqF;aAC5E,YAAY;IACrB,sDAAsD;eAC3C,OAAO;;;;;;IAHlB,qFAAqF;aAC5E,YAAY;IACrB,sDAAsD;eAC3C,OAAO;;;;;;IAgBlB,wCAAwC;eAC7B,IAAI;IACf,kGAAkG;eACvF,IAAI;IACf,4EAA4E;cAClE,IAAI;EA+FZ,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CommandActionForm.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAI9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,qFAAqF;aAC5E,YAAY;IACrB,sDAAsD;eAC3C,OAAO;;;;;;IAHlB,qFAAqF;aAC5E,YAAY;IACrB,sDAAsD;eAC3C,OAAO;;;;;;IAgBlB,wCAAwC;eAC7B,IAAI;IACf,kGAAkG;eACvF,IAAI;IACf,4EAA4E;cAClE,IAAI;EA+FZ,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CommandActionForm.vue.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, useBindCx, type LoadingState } from '@scalar/components'\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":""}
+{"version":3,"file":"CommandActionForm.vue.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":""}

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

@@ -1,5 +1,6 @@
 import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx, withKeys, withModifiers } from "vue";
-import { ScalarButton, useBindCx } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
+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" };

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, useBindCx, type LoadingState } from '@scalar/components'\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;;;;;;;;;;;;;;EAcR,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,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"}

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":"AAqGA,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;AAoLvB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentsList.vue.js","names":[],"sources":["../../../../src/v2/features/environments/EnvironmentsList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, useModal } from '@scalar/components'\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":""}
+{"version":3,"file":"EnvironmentsList.vue.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":""}

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

@@ -2,8 +2,9 @@ import EnvironmentCreateModal_default from "./components/EnvironmentCreateModal.
 import EnvironmentDeleteModal_default from "./components/EnvironmentDeleteModal.vue.js";
 import Environment_default from "./components/Environment.vue.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, withCtx } from "vue";
-import { ScalarButton, useModal } from "@scalar/components";
+import { ScalarButton } from "@scalar/components/button";
 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({

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, useModal } from '@scalar/components'\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":";;;;;;;;;;;;;;;;;EA2BA,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Environment.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/Environment.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIconButton } from '@scalar/components'\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":""}
+{"version":3,"file":"Environment.vue.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":""}

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

@@ -1,7 +1,7 @@
 import EnvironmentVariablesTable_default from "./EnvironmentVariablesTable.vue.js";
 import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
-import { ScalarIconButton } from "@scalar/components";
 import { ScalarIconNotePencil, ScalarIconTrash } from "@scalar/icons";
+import { ScalarIconButton } from "@scalar/components/icon-button";
 //#region src/v2/features/environments/components/Environment.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center gap-1.5" };
 var _hoisted_2 = { class: "flex h-6 w-6 items-center justify-center p-1" };

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'\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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentColors.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentColors.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon } from '@scalar/components'\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":""}
+{"version":3,"file":"EnvironmentColors.vue.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":""}

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

@@ -1,5 +1,5 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeStyle, openBlock, ref, renderList, unref, vModelText, withDirectives } from "vue";
-import { ScalarIcon } from "@scalar/components";
+import { ScalarIcon } from "@scalar/components/icon";
 //#region src/v2/features/environments/components/EnvironmentColors.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 1,

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'\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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"}
+{"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

@@ -1,4 +1,4 @@
-import { type ModalState } from '@scalar/components';
+import { type ModalState } from '@scalar/components/modal';
 import type { CollectionType, WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarEnvironments } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
 type __VLS_Props = {

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,oBAAoB,CAAA;AACjE,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;AAkNrB,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"EnvironmentCreateModal.vue.js","names":[],"sources":["../../../../../src/v2/features/environments/components/EnvironmentCreateModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components'\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":""}
+{"version":3,"file":"EnvironmentCreateModal.vue.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":""}

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

@@ -2,7 +2,7 @@ import CommandActionForm_default from "../../command-palette/components/CommandA
 import CommandActionInput_default from "../../command-palette/components/CommandActionInput.vue.js";
 import EnvironmentColors_default from "./EnvironmentColors.vue.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
-import { ScalarModal } from "@scalar/components";
+import { ScalarModal } from "@scalar/components/modal";
 //#region src/v2/features/environments/components/EnvironmentCreateModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-start gap-2" };
 var _hoisted_2 = {