@stonecrop/desktop 0.35.0 → 0.38.0

package/dist/desktop.js

@@ -1,72 +1,82 @@
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useTemplateRef, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, customRef, defineComponent, guardReactiveProps, h, inject, isRef, markRaw, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRefs, toValue, unref, useId, useTemplateRef, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { DRAFT_RECORD_ID, isDraftRecordId, useStonecrop, useValidationStore } from "@stonecrop/stonecrop";
 import { AForm, resolvedFieldsToColumns } from "@stonecrop/aform";
-import './assets/index.css';//#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = { class: "command-palette-header" };
-var _hoisted_2$3 = ["placeholder", "aria-activedescendant"];
-var _hoisted_3$3 = {
+import './assets/index.css';//#region src/components/CommandSearch.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = [
+	"role",
+	"aria-modal",
+	"aria-label"
+];
+var _hoisted_2$3 = { class: "command-search-header" };
+var _hoisted_3$3 = ["placeholder", "aria-activedescendant"];
+var _hoisted_4$3 = {
 	key: 0,
-	id: "command-palette-results",
-	class: "command-palette-results",
+	id: "command-search-results",
+	class: "command-search-results",
 	role: "listbox",
 	"aria-label": "Command results"
 };
-var _hoisted_4$3 = [
+var _hoisted_5$3 = [
 	"id",
 	"aria-selected",
 	"onClick",
 	"onMouseover"
 ];
-var _hoisted_5$3 = { class: "result-title" };
-var _hoisted_6$2 = { class: "result-content" };
-var _hoisted_7$1 = {
+var _hoisted_6$2 = { class: "command-search-result-title" };
+var _hoisted_7$1 = { class: "command-search-result-content" };
+var _hoisted_8$1 = {
 	key: 1,
-	class: "command-palette-no-results",
+	class: "command-search-no-results",
 	role: "status",
 	"aria-live": "polite"
 };
-//#endregion
-//#region src/components/CommandPalette.vue
-var CommandPalette_default = /* @__PURE__ */ defineComponent({
-	__name: "CommandPalette",
+var CommandSearch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "CommandSearch",
 	props: {
 		search: { type: Function },
-		isOpen: {
+		placeholder: { default: "Type a command or search..." },
+		maxResults: { default: 10 },
+		embedded: {
 			type: Boolean,
 			default: false
 		},
-		placeholder: { default: "Type a command or search..." },
-		maxResults: { default: 10 }
+		autofocus: {
+			type: Boolean,
+			default: false
+		}
 	},
 	emits: ["select", "close"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const emit = __emit;
 		const listboxId = useId();
 		const query = ref("");
 		const selectedIndex = ref(0);
 		const inputRef = useTemplateRef("input");
 		const results = computed(() => {
-			if (!query.value) return [];
 			return __props.search(query.value).slice(0, __props.maxResults);
 		});
-		watch(() => __props.isOpen, async (open) => {
-			if (open) {
-				query.value = "";
-				selectedIndex.value = 0;
-				await nextTick();
-				inputRef.value?.focus();
-			}
-		});
+		watch(() => __props.autofocus, async (shouldFocus) => {
+			if (!shouldFocus) return;
+			query.value = "";
+			selectedIndex.value = 0;
+			await nextTick();
+			inputRef.value?.focus();
+		}, { immediate: true });
 		watch(results, () => {
 			selectedIndex.value = 0;
 		});
-		const closeModal = () => {
-			emit("close");
-		};
+		function reset() {
+			query.value = "";
+			selectedIndex.value = 0;
+		}
+		__expose({
+			reset,
+			focus: () => inputRef.value?.focus()
+		});
 		const handleKeydown = (e) => {
 			switch (e.key) {
 				case "Escape":
-					closeModal();
+					if (!__props.embedded) emit("close");
 					break;
 				case "ArrowDown":
 					e.preventDefault();
@@ -80,6 +90,69 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		const selectResult = (result) => {
+			emit("select", result);
+			if (!__props.embedded) emit("close");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["command-search", { "command-search--embedded": __props.embedded }]),
+				role: __props.embedded ? void 0 : "dialog",
+				"aria-modal": __props.embedded ? void 0 : true,
+				"aria-label": __props.embedded ? void 0 : "Command palette"
+			}, [createElementVNode("div", _hoisted_2$3, [withDirectives(createElementVNode("input", {
+				ref: "input",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+				type: "text",
+				class: "command-search-input",
+				placeholder: __props.placeholder,
+				"aria-label": "Search commands",
+				"aria-activedescendant": results.value.length && selectedIndex.value >= 0 ? `${unref(listboxId)}-opt-${selectedIndex.value}` : void 0,
+				"aria-controls": "command-search-results",
+				onKeydown: handleKeydown
+			}, null, 40, _hoisted_3$3), [[vModelText, query.value]])]), results.value.length ? (openBlock(), createElementBlock("div", _hoisted_4$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+				return openBlock(), createElementBlock("div", {
+					id: `${unref(listboxId)}-opt-${index}`,
+					key: index,
+					class: normalizeClass(["command-search-result", { selected: index === selectedIndex.value }]),
+					role: "option",
+					"aria-selected": index === selectedIndex.value,
+					onClick: ($event) => selectResult(result),
+					onMouseover: ($event) => selectedIndex.value = index
+				}, [createElementVNode("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "title", { result }, void 0, true)]), createElementVNode("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "content", { result }, void 0, true)])], 42, _hoisted_5$3);
+			}), 128))])) : query.value && !results.value.length ? (openBlock(), createElementBlock("div", _hoisted_8$1, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(" No results found for \"" + toDisplayString(query.value) + "\" ", 1)], true)])) : createCommentVNode("", true)], 10, _hoisted_1$3);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/CommandSearch.vue
+var CommandSearch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(CommandSearch_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2ec3bd14"]]);
+//#endregion
+//#region src/components/CommandPalette.vue
+var CommandPalette_default = /* @__PURE__ */ defineComponent({
+	__name: "CommandPalette",
+	props: {
+		search: { type: Function },
+		isOpen: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: { default: "Type a command or search..." },
+		maxResults: { default: 10 }
+	},
+	emits: ["select", "close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const closeModal = () => {
+			emit("close");
+		};
+		const onSelect = (result) => {
 			emit("select", result);
 			closeModal();
 		};
@@ -91,38 +164,352 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 					onClick: closeModal
 				}, [createElementVNode("div", {
 					class: "command-palette",
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": "Command palette",
-					onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-				}, [createElementVNode("div", _hoisted_1$3, [withDirectives(createElementVNode("input", {
-					ref: "input",
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
-					type: "text",
-					class: "command-palette-input",
+					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, [createVNode(CommandSearch_default, {
+					search: __props.search,
 					placeholder: __props.placeholder,
-					"aria-label": "Search commands",
-					"aria-activedescendant": results.value.length && selectedIndex.value >= 0 ? `${unref(listboxId)}-opt-${selectedIndex.value}` : void 0,
-					"aria-controls": "command-palette-results",
-					autofocus: "",
-					onKeydown: handleKeydown
-				}, null, 40, _hoisted_2$3), [[vModelText, query.value]])]), results.value.length ? (openBlock(), createElementBlock("div", _hoisted_3$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
-					return openBlock(), createElementBlock("div", {
-						id: `${unref(listboxId)}-opt-${index}`,
-						key: index,
-						class: normalizeClass(["command-palette-result", { selected: index === selectedIndex.value }]),
-						role: "option",
-						"aria-selected": index === selectedIndex.value,
-						onClick: ($event) => selectResult(result),
-						onMouseover: ($event) => selectedIndex.value = index
-					}, [createElementVNode("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "title", { result })]), createElementVNode("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "content", { result })])], 42, _hoisted_4$3);
-				}), 128))])) : query.value && !results.value.length ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(" No results found for \"" + toDisplayString(query.value) + "\" ", 1)])])) : createCommentVNode("", true)])])) : createCommentVNode("", true)]),
+					"max-results": __props.maxResults,
+					autofocus: __props.isOpen,
+					onSelect,
+					onClose: closeModal
+				}, createSlots({
+					title: withCtx(({ result }) => [renderSlot(_ctx.$slots, "title", { result })]),
+					content: withCtx(({ result }) => [renderSlot(_ctx.$slots, "content", { result })]),
+					_: 2
+				}, [_ctx.$slots.empty ? {
+					name: "empty",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"search",
+					"placeholder",
+					"max-results",
+					"autofocus"
+				])])])) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};
 	}
 });
 //#endregion
