@scalar/api-client 2.38.1 → 2.38.3

package/dist/SidebarListElement-BfTPiihc.js

@@ -0,0 +1,232 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { t as DeleteSidebarListElement_default } from "./DeleteSidebarListElement-C-p87d03.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { ScalarIcon, ScalarModal, useModal } from "@scalar/components";
+import { useRouter } from "vue-router";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+import { Draggable } from "@scalar/draggable";
+//#region src/components/Sidebar/SidebarList.vue
+var _sfc_main = {};
+var _hoisted_1$2 = { class: "gap-1/2 flex flex-col px-3 pb-[75px]" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("ul", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")]);
+}
+var SidebarList_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+//#region src/components/Sidebar/SidebarListElementActions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "absolute right-1 flex opacity-0 group-hover:opacity-100" };
+var ModalAction = /* @__PURE__ */ function(ModalAction) {
+	ModalAction["Delete"] = "Delete";
+	ModalAction["None"] = "None";
+	return ModalAction;
+}(ModalAction || {});
+//#endregion
+//#region src/components/Sidebar/SidebarListElementActions.vue
+var SidebarListElementActions_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarListElementActions",
+	props: {
+		variable: {},
+		warningMessage: {},
+		isCopyable: { type: Boolean },
+		isDeletable: { type: Boolean },
+		isRenameable: { type: Boolean }
+	},
+	emits: ["delete", "rename"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const currentAction = ref({
+			action: ModalAction.None,
+			name: ""
+		});
+		const modalState = useModal();
+		const { copyToClipboard } = useClipboard();
+		function startActionFlow(action) {
+			currentAction.value = {
+				action,
+				name: __props.variable.name
+			};
+			modalState.show();
+		}
+		function handleModalClose() {
+			modalState.hide();
+			currentAction.value = {
+				action: ModalAction.None,
+				name: ""
+			};
+		}
+		function handleDelete(id) {
+			emit("delete", id);
+			handleModalClose();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1$1, [
+				__props.isCopyable ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]",
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(copyToClipboard)(__props.variable.name))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3 w-3",
+					icon: "Clipboard"
+				})])) : createCommentVNode("", true),
+				__props.isRenameable ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]",
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("rename", __props.variable.uid))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3 w-3",
+					icon: "Edit"
+				})])) : createCommentVNode("", true),
+				!__props.variable.isDefault && __props.isDeletable ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1",
+					type: "button",
+					onClick: _cache[2] || (_cache[2] = withModifiers(($event) => startActionFlow(ModalAction.Delete), ["prevent"]))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3.5 w-3.5",
+					icon: "Close"
+				})])) : createCommentVNode("", true)
+			]), createVNode(unref(ScalarModal), {
+				size: "sm",
+				state: unref(modalState),
+				title: `${currentAction.value.action} ${currentAction.value.name}`
+			}, {
+				default: withCtx(() => [currentAction.value.action === ModalAction.Delete ? (openBlock(), createBlock(DeleteSidebarListElement_default, {
+					key: 0,
+					variableName: currentAction.value.name,
+					warningMessage: __props.warningMessage,
+					onClose: handleModalClose,
+					onDelete: _cache[3] || (_cache[3] = ($event) => handleDelete(__props.variable.uid))
+				}, null, 8, ["variableName", "warningMessage"])) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["state", "title"])], 64);
+		};
+	}
+});
+//#endregion
+//#region src/components/Sidebar/SidebarListElement.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5" };
+//#endregion
+//#region src/components/Sidebar/SidebarListElement.vue
+var SidebarListElement_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SidebarListElement",
+	props: {
+		variable: {},
+		warningMessage: {},
+		to: {},
+		isDeletable: { type: Boolean },
+		isCopyable: { type: Boolean },
+		isRenameable: { type: Boolean },
+		isDraggable: {
+			type: Boolean,
+			default: false
+		},
+		isDroppable: {
+			type: [Boolean, Function],
+			default: false
+		},
+		collectionId: {}
+	},
+	emits: [
+		"delete",
+		"colorModal",
+		"rename",
+		"onDragEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const router = useRouter();
+		const handleNavigation = (event) => {
+			if (event.metaKey) window.open(router.resolve(__props.to).href, "_blank");
+			else router.push(__props.to);
+		};
+		const handleDelete = (id) => {
+			emit("delete", id);
+		};
+		const handleColorClick = (uid) => {
+			emit("colorModal", uid);
+		};
+		const handleRename = (id) => {
+			emit("rename", id);
+		};
+		/** The draggable component (bound in template via ref="_draggableRef") */
+		const _draggableRef = ref(null);
+		/** Calculate offsets for drag and drop */
+		const getDraggableOffsets = computed(() => ({
+			ceiling: .5,
+			floor: .5
+		}));
+		return (_ctx, _cache) => {
+			const _component_router_link = resolveComponent("router-link");
+			return openBlock(), createElementBlock("li", null, [createVNode(unref(Draggable), {
+				id: __props.variable.uid,
+				ref_key: "_draggableRef",
+				ref: _draggableRef,
+				ceiling: getDraggableOffsets.value.ceiling,
+				floor: getDraggableOffsets.value.floor,
+				isDraggable: __props.isDraggable,
+				isDroppable: __props.isDroppable,
+				parentIds: __props.collectionId ? [__props.collectionId] : [],
+				onOnDragEnd: _cache[2] || (_cache[2] = (...args) => _ctx.$emit("onDragEnd", ...args))
+			}, {
+				default: withCtx(() => [createVNode(_component_router_link, {
+					class: normalizeClass(["text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline", [__props.variable.color ? "pl-5" : "pl-1.5"]]),
+					exactActiveClass: "bg-b-2 !text-c-1",
+					role: "button",
+					to: __props.to,
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => handleNavigation($event), ["prevent"]))
+				}, {
+					default: withCtx(() => [
+						__props.variable.color ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							class: "hover:bg-b-3 rounded p-1.5",
+							type: "button",
+							onClick: _cache[0] || (_cache[0] = ($event) => handleColorClick(__props.variable.uid))
+						}, [createElementVNode("div", {
+							class: "h-2.5 w-2.5 rounded-xl",
+							style: normalizeStyle({ backgroundColor: __props.variable.color })
+						}, null, 4)])) : createCommentVNode("", true),
+						__props.variable.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
+							key: 1,
+							class: "text-sidebar-c-2 size-3.5 stroke-[2.25]",
+							icon: __props.variable.icon
+						}, null, 8, ["icon"])) : createCommentVNode("", true),
+						createElementVNode("span", _hoisted_1, toDisplayString(__props.variable.name), 1),
+						createVNode(SidebarListElementActions_default, {
+							isCopyable: Boolean(__props.isCopyable),
+							isDeletable: Boolean(__props.isDeletable),
+							isRenameable: Boolean(__props.isRenameable),
+							variable: {
+								...__props.variable,
+								isDefault: __props.variable.isDefault ?? false
+							},
+							warningMessage: __props.warningMessage,
+							onDelete: handleDelete,
+							onRename: handleRename
+						}, null, 8, [
+							"isCopyable",
+							"isDeletable",
+							"isRenameable",
+							"variable",
+							"warningMessage"
+						])
+					]),
+					_: 1
+				}, 8, ["class", "to"])]),
+				_: 1
+			}, 8, [
+				"id",
+				"ceiling",
+				"floor",
+				"isDraggable",
+				"isDroppable",
+				"parentIds"
+			])]);
+		};
+	}
+}), [["__scopeId", "data-v-298ba76d"]]);
+//#endregion
+export { SidebarList_default as n, SidebarListElement_default as t };
+
+//# sourceMappingURL=SidebarListElement-BfTPiihc.js.map

