@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/CommandPalette.web.tsrx.js

@@ -1,125 +1,494 @@
 import { Icon } from "./Icon.web.tsrx.js";
-import { TextInput } from "./TextInput.web.tsrx.js";
+import { groupTypeaheadItems } from "./typeahead-source.js";
 import { Overlay } from "./Overlay.web.tsrx.js";
-import { bag3, bag5, bag7, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, setAriaAttribute, setEventHandler, setStyle, sibling, template, useEffect, useState } from "octane";
-import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+import { useStore } from "./use-store.web.tsrx.js";
+import { createCommandPaletteController } from "./command-palette-state.js";
+import { Fragment, bag1, bag12, bag3, bag4, bag5, bag6, bagOf, child, clone, componentSlotVoid, createElement, createScopedElement, createScopedValue, delegateEvents, drainFrag, evt2e, evt2u, hookSlots, ifBlock, mapSlot, markChildrenBlock, markDangerouslySetInnerHTMLChildren, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyleProperty, sibling, snapshotSpread, template, useEffect, useId, useRef, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, bindSignalValue, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish0, hookMemoPublish1, replaceRef, setAriaAttributeIfChanged, setBooleanAttributeIfChanged, setPlainAttribute, setPlainAttributeIfChanged, updateFreshClassName } from "octane/internal/client";
 //#region src/CommandPalette.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["click"]);
-var _t$0 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
-var _t$1 = /* @__PURE__ */ template("<div role=\"option\"><!><!></div>");
-var _t$2 = /* @__PURE__ */ template("<div><!><div role=\"listbox\" class=\"vx-menu-list vx-cmdk-list\"><!></div></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(5);
-var _key$3 = (item) => item.key;
-function __then$5(__props, __s, __extra) {
+delegateEvents([
+	"click",
+	"input",
+	"keydown",
+	"mousedown",
+	"mouseenter"
+]);
+var _t$0 = /* @__PURE__ */ template("<button type=\"button\">Retry</button>");
+var _t$1 = /* @__PURE__ */ template("<div class=\"vx-cmdk-heading\" aria-hidden=\"true\"></div>");
+var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$3 = /* @__PURE__ */ template("<span class=\"vx-cmdk-description\"></span>");
+var _t$4 = /* @__PURE__ */ template("<!><div class=\"vx-cmdk-item-content\"><span class=\"vx-menu-item-label\"></span><!></div><!>", 0, 1);
+var _t$5 = /* @__PURE__ */ template("<div role=\"option\"><!></div>");
+var _t$6 = /* @__PURE__ */ template("<div><!><!></div>");
+var _t$7 = /* @__PURE__ */ template("<div class=\"vx-cmdk-footer\"></div>");
+var _t$8 = /* @__PURE__ */ template("<div><div class=\"vx-cmdk-input-row\"><input class=\"vx-input vx-cmdk-search\" type=\"text\" role=\"combobox\" aria-autocomplete=\"list\" data-octane-input=\"i:4eee0b8f\" autoComplete=\"off\"/><button type=\"button\" class=\"vx-input-clear\" aria-label=\"Clear search\">×</button><button type=\"button\" class=\"vx-cmdk-cancel\">Cancel</button></div><div class=\"vx-cmdk-status\" role=\"status\" aria-live=\"polite\"></div><!><div role=\"listbox\" aria-label=\"Commands\" class=\"vx-menu-list vx-cmdk-list\"><!></div><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(10);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var __event = (__eventArg, controller, input) => {
+	controller.search("");
+	input.current?.focus();
+};
+function __then$3(__props, __s, __extra) {
+	const controller = __extra[0];
+	const state = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		setEventHandler(_root, "$$click", () => controller.search(state.query));
+		_b = bag1(__s, _root, _m0);
+	} else setEventHandler(_b.a, "$$click", () => controller.search(state.query));
+}
+var _key$5 = (group, gi) => group.heading ?? gi;
+function __then$7(__props, __s, __extra) {
+	const group = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, group.heading, "b:2a1904eb", null, void 0, void 0, void 0, true);
+}
+function __then$12(__props, __s, __extra) {
 	const __block = __s.block;
 	const item = __extra[0];
-	componentSlot(__s, 0, __block.parentNode, Icon, { "name": item.icon }, __block.endMarker, void 0, 2, void 0, void 0, "c:6205bbb8");
+	const props = __extra[1];
+	const state = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$2);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderItem(item, item.id === state.selected), "b:9102e13f", _b.b, true, void 0, true, void 0);
 }
