@scalar/api-client 2.38.4 → 2.39.1

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

@@ -0,0 +1,189 @@
+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/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"
+};
+var TheCommandPalette_vue_vue_type_script_setup_true_lang_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"]);
+		};
+	}
+});
+//#endregion
+export { TheCommandPalette_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TheCommandPalette.vue.script.js.map

package/dist/v2/features/command-palette/TheCommandPalette.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TheCommandPalette.vue.script.js","names":[],"sources":["../../../../src/v2/features/command-palette/TheCommandPalette.vue"],"sourcesContent":["<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: 80dvh;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DA,MAAM,qBAAqB;EAE3B,MAAM,SAAS,WAAU;EAEzB,MAAM,uBAAuB,IAAY,mBAAkB;EAC3D,MAAM,kBAAkB,IAA6B,KAAI;;;;;EAMzD,MAAM,oBAAoB,eACxB,QAAA,aAAa,iBAAiB,MAAM,SAAS,UAAU,MAAM,SAAS,CACxE;;EAGA,MAAM,kBAAkB,eAChB,kBAAkB,MAAM,qBAAqB,OACrD;;;;;AAMA,cACQ,QAAA,aAAa,YAAY,QAC9B,aAAqB;AACpB,wBAAqB,QACnB,YAAY,kBAAkB,MAAM,SAAS,IAAI,IAAI;IAE3D;;;;;EAMA,MAAM,eAAe,UAAwB;AAC3C,WAAA,aAAa,eAAe,MAAK;AAEjC,OAAI,MAAM,MAAM,CAAC,aAAa,CAAC,WAAW,OAAO,CAC/C,SAAA,aAAa,KAAK,uBAAuB,EAAE,YAAY,OAAO,CAAA;;;;;;EAQlE,MAAM,kBACJ,WACA,UACS;AACT,OAAI,CAAC,QAAA,aAAa,OAAO,MACvB;AAEF,SAAM,gBAAe;GAErB,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,kBAAkB,MAAM;AAEvC,wBAAqB,SAClB,qBAAqB,QAAQ,SAAS,UAAU;;;;;;EAOrD,MAAM,gBAAgB,UAA+B;AACnD,OAAI,CAAC,gBAAgB,SAAS,QAAA,aAAa,cAAc,MACvD;AAEF,SAAM,gBAAe;AACrB,SAAM,iBAAgB;AACtB,sBAAmB,gBAAgB,MAAK;;;;;;EAO1C,MAAM,sBAAsB,YAAuC;;AAEjE,OAAI,QAAQ,SAAS;AACnB,WAAO,KAAK,QAAQ,GAAE;AACtB,kBAAa;AACb;;AAIF,WAAA,aAAa,KAAK,QAAQ,IAAmC,EAAE,CAAA;;;;;;EAOjE,MAAM,wBAA8B;AAClC,WAAA,aAAa,OAAM;AACnB,kBAAe,gBAAgB,OAAO,OAAO,CAAA;;;EAI/C,MAAM,yBAA+B;AACnC,WAAA,aAAa,OAAM;;;;;;EAMrB,MAAM,qBAA2B;AAC/B,WAAA,aAAa,OAAM;AACnB,wBAAqB,QAAQ;;EAG/B,MAAM,eAAe,gBAAgB;GACnC,gBAAa,QAAA;GACb,UAAO,QAAA;GACP,GAAG,QAAA,aAAa,mBAAmB;GACpC,EAAC;EAEF,MAAM,UACJ,YACG;AAEH,OAAI,SAAS,MACX,SAAQ,MAAM,gBAAe;AAG/B,OAAI,WAAW,YAAY,QACzB,SAAA,aAAa,KAAK,QAAQ,QAAQ,QAAQ,QAAO;OAEjD,SAAA,aAAa,MAAK;;AAItB,sBAAoB,QAAA,SAAS,GAAG,2BAA2B,OAAO,CAAA;AAClE,wBAAsB,QAAA,SAAS,IAAI,2BAA2B,OAAO,CAAA;;uBAGnE,YAqGS,MAAA,OAAA,EAAA;IApGN,MAAM,QAAA,aAAa,OAAO;IAC1B,SAAO;;2BAEqC,CAAA,OAAA,OAAA,OAAA,KAA7C,mBAA6C,OAAA,EAAxC,OAAM,iCAA+B,EAAA,MAAA,GAAA,GAE1C,YA8Fc,MAAA,YAAA,EAAA,EA9FD,OAAM,uCAAqC,EAAA;4BACY,CAAlE,YAAkE,MAAA,YAAA,EAAA,EAArD,OAAM,WAAS,EAAA;6BAAwB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAvB,2BAAuB,GAAA,CAAA,EAAA,CAAA;;UAI3C,QAAA,aAAa,cAAc,SAAA,WAAA,EADpC,mBAoEM,OApEN,YAoEM;MAhEJ,mBAqBM,OArBN,YAqBM,CAnBJ,mBAKQ,SALR,YAKQ,CAJN,YAGoB,MAAA,0BAAA,EAAA;OAFlB,OAAM;OACN,MAAK;OACL,WAAU;YAEd,mBAYoD,SAAA;OAXlD,IAAG;gBACC;OAAJ,KAAI;OACJ,cAAa;OACb,WAAA;OACA,OAAM;OACN,aAAY;OACZ,MAAK;OACJ,OAAO,QAAA,aAAa,YAAY;OAChC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,YAAa,OAAO,OAA4B,MAAK;OAC5D,WAAO;qEAAY,eAAc,QAAS,OAAM,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,OAAA,CAAA;+BAC5B,cAAY,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA;qEACf,eAAc,MAAO,OAAM,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,KAAA,CAAA;;;wBAIjD,mBA6BW,UAAA,MAAA,WA5BO,QAAA,aAAa,iBAAiB,QAAvC,UAAK;+DACN,MAAM,SAAK,OAAA,EAAA,CAAA,eAEjB,mBAIM,OAAA,EAFJ,OAAM,+CAA6C,EAAA,gBAChD,MAAM,MAAK,EAAA,IAAA,EAAA,CAAA,CAAA,OAFN,MAAM,SAAS,SAAM,EAAA,CAAA,CAAA,GAAA,UAAA,KAAA,EAM/B,mBAiBS,UAAA,MAAA,WAhBW,MAAM,WAAjB,YAAO;4BADhB,mBAiBS,UAAA;SAfN,IAAI,QAAQ;SACZ,KAAK,QAAQ;SACd,OAAK,eAAA,CAAC,+GAA6G,EAAA,UACjF,QAAQ,OAAO,gBAAA,OAAiB,IAAA,CAAA,CAAA;SAGlE,MAAK;SACJ,UAAK,WAAE,mBAAmB,QAAO;sBAGhB,WAAA,WAAA,EAFlB,YAKoB,wBAJb,QAAQ,KAAI,EAAA;;SAEjB,OAAM;SACN,MAAK;SACL,WAAU;4DAAQ,MACpB,gBAAG,QAAQ,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA;;;OAMG,QAAA,aAAa,iBAAiB,MAAM,SAAS,MAAM,EAAE,SAAQ,CAAiB,UAAA,WAAA,EADpG,mBAOM,OAPN,YAKgD,sBAEhD,IAAA,mBAAA,IAAA,KAAA;yBAIF,mBAkBM,OAlBN,YAkBM,CAdJ,mBAKS,UAAA;MAJP,OAAM;MACN,MAAK;MACJ,SAAO;SACR,YAAiC,MAAA,oBAAA,EAAA,EAAZ,MAAK,MAAI,CAAA,CAAA,CAAA,EAMxB,QAAA,aAAa,cAAc,SAAA,WAAA,EAFnC,YAK8B,wBAJvB,QAAA,aAAa,cAAc,MAAM,UAAS,EADjD,WAK8B,EAAA,KAAA,GAAA,EAFpB,aAAA,OAAY;MACnB,QAAM;MACN,SAAO"}

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

@@ -0,0 +1,7 @@
+import CommandActionForm_vue_vue_type_script_setup_true_lang_default from "./CommandActionForm.vue.script.js";
+//#region src/v2/features/command-palette/components/CommandActionForm.vue
+var CommandActionForm_default = CommandActionForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CommandActionForm_default as default };
+
+//# sourceMappingURL=CommandActionForm.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionForm.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Form Component\n *\n * A reusable form wrapper for command palette actions.\n * Provides a consistent layout with a main content area, optional controls,\n * and a submit button. Prevents form submission when disabled.\n *\n * @example\n * <CommandActionForm\n *   :loader\n *   :disabled=\"isDisabled\"\n *   @submit=\"handleSubmit\"\n *   @cancel=\"handleCancel\"\n *   @back=\"handleBack\"\n * >\n *   <!-- Main content goes in default slot -->\n *   <CommandActionInput v-model=\"value\" />\n *\n *   <!-- Optional controls in options slot -->\n *   <template #options>\n *     <ScalarCheckbox v-model=\"option\" />\n *   </template>\n *\n *   <!-- Custom submit button text -->\n *   <template #submit>Create</template>\n * </CommandActionForm>\n */\nexport default {\n  name: 'CommandActionForm',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton, useBindCx, type LoadingState } from '@scalar/components'\n\nconst { loader, disabled = false } = defineProps<{\n  /** Loading state from useLoadingState composable to show spinner on submit button */\n  loader?: LoadingState\n  /** Whether the form and submit button are disabled */\n  disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the form is submitted (if not disabled) */\n  (event: 'submit'): void\n  /** Emitted when the action is cancelled */\n  (event: 'cancel'): void\n  /** Emitted when user presses back (e.g., Escape key) */\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Main content area for form inputs */\n  default(): void\n  /** Optional controls displayed before the submit button (e.g., checkboxes, toggles, dropdowns) */\n  options(): void\n  /** Custom text or content for the submit button (defaults to \"Continue\") */\n  submit(): void\n}>()\n\nconst { cx } = useBindCx()\n\n/** Handle form submission, only emit if not disabled */\nconst handleSubmit = (): void => {\n  if (!disabled) {\n    emit('submit')\n  }\n}\n</script>\n\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"handleSubmit\">\n    <!-- Main content area with minimum height and rounded corners -->\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n\n    <!-- Action bar with optional controls and submit button -->\n    <div class=\"flex gap-2\">\n      <!-- Optional controls slot (e.g., checkboxes, toggles) -->\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n\n      <!-- Submit button with customizable text -->\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,47 @@
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx, withKeys, withModifiers } from "vue";
+import { ScalarButton, useBindCx } from "@scalar/components";
+//#region src/v2/features/command-palette/components/CommandActionForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex gap-2" };
+var _hoisted_2 = { class: "flex max-h-8 flex-1" };
+var CommandActionForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CommandActionForm",
+	props: {
+		loader: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"submit",
+		"cancel",
+		"back"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { cx } = useBindCx();
+		/** Handle form submission, only emit if not disabled */
+		const handleSubmit = () => {
+			if (!__props.disabled) emit("submit");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "flex w-full flex-col gap-3",
+				onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(() => {}, ["stop"]), ["enter"])),
+				onSubmit: withModifiers(handleSubmit, ["prevent", "stop"])
+			}, [createElementVNode("div", normalizeProps(guardReactiveProps(unref(cx)("relative flex min-h-20 flex-col rounded"))), [renderSlot(_ctx.$slots, "default")], 16), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "options")]), createVNode(unref(ScalarButton), {
+				class: "max-h-8 px-3 text-xs",
+				disabled: __props.disabled,
+				loader: __props.loader,
+				type: "submit"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "submit", {}, () => [_cache[1] || (_cache[1] = createTextVNode("Continue", -1))])]),
+				_: 3
+			}, 8, ["disabled", "loader"])])], 32);
+		};
+	}
+});
+//#endregion
+export { CommandActionForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandActionForm.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionForm.vue.script.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionForm.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Form Component\n *\n * A reusable form wrapper for command palette actions.\n * Provides a consistent layout with a main content area, optional controls,\n * and a submit button. Prevents form submission when disabled.\n *\n * @example\n * <CommandActionForm\n *   :loader\n *   :disabled=\"isDisabled\"\n *   @submit=\"handleSubmit\"\n *   @cancel=\"handleCancel\"\n *   @back=\"handleBack\"\n * >\n *   <!-- Main content goes in default slot -->\n *   <CommandActionInput v-model=\"value\" />\n *\n *   <!-- Optional controls in options slot -->\n *   <template #options>\n *     <ScalarCheckbox v-model=\"option\" />\n *   </template>\n *\n *   <!-- Custom submit button text -->\n *   <template #submit>Create</template>\n * </CommandActionForm>\n */\nexport default {\n  name: 'CommandActionForm',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ScalarButton, useBindCx, type LoadingState } from '@scalar/components'\n\nconst { loader, disabled = false } = defineProps<{\n  /** Loading state from useLoadingState composable to show spinner on submit button */\n  loader?: LoadingState\n  /** Whether the form and submit button are disabled */\n  disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the form is submitted (if not disabled) */\n  (event: 'submit'): void\n  /** Emitted when the action is cancelled */\n  (event: 'cancel'): void\n  /** Emitted when user presses back (e.g., Escape key) */\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Main content area for form inputs */\n  default(): void\n  /** Optional controls displayed before the submit button (e.g., checkboxes, toggles, dropdowns) */\n  options(): void\n  /** Custom text or content for the submit button (defaults to \"Continue\") */\n  submit(): void\n}>()\n\nconst { cx } = useBindCx()\n\n/** Handle form submission, only emit if not disabled */\nconst handleSubmit = (): void => {\n  if (!disabled) {\n    emit('submit')\n  }\n}\n</script>\n\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"handleSubmit\">\n    <!-- Main content area with minimum height and rounded corners -->\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n\n    <!-- Action bar with optional controls and submit button -->\n    <div class=\"flex gap-2\">\n      <!-- Optional controls slot (e.g., checkboxes, toggles) -->\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n\n      <!-- Submit button with customizable text -->\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;CA6BE,MAAM;;;;;;;;;;;;;;EAcR,MAAM,OAAO;EAkBb,MAAM,EAAE,OAAO,WAAU;;EAGzB,MAAM,qBAA2B;AAC/B,OAAI,CAAC,QAAA,SACH,MAAK,SAAQ;;;uBAMf,mBAyBO,QAAA;IAxBL,OAAM;IACL,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,oBAAR,IAAmB,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA;IAClB,UAAM,cAAe,cAAY,CAAA,WAAA,OAAA,CAAA;OAElC,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,0CAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAIV,mBAcM,OAdN,YAcM,CAZJ,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA,EAIzB,YAMe,MAAA,aAAA,EAAA;IALb,OAAM;IACL,UAAU,QAAA;IACV,QAAA,QAAA;IACD,MAAK;;2BAC8B,CAAnC,WAAmC,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAf,YAAQ,GAAA,EAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import CommandActionInput_vue_vue_type_script_setup_true_lang_default from "./CommandActionInput.vue.script.js";
+//#region src/v2/features/command-palette/components/CommandActionInput.vue
+var CommandActionInput_default = CommandActionInput_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CommandActionInput_default as default };
+
+//# sourceMappingURL=CommandActionInput.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionInput.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,73 @@
+import { computed, createElementBlock, defineComponent, mergeProps, nextTick, onMounted, openBlock, ref, vModelText, withDirectives, withKeys } from "vue";
+//#region src/v2/features/command-palette/components/CommandActionInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["placeholder"];
+var CommandActionInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CommandActionInput",
+	inheritAttrs: false,
+	props: {
+		modelValue: {},
+		placeholder: {},
+		autofocus: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:modelValue", "delete"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const input = ref(null);
+		/**
+		* Two-way binding computed property for v-model support.
+		* Ensures we always have a string value even if modelValue is undefined.
+		*/
+		const model = computed({
+			get: () => __props.modelValue ?? "",
+			set: (value) => emit("update:modelValue", value)
+		});
+		/**
+		* Auto-focus the input after mounting if autofocus prop is true.
+		* Uses nextTick to ensure the DOM is ready before focusing.
+		*/
+		onMounted(() => {
+			nextTick(() => {
+				if (__props.autofocus) input.value?.focus();
+			});
+		});
+		/**
+		* Handles Enter key to submit the parent form.
+		* Shift+Enter is ignored to allow multi-line input if needed.
+		*/
+		const handleEnter = (event) => {
+			if (event.shiftKey || !event.target) return;
+			event.preventDefault();
+			const target = event.target;
+			const submitEvent = new Event("submit", { cancelable: true });
+			target.form?.dispatchEvent(submitEvent);
+		};
+		/**
+		* Handles Backspace key when input is empty.
+		* Emits delete event to allow parent to navigate back or undo the last action.
+		*/
+		const handleDelete = (event) => {
+			if (model.value !== "") return;
+			event.preventDefault();
+			event.stopPropagation();
+			emit("delete", event);
+		};
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
+				id: "command-action-input",
+				ref_key: "input",
+				ref: input,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				class: "min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1",
+				placeholder: __props.placeholder ?? "",
+				wrap: "hard"
+			}, _ctx.$attrs, { onKeydown: [withKeys(handleDelete, ["delete"]), withKeys(handleEnter, ["enter"])] }), null, 16, _hoisted_1)), [[vModelText, model.value]]);
+		};
+	}
+});
+//#endregion
+export { CommandActionInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandActionInput.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionInput.vue.script.js","names":["$attrs"],"sources":["../../../../../src/v2/features/command-palette/components/CommandActionInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Action Input Component\n *\n * A textarea input component for command palette actions.\n * Supports v-model binding, auto-focus, and special keyboard handling:\n * - Enter submits the parent form (unless Shift is held)\n * - Backspace emits delete event when input is empty (for navigation back)\n *\n * @example\n * <CommandActionInput\n *   v-model=\"inputValue\"\n *   placeholder=\"Enter name...\"\n *   :autofocus=\"true\"\n *   @delete=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandActionInput',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst {\n  modelValue,\n  placeholder,\n  autofocus = true,\n} = defineProps<{\n  /** Current value of the input */\n  modelValue?: string\n  /** Placeholder text shown when input is empty */\n  placeholder?: string\n  /** Whether to automatically focus the input when mounted */\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the input value changes (v-model support) */\n  (event: 'update:modelValue', value: string): void\n  /** Emitted when backspace is pressed on empty input for navigation back */\n  (event: 'delete', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLTextAreaElement | null>(null)\n\n/**\n * Two-way binding computed property for v-model support.\n * Ensures we always have a string value even if modelValue is undefined.\n */\nconst model = computed<string>({\n  get: () => modelValue ?? '',\n  set: (value) => emit('update:modelValue', value),\n})\n\n/**\n * Auto-focus the input after mounting if autofocus prop is true.\n * Uses nextTick to ensure the DOM is ready before focusing.\n */\nonMounted(() => {\n  nextTick(() => {\n    if (autofocus) {\n      input.value?.focus()\n    }\n  })\n})\n\n/**\n * Handles Enter key to submit the parent form.\n * Shift+Enter is ignored to allow multi-line input if needed.\n */\nconst handleEnter = (event: KeyboardEvent): void => {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n\n  event.preventDefault()\n\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/**\n * Handles Backspace key when input is empty.\n * Emits delete event to allow parent to navigate back or undo the last action.\n */\nconst handleDelete = (event: KeyboardEvent): void => {\n  if (model.value !== '') {\n    return\n  }\n\n  event.preventDefault()\n  event.stopPropagation()\n  emit('delete', event)\n}\n</script>\n\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleDelete\"\n    @keydown.enter=\"handleEnter\" />\n</template>\n"],"mappings":";;;;CAkBE,MAAM;;;;;;;;;;;;EAoBR,MAAM,OAAO;EASb,MAAM,QAAQ,IAAgC,KAAI;;;;;EAMlD,MAAM,QAAQ,SAAiB;GAC7B,WAAW,QAAA,cAAc;GACzB,MAAM,UAAU,KAAK,qBAAqB,MAAM;GACjD,CAAA;;;;;AAMD,kBAAgB;AACd,kBAAe;AACb,QAAI,QAAA,UACF,OAAM,OAAO,OAAM;KAEtB;IACF;;;;;EAMD,MAAM,eAAe,UAA+B;AAClD,OAAI,MAAM,YAAY,CAAC,MAAM,OAC3B;AAGF,SAAM,gBAAe;GAErB,MAAM,SAAS,MAAM;GACrB,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,YAAY,MAAM,CAAA;AAC5D,UAAO,MAAM,cAAc,YAAW;;;;;;EAOxC,MAAM,gBAAgB,UAA+B;AACnD,OAAI,MAAM,UAAU,GAClB;AAGF,SAAM,gBAAe;AACrB,SAAM,iBAAgB;AACtB,QAAK,UAAU,MAAK;;;uCAKpB,mBASiC,YATjC,WASiC;IAR/B,IAAG;aACC;IAAJ,KAAI;uEACU,QAAA;IACd,OAAM;IACL,aAAa,QAAA,eAAW;IACzB,MAAK;MACGA,KAAAA,QAAM,EACb,WAAO,CAAA,SAAS,cAAY,CAAA,SAAA,CAAA,EAAA,SACb,aAAW,CAAA,QAAA,CAAA,CAAA,EAAA,CAAA,EAAA,MAAA,IAAA,WAAA,GAAA,CAAA,CAAA,YANlB,MAAA,MAAK,CAAA,CAAA"}

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