package/dist/SidebarListElement-BfTPiihc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElement-BfTPiihc.js","names":["$emit"],"sources":["../src/components/Sidebar/SidebarList.vue","../src/components/Sidebar/SidebarListElementActions.vue","../src/components/Sidebar/SidebarListElementActions.vue","../src/components/Sidebar/SidebarListElement.vue","../src/components/Sidebar/SidebarListElement.vue"],"sourcesContent":["<template>\n  <ul class=\"gap-1/2 flex flex-col px-3 pb-[75px]\">\n    <slot />\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, ScalarModal, useModal } from '@scalar/components'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { ref } from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nconst { variable } = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    isDefault: boolean\n  }\n  warningMessage: string | undefined\n  isCopyable?: boolean\n  isDeletable?: boolean\n  isRenameable?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'rename', id: string): void\n}>()\n\nenum ModalAction {\n  Delete = 'Delete',\n  None = 'None',\n}\n\nconst currentAction = ref({ action: ModalAction.None, name: '' })\n\nconst modalState = useModal()\nconst { copyToClipboard } = useClipboard()\n\nfunction startActionFlow(action: ModalAction) {\n  currentAction.value = { action, name: variable.name }\n  modalState.show()\n}\n\nfunction handleModalClose() {\n  modalState.hide()\n  currentAction.value = { action: ModalAction.None, name: '' }\n}\n\nfunction handleDelete(id: string) {\n  emit('delete', id)\n  handleModalClose()\n}\n</script>\n<template>\n  <div class=\"absolute right-1 flex opacity-0 group-hover:opacity-100\">\n    <button\n      v-if=\"isCopyable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"copyToClipboard(variable.name)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Clipboard\" />\n    </button>\n    <button\n      v-if=\"isRenameable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"emit('rename', variable.uid)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Edit\" />\n    </button>\n    <button\n      v-if=\"!variable.isDefault && isDeletable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1\"\n      type=\"button\"\n      @click.prevent=\"startActionFlow(ModalAction.Delete)\">\n      <ScalarIcon\n        class=\"h-3.5 w-3.5\"\n        icon=\"Close\" />\n    </button>\n  </div>\n  <ScalarModal\n    size=\"sm\"\n    :state=\"modalState\"\n    :title=\"`${currentAction.action} ${currentAction.name}`\">\n    <DeleteSidebarListElement\n      v-if=\"currentAction.action === ModalAction.Delete\"\n      :variableName=\"currentAction.name\"\n      :warningMessage=\"warningMessage\"\n      @close=\"handleModalClose\"\n      @delete=\"handleDelete(variable.uid)\" />\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, ScalarModal, useModal } from '@scalar/components'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { ref } from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nconst { variable } = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    isDefault: boolean\n  }\n  warningMessage: string | undefined\n  isCopyable?: boolean\n  isDeletable?: boolean\n  isRenameable?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'rename', id: string): void\n}>()\n\nenum ModalAction {\n  Delete = 'Delete',\n  None = 'None',\n}\n\nconst currentAction = ref({ action: ModalAction.None, name: '' })\n\nconst modalState = useModal()\nconst { copyToClipboard } = useClipboard()\n\nfunction startActionFlow(action: ModalAction) {\n  currentAction.value = { action, name: variable.name }\n  modalState.show()\n}\n\nfunction handleModalClose() {\n  modalState.hide()\n  currentAction.value = { action: ModalAction.None, name: '' }\n}\n\nfunction handleDelete(id: string) {\n  emit('delete', id)\n  handleModalClose()\n}\n</script>\n<template>\n  <div class=\"absolute right-1 flex opacity-0 group-hover:opacity-100\">\n    <button\n      v-if=\"isCopyable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"copyToClipboard(variable.name)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Clipboard\" />\n    </button>\n    <button\n      v-if=\"isRenameable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"emit('rename', variable.uid)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Edit\" />\n    </button>\n    <button\n      v-if=\"!variable.isDefault && isDeletable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1\"\n      type=\"button\"\n      @click.prevent=\"startActionFlow(ModalAction.Delete)\">\n      <ScalarIcon\n        class=\"h-3.5 w-3.5\"\n        icon=\"Close\" />\n    </button>\n  </div>\n  <ScalarModal\n    size=\"sm\"\n    :state=\"modalState\"\n    :title=\"`${currentAction.action} ${currentAction.name}`\">\n    <DeleteSidebarListElement\n      v-if=\"currentAction.action === ModalAction.Delete\"\n      :variableName=\"currentAction.name\"\n      :warningMessage=\"warningMessage\"\n      @close=\"handleModalClose\"\n      @delete=\"handleDelete(variable.uid)\" />\n  </ScalarModal>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport {\n  Draggable,\n  type DraggableProps,\n  type DraggingItem,\n  type HoveredItem,\n} from '@scalar/draggable'\nimport { computed, ref } from 'vue'\nimport { useRouter, type RouteLocationRaw } from 'vue-router'\n\nimport SidebarListElementActions from '@/components/Sidebar/SidebarListElementActions.vue'\n\nconst {\n  isDraggable = false,\n  isDroppable = false,\n  to,\n} = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    color?: string\n    icon?: Icon\n    isDefault?: boolean\n  }\n  warningMessage?: string\n  to: RouteLocationRaw\n  isDeletable?: boolean\n  isCopyable?: boolean\n  isRenameable?: boolean\n  /**\n   * Toggle dragging on and off\n   *\n   * @default false\n   */\n  isDraggable?: boolean\n  /**\n   * Prevents items from being hovered and dropped into\n   *\n   * @default false\n   */\n  isDroppable?: DraggableProps['isDroppable']\n  collectionId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'colorModal', id: string): void\n  (e: 'rename', id: string): void\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n}>()\n\nconst router = useRouter()\n\nconst handleNavigation = (event: MouseEvent) => {\n  if (event.metaKey) {\n    window.open(router.resolve(to).href, '_blank')\n  } else {\n    router.push(to)\n  }\n}\n\nconst handleDelete = (id: string) => {\n  emit('delete', id)\n}\n\nconst handleColorClick = (uid: string) => {\n  emit('colorModal', uid)\n}\n\nconst handleRename = (id: string) => {\n  emit('rename', id)\n}\n\n/** The draggable component (bound in template via ref=\"_draggableRef\") */\nconst _draggableRef = ref<{\n  draggingItem: DraggingItem\n  hoveredItem: HoveredItem\n} | null>(null)\nvoid _draggableRef\n\n/** Calculate offsets for drag and drop */\nconst getDraggableOffsets = computed(() => ({\n  ceiling: 0.5,\n  floor: 0.5,\n}))\n</script>\n\n<template>\n  <li>\n    <Draggable\n      :id=\"variable.uid\"\n      ref=\"_draggableRef\"\n      :ceiling=\"getDraggableOffsets.ceiling\"\n      :floor=\"getDraggableOffsets.floor\"\n      :isDraggable=\"isDraggable\"\n      :isDroppable=\"isDroppable\"\n      :parentIds=\"collectionId ? [collectionId] : []\"\n      @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\">\n      <router-link\n        class=\"text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline\"\n        :class=\"[variable.color ? 'pl-5' : 'pl-1.5']\"\n        exactActiveClass=\"bg-b-2 !text-c-1\"\n        role=\"button\"\n        :to=\"to\"\n        @click.prevent=\"handleNavigation($event)\">\n        <button\n          v-if=\"variable.color\"\n          class=\"hover:bg-b-3 rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleColorClick(variable.uid)\">\n          <div\n            class=\"h-2.5 w-2.5 rounded-xl\"\n            :style=\"{ backgroundColor: variable.color }\"></div>\n        </button>\n        <ScalarIcon\n          v-if=\"variable.icon\"\n          class=\"text-sidebar-c-2 size-3.5 stroke-[2.25]\"\n          :icon=\"variable.icon\" />\n        <span\n          class=\"empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5\">\n          {{ variable.name }}\n        </span>\n        <SidebarListElementActions\n          :isCopyable=\"Boolean(isCopyable)\"\n          :isDeletable=\"Boolean(isDeletable)\"\n          :isRenameable=\"Boolean(isRenameable)\"\n          :variable=\"{ ...variable, isDefault: variable.isDefault ?? false }\"\n          :warningMessage=\"warningMessage\"\n          @delete=\"handleDelete\"\n          @rename=\"handleRename\" />\n      </router-link>\n    </Draggable>\n  </li>\n</template>\n\n<style>\n@import '@scalar/draggable/style.css';\n</style>\n\n<style scoped>\n.empty-variable-name:empty:before {\n  content: 'Untitled';\n  color: var(--scalar-color-3);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarIcon, type Icon } from '@scalar/components'\nimport {\n  Draggable,\n  type DraggableProps,\n  type DraggingItem,\n  type HoveredItem,\n} from '@scalar/draggable'\nimport { computed, ref } from 'vue'\nimport { useRouter, type RouteLocationRaw } from 'vue-router'\n\nimport SidebarListElementActions from '@/components/Sidebar/SidebarListElementActions.vue'\n\nconst {\n  isDraggable = false,\n  isDroppable = false,\n  to,\n} = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    color?: string\n    icon?: Icon\n    isDefault?: boolean\n  }\n  warningMessage?: string\n  to: RouteLocationRaw\n  isDeletable?: boolean\n  isCopyable?: boolean\n  isRenameable?: boolean\n  /**\n   * Toggle dragging on and off\n   *\n   * @default false\n   */\n  isDraggable?: boolean\n  /**\n   * Prevents items from being hovered and dropped into\n   *\n   * @default false\n   */\n  isDroppable?: DraggableProps['isDroppable']\n  collectionId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'colorModal', id: string): void\n  (e: 'rename', id: string): void\n  (e: 'onDragEnd', draggingItem: DraggingItem, hoveredItem: HoveredItem): void\n}>()\n\nconst router = useRouter()\n\nconst handleNavigation = (event: MouseEvent) => {\n  if (event.metaKey) {\n    window.open(router.resolve(to).href, '_blank')\n  } else {\n    router.push(to)\n  }\n}\n\nconst handleDelete = (id: string) => {\n  emit('delete', id)\n}\n\nconst handleColorClick = (uid: string) => {\n  emit('colorModal', uid)\n}\n\nconst handleRename = (id: string) => {\n  emit('rename', id)\n}\n\n/** The draggable component (bound in template via ref=\"_draggableRef\") */\nconst _draggableRef = ref<{\n  draggingItem: DraggingItem\n  hoveredItem: HoveredItem\n} | null>(null)\nvoid _draggableRef\n\n/** Calculate offsets for drag and drop */\nconst getDraggableOffsets = computed(() => ({\n  ceiling: 0.5,\n  floor: 0.5,\n}))\n</script>\n\n<template>\n  <li>\n    <Draggable\n      :id=\"variable.uid\"\n      ref=\"_draggableRef\"\n      :ceiling=\"getDraggableOffsets.ceiling\"\n      :floor=\"getDraggableOffsets.floor\"\n      :isDraggable=\"isDraggable\"\n      :isDroppable=\"isDroppable\"\n      :parentIds=\"collectionId ? [collectionId] : []\"\n      @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\">\n      <router-link\n        class=\"text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline\"\n        :class=\"[variable.color ? 'pl-5' : 'pl-1.5']\"\n        exactActiveClass=\"bg-b-2 !text-c-1\"\n        role=\"button\"\n        :to=\"to\"\n        @click.prevent=\"handleNavigation($event)\">\n        <button\n          v-if=\"variable.color\"\n          class=\"hover:bg-b-3 rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleColorClick(variable.uid)\">\n          <div\n            class=\"h-2.5 w-2.5 rounded-xl\"\n            :style=\"{ backgroundColor: variable.color }\"></div>\n        </button>\n        <ScalarIcon\n          v-if=\"variable.icon\"\n          class=\"text-sidebar-c-2 size-3.5 stroke-[2.25]\"\n          :icon=\"variable.icon\" />\n        <span\n          class=\"empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5\">\n          {{ variable.name }}\n        </span>\n        <SidebarListElementActions\n          :isCopyable=\"Boolean(isCopyable)\"\n          :isDeletable=\"Boolean(isDeletable)\"\n          :isRenameable=\"Boolean(isRenameable)\"\n          :variable=\"{ ...variable, isDefault: variable.isDefault ?? false }\"\n          :warningMessage=\"warningMessage\"\n          @delete=\"handleDelete\"\n          @rename=\"handleRename\" />\n      </router-link>\n    </Draggable>\n  </li>\n</template>\n\n<style>\n@import '@scalar/draggable/style.css';\n</style>\n\n<style scoped>\n.empty-variable-name:empty:before {\n  content: 'Untitled';\n  color: var(--scalar-color-3);\n}\n</style>\n"],"mappings":"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"}