-function __then$8(__props, __s, __extra) {
+function __then$17(__props, __s, __extra) {
 	const item = __extra[0];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0;
-		const _root = clone(_t$0);
+		const _root = clone(_t$3);
 		_m0 = _root;
 		_b = bag3(__s, _root, _m0, null, void 0);
 	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:977bb8c3", null, void 0, void 0, void 0, true);
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.description, "b:1d7e4489", null, void 0, void 0, void 0, true);
+}
+function __else$14(__props, __s, __extra) {
+	const __block = __s.block;
+	const item = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m6, _m9;
+		const _root = clone(_t$4);
+		const _el0 = sibling(child(_root), 1);
+		_m0 = _el0;
+		_m1 = sibling(child(_el0), 1);
+		_m2 = __block.parentNode;
+		_m3 = child(_root);
+		_m6 = child(_el0);
+		_m9 = sibling(_el0, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag12(__s, null, _m0, _m1, _m2, _m3, null, void 0, _m6, null, void 0, _m9, null, void 0);
+	}
+	_b.m = bindSignalChild(__s, _b.m, 1, _b.c, item.icon ? createScopedValue(() => createElementFromConfig("c:43a8e459", Icon, { name: item.icon })) : null, "b:3f2d0a3f", _b.d, true, void 0, void 0, void 0);
+	_b.n = bindSignalChild(__s, _b.n, 2, _b.g, item.label, "b:2db8aebe", null, void 0, void 0, void 0, true);
+	{
+		const __ifCondition = item.description;
+		ifBlock(__s, 3, _b.a, __ifCondition, __then$17, null, _b.b, __ifCondition ? [item] : void 0);
+	}
+	_b.o = bindSignalChild(__s, _b.o, 4, _b.c, item.shortcut ? createScopedElement("kbd", { className: "vx-cmdk-shortcut" }, () => item.shortcut) : null, "b:9bf09718", _b.j, true, void 0, void 0, void 0);
 }
-function __item$4(item, __s, __extra) {
-	const select = __extra[0];
+function __item$11(item, __s, __extra) {
+	const optionId = __extra[0];
+	const controller = __extra[1];
+	const props = __extra[2];
+	const state = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m5;
+		const _root = clone(_t$5);
+		_m1 = _root;
+		setEventHandler(_root, "$$mousedown", (event) => event.preventDefault());
+		setEventHandler(_root, "$$mouseenter", () => {
+			if (!item.disabled) controller.highlight(item.id);
+		});
+		setEventHandler(_root, "$$click", () => controller.select(item.id));
+		_m5 = child(_root);
+		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, void 0, _m5);
+	} else {
+		setEventHandler(_b.b, "$$mousedown", (event) => event.preventDefault());
+		setEventHandler(_b.b, "$$mouseenter", () => {
+			if (!item.disabled) controller.highlight(item.id);
+		});
+		setEventHandler(_b.b, "$$click", () => controller.select(item.id));
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", optionId(item.id), "b:d52cfb23", setPlainAttribute);
+	_b.c = setAriaAttributeIfChanged(item.id === state.selected, _b.c, _b.b, "aria-selected");
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "aria-disabled", item.disabled || void 0, "b:57a96e77", setAriaAttribute);
+	_b.e = updateFreshClassName([
+		"vx-menu-item",
+		item.disabled ? "vx-menu-item--disabled" : void 0,
+		item.id === state.highlighted ? "vx-cmdk-highlighted" : void 0
+	], _b.e, _b.b);
+	ifBlock(__s, 1, _b.b, props.renderItem, __then$12, __else$14, _b.f, [
+		item,
+		props,
+		state
+	]);
+}
+function __item$6(group, __s, __extra) {
+	const __block = __s.block;
+	let __mapItems;
+	let __mapMethod$;
+	const optionId = __extra[0];
+	const controller = __extra[1];
+	const props = __extra[2];
+	const state = __extra[3];
+	__block.itemIndex;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m3, _m4;
-		const _root = clone(_t$1);
+		const _root = clone(_t$6);
 		_m1 = _root;
-		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
-		const _el0 = child(_root);
-		_m3 = _el0;
-		_m4 = sibling(_el0, 1);
+		_m3 = sibling(child(_root), 1);
+		_m4 = child(_root);
 		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, _m4);
