@cascivo/react 0.5.0 → 0.6.2

package/README.md

@@ -310,6 +310,7 @@ routing break after adding one of these, check that the import resolves to
 - **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
+- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
 - **Grid** — CSS grid layout primitive with responsive column collapsing.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
@@ -325,7 +326,6 @@ routing break after adding one of these, check that the import resolves to
 - **Spacer** — Fixed-height spacing block using design token steps.
 - **SplitView** — Resizable two-pane split layout with keyboard and pointer drag support.
 - **Stack** — Overlaps children in a CSS grid stack with a configurable offset to create a card-pile effect
-- **Stack** — Flex layout primitive for vertical or horizontal stacking with gap control.
 - **StatsBand** — KPI strip — horizontal band of stats with optional delta and inline sparkline trend. Wraps via AutoGrid on narrow containers. No visible heading; provide aria-label for accessibility.
 
 ### Feedback

package/dist/command-menu/command-menu.css

@@ -1 +1 @@
-@layer cascivo.component{._dialog_cpgn8_2{border-radius:var(--cascivo-radius-overlay);inline-size:min(40rem, calc(100vw - var(--cascivo-space-8)));max-block-size:calc(85vh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;margin-block-start:15vh;margin-inline:auto;padding:0;overflow:visible;scale:.96}._dialog_cpgn8_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_cpgn8_2[open]{opacity:0;scale:.96}}._dialog_cpgn8_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_cpgn8_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_cpgn8_2[open]::backdrop{opacity:0}}._panel_cpgn8_62{background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._search_cpgn8_72{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._searchIcon_cpgn8_80{color:var(--cascivo-color-text-muted);flex-shrink:0}._input_cpgn8_85{block-size:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-base);color:var(--cascivo-color-text);background:0 0;border:none;flex:1;padding:0}._input_cpgn8_85:focus{outline:none}._input_cpgn8_85::placeholder{color:var(--cascivo-color-text-muted)}._list_cpgn8_104{max-block-size:20rem;padding:var(--cascivo-space-2);overflow-y:auto}._group_cpgn8_110+._group_cpgn8_110{margin-block-start:var(--cascivo-space-2)}._heading_cpgn8_114{padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle)}._option_cpgn8_123{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_cpgn8_123[data-state=active]{background-color:var(--cascivo-color-accent-muted)}._option_cpgn8_123[data-disabled]{opacity:.5;cursor:not-allowed}._icon_cpgn8_148{color:var(--cascivo-color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}._label_cpgn8_155{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._shortcut_cpgn8_162{gap:var(--cascivo-space-1);margin-inline-start:auto;display:inline-flex}._empty_cpgn8_168{padding-block:var(--cascivo-space-8);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}._footer_cpgn8_176{gap:var(--cascivo-space-4);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-start:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);display:flex}._hint_cpgn8_187{align-items:center;gap:var(--cascivo-space-1);display:inline-flex}}
+@layer cascivo.component{._dialog_1dfrg_2{border-radius:var(--cascivo-radius-overlay);inline-size:min(40rem, calc(100vw - var(--cascivo-space-8)));max-block-size:calc(85vh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;margin-block-start:15vh;margin-inline:auto;padding:0;overflow:visible;scale:.96}._dialog_1dfrg_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_1dfrg_2[open]{opacity:0;scale:.96}}._dialog_1dfrg_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_1dfrg_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_1dfrg_2[open]::backdrop{opacity:0}}._panel_1dfrg_62{background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._search_1dfrg_72{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._searchIcon_1dfrg_80{color:var(--cascivo-color-text-muted);flex-shrink:0}._scopeChip_1dfrg_85{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-accent-subtle);border-radius:var(--cascivo-radius-item);background-color:var(--cascivo-color-accent-muted);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-accent-content);white-space:nowrap;flex-shrink:0;display:inline-flex}._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101:hover{opacity:1}@media (pointer:coarse){._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101{min-inline-size:var(--cascivo-space-6);min-block-size:var(--cascivo-space-6)}}._input_1dfrg_123{block-size:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-base);color:var(--cascivo-color-text);background:0 0;border:none;flex:1;padding:0}._input_1dfrg_123:focus{outline:none}._input_1dfrg_123::placeholder{color:var(--cascivo-color-text-muted)}._scopes_1dfrg_142{align-items:center;gap:var(--cascivo-space-2);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border);background-color:var(--cascivo-color-bg-subtle);display:flex;overflow-x:auto}._scopesLabel_1dfrg_153{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--cascivo-color-text-subtle);flex-shrink:0}._scopePill_1dfrg_163{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);cursor:pointer;background:0 0;flex-shrink:0;display:inline-flex}._scopePill_1dfrg_163:hover{color:var(--cascivo-color-text)}._scopePill_1dfrg_163[data-active]{border-color:var(--cascivo-color-accent-subtle);background-color:var(--cascivo-color-accent-muted);color:var(--cascivo-color-accent-content)}@media (pointer:coarse){._scopePill_1dfrg_163{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._scopePrefix_1dfrg_193{font-family:var(--cascivo-font-mono);font-weight:var(--cascivo-font-medium);opacity:.85}._list_1dfrg_199{max-block-size:20rem;padding:var(--cascivo-space-2);overflow-y:auto}._group_1dfrg_205+._group_1dfrg_205{margin-block-start:var(--cascivo-space-2)}._heading_1dfrg_209{justify-content:space-between;align-items:baseline;gap:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle);display:flex}._count_1dfrg_222{font-family:var(--cascivo-font-mono);font-weight:var(--cascivo-font-normal);color:var(--cascivo-color-text-muted)}._option_1dfrg_228{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_1dfrg_228[data-state=active]{background-color:var(--cascivo-color-accent-muted)}._option_1dfrg_228[data-disabled]{opacity:.5;cursor:not-allowed}._icon_1dfrg_253{color:var(--cascivo-color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}._text_1dfrg_260{flex-direction:column;flex:1;gap:.125rem;min-inline-size:0;display:flex}._label_1dfrg_268{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._match_1dfrg_274{color:var(--cascivo-color-accent-content);font-weight:var(--cascivo-font-semibold);background:0 0}._description_1dfrg_280{text-overflow:ellipsis;white-space:nowrap;font-family:var(--cascivo-font-mono);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);overflow:hidden}._status_1dfrg_289{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);border-radius:var(--cascivo-radius-pill,9999px);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);flex-shrink:0;margin-inline-start:auto;padding-block:.125rem;display:inline-flex}._status_1dfrg_289[data-tone=healthy]{background-color:var(--cascivo-color-success-subtle);color:var(--cascivo-color-success-foreground)}._status_1dfrg_289[data-tone=degraded]{background-color:var(--cascivo-color-warning-subtle);color:var(--cascivo-color-warning-foreground)}._status_1dfrg_289[data-tone=neutral]{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text-muted)}._status_1dfrg_289 ._statusDot_1dfrg_316{background-color:currentColor;border-radius:9999px;block-size:.375rem;inline-size:.375rem}._actions_1dfrg_325{gap:var(--cascivo-space-1);opacity:0;pointer-events:none;transition:opacity var(--cascivo-motion-enter);flex-shrink:0;margin-inline-start:auto;display:inline-flex}._status_1dfrg_289+._actions_1dfrg_325{margin-inline-start:var(--cascivo-space-2)}._option_1dfrg_228[data-state=active] ._actions_1dfrg_325,._option_1dfrg_228:hover ._actions_1dfrg_325{opacity:1;pointer-events:auto}._action_1dfrg_325{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-item);background-color:var(--cascivo-color-surface-overlay);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text);cursor:pointer;display:inline-flex}._action_1dfrg_325:hover{border-color:var(--cascivo-color-accent-subtle)}@media (pointer:coarse){._action_1dfrg_325{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._actionKeys_1dfrg_369{gap:var(--cascivo-space-1);display:inline-flex}._shortcut_1dfrg_374{gap:var(--cascivo-space-1);flex-shrink:0;margin-inline-start:auto;display:inline-flex}._actions_1dfrg_325~._shortcut_1dfrg_374{margin-inline-start:var(--cascivo-space-2)}@media (prefers-reduced-motion:reduce){._actions_1dfrg_325{transition:none}}._empty_1dfrg_392{padding-block:var(--cascivo-space-8);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}._footer_1dfrg_400{gap:var(--cascivo-space-4);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-start:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);display:flex}._hint_1dfrg_411{align-items:center;gap:var(--cascivo-space-1);display:inline-flex}}