package/dist/TheCommandPalette-Dl9TAeke.js

@@ -0,0 +1,204 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeMount, onBeforeUnmount, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { useRouter } from "vue-router";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { ScalarIconCaretLeft, ScalarIconMagnifyingGlass } from "@scalar/icons";
+//#region src/v2/helpers/slugify.ts
+/**
+* Converts a string into a URL-friendly "slug" by
+* lowercasing and replacing whitespace with hyphens.
+*
+* Example:
+*   slugify('Hello World Example')  // returns 'hello-world-example'
+*/
+var slugify = (value) => {
+	return value.toLowerCase().replace(/\s+/g, "-");
+};
+//#endregion
+//#region src/v2/features/command-palette/TheCommandPalette.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5"
+};
+var _hoisted_2 = { class: "bg-b-2 focus-within:bg-b-1 sticky top-0 flex items-center rounded-md border border-transparent pl-2 shadow-[0_-8px_0_8px_var(--scalar-background-1),0_0_8px_8px_var(--scalar-background-1)] focus-within:border-(--scalar-background-3)" };
+var _hoisted_3 = { for: "commandmenu" };
+var _hoisted_4 = ["value", "onKeydown"];
+var _hoisted_5 = ["id", "onClick"];
+var _hoisted_6 = {
+	key: 0,
+	class: "text-c-3 p-2 pt-3 text-center text-sm"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "flex-1 p-1.5"
+};
+//#endregion
+//#region src/v2/features/command-palette/TheCommandPalette.vue
+var TheCommandPalette_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TheCommandPalette",
+	props: {
+		paletteState: {},
+		workspaceStore: {},
+		eventBus: {}
+	},
+	setup(__props) {
+		/** Starting index when no search result is selected */
+		const NO_SELECTION_INDEX = -1;
+		const router = useRouter();
+		const selectedSearchResult = ref(NO_SELECTION_INDEX);
+		const commandInputRef = ref(null);
+		/**
+		* Flattens the filtered commands into a single array for keyboard navigation.
+		* Makes it easier to track the selected index across all groups.
+		*/
+		const flattenedCommands = computed(() => __props.paletteState.filteredCommands.value.flatMap((group) => group.commands));
+		/** The currently selected command based on keyboard navigation */
+		const selectedCommand = computed(() => flattenedCommands.value[selectedSearchResult.value]);
+		/**
+		* Watch for search query changes and auto-select first result.
+		* Resets selection when query is cleared.
+		*/
+		watch(() => __props.paletteState.filterQuery.value, (newQuery) => {
+			selectedSearchResult.value = newQuery && flattenedCommands.value.length > 0 ? 0 : NO_SELECTION_INDEX;
+		});
+		/**
+		* Handle input changes in the search field.
+		* Updates the filter query and redirects to cURL import if detected.
+		*/
+		const handleInput = (value) => {
+			__props.paletteState.setFilterQuery(value);
+			if (value.trim().toLowerCase().startsWith("curl")) __props.paletteState.open("import-curl-command", { inputValue: value });
+		};
+		/**
+		* Handle arrow key navigation in the command list.
+		* Loops around to the beginning or end when reaching boundaries.
+		*/
+		const handleArrowKey = (direction, event) => {
+			if (!__props.paletteState.isOpen.value) return;
+			event.preventDefault();
+			const offset = direction === "up" ? -1 : 1;
+			const length = flattenedCommands.value.length;
+			selectedSearchResult.value = (selectedSearchResult.value + offset + length) % length;
+		};
+		/**
+		* Handle enter key to execute the selected command.
+		* Only works when a command is selected and no active command is open.
+		*/
+		const handleSelect = (event) => {
+			if (!selectedCommand.value || __props.paletteState.activeCommand.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			handleCommandClick(selectedCommand.value);
+		};
+		/**
+		* Handle command selection (via click or enter key).
+		* Routes to navigation commands or opens folder commands.
+		*/
+		const handleCommandClick = (command) => {
+			/** Navigate to route commands and close palette */
+			if ("to" in command) {
+				router.push(command.to);
+				closeHandler();
+				return;
+			}
+			__props.paletteState.open(command.id, {});
+		};
+		/**
+		* Handle back navigation from active command.
+		* Returns to the main command list and refocuses the search input.
+		*/
+		const handleBackEvent = () => {
+			__props.paletteState.reset();
+			nextTick(() => commandInputRef.value?.focus());
+		};
+		/** Handle close event from active command components */
+		const handleCloseEvent = () => {
+			__props.paletteState.close();
+		};
+		/**
+		* Close the command palette and reset state.
+		* Resets search results and closes the dialog.
+		*/
+		const closeHandler = () => {
+			__props.paletteState.close();
+			selectedSearchResult.value = NO_SELECTION_INDEX;
+		};
+		const paletteProps = computed(() => ({
+			workspaceStore: __props.workspaceStore,
+			eventBus: __props.eventBus,
+			...__props.paletteState.activeCommandProps.value
+		}));
+		const onOpen = (payload) => {
+			if (payload?.event) payload.event.preventDefault();
+			if (payload && "action" in payload) __props.paletteState.open(payload.action, payload.payload);
+			else __props.paletteState.open();
+		};
+		onBeforeMount(() => __props.eventBus.on("ui:open:command-palette", onOpen));
+		onBeforeUnmount(() => __props.eventBus.off("ui:open:command-palette", onOpen));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Dialog), {
+				open: __props.paletteState.isOpen.value,
+				onClose: closeHandler
+			}, {
+				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("div", { class: "commandmenu-overlay z-overlay" }, null, -1)), createVNode(unref(DialogPanel), { class: "commandmenu z-overlay flex flex-col" }, {
+					default: withCtx(() => [createVNode(unref(DialogTitle), { class: "sr-only" }, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("API Client Command Menu", -1)])]),
+						_: 1
+					}), !__props.paletteState.activeCommand.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+						createElementVNode("div", _hoisted_2, [createElementVNode("label", _hoisted_3, [createVNode(unref(ScalarIconMagnifyingGlass), {
+							class: "text-c-2 mr-2.5",
+							size: "md",
+							thickness: "1.5"
+						})]), createElementVNode("input", {
+							id: "commandmenu",
+							ref_key: "commandInputRef",
+							ref: commandInputRef,
+							autocomplete: "off",
+							autofocus: "",
+							class: "w-full rounded border-none bg-none py-1.5 text-sm focus:outline-none",
+							placeholder: "Search commands...",
+							type: "text",
+							value: __props.paletteState.filterQuery.value,
+							onInput: _cache[0] || (_cache[0] = ($event) => handleInput($event.target.value)),
+							onKeydown: [
+								_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => handleArrowKey("down", $event), ["stop"]), ["down"])),
+								withKeys(withModifiers(handleSelect, ["stop"]), ["enter"]),
+								_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => handleArrowKey("up", $event), ["stop"]), ["up"]))
+							]
+						}, null, 40, _hoisted_4)]),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(__props.paletteState.filteredCommands.value, (group) => {
+							return openBlock(), createElementBlock(Fragment, { key: group.label || "100" }, [withDirectives(createElementVNode("div", { class: "text-c-3 mt-2 mb-1 px-2 text-xs font-medium" }, toDisplayString(group.label), 513), [[vShow, group.commands.length > 0]]), (openBlock(true), createElementBlock(Fragment, null, renderList(group.commands, (command) => {
+								return openBlock(), createElementBlock("button", {
+									id: command.id,
+									key: command.id,
+									class: normalizeClass(["commandmenu-item hover:bg-b-2 flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left text-sm", { "bg-b-2": command.id === selectedCommand.value?.id }]),
+									type: "button",
+									onClick: ($event) => handleCommandClick(command)
+								}, ["icon" in command ? (openBlock(), createBlock(resolveDynamicComponent(command.icon), {
+									key: 0,
+									class: "text-c-2 mr-2.5",
+									size: "md",
+									thickness: "1.5"
+								})) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(command.name), 1)], 10, _hoisted_5);
+							}), 128))], 64);
+						}), 128)),
+						!__props.paletteState.filteredCommands.value.flatMap((p) => p.commands).length ? (openBlock(), createElementBlock("div", _hoisted_6, " No commands found ")) : createCommentVNode("", true)
+					])) : (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("button", {
+						class: "hover:bg-b-3 text-c-3 active:text-c-1 absolute z-1 mt-[0.5px] rounded p-1.5",
+						type: "button",
+						onClick: handleBackEvent
+					}, [createVNode(unref(ScalarIconCaretLeft), { size: "md" })]), __props.paletteState.activeCommand.value ? (openBlock(), createBlock(resolveDynamicComponent(__props.paletteState.activeCommand.value.component), mergeProps({ key: 0 }, paletteProps.value, {
+						onBack: handleBackEvent,
+						onClose: handleCloseEvent
+					}), null, 16)) : createCommentVNode("", true)]))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+}), [["__scopeId", "data-v-2fe57517"]]);
+//#endregion
+export { slugify as n, TheCommandPalette_default as t };
+
+//# sourceMappingURL=TheCommandPalette-Dl9TAeke.js.map

