@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/components/modals/ModalClientContainer.vue.script.js

@@ -0,0 +1,62 @@
+import { Transition, createBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+import { ScalarTeleportRoot, addScalarClassesToHeadless } from "@scalar/components";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+//#region src/v2/components/modals/ModalClientContainer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "scalar scalar-app z-overlay relative" };
+var _hoisted_2 = { class: "scalar-container" };
+var _hoisted_3 = ["id"];
+var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ModalClientContainer",
+	props: { modalState: {} },
+	emits: ["open", "close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const client = ref(null);
+		const id = useId();
+		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(client, {
+			allowOutsideClick: true,
+			fallbackFocus: `#${id}`
+		});
+		onBeforeMount(() => addScalarClassesToHeadless());
+		watch(() => props.modalState.open, async (open) => {
+			if (open) {
+				await nextTick();
+				activateFocusTrap();
+				emit("open");
+			} else {
+				deactivateFocusTrap();
+				emit("close");
+			}
+		}, { immediate: false });
+		onBeforeUnmount(() => {
+			deactivateFocusTrap();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "scalar-client-fade" }, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", mergeProps({
+					id: unref(id),
+					ref_key: "client",
+					ref: client,
+					"aria-label": "API Client",
+					"aria-modal": "true"
+				}, _ctx.$attrs, {
+					class: "scalar-app-layout scalar-client",
+					role: "dialog",
+					tabindex: "-1"
+				}), [createVNode(unref(ScalarTeleportRoot), null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					_: 3
+				})], 16, _hoisted_3), createElementVNode("div", {
+					class: "scalar-app-exit",
+					onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
+				})])], 512), [[vShow, __props.modalState.open]])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ModalClientContainer_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ModalClientContainer.vue.script.js.map

package/dist/v2/components/modals/ModalClientContainer.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalClientContainer.vue.script.js","names":["$attrs"],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: `#${id}`,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <Transition name=\"scalar-client-fade\">\n    <div\n      v-show=\"modalState.open\"\n      class=\"scalar scalar-app z-overlay relative\">\n      <div class=\"scalar-container\">\n        <div\n          :id=\"id\"\n          ref=\"client\"\n          aria-label=\"API Client\"\n          aria-modal=\"true\"\n          v-bind=\"$attrs\"\n          class=\"scalar-app-layout scalar-client\"\n          role=\"dialog\"\n          tabindex=\"-1\">\n          <ScalarTeleportRoot>\n            <slot />\n          </ScalarTeleportRoot>\n        </div>\n\n        <!-- overlay / exit area -->\n        <div\n          class=\"scalar-app-exit\"\n          @click=\"modalState.hide()\" />\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: visible;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n  transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAgBA,MAAM,QAAQ;EACd,MAAM,OAAO;EAKb,MAAM,SAAS,IAAwB,KAAI;EAC3C,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,UAAU,mBAAmB,YAAY,wBAC/C,aAAa,QAAQ;GACnB,mBAAmB;GACnB,eAAe,IAAI;GACpB,CAAA;AAGH,sBAAoB,4BAA4B,CAAA;AAGhD,cACQ,MAAM,WAAW,MACvB,OAAO,SAAS;AACd,OAAI,MAAM;AACR,UAAM,UAAS;AACf,uBAAkB;AAClB,SAAK,OAAM;UACN;AACL,yBAAoB;AACpB,SAAK,QAAO;;KAGhB,EAAE,WAAW,OAAO,CACtB;AAGA,wBAAsB;AACpB,wBAAoB;IACrB;;uBAIC,YAyBa,YAAA,EAzBD,MAAK,sBAAoB,EAAA;2BAwB7B,CAAA,eAvBN,mBAuBM,OAvBN,YAuBM,CApBJ,mBAmBM,OAnBN,YAmBM,CAlBJ,mBAYM,OAZN,WAYM;KAXH,IAAI,MAAA,GAAE;cACH;KAAJ,KAAI;KACJ,cAAW;KACX,cAAW;OACHA,KAAAA,QAAM;KACd,OAAM;KACN,MAAK;KACL,UAAS;SACT,YAEqB,MAAA,mBAAA,EAAA,MAAA;4BADX,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;0BAKZ,mBAE+B,OAAA;KAD7B,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,MAAI;0BApBnB,QAAA,WAAW,KAAI,CAAA,CAAA,CAAA,CAAA"}