package/dist/command-menu/command-menu.js

@@ -6,18 +6,27 @@ import n from "./command-menu.module.js";
 import { batch as r, cn as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useId as f, useRef as p } from "react";
+import { useId as ee, useRef as f } from "react";
 //#region ../components/src/command-menu/command-menu.tsx
-function m(e, t) {
-	if (e.length === 0) return 1;
-	let n = e.toLowerCase(), r = t.toLowerCase(), i = 0, a = 0, o = -2;
+function p(e, t) {
+	if (e.length === 0) return {
+		score: 1,
+		indices: []
+	};
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = 0, a = 0, o = -2, s = [];
 	for (let e = 0; e < r.length && a < n.length; e++) {
 		if (r[e] !== n[a]) continue;
 		i += 1, e === o + 1 && (i += 4);
 		let t = e === 0 ? " " : r[e - 1];
-		(t === " " || t === "-" || t === "_" || t === "/") && (i += 8), o = e, a++;
+		(t === " " || t === "-" || t === "_" || t === "/") && (i += 8), o = e, s.push(e), a++;
 	}
-	return a === n.length ? i : 0;
+	return a === n.length ? {
+		score: i,
+		indices: s
+	} : null;
+}
+function m(e, t) {
+	return p(e, t)?.score ?? 0;
 }
 function h(e, t) {
 	let n = m(e, t.label);
@@ -27,198 +36,344 @@ function h(e, t) {
 	}
 	return n;
 }
-function g({ open: m, onOpenChange: g, groups: _, placeholder: v, emptyLabel: y, hotkey: b = !0, label: x, loading: S = !1, onQueryChange: C, className: w }) {
+function g(e, t) {
+	if (t.length === 0) return e;
+	let r = new Set(t), i = [], a = "", o = r.has(0), s = (e) => {
+		a !== "" && (i.push(o ? /* @__PURE__ */ u("mark", {
+			className: n.match,
+			children: a
+		}, e) : a), a = "");
+	};
+	for (let t = 0; t < e.length; t++) {
+		let n = r.has(t);
+		n !== o && (s(t), o = n), a += e[t];
+	}
+	return s(e.length), i;
+}
+function _(e, t) {
+	for (let n of t) {
+		let t = n.prefix;
+		if (t) {
+			if (e.startsWith(`${t} `) || e.startsWith(`${t}:`)) return {
+				scope: n,
+				rest: e.slice(t.length + 1).replace(/^\s+/, "")
+			};
+			if (!/\w/.test(t) && e.startsWith(t)) return {
+				scope: n,
+				rest: e.slice(t.length).replace(/^\s+/, "")
+			};
+		}
+	}
+	return null;
+}
+function v({ open: m, onOpenChange: v, groups: te, placeholder: y, emptyLabel: b, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: E }) {
 	s();
-	let T = x ?? l(c.commandMenu.label), E = y ?? l(c.commandMenu.empty), D = f(), O = `${D}-listbox`, k = p(null), A = p(null), j = p([]), M = p(g);
-	M.current = g;
-	let N = p(C);
-	N.current = C;
-	let P = a(m);
-	P.value = m;
-	let F = a(b);
-	F.value = b;
-	let I = a(""), L = a(0), R = a([]), z = R.value.at(-1)?.groups ?? _, B = v ?? R.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = z.map((e) => ({
+	let D = S ?? l(c.commandMenu.label), ne = b ?? l(c.commandMenu.empty), O = ee(), k = `${O}-listbox`, A = f(null), j = f(null), M = f([]), N = f(v);
+	N.current = v;
+	let P = f(w);
+	P.current = w;
+	let F = a(m);
+	F.value = m;
+	let I = a(x);
+	I.value = x;
+	let L = a(""), R = a(0), z = a([]), B = a(null), re = z.value.at(-1)?.groups ?? te, ie = y ?? z.value.at(-1)?.placeholder ?? l(c.commandMenu.placeholder), V = T.find((e) => e.id === B.value) ?? null, H = re.filter((e) => !B.value || !e.scope || e.scope === B.value).map((e) => ({
 		heading: e.heading,
 		items: e.items.map((e) => ({
 			item: e,
-			score: h(I.value, e)
-		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => e)
-	})).filter((e) => e.items.length > 0), H = V.flatMap((e) => e.items), U = H.flatMap((e, t) => e.disabled ? [] : [t]), W = U.includes(L.value) ? L.value : U[0] ?? -1, G = (e) => `${D}-option-${e}`;
+			score: h(L.value, e)
+		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
+			item: e,
+			indices: p(L.value, e.label)?.indices ?? []
+		}))
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(R.value) ? R.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
 	o(() => {
-		let e = k.current;
-		e && (P.value ? e.open || (r(() => {
-			I.value = "", L.value = 0, R.value = [];
-		}), typeof e.showModal == "function" && e.showModal(), A.current?.focus()) : e.open && (R.value = [], e.close()));
+		let e = A.current;
+		e && (F.value ? e.open || (r(() => {
+			L.value = "", R.value = 0, z.value = [], B.value = null;
+		}), typeof e.showModal == "function" && e.showModal(), j.current?.focus()) : e.open && (z.value = [], e.close()));
 	}), o(() => {
-		let e = k.current;
+		let e = A.current;
 		if (!e) return;
-		let t = () => M.current(!1);
+		let t = () => N.current(!1);
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
 	}), o(() => {
-		if (!F.value) return;
+		if (!I.value) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), M.current(!P.value));
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	});
-	let K = (e) => {
-		L.value = e;
-		let t = j.current[e];
+	let q = (e) => {
+		R.value = e;
+		let t = M.current[e];
 		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
-	}, q = (e) => {
-		if (U.length === 0) return;
-		let t = U[(U.indexOf(W) + e + U.length) % U.length];
-		t !== void 0 && K(t);
 	}, J = (e) => {
-		!e || e.disabled || (e.page ? r(() => {
-			R.value = [...R.value, e.page], I.value = "", L.value = 0;
-		}) : (e.onSelect?.(), g(!1)));
-	}, Y = () => {
+		if (W.length === 0) return;
+		let t = W[(W.indexOf(G) + e + W.length) % W.length];
+		t !== void 0 && q(t);
+	}, Y = (e) => {
+		e.onSelect(), v(!1);
+	}, X = (e, t) => {
+		if (!(!e || e.disabled)) {
+			if (e.page) {
+				if (t === "secondary") return;
+				r(() => {
+					z.value = [...z.value, e.page], L.value = "", R.value = 0;
+				});
+				return;
+			}
+			if (e.actions && e.actions.length > 0) {
+				let n = t === "secondary" ? e.actions[1] : e.actions[0];
+				n && Y(n);
+				return;
+			}
+			t !== "secondary" && (e.onSelect?.(), v(!1));
+		}
+	}, ae = (e) => {
+		if (T.length === 0) return;
+		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(B.value) + e + t.length) % t.length];
+		r(() => {
+			B.value = n ?? null, R.value = 0;
+		});
+	}, Z = () => {
+		r(() => {
+			B.value = null, R.value = 0;
+		}), j.current?.focus();
+	}, Q = () => {
 		r(() => {
-			R.value = R.value.slice(0, -1), I.value = "", L.value = 0;
+			z.value = z.value.slice(0, -1), L.value = "", R.value = 0;
 		});
-	}, X = (e) => {
+	}, oe = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), q(1);
+				e.preventDefault(), J(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), q(-1);
+				e.preventDefault(), J(-1);
+				break;
+			case "Tab":
+				T.length > 0 && (e.preventDefault(), ae(e.shiftKey ? -1 : 1));
 				break;
 			case "Home":
-				e.preventDefault(), U[0] !== void 0 && K(U[0]);
+				e.preventDefault(), W[0] !== void 0 && q(W[0]);
 				break;
 			case "End": {
 				e.preventDefault();
-				let t = U[U.length - 1];
-				t !== void 0 && K(t);
+				let t = W[W.length - 1];
+				t !== void 0 && q(t);
 				break;
 			}
 			case "Enter":
-				e.preventDefault(), W >= 0 && J(H[W]);
+				e.preventDefault(), G >= 0 && X(U[G], e.metaKey || e.ctrlKey ? "secondary" : "primary");
 				break;
 			case "Backspace":
-				I.value === "" && R.value.length > 0 && (e.preventDefault(), Y());
+				L.value === "" && (z.value.length > 0 ? (e.preventDefault(), Q()) : B.value && (e.preventDefault(), Z()));
 				break;
 		}