package/dist/TheCommandPalette-Dl9TAeke.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TheCommandPalette-Dl9TAeke.js","names":[],"sources":["../src/v2/helpers/slugify.ts","../src/v2/features/command-palette/TheCommandPalette.vue","../src/v2/features/command-palette/TheCommandPalette.vue"],"sourcesContent":["/**\n * Converts a string into a URL-friendly \"slug\" by\n * lowercasing and replacing whitespace with hyphens.\n *\n * Example:\n *   slugify('Hello World Example')  // returns 'hello-world-example'\n */\nexport const slugify = (value: string) => {\n  return value.toLowerCase().replace(/\\s+/g, '-')\n}\n","<script lang=\"ts\">\n/**\n * The Command Palette Component\n *\n * A keyboard-driven command menu for quick access to common actions like:\n * - Creating documents, requests, tags, and examples\n * - Importing from OpenAPI, Swagger, Postman, or cURL\n * - Navigating to different routes\n *\n * Supports:\n * - Fuzzy search filtering\n * - Keyboard navigation (arrow keys, enter, escape)\n * - Command grouping and organization\n * - Dynamic command components with props\n *\n * @example\n * <TheCommandPalette\n *   :paletteState=\"paletteState\"\n *   :workspaceStore=\"workspaceStore\"\n *   :eventBus=\"eventBus\"\n * />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue'\nimport { ScalarIconCaretLeft, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type {\n  CommandPaletteAction,\n  CommandPalettePayload,\n  KeyboardEventPayload,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  computed,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport type {\n  CommandPaletteEntry,\n  CommandPaletteState,\n} from './hooks/use-command-palette-state'\n\nconst { paletteState, workspaceStore, eventBus } = defineProps<{\n  /** The command palette state management hook */\n  paletteState: CommandPaletteState\n  /** The workspace store for accessing documents and operations */\n  workspaceStore: WorkspaceStore\n  /** Event bus for emitting workspace events */\n  eventBus: WorkspaceEventBus\n}>()\n\n/** Starting index when no search result is selected */\nconst NO_SELECTION_INDEX = -1\n\nconst router = useRouter()\n\nconst selectedSearchResult = ref<number>(NO_SELECTION_INDEX)\nconst commandInputRef = ref<HTMLInputElement | null>(null)\n\n/**\n * Flattens the filtered commands into a single array for keyboard navigation.\n * Makes it easier to track the selected index across all groups.\n */\nconst flattenedCommands = computed<CommandPaletteEntry[]>(() =>\n  paletteState.filteredCommands.value.flatMap((group) => group.commands),\n)\n\n/** The currently selected command based on keyboard navigation */\nconst selectedCommand = computed<CommandPaletteEntry | undefined>(\n  () => flattenedCommands.value[selectedSearchResult.value],\n)\n\n/**\n * Watch for search query changes and auto-select first result.\n * Resets selection when query is cleared.\n */\nwatch(\n  () => paletteState.filterQuery.value,\n  (newQuery: string) => {\n    selectedSearchResult.value =\n      newQuery && flattenedCommands.value.length > 0 ? 0 : NO_SELECTION_INDEX\n  },\n)\n\n/**\n * Handle input changes in the search field.\n * Updates the filter query and redirects to cURL import if detected.\n */\nconst handleInput = (value: string): void => {\n  paletteState.setFilterQuery(value)\n\n  if (value.trim().toLowerCase().startsWith('curl')) {\n    paletteState.open('import-curl-command', { inputValue: value })\n  }\n}\n\n/**\n * Handle arrow key navigation in the command list.\n * Loops around to the beginning or end when reaching boundaries.\n */\nconst handleArrowKey = (\n  direction: 'up' | 'down',\n  event: KeyboardEvent,\n): void => {\n  if (!paletteState.isOpen.value) {\n    return\n  }\n  event.preventDefault()\n\n  const offset = direction === 'up' ? -1 : 1\n  const length = flattenedCommands.value.length\n\n  selectedSearchResult.value =\n    (selectedSearchResult.value + offset + length) % length\n}\n\n/**\n * Handle enter key to execute the selected command.\n * Only works when a command is selected and no active command is open.\n */\nconst handleSelect = (event: KeyboardEvent): void => {\n  if (!selectedCommand.value || paletteState.activeCommand.value) {\n    return\n  }\n  event.preventDefault()\n  event.stopPropagation()\n  handleCommandClick(selectedCommand.value)\n}\n\n/**\n * Handle command selection (via click or enter key).\n * Routes to navigation commands or opens folder commands.\n */\nconst handleCommandClick = (command: CommandPaletteEntry): void => {\n  /** Navigate to route commands and close palette */\n  if ('to' in command) {\n    router.push(command.to)\n    closeHandler()\n    return\n  }\n\n  // We are sure that the ids are of type FolderCommandIds because of the type assertion\n  paletteState.open(command.id as keyof CommandPalettePayload, {})\n}\n\n/**\n * Handle back navigation from active command.\n * Returns to the main command list and refocuses the search input.\n */\nconst handleBackEvent = (): void => {\n  paletteState.reset()\n  nextTick(() => commandInputRef.value?.focus())\n}\n\n/** Handle close event from active command components */\nconst handleCloseEvent = (): void => {\n  paletteState.close()\n}\n/**\n * Close the command palette and reset state.\n * Resets search results and closes the dialog.\n */\nconst closeHandler = (): void => {\n  paletteState.close()\n  selectedSearchResult.value = NO_SELECTION_INDEX\n}\n\nconst paletteProps = computed(() => ({\n  workspaceStore,\n  eventBus,\n  ...paletteState.activeCommandProps.value,\n}))\n\nconst onOpen = (\n  payload: CommandPaletteAction | KeyboardEventPayload | undefined,\n) => {\n  // We want to disable the default behaviour\n  if (payload?.event) {\n    payload.event.preventDefault()\n  }\n\n  if (payload && 'action' in payload) {\n    paletteState.open(payload.action, payload.payload)\n  } else {\n    paletteState.open()\n  }\n}\n\nonBeforeMount(() => eventBus.on('ui:open:command-palette', onOpen))\nonBeforeUnmount(() => eventBus.off('ui:open:command-palette', onOpen))\n</script>\n<template>\n  <Dialog\n    :open=\"paletteState.isOpen.value\"\n    @close=\"closeHandler\">\n    <!-- Backdrop overlay -->\n    <div class=\"commandmenu-overlay z-overlay\" />\n\n    <DialogPanel class=\"commandmenu z-overlay flex flex-col\">\n      <DialogTitle class=\"sr-only\">API Client Command Menu</DialogTitle>\n\n      <!-- Main command list view -->\n      <div\n        v-if=\"!paletteState.activeCommand.value\"\n        class=\"custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5\">\n        <!-- Search input with icon -->\n        <div\n          class=\"bg-b-2 focus-within:bg-b-1 sticky top-0 flex items-center rounded-md border border-transparent pl-2 shadow-[0_-8px_0_8px_var(--scalar-background-1),0_0_8px_8px_var(--scalar-background-1)] focus-within:border-(--scalar-background-3)\">\n          <label for=\"commandmenu\">\n            <ScalarIconMagnifyingGlass\n              class=\"text-c-2 mr-2.5\"\n              size=\"md\"\n              thickness=\"1.5\" />\n          </label>\n          <input\n            id=\"commandmenu\"\n            ref=\"commandInputRef\"\n            autocomplete=\"off\"\n            autofocus\n            class=\"w-full rounded border-none bg-none py-1.5 text-sm focus:outline-none\"\n            placeholder=\"Search commands...\"\n            type=\"text\"\n            :value=\"paletteState.filterQuery.value\"\n            @input=\"handleInput(($event.target as HTMLInputElement).value)\"\n            @keydown.down.stop=\"handleArrowKey('down', $event)\"\n            @keydown.enter.stop=\"handleSelect\"\n            @keydown.up.stop=\"handleArrowKey('up', $event)\" />\n        </div>\n\n        <!-- Command groups and items -->\n        <template\n          v-for=\"group in paletteState.filteredCommands.value\"\n          :key=\"group.label || '100'\">\n          <!-- Group label -->\n          <div\n            v-show=\"group.commands.length > 0\"\n            class=\"text-c-3 mt-2 mb-1 px-2 text-xs font-medium\">\n            {{ group.label }}\n          </div>\n\n          <!-- Command items in the group -->\n          <button\n            v-for=\"command in group.commands\"\n            :id=\"command.id\"\n            :key=\"command.id\"\n            class=\"commandmenu-item hover:bg-b-2 flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left text-sm\"\n            :class=\"{\n              'bg-b-2': command.id === selectedCommand?.id,\n            }\"\n            type=\"button\"\n            @click=\"handleCommandClick(command)\">\n            <component\n              :is=\"command.icon\"\n              v-if=\"'icon' in command\"\n              class=\"text-c-2 mr-2.5\"\n              size=\"md\"\n              thickness=\"1.5\" />\n            {{ command.name }}\n          </button>\n        </template>\n\n        <!-- Empty state when no commands match search -->\n        <div\n          v-if=\"\n            !paletteState.filteredCommands.value.flatMap((p) => p.commands)\n              .length\n          \"\n          class=\"text-c-3 p-2 pt-3 text-center text-sm\">\n          No commands found\n        </div>\n      </div>\n\n      <!-- Active command view (specific action form) -->\n      <div\n        v-else\n        class=\"flex-1 p-1.5\">\n        <!-- Back button to return to command list -->\n        <button\n          class=\"hover:bg-b-3 text-c-3 active:text-c-1 absolute z-1 mt-[0.5px] rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleBackEvent\">\n          <ScalarIconCaretLeft size=\"md\" />\n        </button>\n\n        <!-- Dynamic command component -->\n        <component\n          :is=\"paletteState.activeCommand.value.component\"\n          v-if=\"paletteState.activeCommand.value\"\n          v-bind=\"paletteProps\"\n          @back=\"handleBackEvent\"\n          @close=\"handleCloseEvent\" />\n      </div>\n    </DialogPanel>\n  </Dialog>\n</template>\n<style scoped>\n/**\n * Command Palette Styles\n * Centered dialog with fade-in animation and backdrop overlay\n */\n\n/** Main command menu dialog */\n.commandmenu {\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: var(--scalar-radius-lg);\n  background-color: var(--scalar-background-1);\n  max-height: 60dvh;\n  width: 100%;\n  max-width: 580px;\n  margin: 12px;\n  position: fixed;\n  left: 50%;\n  top: 150px;\n  opacity: 0;\n  transform: translate3d(-50%, 10px, 0);\n  animation: fadeincommandmenu ease-in-out 0.3s forwards;\n  animation-delay: 0.1s;\n}\n\n/** Backdrop overlay with fade-in */\n.commandmenu-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.2);\n  animation: fadeincommand ease-in-out 0.3s forwards;\n  cursor: pointer;\n}\n\n/** Fade-in animation for overlay */\n@keyframes fadeincommand {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/** Fade-in and slide-up animation for command menu */\n@keyframes fadeincommandmenu {\n  0% {\n    opacity: 0;\n    transform: translate3d(-50%, 10px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3d(-50%, 0, 0);\n  }\n}\n</style>\n","<script lang=\"ts\">\n/**\n * The Command Palette Component\n *\n * A keyboard-driven command menu for quick access to common actions like:\n * - Creating documents, requests, tags, and examples\n * - Importing from OpenAPI, Swagger, Postman, or cURL\n * - Navigating to different routes\n *\n * Supports:\n * - Fuzzy search filtering\n * - Keyboard navigation (arrow keys, enter, escape)\n * - Command grouping and organization\n * - Dynamic command components with props\n *\n * @example\n * <TheCommandPalette\n *   :paletteState=\"paletteState\"\n *   :workspaceStore=\"workspaceStore\"\n *   :eventBus=\"eventBus\"\n * />\n */\nexport default {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue'\nimport { ScalarIconCaretLeft, ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type {\n  CommandPaletteAction,\n  CommandPalettePayload,\n  KeyboardEventPayload,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport {\n  computed,\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport type {\n  CommandPaletteEntry,\n  CommandPaletteState,\n} from './hooks/use-command-palette-state'\n\nconst { paletteState, workspaceStore, eventBus } = defineProps<{\n  /** The command palette state management hook */\n  paletteState: CommandPaletteState\n  /** The workspace store for accessing documents and operations */\n  workspaceStore: WorkspaceStore\n  /** Event bus for emitting workspace events */\n  eventBus: WorkspaceEventBus\n}>()\n\n/** Starting index when no search result is selected */\nconst NO_SELECTION_INDEX = -1\n\nconst router = useRouter()\n\nconst selectedSearchResult = ref<number>(NO_SELECTION_INDEX)\nconst commandInputRef = ref<HTMLInputElement | null>(null)\n\n/**\n * Flattens the filtered commands into a single array for keyboard navigation.\n * Makes it easier to track the selected index across all groups.\n */\nconst flattenedCommands = computed<CommandPaletteEntry[]>(() =>\n  paletteState.filteredCommands.value.flatMap((group) => group.commands),\n)\n\n/** The currently selected command based on keyboard navigation */\nconst selectedCommand = computed<CommandPaletteEntry | undefined>(\n  () => flattenedCommands.value[selectedSearchResult.value],\n)\n\n/**\n * Watch for search query changes and auto-select first result.\n * Resets selection when query is cleared.\n */\nwatch(\n  () => paletteState.filterQuery.value,\n  (newQuery: string) => {\n    selectedSearchResult.value =\n      newQuery && flattenedCommands.value.length > 0 ? 0 : NO_SELECTION_INDEX\n  },\n)\n\n/**\n * Handle input changes in the search field.\n * Updates the filter query and redirects to cURL import if detected.\n */\nconst handleInput = (value: string): void => {\n  paletteState.setFilterQuery(value)\n\n  if (value.trim().toLowerCase().startsWith('curl')) {\n    paletteState.open('import-curl-command', { inputValue: value })\n  }\n}\n\n/**\n * Handle arrow key navigation in the command list.\n * Loops around to the beginning or end when reaching boundaries.\n */\nconst handleArrowKey = (\n  direction: 'up' | 'down',\n  event: KeyboardEvent,\n): void => {\n  if (!paletteState.isOpen.value) {\n    return\n  }\n  event.preventDefault()\n\n  const offset = direction === 'up' ? -1 : 1\n  const length = flattenedCommands.value.length\n\n  selectedSearchResult.value =\n    (selectedSearchResult.value + offset + length) % length\n}\n\n/**\n * Handle enter key to execute the selected command.\n * Only works when a command is selected and no active command is open.\n */\nconst handleSelect = (event: KeyboardEvent): void => {\n  if (!selectedCommand.value || paletteState.activeCommand.value) {\n    return\n  }\n  event.preventDefault()\n  event.stopPropagation()\n  handleCommandClick(selectedCommand.value)\n}\n\n/**\n * Handle command selection (via click or enter key).\n * Routes to navigation commands or opens folder commands.\n */\nconst handleCommandClick = (command: CommandPaletteEntry): void => {\n  /** Navigate to route commands and close palette */\n  if ('to' in command) {\n    router.push(command.to)\n    closeHandler()\n    return\n  }\n\n  // We are sure that the ids are of type FolderCommandIds because of the type assertion\n  paletteState.open(command.id as keyof CommandPalettePayload, {})\n}\n\n/**\n * Handle back navigation from active command.\n * Returns to the main command list and refocuses the search input.\n */\nconst handleBackEvent = (): void => {\n  paletteState.reset()\n  nextTick(() => commandInputRef.value?.focus())\n}\n\n/** Handle close event from active command components */\nconst handleCloseEvent = (): void => {\n  paletteState.close()\n}\n/**\n * Close the command palette and reset state.\n * Resets search results and closes the dialog.\n */\nconst closeHandler = (): void => {\n  paletteState.close()\n  selectedSearchResult.value = NO_SELECTION_INDEX\n}\n\nconst paletteProps = computed(() => ({\n  workspaceStore,\n  eventBus,\n  ...paletteState.activeCommandProps.value,\n}))\n\nconst onOpen = (\n  payload: CommandPaletteAction | KeyboardEventPayload | undefined,\n) => {\n  // We want to disable the default behaviour\n  if (payload?.event) {\n    payload.event.preventDefault()\n  }\n\n  if (payload && 'action' in payload) {\n    paletteState.open(payload.action, payload.payload)\n  } else {\n    paletteState.open()\n  }\n}\n\nonBeforeMount(() => eventBus.on('ui:open:command-palette', onOpen))\nonBeforeUnmount(() => eventBus.off('ui:open:command-palette', onOpen))\n</script>\n<template>\n  <Dialog\n    :open=\"paletteState.isOpen.value\"\n    @close=\"closeHandler\">\n    <!-- Backdrop overlay -->\n    <div class=\"commandmenu-overlay z-overlay\" />\n\n    <DialogPanel class=\"commandmenu z-overlay flex flex-col\">\n      <DialogTitle class=\"sr-only\">API Client Command Menu</DialogTitle>\n\n      <!-- Main command list view -->\n      <div\n        v-if=\"!paletteState.activeCommand.value\"\n        class=\"custom-scroll max-h-[50dvh] min-h-0 flex-1 rounded-lg p-1.5\">\n        <!-- Search input with icon -->\n        <div\n          class=\"bg-b-2 focus-within:bg-b-1 sticky top-0 flex items-center rounded-md border border-transparent pl-2 shadow-[0_-8px_0_8px_var(--scalar-background-1),0_0_8px_8px_var(--scalar-background-1)] focus-within:border-(--scalar-background-3)\">\n          <label for=\"commandmenu\">\n            <ScalarIconMagnifyingGlass\n              class=\"text-c-2 mr-2.5\"\n              size=\"md\"\n              thickness=\"1.5\" />\n          </label>\n          <input\n            id=\"commandmenu\"\n            ref=\"commandInputRef\"\n            autocomplete=\"off\"\n            autofocus\n            class=\"w-full rounded border-none bg-none py-1.5 text-sm focus:outline-none\"\n            placeholder=\"Search commands...\"\n            type=\"text\"\n            :value=\"paletteState.filterQuery.value\"\n            @input=\"handleInput(($event.target as HTMLInputElement).value)\"\n            @keydown.down.stop=\"handleArrowKey('down', $event)\"\n            @keydown.enter.stop=\"handleSelect\"\n            @keydown.up.stop=\"handleArrowKey('up', $event)\" />\n        </div>\n\n        <!-- Command groups and items -->\n        <template\n          v-for=\"group in paletteState.filteredCommands.value\"\n          :key=\"group.label || '100'\">\n          <!-- Group label -->\n          <div\n            v-show=\"group.commands.length > 0\"\n            class=\"text-c-3 mt-2 mb-1 px-2 text-xs font-medium\">\n            {{ group.label }}\n          </div>\n\n          <!-- Command items in the group -->\n          <button\n            v-for=\"command in group.commands\"\n            :id=\"command.id\"\n            :key=\"command.id\"\n            class=\"commandmenu-item hover:bg-b-2 flex w-full cursor-pointer items-center rounded px-2 py-1.5 text-left text-sm\"\n            :class=\"{\n              'bg-b-2': command.id === selectedCommand?.id,\n            }\"\n            type=\"button\"\n            @click=\"handleCommandClick(command)\">\n            <component\n              :is=\"command.icon\"\n              v-if=\"'icon' in command\"\n              class=\"text-c-2 mr-2.5\"\n              size=\"md\"\n              thickness=\"1.5\" />\n            {{ command.name }}\n          </button>\n        </template>\n\n        <!-- Empty state when no commands match search -->\n        <div\n          v-if=\"\n            !paletteState.filteredCommands.value.flatMap((p) => p.commands)\n              .length\n          \"\n          class=\"text-c-3 p-2 pt-3 text-center text-sm\">\n          No commands found\n        </div>\n      </div>\n\n      <!-- Active command view (specific action form) -->\n      <div\n        v-else\n        class=\"flex-1 p-1.5\">\n        <!-- Back button to return to command list -->\n        <button\n          class=\"hover:bg-b-3 text-c-3 active:text-c-1 absolute z-1 mt-[0.5px] rounded p-1.5\"\n          type=\"button\"\n          @click=\"handleBackEvent\">\n          <ScalarIconCaretLeft size=\"md\" />\n        </button>\n\n        <!-- Dynamic command component -->\n        <component\n          :is=\"paletteState.activeCommand.value.component\"\n          v-if=\"paletteState.activeCommand.value\"\n          v-bind=\"paletteProps\"\n          @back=\"handleBackEvent\"\n          @close=\"handleCloseEvent\" />\n      </div>\n    </DialogPanel>\n  </Dialog>\n</template>\n<style scoped>\n/**\n * Command Palette Styles\n * Centered dialog with fade-in animation and backdrop overlay\n */\n\n/** Main command menu dialog */\n.commandmenu {\n  box-shadow: var(--scalar-shadow-2);\n  border-radius: var(--scalar-radius-lg);\n  background-color: var(--scalar-background-1);\n  max-height: 60dvh;\n  width: 100%;\n  max-width: 580px;\n  margin: 12px;\n  position: fixed;\n  left: 50%;\n  top: 150px;\n  opacity: 0;\n  transform: translate3d(-50%, 10px, 0);\n  animation: fadeincommandmenu ease-in-out 0.3s forwards;\n  animation-delay: 0.1s;\n}\n\n/** Backdrop overlay with fade-in */\n.commandmenu-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.2);\n  animation: fadeincommand ease-in-out 0.3s forwards;\n  cursor: pointer;\n}\n\n/** Fade-in animation for overlay */\n@keyframes fadeincommand {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/** Fade-in and slide-up animation for command menu */\n@keyframes fadeincommandmenu {\n  0% {\n    opacity: 0;\n    transform: translate3d(-50%, 10px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3d(-50%, 0, 0);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/ValueEmitter-QYkZ9Hdc.js