package/dist/v2/components/modals/index.d.ts

@@ -1,2 +1,2 @@
-export { default as DeleteModal } from './DeleteModal.vue';
+export { default as DeleteModal } from './DeleteModal.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/modals/index.js

@@ -1,38 +1,2 @@
-import { t as ConfirmationForm_default } from "../../../forms-CZX6cFDS.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
-import { truncate } from "@scalar/helpers/string/truncate";
-//#region src/v2/components/modals/DeleteModal.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "text-c-2 text-sm leading-normal text-pretty"
-};
-//#endregion
-//#region src/v2/components/modals/DeleteModal.vue
-var DeleteModal_default = /* @__PURE__ */ defineComponent({
-	__name: "DeleteModal",
-	props: {
-		name: {},
-		warningMessage: {}
-	},
-	emits: ["close", "delete"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		/** Condenses the name to 18 characters and adds an ellipsis if it's longer */
-		const truncatedName = computed(() => truncate(__props.name));
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ConfirmationForm_default), {
-				label: `Delete ${truncatedName.value}`,
-				variant: "danger",
-				onCancel: _cache[0] || (_cache[0] = ($event) => emit("close")),
-				onSubmit: _cache[1] || (_cache[1] = ($event) => emit("delete"))
-			}, {
-				default: withCtx(() => [__props.warningMessage ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(__props.warningMessage), 1)) : createCommentVNode("", true)]),
-				_: 1
-			}, 8, ["label"]);
-		};
-	}
-});
-//#endregion
+import DeleteModal_default from "./DeleteModal.vue.js";
 export { DeleteModal_default as DeleteModal };
-
-//# sourceMappingURL=index.js.map

package/dist/v2/components/resize/Resize.vue.js

@@ -0,0 +1,10 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import Resize_vue_vue_type_script_setup_true_lang_default from "./Resize.vue.script.js";
+/* empty css                     */
+/* empty css                       */
+//#region src/v2/components/resize/Resize.vue
+var Resize_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Resize_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e2c54c18"]]);
+//#endregion
+export { Resize_default as default };
+
+//# sourceMappingURL=Resize.vue.js.map