-	}, Z = (e) => {
-		e.key === "Escape" && (e.preventDefault(), R.value.length > 0 ? Y() : k.current?.close());
-	}, Q = (e) => {
-		e.target === k.current && k.current?.close();
+	}, se = (e) => {
+		e.key === "Escape" && (e.preventDefault(), z.value.length > 0 ? Q() : A.current?.close());
+	}, ce = (e) => {
+		e.target === A.current && A.current?.close();
 	}, $ = -1;
 	return /* @__PURE__ */ u("dialog", {
-		ref: k,
-		"aria-label": T,
-		className: i(n.dialog, w),
-		onClick: Q,
-		onKeyDown: Z,
+		ref: A,
+		"aria-label": D,
+		className: i(n.dialog, E),
+		onClick: ce,
+		onKeyDown: se,
 		children: /* @__PURE__ */ d("div", {
 			className: n.panel,
 			children: [
 				/* @__PURE__ */ d("div", {
 					className: n.search,
-					children: [/* @__PURE__ */ d("svg", {
-						className: n.searchIcon,
-						"aria-hidden": "true",
-						viewBox: "0 0 16 16",
-						width: "16",
-						height: "16",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "1.5",
-						strokeLinecap: "round",
-						children: [/* @__PURE__ */ u("circle", {
-							cx: "7",
-							cy: "7",
-							r: "4.5"
-						}), /* @__PURE__ */ u("line", {
-							x1: "10.5",
-							y1: "10.5",
-							x2: "14",
-							y2: "14"
-						})]
-					}), /* @__PURE__ */ u("input", {
-						ref: A,
-						type: "text",
-						role: "combobox",
-						"aria-expanded": "true",
-						"aria-controls": O,
-						"aria-activedescendant": W >= 0 ? G(W) : void 0,
-						"aria-autocomplete": "list",
-						"aria-label": T,
-						autoComplete: "off",
-						spellCheck: !1,
-						className: n.input,
-						placeholder: B,
-						value: I.value,
-						onChange: (e) => {
-							I.value = e.target.value, L.value = 0, N.current?.(e.target.value);
+					children: [
+						/* @__PURE__ */ d("svg", {
+							className: n.searchIcon,
+							"aria-hidden": "true",
+							viewBox: "0 0 16 16",
+							width: "16",
+							height: "16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							children: [/* @__PURE__ */ u("circle", {
+								cx: "7",
+								cy: "7",
+								r: "4.5"
+							}), /* @__PURE__ */ u("line", {
+								x1: "10.5",
+								y1: "10.5",
+								x2: "14",
+								y2: "14"
+							})]
+						}),
+						V && /* @__PURE__ */ d("span", {
+							className: n.scopeChip,
+							children: [V.label, /* @__PURE__ */ u("button", {
+								type: "button",
+								className: n.scopeClear,
+								"aria-label": l(c.commandMenu.clearScope),
+								onClick: Z,
+								children: /* @__PURE__ */ u("svg", {
+									viewBox: "0 0 16 16",
+									width: "12",
+									height: "12",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ u("path", {
+										d: "M4 4l8 8M12 4l-8 8",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										strokeLinecap: "round"
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ u("input", {
+							ref: j,
+							type: "text",
+							role: "combobox",
+							"aria-expanded": "true",
+							"aria-controls": k,
+							"aria-activedescendant": G >= 0 ? K(G) : void 0,
+							"aria-autocomplete": "list",
+							"aria-label": D,
+							autoComplete: "off",
+							spellCheck: !1,
+							className: n.input,
+							placeholder: ie,
+							value: L.value,
+							onChange: (e) => {
+								let t = e.target.value;
+								if (!B.value && T.length > 0) {
+									let e = _(t, T);
+									e && (B.value = e.scope.id, t = e.rest);
+								}
+								L.value = t, R.value = 0, P.current?.(t);
+							},
+							onKeyDown: oe
+						})
+					]
+				}),
+				T.length > 0 && /* @__PURE__ */ d("div", {
+					className: n.scopes,
+					children: [/* @__PURE__ */ u("span", {
+						className: n.scopesLabel,
+						children: l(c.commandMenu.scopeLabel)
+					}), T.map((e) => /* @__PURE__ */ d("button", {
+						type: "button",
+						className: n.scopePill,
+						"data-active": e.id === B.value || void 0,
+						onClick: () => {
+							r(() => {
+								B.value = B.value === e.id ? null : e.id, R.value = 0;
+							}), j.current?.focus();
 						},
-						onKeyDown: X
-					})]
+						children: [e.prefix && /* @__PURE__ */ u("span", {
+							className: n.scopePrefix,
+							children: e.prefix
+						}), e.label]
+					}, e.id))]
 				}),
 				/* @__PURE__ */ d("div", {
 					className: n.list,
 					children: [/* @__PURE__ */ u("div", {
 						role: "listbox",
-						id: O,
-						"aria-label": x,
-						children: V.map((e, r) => /* @__PURE__ */ d("div", {
+						id: k,
+						"aria-label": S,
+						children: H.map((e, r) => /* @__PURE__ */ d("div", {
 							role: "group",
 							"aria-label": e.heading,
 							className: n.group,
-							children: [e.heading && /* @__PURE__ */ u("div", {
+							children: [e.heading && /* @__PURE__ */ d("div", {
 								className: n.heading,
 								"aria-hidden": "true",
-								children: e.heading
+								children: [/* @__PURE__ */ u("span", { children: e.heading }), L.value !== "" && /* @__PURE__ */ u("span", {
+									className: n.count,
+									children: l(c.commandMenu.matches, { count: e.items.length })
+								})]
 							}), e.items.map((e) => {
+								let { item: r, indices: i } = e;
 								$++;
-								let r = $;
+								let a = $;
 								return /* @__PURE__ */ d("div", {
 									ref: (e) => {
-										j.current[r] = e;
+										M.current[a] = e;
 									},
-									id: G(r),
+									id: K(a),
 									role: "option",
-									"aria-selected": r === W,
-									"aria-disabled": e.disabled || void 0,
-									"data-state": r === W ? "active" : void 0,
-									"data-disabled": e.disabled || void 0,
+									"aria-selected": a === G,
+									"aria-disabled": r.disabled || void 0,
+									"data-state": a === G ? "active" : void 0,
+									"data-disabled": r.disabled || void 0,
 									className: n.option,
 									onMouseEnter: () => {
-										e.disabled || (L.value = r);
+										r.disabled || (R.value = a);
 									},
-									onClick: () => J(e),
+									onClick: () => X(r, "primary"),
 									children: [
-										e.icon && /* @__PURE__ */ u("span", {
+										r.icon && /* @__PURE__ */ u("span", {
 											className: n.icon,
 											"aria-hidden": "true",
-											children: e.icon
+											children: r.icon
+										}),
+										/* @__PURE__ */ d("span", {
+											className: n.text,
+											children: [/* @__PURE__ */ u("span", {
+												className: n.label,
+												children: g(r.label, i)
+											}), r.description && /* @__PURE__ */ u("span", {
+												className: n.description,
+												children: r.description
+											})]
 										}),
-										/* @__PURE__ */ u("span", {
-											className: n.label,
-											children: e.label
+										r.status && /* @__PURE__ */ d("span", {
+											className: n.status,
+											"data-tone": r.status.tone ?? "neutral",
+											children: [/* @__PURE__ */ u("span", {
+												className: n.statusDot,
+												"aria-hidden": "true"
+											}), r.status.label]
 										}),
-										e.shortcut && /* @__PURE__ */ u("span", {
+										r.actions && r.actions.length > 0 && /* @__PURE__ */ u("span", {
+											className: n.actions,
+											children: r.actions.map((e) => /* @__PURE__ */ d("button", {
+												type: "button",
+												className: n.action,
+												onClick: (t) => {
+													t.stopPropagation(), Y(e);
+												},
+												children: [e.label, e.shortcut && /* @__PURE__ */ u("span", {
+													className: n.actionKeys,
+													"aria-hidden": "true",
+													children: e.shortcut.map((e, n) => /* @__PURE__ */ u(t, {
+														size: "sm",
+														children: e
+													}, n))
+												})]
+											}, e.id))
+										}),
+										r.shortcut && /* @__PURE__ */ u("span", {
 											className: n.shortcut,
 											"aria-hidden": "true",
-											children: e.shortcut.map((e, n) => /* @__PURE__ */ u(t, {
+											children: r.shortcut.map((e, n) => /* @__PURE__ */ u(t, {
 												size: "sm",
 												children: e
 											}, n))
 										})
 									]
-								}, e.id);
+								}, r.id);
 							})]
 						}, e.heading ?? `group-${r}`))
-					}), H.length === 0 && (S ? /* @__PURE__ */ d("div", {
+					}), U.length === 0 && (C ? /* @__PURE__ */ d("div", {
 						role: "status",
 						className: n.empty,
 						children: [/* @__PURE__ */ u(e, { size: "sm" }), l(c.commandMenu.loading)]
 					}) : /* @__PURE__ */ u("div", {
 						role: "status",
 						className: n.empty,
-						children: E
+						children: ne
 					}))]
 				}),
 				/* @__PURE__ */ d("div", {
@@ -236,7 +391,7 @@ function g({ open: m, onOpenChange: g, groups: _, placeholder: v, emptyLabel: y,
 									size: "sm",
 									children: "↓"
 								}),
-								" to navigate"
+								" navigate"
 							]
 						}),
 						/* @__PURE__ */ d("span", {
@@ -244,14 +399,21 @@ function g({ open: m, onOpenChange: g, groups: _, placeholder: v, emptyLabel: y,
 							children: [/* @__PURE__ */ u(t, {
 								size: "sm",
 								children: "↵"
-							}), " to select"]
+							}), " open"]
+						}),
+						T.length > 0 && /* @__PURE__ */ d("span", {
+							className: n.hint,
+							children: [/* @__PURE__ */ u(t, {
+								size: "sm",
+								children: "Tab"
+							}), " scope"]
 						}),
 						/* @__PURE__ */ d("span", {
 							className: n.hint,
 							children: [/* @__PURE__ */ u(t, {
 								size: "sm",
 								children: "esc"
-							}), " to close"]
+							}), " close"]
 						})
 					]
 				})
@@ -260,4 +422,4 @@ function g({ open: m, onOpenChange: g, groups: _, placeholder: v, emptyLabel: y,
 	});
 }
 //#endregion
-export { g as CommandMenu, m as fuzzyScore };
+export { v as CommandMenu, p as fuzzyMatch, m as fuzzyScore };

package/dist/command-menu/command-menu.module.js

@@ -2,21 +2,36 @@
 
 import './command-menu.css';
 var e = {
-	dialog: "_dialog_cpgn8_2",
-	panel: "_panel_cpgn8_62",
-	search: "_search_cpgn8_72",
-	searchIcon: "_searchIcon_cpgn8_80",
-	input: "_input_cpgn8_85",
-	list: "_list_cpgn8_104",
-	group: "_group_cpgn8_110",
-	heading: "_heading_cpgn8_114",
-	option: "_option_cpgn8_123",
-	icon: "_icon_cpgn8_148",
-	label: "_label_cpgn8_155",
-	shortcut: "_shortcut_cpgn8_162",
-	empty: "_empty_cpgn8_168",
-	footer: "_footer_cpgn8_176",
-	hint: "_hint_cpgn8_187"
+	dialog: "_dialog_1dfrg_2",
+	panel: "_panel_1dfrg_62",
+	search: "_search_1dfrg_72",
+	searchIcon: "_searchIcon_1dfrg_80",
+	scopeChip: "_scopeChip_1dfrg_85",
+	scopeClear: "_scopeClear_1dfrg_101",
+	input: "_input_1dfrg_123",
+	scopes: "_scopes_1dfrg_142",
+	scopesLabel: "_scopesLabel_1dfrg_153",
+	scopePill: "_scopePill_1dfrg_163",
+	scopePrefix: "_scopePrefix_1dfrg_193",
+	list: "_list_1dfrg_199",
+	group: "_group_1dfrg_205",
+	heading: "_heading_1dfrg_209",
+	count: "_count_1dfrg_222",
+	option: "_option_1dfrg_228",
+	icon: "_icon_1dfrg_253",
+	text: "_text_1dfrg_260",
+	label: "_label_1dfrg_268",
+	match: "_match_1dfrg_274",
+	description: "_description_1dfrg_280",
+	status: "_status_1dfrg_289",
+	statusDot: "_statusDot_1dfrg_316",
+	actions: "_actions_1dfrg_325",
+	action: "_action_1dfrg_325",
+	actionKeys: "_actionKeys_1dfrg_369",
+	shortcut: "_shortcut_1dfrg_374",
+	empty: "_empty_1dfrg_392",
+	footer: "_footer_1dfrg_400",
+	hint: "_hint_1dfrg_411"
 };
 //#endregion
 export { e as default };