@@ -0,0 +1,20 @@
+import { defineComponent, onBeforeUnmount, watch } from "vue";
+//#endregion
+//#region src/v2/components/layout/ValueEmitter.vue
+var ValueEmitter_default = /* @__PURE__ */ defineComponent({
+	name: "ValueEmitter",
+	props: { value: {} },
+	emits: ["change", "unmount"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		watch(() => __props.value, (newValue) => emit("change", newValue), { immediate: true });
+		onBeforeUnmount(() => emit("unmount"));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ValueEmitter_default as t };
+
+//# sourceMappingURL=ValueEmitter-QYkZ9Hdc.js.map

package/dist/ValueEmitter-QYkZ9Hdc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueEmitter-QYkZ9Hdc.js","names":[],"sources":["../src/v2/components/layout/ValueEmitter.vue","../src/v2/components/layout/ValueEmitter.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * This component takes in any value and emits it back\n *\n * This is useful when we need to catch the open state of a disclosure from its v-slot\n */\nexport default {\n  name: 'ValueEmitter',\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { onBeforeUnmount, watch } from 'vue'\n\nconst { value } = defineProps<{ value: T }>()\nconst emit = defineEmits<{\n  (e: 'change', value: T): void\n  (e: 'unmount'): void\n}>()\n\nwatch(\n  () => value,\n  (newValue) => emit('change', newValue),\n  { immediate: true },\n)\n\nonBeforeUnmount(() => emit('unmount'))\n</script>\n\n<!-- eslint-disable-next-line vue/valid-template-root -->\n<template>\n  <!-- We use this hack to emit the slot value back to the parent -->\n</template>\n","<script lang=\"ts\">\n/**\n * This component takes in any value and emits it back\n *\n * This is useful when we need to catch the open state of a disclosure from its v-slot\n */\nexport default {\n  name: 'ValueEmitter',\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { onBeforeUnmount, watch } from 'vue'\n\nconst { value } = defineProps<{ value: T }>()\nconst emit = defineEmits<{\n  (e: 'change', value: T): void\n  (e: 'unmount'): void\n}>()\n\nwatch(\n  () => value,\n  (newValue) => emit('change', newValue),\n  { immediate: true },\n)\n\nonBeforeUnmount(() => emit('unmount'))\n</script>\n\n<!-- eslint-disable-next-line vue/valid-template-root -->\n<template>\n  <!-- We use this hack to emit the slot value back to the parent -->\n</template>\n"],"mappings":";;;;CCOE,MAAM;;;;EAQR,MAAM,OAAO;AAKb,cACQ,QAAA,QACL,aAAa,KAAK,UAAU,SAAS,EACtC,EAAE,WAAW,MAAM,CACrB;AAEA,wBAAsB,KAAK,UAAU,CAAA"}

package/dist/ViewLayout-BOXN0IYo.js

@@ -0,0 +1,17 @@
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref } from "vue";
+import { useBindCx } from "@scalar/components";
+//#endregion
+//#region src/components/ViewLayout/ViewLayout.vue
+var ViewLayout_default = /* @__PURE__ */ defineComponent({
+	__name: "ViewLayout",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)("flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5"))), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { ViewLayout_default as t };
+
+//# sourceMappingURL=ViewLayout-BOXN0IYo.js.map

package/dist/ViewLayout-BOXN0IYo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewLayout-BOXN0IYo.js","names":[],"sources":["../src/components/ViewLayout/ViewLayout.vue","../src/components/ViewLayout/ViewLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nconst { cx } = useBindCx()\n</script>\n\n<template>\n  <div\n    v-bind=\"\n      cx(\n        'flex flex-col min-h-0 flex-1 *:border-t first:*:border-t-0 md:*:border-t-0 xl:overflow-hidden md:flex-row leading-5',\n      )\n    \">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;ECGA,MAAM,EAAE,OAAO,WAAU;;uBAIvB,mBAOM,OAAA,eAAA,mBANW,MAAA,GAAE,CAAA,sHAAA,CAAA,CAAA,EAAA,CAKjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}