package/dist/v2/components/resize/Resize.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resize.vue.js","names":[],"sources":["../../../../src/v2/components/resize/Resize.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref } from 'vue'\n\nconst { width } = defineProps<{\n  /** Provided resizable child width */\n  width: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:width', value: number): void\n}>()\n\ndefineSlots<{\n  default?(): unknown\n}>()\n\nconst isDragging = ref(false)\n\nconst draggingClassName = 'scalar-dragging'\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n\n  /** Current sidebar width when dragging starts */\n  const startWidth = width\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add(draggingClassName)\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    emit('update:width', newWidth)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove(draggingClassName)\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (width > 420) {\n      emit('update:width', 360)\n    } else if (width < 240) {\n      emit('update:width', 240)\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <div\n    class=\"relative\"\n    :style=\"{\n      width: `${width}px`,\n    }\">\n    <slot name=\"default\" />\n    <div\n      class=\"resizer\"\n      @mousedown=\"startDrag\" />\n  </div>\n</template>\n<style scoped>\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n  z-index: 100;\n}\n</style>\n<style>\n.scalar-dragging {\n  cursor: col-resize;\n}\n\n.resizer:hover,\n.scalar-dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n\n.scalar-dragging::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n</style>\n"],"mappings":""}

package/dist/v2/components/resize/Resize.vue.script.js

@@ -0,0 +1,52 @@
+import { createElementBlock, createElementVNode, defineComponent, normalizeStyle, openBlock, ref, renderSlot } from "vue";
+//#region src/v2/components/resize/Resize.vue?vue&type=script&setup=true&lang.ts
+var draggingClassName = "scalar-dragging";
+var Resize_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Resize",
+	props: { width: {} },
+	emits: ["update:width"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const isDragging = ref(false);
+		const startDrag = (event) => {
+			event.preventDefault();
+			const startX = event.clientX;
+			/** Current sidebar width when dragging starts */
+			const startWidth = __props.width;
+			const doDrag = (dragEvent) => {
+				isDragging.value = true;
+				document.body.classList.add(draggingClassName);
+				let newWidth = startWidth + dragEvent.clientX - startX;
+				if (newWidth > 420)
+ /** Elastic effect */
+				newWidth = 420 + (newWidth - 420) * .2;
+				if (newWidth < 240) newWidth = 240;
+				emit("update:width", newWidth);
+			};
+			const stopDrag = () => {
+				isDragging.value = false;
+				document.body.classList.remove(draggingClassName);
+				document.documentElement.removeEventListener("mousemove", doDrag, false);
+				document.documentElement.removeEventListener("mouseup", stopDrag, false);
+				/** Reset to max width if exceeded */
+				if (__props.width > 420) emit("update:width", 360);
+				else if (__props.width < 240) emit("update:width", 240);
+			};
+			document.documentElement.addEventListener("mousemove", doDrag, false);
+			document.documentElement.addEventListener("mouseup", stopDrag, false);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "relative",
+				style: normalizeStyle({ width: `${__props.width}px` })
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true), createElementVNode("div", {
+				class: "resizer",
+				onMousedown: startDrag
+			}, null, 32)], 4);
+		};
+	}
+});
+//#endregion
+export { Resize_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Resize.vue.script.js.map

package/dist/v2/components/resize/Resize.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resize.vue.script.js","names":[],"sources":["../../../../src/v2/components/resize/Resize.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref } from 'vue'\n\nconst { width } = defineProps<{\n  /** Provided resizable child width */\n  width: number\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:width', value: number): void\n}>()\n\ndefineSlots<{\n  default?(): unknown\n}>()\n\nconst isDragging = ref(false)\n\nconst draggingClassName = 'scalar-dragging'\n\nconst startDrag = (event: MouseEvent) => {\n  event.preventDefault()\n\n  const startX = event.clientX\n\n  /** Current sidebar width when dragging starts */\n  const startWidth = width\n\n  const doDrag = (dragEvent: MouseEvent) => {\n    isDragging.value = true\n    document.body.classList.add(draggingClassName)\n    let newWidth = startWidth + dragEvent.clientX - startX\n    if (newWidth > 420) {\n      /** Elastic effect */\n      newWidth = 420 + (newWidth - 420) * 0.2\n    }\n    if (newWidth < 240) {\n      newWidth = 240\n    }\n    emit('update:width', newWidth)\n  }\n\n  const stopDrag = () => {\n    isDragging.value = false\n    document.body.classList.remove(draggingClassName)\n    document.documentElement.removeEventListener('mousemove', doDrag, false)\n    document.documentElement.removeEventListener('mouseup', stopDrag, false)\n    /** Reset to max width if exceeded */\n    if (width > 420) {\n      emit('update:width', 360)\n    } else if (width < 240) {\n      emit('update:width', 240)\n    }\n  }\n\n  document.documentElement.addEventListener('mousemove', doDrag, false)\n  document.documentElement.addEventListener('mouseup', stopDrag, false)\n}\n</script>\n<template>\n  <div\n    class=\"relative\"\n    :style=\"{\n      width: `${width}px`,\n    }\">\n    <slot name=\"default\" />\n    <div\n      class=\"resizer\"\n      @mousedown=\"startDrag\" />\n  </div>\n</template>\n<style scoped>\n.resizer {\n  width: 5px;\n  cursor: col-resize;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-right: 2px solid transparent;\n  transition: border-right-color 0.3s;\n  z-index: 100;\n}\n</style>\n<style>\n.scalar-dragging {\n  cursor: col-resize;\n}\n\n.resizer:hover,\n.scalar-dragging .resizer {\n  border-right-color: var(--scalar-background-3);\n}\n\n.scalar-dragging::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n</style>\n"],"mappings":";;AAkBA,IAAM,oBAAoB;;;;;;EAV1B,MAAM,OAAO;EAQb,MAAM,aAAa,IAAI,MAAK;EAI5B,MAAM,aAAa,UAAsB;AACvC,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;;GAGrB,MAAM,aAAa,QAAA;GAEnB,MAAM,UAAU,cAA0B;AACxC,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,IAAI,kBAAiB;IAC7C,IAAI,WAAW,aAAa,UAAU,UAAU;AAChD,QAAI,WAAW;;AAEb,eAAW,OAAO,WAAW,OAAO;AAEtC,QAAI,WAAW,IACb,YAAW;AAEb,SAAK,gBAAgB,SAAQ;;GAG/B,MAAM,iBAAiB;AACrB,eAAW,QAAQ;AACnB,aAAS,KAAK,UAAU,OAAO,kBAAiB;AAChD,aAAS,gBAAgB,oBAAoB,aAAa,QAAQ,MAAK;AACvE,aAAS,gBAAgB,oBAAoB,WAAW,UAAU,MAAK;;AAEvE,QAAI,QAAA,QAAQ,IACV,MAAK,gBAAgB,IAAG;aACf,QAAA,QAAQ,IACjB,MAAK,gBAAgB,IAAG;;AAI5B,YAAS,gBAAgB,iBAAiB,aAAa,QAAQ,MAAK;AACpE,YAAS,gBAAgB,iBAAiB,WAAW,UAAU,MAAK;;;uBAIpE,mBASM,OAAA;IARJ,OAAM;IACL,OAAK,eAAA,EAAA,OAAA,GAAoB,QAAA,MAAK,KAAA,CAAA;OAG/B,WAAuB,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,EACvB,mBAE2B,OAAA;IADzB,OAAM;IACL,aAAW"}

package/dist/v2/components/resize/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Resize } from './Resize.vue';
-export { useSplitResize } from './use-split-resize';
+export { default as Resize } from './Resize.vue.js';
+export { useSplitResize } from './use-split-resize.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/resize/index.js

