@scalar/api-client 2.38.3 → 2.39.0

package/dist/components/ImportCollection/utils/import-collection.d.ts

@@ -1,6 +1,6 @@
 import type { Collection } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
-import type { WorkspaceStore } from '@/store';
+import type { WorkspaceStore } from '../../../store/index.js';
 export declare function importCollection({ store, workspace, source, watchMode, onSuccess, onError, }: {
     store: WorkspaceStore;
     workspace: Workspace | undefined;

package/dist/components/ImportCollection/utils/import-collection.js

@@ -0,0 +1,23 @@
+import { isUrl } from "./is-url.js";
+//#region src/components/ImportCollection/utils/import-collection.ts
+async function importCollection({ store, workspace, source, watchMode, onSuccess, onError }) {
+	try {
+		if (source && workspace) {
+			if (isUrl(source)) {
+				const [error, entities] = await store.importSpecFromUrl(source, workspace.uid, {
+					proxyUrl: workspace.proxyUrl,
+					watchMode
+				});
+				if (!error) onSuccess(entities?.collection);
+				return;
+			}
+			onSuccess((await store.importSpecFile(source, workspace.uid))?.collection);
+		}
+	} catch (error) {
+		onError(error);
+	}
+}
+//#endregion
+export { importCollection };
+
+//# sourceMappingURL=import-collection.js.map

package/dist/components/ImportCollection/utils/import-collection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"import-collection.js","names":[],"sources":["../../../../src/components/ImportCollection/utils/import-collection.ts"],"sourcesContent":["import type { Collection } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\n\nimport { isUrl } from '@/components/ImportCollection/utils/is-url'\nimport type { WorkspaceStore } from '@/store'\n\nexport async function importCollection({\n  store,\n  workspace,\n  source,\n  watchMode,\n  onSuccess,\n  onError,\n}: {\n  store: WorkspaceStore\n  workspace: Workspace | undefined\n  source: string | null | undefined\n  watchMode: boolean\n  onSuccess: (collection: Collection | undefined) => void\n  onError: (error: Error) => void\n}) {\n  try {\n    if (source && workspace) {\n      if (isUrl(source)) {\n        const [error, entities] = await store.importSpecFromUrl(source, workspace.uid, {\n          proxyUrl: workspace.proxyUrl,\n          watchMode: watchMode,\n        })\n\n        if (!error) {\n          onSuccess(entities?.collection)\n        }\n\n        return\n      }\n\n      const entities = await store.importSpecFile(source, workspace.uid)\n\n      onSuccess(entities?.collection)\n    }\n  } catch (error) {\n    onError(error as Error)\n  }\n}\n"],"mappings":";;AAMA,eAAsB,iBAAiB,EACrC,OACA,WACA,QACA,WACA,WACA,WAQC;AACD,KAAI;AACF,MAAI,UAAU,WAAW;AACvB,OAAI,MAAM,OAAO,EAAE;IACjB,MAAM,CAAC,OAAO,YAAY,MAAM,MAAM,kBAAkB,QAAQ,UAAU,KAAK;KAC7E,UAAU,UAAU;KACT;KACZ,CAAC;AAEF,QAAI,CAAC,MACH,WAAU,UAAU,WAAW;AAGjC;;AAKF,cAFiB,MAAM,MAAM,eAAe,QAAQ,UAAU,IAAI,GAE9C,WAAW;;UAE1B,OAAO;AACd,UAAQ,MAAe"}

package/dist/components/ImportCollection/utils/is-document.js

@@ -0,0 +1,12 @@
+//#region src/components/ImportCollection/utils/is-document.ts
+/** Checks whether the given string could be an OpenAPI document */
+function isDocument(input) {
+	if (!input || input.trim().length === 0) return false;
+	const trimmed = input.trim();
+	if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) return false;
+	return true;
+}
+//#endregion
+export { isDocument };
+
+//# sourceMappingURL=is-document.js.map

