@logicplanes/kaeso-ui 0.1.0 → 0.2.1

package/dist/components/command-palette.js

@@ -5,14 +5,14 @@ import { i as n } from "../chunks/context-BELWW79w.js";
 import { t as r } from "../chunks/icon-CeNQtobn.js";
 import { i, r as a } from "../chunks/kbd-CBcBDvqU.js";
 import { t as o } from "../chunks/field-press-DwzBFafd.js";
-import { t as s } from "../chunks/restore-focus-Cap1Q-R3.js";
-import { Fragment as c, useEffect as l, useId as u, useMemo as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { ArrowRight01Icon as g, Search01Icon as _ } from "@hugeicons/core-free-icons";
-import { Dialog as v } from "@base-ui/react/dialog";
+import { a as s, i as c, r as l, t as u } from "../chunks/resize-motion-CMaidkwe.js";
+import { Fragment as d, useCallback as f, useEffect as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { ArrowRight01Icon as b, Search01Icon as x } from "@hugeicons/core-free-icons";
+import { Dialog as S } from "@base-ui/react/dialog";
 //#region src/components/command-palette/command-palette.tsx
-var y = { size: { md: { classes: "w-640" } } }, b = { size: "md" };
-function x(e, t) {
+var C = { size: { md: { classes: "w-640" } } }, w = { size: "md" };
+function T(e, t) {
 	if (!t) return !0;
 	let n = [
 		e.label,
@@ -21,109 +21,116 @@ function x(e, t) {
 	].join(" ").toLowerCase();
 	return t.toLowerCase().split(/\s+/).every((e) => n.includes(e));
 }
-function S({ groups: t, keyHints: s, placeholder: v, emptyText: y, onQueryChange: b, close: S, inline: C, defaultQuery: w = "" }) {
-	let T = n(), E = v ?? T("commandPalette.placeholder", "Search or run a command"), [D, O] = p(w), [k, A] = p([]), [j, M] = p(0), N = u(), P = f(null), F = k[k.length - 1], I = F ? F.groups : t, L = d(() => I.map((e) => ({
+function E({ groups: t, keyHints: s, placeholder: c, emptyText: l, onQueryChange: S, close: C, inline: w, defaultQuery: E = "", query: D }) {
+	let O = n(), k = c ?? O("commandPalette.placeholder", "Search or run a command"), [A, j] = _(E), M = D ?? A, N = (e) => {
+		j(e), S?.(e);
+	}, [P, F] = _([]), [I, L] = _(0), R = m(), z = g(null), [B, V] = _(null), H = f((e) => V(w ? null : e?.parentElement ?? null), [w]);
+	u(B);
+	let U = P[P.length - 1], W = U ? U.groups : t, G = h(() => W.map((e) => ({
 		...e,
-		items: e.items.filter((e) => x(e, D))
-	})).filter((e) => e.items.length > 0 || e.loading), [I, D]), R = L.flatMap((e) => e.items), z = I.some((e) => e.loading);
-	l(() => {
-		document.getElementById(`${N}-${R[j]?.id}`)?.scrollIntoView({ block: "nearest" });
+		items: e.items.filter((e) => T(e, M))
+	})).filter((e) => e.items.length > 0 || e.loading), [W, M]), K = G.flatMap((e) => e.items), q = W.some((e) => e.loading);
+	p(() => {
+		document.getElementById(`${R}-${K[I]?.id}`)?.scrollIntoView({ block: "nearest" });
 	}, [
-		j,
-		R,
-		N
+		I,
+		K,
+		R
 	]);
-	let B = (e) => {
+	let J = (e) => {
 		if (!e) return;
 		let t = e.children;
-		t ? (A((n) => [...n, {
+		t ? (F((n) => [...n, {
 			title: e.label,
 			groups: t
-		}]), O(""), M(0), P.current?.focus()) : (e.onSelect?.(), S());
-	}, V = (e) => {
-		e.key === "ArrowDown" ? (e.preventDefault(), M((e) => R.length ? (e + 1) % R.length : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), M((e) => R.length ? (e - 1 + R.length) % R.length : 0)) : e.key === "Enter" ? (e.preventDefault(), B(R[j])) : e.key === "Backspace" && !D && k.length ? (e.preventDefault(), A((e) => e.slice(0, -1)), M(0)) : e.key === "Home" ? M(0) : e.key === "End" && M(Math.max(0, R.length - 1));
-	}, H = -1;
-	return /* @__PURE__ */ h("div", {
-		className: e("relative flex palette-limits flex-col overflow-hidden", C && "w-640 rounded-palette bg-raised shadow-dialog"),
+		}]), N(""), L(0), z.current?.focus()) : (e.onSelect?.(), C());
+	}, Y = (e) => {
+		e.key === "ArrowDown" ? (e.preventDefault(), L((e) => K.length ? (e + 1) % K.length : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), L((e) => K.length ? (e - 1 + K.length) % K.length : 0)) : e.key === "Enter" ? (e.preventDefault(), J(K[I])) : e.key === "Backspace" && !M && P.length ? (e.preventDefault(), F((e) => e.slice(0, -1)), L(0)) : e.key === "Home" ? L(0) : e.key === "End" && L(Math.max(0, K.length - 1));
+	}, X = -1;
+	return /* @__PURE__ */ y("div", {
+		ref: H,
+		className: e("relative flex palette-limits min-h-0 flex-col overflow-hidden", w ? "w-640 rounded-palette bg-raised shadow-dialog" : "flex-1"),
 		children: [
-			z && /* @__PURE__ */ m("span", {
+			q && /* @__PURE__ */ v("span", {
 				"aria-hidden": !0,
 				className: "absolute inset-x-0 top-0 h-2 overflow-hidden",
-				children: /* @__PURE__ */ m("span", { className: "block h-full w-1/3 animate-indeterminate bg-fg-tertiary" })
+				children: /* @__PURE__ */ v("span", { className: "block h-full w-1/3 animate-indeterminate bg-fg-tertiary" })
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ y("div", {
 				onMouseDown: o,
 				className: "flex h-56 shrink-0 cursor-text items-center gap-12 px-20 hairline-b",
 				children: [
-					/* @__PURE__ */ m(r, {
-						icon: _,
+					/* @__PURE__ */ v(r, {
+						icon: x,
 						size: "md",
 						className: "text-fg-tertiary"
 					}),
-					F && /* @__PURE__ */ m("span", {
+					U && /* @__PURE__ */ v("span", {
 						className: "inline-flex h-24 shrink-0 items-center rounded-pill bg-fill-2 px-10 text-caption font-medium text-fg",
-						children: F.title
+						children: U.title
 					}),
-					/* @__PURE__ */ m("input", {
-						ref: P,
+					/* @__PURE__ */ v("input", {
+						ref: z,
 						autoFocus: !0,
+						"data-palette-input": "",
 						role: "combobox",
 						"aria-expanded": "true",
-						"aria-controls": N,
+						"aria-controls": R,
 						"aria-autocomplete": "list",
-						"aria-activedescendant": R[j] ? `${N}-${R[j].id}` : void 0,
-						"aria-label": E,
-						placeholder: E,
-						value: D,
+						"aria-activedescendant": K[I] ? `${R}-${K[I].id}` : void 0,
+						"aria-label": k,
+						placeholder: k,
+						value: M,
 						onChange: (e) => {
-							O(e.target.value), M(0), b?.(e.target.value);
+							N(e.target.value), L(0);
 						},
-						onKeyDown: V,
+						onKeyDown: Y,
 						className: "min-w-0 flex-1 bg-transparent text-body-lg font-regular text-fg outline-none placeholder:text-fg-tertiary"
 					})
 				]
 			}),
-			/* @__PURE__ */ h("div", {
-				id: N,
-				...R.length ? {
+			/* @__PURE__ */ y("div", {
+				id: R,
+				"data-dialog-body": "",
+				...K.length ? {
 					role: "listbox",
-					"aria-label": T("commandPalette.results", "Results")
+					"aria-label": O("commandPalette.results", "Results")
 				} : { role: "status" },
 				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-8 scrollbar-quiet",
-				children: [R.length === 0 && !z && /* @__PURE__ */ m("div", {
+				children: [K.length === 0 && !q && /* @__PURE__ */ v("div", {
 					className: "flex h-80 items-center justify-center text-body text-fg-secondary",
-					children: y ?? T("commandPalette.noResults", "No results")
-				}), L.map((t, n) => /* @__PURE__ */ h(c, { children: [t.label && /* @__PURE__ */ m("div", {
+					children: l ?? O("commandPalette.noResults", "No results")
+				}), G.map((t, n) => /* @__PURE__ */ y(d, { children: [t.label && /* @__PURE__ */ v("div", {
 					className: "flex h-28 items-center px-12 pt-4 text-caption font-medium text-fg-secondary",
 					children: t.label
 				}), t.items.map((t) => {
-					H += 1;
-					let n = H, a = n === j;
-					return /* @__PURE__ */ h("div", {
-						id: `${N}-${t.id}`,
+					X += 1;
+					let n = X, a = n === I;
+					return /* @__PURE__ */ y("div", {
+						id: `${R}-${t.id}`,
 						role: "option",
 						"aria-selected": a,
-						onMouseMove: () => M(n),
-						onClick: () => B(t),
+						onMouseMove: () => L(n),
+						onClick: () => J(t),
 						className: e("flex h-40 cursor-pointer items-center gap-12 rounded-palette-item px-12 text-body font-medium text-fg select-none", a && "bg-item-hover"),
 						children: [
-							t.icon && /* @__PURE__ */ m(r, {
+							t.icon && /* @__PURE__ */ v(r, {
 								icon: t.icon,
 								size: "sm",
 								className: a ? "text-fg" : "text-fg-secondary"
 							}),
-							/* @__PURE__ */ m("span", {
+							/* @__PURE__ */ v("span", {
 								className: "min-w-0 truncate",
 								children: t.label
 							}),
-							t.hint && /* @__PURE__ */ m("span", {
+							t.hint && /* @__PURE__ */ v("span", {
 								className: e("min-w-0 truncate text-body font-regular", a ? "text-fg-secondary" : "text-fg-tertiary"),
 								children: t.hint
 							}),
-							/* @__PURE__ */ h("span", {
+							/* @__PURE__ */ y("span", {
 								className: "ml-auto flex shrink-0 items-center gap-8",
-								children: [t.shortcut && /* @__PURE__ */ m(i, { keys: t.shortcut }), t.children && /* @__PURE__ */ m(r, {
-									icon: g,
+								children: [t.shortcut && /* @__PURE__ */ v(i, { keys: t.shortcut }), t.children && /* @__PURE__ */ v(r, {
+									icon: b,
 									size: "sm",
 									className: "text-fg-tertiary"
 								})]
@@ -132,40 +139,40 @@ function S({ groups: t, keyHints: s, placeholder: v, emptyText: y, onQueryChange
 					}, t.id);
 				})] }, t.label ?? n))]
 			}),
-			s && /* @__PURE__ */ h("div", {
+			s && /* @__PURE__ */ y("div", {
 				className: "flex h-40 shrink-0 items-center gap-16 px-16 text-caption font-medium text-fg-tertiary hairline-t",
 				children: [
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ y("span", {
 						className: "inline-flex items-center gap-6",
 						children: [
-							/* @__PURE__ */ m(a, { children: "up" }),
-							/* @__PURE__ */ m(a, { children: "down" }),
+							/* @__PURE__ */ v(a, { children: "up" }),
+							/* @__PURE__ */ v(a, { children: "down" }),
 							" ",
-							T("commandPalette.toNavigate", "to navigate")
+							O("commandPalette.toNavigate", "to navigate")
 						]
 					}),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ y("span", {
 						className: "inline-flex items-center gap-6",
 						children: [
-							/* @__PURE__ */ m(a, { children: "enter" }),
+							/* @__PURE__ */ v(a, { children: "enter" }),
 							" ",
-							T("commandPalette.toOpen", "to open")
+							O("commandPalette.toOpen", "to open")
 						]
 					}),
-					k.length > 0 && /* @__PURE__ */ h("span", {
+					P.length > 0 && /* @__PURE__ */ y("span", {
 						className: "inline-flex items-center gap-6",
 						children: [
-							/* @__PURE__ */ m(a, { children: "backspace" }),
+							/* @__PURE__ */ v(a, { children: "backspace" }),
 							" ",
-							T("commandPalette.toGoBack", "to go back")
+							O("commandPalette.toGoBack", "to go back")
 						]
 					}),
-					/* @__PURE__ */ h("span", {
+					/* @__PURE__ */ y("span", {
 						className: "ml-auto inline-flex items-center gap-6",
 						children: [
-							/* @__PURE__ */ m(a, { children: "esc" }),
+							/* @__PURE__ */ v(a, { children: "esc" }),
 							" ",
-							T("commandPalette.toClose", "to close")
+							O("commandPalette.toClose", "to close")
 						]
 					})
 				]
@@ -173,44 +180,45 @@ function S({ groups: t, keyHints: s, placeholder: v, emptyText: y, onQueryChange
 		]
 	});
 }
-function C(e) {
-	let { open: r, onOpenChange: i, hotkey: a = !0, inline: o } = e, [c, u] = p(!1), d = r ?? c, g = (e) => {
-		r === void 0 && u(e), i?.(e);
-	}, _ = f(() => g(!d));
-	_.current = () => g(!d), l(() => {
+function D(e) {
+	let { open: r, onOpenChange: i, hotkey: a = !0, inline: o } = e, [u, d] = _(!1), f = r ?? u, m = (e) => {
+		r === void 0 && d(e), i?.(e);
+	}, h = g(() => m(!f));
+	h.current = () => m(!f), p(() => {
 		if (!a || o) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), _.current());
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), h.current());
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [a, o]);
-	let y = s(d), b = n(), x = t();
-	return o ? /* @__PURE__ */ m(S, {
+	let b = s(f), x = n(), C = t(), w = c(!o && f), T = l(f);
+	return o ? /* @__PURE__ */ v(E, {
 		...e,
 		close: () => void 0
-	}) : /* @__PURE__ */ m(v.Root, {
-		open: d,
-		onOpenChange: (e) => g(e),
-		children: /* @__PURE__ */ h(v.Portal, {
-			container: x,
-			children: [/* @__PURE__ */ m(v.Backdrop, { className: "fixed inset-0 z-50 bg-overlay backdrop-motion" }), /* @__PURE__ */ m(v.Viewport, {
+	}) : /* @__PURE__ */ v(S.Root, {
+		open: f,
+		onOpenChange: (e) => m(e),
+		onOpenChangeComplete: w,
+		children: /* @__PURE__ */ y(S.Portal, {
+			container: C,
+			children: [/* @__PURE__ */ v(S.Backdrop, { className: "fixed inset-0 z-50 bg-overlay backdrop-motion" }), /* @__PURE__ */ v(S.Viewport, {
 				className: "fixed inset-0 z-50 flex items-start justify-center px-16 pt-palette",
-				children: /* @__PURE__ */ m(v.Popup, {
-					"aria-label": b("commandPalette.label", "Command palette"),
-					initialFocus: y.initialFocus,
-					finalFocus: y.finalFocus,
-					className: "w-640 max-w-full overflow-hidden rounded-palette bg-raised text-fg shadow-dialog outline-none dialog-motion",
-					children: d && /* @__PURE__ */ m(S, {
+				children: /* @__PURE__ */ v(S.Popup, {
+					"aria-label": x("commandPalette.label", "Command palette"),
+					initialFocus: b.initialFocus,
+					finalFocus: b.finalFocus,
+					className: "flex w-640 max-w-full flex-col overflow-hidden rounded-palette bg-raised text-fg shadow-dialog outline-none dialog-motion",
+					children: /* @__PURE__ */ v(E, {
 						...e,
-						close: () => g(!1)
-					})
+						close: () => m(!1)
+					}, T)
 				})
 			})]
 		})
 	});
 }
-process.env.NODE_ENV !== "production" && (C.displayName = "CommandPalette");
+process.env.NODE_ENV !== "production" && (D.displayName = "CommandPalette");
 //#endregion
-export { C as CommandPalette, b as KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS, y as KAESO_COMMAND_PALETTE_VARIANTS };
+export { D as CommandPalette, w as KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS, C as KAESO_COMMAND_PALETTE_VARIANTS };
 
 //# sourceMappingURL=command-palette.js.map

package/dist/components/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":["__icon_Search01Icon","__icon_ArrowRight01Icon","BaseDialog","cn","usePortalContainer","useUiText","Icon","Kbd","focusInputOnPress","useRestoreFocus","KAESO_COMMAND_PALETTE_VARIANTS","KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS","matches","q","hay","item","w","Palette","placeholderProp","t","placeholder","query","setQuery","useState","defaultQuery","pages","setPages","active","setActive","listId","useId","input","useRef","page","source","groups","visible","useMemo","g","i","flat","loading","select","children","p","close","onKeyDown","a","index","inline","Search01Icon","onQueryChange","emptyText","Fragment","isActive","KbdSequence","ArrowRight01Icon","gi","keyHints","CommandPalette","props","inner","setInner","isOpen","open","setOpen","o","onOpenChange","toggle","useEffect","hotkey","onKey","focus","container","Dialog"],"sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import { usePortalContainer } from \"../../utils/portal-context.js\";\nimport { Fragment, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn.js\";\nimport { focusInputOnPress } from \"../../utils/field-press.js\";\nimport { useRestoreFocus } from \"../../utils/restore-focus.js\";\nimport { Search01Icon as __icon_Search01Icon, ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { KbdSequence, Kbd } from \"../kbd/kbd.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_COMMAND_PALETTE_VARIANTS = {\n  size: {\n    md: { classes: \"w-640\" },\n  },\n} as const;\nexport const KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  icon?: IconData | undefined;\n  hint?: string | undefined;\n  shortcut?: string[] | string[][] | undefined;\n  keywords?: string[] | undefined;\n  onSelect?: (() => void) | undefined;\n  children?: CommandGroup[] | undefined;\n}\n\nexport interface CommandGroup {\n  label?: string | undefined;\n  items: CommandItem[];\n  loading?: boolean | undefined;\n}\n\nexport interface CommandPaletteProps {\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  groups: CommandGroup[];\n  placeholder?: string | undefined;\n  emptyText?: ReactNode | undefined;\n  onQueryChange?: ((query: string) => void) | undefined;\n  hotkey?: boolean | undefined;\n  keyHints?: boolean | undefined;\n  inline?: boolean | undefined;\n  defaultQuery?: string | undefined;\n}\n\nfunction matches(item: CommandItem, q: string) {\n  if (!q) return true;\n  const hay = [item.label, item.hint ?? \"\", ...(item.keywords ?? [])].join(\" \").toLowerCase();\n  return q\n    .toLowerCase()\n    .split(/\\s+/)\n    .every((w) => hay.includes(w));\n}\n\nfunction Palette({\n  groups,\n  keyHints,\n  placeholder: placeholderProp,\n  emptyText,\n  onQueryChange,\n  close,\n  inline,\n  defaultQuery = \"\",\n}: CommandPaletteProps & { close: () => void }) {\n  const t = useUiText();\n  const placeholder = placeholderProp ?? t(\"commandPalette.placeholder\", \"Search or run a command\");\n  const [query, setQuery] = useState(defaultQuery);\n  const [pages, setPages] = useState<{ title: string; groups: CommandGroup[] }[]>([]);\n  const [active, setActive] = useState(0);\n  const listId = useId();\n  const input = useRef<HTMLInputElement>(null);\n  const page = pages[pages.length - 1];\n  const source = page ? page.groups : groups;\n  const visible = useMemo(\n    () => source.map((g) => ({ ...g, items: g.items.filter((i) => matches(i, query)) })).filter((g) => g.items.length > 0 || g.loading),\n    [source, query],\n  );\n  const flat = visible.flatMap((g) => g.items);\n  const loading = source.some((g) => g.loading);\n  useEffect(() => {\n    document.getElementById(`${listId}-${flat[active]?.id}`)?.scrollIntoView({ block: \"nearest\" });\n  }, [active, flat, listId]);\n\n  const select = (item: CommandItem | undefined) => {\n    if (!item) return;\n    const children = item.children;\n    if (children) {\n      setPages((p) => [...p, { title: item.label, groups: children }]);\n      setQuery(\"\");\n      setActive(0);\n      input.current?.focus();\n      return;\n    }\n    item.onSelect?.();\n    close();\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a + 1) % flat.length : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      select(flat[active]);\n    } else if (e.key === \"Backspace\" && !query && pages.length) {\n      e.preventDefault();\n      setPages((p) => p.slice(0, -1));\n      setActive(0);\n    } else if (e.key === \"Home\") {\n      setActive(0);\n    } else if (e.key === \"End\") {\n      setActive(Math.max(0, flat.length - 1));\n    }\n  };\n\n  let index = -1;\n  return (\n    <div className={cn(\"relative flex palette-limits flex-col overflow-hidden\", inline && \"w-640 rounded-palette bg-raised shadow-dialog\")}>\n      {loading && (\n        <span aria-hidden className=\"absolute inset-x-0 top-0 h-2 overflow-hidden\">\n          <span className=\"block h-full w-1/3 animate-indeterminate bg-fg-tertiary\" />\n        </span>\n      )}\n      <div onMouseDown={focusInputOnPress} className=\"flex h-56 shrink-0 cursor-text items-center gap-12 px-20 hairline-b\">\n        <Icon icon={__icon_Search01Icon} size=\"md\" className=\"text-fg-tertiary\" />\n        {page && <span className=\"inline-flex h-24 shrink-0 items-center rounded-pill bg-fill-2 px-10 text-caption font-medium text-fg\">{page.title}</span>}\n        <input\n          ref={input}\n          autoFocus\n          role=\"combobox\"\n          aria-expanded=\"true\"\n          aria-controls={listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={flat[active] ? `${listId}-${flat[active].id}` : undefined}\n          aria-label={placeholder}\n          placeholder={placeholder}\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setActive(0);\n            onQueryChange?.(e.target.value);\n          }}\n          onKeyDown={onKeyDown}\n          className=\"min-w-0 flex-1 bg-transparent text-body-lg font-regular text-fg outline-none placeholder:text-fg-tertiary\"\n        />\n      </div>\n      <div\n        id={listId}\n        {...(flat.length ? { role: \"listbox\", \"aria-label\": t(\"commandPalette.results\", \"Results\") } : { role: \"status\" })}\n        className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-8 scrollbar-quiet\"\n      >\n        {flat.length === 0 && !loading && (\n          <div className=\"flex h-80 items-center justify-center text-body text-fg-secondary\">{emptyText ?? t(\"commandPalette.noResults\", \"No results\")}</div>\n        )}\n        {visible.map((g, gi) => (\n          <Fragment key={g.label ?? gi}>\n            {g.label && <div className=\"flex h-28 items-center px-12 pt-4 text-caption font-medium text-fg-secondary\">{g.label}</div>}\n            {g.items.map((item) => {\n              index += 1;\n              const i = index;\n              const isActive = i === active;\n              return (\n                <div\n                  key={item.id}\n                  id={`${listId}-${item.id}`}\n                  role=\"option\"\n                  aria-selected={isActive}\n                  onMouseMove={() => setActive(i)}\n                  onClick={() => select(item)}\n                  className={cn(\n                    \"flex h-40 cursor-pointer items-center gap-12 rounded-palette-item px-12 text-body font-medium text-fg select-none\",\n                    isActive && \"bg-item-hover\",\n                  )}\n                >\n                  {item.icon && <Icon icon={item.icon} size=\"sm\" className={isActive ? \"text-fg\" : \"text-fg-secondary\"} />}\n                  <span className=\"min-w-0 truncate\">{item.label}</span>\n                  {item.hint && (\n                    <span className={cn(\"min-w-0 truncate text-body font-regular\", isActive ? \"text-fg-secondary\" : \"text-fg-tertiary\")}>{item.hint}</span>\n                  )}\n                  <span className=\"ml-auto flex shrink-0 items-center gap-8\">\n                    {item.shortcut && <KbdSequence keys={item.shortcut} />}\n                    {item.children && <Icon icon={__icon_ArrowRight01Icon} size=\"sm\" className=\"text-fg-tertiary\" />}\n                  </span>\n                </div>\n              );\n            })}\n          </Fragment>\n        ))}\n      </div>\n      {keyHints && (\n        <div className=\"flex h-40 shrink-0 items-center gap-16 px-16 text-caption font-medium text-fg-tertiary hairline-t\">\n          <span className=\"inline-flex items-center gap-6\">\n            <Kbd>up</Kbd>\n            <Kbd>down</Kbd> {t(\"commandPalette.toNavigate\", \"to navigate\")}\n          </span>\n          <span className=\"inline-flex items-center gap-6\">\n            <Kbd>enter</Kbd> {t(\"commandPalette.toOpen\", \"to open\")}\n          </span>\n          {pages.length > 0 && (\n            <span className=\"inline-flex items-center gap-6\">\n              <Kbd>backspace</Kbd> {t(\"commandPalette.toGoBack\", \"to go back\")}\n            </span>\n          )}\n          <span className=\"ml-auto inline-flex items-center gap-6\">\n            <Kbd>esc</Kbd> {t(\"commandPalette.toClose\", \"to close\")}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function CommandPalette(props: CommandPaletteProps) {\n  const { open, onOpenChange, hotkey = true, inline } = props;\n  const [inner, setInner] = useState(false);\n  const isOpen = open ?? inner;\n  const setOpen = (o: boolean) => {\n    if (open === undefined) setInner(o);\n    onOpenChange?.(o);\n  };\n  const toggle = useRef(() => setOpen(!isOpen));\n  toggle.current = () => setOpen(!isOpen);\n  useEffect(() => {\n    if (!hotkey || inline) return;\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"k\") {\n        e.preventDefault();\n        toggle.current();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [hotkey, inline]);\n  const focus = useRestoreFocus(isOpen);\n  const t = useUiText();\n  const container = usePortalContainer();\n  if (inline) return <Palette {...props} close={() => undefined} />;\n  return (\n    <BaseDialog.Root open={isOpen} onOpenChange={(o: boolean) => setOpen(o)}>\n      <BaseDialog.Portal container={container}>\n        <BaseDialog.Backdrop className=\"fixed inset-0 z-50 bg-overlay backdrop-motion\" />\n        <BaseDialog.Viewport className=\"fixed inset-0 z-50 flex items-start justify-center px-16 pt-palette\">\n          <BaseDialog.Popup\n            aria-label={t(\"commandPalette.label\", \"Command palette\")}\n            initialFocus={focus.initialFocus}\n            finalFocus={focus.finalFocus}\n            className=\"w-640 max-w-full overflow-hidden rounded-palette bg-raised text-fg shadow-dialog outline-none dialog-motion\"\n          >\n            {isOpen && <Palette {...props} close={() => setOpen(false)} />}\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") CommandPalette.displayName = \"CommandPalette\";\n"],"mappings":"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"}
+{"version":3,"file":"command-palette.js","names":["__icon_Search01Icon","__icon_ArrowRight01Icon","BaseDialog","cn","usePortalContainer","useUiText","Icon","Kbd","focusInputOnPress","useRestoreFocus","useScopedDialog","useOpenSession","useResizeMotion","KAESO_COMMAND_PALETTE_VARIANTS","KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS","matches","q","hay","item","w","Palette","placeholderProp","controlledQuery","t","placeholder","ownQuery","setOwnQuery","useState","defaultQuery","query","setQuery","next","onQueryChange","pages","setPages","active","setActive","listId","useId","input","useRef","box","setBox","boxRef","useCallback","inline","el","page","source","groups","visible","useMemo","g","i","flat","loading","select","children","p","close","onKeyDown","a","index","Search01Icon","emptyText","Fragment","isActive","KbdSequence","ArrowRight01Icon","gi","keyHints","CommandPalette","props","inner","setInner","isOpen","open","setOpen","o","onOpenChange","toggle","useEffect","hotkey","onKey","focus","container","settled","session","Dialog"],"sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import { usePortalContainer } from \"../../utils/portal-context.js\";\nimport { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../../utils/cn.js\";\nimport { focusInputOnPress } from \"../../utils/field-press.js\";\nimport { useRestoreFocus } from \"../../utils/restore-focus.js\";\nimport { useOpenSession, useScopedDialog } from \"../../utils/dialog-scope.js\";\nimport { Search01Icon as __icon_Search01Icon, ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { KbdSequence, Kbd } from \"../kbd/kbd.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport { useResizeMotion } from \"../../utils/resize-motion.js\";\n\nexport const KAESO_COMMAND_PALETTE_VARIANTS = {\n  size: {\n    md: { classes: \"w-640\" },\n  },\n} as const;\nexport const KAESO_COMMAND_PALETTE_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  icon?: IconData | undefined;\n  hint?: string | undefined;\n  shortcut?: string[] | string[][] | undefined;\n  keywords?: string[] | undefined;\n  onSelect?: (() => void) | undefined;\n  children?: CommandGroup[] | undefined;\n}\n\nexport interface CommandGroup {\n  label?: string | undefined;\n  items: CommandItem[];\n  loading?: boolean | undefined;\n}\n\nexport interface CommandPaletteProps {\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  groups: CommandGroup[];\n  placeholder?: string | undefined;\n  emptyText?: ReactNode | undefined;\n  onQueryChange?: ((query: string) => void) | undefined;\n  hotkey?: boolean | undefined;\n  keyHints?: boolean | undefined;\n  inline?: boolean | undefined;\n  defaultQuery?: string | undefined;\n  query?: string | undefined;\n}\n\nfunction matches(item: CommandItem, q: string) {\n  if (!q) return true;\n  const hay = [item.label, item.hint ?? \"\", ...(item.keywords ?? [])].join(\" \").toLowerCase();\n  return q\n    .toLowerCase()\n    .split(/\\s+/)\n    .every((w) => hay.includes(w));\n}\n\nfunction Palette({\n  groups,\n  keyHints,\n  placeholder: placeholderProp,\n  emptyText,\n  onQueryChange,\n  close,\n  inline,\n  defaultQuery = \"\",\n  query: controlledQuery,\n}: CommandPaletteProps & { close: () => void }) {\n  const t = useUiText();\n  const placeholder = placeholderProp ?? t(\"commandPalette.placeholder\", \"Search or run a command\");\n  const [ownQuery, setOwnQuery] = useState(defaultQuery);\n  const query = controlledQuery ?? ownQuery;\n  const setQuery = (next: string) => {\n    setOwnQuery(next);\n    onQueryChange?.(next);\n  };\n  const [pages, setPages] = useState<{ title: string; groups: CommandGroup[] }[]>([]);\n  const [active, setActive] = useState(0);\n  const listId = useId();\n  const input = useRef<HTMLInputElement>(null);\n  const [box, setBox] = useState<HTMLElement | null>(null);\n  const boxRef = useCallback((el: HTMLElement | null) => setBox(inline ? null : (el?.parentElement ?? null)), [inline]);\n  useResizeMotion(box);\n  const page = pages[pages.length - 1];\n  const source = page ? page.groups : groups;\n  const visible = useMemo(\n    () => source.map((g) => ({ ...g, items: g.items.filter((i) => matches(i, query)) })).filter((g) => g.items.length > 0 || g.loading),\n    [source, query],\n  );\n  const flat = visible.flatMap((g) => g.items);\n  const loading = source.some((g) => g.loading);\n  useEffect(() => {\n    document.getElementById(`${listId}-${flat[active]?.id}`)?.scrollIntoView({ block: \"nearest\" });\n  }, [active, flat, listId]);\n\n  const select = (item: CommandItem | undefined) => {\n    if (!item) return;\n    const children = item.children;\n    if (children) {\n      setPages((p) => [...p, { title: item.label, groups: children }]);\n      setQuery(\"\");\n      setActive(0);\n      input.current?.focus();\n      return;\n    }\n    item.onSelect?.();\n    close();\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a + 1) % flat.length : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      select(flat[active]);\n    } else if (e.key === \"Backspace\" && !query && pages.length) {\n      e.preventDefault();\n      setPages((p) => p.slice(0, -1));\n      setActive(0);\n    } else if (e.key === \"Home\") {\n      setActive(0);\n    } else if (e.key === \"End\") {\n      setActive(Math.max(0, flat.length - 1));\n    }\n  };\n\n  let index = -1;\n  return (\n    <div\n      ref={boxRef}\n      className={cn(\"relative flex palette-limits min-h-0 flex-col overflow-hidden\", inline ? \"w-640 rounded-palette bg-raised shadow-dialog\" : \"flex-1\")}\n    >\n      {loading && (\n        <span aria-hidden className=\"absolute inset-x-0 top-0 h-2 overflow-hidden\">\n          <span className=\"block h-full w-1/3 animate-indeterminate bg-fg-tertiary\" />\n        </span>\n      )}\n      <div onMouseDown={focusInputOnPress} className=\"flex h-56 shrink-0 cursor-text items-center gap-12 px-20 hairline-b\">\n        <Icon icon={__icon_Search01Icon} size=\"md\" className=\"text-fg-tertiary\" />\n        {page && <span className=\"inline-flex h-24 shrink-0 items-center rounded-pill bg-fill-2 px-10 text-caption font-medium text-fg\">{page.title}</span>}\n        <input\n          ref={input}\n          autoFocus\n          data-palette-input=\"\"\n          role=\"combobox\"\n          aria-expanded=\"true\"\n          aria-controls={listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={flat[active] ? `${listId}-${flat[active].id}` : undefined}\n          aria-label={placeholder}\n          placeholder={placeholder}\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value);\n            setActive(0);\n          }}\n          onKeyDown={onKeyDown}\n          className=\"min-w-0 flex-1 bg-transparent text-body-lg font-regular text-fg outline-none placeholder:text-fg-tertiary\"\n        />\n      </div>\n      <div\n        id={listId}\n        data-dialog-body=\"\"\n        {...(flat.length ? { role: \"listbox\", \"aria-label\": t(\"commandPalette.results\", \"Results\") } : { role: \"status\" })}\n        className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-8 scrollbar-quiet\"\n      >\n        {flat.length === 0 && !loading && (\n          <div className=\"flex h-80 items-center justify-center text-body text-fg-secondary\">{emptyText ?? t(\"commandPalette.noResults\", \"No results\")}</div>\n        )}\n        {visible.map((g, gi) => (\n          <Fragment key={g.label ?? gi}>\n            {g.label && <div className=\"flex h-28 items-center px-12 pt-4 text-caption font-medium text-fg-secondary\">{g.label}</div>}\n            {g.items.map((item) => {\n              index += 1;\n              const i = index;\n              const isActive = i === active;\n              return (\n                <div\n                  key={item.id}\n                  id={`${listId}-${item.id}`}\n                  role=\"option\"\n                  aria-selected={isActive}\n                  onMouseMove={() => setActive(i)}\n                  onClick={() => select(item)}\n                  className={cn(\n                    \"flex h-40 cursor-pointer items-center gap-12 rounded-palette-item px-12 text-body font-medium text-fg select-none\",\n                    isActive && \"bg-item-hover\",\n                  )}\n                >\n                  {item.icon && <Icon icon={item.icon} size=\"sm\" className={isActive ? \"text-fg\" : \"text-fg-secondary\"} />}\n                  <span className=\"min-w-0 truncate\">{item.label}</span>\n                  {item.hint && (\n                    <span className={cn(\"min-w-0 truncate text-body font-regular\", isActive ? \"text-fg-secondary\" : \"text-fg-tertiary\")}>{item.hint}</span>\n                  )}\n                  <span className=\"ml-auto flex shrink-0 items-center gap-8\">\n                    {item.shortcut && <KbdSequence keys={item.shortcut} />}\n                    {item.children && <Icon icon={__icon_ArrowRight01Icon} size=\"sm\" className=\"text-fg-tertiary\" />}\n                  </span>\n                </div>\n              );\n            })}\n          </Fragment>\n        ))}\n      </div>\n      {keyHints && (\n        <div className=\"flex h-40 shrink-0 items-center gap-16 px-16 text-caption font-medium text-fg-tertiary hairline-t\">\n          <span className=\"inline-flex items-center gap-6\">\n            <Kbd>up</Kbd>\n            <Kbd>down</Kbd> {t(\"commandPalette.toNavigate\", \"to navigate\")}\n          </span>\n          <span className=\"inline-flex items-center gap-6\">\n            <Kbd>enter</Kbd> {t(\"commandPalette.toOpen\", \"to open\")}\n          </span>\n          {pages.length > 0 && (\n            <span className=\"inline-flex items-center gap-6\">\n              <Kbd>backspace</Kbd> {t(\"commandPalette.toGoBack\", \"to go back\")}\n            </span>\n          )}\n          <span className=\"ml-auto inline-flex items-center gap-6\">\n            <Kbd>esc</Kbd> {t(\"commandPalette.toClose\", \"to close\")}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function CommandPalette(props: CommandPaletteProps) {\n  const { open, onOpenChange, hotkey = true, inline } = props;\n  const [inner, setInner] = useState(false);\n  const isOpen = open ?? inner;\n  const setOpen = (o: boolean) => {\n    if (open === undefined) setInner(o);\n    onOpenChange?.(o);\n  };\n  const toggle = useRef(() => setOpen(!isOpen));\n  toggle.current = () => setOpen(!isOpen);\n  useEffect(() => {\n    if (!hotkey || inline) return;\n    const onKey = (e: globalThis.KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"k\") {\n        e.preventDefault();\n        toggle.current();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [hotkey, inline]);\n  const focus = useRestoreFocus(isOpen);\n  const t = useUiText();\n  const container = usePortalContainer();\n  const settled = useScopedDialog(inline ? false : isOpen);\n  const session = useOpenSession(isOpen);\n  if (inline) return <Palette {...props} close={() => undefined} />;\n  return (\n    <BaseDialog.Root open={isOpen} onOpenChange={(o: boolean) => setOpen(o)} onOpenChangeComplete={settled}>\n      <BaseDialog.Portal container={container}>\n        <BaseDialog.Backdrop className=\"fixed inset-0 z-50 bg-overlay backdrop-motion\" />\n        <BaseDialog.Viewport className=\"fixed inset-0 z-50 flex items-start justify-center px-16 pt-palette\">\n          <BaseDialog.Popup\n            aria-label={t(\"commandPalette.label\", \"Command palette\")}\n            initialFocus={focus.initialFocus}\n            finalFocus={focus.finalFocus}\n            className=\"flex w-640 max-w-full flex-col overflow-hidden rounded-palette bg-raised text-fg shadow-dialog outline-none dialog-motion\"\n          >\n            <Palette key={session} {...props} close={() => setOpen(false)} />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\nif (process.env.NODE_ENV !== \"production\") CommandPalette.displayName = \"CommandPalette\";\n"],"mappings":"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"}

package/dist/components/copy-button.js

@@ -1,2 +1,2 @@
 "use client";
-export { t as ClipboardText, n as CopyButton, r as InlineCopyText, i as KAESO_CLIPBOARD_TEXT_DEFAULT_VARIANTS, a as KAESO_CLIPBOARD_TEXT_VARIANTS, o as KAESO_COPY_BUTTON_DEFAULT_VARIANTS, s as KAESO_COPY_BUTTON_VARIANTS } from "../chunks/copy-button-mAzHjYXq.js";
+export { t as ClipboardText, n as CopyButton, r as InlineCopyText, i as KAESO_CLIPBOARD_TEXT_DEFAULT_VARIANTS, a as KAESO_CLIPBOARD_TEXT_VARIANTS, o as KAESO_COPY_BUTTON_DEFAULT_VARIANTS, s as KAESO_COPY_BUTTON_VARIANTS } from "../chunks/copy-button-DXxn-YYZ.js";