@@ -0,0 +1,7 @@
+import CommandPaletteExample_vue_vue_type_script_setup_true_lang_default from "./CommandPaletteExample.vue.script.js";
+//#region src/v2/features/command-palette/components/CommandPaletteExample.vue
+var CommandPaletteExample_default = CommandPaletteExample_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CommandPaletteExample_default as default };
+
+//# sourceMappingURL=CommandPaletteExample.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteExample.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteExample.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Palette Example Component\n *\n * Provides a form for creating a new example for an API operation.\n * Users can name the example, select a document (collection), and choose an operation.\n * Automatically navigates to the example route which creates the example.\n *\n * @example\n * <CommandPaletteExample\n *   :workspaceStore=\"workspaceStore\"\n *   @close=\"handleClose\"\n *   @back=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandPaletteExample',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdown,\n  ScalarDropdownItem,\n  ScalarIcon,\n  ScalarListbox,\n} from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  TraversedEntry,\n  TraversedExample,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref, watch } from 'vue'\n\nimport HttpMethodBadge from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\n\nimport CommandActionForm from './CommandActionForm.vue'\nimport CommandActionInput from './CommandActionInput.vue'\n\nconst { workspaceStore, eventBus, documentName, operationId, example } =\n  defineProps<{\n    /** The workspace store for accessing documents and operations */\n    workspaceStore: WorkspaceStore\n    /** Event bus for emitting operation creation events */\n    eventBus: WorkspaceEventBus\n    /** Document id to create the example for */\n    documentName?: string\n    /** Preselected path and method to create the example for */\n    operationId?: string\n    /** Existing example for edit mode */\n    example?: TraversedExample\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the example is created successfully */\n  (event: 'close'): void\n  /** Emitted when user navigates back (e.g., backspace on empty input) */\n  (event: 'back', keyboardEvent: KeyboardEvent): void\n}>()\n\n/** Operation option type for selectors */\ntype OperationOption = {\n  id: string\n  label: string\n  path: string\n  method: HttpMethod\n  exampleNames: string[]\n}\n\nconst isEditMode = computed(() => example !== undefined)\n\nconst exampleName = ref(example?.name ?? '')\nconst exampleNameTrimmed = computed(() => exampleName.value.trim())\n\n/** All available documents (collections) in the workspace */\nconst availableDocuments = computed(() =>\n  Object.entries(workspaceStore.workspace.documents).map(\n    ([name, document]) => ({\n      id: name,\n      label: document.info.title || name,\n    }),\n  ),\n)\n\nconst selectedDocument = ref<{ id: string; label: string } | undefined>(\n  documentName\n    ? availableDocuments.value.find((document) => document.id === documentName)\n    : (availableDocuments.value[0] ?? undefined),\n)\n\n/**\n * Recursively traverse navigation entries to find all operations.\n * Operations can be nested under tags or at the document level.\n */\nconst getAllOperations = (entries: TraversedEntry[]): TraversedOperation[] => {\n  const operations: TraversedOperation[] = []\n\n  for (const entry of entries) {\n    if (entry.type === 'operation') {\n      operations.push(entry)\n    }\n\n    /** Recursively traverse child entries if they exist */\n    if ('children' in entry && entry.children) {\n      operations.push(...getAllOperations(entry.children))\n    }\n  }\n\n  return operations\n}\n\n/** All available operations for the selected document */\nconst availableOperations = computed(() => {\n  if (!selectedDocument.value) {\n    return []\n  }\n\n  const document = workspaceStore.workspace.documents[selectedDocument.value.id]\n  if (!document || !document['x-scalar-navigation']) {\n    return []\n  }\n\n  const navigation = document['x-scalar-navigation']\n  const operations = getAllOperations(navigation.children ?? [])\n\n  return operations.map((operation) => ({\n    id: operation.id,\n    label: `${operation.method.toUpperCase()} ${operation.path}`,\n    path: operation.path,\n    method: operation.method,\n    exampleNames:\n      operation.children\n        ?.filter((child): child is TraversedExample => child.type === 'example')\n        .map((child) => child.name) ?? [],\n  }))\n})\n\nconst selectedOperation = ref<OperationOption | undefined>(\n  operationId\n    ? availableOperations.value.find(\n        (operation) => operation.id === operationId,\n      )\n    : undefined,\n)\n\n/** Reset operation selection when document changes */\nwatch(\n  selectedDocument,\n  () => {\n    selectedOperation.value = operationId\n      ? availableOperations.value.find(\n          (operation) => operation.id === operationId,\n        )\n      : (availableOperations.value[0] ?? undefined)\n  },\n  { immediate: true },\n)\n\n/** Handle operation selection from dropdown */\nconst handleSelect = (operation: OperationOption | undefined): void => {\n  if (operation) {\n    selectedOperation.value = operation\n  }\n}\n\n/**\n * Check if the form should be disabled.\n * Disabled when any required field is missing or empty.\n */\nconst isDisabled = computed<boolean>(() => {\n  if (\n    !exampleNameTrimmed.value ||\n    !selectedDocument.value ||\n    !selectedOperation.value\n  ) {\n    return true\n  }\n\n  if (isEditMode.value && example) {\n    if (exampleNameTrimmed.value === example.name) {\n      return true\n    }\n  }\n\n  if (\n    selectedOperation.value.exampleNames.some(\n      (name) => name === exampleNameTrimmed.value && name !== example?.name,\n    )\n  ) {\n    return true\n  }\n\n  return false\n})\n\n/**\n * Navigate to the example route which will create it automatically.\n * The route handler will create the example with the provided details.\n */\nconst handleSubmit = (): void => {\n  if (isDisabled.value || !selectedDocument.value || !selectedOperation.value) {\n    return\n  }\n\n  if (isEditMode.value && example) {\n    eventBus.emit('operation:rename:example', {\n      documentName: selectedDocument.value.id,\n      meta: {\n        path: selectedOperation.value.path,\n        method: selectedOperation.value.method,\n        exampleKey: example.name,\n      },\n      payload: {\n        name: exampleNameTrimmed.value,\n      },\n    })\n    emit('close')\n    return\n  }\n\n  eventBus.emit('operation:create:draft-example', {\n    documentName: selectedDocument.value.id,\n    meta: {\n      path: selectedOperation.value.path,\n      method: selectedOperation.value.method,\n    },\n    exampleName: exampleNameTrimmed.value,\n  })\n\n  emit('close')\n}\n\n/** Handle back navigation when user presses backspace on empty input */\nconst handleBack = (event: KeyboardEvent): void => {\n  if (isEditMode.value) {\n    return\n  }\n\n  emit('back', event)\n}\n\n/** Handle cancel action in edit mode */\nconst handleCancel = (): void => {\n  emit('close')\n}\n</script>\n<template>\n  <CommandActionForm\n    :disabled=\"isDisabled\"\n    @submit=\"handleSubmit\">\n    <CommandActionInput\n      v-model=\"exampleName\"\n      label=\"Example Name\"\n      placeholder=\"Example Name\"\n      @delete=\"handleBack\" />\n\n    <!-- Selectors for document and operation -->\n    <template #options>\n      <div\n        v-if=\"!isEditMode\"\n        class=\"flex flex-1 gap-1\">\n        <!-- Document (collection) selector -->\n        <ScalarListbox\n          v-model=\"selectedDocument\"\n          :options=\"availableDocuments\">\n          <ScalarButton\n            class=\"hover:bg-b-2 max-h-8 w-[150px] min-w-[150px] justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedDocument ? 'text-c-1 truncate' : 'text-c-3'\">\n              {{\n                selectedDocument ? selectedDocument.label : 'Select Document'\n              }}\n            </span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n\n        <!-- Operation selector (path + method) -->\n        <ScalarDropdown\n          placement=\"bottom\"\n          resize>\n          <ScalarButton\n            class=\"hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs\"\n            :disabled=\"!availableOperations.length\"\n            variant=\"outlined\">\n            <span\n              v-if=\"selectedOperation\"\n              class=\"text-c-1 truncate\">\n              {{ selectedOperation.path }}\n            </span>\n            <span\n              v-else\n              class=\"text-c-3\">\n              Select Operation\n            </span>\n            <div class=\"flex items-center gap-2\">\n              <HttpMethodBadge\n                v-if=\"selectedOperation\"\n                :method=\"selectedOperation.method\" />\n              <ScalarIcon\n                class=\"text-c-3\"\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </div>\n          </ScalarButton>\n\n          <!-- Dropdown list of all operations -->\n          <template #items>\n            <div class=\"custom-scroll max-h-40\">\n              <ScalarDropdownItem\n                v-for=\"operation in availableOperations\"\n                :key=\"operation.id\"\n                class=\"flex h-7 w-full items-center justify-between px-1 pr-[26px]\"\n                @click=\"handleSelect(operation)\">\n                <span class=\"truncate\">{{ operation.path }}</span>\n                <HttpMethodBadge :method=\"operation.method\" />\n              </ScalarDropdownItem>\n            </div>\n          </template>\n        </ScalarDropdown>\n      </div>\n\n      <ScalarButton\n        v-else\n        class=\"max-h-8 px-3 text-xs\"\n        variant=\"outlined\"\n        @click=\"handleCancel\">\n        Cancel\n      </ScalarButton>\n    </template>\n\n    <template #submit>{{ isEditMode ? 'Save' : 'Create Example' }}</template>\n  </CommandActionForm>\n</template>\n"],"mappings":""}