@scalar/api-client 3.6.1 → 3.8.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"TheCommandPalette.vue.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":""}

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

@@ -1,189 +0,0 @@
-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 { ScalarIconCaretLeft, ScalarIconMagnifyingGlass } from "@scalar/icons";
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
-import { useRouter } from "vue-router";
-//#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

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

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

@@ -1,49 +0,0 @@
-import type { WorkspaceStore } from '@scalar/workspace-store/client';
-import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
-import type { TraversedExample } from '@scalar/workspace-store/schemas/navigation';
-/**
- * Command Palette Example Component
- *
- * Provides a form for creating a new example for an API operation.
- * Users can name the example, select a document (collection), and choose an operation.
- * Automatically navigates to the example route which creates the example.
- *
- * @example
- * <CommandPaletteExample
- *   :workspaceStore="workspaceStore"
- *   @close="handleClose"
- *   @back="handleBack"
- * />
- */
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    /** The workspace store for accessing documents and operations */
-    workspaceStore: WorkspaceStore;
-    /** Event bus for emitting operation creation events */
-    eventBus: WorkspaceEventBus;
-    /** Document id to create the example for */
-    documentName?: string;
-    /** Preselected path and method to create the example for */
-    operationId?: string;
-    /** Existing example for edit mode */
-    example?: TraversedExample;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: () => any;
-    back: (keyboardEvent: KeyboardEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /** The workspace store for accessing documents and operations */
-    workspaceStore: WorkspaceStore;
-    /** Event bus for emitting operation creation events */
-    eventBus: WorkspaceEventBus;
-    /** Document id to create the example for */
-    documentName?: string;
-    /** Preselected path and method to create the example for */
-    operationId?: string;
-    /** Existing example for edit mode */
-    example?: TraversedExample;
-}> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-//# sourceMappingURL=CommandPaletteExample.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CommandPaletteExample.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteExample.vue"],"names":[],"mappings":"AA+XA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,4CAA4C,CAAA;AASnD;;;;;;;;;;;;;GAaG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEd,iEAAiE;oBACjD,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,4CAA4C;mBAC7B,MAAM;IACrB,4DAA4D;kBAC9C,MAAM;IACpB,qCAAqC;cAC3B,gBAAgB;;;;;IAT1B,iEAAiE;oBACjD,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,4CAA4C;mBAC7B,MAAM;IACrB,4DAA4D;kBAC9C,MAAM;IACpB,qCAAqC;cAC3B,gBAAgB;;;;kFA8jB1B,CAAC"}

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

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

@@ -1 +0,0 @@
-{"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, type ComputedRef } 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 * Validation message surfaced under the input.\n *\n * Resolves to `null` when the form is valid; otherwise to a human-readable\n * reason the user can act on. Empty input or an unchanged name in edit mode\n * are treated as the default state so the modal does not greet the user\n * with a misleading error.\n */\nconst errorMessage: ComputedRef<string | null> = computed(() => {\n  if (\n    !exampleNameTrimmed.value ||\n    !selectedDocument.value ||\n    !selectedOperation.value\n  ) {\n    return null\n  }\n\n  if (isEditMode.value && exampleNameTrimmed.value === example?.name) {\n    return null\n  }\n\n  const nameConflict = selectedOperation.value.exampleNames.some(\n    (name) => name === exampleNameTrimmed.value && name !== example?.name,\n  )\n\n  if (nameConflict) {\n    return `An example named \"${exampleNameTrimmed.value}\" already exists for ${selectedOperation.value.method.toUpperCase()} ${selectedOperation.value.path}. Try a different name.`\n  }\n\n  return null\n})\n\n/**\n * Submit is blocked while required fields are missing, the name is unchanged\n * in edit mode, or another example already uses the same name. The inline\n * `errorMessage` explains the duplicate case so the user knows how to recover.\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 && exampleNameTrimmed.value === example?.name) {\n    return true\n  }\n\n  return errorMessage.value !== null\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    <p\n      v-if=\"errorMessage\"\n      class=\"text-red px-2 pb-1 text-xs\"\n      data-testid=\"command-palette-example-error\"\n      role=\"alert\">\n      {{ errorMessage }}\n    </p>\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":""}

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