+//#region ../node_modules/.pnpm/@vueuse+shared@14.4.0_vue@3.5.41_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+var toString = Object.prototype.toString;
+var isObject = (val) => toString.call(val) === "[object Object]";
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+/**
+* Extended `toRefs` that also accepts refs of an object.
+*
+* @see https://vueuse.org/toRefs
+* @param objectRef A ref or normal object or array.
+* @param options Options
+*/
+function toRefs$1(objectRef, options = {}) {
+	if (!isRef(objectRef)) return toRefs(objectRef);
+	const result = Array.isArray(objectRef.value) ? Array.from({ length: objectRef.value.length }) : {};
+	for (const key in objectRef.value) result[key] = customRef(() => ({
+		get() {
+			return objectRef.value[key];
+		},
+		set(v) {
+			var _toValue;
+			if ((_toValue = toValue(options.replaceRef)) !== null && _toValue !== void 0 ? _toValue : true) if (Array.isArray(objectRef.value)) {
+				const copy = [...objectRef.value];
+				copy[key] = v;
+				objectRef.value = copy;
+			} else {
+				const newObject = {
+					...objectRef.value,
+					[key]: v
+				};
+				Object.setPrototypeOf(newObject, Object.getPrototypeOf(objectRef.value));
+				objectRef.value = newObject;
+			}
+			else objectRef.value[key] = v;
+		}
+	}));
+	return result;
+}
+/**
+* Shorthand for watching value with {immediate: true}
+*
+* @see https://vueuse.org/watchImmediate
+*/
+function watchImmediate(source, cb, options) {
+	return watch(source, cb, {
+		...options,
+		immediate: true
+	});
+}
+//#endregion
+//#region ../node_modules/.pnpm/@vueuse+core@14.4.0_vue@3.5.41_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
+var defaultWindow = isClient ? window : void 0;
+isClient && window.document;
+isClient && window.navigator;
+isClient && window.location;
+/**
+* Get the dom element of a ref of element or Vue component instance
+*
+* @param elRef
+*/
+function unrefElement(elRef) {
+	var _$el;
+	const plain = toValue(elRef);
+	return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
+}
+function useEventListener(...args) {
+	const register = (el, event, listener, options) => {
+		el.addEventListener(event, listener, options);
+		return () => el.removeEventListener(event, listener, options);
+	};
+	const firstParamTargets = computed(() => {
+		const test = toArray(toValue(args[0])).filter((e) => e != null);
+		return test.every((e) => typeof e !== "string") ? test : void 0;
+	});
+	return watchImmediate(() => {
+		var _firstParamTargets$va, _firstParamTargets$va2;
+		return [
+			(_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
+			toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+			toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+			toValue(firstParamTargets.value ? args[3] : args[2])
+		];
+	}, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
+		if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
+		const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+		const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
+		onCleanup(() => {
+			cleanups.forEach((fn) => fn());
+		});
+	}, { flush: "post" });
+}
+var defaultScrollConfig = {
+	speed: 2,
+	margin: 30,
+	direction: "both"
+};
+function clampContainerScroll(container) {
+	if (container.scrollLeft > container.scrollWidth - container.clientWidth) container.scrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
+	if (container.scrollTop > container.scrollHeight - container.clientHeight) container.scrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+}
+/**
+* Make elements draggable.
+*
+* @see https://vueuse.org/useDraggable
+* @param target
+* @param options
+*/
+function useDraggable(target, options = {}) {
+	var _toValue, _toValue2, _toValue3, _scrollConfig$directi;
+	const { pointerTypes, preventDefault, stopPropagation, exact, onMove, onEnd, onStart, initialValue, axis = "both", draggingElement = defaultWindow, containerElement, handle: draggingHandle = target, buttons = [0], restrictInView, autoScroll = false } = options;
+	const position = ref((_toValue = toValue(initialValue)) !== null && _toValue !== void 0 ? _toValue : {
+		x: 0,
+		y: 0
+	});
+	const pressedDelta = ref();
+	const filterEvent = (e) => {
+		if (pointerTypes) return pointerTypes.includes(e.pointerType);
+		return true;
+	};
+	const handleEvent = (e) => {
+		if (toValue(preventDefault)) e.preventDefault();
+		if (toValue(stopPropagation)) e.stopPropagation();
+	};
+	const scrollConfig = toValue(autoScroll);
+	const scrollSettings = typeof scrollConfig === "object" ? {
+		speed: (_toValue2 = toValue(scrollConfig.speed)) !== null && _toValue2 !== void 0 ? _toValue2 : defaultScrollConfig.speed,
+		margin: (_toValue3 = toValue(scrollConfig.margin)) !== null && _toValue3 !== void 0 ? _toValue3 : defaultScrollConfig.margin,
+		direction: (_scrollConfig$directi = scrollConfig.direction) !== null && _scrollConfig$directi !== void 0 ? _scrollConfig$directi : defaultScrollConfig.direction
+	} : defaultScrollConfig;
+	const getScrollAxisValues = (value) => typeof value === "number" ? [value, value] : [value.x, value.y];
+	const handleAutoScroll = (container, targetRect, position) => {
+		const { clientWidth, clientHeight, scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
+		const [marginX, marginY] = getScrollAxisValues(scrollSettings.margin);
+		const [speedX, speedY] = getScrollAxisValues(scrollSettings.speed);
+		let deltaX = 0;
+		let deltaY = 0;
+		if (scrollSettings.direction === "x" || scrollSettings.direction === "both") {
+			if (position.x < marginX && scrollLeft > 0) deltaX = -speedX;
+			else if (position.x + targetRect.width > clientWidth - marginX && scrollLeft < scrollWidth - clientWidth) deltaX = speedX;
+		}
+		if (scrollSettings.direction === "y" || scrollSettings.direction === "both") {
+			if (position.y < marginY && scrollTop > 0) deltaY = -speedY;
+			else if (position.y + targetRect.height > clientHeight - marginY && scrollTop < scrollHeight - clientHeight) deltaY = speedY;
+		}
+		if (deltaX || deltaY) container.scrollBy({
+			left: deltaX,
+			top: deltaY,
+			behavior: "auto"
+		});
+	};
+	let autoScrollInterval = null;
+	const startAutoScroll = () => {
+		const container = toValue(containerElement);
+		if (container && !autoScrollInterval) autoScrollInterval = setInterval(() => {
+			const targetRect = toValue(target).getBoundingClientRect();
+			const { x, y } = position.value;
+			const relativePosition = {
+				x: x - container.scrollLeft,
+				y: y - container.scrollTop
+			};
+			if (relativePosition.x >= 0 && relativePosition.y >= 0) {
+				handleAutoScroll(container, targetRect, relativePosition);
+				relativePosition.x += container.scrollLeft;
+				relativePosition.y += container.scrollTop;
+				position.value = relativePosition;
+			}
+		}, 1e3 / 60);
+	};
+	const stopAutoScroll = () => {
+		if (autoScrollInterval) {
+			clearInterval(autoScrollInterval);
+			autoScrollInterval = null;
+		}
+	};
+	const isPointerNearEdge = (pointer, container, margin, targetRect) => {
+		const [marginX, marginY] = typeof margin === "number" ? [margin, margin] : [margin.x, margin.y];
+		const { clientWidth, clientHeight } = container;
+		return pointer.x < marginX || pointer.x + targetRect.width > clientWidth - marginX || pointer.y < marginY || pointer.y + targetRect.height > clientHeight - marginY;
+	};
+	const checkAutoScroll = () => {
+		if (toValue(options.disabled) || !pressedDelta.value) return;
+		const container = toValue(containerElement);
+		if (!container) return;
+		const targetRect = toValue(target).getBoundingClientRect();
+		const { x, y } = position.value;
+		const relativePosition = {
+			x: x - container.scrollLeft,
+			y: y - container.scrollTop
+		};
+		if (isPointerNearEdge(relativePosition, container, scrollSettings.margin, targetRect)) startAutoScroll();
+		else stopAutoScroll();
+	};
+	if (toValue(autoScroll)) watch(position, checkAutoScroll);
+	const start = (e) => {
+		var _container$getBoundin;
+		if (!toValue(buttons).includes(e.button)) return;
+		if (toValue(options.disabled) || !filterEvent(e)) return;
+		if (toValue(exact) && e.target !== toValue(target)) return;
+		const container = toValue(containerElement);
+		const containerRect = container === null || container === void 0 || (_container$getBoundin = container.getBoundingClientRect) === null || _container$getBoundin === void 0 ? void 0 : _container$getBoundin.call(container);
+		const targetRect = toValue(target).getBoundingClientRect();
+		const pos = {
+			x: e.clientX - (container ? targetRect.left - containerRect.left + (autoScroll ? 0 : container.scrollLeft) : targetRect.left),
+			y: e.clientY - (container ? targetRect.top - containerRect.top + (autoScroll ? 0 : container.scrollTop) : targetRect.top)
+		};
+		if ((onStart === null || onStart === void 0 ? void 0 : onStart(pos, e)) === false) return;
+		pressedDelta.value = pos;
+		handleEvent(e);
+	};
+	const move = (e) => {
+		if (toValue(options.disabled) || !filterEvent(e)) return;
+		if (!pressedDelta.value) return;
+		const container = toValue(containerElement);
+		if (container instanceof HTMLElement) clampContainerScroll(container);
+		const targetRect = toValue(target).getBoundingClientRect();
+		let { x, y } = position.value;
+		if (axis === "x" || axis === "both") {
+			x = e.clientX - pressedDelta.value.x;
+			if (container) x = Math.min(Math.max(0, x), container.scrollWidth - targetRect.width);
+		}
+		if (axis === "y" || axis === "both") {
+			y = e.clientY - pressedDelta.value.y;
+			if (container) y = Math.min(Math.max(0, y), container.scrollHeight - targetRect.height);
+		}
+		if (toValue(autoScroll) && container) {
+			if (autoScrollInterval === null) handleAutoScroll(container, targetRect, {
+				x,
+				y
+			});
+			x += container.scrollLeft;
+			y += container.scrollTop;
+		}
+		if (container && (restrictInView || autoScroll)) {
+			if (axis !== "y") {
+				const relativeX = x - container.scrollLeft;
+				if (relativeX < 0) x = container.scrollLeft;
+				else if (relativeX > container.clientWidth - targetRect.width) x = container.clientWidth - targetRect.width + container.scrollLeft;
+			}
+			if (axis !== "x") {
+				const relativeY = y - container.scrollTop;
+				if (relativeY < 0) y = container.scrollTop;
+				else if (relativeY > container.clientHeight - targetRect.height) y = container.clientHeight - targetRect.height + container.scrollTop;
+			}
+		}
+		position.value = {
+			x,
+			y
+		};
+		onMove === null || onMove === void 0 || onMove(position.value, e);
+		handleEvent(e);
+	};
+	const end = (e) => {
+		if (toValue(options.disabled) || !filterEvent(e)) return;
+		if (!pressedDelta.value) return;
+		pressedDelta.value = void 0;
+		if (autoScroll) stopAutoScroll();
+		onEnd === null || onEnd === void 0 || onEnd(position.value, e);
+		handleEvent(e);
+	};
+	if (isClient) {
+		const config = () => {
+			var _options$capture;
+			return {
+				capture: (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : true,
+				passive: !toValue(preventDefault)
+			};
+		};
+		useEventListener(draggingHandle, "pointerdown", start, config);
+		useEventListener(draggingElement, "pointermove", move, config);
+		useEventListener(draggingElement, ["pointerup", "pointercancel"], end, config);
+	}
+	return {
+		...toRefs$1(position),
+		position,
+		isDragging: computed(() => !!pressedDelta.value),
+		style: computed(() => `
+      left: ${position.value.x}px;
+      top: ${position.value.y}px;
+      ${autoScroll ? "text-wrap: nowrap;" : ""}
+    `)
+	};
+}
+Number.POSITIVE_INFINITY;
+//#endregion
+//#region src/action-set-layout.ts
+/** SheetNav root is `<footer class="desktop__sheetnav">`; cluster holds tabs + toolbar. */
+var SHEET_NAV_CLUSTER_SELECTOR = ".desktop__sheetnav .sheetnav-footer-cluster";
+/** Maximum viewport Y for the bottom edge of the tile rail (above SheetNav). */
+function maxRailBottomY(bounds) {
+	const { margin, innerHeight, sheetNavTop } = bounds;
+	if (sheetNavTop === null) return innerHeight - margin;
+	return sheetNavTop - margin;
+}
+function maxTopForRailHeight(railHeight, bounds) {
+	const margin = bounds.margin;
+	return Math.max(margin, maxRailBottomY(bounds) - railHeight);
+}
+function clampTileTop(top, railHeight, bounds) {
+	const margin = bounds.margin;
+	const maxTop = maxTopForRailHeight(railHeight, bounds);
+	return Math.min(Math.max(margin, top), maxTop);
+}
+function isAtLowerVerticalLimit(top, railHeight, bounds, epsilon = 1) {
+	return top >= maxTopForRailHeight(railHeight, bounds) - epsilon;
+}
+//#endregion
+//#region src/action-set-layout-session.ts
+var session = { tileTopPx: null };
+function readActionSetLayoutSession() {
+	return session;
+}
+function writeActionSetLayoutSession(partial) {
+	if (partial.tileTopPx !== void 0) session.tileTopPx = partial.tileTopPx;
+}
+//#endregion
 //#region src/icons/index.ts
 /**
 * Shared 24×24 stroke chrome for ActionSet and shell icons.
@@ -235,68 +622,186 @@ var ActionSetIconHelp = actionSetIcon("ActionSetIconHelp", () => [
 ]);
 //#endregion
 //#region src/components/ActionSet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = {
+var _hoisted_1$2 = { class: "action-set" };
+var _hoisted_2$2 = { class: "action-set__drawer-header" };
+var _hoisted_3$2 = { class: "action-set__drawer-body" };
+var _hoisted_4$2 = {
+	key: 1,
+	class: "action-set__actions-list"
+};
+var _hoisted_5$2 = ["aria-label"];
+var _hoisted_6$1 = {
+	class: "action-set__actions-group-label",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = ["onClick"];
+var _hoisted_8 = ["href"];
+var _hoisted_9 = ["href"];
+var _hoisted_10 = ["disabled", "onClick"];
+var _hoisted_11 = {
+	key: 0,
+	class: "action-set__actions-empty"
+};
+var _hoisted_12 = {
+	key: 1,
+	class: "action-set__drawer-empty"
+};
+var _hoisted_13 = ["aria-hidden"];
+var _hoisted_14 = {
 	class: "action-set__tile",
 	role: "presentation"
 };
-var _hoisted_2$2 = ["aria-expanded"];
-var _hoisted_3$2 = [
+var _hoisted_15 = ["aria-expanded"];
+var _hoisted_16 = [
 	"aria-label",
 	"aria-current",
 	"title",
 	"onClick"
 ];
-var _hoisted_4$2 = {
+var _hoisted_17 = {
 	key: 1,
 	class: "action-set__item-fallback",
 	"aria-hidden": "true"
 };
-var _hoisted_5$2 = {
+var _hoisted_18 = {
 	key: 2,
 	class: "action-set__item-badge"
 };
-var _hoisted_6$1 = { class: "action-set__drawer-header" };
-var _hoisted_7 = { class: "action-set__drawer-body" };
-var _hoisted_8 = {
-	key: 0,
-	class: "action-set__actions-list"
-};
-var _hoisted_9 = ["aria-label"];
-var _hoisted_10 = {
-	class: "action-set__actions-group-label",
-	"aria-hidden": "true"
-};
-var _hoisted_11 = ["onClick"];
-var _hoisted_12 = ["href"];
-var _hoisted_13 = ["href"];
-var _hoisted_14 = ["disabled", "onClick"];
-var _hoisted_15 = {
-	key: 0,
-	class: "action-set__actions-empty"
-};
-var _hoisted_16 = {
-	key: 1,
-	class: "action-set__drawer-empty"
-};
 var ACTIONS_TAB_ID = "__actions__";
 var SEARCH_TAB_ID = "__search__";
-var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+//#endregion
+//#region src/components/ActionSet.vue
+var ActionSet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "ActionSet",
 	props: {
 		slots: { default: () => [] },
 		elements: { default: () => [] },
-		controller: {}
+		controller: {},
+		search: { type: Function },
+		searchPlaceholder: { default: "Type a command or search..." }
 	},
-	emits: ["actionClick", "search"],
+	emits: ["actionClick", "searchSelect"],
 	setup(__props, { emit: __emit }) {
+		let tileGapProbe = null;
 		const emit = __emit;
 		const isExpanded = ref(true);
+		function readInitialTileTopPx() {
+			if (typeof window === "undefined") return 0;
+			const saved = readActionSetLayoutSession();
+			if (saved.tileTopPx !== null) return saved.tileTopPx;
+			return resolveOffsetTopPx();
+		}
+		const initialTileTopPx = readInitialTileTopPx();
+		const railLayoutReady = ref(false);
 		const drawerEl = ref(null);
+		const searchEl = ref(null);
 		const lastFocusedBeforeDrawer = ref(null);
 		const activeSlot = computed(() => __props.slots.find((slot) => slot.id === __props.controller.activeSlotId.value) ?? null);
 		const hasActions = computed(() => __props.elements.length > 0);
-		const activeTabId = computed(() => __props.controller.isActionsOpen.value ? ACTIONS_TAB_ID : __props.controller.activeSlotId.value);
+		const activeTabId = computed(() => {
+			if (__props.controller.isSearchOpen.value) return SEARCH_TAB_ID;
+			if (__props.controller.isActionsOpen.value) return ACTIONS_TAB_ID;
+			return __props.controller.activeSlotId.value;
+		});
 		const drawerOpen = computed(() => __props.controller.isDrawerOpen.value);
+		const tileRail = useTemplateRef("tileRail");
+		const dragHandle = useTemplateRef("dragHandle");
+		function resolveTileGapPx() {
+			if (typeof document === "undefined") return 4;
+			if (!tileGapProbe) {
+				tileGapProbe = document.createElement("div");
+				tileGapProbe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(--sc-action-set-tile-gap);";
+				document.body.append(tileGapProbe);
+			}
+			const px = Number.parseFloat(getComputedStyle(tileGapProbe).width);
+			return Number.isFinite(px) && px > 0 ? px : 4;
+		}
+		function resolveOffsetTopPx() {
+			if (typeof document === "undefined") return 0;
+			const raw = getComputedStyle(document.documentElement).getPropertyValue("--sc-action-set-offset-top").trim() || "35vh";
+			if (raw.endsWith("vh")) return Number.parseFloat(raw) / 100 * window.innerHeight;
+			if (raw.endsWith("px")) return Number.parseFloat(raw);
+			return window.innerHeight * .35;
+		}
+		function resolveSheetNavTopPx() {
+			if (typeof document === "undefined") return null;
+			const cluster = document.querySelector(SHEET_NAV_CLUSTER_SELECTOR);
+			if (!cluster) return null;
+			const top = cluster.getBoundingClientRect().top;
+			return Number.isFinite(top) ? top : null;
+		}
+		function layoutBounds() {
+			return {
+				margin: resolveTileGapPx(),
+				innerHeight: typeof window === "undefined" ? 0 : window.innerHeight,
+				sheetNavTop: resolveSheetNavTopPx()
+			};
+		}
+		function clampTileTop$1(top) {
+			if (typeof window === "undefined") return top;
+			return clampTileTop(top, tileRail.value?.offsetHeight ?? 0, layoutBounds());
+		}
+		function isAtLowerVerticalLimit$1() {
+			if (!tileRail.value) return false;
+			return isAtLowerVerticalLimit(tileTopPx.value, tileRail.value.offsetHeight, layoutBounds());
+		}
+		function applyVerticalLimits() {
+			tileTopPx.value = clampTileTop$1(tileTopPx.value);
+		}
+		function persistLayoutSession() {
+			writeActionSetLayoutSession({ tileTopPx: tileTopPx.value });
+		}
+		const { y: tileTopPx } = useDraggable(tileRail, {
+			axis: "y",
+			handle: dragHandle,
+			preventDefault: true,
+			initialValue: {
+				x: 0,
+				y: initialTileTopPx
+			},
+			onMove: (pos) => {
+				tileTopPx.value = clampTileTop$1(pos.y);
+			},
+			onEnd: () => {
+				applyVerticalLimits();
+				persistLayoutSession();
+			}
+		});
+		onMounted(() => {
+			nextTick(() => {
+				applyVerticalLimits();
+				persistLayoutSession();
+				requestAnimationFrame(() => {
+					applyVerticalLimits();
+					railLayoutReady.value = true;
+				});
+			});
+		});
+		watch(tileTopPx, () => {
+			persistLayoutSession();
+		});
+		watch(isExpanded, () => {
+			nextTick(() => {
+				applyVerticalLimits();
+			});
+		});
+		useEventListener(typeof window !== "undefined" ? window : null, "resize", () => {
+			applyVerticalLimits();
+		});
+		let sheetNavResizeObserver = null;
+		onMounted(() => {
+			const cluster = document.querySelector(SHEET_NAV_CLUSTER_SELECTOR);
+			if (!cluster || typeof ResizeObserver === "undefined") return;
+			sheetNavResizeObserver = new ResizeObserver(() => {
+				applyVerticalLimits();
+			});
+			sheetNavResizeObserver.observe(cluster);
+		});
+		onUnmounted(() => {
+			sheetNavResizeObserver?.disconnect();
+			sheetNavResizeObserver = null;
+		});
+		const tileRailStyle = computed(() => ({ top: `${tileTopPx.value}px` }));
 		const allTabs = computed(() => {
 			const tabs = [{
 				id: SEARCH_TAB_ID,
@@ -329,12 +834,37 @@ var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			event.stopPropagation();
 			__props.controller.close();
 		}
-		function onToggle() {
-			isExpanded.value = !isExpanded.value;
+		async function onToggle() {
+			if (isExpanded.value) {
+				isExpanded.value = false;
+				await nextTick();
+				applyVerticalLimits();
+				return;
+			}
+			const atLowerLimit = isAtLowerVerticalLimit$1();
+			const heightBefore = tileRail.value?.offsetHeight ?? 0;
+			isExpanded.value = true;
+			await nextTick();
+			if (atLowerLimit && tileRail.value) {
+				const heightAfter = tileRail.value.offsetHeight;
+				tileTopPx.value -= heightAfter - heightBefore;
+			}
+			applyVerticalLimits();
+		}
+		function searchResultTitle(result) {
+			return typeof result === "object" && result !== null && "title" in result ? String(result.title) : "";
+		}
+		function searchResultDescription(result) {
+			return typeof result === "object" && result !== null && "description" in result ? String(result.description) : "";
+		}
+		function onSearchSelect(result) {
+			emit("searchSelect", result);
 		}
 		function onTileClick(tabId) {
-			if (tabId === SEARCH_TAB_ID) emit("search");
-			else if (drawerOpen.value && activeTabId.value === tabId) __props.controller.close();
+			if (tabId === SEARCH_TAB_ID) {
+				if (drawerOpen.value && activeTabId.value === SEARCH_TAB_ID) __props.controller.close();
+				else __props.controller.openSearch();
+			} else if (drawerOpen.value && activeTabId.value === tabId) __props.controller.close();
 			else if (tabId === ACTIONS_TAB_ID) __props.controller.openActions();
 			else __props.controller.openSlot(tabId);
 		}
@@ -342,92 +872,119 @@ var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (action) emit("actionClick", label, action);
 		}
 		watch(drawerOpen, async (open) => {
+			if (typeof document === "undefined") return;
 			if (open) {
 				lastFocusedBeforeDrawer.value = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 				await nextTick();
+				if (__props.controller.isSearchOpen.value) {
+					searchEl.value?.focus();
+					return;
+				}
 				drawerEl.value?.querySelector("button:not([disabled]), [href], input, select, textarea")?.focus();
 				return;
 			}
 			lastFocusedBeforeDrawer.value?.focus();
 			lastFocusedBeforeDrawer.value = null;
 		});
+		watch(() => __props.controller.isSearchOpen.value, async (open) => {
+			if (!open) return;
+			await nextTick();
+			searchEl.value?.reset();
+			searchEl.value?.focus();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["action-set", {
-				"action-set--expanded": isExpanded.value,
-				"action-set--drawer-open": drawerOpen.value
-			}]) }, [createElementVNode("div", _hoisted_1$2, [createElementVNode("button", {
-				type: "button",
-				class: normalizeClass(["action-set__toggle", { "action-set__toggle--expanded": isExpanded.value }]),
-				"aria-label": "Toggle menu",
-				"aria-expanded": isExpanded.value,
-				onClick: onToggle
-			}, " + ", 10, _hoisted_2$2), isExpanded.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(allTabs.value, (tab) => {
-				return openBlock(), createElementBlock("button", {
-					key: tab.id,
-					type: "button",
-					class: normalizeClass(["action-set__item", { "action-set__item--active": drawerOpen.value && activeTabId.value === tab.id }]),
-					"aria-label": tab.label,
-					"aria-current": drawerOpen.value && activeTabId.value === tab.id ? "page" : void 0,
-					title: tab.label,
-					onClick: ($event) => onTileClick(tab.id)
-				}, [tab.icon ? (openBlock(), createBlock(resolveDynamicComponent(tab.icon), {
-					key: 0,
-					class: "action-set__item-icon"
-				})) : (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(slotFallback(tab.label)), 1)), tabBadge(tab) > 0 ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(tabBadge(tab)), 1)) : createCommentVNode("", true)], 10, _hoisted_3$2);
-			}), 128)) : createCommentVNode("", true)]), drawerOpen.value ? (openBlock(), createElementBlock("aside", {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [drawerOpen.value ? (openBlock(), createElementBlock("aside", {
 				key: 0,
 				ref_key: "drawerEl",
 				ref: drawerEl,
 				class: "action-set__drawer",
 				"aria-label": "Side panel",
 				onKeydown: onDrawerKeydown
-			}, [createElementVNode("header", _hoisted_6$1, [createElementVNode("button", {
+			}, [createElementVNode("header", _hoisted_2$2, [createElementVNode("button", {
 				type: "button",
 				class: "action-set__drawer-close",
 				"aria-label": "Close panel",
 				onClick: _cache[0] || (_cache[0] = ($event) => __props.controller.close())
-			}, " × ")]), createElementVNode("div", _hoisted_7, [activeTabId.value === ACTIONS_TAB_ID ? (openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (el) => {
+			}, " × ")]), createElementVNode("div", _hoisted_3$2, [activeTabId.value === SEARCH_TAB_ID && __props.search ? (openBlock(), createBlock(CommandSearch_default, {
+				key: 0,
+				ref_key: "searchEl",
+				ref: searchEl,
+				search: __props.search,
+				placeholder: __props.searchPlaceholder,
+				embedded: "",
+				autofocus: "",
+				onSelect: onSearchSelect
+			}, {
+				title: withCtx(({ result }) => [renderSlot(_ctx.$slots, "search-title", { result }, () => [createTextVNode(toDisplayString(searchResultTitle(result)), 1)], true)]),
+				content: withCtx(({ result }) => [renderSlot(_ctx.$slots, "search-content", { result }, () => [createTextVNode(toDisplayString(searchResultDescription(result)), 1)], true)]),
+				_: 3
+			}, 8, ["search", "placeholder"])) : activeTabId.value === ACTIONS_TAB_ID ? (openBlock(), createElementBlock("div", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (el) => {
 				return openBlock(), createElementBlock(Fragment, { key: el.label }, [el.type === "dropdown" ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: "action-set__actions-group",
 					role: "group",
 					"aria-label": el.label
-				}, [createElementVNode("p", _hoisted_10, toDisplayString(el.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(el.actions, (item) => {
+				}, [createElementVNode("p", _hoisted_6$1, toDisplayString(el.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(el.actions, (item) => {
 					return openBlock(), createElementBlock(Fragment, { key: item.label }, [item.action ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
 						class: "action-set__actions-list-item action-set__actions-list-item--nested",
 						onClick: ($event) => onActionClick(item.label, item.action)
-					}, toDisplayString(item.label), 9, _hoisted_11)) : item.link ? (openBlock(), createElementBlock("a", {
+					}, toDisplayString(item.label), 9, _hoisted_7)) : item.link ? (openBlock(), createElementBlock("a", {
 						key: 1,
 						href: item.link,
 						class: "action-set__actions-list-item action-set__actions-list-item--nested"
-					}, toDisplayString(item.label), 9, _hoisted_12)) : createCommentVNode("", true)], 64);
-				}), 128))], 8, _hoisted_9)) : !el.action && el.link ? (openBlock(), createElementBlock("a", {
+					}, toDisplayString(item.label), 9, _hoisted_8)) : createCommentVNode("", true)], 64);
+				}), 128))], 8, _hoisted_5$2)) : !el.action && el.link ? (openBlock(), createElementBlock("a", {
 					key: 1,
 					href: el.link,
 					class: "action-set__actions-list-item"
-				}, toDisplayString(el.label), 9, _hoisted_13)) : (openBlock(), createElementBlock("button", {
+				}, toDisplayString(el.label), 9, _hoisted_9)) : (openBlock(), createElementBlock("button", {
 					key: 2,
 					type: "button",
 					class: "action-set__actions-list-item",
 					disabled: el.disabled,
 					onClick: ($event) => onActionClick(el.label, el.action)
-				}, toDisplayString(el.label), 9, _hoisted_14))], 64);
-			}), 128)), __props.elements.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_15, "No actions available")) : createCommentVNode("", true)])) : activeSlot.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [activeSlot.value.component ? (openBlock(), createBlock(resolveDynamicComponent(activeSlot.value.component), { key: activeSlot.value.id })) : (openBlock(), createElementBlock("p", _hoisted_16, "No content"))], 64)) : createCommentVNode("", true)])], 544)) : createCommentVNode("", true)], 2);
+				}, toDisplayString(el.label), 9, _hoisted_10))], 64);
+			}), 128)), __props.elements.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_11, "No actions available")) : createCommentVNode("", true)])) : activeSlot.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [activeSlot.value.component ? (openBlock(), createBlock(resolveDynamicComponent(activeSlot.value.component), { key: activeSlot.value.id })) : (openBlock(), createElementBlock("p", _hoisted_12, "No content"))], 64)) : createCommentVNode("", true)])], 544)) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "tileRail",
+				ref: tileRail,
+				class: normalizeClass(["action-set__rail", {
+					"action-set__rail--drawer-open": drawerOpen.value,
+					"action-set__rail--layout-ready": railLayoutReady.value
+				}]),
+				style: normalizeStyle(tileRailStyle.value),
+				"aria-hidden": !railLayoutReady.value
+			}, [createElementVNode("button", {
+				ref_key: "dragHandle",
+				ref: dragHandle,
+				type: "button",
+				class: "action-set__drag-handle",
+				"aria-label": "Drag action set vertically",
+				title: "Drag vertically"
+			}, null, 512), createElementVNode("div", _hoisted_14, [createElementVNode("button", {
+				type: "button",
+				class: normalizeClass(["action-set__toggle", { "action-set__toggle--expanded": isExpanded.value }]),
+				"aria-label": "Toggle menu",
+				"aria-expanded": isExpanded.value,
+				onClick: onToggle
+			}, " + ", 10, _hoisted_15), isExpanded.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(allTabs.value, (tab) => {
+				return openBlock(), createElementBlock("button", {
+					key: tab.id,
+					type: "button",
+					class: normalizeClass(["action-set__item", { "action-set__item--active": drawerOpen.value && activeTabId.value === tab.id }]),
+					"aria-label": tab.label,
+					"aria-current": drawerOpen.value && activeTabId.value === tab.id ? "page" : void 0,
+					title: tab.label,
+					onClick: ($event) => onTileClick(tab.id)
+				}, [tab.icon ? (openBlock(), createBlock(resolveDynamicComponent(tab.icon), {
+					key: 0,
+					class: "action-set__item-icon"
+				})) : (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(slotFallback(tab.label)), 1)), tabBadge(tab) > 0 ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(tabBadge(tab)), 1)) : createCommentVNode("", true)], 10, _hoisted_16);
+			}), 128)) : createCommentVNode("", true)])], 14, _hoisted_13)]);
 		};
 	}
-});
-//#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
-//#region src/components/ActionSet.vue
-var ActionSet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ActionSet_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-40295597"]]);
+}), [["__scopeId", "data-v-8ca97265"]]);
 //#endregion
 //#region src/sheet-nav-toolbar.ts
 /** The id of the element SheetNav renders for footer controls, left of its tabs. */
@@ -515,15 +1072,24 @@ var actionSetKey = Symbol("actionSet");
 function createActionSet(options) {
 	const activeSlotId = ref(null);
 	const actionsOpen = ref(false);
+	const searchOpen = ref(false);
 	const previewSubject = shallowRef(null);
 	const previewId = ref(void 0);
 	function openActions() {
 		activeSlotId.value = null;
+		searchOpen.value = false;
 		closePreview();
 		actionsOpen.value = true;
 	}
+	function openSearch() {
+		activeSlotId.value = null;
+		actionsOpen.value = false;
+		closePreview();
+		searchOpen.value = true;
+	}
 	function openSlot(slotId) {
 		actionsOpen.value = false;
+		searchOpen.value = false;
 		if (activeSlotId.value === slotId) return;
 		activeSlotId.value = slotId;
 		closePreview();
@@ -543,6 +1109,7 @@ function createActionSet(options) {
 	function close() {
 		activeSlotId.value = null;
 		actionsOpen.value = false;
+		searchOpen.value = false;
 		closePreview();
 	}
 	return {
@@ -552,11 +1119,13 @@ function createActionSet(options) {
 		previewSubject: computed(() => previewSubject.value),
 		isPreviewOpen: computed(() => previewSubject.value !== null),
 		isActionsOpen: computed(() => actionsOpen.value),
-		isDrawerOpen: computed(() => actionsOpen.value || activeSlotId.value !== null),
+		isSearchOpen: computed(() => searchOpen.value),
+		isDrawerOpen: computed(() => actionsOpen.value || searchOpen.value || activeSlotId.value !== null),
 		present,
 		closePreview,
 		close,
 		openActions,
+		openSearch,
 		openSlot
 	};
 }
@@ -591,7 +1160,10 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		availableDoctypes: { default: () => [] },
 		routeAdapter: {},
 		actionSetSlots: {},
-		hostActions: {}
+		hostActions: {},
+		breadcrumbs: {},
+		commandSearch: { type: Function },
+		commandSearchPlaceholder: { default: "Type a command or search..." }
 	},
 	emits: [
 		"action",
@@ -611,7 +1183,6 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		}
 		const fieldErrors = computed(() => currentView.value === "record" ? validationStore?.errorsByField ?? {} : {});
 		const loading = ref(false);
-		const commandPaletteOpen = ref(false);
 		const draftRecord = ref({});
 		const currentViewData = computed({
 			get() {
@@ -827,15 +1398,23 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}
 			return breadcrumbs;
 		});
+		const sheetBreadcrumbs = computed(() => __props.breadcrumbs ?? navigationBreadcrumbs.value);
+		const resolvedCommandSearch = (query) => {
+			if (__props.commandSearch) return __props.commandSearch(query);
+			return searchCommands(query);
+		};
 		const searchCommands = (query) => {
 			const commands = [{
 				title: "Go Home",
 				description: "Navigate to the home page",
 				action: () => void doNavigate({ view: "doctypes" })
 			}, {
-				title: "Toggle Command Palette",
-				description: "Open/close the command palette",
-				action: () => commandPaletteOpen.value = !commandPaletteOpen.value
+				title: "Toggle Search",
+				description: "Open/close the search panel",
+				action: () => {
+					if (actionSetController.isSearchOpen.value) actionSetController.close();
+					else actionSetController.openSearch();
+				}
 			}];
 			if (routeDoctype.value) {
 				commands.push({
@@ -867,7 +1446,10 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		};
 		const executeCommand = (command) => {
 			command.action();
-			commandPaletteOpen.value = false;
+			actionSetController.close();
+		};
+		const onSearchSelect = (result) => {
+			executeCommand(result);
 		};
 		const listRecordsFetcher = (options) => {
 			if (!stonecrop.value || !currentDoctype.value) return Promise.resolve({
@@ -1146,13 +1728,9 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const handleKeydown = (event) => {
 			if ((event.ctrlKey || event.metaKey) && event.key === "k") {
 				event.preventDefault();
-				commandPaletteOpen.value = true;
+				actionSetController.openSearch();
 			}
 			if (event.key === "Escape") {
-				if (commandPaletteOpen.value) {
-					commandPaletteOpen.value = false;
-					return;
-				}
 				if (actionSetController.isPreviewOpen.value) {
 					actionSetController.closePreview();
 					return;
@@ -1202,7 +1780,7 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					"data",
 					"schema",
 					"errors"
-				])) : !unref(stonecrop) ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[3] || (_cache[3] = [createElementVNode("p", null, "Initializing Stonecrop...", -1)])])) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("p", null, "Loading " + toDisplayString(currentView.value) + " data...", 1)]))]), actionSetPreviewSubject.value ? (openBlock(), createElementBlock("aside", _hoisted_5, [createElementVNode("header", { class: "desktop__preview-header" }, [createElementVNode("button", {
+				])) : !unref(stonecrop) ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[1] || (_cache[1] = [createElementVNode("p", null, "Initializing Stonecrop...", -1)])])) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("p", null, "Loading " + toDisplayString(currentView.value) + " data...", 1)]))]), actionSetPreviewSubject.value ? (openBlock(), createElementBlock("aside", _hoisted_5, [createElementVNode("header", { class: "desktop__preview-header" }, [createElementVNode("button", {
 					type: "button",
 					class: "desktop__preview-close",
 					"aria-label": "Close preview",
@@ -1212,35 +1790,31 @@ var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					slots: visibleActionSetSlots.value,
 					elements: actionElements.value,
 					controller: unref(actionSetController),
+					search: resolvedCommandSearch,
+					"search-placeholder": __props.commandSearchPlaceholder,
 					onActionClick: handleActionClick,
-					onSearch: _cache[1] || (_cache[1] = ($event) => commandPaletteOpen.value = true)
-				}, null, 8, [
+					onSearchSelect
+				}, {
+					"search-title": withCtx(({ result }) => [createTextVNode(toDisplayString(result.title), 1)]),
+					"search-content": withCtx(({ result }) => [createTextVNode(toDisplayString(result.description), 1)]),
+					_: 1
+				}, 8, [
 					"slots",
 					"elements",
-					"controller"
+					"controller",
+					"search-placeholder"
 				]),
 				createVNode(SheetNav_default, {
 					class: "desktop__sheetnav",
-					breadcrumbs: navigationBreadcrumbs.value
+					breadcrumbs: sheetBreadcrumbs.value
 				}, {
 					toolbar: withCtx(() => [renderSlot(_ctx.$slots, "sheetnav-toolbar", {}, void 0, true)]),
 					_: 3
-				}, 8, ["breadcrumbs"]),
-				createVNode(CommandPalette_default, {
-					"is-open": commandPaletteOpen.value,
-					search: searchCommands,
-					placeholder: "Type a command or search...",
-					onSelect: executeCommand,
-					onClose: _cache[2] || (_cache[2] = ($event) => commandPaletteOpen.value = false)
-				}, {
-					title: withCtx(({ result }) => [createTextVNode(toDisplayString(result.title), 1)]),
-					content: withCtx(({ result }) => [createTextVNode(toDisplayString(result.description), 1)]),
-					_: 1
-				}, 8, ["is-open"])
+				}, 8, ["breadcrumbs"])
 			], 2);
 		};
 	}
-}), [["__scopeId", "data-v-378bae6b"]]);
+}), [["__scopeId", "data-v-9ccbbb36"]]);
 //#endregion
 //#region src/plugins/index.ts
 /**