package/dist/components/ImportCollection/utils/is-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-document.js","names":[],"sources":["../../../../src/components/ImportCollection/utils/is-document.ts"],"sourcesContent":["/** Checks whether the given string could be an OpenAPI document */\nexport function isDocument(input: string | null): boolean {\n  // Return false for null, undefined, empty strings, or whitespace-only strings\n  if (!input || input.trim().length === 0) {\n    return false\n  }\n\n  const trimmed = input.trim()\n\n  // Return false if it looks like a URL (starts with http:// or https://)\n  if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {\n    return false\n  }\n\n  return true\n}\n"],"mappings":";;AACA,SAAgB,WAAW,OAA+B;AAExD,KAAI,CAAC,SAAS,MAAM,MAAM,CAAC,WAAW,EACpC,QAAO;CAGT,MAAM,UAAU,MAAM,MAAM;AAG5B,KAAI,QAAQ,WAAW,UAAU,IAAI,QAAQ,WAAW,WAAW,CACjE,QAAO;AAGT,QAAO"}

package/dist/components/ImportCollection/utils/is-url.js

@@ -0,0 +1,14 @@
+//#region src/components/ImportCollection/utils/is-url.ts
+/**
+* Checks whether the given string is an URL
+**/
+function isUrl(input) {
+	if (!input) return false;
+	const trimmed = input.trim();
+	if (!trimmed.startsWith("http://") && !trimmed.startsWith("https://")) return false;
+	return trimmed.replace(/^https?:\/\//, "").length > 0;
+}
+//#endregion
+export { isUrl };
+
+//# sourceMappingURL=is-url.js.map

package/dist/components/ImportCollection/utils/is-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-url.js","names":[],"sources":["../../../../src/components/ImportCollection/utils/is-url.ts"],"sourcesContent":["/**\n * Checks whether the given string is an URL\n **/\nexport function isUrl(input: string | null): boolean {\n  // Quick check for null or undefined\n  if (!input) {\n    return false\n  }\n\n  // Trim whitespace\n  const trimmed = input.trim()\n\n  // If it's an URL, it must start with http:// or https://\n  if (!trimmed.startsWith('http://') && !trimmed.startsWith('https://')) {\n    return false\n  }\n\n  // But it must have more than just the protocol\n  return trimmed.replace(/^https?:\\/\\//, '').length > 0\n}\n"],"mappings":";;;;AAGA,SAAgB,MAAM,OAA+B;AAEnD,KAAI,CAAC,MACH,QAAO;CAIT,MAAM,UAAU,MAAM,MAAM;AAG5B,KAAI,CAAC,QAAQ,WAAW,UAAU,IAAI,CAAC,QAAQ,WAAW,WAAW,CACnE,QAAO;AAIT,QAAO,QAAQ,QAAQ,gBAAgB,GAAG,CAAC,SAAS"}

package/dist/components/ImportCollection/utils/workspace-store-is-empty.d.ts

@@ -1,4 +1,4 @@
-import type { WorkspaceStore } from '@/store';
+import type { WorkspaceStore } from '../../../store/index.js';
 /**
  * Checks whether the store is empty.
  */

package/dist/components/ImportCollection/utils/workspace-store-is-empty.js

@@ -0,0 +1,13 @@
+//#region src/components/ImportCollection/utils/workspace-store-is-empty.ts
+/**
+* Checks whether the store is empty.
+*/
+function workspaceStoreIsEmpty(store) {
+	const hasSingleWorkspace = Object.keys(store.workspaces).length === 1;
+	const hasSingleCollection = Object.keys(store.collections).length === 1;
+	return hasSingleWorkspace && hasSingleCollection;
+}
+//#endregion
+export { workspaceStoreIsEmpty };
+
+//# sourceMappingURL=workspace-store-is-empty.js.map

package/dist/components/ImportCollection/utils/workspace-store-is-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-store-is-empty.js","names":[],"sources":["../../../../src/components/ImportCollection/utils/workspace-store-is-empty.ts"],"sourcesContent":["import type { WorkspaceStore } from '@/store'\n\n/**\n * Checks whether the store is empty.\n */\nexport function workspaceStoreIsEmpty(store: WorkspaceStore) {\n  const hasSingleWorkspace = Object.keys(store.workspaces).length === 1\n  const hasSingleCollection = Object.keys(store.collections).length === 1\n\n  return hasSingleWorkspace && hasSingleCollection\n}\n"],"mappings":";;;;AAKA,SAAgB,sBAAsB,OAAuB;CAC3D,MAAM,qBAAqB,OAAO,KAAK,MAAM,WAAW,CAAC,WAAW;CACpE,MAAM,sBAAsB,OAAO,KAAK,MAAM,YAAY,CAAC,WAAW;AAEtE,QAAO,sBAAsB"}

package/dist/components/OpenApiClientButton.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import OpenApiClientButton_vue_vue_type_script_setup_true_lang_default from "./OpenApiClientButton.vue.script.js";
+/* empty css                                  */
+//#region src/components/OpenApiClientButton.vue
+var OpenApiClientButton_default = /* @__PURE__ */ _plugin_vue_export_helper_default(OpenApiClientButton_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c7bdd328"]]);
+//#endregion
+export { OpenApiClientButton_default as default };
+
+//# sourceMappingURL=OpenApiClientButton.vue.js.map

package/dist/components/OpenApiClientButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenApiClientButton.vue.js","names":[],"sources":["../../src/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIcon } from '@scalar/components'\nimport { makeUrlAbsolute } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIcon\n      icon=\"ExternalLink\"\n      size=\"xs\"\n      thickness=\"2\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":""}

package/dist/components/OpenApiClientButton.vue.script.js

@@ -0,0 +1,58 @@
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, unref } from "vue";
+import { ScalarIcon } from "@scalar/components";
+import { makeUrlAbsolute } from "@scalar/oas-utils/helpers";
+//#region src/components/OpenApiClientButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["href"];
+var OpenApiClientButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "OpenApiClientButton",
+	props: {
+		buttonSource: {},
+		source: { default: "api-reference" },
+		isDevelopment: { type: Boolean },
+		integration: {},
+		url: {}
+	},
+	setup(__props) {
+		/** Link to import an OpenAPI document */
+		const href = computed(() => {
+			/**
+			* The URL we want to pass to client.scalar.com for the import.
+			* Might be an OpenAPI document URL, but could also just be the URL of the API reference.
+			*/
+			const urlToImportFrom = __props.url ?? (typeof window !== "undefined" ? window.location.href : void 0);
+			if (!urlToImportFrom) return;
+			const absoluteUrl = makeUrlAbsolute(urlToImportFrom);
+			if (!absoluteUrl?.length) return;
+			const link = new URL(__props.isDevelopment ? "http://localhost:5065" : "https://client.scalar.com");
+			link.searchParams.set("url", absoluteUrl);
+			if (__props.integration !== null) link.searchParams.set("integration", __props.integration ?? "vue");
+			link.searchParams.set("utm_source", "api-reference");
+			link.searchParams.set("utm_medium", "button");
+			link.searchParams.set("utm_campaign", __props.buttonSource);
+			if (__props.source === "gitbook") {
+				link.searchParams.set("utm_source", "gitbook");
+				const darkLogo = document.querySelector("img.dark\\:block[alt='Logo']");
+				const lightLogo = document.querySelector("img.dark\\:hidden[alt='Logo']");
+				if (darkLogo && darkLogo instanceof HTMLImageElement) link.searchParams.set("dark_logo", encodeURIComponent(darkLogo.src));
+				if (lightLogo && lightLogo instanceof HTMLImageElement) link.searchParams.set("light_logo", encodeURIComponent(lightLogo.src));
+			}
+			return link.toString();
+		});
+		return (_ctx, _cache) => {
+			return href.value ? (openBlock(), createElementBlock("a", {
+				key: 0,
+				class: "open-api-client-button",
+				href: href.value,
+				target: "_blank"
+			}, [createVNode(unref(ScalarIcon), {
+				icon: "ExternalLink",
+				size: "xs",
+				thickness: "2"
+			}), _cache[0] || (_cache[0] = createTextVNode(" Open API Client ", -1))], 8, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { OpenApiClientButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=OpenApiClientButton.vue.script.js.map

package/dist/components/OpenApiClientButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenApiClientButton.vue.script.js","names":[],"sources":["../../src/components/OpenApiClientButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarIcon } from '@scalar/components'\nimport { makeUrlAbsolute } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nconst {\n  integration,\n  isDevelopment,\n  url,\n  buttonSource,\n  source = 'api-reference',\n} = defineProps<{\n  buttonSource: 'sidebar' | 'modal'\n  source?: 'api-reference' | 'gitbook'\n  isDevelopment?: boolean\n  integration?: string | null\n  url?: string\n}>()\n\n/** Link to import an OpenAPI document */\nconst href = computed((): string | undefined => {\n  /**\n   * The URL we want to pass to client.scalar.com for the import.\n   * Might be an OpenAPI document URL, but could also just be the URL of the API reference.\n   */\n  const urlToImportFrom =\n    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)\n\n  if (!urlToImportFrom) {\n    return undefined\n  }\n\n  const absoluteUrl = makeUrlAbsolute(urlToImportFrom)\n\n  if (!absoluteUrl?.length) {\n    return undefined\n  }\n\n  // Base URL\n  const link = new URL(\n    isDevelopment ? 'http://localhost:5065' : 'https://client.scalar.com',\n  )\n\n  // URL that we'd like to import\n  link.searchParams.set('url', absoluteUrl)\n\n  // Integration identifier\n  if (integration !== null) {\n    link.searchParams.set('integration', integration ?? 'vue')\n  }\n\n  // UTM Source\n  link.searchParams.set('utm_source', 'api-reference')\n  link.searchParams.set('utm_medium', 'button')\n  link.searchParams.set('utm_campaign', buttonSource)\n\n  // Special for gitbook, set the source and grab the logos (hacky)\n  if (source === 'gitbook') {\n    link.searchParams.set('utm_source', 'gitbook')\n\n    const darkLogo = document.querySelector(\"img.dark\\\\:block[alt='Logo']\")\n    const lightLogo = document.querySelector(\"img.dark\\\\:hidden[alt='Logo']\")\n\n    if (darkLogo && darkLogo instanceof HTMLImageElement) {\n      link.searchParams.set('dark_logo', encodeURIComponent(darkLogo.src))\n    }\n    if (lightLogo && lightLogo instanceof HTMLImageElement) {\n      link.searchParams.set('light_logo', encodeURIComponent(lightLogo.src))\n    }\n  }\n\n  return link.toString()\n})\n</script>\n\n<template>\n  <a\n    v-if=\"href\"\n    class=\"open-api-client-button\"\n    :href=\"href\"\n    target=\"_blank\">\n    <ScalarIcon\n      icon=\"ExternalLink\"\n      size=\"xs\"\n      thickness=\"2\" />\n    Open API Client\n  </a>\n</template>\n\n<style scoped>\n.open-api-client-button {\n  cursor: pointer;\n  width: 100%;\n  padding: 9px 12px;\n  height: 31px;\n  display: block;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  font-size: var(--scalar-small);\n  line-height: 1.385;\n  text-decoration: none;\n  border-radius: var(--scalar-radius);\n  box-shadow: 0 0 0 0.5px var(--scalar-border-color);\n  gap: 6px;\n  color: var(--scalar-sidebar-color-1);\n}\n\n.open-api-client-button:hover {\n  background: var(\n    --scalar-sidebar-item-hover-background,\n    var(--scalar-background-2)\n  );\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAoBA,MAAM,OAAO,eAAmC;;;;;GAK9C,MAAM,kBACJ,QAAA,QAAQ,OAAO,WAAW,cAAc,OAAO,SAAS,OAAO,KAAA;AAEjE,OAAI,CAAC,gBACH;GAGF,MAAM,cAAc,gBAAgB,gBAAe;AAEnD,OAAI,CAAC,aAAa,OAChB;GAIF,MAAM,OAAO,IAAI,IACf,QAAA,gBAAgB,0BAA0B,4BAC5C;AAGA,QAAK,aAAa,IAAI,OAAO,YAAW;AAGxC,OAAI,QAAA,gBAAgB,KAClB,MAAK,aAAa,IAAI,eAAe,QAAA,eAAe,MAAK;AAI3D,QAAK,aAAa,IAAI,cAAc,gBAAe;AACnD,QAAK,aAAa,IAAI,cAAc,SAAQ;AAC5C,QAAK,aAAa,IAAI,gBAAgB,QAAA,aAAY;AAGlD,OAAI,QAAA,WAAW,WAAW;AACxB,SAAK,aAAa,IAAI,cAAc,UAAS;IAE7C,MAAM,WAAW,SAAS,cAAc,+BAA8B;IACtE,MAAM,YAAY,SAAS,cAAc,gCAA+B;AAExE,QAAI,YAAY,oBAAoB,iBAClC,MAAK,aAAa,IAAI,aAAa,mBAAmB,SAAS,IAAI,CAAA;AAErE,QAAI,aAAa,qBAAqB,iBACpC,MAAK,aAAa,IAAI,cAAc,mBAAmB,UAAU,IAAI,CAAA;;AAIzE,UAAO,KAAK,UAAS;IACtB;;UAKS,KAAA,SAAA,WAAA,EADR,mBAUI,KAAA;;IARF,OAAM;IACL,MAAM,KAAA;IACP,QAAO;OACP,YAGkB,MAAA,WAAA,EAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU;iDAAM,qBAEpB,GAAA,EAAA,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/ScalarAsciiArt.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import ScalarAsciiArt_vue_vue_type_script_setup_true_lang_default from "./ScalarAsciiArt.vue.script.js";
+/* empty css                             */
+//#region src/components/ScalarAsciiArt.vue
+var ScalarAsciiArt_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ScalarAsciiArt_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-69ebd973"]]);
+//#endregion
+export { ScalarAsciiArt_default as default };
+
+//# sourceMappingURL=ScalarAsciiArt.vue.js.map

package/dist/components/ScalarAsciiArt.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarAsciiArt.vue.js","names":[],"sources":["../../src/components/ScalarAsciiArt.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type StyleValue } from 'vue'\n\nconst props = defineProps<{ art: string; animate?: boolean }>()\n\nconst BLINK = 500 // ms - Cursor blink speed\nconst PRINT = 100 // ms - Text print speed\n\nconst lines = computed<string[]>(() => props.art.split('\\n'))\n\nconst getLineAnimation = (chars: number, row: number): StyleValue => ({\n  animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,\n  animationTimingFunction: `steps(${chars}), step-end`,\n  animationDelay: `${row * PRINT}ms, 0ms`,\n  animationIterationCount: `1, ${(((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT) / BLINK}`,\n})\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]\"\n    :class=\"{ 'ascii-art-animate': animate }\"\n    role=\"presentation\"\n    inert>\n    <span\n      v-for=\"(line, i) in lines\"\n      :key=\"i\"\n      class=\"inline-block\"\n      :style=\"{ width: `calc(${line.length + 1}ch)` }\">\n      <!-- prettier-ignore -->\n      <span\nclass=\"inline-block whitespace-pre overflow-hidden\"\n:style=\"getLineAnimation(line.length, i)\">{{\n       line\n      }}</span>\n    </span>\n  </div>\n</template>\n<style scoped>\n.ascii-art-animate .ascii-art-line {\n  border-right: 1ch solid transparent;\n  animation:\n    typewriter 4s steps(1) 1s 1 normal both,\n    blinkTextCursor 500ms steps(1) infinite normal;\n}\n\n@keyframes typewriter {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes blinkTextCursor {\n  0% {\n    border-right-color: currentColor;\n  }\n  50% {\n    border-right-color: transparent;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ScalarAsciiArt.vue.script.js

@@ -0,0 +1,42 @@
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
+//#region src/components/ScalarAsciiArt.vue?vue&type=script&setup=true&lang.ts
+var BLINK = 500;
+var PRINT = 100;
+var ScalarAsciiArt_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarAsciiArt",
+	props: {
+		art: {},
+		animate: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const lines = computed(() => props.art.split("\n"));
+		const getLineAnimation = (chars, row) => ({
+			animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,
+			animationTimingFunction: `steps(${chars}), step-end`,
+			animationDelay: `${row * PRINT}ms, 0ms`,
+			animationIterationCount: `1, ${((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT / BLINK}`
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"aria-hidden": "true",
+				class: normalizeClass(["ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]", { "ascii-art-animate": __props.animate }]),
+				role: "presentation",
+				inert: ""
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (line, i) => {
+				return openBlock(), createElementBlock("span", {
+					key: i,
+					class: "inline-block",
+					style: normalizeStyle({ width: `calc(${line.length + 1}ch)` })
+				}, [createElementVNode("span", {
+					class: "inline-block whitespace-pre overflow-hidden",
+					style: normalizeStyle(getLineAnimation(line.length, i))
+				}, toDisplayString(line), 5)], 4);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { ScalarAsciiArt_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ScalarAsciiArt.vue.script.js.map

package/dist/components/ScalarAsciiArt.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarAsciiArt.vue.script.js","names":[],"sources":["../../src/components/ScalarAsciiArt.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type StyleValue } from 'vue'\n\nconst props = defineProps<{ art: string; animate?: boolean }>()\n\nconst BLINK = 500 // ms - Cursor blink speed\nconst PRINT = 100 // ms - Text print speed\n\nconst lines = computed<string[]>(() => props.art.split('\\n'))\n\nconst getLineAnimation = (chars: number, row: number): StyleValue => ({\n  animationDuration: `${chars * PRINT}ms, ${BLINK}ms`,\n  animationTimingFunction: `steps(${chars}), step-end`,\n  animationDelay: `${row * PRINT}ms, 0ms`,\n  animationIterationCount: `1, ${(((lines.value?.length ?? 0) + (lines.value?.[lines.value?.length - 1]?.length ?? 0) + 5) * PRINT) / BLINK}`,\n})\n</script>\n<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"ascii-art font-code flex flex-col items-start text-[6px] leading-[7px]\"\n    :class=\"{ 'ascii-art-animate': animate }\"\n    role=\"presentation\"\n    inert>\n    <span\n      v-for=\"(line, i) in lines\"\n      :key=\"i\"\n      class=\"inline-block\"\n      :style=\"{ width: `calc(${line.length + 1}ch)` }\">\n      <!-- prettier-ignore -->\n      <span\nclass=\"inline-block whitespace-pre overflow-hidden\"\n:style=\"getLineAnimation(line.length, i)\">{{\n       line\n      }}</span>\n    </span>\n  </div>\n</template>\n<style scoped>\n.ascii-art-animate .ascii-art-line {\n  border-right: 1ch solid transparent;\n  animation:\n    typewriter 4s steps(1) 1s 1 normal both,\n    blinkTextCursor 500ms steps(1) infinite normal;\n}\n\n@keyframes typewriter {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes blinkTextCursor {\n  0% {\n    border-right-color: currentColor;\n  }\n  50% {\n    border-right-color: transparent;\n  }\n}\n</style>\n"],"mappings":";;AAKA,IAAM,QAAQ;AACd,IAAM,QAAQ;;;;;;;;EAHd,MAAM,QAAQ;EAKd,MAAM,QAAQ,eAAyB,MAAM,IAAI,MAAM,KAAK,CAAA;EAE5D,MAAM,oBAAoB,OAAe,SAA6B;GACpE,mBAAmB,GAAG,QAAQ,MAAM,MAAM,MAAM;GAChD,yBAAyB,SAAS,MAAM;GACxC,gBAAgB,GAAG,MAAM,MAAM;GAC/B,yBAAyB,QAAS,MAAM,OAAO,UAAU,MAAM,MAAM,QAAQ,MAAM,OAAO,SAAS,IAAI,UAAU,KAAK,KAAK,QAAS;GACrI;;uBAGC,mBAkBM,OAAA;IAjBJ,eAAY;IACZ,OAAK,eAAA,CAAC,0EAAwE,EAAA,qBAC/C,QAAA,SAAO,CAAA,CAAA;IACtC,MAAK;IACL,OAAA;yBACA,mBAWO,UAAA,MAAA,WAVe,MAAA,QAAZ,MAAM,MAAC;wBADjB,mBAWO,QAAA;KATJ,KAAK;KACN,OAAM;KACL,OAAK,eAAA,EAAA,OAAA,QAAmB,KAAK,SAAM,EAAA,MAAA,CAAA;QAEpC,mBAIS,QAAA;KAHf,OAAM;KACL,OAAK,eAAE,iBAAiB,KAAK,QAAQ,EAAC,CAAA;uBAChC,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/components/Search/useSearch.js

@@ -0,0 +1,110 @@
+import { PathId } from "../../routes.js";
+import { useActiveEntities } from "../../store/active-entities.js";
+import { useWorkspace } from "../../store/store.js";
+import { computed, nextTick, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { isDefined, shouldIgnoreEntity } from "@scalar/oas-utils/helpers";
+import Fuse from "fuse.js";
+//#region src/components/Search/useSearch.ts
+/**
+* Hook for managing search functionality.
+* Provides search state, results, and methods for searching.
+*/
+function useSearch() {
+	const router = useRouter();
+	const { activeWorkspace, activeWorkspaceRequests, activeWorkspaceCollections } = useActiveEntities();
+	const { requests, tags } = useWorkspace();
+	const fuseDataArray = ref([]);
+	const searchResults = ref([]);
+	const selectedSearchResult = ref(0);
+	const searchText = ref("");
+	const searchInputRef = ref(null);
+	const searchResultRefs = ref([]);
+	const fuse = new Fuse(fuseDataArray.value, { keys: [
+		"title",
+		"description",
+		"body"
+	] });
+	const resetSearch = () => {
+		searchText.value = "";
+		selectedSearchResult.value = 0;
+		searchResults.value = [];
+		if (searchInputRef.value instanceof HTMLInputElement) searchInputRef.value.blur();
+	};
+	const populateFuseDataArray = (items) => {
+		fuseDataArray.value = items.filter((request) => !shouldIgnoreEntity(request)).filter((request) => {
+			const collection = activeWorkspaceCollections.value?.find((activeWorkspaceCollection) => activeWorkspaceCollection.requests.includes(request.uid));
+			return !Boolean(collection?.tags.map((uid) => tags[uid]).filter(isDefined).filter((tag) => request.tags?.includes(tag.name)).filter((tag) => shouldIgnoreEntity(tag)).length);
+		}).map((request) => ({
+			id: request.uid,
+			title: request.summary ?? request.method,
+			description: request.description ?? "",
+			httpVerb: request.method,
+			path: request.path,
+			link: router?.resolve({
+				name: "request",
+				params: {
+					[PathId.Request]: request.uid,
+					[PathId.Workspace]: activeWorkspace.value?.uid
+				}
+			})?.href
+		}));
+		fuse.setCollection(fuseDataArray.value);
+	};
+	const fuseSearch = () => {
+		selectedSearchResult.value = 0;
+		searchResults.value = fuse.search(searchText.value);
+	};
+	watch(searchText, (newValue) => {
+		if (newValue.length) fuseSearch();
+		else searchResults.value = [];
+	});
+	const navigateSearchResults = (direction) => {
+		const offset = direction === "up" ? -1 : 1;
+		const length = searchResultsWithPlaceholderResults.value.length;
+		selectedSearchResult.value = (selectedSearchResult.value + offset + length) % length;
+		nextTick(() => {
+			const element = searchResultRefs.value[selectedSearchResult.value];
+			if (element instanceof HTMLElement) element.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+		});
+	};
+	const selectSearchResult = () => {
+		if (selectedSearchResult.value >= 0) {
+			const selectedResult = searchResultsWithPlaceholderResults.value[selectedSearchResult.value];
+			if (selectedResult) onSearchResultClick(selectedResult);
+		}
+	};
+	const validRequests = computed(() => activeWorkspaceRequests.value.map((uid) => requests[uid]).filter(isDefined));
+	watch(activeWorkspaceRequests, () => {
+		populateFuseDataArray(validRequests.value);
+	}, { immediate: true });
+	const onSearchResultClick = (entry) => {
+		router.push(entry.item.id);
+		resetSearch();
+	};
+	const searchResultsWithPlaceholderResults = computed(() => {
+		if (searchText.value.length === 0) return fuseDataArray.value.map((item) => {
+			return { item };
+		});
+		return searchResults.value;
+	});
+	return {
+		searchText,
+		searchResultsWithPlaceholderResults,
+		selectedSearchResult,
+		onSearchResultClick,
+		fuseSearch,
+		searchInputRef,
+		searchResultRefs,
+		navigateSearchResults,
+		selectSearchResult,
+		populateFuseDataArray
+	};
+}
+//#endregion
+export { useSearch };
+
+//# sourceMappingURL=useSearch.js.map

package/dist/components/Search/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","names":[],"sources":["../../../src/components/Search/useSearch.ts"],"sourcesContent":["import type { Request } from '@scalar/oas-utils/entities/spec'\nimport { isDefined, shouldIgnoreEntity } from '@scalar/oas-utils/helpers'\nimport Fuse, { type FuseResult } from 'fuse.js'\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { PathId } from '@/routes'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\n\n/**\n * Hook for managing search functionality.\n * Provides search state, results, and methods for searching.\n */\nexport function useSearch() {\n  const router = useRouter()\n  const { activeWorkspace, activeWorkspaceRequests, activeWorkspaceCollections } = useActiveEntities()\n  const { requests, tags } = useWorkspace()\n\n  type FuseData = {\n    title: string\n    description: string\n    httpVerb: string\n    id: string\n    path: string\n    link: string | undefined\n  }\n\n  const fuseDataArray = ref<FuseData[]>([])\n  const searchResults = ref<FuseResult<FuseData>[]>([])\n  const selectedSearchResult = ref<number>(0)\n  const searchText = ref<string>('')\n  const searchInputRef = ref<HTMLInputElement | null>(null)\n  const searchResultRefs = ref<HTMLElement[]>([])\n\n  const fuse = new Fuse(fuseDataArray.value, {\n    keys: ['title', 'description', 'body'],\n  })\n\n  const resetSearch = () => {\n    searchText.value = ''\n    selectedSearchResult.value = 0\n    searchResults.value = []\n    if (searchInputRef.value instanceof HTMLInputElement) {\n      searchInputRef.value.blur()\n    }\n  }\n\n  const populateFuseDataArray = (items: Request[]) => {\n    fuseDataArray.value = items\n      // TODO: We should probably filter in the store or somewhere else.\n      // Check if the request is marked has hidden/internal\n      .filter((request) => !shouldIgnoreEntity(request))\n      // Check if the request is in a tag that is marked has hidden/internal\n      .filter((request) => {\n        // Find the collection for the request\n        const collection = activeWorkspaceCollections.value?.find((activeWorkspaceCollection) =>\n          activeWorkspaceCollection.requests.includes(request.uid),\n        )\n\n        const hasIgnoredTags = Boolean(\n          collection?.tags\n            .map((uid) => tags[uid])\n            .filter(isDefined)\n            .filter((tag) => request.tags?.includes(tag.name))\n            .filter((tag) => shouldIgnoreEntity(tag)).length,\n        )\n\n        return !hasIgnoredTags\n      })\n      .map((request: Request) => ({\n        id: request.uid,\n        title: request.summary ?? request.method,\n        description: request.description ?? '',\n        httpVerb: request.method,\n        path: request.path,\n        link: router?.resolve({\n          name: 'request',\n          params: {\n            [PathId.Request]: request.uid,\n            [PathId.Workspace]: activeWorkspace.value?.uid,\n          },\n        })?.href,\n      }))\n\n    fuse.setCollection(fuseDataArray.value)\n  }\n\n  const fuseSearch = (): void => {\n    selectedSearchResult.value = 0\n    searchResults.value = fuse.search(searchText.value)\n  }\n\n  watch(searchText, (newValue) => {\n    if (newValue.length) {\n      fuseSearch()\n    } else {\n      searchResults.value = []\n    }\n  })\n\n  const navigateSearchResults = (direction: 'up' | 'down') => {\n    const offset = direction === 'up' ? -1 : 1\n    const length = searchResultsWithPlaceholderResults.value.length\n\n    // Ensures we loop around the array by using the remainder\n    selectedSearchResult.value = (selectedSearchResult.value + offset + length) % length\n\n    // Scroll the selected item into view\n    nextTick(() => {\n      const element = searchResultRefs.value[selectedSearchResult.value]\n      if (element instanceof HTMLElement) {\n        element.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n        })\n      }\n    })\n  }\n\n  const selectSearchResult = () => {\n    if (selectedSearchResult.value >= 0) {\n      const selectedResult = searchResultsWithPlaceholderResults.value[selectedSearchResult.value]\n      if (selectedResult) {\n        onSearchResultClick(selectedResult)\n      }\n    }\n  }\n\n  const validRequests = computed(() => activeWorkspaceRequests.value.map((uid) => requests[uid]).filter(isDefined))\n\n  // Populate our fuseDataArray with the request items\n  watch(\n    activeWorkspaceRequests,\n    () => {\n      populateFuseDataArray(validRequests.value)\n    },\n    { immediate: true },\n  )\n\n  const onSearchResultClick = (entry: FuseResult<FuseData>) => {\n    router.push(entry.item.id)\n    resetSearch()\n  }\n\n  const searchResultsWithPlaceholderResults = computed((): FuseResult<FuseData>[] => {\n    if (searchText.value.length === 0) {\n      return fuseDataArray.value.map((item) => {\n        return {\n          item: item,\n        } as FuseResult<FuseData>\n      })\n    }\n\n    return searchResults.value\n  })\n\n  return {\n    searchText,\n    searchResultsWithPlaceholderResults,\n    selectedSearchResult,\n    onSearchResultClick,\n    fuseSearch,\n    searchInputRef,\n    searchResultRefs,\n    navigateSearchResults,\n    selectSearchResult,\n    populateFuseDataArray,\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,YAAY;CAC1B,MAAM,SAAS,WAAW;CAC1B,MAAM,EAAE,iBAAiB,yBAAyB,+BAA+B,mBAAmB;CACpG,MAAM,EAAE,UAAU,SAAS,cAAc;CAWzC,MAAM,gBAAgB,IAAgB,EAAE,CAAC;CACzC,MAAM,gBAAgB,IAA4B,EAAE,CAAC;CACrD,MAAM,uBAAuB,IAAY,EAAE;CAC3C,MAAM,aAAa,IAAY,GAAG;CAClC,MAAM,iBAAiB,IAA6B,KAAK;CACzD,MAAM,mBAAmB,IAAmB,EAAE,CAAC;CAE/C,MAAM,OAAO,IAAI,KAAK,cAAc,OAAO,EACzC,MAAM;EAAC;EAAS;EAAe;EAAO,EACvC,CAAC;CAEF,MAAM,oBAAoB;AACxB,aAAW,QAAQ;AACnB,uBAAqB,QAAQ;AAC7B,gBAAc,QAAQ,EAAE;AACxB,MAAI,eAAe,iBAAiB,iBAClC,gBAAe,MAAM,MAAM;;CAI/B,MAAM,yBAAyB,UAAqB;AAClD,gBAAc,QAAQ,MAGnB,QAAQ,YAAY,CAAC,mBAAmB,QAAQ,CAAC,CAEjD,QAAQ,YAAY;GAEnB,MAAM,aAAa,2BAA2B,OAAO,MAAM,8BACzD,0BAA0B,SAAS,SAAS,QAAQ,IAAI,CACzD;AAUD,UAAO,CARgB,QACrB,YAAY,KACT,KAAK,QAAQ,KAAK,KAAK,CACvB,OAAO,UAAU,CACjB,QAAQ,QAAQ,QAAQ,MAAM,SAAS,IAAI,KAAK,CAAC,CACjD,QAAQ,QAAQ,mBAAmB,IAAI,CAAC,CAAC,OAC7C;IAGD,CACD,KAAK,aAAsB;GAC1B,IAAI,QAAQ;GACZ,OAAO,QAAQ,WAAW,QAAQ;GAClC,aAAa,QAAQ,eAAe;GACpC,UAAU,QAAQ;GAClB,MAAM,QAAQ;GACd,MAAM,QAAQ,QAAQ;IACpB,MAAM;IACN,QAAQ;MACL,OAAO,UAAU,QAAQ;MACzB,OAAO,YAAY,gBAAgB,OAAO;KAC5C;IACF,CAAC,EAAE;GACL,EAAE;AAEL,OAAK,cAAc,cAAc,MAAM;;CAGzC,MAAM,mBAAyB;AAC7B,uBAAqB,QAAQ;AAC7B,gBAAc,QAAQ,KAAK,OAAO,WAAW,MAAM;;AAGrD,OAAM,aAAa,aAAa;AAC9B,MAAI,SAAS,OACX,aAAY;MAEZ,eAAc,QAAQ,EAAE;GAE1B;CAEF,MAAM,yBAAyB,cAA6B;EAC1D,MAAM,SAAS,cAAc,OAAO,KAAK;EACzC,MAAM,SAAS,oCAAoC,MAAM;AAGzD,uBAAqB,SAAS,qBAAqB,QAAQ,SAAS,UAAU;AAG9E,iBAAe;GACb,MAAM,UAAU,iBAAiB,MAAM,qBAAqB;AAC5D,OAAI,mBAAmB,YACrB,SAAQ,eAAe;IACrB,UAAU;IACV,OAAO;IACR,CAAC;IAEJ;;CAGJ,MAAM,2BAA2B;AAC/B,MAAI,qBAAqB,SAAS,GAAG;GACnC,MAAM,iBAAiB,oCAAoC,MAAM,qBAAqB;AACtF,OAAI,eACF,qBAAoB,eAAe;;;CAKzC,MAAM,gBAAgB,eAAe,wBAAwB,MAAM,KAAK,QAAQ,SAAS,KAAK,CAAC,OAAO,UAAU,CAAC;AAGjH,OACE,+BACM;AACJ,wBAAsB,cAAc,MAAM;IAE5C,EAAE,WAAW,MAAM,CACpB;CAED,MAAM,uBAAuB,UAAgC;AAC3D,SAAO,KAAK,MAAM,KAAK,GAAG;AAC1B,eAAa;;CAGf,MAAM,sCAAsC,eAAuC;AACjF,MAAI,WAAW,MAAM,WAAW,EAC9B,QAAO,cAAc,MAAM,KAAK,SAAS;AACvC,UAAO,EACC,MACP;IACD;AAGJ,SAAO,cAAc;GACrB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/components/SectionFilter.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import SectionFilter_vue_vue_type_script_setup_true_lang_default from "./SectionFilter.vue.script.js";
+/* empty css                            */
+//#region src/components/SectionFilter.vue
+var SectionFilter_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f97cc68c"]]);
+//#endregion
+export { SectionFilter_default as default };
+
+//# sourceMappingURL=SectionFilter.vue.js.map

package/dist/components/SectionFilter.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}

package/dist/components/SectionFilter.vue.script.js

@@ -0,0 +1,69 @@
+import SectionFilterButton_default from "./SectionFilterButton.vue.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, openBlock, ref, renderList, toDisplayString, unref, useModel, withCtx, withKeys } from "vue";
+import { ScalarIcon } from "@scalar/components";
+//#region src/components/SectionFilter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex" };
+var _hoisted_2 = { class: "filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center" };
+var _hoisted_3 = { class: "context-bar-group-hover:hidden mr-1.5" };
+var SectionFilter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SectionFilter",
+	props: /* @__PURE__ */ mergeModels({
+		filters: { default: () => [] },
+		filterIds: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const tablist = ref();
+		/** Keyboard navigation */
+		const navigateSection = (direction) => {
+			const offset = direction === "prev" ? -1 : 1;
+			const index = model.value ? __props.filters.indexOf(model.value) : 0;
+			const length = __props.filters.length;
+			const newIndex = (index + offset + length) % length;
+			model.value = __props.filters[newIndex];
+			nextTick(() => {
+				if (tablist.value) {
+					const selectedButton = tablist.value.querySelector(`button[aria-selected="true"]`);
+					if (selectedButton) selectedButton.focus();
+				}
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "tablist",
+				ref: tablist,
+				class: "filter-hover context-bar-group ml-auto hidden lg:flex",
+				role: "tablist",
+				onKeydown: [_cache[0] || (_cache[0] = withKeys(($event) => navigateSection("prev"), ["left"])), _cache[1] || (_cache[1] = withKeys(($event) => navigateSection("next"), ["right"]))]
+			}, [createElementVNode("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
+				return openBlock(), createBlock(SectionFilterButton_default, {
+					key: filter,
+					class: "filter-hover-item",
+					controls: __props.filterIds?.[filter],
+					role: "tab",
+					selected: model.value === filter,
+					onClick: ($event) => model.value = filter
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(filter), 1)]),
+					_: 2
+				}, 1032, [
+					"controls",
+					"selected",
+					"onClick"
+				]);
+			}), 128)), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(model.value), 1), createVNode(unref(ScalarIcon), {
+				icon: "FilterList",
+				size: "md",
+				thickness: "2"
+			})])])], 544);
+		};
+	}
+});
+//#endregion
+export { SectionFilter_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SectionFilter.vue.script.js.map

package/dist/components/SectionFilter.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\n\nconst { filters = [], filterIds } = defineProps<{\n  filters?: T[]\n  filterIds?: Record<T, string>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\n\n/** Keyboard navigation */\nconst navigateSection = (direction: 'next' | 'prev') => {\n  const offset = direction === 'prev' ? -1 : 1\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ml-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('prev')\"\n    @keydown.right=\"navigateSection('next')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -right-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden mr-1.5\">{{ model }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-right: 39px;\n  padding-left: 24px;\n  position: absolute;\n  right: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ,SAAc,SAAA,aAAC;EAE7B,MAAM,UAAU,KAAoB;;EAGpC,MAAM,mBAAmB,cAA+B;GACtD,MAAM,SAAS,cAAc,SAAS,KAAK;GAC3C,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,MAAM,GAAG;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;AAC7C,SAAM,QAAQ,QAAA,QAAQ;AAGtB,kBAAe;AACb,QAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,+BACD;AACD,SAAI,eACF,gBAAe,OAAM;;KAG1B;;;uBAID,mBA2BM,OAAA;aA1BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,OAAA,EAAA,CAAA,OAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA;OAC/B,mBAoBM,OApBN,YAoBM,EAAA,UAAA,KAAA,EAlBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACJ,CAAA,gBAAA,gBAAT,OAAM,EAAA,EAAA,CAAA,CAAA;;;;;;;cAEX,mBAOM,OAPN,YAOM,CALJ,mBAAsE,QAAtE,YAAsE,gBAAf,MAAA,MAAK,EAAA,EAAA,EAC5D,YAGkB,MAAA,WAAA,EAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}

package/dist/components/SectionFilterButton.vue.js

@@ -0,0 +1,7 @@
+import SectionFilterButton_vue_vue_type_script_setup_true_lang_default from "./SectionFilterButton.vue.script.js";
+//#region src/components/SectionFilterButton.vue
+var SectionFilterButton_default = SectionFilterButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SectionFilterButton_default as default };
+
+//# sourceMappingURL=SectionFilterButton.vue.js.map

package/dist/components/SectionFilterButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFilterButton.vue.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/SectionFilterButton.vue.script.js

@@ -0,0 +1,30 @@
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+//#region src/components/SectionFilterButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-controls",
+	"aria-selected",
+	"tabindex"
+];
+var SectionFilterButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SectionFilterButton",
+	props: {
+		selected: { type: Boolean },
+		controls: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				"aria-controls": __props.controls ?? "",
+				"aria-selected": !!__props.selected,
+				class: normalizeClass(["hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline", { "text-c-1 pointer-events-none": __props.selected }]),
+				role: "tab",
+				tabindex: __props.selected ? 0 : -1,
+				type: "button"
+			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SectionFilterButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SectionFilterButton.vue.script.js.map

package/dist/components/SectionFilterButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionFilterButton.vue.script.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;uBAOE,mBASS,UAAA;IARN,iBAAe,QAAA,YAAQ;IACvB,iBAAa,CAAA,CAAI,QAAA;IAClB,OAAK,eAAA,CAAC,+IAA6I,EAAA,gCACzG,QAAA,UAAQ,CAAA,CAAA;IAClD,MAAK;IACJ,UAAU,QAAA,WAAQ,IAAA;IACnB,MAAK;OACL,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/Server/ServerDropdown.vue.js

@@ -0,0 +1,7 @@
+import ServerDropdown_vue_vue_type_script_setup_true_lang_default from "./ServerDropdown.vue.script.js";
+//#region src/components/Server/ServerDropdown.vue
+var ServerDropdown_default = ServerDropdown_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ServerDropdown_default as default };
+
+//# sourceMappingURL=ServerDropdown.vue.js.map

package/dist/components/Server/ServerDropdown.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerDropdown.vue.js","names":[],"sources":["../../../src/components/Server/ServerDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdownDivider,\n  ScalarFloatingBackdrop,\n  ScalarIcon,\n  ScalarPopover,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Request as Operation,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { emitCustomEvent } from '@scalar/workspace-store/events'\nimport { computed, useTemplateRef, watch } from 'vue'\n\nimport { useLayout } from '@/hooks/useLayout'\nimport { useWorkspace } from '@/store/store'\n\nimport ServerDropdownItem from './ServerDropdownItem.vue'\n\nconst { target, collection, operation, server } = defineProps<{\n  collection: Collection\n  operation?: Operation\n  server: Server | undefined\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n}>()\n\nconst { layout } = useLayout()\nconst { servers, collectionMutators, events, serverMutators } = useWorkspace()\n\nconst requestServerOptions = computed(() =>\n  operation?.servers?.map((serverUid) => ({\n    id: serverUid,\n    label: servers[serverUid]?.url ?? 'Unknown server',\n  })),\n)\n\nconst collectionServerOptions = computed(() =>\n  // Filters out servers already present in the request\n  collection?.servers\n    ?.filter((serverUid) => !operation?.servers?.includes(serverUid))\n    .map((serverUid) => ({\n      id: serverUid,\n      label: servers[serverUid]?.url ?? 'Unknown server',\n    })),\n)\n\n/** If we have both request and collection servers we show the labels */\nconst showDropdownLabels = computed(\n  () =>\n    requestServerOptions.value?.length && collectionServerOptions.value?.length,\n)\n\n// Ensure we always have a selected server\nwatch([() => collection, () => operation], ([newCollection, newOperation]) => {\n  if (\n    !newCollection ||\n    newCollection.selectedServerUid ||\n    newOperation?.selectedServerUid\n  ) {\n    return\n  }\n\n  const firstServer = collection.servers?.[0]\n\n  if (firstServer) {\n    collectionMutators.edit(collection.uid, 'selectedServerUid', firstServer)\n  }\n})\n\n/** Add server */\nconst handleAddServer = () =>\n  events.commandPalette.emit({\n    commandName: 'Add Server',\n  })\n\nconst serverUrlWithoutTrailingSlash = computed(() => {\n  if (server?.url?.endsWith('/')) {\n    return server.url.slice(0, -1)\n  }\n  return server?.url || ''\n})\n\nconst updateServerVariable = (key: string, value: string) => {\n  if (!server) {\n    return\n  }\n\n  const variables = server.variables || {}\n  variables[key] = { ...variables[key], default: value }\n\n  serverMutators.edit(server.uid, 'variables', variables)\n\n  // Emit event to keep the new store in sync\n  emitCustomEvent(\n    wrapper.value?.$el,\n    'scalar-update-selected-server-variables',\n    { key, value },\n  )\n}\n\nconst wrapper = useTemplateRef('wrapper-ref')\n</script>\n<template>\n  <ScalarPopover\n    ref=\"wrapper-ref\"\n    class=\"max-h-[inherit] p-0 text-base\"\n    focus\n    :offset=\"0\"\n    placement=\"bottom-start\"\n    resize\n    :target=\"target\"\n    :teleport=\"`#${target}`\">\n    <ScalarButton\n      class=\"z-context-plus 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\n        v-if=\"operation?.selectedServerUid || collection.selectedServerUid\">\n        <span class=\"sr-only\">Server:</span>\n        {{ serverUrlWithoutTrailingSlash }}\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">Add Server</span>\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"xs\" />\n      </template>\n    </ScalarButton>\n    <template #popover=\"{ close }\">\n      <div\n        class=\"custom-scroll flex max-h-[inherit] flex-col gap-1 border-t p-1\"\n        @click=\"close\">\n        <!-- Request -->\n        <ServerDropdownItem\n          v-for=\"serverOption in requestServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"request\"\n          @update:variable=\"updateServerVariable\" />\n        <template v-if=\"showDropdownLabels\">\n          <ScalarDropdownDivider />\n          <div class=\"text-xxs text-c-2 px-2.5 py-1\">Collection</div>\n        </template>\n        <!-- Collection -->\n        <ServerDropdownItem\n          v-for=\"serverOption in collectionServerOptions\"\n          :key=\"serverOption.id\"\n          :collection=\"collection\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :serverOption=\"serverOption\"\n          type=\"collection\"\n          @update:variable=\"updateServerVariable\" />\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=\"handleAddServer\">\n            <div class=\"flex h-4 w-4 items-center justify-center\">\n              <ScalarIcon\n                icon=\"Add\"\n                size=\"sm\" />\n            </div>\n            <span>Add Server</span>\n          </button>\n        </template>\n      </div>\n    </template>\n    <template #backdrop>\n      <ScalarFloatingBackdrop\n        class=\"-top-(--scalar-address-bar-height) rounded-lg\" />\n    </template>\n  </ScalarPopover>\n</template>\n"],"mappings":""}