@@ -1,225 +0,0 @@
-import HttpMethod_default from "../../../blocks/operation-code-sample/components/HttpMethod.vue.js";
-import CommandActionForm_default from "./CommandActionForm.vue.js";
-import CommandActionInput_default from "./CommandActionInput.vue.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
-import { ScalarButton, ScalarDropdown, ScalarDropdownItem, ScalarIcon, ScalarListbox } from "@scalar/components";
-//#region src/v2/features/command-palette/components/CommandPaletteExample.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	class: "text-red px-2 pb-1 text-xs",
-	"data-testid": "command-palette-example-error",
-	role: "alert"
-};
-var _hoisted_2 = {
-	key: 0,
-	class: "flex flex-1 gap-1"
-};
-var _hoisted_3 = {
-	key: 0,
-	class: "text-c-1 truncate"
-};
-var _hoisted_4 = {
-	key: 1,
-	class: "text-c-3"
-};
-var _hoisted_5 = { class: "flex items-center gap-2" };
-var _hoisted_6 = { class: "custom-scroll max-h-40" };
-var _hoisted_7 = { class: "truncate" };
-var CommandPaletteExample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "CommandPaletteExample",
-	props: {
-		workspaceStore: {},
-		eventBus: {},
-		documentName: {},
-		operationId: {},
-		example: {}
-	},
-	emits: ["close", "back"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		/** Operation option type for selectors */
-		const isEditMode = computed(() => __props.example !== void 0);
-		const exampleName = ref(__props.example?.name ?? "");
-		const exampleNameTrimmed = computed(() => exampleName.value.trim());
-		/** All available documents (collections) in the workspace */
-		const availableDocuments = computed(() => Object.entries(__props.workspaceStore.workspace.documents).map(([name, document]) => ({
-			id: name,
-			label: document.info.title || name
-		})));
-		const selectedDocument = ref(__props.documentName ? availableDocuments.value.find((document) => document.id === __props.documentName) : availableDocuments.value[0] ?? void 0);
-		/**
-		* Recursively traverse navigation entries to find all operations.
-		* Operations can be nested under tags or at the document level.
-		*/
-		const getAllOperations = (entries) => {
-			const operations = [];
-			for (const entry of entries) {
-				if (entry.type === "operation") operations.push(entry);
-				/** Recursively traverse child entries if they exist */
-				if ("children" in entry && entry.children) operations.push(...getAllOperations(entry.children));
-			}
-			return operations;
-		};
-		/** All available operations for the selected document */
-		const availableOperations = computed(() => {
-			if (!selectedDocument.value) return [];
-			const document = __props.workspaceStore.workspace.documents[selectedDocument.value.id];
-			if (!document || !document["x-scalar-navigation"]) return [];
-			const navigation = document["x-scalar-navigation"];
-			return getAllOperations(navigation.children ?? []).map((operation) => ({
-				id: operation.id,
-				label: `${operation.method.toUpperCase()} ${operation.path}`,
-				path: operation.path,
-				method: operation.method,
-				exampleNames: operation.children?.filter((child) => child.type === "example").map((child) => child.name) ?? []
-			}));
-		});
-		const selectedOperation = ref(__props.operationId ? availableOperations.value.find((operation) => operation.id === __props.operationId) : void 0);
-		/** Reset operation selection when document changes */
-		watch(selectedDocument, () => {
-			selectedOperation.value = __props.operationId ? availableOperations.value.find((operation) => operation.id === __props.operationId) : availableOperations.value[0] ?? void 0;
-		}, { immediate: true });
-		/** Handle operation selection from dropdown */
-		const handleSelect = (operation) => {
-			if (operation) selectedOperation.value = operation;
-		};
-		/**
-		* Validation message surfaced under the input.
-		*
-		* Resolves to `null` when the form is valid; otherwise to a human-readable
-		* reason the user can act on. Empty input or an unchanged name in edit mode
-		* are treated as the default state so the modal does not greet the user
-		* with a misleading error.
-		*/
-		const errorMessage = computed(() => {
-			if (!exampleNameTrimmed.value || !selectedDocument.value || !selectedOperation.value) return null;
-			if (isEditMode.value && exampleNameTrimmed.value === __props.example?.name) return null;
-			if (selectedOperation.value.exampleNames.some((name) => name === exampleNameTrimmed.value && name !== __props.example?.name)) return `An example named "${exampleNameTrimmed.value}" already exists for ${selectedOperation.value.method.toUpperCase()} ${selectedOperation.value.path}. Try a different name.`;
-			return null;
-		});
-		/**
-		* Submit is blocked while required fields are missing, the name is unchanged
-		* in edit mode, or another example already uses the same name. The inline
-		* `errorMessage` explains the duplicate case so the user knows how to recover.
-		*/
-		const isDisabled = computed(() => {
-			if (!exampleNameTrimmed.value || !selectedDocument.value || !selectedOperation.value) return true;
-			if (isEditMode.value && exampleNameTrimmed.value === __props.example?.name) return true;
-			return errorMessage.value !== null;
-		});
-		/**
-		* Navigate to the example route which will create it automatically.
-		* The route handler will create the example with the provided details.
-		*/
-		const handleSubmit = () => {
-			if (isDisabled.value || !selectedDocument.value || !selectedOperation.value) return;
-			if (isEditMode.value && __props.example) {
-				__props.eventBus.emit("operation:rename:example", {
-					documentName: selectedDocument.value.id,
-					meta: {
-						path: selectedOperation.value.path,
-						method: selectedOperation.value.method,
-						exampleKey: __props.example.name
-					},
-					payload: { name: exampleNameTrimmed.value }
-				});
-				emit("close");
-				return;
-			}
-			__props.eventBus.emit("operation:create:draft-example", {
-				documentName: selectedDocument.value.id,
-				meta: {
-					path: selectedOperation.value.path,
-					method: selectedOperation.value.method
-				},
-				exampleName: exampleNameTrimmed.value
-			});
-			emit("close");
-		};
-		/** Handle back navigation when user presses backspace on empty input */
-		const handleBack = (event) => {
-			if (isEditMode.value) return;
-			emit("back", event);
-		};
-		/** Handle cancel action in edit mode */
-		const handleCancel = () => {
-			emit("close");
-		};
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(CommandActionForm_default, {
-				disabled: isDisabled.value,
-				onSubmit: handleSubmit
-			}, {
-				options: withCtx(() => [!isEditMode.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(ScalarListbox), {
-					modelValue: selectedDocument.value,
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedDocument.value = $event),
-					options: availableDocuments.value
-				}, {
-					default: withCtx(() => [createVNode(unref(ScalarButton), {
-						class: "hover:bg-b-2 max-h-8 w-[150px] min-w-[150px] justify-between gap-1 p-2 text-xs",
-						variant: "outlined"
-					}, {
-						default: withCtx(() => [createElementVNode("span", { class: normalizeClass(selectedDocument.value ? "text-c-1 truncate" : "text-c-3") }, toDisplayString(selectedDocument.value ? selectedDocument.value.label : "Select Document"), 3), createVNode(unref(ScalarIcon), {
-							class: "text-c-3",
-							icon: "ChevronDown",
-							size: "md"
-						})]),
-						_: 1
-					})]),
-					_: 1
-				}, 8, ["modelValue", "options"]), createVNode(unref(ScalarDropdown), {
-					placement: "bottom",
-					resize: ""
-				}, {
-					items: withCtx(() => [createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(availableOperations.value, (operation) => {
-						return openBlock(), createBlock(unref(ScalarDropdownItem), {
-							key: operation.id,
-							class: "flex h-7 w-full items-center justify-between px-1 pr-[26px]",
-							onClick: ($event) => handleSelect(operation)
-						}, {
-							default: withCtx(() => [createElementVNode("span", _hoisted_7, toDisplayString(operation.path), 1), createVNode(HttpMethod_default, { method: operation.method }, null, 8, ["method"])]),
-							_: 2
-						}, 1032, ["onClick"]);
-					}), 128))])]),
-					default: withCtx(() => [createVNode(unref(ScalarButton), {
-						class: "hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs",
-						disabled: !availableOperations.value.length,
-						variant: "outlined"
-					}, {
-						default: withCtx(() => [selectedOperation.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(selectedOperation.value.path), 1)) : (openBlock(), createElementBlock("span", _hoisted_4, " Select Operation ")), createElementVNode("div", _hoisted_5, [selectedOperation.value ? (openBlock(), createBlock(HttpMethod_default, {
-							key: 0,
-							method: selectedOperation.value.method
-						}, null, 8, ["method"])) : createCommentVNode("", true), createVNode(unref(ScalarIcon), {
-							class: "text-c-3",
-							icon: "ChevronDown",
-							size: "md"
-						})])]),
-						_: 1
-					}, 8, ["disabled"])]),
-					_: 1
-				})])) : (openBlock(), createBlock(unref(ScalarButton), {
-					key: 1,
-					class: "max-h-8 px-3 text-xs",
-					variant: "outlined",
-					onClick: handleCancel
-				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
-					_: 1
-				}))]),
-				submit: withCtx(() => [createTextVNode(toDisplayString(isEditMode.value ? "Save" : "Create Example"), 1)]),
-				default: withCtx(() => [createVNode(CommandActionInput_default, {
-					modelValue: exampleName.value,
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => exampleName.value = $event),
-					label: "Example Name",
-					placeholder: "Example Name",
-					onDelete: handleBack
-				}, null, 8, ["modelValue"]), errorMessage.value ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(errorMessage.value), 1)) : createCommentVNode("", true)]),
-				_: 1
-			}, 8, ["disabled"]);
-		};
-	}
-});
-//#endregion
-export { CommandPaletteExample_vue_vue_type_script_setup_true_lang_default as default };
-
-//# sourceMappingURL=CommandPaletteExample.vue.script.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CommandPaletteExample.vue.script.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, type ComputedRef } 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 * Validation message surfaced under the input.\n *\n * Resolves to `null` when the form is valid; otherwise to a human-readable\n * reason the user can act on. Empty input or an unchanged name in edit mode\n * are treated as the default state so the modal does not greet the user\n * with a misleading error.\n */\nconst errorMessage: ComputedRef<string | null> = computed(() => {\n  if (\n    !exampleNameTrimmed.value ||\n    !selectedDocument.value ||\n    !selectedOperation.value\n  ) {\n    return null\n  }\n\n  if (isEditMode.value && exampleNameTrimmed.value === example?.name) {\n    return null\n  }\n\n  const nameConflict = selectedOperation.value.exampleNames.some(\n    (name) => name === exampleNameTrimmed.value && name !== example?.name,\n  )\n\n  if (nameConflict) {\n    return `An example named \"${exampleNameTrimmed.value}\" already exists for ${selectedOperation.value.method.toUpperCase()} ${selectedOperation.value.path}. Try a different name.`\n  }\n\n  return null\n})\n\n/**\n * Submit is blocked while required fields are missing, the name is unchanged\n * in edit mode, or another example already uses the same name. The inline\n * `errorMessage` explains the duplicate case so the user knows how to recover.\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 && exampleNameTrimmed.value === example?.name) {\n    return true\n  }\n\n  return errorMessage.value !== null\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    <p\n      v-if=\"errorMessage\"\n      class=\"text-red px-2 pb-1 text-xs\"\n      data-testid=\"command-palette-example-error\"\n      role=\"alert\">\n      {{ errorMessage }}\n    </p>\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":"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"}