@@ -1,2 +1,3 @@
-import { n as Resize_default, t as useSplitResize } from "../../../resize-D2IYvVdh.js";
+import Resize_default from "./Resize.vue.js";
+import { useSplitResize } from "./use-split-resize.js";
 export { Resize_default as Resize, useSplitResize };

package/dist/v2/components/resize/use-split-resize.js

@@ -0,0 +1,62 @@
+//#region src/v2/components/resize/use-split-resize.ts
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* Shared pointer-based resize logic for split layouts with percentage sizes.
+* Use when you have both a horizontal split (e.g. left/right) and a vertical split (e.g. top/bottom).
+* Only one resize is active at a time; starting another stops the previous.
+*/
+function useSplitResize(options) {
+	const { horizontalContainerRef, verticalContainerRef, leftPaneSize, topPaneSize, horizontalMin = 20, horizontalMax = 80, verticalMin = 25, verticalMax = 75 } = options;
+	let activeResizeCleanup;
+	const stopActiveResize = () => {
+		activeResizeCleanup?.();
+		activeResizeCleanup = void 0;
+	};
+	const startResize = (event, onMove, cursor) => {
+		event.preventDefault();
+		stopActiveResize();
+		const previousUserSelect = document.body.style.userSelect;
+		const previousCursor = document.body.style.cursor;
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = cursor;
+		const handleMove = (moveEvent) => {
+			onMove(moveEvent);
+		};
+		const handleUp = () => {
+			stopActiveResize();
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", handleUp, { once: true });
+		activeResizeCleanup = () => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+			document.body.style.userSelect = previousUserSelect;
+			document.body.style.cursor = previousCursor;
+		};
+	};
+	const onHorizontalResizeStart = (event) => {
+		const el = horizontalContainerRef.value;
+		if (!el) return;
+		startResize(event, (moveEvent) => {
+			const rect = el.getBoundingClientRect();
+			leftPaneSize.value = clamp((moveEvent.clientX - rect.left) / rect.width * 100, horizontalMin, horizontalMax);
+		}, "col-resize");
+	};
+	const onVerticalResizeStart = (event) => {
+		const el = verticalContainerRef.value;
+		if (!el) return;
+		startResize(event, (moveEvent) => {
+			const rect = el.getBoundingClientRect();
+			topPaneSize.value = clamp((moveEvent.clientY - rect.top) / rect.height * 100, verticalMin, verticalMax);
+		}, "row-resize");
+	};
+	return {
+		onHorizontalResizeStart,
+		onVerticalResizeStart,
+		stopActiveResize
+	};
+}
+//#endregion
+export { useSplitResize };
+
+//# sourceMappingURL=use-split-resize.js.map

