@scalar/api-client 2.43.0 → 3.1.0

package/dist/v2/components/code-input/code-variable-widget.js

@@ -1,42 +1,46 @@
-import { createApp, defineComponent, h } from "vue";
-import { ScalarTooltip } from "@scalar/components";
-import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
+import PillTooltipHost_default from "./PillTooltipHost.vue.js";
+import { createApp } from "vue";
+import { getContextFunctionComment } from "@scalar/workspace-store/request-example";
 import { REGEX } from "@scalar/helpers/regex/regex-helpers";
+import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
 //#region src/v2/components/code-input/code-variable-widget.ts
 /**
-* Displays the value of a variable of the active environment in a pill.
-* Uses Vue for tooltip functionality.
+* Displays `{{name}}` as a pill: environment variables show the resolved value;
+* context functions (e.g. `{{$guid}}`) show that the value is generated at send time.
 */
 var PillWidget = class PillWidget extends WidgetType {
 	app;
 	pillColor;
 	variableInfo;
-	constructor(variableName, environment) {
+	constructor(variableName, environment, variant) {
 		super();
 		this.variableName = variableName;
+		if (variant === "contextFunction") {
+			this.pillColor = "var(--scalar-color-3)";
+			this.variableInfo = {
+				type: "contextFunction",
+				identifier: variableName,
+				details: getContextFunctionComment(variableName)
+			};
+			return;
+		}
 		this.pillColor = environment?.color || "var(--scalar-color-1)";
 		const variable = environment?.variables?.find((v) => v.name === variableName);
 		const value = variable ? typeof variable.value === "string" ? variable.value : variable.value?.default : void 0;
 		this.variableInfo = {
+			type: "environment",
+			name: variableName,
 			value: value || "No value",
-			hasValue: Boolean(value)
+			isDefined: Boolean(value)
 		};
 	}
 	toDOM() {
 		const span = document.createElement("span");
-		span.className = "cm-pill";
+		span.className = this.variableInfo.type === "contextFunction" ? "cm-pill cm-pill--context-fn" : "cm-pill";
 		span.textContent = this.variableName;
 		span.style.setProperty("--tw-bg-base", this.pillColor);
-		span.style.opacity = this.variableInfo.hasValue ? "1" : "0.5";
-		this.app = createApp(defineComponent({ render: () => {
-			const tooltipTrigger = h("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [h("span", this.variableName)]);
-			return h(ScalarTooltip, {
-				content: this.variableInfo.value,
-				delay: 0,
-				placement: "bottom",
-				offset: 6
-			}, { default: () => tooltipTrigger });
-		} }));
+		if (this.variableInfo.type === "environment") span.style.opacity = this.variableInfo.isDefined ? "1" : "0.5";
+		this.app = createApp(PillTooltipHost_default, { context: this.variableInfo });
 		this.app.mount(span);
 		return span;
 	}
@@ -47,7 +51,14 @@ var PillWidget = class PillWidget extends WidgetType {
 		}
 	}
 	eq(other) {
-		return other instanceof PillWidget && other.variableName === this.variableName && other.pillColor === this.pillColor && other.variableInfo.value === this.variableInfo.value && other.variableInfo.hasValue === this.variableInfo.hasValue;
+		if (!(other instanceof PillWidget)) return false;
+		if (other.variableName !== this.variableName || other.pillColor !== this.pillColor || other.variableInfo.type !== this.variableInfo.type) return false;
+		const a = other.variableInfo;
+		const b = this.variableInfo;
+		if (a.type !== b.type) return false;
+		if (a.type === "environment" && b.type === "environment") return a.name === b.name && a.value === b.value && a.isDefined === b.isDefined;
+		if (a.type === "contextFunction" && b.type === "contextFunction") return a.identifier === b.identifier && a.details === b.details;
+		return false;
 	}
 	ignoreEvent() {
 		return false;
@@ -74,6 +85,7 @@ var pillPlugin = (props) => ViewPlugin.fromClass(class {
 	}
 	buildDecorations(view) {
 		const builder = new RangeSetBuilder();
+		const isContextFn = props.isContextFunctionName ?? (() => false);
 		for (const { from, to } of view.visibleRanges) {
 			const text = view.state.doc.sliceString(from, to);
 			const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags);
@@ -83,8 +95,9 @@ var pillPlugin = (props) => ViewPlugin.fromClass(class {
 				const end = start + match[0].length;
 				const variableName = match[1] ?? "";
 				if (view.state.doc.sliceString(start, end).includes("\n")) continue;
+				const variant = isContextFn(variableName) ? "contextFunction" : "environment";
 				builder.add(start, end, Decoration.widget({
-					widget: new PillWidget(variableName, props.environment),
+					widget: new PillWidget(variableName, props.environment, variant),
 					side: 1
 				}));
 			}

package/dist/v2/components/code-input/code-variable-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-variable-widget.js","names":[],"sources":["../../../../src/v2/components/code-input/code-variable-widget.ts"],"sourcesContent":["import { ScalarTooltip } from '@scalar/components'\nimport { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { createApp, defineComponent, h } from 'vue'\n\n/**\n * Displays the value of a variable of the active environment in a pill.\n * Uses Vue for tooltip functionality.\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private readonly pillColor: string\n  private readonly variableInfo: { value: string; hasValue: boolean }\n\n  constructor(\n    private readonly variableName: string,\n    environment: XScalarEnvironment | undefined,\n  ) {\n    super()\n    this.pillColor = environment?.color || 'var(--scalar-color-1)'\n\n    // Look up the variable value directly from the environment\n    const variable = environment?.variables?.find((v) => v.name === variableName)\n    const value = variable ? (typeof variable.value === 'string' ? variable.value : variable.value?.default) : undefined\n    this.variableInfo = {\n      value: value || 'No value',\n      hasValue: Boolean(value),\n    }\n  }\n\n  toDOM(): HTMLElement {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = this.variableName\n\n    // Set styles once during creation instead of on every render\n    span.style.setProperty('--tw-bg-base', this.pillColor)\n    span.style.opacity = this.variableInfo.hasValue ? '1' : '0.5'\n\n    // Create tooltip component with pre-computed values\n    const tooltipComponent = defineComponent({\n      render: () => {\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: this.variableInfo.value,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent)\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy(): void {\n    if (this.app) {\n      this.app.unmount()\n      this.app = null\n    }\n  }\n\n  override eq(other: WidgetType): boolean {\n    // Two widgets are equal if they represent the same variable.\n    // This allows CodeMirror to reuse widgets instead of recreating them.\n    return (\n      other instanceof PillWidget &&\n      other.variableName === this.variableName &&\n      other.pillColor === this.pillColor &&\n      other.variableInfo.value === this.variableInfo.value &&\n      other.variableInfo.hasValue === this.variableInfo.hasValue\n    )\n  }\n\n  override ignoreEvent(): boolean {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill.\n * This plugin creates decorations for environment variables in the editor.\n */\nexport const pillPlugin = (props: { environment: XScalarEnvironment | undefined; isReadOnly: boolean | undefined }) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n      lastEnvironment: XScalarEnvironment | undefined\n\n      constructor(view: EditorView) {\n        this.lastEnvironment = props.environment\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate): void {\n        // Rebuild decorations if environment changed\n        if (props.environment !== this.lastEnvironment) {\n          this.lastEnvironment = props.environment\n          this.decorations = this.buildDecorations(update.view)\n          return\n        }\n\n        // Only rebuild decorations if document or viewport changed\n        if (update.docChanged || update.viewportChanged) {\n          this.decorations = this.buildDecorations(update.view)\n        }\n      }\n\n      buildDecorations(view: EditorView): DecorationSet {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n\n          // Create a new regex instance to ensure lastIndex is reset\n          const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags)\n          let match: RegExpExecArray | null\n\n          while ((match = regex.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n\n            // Skip decorations that span line breaks as CodeMirror does not allow them\n            const matchedText = view.state.doc.sliceString(start, end)\n            if (matchedText.includes('\\n')) {\n              continue\n            }\n\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\n/**\n * Custom backspace handler for the editor.\n * Handles special cases like removing entire variable syntax and clearing all content.\n */\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view): boolean {\n    if (event.key !== 'Backspace') {\n      return false\n    }\n\n    const { state } = view\n    const { from, to } = state.selection.main\n\n    // When selecting all content and pressing backspace,\n    // prevent breaking line content addition on pill removal\n    if (from === 0 && to === state.doc.length) {\n      view.dispatch({\n        changes: { from: 0, to: state.doc.length },\n        selection: { anchor: 0 },\n      })\n      event.preventDefault()\n      return true\n    }\n\n    // When cursor is after a variable closing bracket (}}),\n    // remove the entire closing syntax at once\n    if (from === to && from >= 2) {\n      const before = state.doc.sliceString(from - 2, from)\n      if (before === '}}') {\n        view.dispatch({\n          changes: { from: from - 2, to: from },\n          selection: { anchor: from - 2 },\n        })\n        event.preventDefault()\n        return true\n      }\n    }\n\n    return false\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"code-variable-widget.js","names":[],"sources":["../../../../src/v2/components/code-input/code-variable-widget.ts"],"sourcesContent":["import { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport { type ContextFunctionName, getContextFunctionComment } from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { createApp } from 'vue'\n\nimport PillTooltipHost from './PillTooltipHost.vue'\nimport type { PillContext } from './pill-context'\n\n/**\n * Displays `{{name}}` as a pill: environment variables show the resolved value;\n * context functions (e.g. `{{$guid}}`) show that the value is generated at send time.\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private readonly pillColor: string\n  private readonly variableInfo: PillContext\n\n  constructor(\n    private readonly variableName: string,\n    environment: XScalarEnvironment | undefined,\n    variant: PillContext['type'],\n  ) {\n    super()\n    if (variant === 'contextFunction') {\n      this.pillColor = 'var(--scalar-color-3)'\n      this.variableInfo = {\n        type: 'contextFunction',\n        identifier: variableName,\n        details: getContextFunctionComment(variableName as ContextFunctionName),\n      }\n      return\n    }\n\n    this.pillColor = environment?.color || 'var(--scalar-color-1)'\n\n    const variable = environment?.variables?.find((v) => v.name === variableName)\n    const value = variable ? (typeof variable.value === 'string' ? variable.value : variable.value?.default) : undefined\n    this.variableInfo = {\n      type: 'environment',\n      name: variableName,\n      value: value || 'No value',\n      isDefined: Boolean(value),\n    }\n  }\n\n  toDOM(): HTMLElement {\n    const span = document.createElement('span')\n    span.className = this.variableInfo.type === 'contextFunction' ? 'cm-pill cm-pill--context-fn' : 'cm-pill'\n    span.textContent = this.variableName\n\n    span.style.setProperty('--tw-bg-base', this.pillColor)\n\n    if (this.variableInfo.type === 'environment') {\n      span.style.opacity = this.variableInfo.isDefined ? '1' : '0.5'\n    }\n\n    this.app = createApp(PillTooltipHost, {\n      context: this.variableInfo,\n    })\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy(): void {\n    if (this.app) {\n      this.app.unmount()\n      this.app = null\n    }\n  }\n\n  override eq(other: WidgetType): boolean {\n    if (!(other instanceof PillWidget)) {\n      return false\n    }\n    if (\n      other.variableName !== this.variableName ||\n      other.pillColor !== this.pillColor ||\n      other.variableInfo.type !== this.variableInfo.type\n    ) {\n      return false\n    }\n    const a = other.variableInfo\n    const b = this.variableInfo\n    if (a.type !== b.type) {\n      return false\n    }\n    if (a.type === 'environment' && b.type === 'environment') {\n      return a.name === b.name && a.value === b.value && a.isDefined === b.isDefined\n    }\n    if (a.type === 'contextFunction' && b.type === 'contextFunction') {\n      return a.identifier === b.identifier && a.details === b.details\n    }\n    return false\n  }\n\n  override ignoreEvent(): boolean {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill.\n * This plugin creates decorations for environment variables in the editor.\n */\nexport const pillPlugin = (props: {\n  environment: XScalarEnvironment | undefined\n  isReadOnly: boolean | undefined\n  isContextFunctionName?: (name: string) => boolean\n}) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n      lastEnvironment: XScalarEnvironment | undefined\n\n      constructor(view: EditorView) {\n        this.lastEnvironment = props.environment\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate): void {\n        // Rebuild decorations if environment changed\n        if (props.environment !== this.lastEnvironment) {\n          this.lastEnvironment = props.environment\n          this.decorations = this.buildDecorations(update.view)\n          return\n        }\n\n        // Only rebuild decorations if document or viewport changed\n        if (update.docChanged || update.viewportChanged) {\n          this.decorations = this.buildDecorations(update.view)\n        }\n      }\n\n      buildDecorations(view: EditorView): DecorationSet {\n        const builder = new RangeSetBuilder<Decoration>()\n        const isContextFn = props.isContextFunctionName ?? (() => false)\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n\n          // Create a new regex instance to ensure lastIndex is reset\n          const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags)\n          let match: RegExpExecArray | null\n\n          while ((match = regex.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n\n            // Skip decorations that span line breaks as CodeMirror does not allow them\n            const matchedText = view.state.doc.sliceString(start, end)\n            if (matchedText.includes('\\n')) {\n              continue\n            }\n\n            const variant: PillContext['type'] = isContextFn(variableName) ? 'contextFunction' : 'environment'\n\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment, variant),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\n/**\n * Custom backspace handler for the editor.\n * Handles special cases like removing entire variable syntax and clearing all content.\n */\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view): boolean {\n    if (event.key !== 'Backspace') {\n      return false\n    }\n\n    const { state } = view\n    const { from, to } = state.selection.main\n\n    // When selecting all content and pressing backspace,\n    // prevent breaking line content addition on pill removal\n    if (from === 0 && to === state.doc.length) {\n      view.dispatch({\n        changes: { from: 0, to: state.doc.length },\n        selection: { anchor: 0 },\n      })\n      event.preventDefault()\n      return true\n    }\n\n    // When cursor is after a variable closing bracket (}}),\n    // remove the entire closing syntax at once\n    if (from === to && from >= 2) {\n      const before = state.doc.sliceString(from - 2, from)\n      if (before === '}}') {\n        view.dispatch({\n          changes: { from: from - 2, to: from },\n          selection: { anchor: from - 2 },\n        })\n        event.preventDefault()\n        return true\n      }\n    }\n\n    return false\n  },\n})\n"],"mappings":"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"}

package/dist/v2/components/code-input/pill-context.d.ts

@@ -0,0 +1,11 @@
+export type PillContext = {
+    type: 'environment';
+    name: string;
+    value: string;
+    isDefined: boolean;
+} | {
+    type: 'contextFunction';
+    identifier: string;
+    details: string;
+};
+//# sourceMappingURL=pill-context.d.ts.map

package/dist/v2/components/code-input/pill-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill-context.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/code-input/pill-context.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GACxE;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA"}

package/dist/v2/components/data-table/DataTableInput.vue.d.ts

@@ -26,20 +26,20 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_30) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    selectVariable: (value: string) => any;
     "update:modelValue": (v: string | number) => any;
+    selectVariable: (value: string) => any;
     inputFocus: () => any;
     inputBlur: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelectVariable?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((v: string | number) => any) | undefined;
+    onSelectVariable?: ((value: string) => any) | undefined;
     onInputFocus?: (() => any) | undefined;
     onInputBlur?: (() => any) | undefined;
 }>, {
     required: boolean;
-    readOnly: boolean;
     lineWrapping: boolean;
     canAddCustomEnumValue: boolean;
+    readOnly: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/v2/components/data-table/DataTableInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"names":[],"mappings":"AAwMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM/C,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,sEAAsE;IACtE,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAmWJ,QAAA,IAAI,OAAO,IAAU,EAAuB,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO7C,QAAA,MAAM,UAAU;;;;;;;;;;;cAzXD,OAAO;cAIP,OAAO;kBAMH,OAAO;2BAPE,OAAO;6EA0XjC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataTableInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"names":[],"mappings":"AAwMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM/C,KAAK,WAAW,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,sEAAsE;IACtE,cAAc,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,kBAAkB,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAmWJ,QAAA,IAAI,OAAO,IAAU,EAAuB,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAO7C,QAAA,MAAM,UAAU;;;;;;;;;;;cAzXD,OAAO;kBAUH,OAAO;2BAPE,OAAO;cACpB,OAAO;6EAyXpB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/components/layout/CollapsibleSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"names":[],"mappings":"AA2HA;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;IALlB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;YAkPR,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC7B,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK;;KAAiB,KAAK,GAAG;EAUzC,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":"CollapsibleSection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"names":[],"mappings":"AA8HA;;;;GAIG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;IALlB,iDAAiD;kBACnC,OAAO;IACrB,uDAAuD;gBAC3C,MAAM;IAClB,8DAA8D;eACnD,OAAO;;;;YAyPR,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC7B,CAAC,KAAK;;KAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK;;KAAiB,KAAK,GAAG;EAUzC,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/components/layout/CollapsibleSection.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.vue.js","names":[],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b\"\n    :class=\"isStatic && 'last-of-type:first-of-type:border-b-0'\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border border-b-0'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":""}
+{"version":3,"file":"CollapsibleSection.vue.js","names":[],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border-x border-t'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":""}

package/dist/v2/components/layout/CollapsibleSection.vue.script.js

@@ -36,7 +36,10 @@ var CollapsibleSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Disclosure), {
 				as: "div",
-				class: normalizeClass(["group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b", __props.isStatic && "last-of-type:first-of-type:border-b-0"]),
+				class: normalizeClass(["group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0", {
+					"last-of-type:first-of-type:border-b-0": __props.isStatic,
+					"border-b": !__props.isStatic
+				}]),
 				defaultOpen: __props.defaultOpen,
 				static: __props.isStatic
 			}, {
@@ -46,7 +49,7 @@ var CollapsibleSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				}, null, 8, ["value"]), createElementVNode("section", {
 					"aria-labelledby": unref(headingId),
 					class: "contents"
-				}, [createElementVNode("div", { class: normalizeClass(["bg-b-2 flex items-center", __props.isStatic && "rounded-t-xl border border-b-0"]) }, [createVNode(unref(DisclosureButton), {
+				}, [createElementVNode("div", { class: normalizeClass(["bg-b-2 flex items-center", __props.isStatic && "rounded-t-xl border-x border-t"]) }, [createVNode(unref(DisclosureButton), {
 					class: normalizeClass(["hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2", __props.isStatic && "!pl-3"]),
 					disabled: __props.isStatic
 				}, {

package/dist/v2/components/layout/CollapsibleSection.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0 border-b\"\n    :class=\"isStatic && 'last-of-type:first-of-type:border-b-0'\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border border-b-0'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;CAOE,MAAM;;;;;;;;;;;EAwBR,MAAM,OAAO;EAIb,MAAM,YAAY,OAAM;;uBAItB,YAwEa,MAAA,WAAA,EAAA;IAtEX,IAAG;IACH,OAAK,eAAA,CAAC,kFACE,QAAA,YAAQ,wCAAA,CAAA;IACf,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAThD,WAAI,CAOd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,MAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,UAAS;KAC3B,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,iCAAA,CAAA,EAAA,EAAA,CAEhB,YAkCmB,MAAA,iBAAA,EAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,QAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,WAAA,EADT,YAIc,MAAA,WAAA,EAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,UAAS;MACd,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,MAAI,CAAA,EAAA,CAEJ,QAAA,WAAA,EADT,mBAIO,QAJP,YAEkB,gBAElB,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,EAAA,CAKO,QAAQ,QAAA,aAAA,WAAA,EADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,UAAS,GAAG,KACf,EAAA,EAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,IAAA,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,EAKjB,YAIkB,MAAA,gBAAA,EAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,8CAA4C,CAAA,EAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA"}
+{"version":3,"file":"CollapsibleSection.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/layout/CollapsibleSection.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Simple collapsible section component that can be used to wrap content that should be collapsed and expanded\n *\n * Would like to replace with details/summary elements, but they are not supported in all browsers yet?\n */\nexport default {\n  name: 'CollapsibleSection',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarIcon } from '@scalar/components'\nimport { useId } from 'vue'\n\nimport ValueEmitter from './ValueEmitter.vue'\n\nconst {\n  defaultOpen = true,\n  itemCount = 0,\n  isStatic,\n} = defineProps<{\n  /** Whether the disclosure is open by default. */\n  defaultOpen?: boolean\n  /** Number of items to show in badge when collapsed. */\n  itemCount?: number\n  /** Whether the disclosure is static and cannot be toggled. */\n  isStatic?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst headingId = useId()\n</script>\n\n<template>\n  <Disclosure\n    v-slot=\"{ open }\"\n    as=\"div\"\n    class=\"group/collapse text-c-2 focus-within:text-c-1 last:ui-open:border-b-0\"\n    :class=\"{\n      'last-of-type:first-of-type:border-b-0': isStatic,\n      'border-b': !isStatic,\n    }\"\n    :defaultOpen=\"defaultOpen\"\n    :static=\"isStatic\">\n    <!-- We use this hack to emit the slot value back to the parent -->\n    <ValueEmitter\n      :value=\"open as boolean\"\n      @change=\"(value) => emit('update:modelValue', value)\" />\n\n    <section\n      :aria-labelledby=\"headingId\"\n      class=\"contents\">\n      <div\n        class=\"bg-b-2 flex items-center\"\n        :class=\"isStatic && 'rounded-t-xl border-x border-t'\">\n        <!-- Main disclosure button that toggles the panel -->\n        <DisclosureButton\n          class=\"hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2\"\n          :class=\"isStatic && '!pl-3'\"\n          :disabled=\"isStatic\">\n          <ScalarIcon\n            v-if=\"!isStatic\"\n            class=\"text-c-3 group-hover:text-c-1 rounded-px ui-open:rotate-90 ui-not-open:rotate-0 outline-offset-2 group-focus-visible:outline\"\n            icon=\"ChevronRight\"\n            size=\"md\" />\n\n          <!-- Heading with title -->\n          <h2\n            class=\"text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]\">\n            <span\n              :id=\"headingId\"\n              class=\"contents\">\n              <slot\n                name=\"title\"\n                :open=\"open\" />\n              <span\n                v-if=\"!open\"\n                class=\"sr-only\">\n                (Collapsed)\n              </span>\n            </span>\n\n            <!-- Badge showing item count when collapsed. -->\n            <span\n              v-if=\"!open && itemCount\"\n              class=\"bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold\">\n              {{ itemCount }}\n              <span class=\"sr-only\">Item{{ itemCount === 1 ? '' : 's' }}</span>\n            </span>\n          </h2>\n        </DisclosureButton>\n\n        <!-- Optional actions slot that hides when the panel is closed. -->\n        <div\n          v-if=\"$slots.actions\"\n          class=\"ui-not-open:hidden flex items-center gap-2 pr-0.75\">\n          <slot\n            name=\"actions\"\n            :open=\"open\" />\n        </div>\n      </div>\n\n      <!-- The collapsible content panel. -->\n      <DisclosurePanel\n        v-bind=\"$attrs\"\n        class=\"diclosure-panel h-full max-h-fit rounded-b\">\n        <slot :open=\"open\" />\n      </DisclosurePanel>\n    </section>\n  </Disclosure>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;CAOE,MAAM;;;;;;;;;;;EAwBR,MAAM,OAAO;EAIb,MAAM,YAAY,OAAM;;uBAItB,YA2Ea,MAAA,WAAA,EAAA;IAzEX,IAAG;IACH,OAAK,eAAA,CAAC,yEAAuE;8CACpB,QAAA;kBAA6B,QAAA;;IAIrF,aAAa,QAAA;IACb,QAAQ,QAAA;;sBAIiD,EAZhD,WAAI,CAUd,YAE0D,sBAAA;KADvD,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,qBAAsB,MAAK;4BAErD,mBA2DU,WAAA;KA1DP,mBAAiB,MAAA,UAAS;KAC3B,OAAM;QACN,mBAgDM,OAAA,EA/CJ,OAAK,eAAA,CAAC,4BACE,QAAA,YAAQ,iCAAA,CAAA,EAAA,EAAA,CAEhB,YAkCmB,MAAA,iBAAA,EAAA;KAjCjB,OAAK,eAAA,CAAC,wKACE,QAAA,YAAQ,QAAA,CAAA;KACf,UAAU,QAAA;;4BAKG,CAAA,CAHL,QAAA,YAAA,WAAA,EADT,YAIc,MAAA,WAAA,EAAA;;MAFZ,OAAM;MACN,MAAK;MACL,MAAK;yCAGP,mBAsBK,MAtBL,YAsBK,CApBH,mBAWO,QAAA;MAVJ,IAAI,MAAA,UAAS;MACd,OAAM;SACN,WAEiB,KAAA,QAAA,SAAA,EAAR,MAAI,CAAA,EAAA,CAEJ,QAAA,WAAA,EADT,mBAIO,QAJP,YAEkB,gBAElB,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,EAAA,CAKO,QAAQ,QAAA,aAAA,WAAA,EADjB,mBAKO,QALP,YAKO,CAAA,gBAAA,gBAFF,QAAA,UAAS,GAAG,KACf,EAAA,EAAA,mBAAiE,QAAjE,YAAsB,SAAI,gBAAG,QAAA,cAAS,IAAA,KAAA,IAAA,EAAA,EAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA;;qCAOpCA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAMM,OANN,YAMM,CAHJ,WAEiB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,EAKjB,YAIkB,MAAA,gBAAA,EAJlB,WACUC,KAGQ,QAHF,EACd,OAAM,8CAA4C,CAAA,EAAA;4BAC7B,CAArB,WAAqB,KAAA,QAAA,WAAA,EAAR,MAAI,CAAA,CAAA,CAAA"}

package/dist/v2/components/modals/DeleteModal.vue.d.ts

@@ -5,11 +5,11 @@ type __VLS_Props = {
     warningMessage?: string | undefined;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    delete: () => any;
     close: () => any;
+    delete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDelete?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/components/modals/ModalClientContainer.vue.d.ts

@@ -7,11 +7,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    open: () => any;
     close: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onOpen?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/v2/components/server/ServerDropdown.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ServerMeta } from '@scalar/workspace-store/events';
 import type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document';
-import type { ClientLayout } from '../../../hooks/index.js';
+import type { ClientLayout } from '../../../v2/types/layout';
 /**
  * ServerDropdown component
  * This component is used to display the server dropdown for the operation block

package/dist/v2/components/server/ServerDropdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"names":[],"mappings":"AAkJA,OAAO,KAAK,EAEV,UAAU,EACX,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAGhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAM3C;;;GAGG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAMzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,IAAI,EAAE,UAAU,CAAA;IAChB,0EAA0E;IAC1E,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,gCAAgC;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,MAAM,EAAE,YAAY,CAAA;CACrB,CAAA;AACD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;kFAgSd,CAAC"}
+{"version":3,"file":"ServerDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"names":[],"mappings":"AAkJA,OAAO,KAAK,EAEV,UAAU,EACX,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAIhG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAKrD;;;GAGG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAMzC,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,IAAI,EAAE,UAAU,CAAA;IAChB,0EAA0E;IAC1E,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,gCAAgC;IAChC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,MAAM,EAAE,YAAY,CAAA;CACrB,CAAA;AACD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;kFAgSd,CAAC"}

package/dist/v2/components/server/ServerDropdown.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdown.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarFloatingBackdrop,\n  ScalarPopover,\n} from '@scalar/components'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { ClientLayout } from '@/hooks'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ServerDropdown.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarFloatingBackdrop,\n  ScalarPopover,\n} from '@scalar/components'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"ServerDropdown.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarFloatingBackdrop,\n  ScalarPopover,\n} from '@scalar/components'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport type { ClientLayout } from '@/hooks'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":";;;;;;;;;CAME,MAAM;;;;;;;;;;;;;;;EAqCR,MAAM,OAAO;EAeb,MAAM,uBAAuB,eAC3B,QAAA,QAAQ,KAAK,OAAO;GAClB,IAAI,EAAE;GACN,OAAO,EAAE,OAAO;GACjB,EAAE,CACL;EAEA,MAAM,gCAAgC,eAAe;AACnD,OAAI,QAAA,QAAQ,KAAK,SAAS,IAAI,CAC5B,QAAO,QAAA,OAAO,IAAI,MAAM,GAAG,GAAE;AAE/B,UAAO,QAAA,QAAQ,OAAO;IACvB;;uBAGC,YA8DgB,MAAA,cAAA,EAAA;IA7Dd,OAAM;IACN,OAAA;IACC,QAAQ;IACT,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,UAAQ,IAAM,QAAA;;IAcJ,SAAO,SA8BV,EA9Bc,YAAK,CACzB,mBA6BM,OAAA;KA5BJ,OAAM;KACL,SAAO;0BAER,mBAWM,UAAA,MAAA,WAV4B,qBAAA,QAAxB,cAAc,UAAK;yBAD7B,YAWM,4BAAA;MATH,KAAK,aAAa;MAClB,QAAQ,QAAA;MACM;MACf,MAAK;MACJ,4BAAqB,WAAe,KAAI,yBAAA;OAAA,KAAiC,aAAa;OAAE,MAAE,QAAA;OAAI,CAAA;MAG9F,sBAA+B,KAAK,UAAU,KAAI,mBAAA;OAAsB;OAAO;OAAK;OAAK,MAAE,QAAA;OAAI,CAAA;;;;;;;eAKlF,QAAA,WAAM,WAAA,WAAA,EACpB,mBAQS,UAAA;;KAPP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAA;QACZ,mBAEM,OAFN,YAEM,CADJ,YAAyC,MAAA,uBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,CAAA,EAAA,OAAA,OAAA,OAAA,KAExC,mBAA2B,QAAA,MAArB,kBAAc,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,CAAA,CAAA;IAKjB,UAAQ,SAKyB,EALrB,WAAI,CAEzB,YAG0C,sBAAA;KAFvC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,eAAgB,MAAK;KAC5C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAA,MAAA;4BAEhB,YAAuE,MAAA,uBAAA,EAAA,EAA/C,OAAM,wCAAsC,CAAA,CAAA,CAAA;2BAzCvD,CAXf,YAWe,MAAA,aAAA,EAAA;KAVb,OAAM;KACN,SAAQ;;4BAIG,CAHK,QAAA,UAAA,WAAA,EAAhB,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,gBAAO,MACpC,gBAAG,8BAAA,MAA6B,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAElC,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAuC,QAAA,EAAjC,OAAM,WAAS,EAAC,cAAU,GAAA,GAChC,YAAiC,MAAA,eAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}
+{"version":3,"file":"ServerDropdown.vue.script.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ServerDropdown component\n * This component is used to display the server dropdown for the operation block\n */\nexport default {\n  name: 'ServerDropdown',\n}\n\nexport type ServerDropdownProps = {\n  /** The meta information for the server */\n  meta: ServerMeta\n  /** List of servers that are available for the operation/document level */\n  servers: ServerObject[]\n  /** Currently selected server */\n  server: ServerObject | null\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** Client layout */\n  layout: ClientLayout\n}\n</script>\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarFloatingBackdrop,\n  ScalarPopover,\n} from '@scalar/components'\nimport { ScalarIconPencilSimple, ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n} from '@scalar/workspace-store/events'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed } from 'vue'\n\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, server, servers, meta } = defineProps<ServerDropdownProps>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (\n    e: 'update:selectedServer',\n    payload: ApiReferenceEvents['server:update:selected'],\n  ): void\n  (\n    e: 'update:variable',\n    payload: ApiReferenceEvents['server:update:variables'],\n  ): void\n  (e: 'update:servers'): void\n  /** Update the open state of the server dropdown */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst requestServerOptions = computed(() =>\n  servers.map((s) => ({\n    id: s.url,\n    label: s.url ?? 'Unknown server',\n  })),\n)\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n</script>\n<template>\n  <ScalarPopover\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap\"\n      variant=\"ghost\">\n      <template v-if=\"server\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIconPlus class=\"size-3\" />\n      </template>\n    </ScalarButton>\n\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"(serverOption, index) in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:selectedServer=\"\n            emit('update:selectedServer', { url: serverOption.id, meta })\n          \"\n          @update:variable=\"\n            (key, value) => emit('update:variable', { index, key, value, meta })\n          \" />\n\n        <!-- Add Server -->\n        <template v-if=\"layout !== 'modal'\">\n          <button\n            class=\"text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75\"\n            type=\"button\"\n            @click=\"emit('update:servers')\">\n            <div class=\"flex items-center justify-center\">\n              <ScalarIconPencilSimple class=\"size-4\" />\n            </div>\n            <span>Update Servers</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop=\"{ open }\">\n      <!-- Emit the slot value back out the parent -->\n      <ValueEmitter\n        :value=\"open\"\n        @change=\"(value) => emit('update:open', value)\"\n        @unmount=\"emit('update:open', false)\" />\n\n      <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":";;;;;;;;;CAME,MAAM;;;;;;;;;;;;;;;EAqCR,MAAM,OAAO;EAeb,MAAM,uBAAuB,eAC3B,QAAA,QAAQ,KAAK,OAAO;GAClB,IAAI,EAAE;GACN,OAAO,EAAE,OAAO;GACjB,EAAE,CACL;EAEA,MAAM,gCAAgC,eAAe;AACnD,OAAI,QAAA,QAAQ,KAAK,SAAS,IAAI,CAC5B,QAAO,QAAA,OAAO,IAAI,MAAM,GAAG,GAAE;AAE/B,UAAO,QAAA,QAAQ,OAAO;IACvB;;uBAGC,YA8DgB,MAAA,cAAA,EAAA;IA7Dd,OAAM;IACN,OAAA;IACC,QAAQ;IACT,WAAU;IACV,QAAA;IACC,QAAQ,QAAA;IACR,UAAQ,IAAM,QAAA;;IAcJ,SAAO,SA8BV,EA9Bc,YAAK,CACzB,mBA6BM,OAAA;KA5BJ,OAAM;KACL,SAAO;0BAER,mBAWM,UAAA,MAAA,WAV4B,qBAAA,QAAxB,cAAc,UAAK;yBAD7B,YAWM,4BAAA;MATH,KAAK,aAAa;MAClB,QAAQ,QAAA;MACM;MACf,MAAK;MACJ,4BAAqB,WAAe,KAAI,yBAAA;OAAA,KAAiC,aAAa;OAAE,MAAE,QAAA;OAAI,CAAA;MAG9F,sBAA+B,KAAK,UAAU,KAAI,mBAAA;OAAsB;OAAO;OAAK;OAAK,MAAE,QAAA;OAAI,CAAA;;;;;;;eAKlF,QAAA,WAAM,WAAA,WAAA,EACpB,mBAQS,UAAA;;KAPP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAA;QACZ,mBAEM,OAFN,YAEM,CADJ,YAAyC,MAAA,uBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,CAAA,EAAA,OAAA,OAAA,OAAA,KAExC,mBAA2B,QAAA,MAArB,kBAAc,GAAA,EAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA,CAAA,CAAA;IAKjB,UAAQ,SAKyB,EALrB,WAAI,CAEzB,YAG0C,sBAAA;KAFvC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,eAAgB,MAAK;KAC5C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAA,MAAA;4BAEhB,YAAuE,MAAA,uBAAA,EAAA,EAA/C,OAAM,wCAAsC,CAAA,CAAA,CAAA;2BAzCvD,CAXf,YAWe,MAAA,aAAA,EAAA;KAVb,OAAM;KACN,SAAQ;;4BAIG,CAHK,QAAA,UAAA,WAAA,EAAhB,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,gBAAO,MACpC,gBAAG,8BAAA,MAA6B,EAAA,EAAA,CAAA,EAAA,GAAA,KAAA,WAAA,EAElC,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAuC,QAAA,EAAjC,OAAM,WAAS,EAAC,cAAU,GAAA,GAChC,YAAiC,MAAA,eAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA"}

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":"AAwMA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,iDAAiD;IACjD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,MAAM,EAAE,YAAY,CAAA;IACpB,qCAAqC;IACrC,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,2CAA2C;IAC3C,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,+CAA+C;IAC/C,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EACR,OAAO,GACP,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,CAAA;CACxE,CAAC;AAkBF,KAAK,WAAW,GAAG;IACjB,uCAAuC;IACvC,eAAe,CAAC,IAAI,OAAO,CAAA;IAC3B,sDAAsD;IACtD,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IACpD,mDAAmD;IACnD,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IAChD,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;IAC9B,iDAAiD;IACjD,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC/D,CAAC;AAiCF,KAAK,gBAAgB,GAAG;IACxB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsSxD,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":"AAuMA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAKhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,iDAAiD;IACjD,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,MAAM,EAAE,YAAY,CAAA;IACpB,qCAAqC;IACrC,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,2CAA2C;IAC3C,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,+CAA+C;IAC/C,SAAS,EAAE,iBAAiB,EAAE,CAAA;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EACR,OAAO,GACP,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,KAAK,OAAO,CAAC,CAAA;CACxE,CAAC;AAkBF,KAAK,WAAW,GAAG;IACjB,uCAAuC;IACvC,eAAe,CAAC,IAAI,OAAO,CAAA;IAC3B,sDAAsD;IACtD,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IACpD,mDAAmD;IACnD,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,GAAG,OAAO,CAAA;IAChD,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;IAC9B,iDAAiD;IACjD,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC/D,CAAC;AAiCF,KAAK,gBAAgB,GAAG;IACxB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAqSxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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

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

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

@@ -90,7 +90,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(query) ? query.value = $event : null),
 						autofocus: ""
 					}, null, 8, ["modelValue"])) : createCommentVNode("", true)], 2)]),
-					spacer: withCtx(() => [_cache[8] || (_cache[8] = createElementVNode("div", { class: "mac:app-drag-region flex-1" }, null, -1))]),
+					spacer: withCtx(() => [_cache[8] || (_cache[8] = createElementVNode("div", { class: "flex-1" }, null, -1))]),
 					icon: withCtx((iconProps) => [slots.icon || isDraft(iconProps.item) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [isDraft(iconProps.item) ? (openBlock(), createBlock(unref(ScalarIconFileDashed), { key: 0 })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(iconProps)))], 64)) : createCommentVNode("", true)]),
 					before: withCtx(() => [renderSlot(_ctx.$slots, "workspaceButton")]),
 					footer: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),

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

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

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

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

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

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

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