-	} else setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:6098cd7f", setAriaAttribute);
-	_b.c = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.c, _b.b);
-	{
-		const __ifCondition = item.icon;
-		ifBlock(__s, 1, _b.b, __ifCondition, __then$5, null, _b.d, __ifCondition ? [item] : void 0);
 	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "role", group.heading != null ? "group" : void 0, "b:982b4d34", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "aria-label", group.heading ?? void 0, "b:9980059e", setAriaAttribute);
 	{
-		const __ifCondition$ = item.label != null;
-		ifBlock(__s, 2, _b.b, __ifCondition$, __then$8, null, _b.e, __ifCondition$ ? [item] : void 0);
+		const __ifCondition$ = group.heading != null;
+		ifBlock(__s, 1, _b.b, __ifCondition$, __then$7, null, _b.e, __ifCondition$ ? [group] : void 0);
+	}
+	mapSlot(__s, 2, _b.b, (__mapItems = group.items, __mapMethod$ = __mapItems.map, __mapItems), __mapMethod$, (item) => createScopedElement("div", {
+		key: item.id,
+		id: optionId(item.id),
+		role: "option",
+		"aria-selected": item.id === state.selected,
+		"aria-disabled": item.disabled || void 0,
+		className: [
+			"vx-menu-item",
+			item.disabled ? "vx-menu-item--disabled" : void 0,
+			item.id === state.highlighted ? "vx-cmdk-highlighted" : void 0
+		],
+		onMouseDown: (event) => event.preventDefault(),
+		onMouseEnter: () => {
+			if (!item.disabled) controller.highlight(item.id);
+		},
+		onClick: () => controller.select(item.id)
+	}, () => props.renderItem ? props.renderItem(item, item.id === state.selected) : createScopedElement(Fragment, {}, () => positionalChildren([
+		item.icon ? createScopedValue(() => createElementFromConfig("c:43a8e459", Icon, { name: item.icon })) : null,
+		createScopedElement("div", { className: "vx-cmdk-item-content" }, () => positionalChildren([createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label), item.description ? createScopedElement("span", { className: "vx-cmdk-description" }, () => item.description) : null])),
+		item.shortcut ? createScopedElement("kbd", { className: "vx-cmdk-shortcut" }, () => item.shortcut) : null
+	]))), (item) => item.id, __item$11, 26, [
+		optionId,
+		controller,
+		props,
+		state
+	], _b.d, 1);
+}
+function __then$24(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$7);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
 	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.footer ?? positionalChildren([
+		createElement("kbd", {}, "↑"),
+		createElement("kbd", {}, "↓"),
+		" Navigate ",
+		createElement("kbd", {}, "Enter"),
+		" Select ",
+		createElement("kbd", {}, "Esc"),
+		" Close"
+	]), "b:687089ca", null, void 0, void 0, void 0, true);
 }