package/dist/v2/components/resize/use-split-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-split-resize.js","names":[],"sources":["../../../../src/v2/components/resize/use-split-resize.ts"],"sourcesContent":["import type { Ref } from 'vue'\n\nconst clamp = (value: number, min: number, max: number): number => Math.min(max, Math.max(min, value))\n\ntype UseSplitResizeOptions = {\n  /** Ref to the container used for horizontal resize (width + clientX). */\n  horizontalContainerRef: Ref<HTMLElement | undefined>\n  /** Ref to the container used for vertical resize (height + clientY). */\n  verticalContainerRef: Ref<HTMLElement | undefined>\n  /** Ref for the left (or first) pane width in percent (0–100). */\n  leftPaneSize: Ref<number>\n  /** Ref for the top pane height in percent (0–100). */\n  topPaneSize: Ref<number>\n  horizontalMin?: number\n  horizontalMax?: number\n  verticalMin?: number\n  verticalMax?: number\n}\n\n/**\n * Shared pointer-based resize logic for split layouts with percentage sizes.\n * Use when you have both a horizontal split (e.g. left/right) and a vertical split (e.g. top/bottom).\n * Only one resize is active at a time; starting another stops the previous.\n */\nexport function useSplitResize(options: UseSplitResizeOptions): {\n  onHorizontalResizeStart: (event: PointerEvent) => void\n  onVerticalResizeStart: (event: PointerEvent) => void\n  stopActiveResize: () => void\n} {\n  const {\n    horizontalContainerRef,\n    verticalContainerRef,\n    leftPaneSize,\n    topPaneSize,\n    horizontalMin = 20,\n    horizontalMax = 80,\n    verticalMin = 25,\n    verticalMax = 75,\n  } = options\n\n  let activeResizeCleanup: (() => void) | undefined\n\n  const stopActiveResize = (): void => {\n    activeResizeCleanup?.()\n    activeResizeCleanup = undefined\n  }\n\n  const startResize = (event: PointerEvent, onMove: (event: PointerEvent) => void, cursor: string): void => {\n    event.preventDefault()\n    stopActiveResize()\n\n    const previousUserSelect = document.body.style.userSelect\n    const previousCursor = document.body.style.cursor\n    document.body.style.userSelect = 'none'\n    document.body.style.cursor = cursor\n\n    const handleMove = (moveEvent: PointerEvent): void => {\n      onMove(moveEvent)\n    }\n\n    const handleUp = (): void => {\n      stopActiveResize()\n    }\n\n    window.addEventListener('pointermove', handleMove)\n    window.addEventListener('pointerup', handleUp, { once: true })\n\n    activeResizeCleanup = () => {\n      window.removeEventListener('pointermove', handleMove)\n      window.removeEventListener('pointerup', handleUp)\n      document.body.style.userSelect = previousUserSelect\n      document.body.style.cursor = previousCursor\n    }\n  }\n\n  const onHorizontalResizeStart = (event: PointerEvent): void => {\n    const el = horizontalContainerRef.value\n    if (!el) {\n      return\n    }\n    startResize(\n      event,\n      (moveEvent) => {\n        const rect = el.getBoundingClientRect()\n        const ratio = ((moveEvent.clientX - rect.left) / rect.width) * 100\n        leftPaneSize.value = clamp(ratio, horizontalMin, horizontalMax)\n      },\n      'col-resize',\n    )\n  }\n\n  const onVerticalResizeStart = (event: PointerEvent): void => {\n    const el = verticalContainerRef.value\n    if (!el) {\n      return\n    }\n    startResize(\n      event,\n      (moveEvent) => {\n        const rect = el.getBoundingClientRect()\n        const ratio = ((moveEvent.clientY - rect.top) / rect.height) * 100\n        topPaneSize.value = clamp(ratio, verticalMin, verticalMax)\n      },\n      'row-resize',\n    )\n  }\n\n  return {\n    onHorizontalResizeStart,\n    onVerticalResizeStart,\n    stopActiveResize,\n  }\n}\n"],"mappings":";AAEA,IAAM,SAAS,OAAe,KAAa,QAAwB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,CAAC;;;;;;AAsBtG,SAAgB,eAAe,SAI7B;CACA,MAAM,EACJ,wBACA,sBACA,cACA,aACA,gBAAgB,IAChB,gBAAgB,IAChB,cAAc,IACd,cAAc,OACZ;CAEJ,IAAI;CAEJ,MAAM,yBAA+B;AACnC,yBAAuB;AACvB,wBAAsB,KAAA;;CAGxB,MAAM,eAAe,OAAqB,QAAuC,WAAyB;AACxG,QAAM,gBAAgB;AACtB,oBAAkB;EAElB,MAAM,qBAAqB,SAAS,KAAK,MAAM;EAC/C,MAAM,iBAAiB,SAAS,KAAK,MAAM;AAC3C,WAAS,KAAK,MAAM,aAAa;AACjC,WAAS,KAAK,MAAM,SAAS;EAE7B,MAAM,cAAc,cAAkC;AACpD,UAAO,UAAU;;EAGnB,MAAM,iBAAuB;AAC3B,qBAAkB;;AAGpB,SAAO,iBAAiB,eAAe,WAAW;AAClD,SAAO,iBAAiB,aAAa,UAAU,EAAE,MAAM,MAAM,CAAC;AAE9D,8BAA4B;AAC1B,UAAO,oBAAoB,eAAe,WAAW;AACrD,UAAO,oBAAoB,aAAa,SAAS;AACjD,YAAS,KAAK,MAAM,aAAa;AACjC,YAAS,KAAK,MAAM,SAAS;;;CAIjC,MAAM,2BAA2B,UAA8B;EAC7D,MAAM,KAAK,uBAAuB;AAClC,MAAI,CAAC,GACH;AAEF,cACE,QACC,cAAc;GACb,MAAM,OAAO,GAAG,uBAAuB;AAEvC,gBAAa,QAAQ,OADL,UAAU,UAAU,KAAK,QAAQ,KAAK,QAAS,KAC7B,eAAe,cAAc;KAEjE,aACD;;CAGH,MAAM,yBAAyB,UAA8B;EAC3D,MAAM,KAAK,qBAAqB;AAChC,MAAI,CAAC,GACH;AAEF,cACE,QACC,cAAc;GACb,MAAM,OAAO,GAAG,uBAAuB;AAEvC,eAAY,QAAQ,OADJ,UAAU,UAAU,KAAK,OAAO,KAAK,SAAU,KAC9B,aAAa,YAAY;KAE5D,aACD;;AAGH,QAAO;EACL;EACA;EACA;EACD"}

package/dist/v2/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/v2/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/v2/components/server/ServerDropdown.vue.js.map

@@ -0,0 +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":""}

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

@@ -0,0 +1,95 @@
+import ValueEmitter_default from "../layout/ValueEmitter.vue.js";
+import ServerDropdownItem_default from "./ServerDropdownItem.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarFloatingBackdrop, ScalarPopover } from "@scalar/components";
+import { ScalarIconPencilSimple, ScalarIconPlus } from "@scalar/icons";
+//#region src/v2/components/server/ServerDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = { class: "flex items-center justify-center" };
+var ServerDropdown_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ServerDropdown",
+	props: {
+		meta: {},
+		servers: {},
+		server: {},
+		target: {},
+		layout: {}
+	},
+	emits: [
+		"update:selectedServer",
+		"update:variable",
+		"update:servers",
+		"update:open"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const requestServerOptions = computed(() => __props.servers.map((s) => ({
+			id: s.url,
+			label: s.url ?? "Unknown server"
+		})));
+		const serverUrlWithoutTrailingSlash = computed(() => {
+			if (__props.server?.url?.endsWith("/")) return __props.server.url.slice(0, -1);
+			return __props.server?.url || "";
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarPopover), {
+				class: "max-h-[inherit] p-0 text-base",
+				focus: "",
+				offset: 0,
+				placement: "bottom",
+				resize: "",
+				target: __props.target,
+				teleport: `#${__props.target}`
+			}, {
+				popover: withCtx(({ close }) => [createElementVNode("div", {
+					class: "custom-scroll flex max-h-[inherit] flex-col gap-1 p-1",
+					onClick: close
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(requestServerOptions.value, (serverOption, index) => {
+					return openBlock(), createBlock(ServerDropdownItem_default, {
+						key: serverOption.id,
+						server: __props.server,
+						serverOption,
+						type: "request",
+						"onUpdate:selectedServer": ($event) => emit("update:selectedServer", {
+							url: serverOption.id,
+							meta: __props.meta
+						}),
+						"onUpdate:variable": (key, value) => emit("update:variable", {
+							index,
+							key,
+							value,
+							meta: __props.meta
+						})
+					}, null, 8, [
+						"server",
+						"serverOption",
+						"onUpdate:selectedServer",
+						"onUpdate:variable"
+					]);
+				}), 128)), __props.layout !== "modal" ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75",
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("update:servers"))
+				}, [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarIconPencilSimple), { class: "size-4" })]), _cache[5] || (_cache[5] = createElementVNode("span", null, "Update Servers", -1))])) : createCommentVNode("", true)], 8, _hoisted_1)]),
+				backdrop: withCtx(({ open }) => [createVNode(ValueEmitter_default, {
+					value: open,
+					onChange: _cache[1] || (_cache[1] = (value) => emit("update:open", value)),
+					onUnmount: _cache[2] || (_cache[2] = ($event) => emit("update:open", false))
+				}, null, 8, ["value"]), createVNode(unref(ScalarFloatingBackdrop), { class: "inset-x-px rounded-none rounded-b-lg" })]),
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					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",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [__props.server ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "sr-only" }, "Server:", -1)), createTextVNode(" " + toDisplayString(serverUrlWithoutTrailingSlash.value), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[4] || (_cache[4] = createElementVNode("span", { class: "sr-only" }, "Add Server", -1)), createVNode(unref(ScalarIconPlus), { class: "size-3" })], 64))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["target", "teleport"]);
+		};
+	}
+});
+//#endregion
+export { ServerDropdown_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ServerDropdown.vue.script.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ServerDropdownItem.vue.js","names":[],"sources":["../../../../src/v2/components/server/ServerDropdownItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarListboxCheckbox, ScalarMarkdown } from '@scalar/components'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport ServerVariablesForm from '@/components/Server/ServerVariablesForm.vue'\n\nconst { server, serverOption } = defineProps<{\n  server: ServerObject | null\n  serverOption: {\n    id: string\n    label: string\n  }\n}>()\n\nconst emit = defineEmits<{\n  /** Update a server variable for the selected server */\n  (e: 'update:variable', key: string, value: string): void\n  /** Update selected server */\n  (e: 'update:selectedServer'): void\n}>()\n\nconst formId = useId()\n\nconst hasVariables = () => {\n  return Object.keys(server?.variables ?? {}).length > 0\n}\n\nconst isSelectedServer = computed(() => serverOption.id === server?.url)\nconst isExpanded = computed(() => isSelectedServer.value && hasVariables())\n</script>\n<template>\n  <div\n    class=\"group/item flex min-h-fit flex-col rounded border\"\n    :class=\"{ 'border-transparent': !isSelectedServer }\">\n    <button\n      v-bind=\"isExpanded ? { 'aria-controls': formId } : {}\"\n      :aria-expanded=\"isExpanded\"\n      class=\"flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5\"\n      :class=\"isSelectedServer ? 'text-c-1 bg-b-2' : 'hover:bg-b-2'\"\n      type=\"button\"\n      @click=\"emit('update:selectedServer')\">\n      <ScalarListboxCheckbox :selected=\"isSelectedServer\" />\n      <span class=\"overflow-hidden text-ellipsis whitespace-nowrap\">\n        {{ serverOption.label }}\n      </span>\n    </button>\n    <!-- Server variables -->\n    <div\n      v-if=\"isExpanded\"\n      :id=\"formId\"\n      class=\"bg-b-2 divide divide-y rounded-b border-t *:pl-4\"\n      @click.stop>\n      <ServerVariablesForm\n        :variables=\"server?.variables\"\n        @update:variable=\"\n          (key, value) => emit('update:variable', key, value)\n        \" />\n      <!-- Description -->\n      <div v-if=\"server?.description\">\n        <div class=\"description text-c-3 px-3 py-1.5\">\n          <ScalarMarkdown :value=\"server.description\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.description :deep(.markdown) {\n  font-weight: var(--scalar-semibold);\n  color: var(--scalar-color--1);\n  padding: 0 0;\n  display: block;\n}\n.description :deep(.markdown > *:first-child) {\n  margin-top: 0;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,46 @@
+import ServerVariablesForm_default from "../../../components/Server/ServerVariablesForm.vue.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, toDisplayString, unref, useId, withModifiers } from "vue";
+import { ScalarListboxCheckbox, ScalarMarkdown } from "@scalar/components";
+//#region src/v2/components/server/ServerDropdownItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-expanded"];
+var _hoisted_2 = { class: "overflow-hidden text-ellipsis whitespace-nowrap" };
+var _hoisted_3 = ["id"];
+var _hoisted_4 = { key: 0 };
+var _hoisted_5 = { class: "description text-c-3 px-3 py-1.5" };
+var ServerDropdownItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ServerDropdownItem",
+	props: {
+		server: {},
+		serverOption: {}
+	},
+	emits: ["update:variable", "update:selectedServer"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const formId = useId();
+		const hasVariables = () => {
+			return Object.keys(__props.server?.variables ?? {}).length > 0;
+		};
+		const isSelectedServer = computed(() => __props.serverOption.id === __props.server?.url);
+		const isExpanded = computed(() => isSelectedServer.value && hasVariables());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["group/item flex min-h-fit flex-col rounded border", { "border-transparent": !isSelectedServer.value }]) }, [createElementVNode("button", mergeProps(isExpanded.value ? { "aria-controls": unref(formId) } : {}, {
+				"aria-expanded": isExpanded.value,
+				class: ["flex min-h-8 cursor-pointer items-center gap-1.5 rounded px-1.5", isSelectedServer.value ? "text-c-1 bg-b-2" : "hover:bg-b-2"],
+				type: "button",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("update:selectedServer"))
+			}), [createVNode(unref(ScalarListboxCheckbox), { selected: isSelectedServer.value }, null, 8, ["selected"]), createElementVNode("span", _hoisted_2, toDisplayString(__props.serverOption.label), 1)], 16, _hoisted_1), isExpanded.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(formId),
+				class: "bg-b-2 divide divide-y rounded-b border-t *:pl-4",
+				onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+			}, [createVNode(ServerVariablesForm_default, {
+				variables: __props.server?.variables,
+				"onUpdate:variable": _cache[1] || (_cache[1] = (key, value) => emit("update:variable", key, value))
+			}, null, 8, ["variables"]), __props.server?.description ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(ScalarMarkdown), { value: __props.server.description }, null, 8, ["value"])])])) : createCommentVNode("", true)], 8, _hoisted_3)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { ServerDropdownItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ServerDropdownItem.vue.script.js.map

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

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

package/dist/v2/components/server/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ServerDropdown } from './ServerDropdown.vue';
+export { default as ServerDropdown } from './ServerDropdown.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/server/index.js

@@ -1,2 +1,2 @@
-import { t as ServerDropdown_default } from "../../../server-tcI-OCyx.js";
+import ServerDropdown_default from "./ServerDropdown.vue.js";
 export { ServerDropdown_default as ServerDropdown };

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

@@ -0,0 +1,7 @@
+import Sidebar_vue_vue_type_script_setup_true_lang_default from "./Sidebar.vue.script.js";
+//#region src/v2/components/sidebar/Sidebar.vue
+var Sidebar_default = Sidebar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Sidebar_default as default };
+
+//# sourceMappingURL=Sidebar.vue.js.map

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

@@ -0,0 +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        @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 #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":""}