+var _rm$27 = [
+	"s",
+	"h",
+	"g",
+	"r",
+	"j",
+	"i"
+];
 var __childrenBody = {};
 var CommandPalette = function CommandPalette(props, __s, __extra) {
 	const __block = __s.block;
-	const [query, setQuery] = useState("", _hs$ + 0);
-	const setOpen = (next) => {
-		if (!next) setQuery("");
-		props.onOpenChange?.(next);
-	};
-	useEffect(() => {
-		if (!props.open) return;
-		const onKey = (e) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [props.open], _hs$ + 1);
-	const shown = query ? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase())) : props.items;
-	const select = (item) => {
-		if (item.disabled) return;
-		setOpen(false);
-		item.onSelect?.();
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(5);
+	let __hkd0;
+	const controller = __hk[0] !== true ? hookMemoPublish0(__hk, 0, createCommandPaletteController(() => props)) : __hk[1];
+	useEffect(() => controller.configure(props), [
+		props.open,
+		props.searchSource,
+		props.items,
+		props.searchMode,
+		props.value,
+		props.onOpenChange,
+		props.onValueChange
+	], _hs$ + 0);
+	useEffect(() => () => controller.dispose(), [], _hs$ + 1);
+	const state = withSlot(_h$2, useStore, controller.store);
+	const generatedId = useId(_hs$ + 3);
+	const listId = `${generatedId}-commands`;
+	const input = useRef(null, _hs$ + 4);
+	const groups = (__hkd0 = state.results, __hk[2] !== true || !hookMemoEqual(__hk[3], __hkd0) ? hookMemoPublish1(__hk, 2, groupTypeaheadItems(state.results), __hkd0) : __hk[4]);
+	const optionId = (id) => `${props.id ?? listId}-item-${id}`;
+	const keyDown = (event) => {
+		controller.keyDown(event);
+		if (event.defaultPrevented && [
+			"ArrowDown",
+			"ArrowUp",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			const highlighted = controller.store.get().highlighted;
+			if (highlighted) document.getElementById(optionId(highlighted))?.scrollIntoView?.({ block: "nearest" });
+		}
 	};
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	function __children$1(__props, __s, __extra) {
 		let __mapMethod;
 		let _b = __s.slots[0];
 		if (_b === void 0) {
-			let _m1, _m4, _m5, _m6;
-			const _root = clone(_t$2);
-			_m1 = _root;
-			const _el0 = sibling(child(_root), 1);
-			_m4 = _el0;
-			_m5 = child(_el0);
-			_m6 = child(_root);
-			_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6);
+			let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m17, _m19, _m20, _m21, _m23, _m25, _m27, _m28, _m29;
+			const _root = clone(_t$8);
+			_m0 = ["vx-commandpalette", props.className];
+			_m1 = {
+				...props.width != null ? { width: props.width } : {},
+				...props.style
+			};
+			_m2 = props.id;
+			_m3 = "group";
+			_m4 = props.label ?? "Command palette";
+			_m5 = snapshotSpread(props.web);
+			_m6 = _root;
+			_m7 = bindSignalHostPropSources(__s, void 0, _root, [
+				[
+					false,
+					"className",
+					_m0
+				],
+				[
+					false,
+					"style",
+					_m1
+				],
+				[
+					false,
+					"id",
+					_m2
+				],
+				[
+					false,
+					"role",
+					_m3
+				],
+				[
+					false,
+					"aria-label",
+					_m4
+				],
+				[true, _m5]
+			], "b:dd70f5f1", true);
+			const _el0 = child(_root);
+			const _el1 = child(_el0);
+			queueRefAttach(__s, _m9 = input, _m8 = _el1);
+			(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.j, _b.i));
+			_m17 = bindSignalValue(__s, void 0, _el1, state.query, "i:4eee0b8f");
+			setEventHandler(_el1, "$$input", (event) => controller.search(event.target.value));
+			setEventHandler(_el1, "$$keydown", keyDown);
+			const _el2 = sibling(_el1, 1);
+			_m19 = _el2;
+			_m20 = evt2e(_el2, "$$click", __event, controller, input);
+			const _el3 = sibling(_el2, 1);
+			_m21 = _el3;
+			setEventHandler(_el3, "$$click", controller.close);
+			const _el4 = sibling(_el0, 1);
+			_m23 = _el4;
+			const _el5 = sibling(_el4, 2);
+			_m25 = _el5;
+			markDangerouslySetInnerHTMLChildren(_root);
+			_m27 = child(_el5);
+			_m28 = sibling(_el4, 1);
+			_m29 = sibling(_el5, 1);
+			_b = bagOf(__s, _root, {
+				a: _m0,
+				b: _m1,
+				c: _m2,
+				d: _m3,
+				e: _m4,
+				f: _m5,
+				g: _m6,
+				h: _m7,
+				i: _m8,
+				j: _m9,
+				k: void 0,
+				l: void 0,
+				m: void 0,
+				n: void 0,
+				o: void 0,
+				p: void 0,
+				q: void 0,
+				r: _m17,
+				s: void 0,
+				t: _m19,
+				u: _m20,
+				v: _m21,
+				w: void 0,
+				x: _m23,
+				y: void 0,
+				z: _m25,
+				A: __s,
+				B: _m27,
+				C: _m28,
+				D: _m29,
+				E: null,
+				F: void 0
+			});
+			__s.refFields = _rm$27;
+		} else {
+			{
+				const _v = ["vx-commandpalette", props.className];
+				if (_b.a !== _v) _b.a = _v;
+			}
+			{
+				const _v = {
+					...props.width != null ? { width: props.width } : {},
+					...props.style
+				};
+				if (_b.b !== _v) _b.b = _v;
+			}
+			{
+				const _v = props.id;
+				if (_b.c !== _v) _b.c = _v;
+			}
+			{
+				const _v = "group";
+				if (_b.d !== _v) _b.d = _v;
+			}
+			{
+				const _v = props.label ?? "Command palette";
+				if (_b.e !== _v) _b.e = _v;
+			}
+			_b.f = snapshotSpread(props.web);
+			_b.h = bindSignalHostPropSources(__s, _b.h, _b.g, [
+				[
+					false,
+					"className",
+					_b.a
+				],
+				[
+					false,
+					"style",
+					_b.b
+				],
+				[
+					false,
+					"id",
+					_b.c
+				],
+				[
+					false,
+					"role",
+					_b.d
+				],
+				[
+					false,
+					"aria-label",
+					_b.e
+				],
+				[true, _b.f]
+			], "b:dd70f5f1", true);
+			{
+				const _r = input;
+				if (_r !== _b.j) _b.j = replaceRef(__s, _b.j, _r, _b.i);
+			}
+			_b.r = bindSignalValue(__s, _b.r, _b.i, state.query, "i:4eee0b8f");
+			setEventHandler(_b.i, "$$input", (event) => controller.search(event.target.value));
+			setEventHandler(_b.i, "$$keydown", keyDown);
+			evt2u(_b.u, __event, controller, input);
+			setEventHandler(_b.v, "$$click", controller.close);
 		}
-		_b.a = updateFreshClassName(["vx-commandpalette", props.className], _b.a, _b.b);
+		_b.k = setPlainAttributeIfChanged(`${props.id ?? generatedId}-query`, _b.k, _b.i, "id");
+		_b.l = bindSignalAttribute(__s, _b.l, _b.i, "aria-label", props.label ?? "Command palette", "b:8001bf52", setAriaAttribute);
+		_b.m = bindSignalAttribute(__s, _b.m, _b.i, "aria-expanded", state.open, "b:528c751a", setAriaAttribute);
+		_b.n = setAriaAttributeIfChanged(listId, _b.n, _b.i, "aria-controls");
+		_b.o = bindSignalAttribute(__s, _b.o, _b.i, "aria-activedescendant", state.highlighted ? optionId(state.highlighted) : void 0, "b:88c4388d", setAriaAttribute);
+		_b.p = bindSignalAttribute(__s, _b.p, _b.i, "aria-busy", state.status === "loading" || void 0, "b:1d1f3a4b", setAriaAttribute);
+		_b.q = bindSignalAttribute(__s, _b.q, _b.i, "placeholder", props.placeholder ?? "Type a command…", "b:0f67e084", setPlainAttribute);
+		_b.s = setBooleanAttributeIfChanged(!state.query, _b.s, _b.t, "disabled");
+		_b.w = setPlainAttributeIfChanged(`${props.id ?? generatedId}-status`, _b.w, _b.x, "id");
+		_b.y = setPlainAttributeIfChanged(listId, _b.y, _b.z, "id");
 		{
-			const _v = props.style;
-			if (_b.c !== _v) {
-				setStyle(_b.b, _v, _b.c);
-				_b.c = _v;
+			const _v = props.maxHeight ?? 320;
+			if (_b.A !== _v) {
+				setStyleProperty(_b.z, "maxHeight", _v, "", _b.A);
+				_b.A = _v;
 			}
 		}
-		_b.d = bindSignalAttribute(__s, _b.d, _b.b, "id", props.id, "b:7cf5e4c8", setPlainAttribute);
-		componentSlotVoid(__s, 1, _b.b, TextInput, {
-			"className": "vx-cmdk-search",
-			"placeholder": props.placeholder ?? "Type a command…",
-			"value": query,
-			"onChange": setQuery,
-			"onSubmit": () => {
-				if (shown.length && !shown[0].disabled) select(shown[0]);
-			}
-		}, _b.g, void 0, 2, void 0, void 0, "c:9baf90e7");
-		mapSlot(__s, 2, _b.e, (__mapMethod = shown.map, shown), __mapMethod, (item) => createScopedElement("div", {
-			key: item.key,
+		_b.G = bindSignalChild(__s, _b.G, 1, _b.x, state.status === "loading" ? props.loadingText ?? "Loading…" : state.status === "error" ? props.errorText ?? "Could not load commands. Try again." : state.status === "ready" && !state.results.length ? state.query.trim() ? props.emptySearchText ?? "No results" : props.emptyBootstrapText ?? "Type to search" : state.query.trim() ? `${state.results.length} result${state.results.length === 1 ? "" : "s"}` : "", "b:5028d2ed", null, void 0, void 0, void 0, true);
+		{
+			const __ifCondition$2 = state.status === "error";
+			ifBlock(__s, 2, _b.g, __ifCondition$2, __then$3, null, _b.C, __ifCondition$2 ? [controller, state] : void 0);
+		}
+		mapSlot(__s, 3, _b.z, (__mapMethod = groups.map, groups), __mapMethod, (group, gi) => createScopedElement("div", {
+			key: group.heading ?? gi,
+			role: group.heading != null ? "group" : void 0,
+			"aria-label": group.heading ?? void 0
+		}, () => positionalChildren([group.heading != null ? createScopedElement("div", {
+			className: "vx-cmdk-heading",
+			"aria-hidden": "true"
+		}, () => group.heading) : null, group.items.map((item) => createScopedElement("div", {
+			key: item.id,
+			id: optionId(item.id),
 			role: "option",
+			"aria-selected": item.id === state.selected,
 			"aria-disabled": item.disabled || void 0,
-			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
-			onClick: item.disabled ? void 0 : () => select(item)
-		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:c4f37a0d", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$3, __item$4, 26, [select], _b.f, 1);
+			className: [
+				"vx-menu-item",
+				item.disabled ? "vx-menu-item--disabled" : void 0,
+				item.id === state.highlighted ? "vx-cmdk-highlighted" : void 0
+			],
+			onMouseDown: (event) => event.preventDefault(),
+			onMouseEnter: () => {
+				if (!item.disabled) controller.highlight(item.id);
+			},
+			onClick: () => controller.select(item.id)
+		}, () => props.renderItem ? props.renderItem(item, item.id === state.selected) : createScopedElement(Fragment, {}, () => positionalChildren([
+			item.icon ? createScopedValue(() => createElementFromConfig("c:43a8e459", Icon, { name: item.icon })) : null,
+			createScopedElement("div", { className: "vx-cmdk-item-content" }, () => positionalChildren([createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label), item.description ? createScopedElement("span", { className: "vx-cmdk-description" }, () => item.description) : null])),
+			item.shortcut ? createScopedElement("kbd", { className: "vx-cmdk-shortcut" }, () => item.shortcut) : null
+		]))))])), _key$5, __item$6, 18, [
+			optionId,
+			controller,
+			props,
+			state
+		], _b.B, 1);
+		{
+			const __ifCondition$3 = props.footer !== false;
+			ifBlock(__s, 4, _b.g, __ifCondition$3, __then$24, null, _b.D, __ifCondition$3 ? [props] : void 0);
+		}
 	}
 	componentSlotVoid(__s, 0, __block.parentNode, Overlay, {
-		"open": props.open,
+		"accessibilityLabel": props.label ?? "Command palette",
+		"open": state.open,
 		"shadeCover": true,
-		"onDismiss": () => setOpen(false),
+		"onDismiss": controller.close,
 		"className": "vx-cmdk-layer",
 		"children": markChildrenBlock(__children$1, __childrenBody)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:7910e6ea");
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:e4ab2839");
 };
 //#endregion
 export { CommandPalette };