@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/ui/presence.js

@@ -0,0 +1,65 @@
+//#region src/ui/presence.ts
+/**
+* Presence colour: ONE slot per person, the same everywhere they appear (field border, avatar ring, canvas pill, caret flag,
+* History change bars). Slots are the `--kit-presence-1…8` tokens (D56); text on a presence fill is `--kit-presence-on`.
+* Known people keep their earlier colours: priya → 1, daniel → 2, sujay → 3.
+*
+* D61: everyone else gets a slot at join, in join order, from the slots still free (all 8, not 5), so a real team rarely
+* shares a colour; once all 8 are taken the least recently assigned slot is reused. Register the workspace roster with
+* `registerPresenceRoster`. Someone not on the roster hashes stably into 4…8.
+* AI agents never take a person's slot: they use `--kit-presence-agent` (`AGENT_PRESENCE`).
+*
+* src/index.css declares the tokens app-wide (light and dark), so presenceColor() needs no fallback.
+*/
+var KNOWN = {
+	priya: 1,
+	daniel: 2,
+	sujay: 3
+};
+var SLOTS = 8;
+/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */
+var AGENT_PRESENCE = "var(--kit-presence-agent)";
+var keyOf = (person) => person.trim().toLowerCase().replace(/^u_/, "").split(/[\s@._-]+/)[0] ?? "";
+/** roster assignments: key (first name, id or email head) → slot */
+var assigned = /* @__PURE__ */ new Map();
+/**
+* Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).
+* Each member is then found by id, full name or email.
+*/
+function registerPresenceRoster(members) {
+	assigned.clear();
+	const order = [...members].sort((a, b) => a.joinedAt && b.joinedAt ? a.joinedAt.localeCompare(b.joinedAt) : 0);
+	const lastUse = /* @__PURE__ */ new Map();
+	Object.values(KNOWN).forEach((s, i) => lastUse.set(s, i));
+	let tick = 10;
+	for (const m of order) {
+		const keys = [
+			m.id.toLowerCase(),
+			keyOf(m.name),
+			m.email ? keyOf(m.email) : ""
+		].filter(Boolean);
+		let slot = keys.map((k) => KNOWN[k]).find(Boolean);
+		if (!slot) slot = Array.from({ length: SLOTS }, (_, i) => i + 1).filter((s) => !lastUse.has(s))[0] ?? [...lastUse.entries()].sort((a, b) => a[1] - b[1])[0][0];
+		lastUse.set(slot, tick++);
+		for (const k of keys) assigned.set(k, slot);
+	}
+}
+/** Accepts a person id ("u_priya", "priya"), a full name ("Priya Nair") or an email; returns the slot 1…8. */
+function presenceSlot(person) {
+	const whole = person.trim().toLowerCase();
+	const key = keyOf(person);
+	if (KNOWN[key]) return KNOWN[key];
+	const hit = assigned.get(whole) ?? assigned.get(key);
+	if (hit) return hit;
+	let h = 0;
+	for (let i = 0; i < key.length; i++) h = h * 31 + key.charCodeAt(i) >>> 0;
+	return 4 + h % 5;
+}
+/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */
+function presenceColor(person) {
+	return `var(--kit-presence-${presenceSlot(person)})`;
+}
+//#endregion
+export { AGENT_PRESENCE, presenceColor, presenceSlot, registerPresenceRoster };
+
+//# sourceMappingURL=presence.js.map

package/dist/ui/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":[],"sources":["../../src/ui/presence.ts"],"sourcesContent":["/**\n * Presence colour: ONE slot per person, the same everywhere they appear (field border, avatar ring, canvas pill, caret flag,\n * History change bars). Slots are the `--kit-presence-1…8` tokens (D56); text on a presence fill is `--kit-presence-on`.\n * Known people keep their earlier colours: priya → 1, daniel → 2, sujay → 3.\n *\n * D61: everyone else gets a slot at join, in join order, from the slots still free (all 8, not 5), so a real team rarely\n * shares a colour; once all 8 are taken the least recently assigned slot is reused. Register the workspace roster with\n * `registerPresenceRoster`. Someone not on the roster hashes stably into 4…8.\n * AI agents never take a person's slot: they use `--kit-presence-agent` (`AGENT_PRESENCE`).\n *\n * src/index.css declares the tokens app-wide (light and dark), so presenceColor() needs no fallback.\n */\nconst KNOWN: Record<string, number> = { priya: 1, daniel: 2, sujay: 3 };\nconst SLOTS = 8;\n\n/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */\nexport const AGENT_PRESENCE = \"var(--kit-presence-agent)\";\n\nconst keyOf = (person: string) => person.trim().toLowerCase().replace(/^u_/, \"\").split(/[\\s@._-]+/)[0] ?? \"\";\n/** roster assignments: key (first name, id or email head) → slot */\nconst assigned = new Map<string, number>();\n\n/**\n * Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).\n * Each member is then found by id, full name or email.\n */\nexport function registerPresenceRoster(members: { id: string; name: string; email?: string; joinedAt?: string }[]) {\n  assigned.clear();\n  const order = [...members].sort((a, b) => (a.joinedAt && b.joinedAt ? a.joinedAt.localeCompare(b.joinedAt) : 0));\n  const lastUse = new Map<number, number>(); // slot → assignment tick\n  Object.values(KNOWN).forEach((s, i) => lastUse.set(s, i));\n  let tick = 10;\n  for (const m of order) {\n    const keys = [m.id.toLowerCase(), keyOf(m.name), m.email ? keyOf(m.email) : \"\"].filter(Boolean);\n    const known = keys.map((k) => KNOWN[k]).find(Boolean);\n    let slot = known;\n    if (!slot) {\n      const free = Array.from({ length: SLOTS }, (_, i) => i + 1).filter((s) => !lastUse.has(s));\n      // all 8 taken: reuse the least recently assigned slot\n      slot = free[0] ?? [...lastUse.entries()].sort((a, b) => a[1] - b[1])[0][0];\n    }\n    lastUse.set(slot, tick++);\n    for (const k of keys) assigned.set(k, slot);\n  }\n}\n\n/** Accepts a person id (\"u_priya\", \"priya\"), a full name (\"Priya Nair\") or an email; returns the slot 1…8. */\nexport function presenceSlot(person: string): number {\n  const whole = person.trim().toLowerCase();\n  const key = keyOf(person);\n  if (KNOWN[key]) return KNOWN[key];\n  const hit = assigned.get(whole) ?? assigned.get(key);\n  if (hit) return hit;\n  let h = 0;\n  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;\n  return 4 + (h % (SLOTS - 3));\n}\n\n/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */\nexport function presenceColor(person: string): string {\n  const n = presenceSlot(person);\n  return `var(--kit-presence-${n})`;\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,QAAgC;CAAE,OAAO;CAAG,QAAQ;CAAG,OAAO;AAAE;AACtE,IAAM,QAAQ;;AAGd,IAAa,iBAAiB;AAE9B,IAAM,SAAS,WAAmB,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,OAAO,EAAE,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM;;AAE1G,IAAM,2BAAW,IAAI,IAAoB;;;;;AAMzC,SAAgB,uBAAuB,SAA4E;CACjH,SAAS,MAAM;CACf,MAAM,QAAQ,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,cAAc,EAAE,QAAQ,IAAI,CAAE;CAC/G,MAAM,0BAAU,IAAI,IAAoB;CACxC,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;CACxD,IAAI,OAAO;CACX,KAAK,MAAM,KAAK,OAAO;EACrB,MAAM,OAAO;GAAC,EAAE,GAAG,YAAY;GAAG,MAAM,EAAE,IAAI;GAAG,EAAE,QAAQ,MAAM,EAAE,KAAK,IAAI;EAAE,CAAC,CAAC,OAAO,OAAO;EAE9F,IAAI,OADU,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,KAAK,OAClC;EACX,IAAI,CAAC,MAGH,OAFa,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,QAAQ,IAAI,CAAC,CAEjF,CAAA,CAAK,MAAM,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC;EAE1E,QAAQ,IAAI,MAAM,MAAM;EACxB,KAAK,MAAM,KAAK,MAAM,SAAS,IAAI,GAAG,IAAI;CAC5C;AACF;;AAGA,SAAgB,aAAa,QAAwB;CACnD,MAAM,QAAQ,OAAO,KAAK,CAAC,CAAC,YAAY;CACxC,MAAM,MAAM,MAAM,MAAM;CACxB,IAAI,MAAM,MAAM,OAAO,MAAM;CAC7B,MAAM,MAAM,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,GAAG;CACnD,IAAI,KAAK,OAAO;CAChB,IAAI,IAAI;CACR,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK,IAAK,IAAI,KAAK,IAAI,WAAW,CAAC,MAAO;CAC1E,OAAO,IAAK,IAAK;AACnB;;AAGA,SAAgB,cAAc,QAAwB;CAEpD,OAAO,sBADG,aAAa,MACM,EAAE;AACjC"}

package/dist/ui/select.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export declare const SEARCH_THRESHOLD = 7;
+export type SelectOption = {
+    value: string;
+    label: React.ReactNode;
+    /** leading visual (16px icon); ignored when `avatar` is set */
+    icon?: React.ReactNode;
+    /** a person: renders a 20px avatar before the label */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
+    /** secondary line under the label (e.g. an email) — searchable */
+    description?: string;
+    /** muted right-aligned text (e.g. "UTC+1", a count) — searchable */
+    meta?: string;
+    /** extra words that should match (aliases, ids) */
+    keywords?: string[];
+    /** group heading; options with the same group render together, in first-seen order */
+    group?: string;
+    disabled?: boolean;
+};
+/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */
+export declare function nodeText(node: React.ReactNode): string;
+/**
+ * Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.
+ * Prefix > word start > substring > in-order characters ("nyk" → "New York").
+ */
+export declare function matchScore(text: string, query: string, { fuzzy }?: {
+    fuzzy?: boolean;
+}): number;
+/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */
+export declare function matchPositions(text: string, query: string): Set<number>;
+/** Renders `text` with the characters that match `query` emphasised. */
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Filter + rank options for `query` (stable within equal scores). */
+export declare function filterOptions<T extends SelectOption>(options: T[], query: string): T[];
+declare function triggerClass(variant: "filled" | "outline" | "ghost", size: "sm" | "md" | "lg"): string;
+/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */
+export declare const selectTriggerClass: typeof triggerClass;
+export interface SelectProps {
+    id?: string;
+    "aria-label"?: string;
+    value?: string;
+    /** uncontrolled starting value (leave `value` undefined) */
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    triggerClassName?: string;
+    variant?: "filled" | "outline" | "ghost";
+    align?: "start" | "center" | "end";
+    disabled?: boolean;
+    /** "auto" (default): search appears when there are more than 7 options. */
+    searchable?: boolean | "auto";
+    searchPlaceholder?: string;
+    /** popover width for the searchable menu (defaults to the trigger, at least 240px) */
+    menuClassName?: string;
+}
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/select.js

@@ -0,0 +1,407 @@
+import { cn } from "../lib/cn.js";
+import { useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import { Avatar } from "./display.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/ui/select.tsx
+var SEARCH_THRESHOLD = 7;
+/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */
+function nodeText(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(nodeText).join("");
+	if (React.isValidElement(node)) return nodeText(node.props.children);
+	return "";
+}
+var SEP = /[\s\-_/.(@+]/;
+var norm = (s) => s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+/**
+* Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.
+* Prefix > word start > substring > in-order characters ("nyk" → "New York").
+*/
+function matchScore(text, query, { fuzzy = true } = {}) {
+	const t = norm(text);
+	const terms = norm(query).trim().split(/\s+/).filter(Boolean);
+	if (!terms.length) return 1;
+	let score = 0;
+	for (const term of terms) {
+		const at = t.indexOf(term);
+		if (at === 0) score += 4;
+		else if (at > 0) score += SEP.test(t[at - 1]) ? 3 : 2;
+		else if (fuzzy && fuzzyPositions(t, term)) score += 1;
+		else return 0;
+	}
+	return score;
+}
+/** In-order characters of `term` in `t`, tight enough to be intended ("nyk" → New York, not across a paragraph). */
+function fuzzyPositions(t, term) {
+	if (term.length < 2) return null;
+	for (let start = t.indexOf(term[0]); start >= 0; start = t.indexOf(term[0], start + 1)) {
+		if (start > 0 && !SEP.test(t[start - 1])) continue;
+		const out = [start];
+		let i = start + 1;
+		for (const ch of term.slice(1)) {
+			i = t.indexOf(ch, i);
+			if (i < 0) break;
+			out.push(i++);
+		}
+		if (out.length === term.length && out[out.length - 1] - start + 1 <= term.length * 3) return out;
+	}
+	return null;
+}
+/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */
+function matchPositions(text, query) {
+	const t = norm(text);
+	const hits = /* @__PURE__ */ new Set();
+	for (const term of norm(query).trim().split(/\s+/).filter(Boolean)) {
+		const at = t.indexOf(term);
+		if (at >= 0) for (let k = 0; k < term.length; k++) hits.add(at + k);
+		else fuzzyPositions(t, term)?.forEach((k) => hits.add(k));
+	}
+	return hits;
+}
+/** Renders `text` with the characters that match `query` emphasised. */
+function Highlight({ text, query }) {
+	if (!query.trim()) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	if (norm(text).length !== text.length) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	const hits = matchPositions(text, query);
+	if (!hits.size) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	const parts = [];
+	let run = "";
+	let on = false;
+	const flush = (k) => {
+		if (!run) return;
+		parts.push(on ? /* @__PURE__ */ jsx("mark", {
+			className: "rounded-[2px] bg-transparent font-semibold text-kit-fg",
+			children: run
+		}, k) : run);
+		run = "";
+	};
+	for (let k = 0; k < text.length; k++) {
+		const h = hits.has(k);
+		if (h !== on) {
+			flush(k);
+			on = h;
+		}
+		run += text[k];
+	}
+	flush(text.length);
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+/** Filter + rank options for `query` (stable within equal scores). */
+function filterOptions(options, query) {
+	if (!query.trim()) return options;
+	return options.map((o, i) => {
+		const label = nodeText(o.label);
+		const main = matchScore(label, query);
+		const rest = matchScore([
+			label,
+			o.description,
+			o.meta,
+			...o.keywords ?? []
+		].filter(Boolean).join(" "), query, { fuzzy: false });
+		const exact = o.keywords?.some((k) => norm(k) === norm(query.trim())) ? 9 : 0;
+		return {
+			o,
+			i,
+			s: Math.max(main ? main * 2 + 1 : rest, exact),
+			len: label.length
+		};
+	}).filter((x) => x.s > 0).sort((a, b) => b.s - a.s || a.len - b.len || a.i - b.i).map((x) => x.o);
+}
+function grouped(options) {
+	if (!options.some((o) => o.group)) return [{ items: options }];
+	const out = [];
+	for (const o of options) {
+		const g = out.find((x) => x.group === o.group);
+		if (g) g.items.push(o);
+		else out.push({
+			group: o.group,
+			items: [o]
+		});
+	}
+	return out;
+}
+function triggerClass(variant, size) {
+	return cn("group inline-flex w-full min-w-0 items-center justify-between gap-2 rounded-kit-md border px-2.5 text-left text-kit-fg transition-colors data-[placeholder]:text-kit-fg-3 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60", variant === "filled" && "border-kit-field-border bg-kit-field-bg shadow-kit-field hover:border-kit-field-border-hover", variant === "outline" && "border-kit-line bg-kit-field-bg shadow-kit-xs hover:border-kit-line-strong", variant === "ghost" && "w-auto border-transparent bg-transparent px-2 text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg", size === "sm" ? "h-7 text-kit-sm" : size === "lg" ? "h-9 text-kit-base" : "h-8 text-kit-sm");
+}
+/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */
+var selectTriggerClass = triggerClass;
+var itemClass = cn("relative flex cursor-pointer select-none items-center gap-2 rounded-kit-md py-1.5 pl-2 pr-8 text-kit-sm text-kit-fg outline-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-kit-fg-2", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover");
+var groupHeading = "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3";
+function Lead({ o }) {
+	if (o.avatar) return /* @__PURE__ */ jsx(Avatar, {
+		name: o.avatar.name,
+		src: o.avatar.src,
+		size: 20,
+		decorative: true
+	});
+	return o.icon ? /* @__PURE__ */ jsx(Fragment, { children: o.icon }) : null;
+}
+function Select(props) {
+	const { searchable = "auto", options } = props;
+	return searchable === true || searchable === "auto" && options.length > 7 ? /* @__PURE__ */ jsx(SearchSelect, { ...props }) : /* @__PURE__ */ jsx(PlainSelect, { ...props });
+}
+function useTriggerA11y(id, ariaLabel, placeholder) {
+	const fieldId = useFieldId();
+	const labelledBy = useFieldLabelledBy();
+	const labelFor = useLabelFor(id ?? fieldId);
+	return {
+		id: id ?? fieldId,
+		"aria-label": ariaLabel ?? (fieldId || labelledBy || labelFor ? void 0 : typeof placeholder === "string" && placeholder !== "Select…" ? placeholder : void 0),
+		"aria-labelledby": ariaLabel ? void 0 : labelFor ?? (id || fieldId ? void 0 : labelledBy)
+	};
+}
+/** Value that is controlled when `value` is passed and internal otherwise. */
+function useSelectValue(value, defaultValue, onValueChange) {
+	const [inner, setInner] = React.useState(defaultValue);
+	const controlled = value !== void 0;
+	const current = controlled ? value : inner;
+	const set = (v) => {
+		if (!controlled) setInner(v);
+		onValueChange?.(v);
+	};
+	return [current, set];
+}
+function PlainSelect({ value, defaultValue, onValueChange, options, placeholder = "Select…", size = "md", className, triggerClassName, variant = "filled", align = "start", disabled, id, "aria-label": ariaLabel }) {
+	const a11y = useTriggerA11y(id, ariaLabel, placeholder);
+	const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);
+	const [open, setOpen] = React.useState(false);
+	const items = React.useMemo(() => options.map((o) => ({
+		value: o.value,
+		label: o.label
+	})), [options]);
+	const renderItem = (o) => /* @__PURE__ */ jsxs(Select$1.Item, {
+		value: o.value,
+		disabled: o.disabled,
+		className: itemClass,
+		children: [
+			/* @__PURE__ */ jsx(Lead, { o }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: o.label }), o.description ? /* @__PURE__ */ jsx("div", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: o.description
+				}) : null]
+			}),
+			o.meta ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-kit-xs tabular-nums text-kit-fg-3",
+				children: o.meta
+			}) : null,
+			/* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+				className: "absolute right-2",
+				children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-kit-fg" })
+			})
+		]
+	}, o.value);
+	return /* @__PURE__ */ jsxs(Select$1.Root, {
+		items,
+		value: current ?? null,
+		onValueChange: (v) => v != null && setCurrent(v),
+		onOpenChange: setOpen,
+		disabled,
+		children: [/* @__PURE__ */ jsxs(Select$1.Trigger, {
+			...a11y,
+			"data-state": open ? "open" : "closed",
+			className: cn(triggerClass(variant, size), triggerClassName, className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3",
+				children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder })
+			}), /* @__PURE__ */ jsx(Select$1.Icon, { children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-3.5 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180" }) })]
+		}), /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+			align,
+			sideOffset: 6,
+			alignItemWithTrigger: false,
+			className: "z-[var(--kit-z-menu,80)]",
+			"data-floating-layer": "",
+			...KIT_SCOPE,
+			children: /* @__PURE__ */ jsx(Select$1.Popup, {
+				className: "glass max-h-[min(360px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-kit-lg border p-1 data-[open]:animate-kit-pop-in",
+				children: /* @__PURE__ */ jsx(Select$1.List, { children: grouped(options).map((g, gi) => g.group ? /* @__PURE__ */ jsxs(Select$1.Group, { children: [/* @__PURE__ */ jsx(Select$1.GroupLabel, {
+					className: groupHeading,
+					children: g.group
+				}), g.items.map(renderItem)] }, g.group + gi) : g.items.map(renderItem)) })
+			})
+		}) })]
+	});
+}
+/** V2 scrollIntoContainer (block "nearest", 4px margin): scroll `el` into view inside `list` ONLY, never the shell behind it.
+*  Rects are transformed while the menu pops in (scaled), so measure in layout pixels. */
+function revealInList(list, el, margin = 4) {
+	if (!el) return;
+	const br = list.getBoundingClientRect();
+	const er = el.getBoundingClientRect();
+	const k = list.offsetHeight ? br.height / list.offsetHeight || 1 : 1;
+	const top = (er.top - br.top) / k + list.scrollTop;
+	const h = er.height / k;
+	let next = list.scrollTop;
+	if (top < list.scrollTop) next = top - margin;
+	else if (top + h > list.scrollTop + list.clientHeight) next = top + h - list.clientHeight + margin;
+	next = Math.max(0, Math.min(next, list.scrollHeight - list.clientHeight));
+	if (Math.abs(next - list.scrollTop) > .5) list.scrollTop = next;
+}
+function SearchSelect({ value, defaultValue, onValueChange, options, placeholder = "Select…", size = "md", className, triggerClassName, variant = "filled", align = "start", disabled, id, "aria-label": ariaLabel, searchPlaceholder = "Search…", menuClassName }) {
+	const a11y = useTriggerA11y(id, ariaLabel, placeholder);
+	const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const selected = options.find((o) => o.value === current);
+	const shown = React.useMemo(() => filterOptions(options, query), [options, query]);
+	const shownValues = React.useMemo(() => shown.map((o) => o.value), [shown]);
+	const listRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!open) return;
+		let raf = 0;
+		const reveal = (tries) => {
+			const list = listRef.current;
+			if (!(list && list.scrollHeight > list.clientHeight) && tries > 0) return void (raf = requestAnimationFrame(() => reveal(tries - 1)));
+			if (list) revealInList(list, list.querySelector("[data-checked=\"true\"]"));
+		};
+		reveal(6);
+		return () => cancelAnimationFrame(raf);
+	}, [open]);
+	const openWith = (q) => {
+		setQuery(q);
+		setOpen(true);
+	};
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		value: current ?? null,
+		onValueChange: (v) => {
+			if (v == null) return;
+			setCurrent(v);
+			setOpen(false);
+		},
+		open,
+		onOpenChange: (o) => o ? openWith("") : setOpen(false),
+		inputValue: query,
+		onInputValueChange: (q, details) => {
+			if (details.reason === "input-change" || details.reason === "input-clear") setQuery(q);
+		},
+		items: shownValues,
+		filter: null,
+		autoHighlight: true,
+		loopFocus: true,
+		disabled,
+		children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
+			...a11y,
+			"data-state": open ? "open" : "closed",
+			"data-placeholder": selected ? void 0 : "",
+			className: cn(triggerClass(variant, size), triggerClassName, className),
+			onKeyDown: (e) => {
+				if (e.metaKey || e.ctrlKey || e.altKey) return;
+				if (e.key.length === 1 && e.key !== " ") {
+					e.preventDefault();
+					e.preventBaseUIHandler();
+					openWith(e.key);
+				} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+					e.preventDefault();
+					e.preventBaseUIHandler();
+					openWith("");
+				}
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3",
+				children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [selected.avatar ? /* @__PURE__ */ jsx(Avatar, {
+					name: selected.avatar.name,
+					src: selected.avatar.src,
+					size: 16,
+					decorative: true
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected.label
+				})] }) : /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: placeholder
+				})
+			}), /* @__PURE__ */ jsx(IconChevronDown, {
+				"aria-hidden": true,
+				className: "size-3.5 shrink-0 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180"
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align,
+			sideOffset: 6,
+			collisionPadding: 12,
+			className: "z-[var(--kit-z-menu,80)]",
+			"data-floating-layer": "",
+			...KIT_SCOPE,
+			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				className: cn("glass flex max-h-[min(400px,var(--available-height))] w-[max(var(--anchor-width),240px)] max-w-[min(400px,calc(100vw-24px))] flex-col overflow-hidden rounded-kit-lg border text-kit-fg outline-none data-[open]:animate-kit-pop-in", menuClassName),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-0 flex-1 flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex h-9 shrink-0 items-center gap-2 border-b border-kit-line-subtle px-2.5 text-kit-fg-3",
+							children: [/* @__PURE__ */ jsx(IconSearch, {
+								"aria-hidden": true,
+								className: "size-4 shrink-0"
+							}), /* @__PURE__ */ jsx(Combobox.Input, {
+								"aria-label": typeof a11y["aria-label"] === "string" ? a11y["aria-label"] : "Options",
+								placeholder: searchPlaceholder,
+								className: "h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-4"
+							})]
+						}),
+						shown.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "px-2 py-6 text-center text-kit-sm text-kit-fg-3",
+							children: "No matches"
+						}) : null,
+						/* @__PURE__ */ jsx(Combobox.List, {
+							ref: listRef,
+							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1 empty:hidden",
+							children: grouped(shown).map((g, gi) => {
+								const items = g.items.map((o) => {
+									const text = nodeText(o.label);
+									const checked = o.value === current;
+									return /* @__PURE__ */ jsxs(Combobox.Item, {
+										value: o.value,
+										disabled: o.disabled,
+										"data-checked": checked,
+										className: itemClass,
+										children: [
+											/* @__PURE__ */ jsx(Lead, { o }),
+											/* @__PURE__ */ jsxs("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ jsx("div", {
+													className: "truncate",
+													children: typeof o.label === "string" ? /* @__PURE__ */ jsx(Highlight, {
+														text,
+														query
+													}) : o.label
+												}), o.description ? /* @__PURE__ */ jsx("div", {
+													className: "truncate text-kit-xs text-kit-fg-3",
+													children: /* @__PURE__ */ jsx(Highlight, {
+														text: o.description,
+														query
+													})
+												}) : null]
+											}),
+											o.meta ? /* @__PURE__ */ jsx("span", {
+												className: "shrink-0 text-kit-xs tabular-nums text-kit-fg-3",
+												children: o.meta
+											}) : null,
+											checked ? /* @__PURE__ */ jsx(IconCheck, {
+												"aria-hidden": true,
+												className: "absolute right-2 size-4 !text-kit-fg"
+											}) : null
+										]
+									}, o.value);
+								});
+								return g.group ? /* @__PURE__ */ jsxs(Combobox.Group, { children: [/* @__PURE__ */ jsx(Combobox.GroupLabel, {
+									className: groupHeading,
+									children: g.group
+								}), items] }, g.group + gi) : /* @__PURE__ */ jsx(React.Fragment, { children: items }, "g" + gi);
+							})
+						})
+					]
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { Highlight, SEARCH_THRESHOLD, Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass };
+
+//# sourceMappingURL=select.js.map

package/dist/ui/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../src/ui/select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport type { BaseUIEvent } from \"@base-ui/react/types\";\nimport { IconCheck, IconChevronDown, IconSearch } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldId, useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { Avatar } from \"./display\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\n/* ── Select ─────────────────────────────────────────────────────────────────\n   D34 — one Select for every dropdown. Up to SEARCH_THRESHOLD options it is a plain Base UI Select; past that (or\n   with `searchable`) the same trigger opens a Base UI Combobox: sticky search at the top, type-to-filter with\n   fuzzy-ish matching and highlighted matches, ↑↓ / Enter / Esc, typing on the closed trigger starts a search,\n   groups, avatars / icons, secondary text, \"No matches\". Call sites don't change — long lists just get search. */\n\nexport const SEARCH_THRESHOLD = 7;\n\nexport type SelectOption = {\n  value: string;\n  label: React.ReactNode;\n  /** leading visual (16px icon); ignored when `avatar` is set */\n  icon?: React.ReactNode;\n  /** a person: renders a 20px avatar before the label */\n  avatar?: { name: string; src?: string };\n  /** secondary line under the label (e.g. an email) — searchable */\n  description?: string;\n  /** muted right-aligned text (e.g. \"UTC+1\", a count) — searchable */\n  meta?: string;\n  /** extra words that should match (aliases, ids) */\n  keywords?: string[];\n  /** group heading; options with the same group render together, in first-seen order */\n  group?: string;\n  disabled?: boolean;\n};\n\n/* ── Matching (exported so custom pickers can share it) ─────────────────── */\n\n/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */\nexport function nodeText(node: React.ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(nodeText).join(\"\");\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return nodeText(node.props.children);\n  return \"\";\n}\n\nconst SEP = /[\\s\\-_/.(@+]/;\nconst norm = (s: string) => s.normalize(\"NFD\").replace(/[̀-ͯ]/g, \"\").toLowerCase();\n\n/**\n * Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.\n * Prefix > word start > substring > in-order characters (\"nyk\" → \"New York\").\n */\nexport function matchScore(text: string, query: string, { fuzzy = true }: { fuzzy?: boolean } = {}): number {\n  const t = norm(text);\n  const terms = norm(query).trim().split(/\\s+/).filter(Boolean);\n  if (!terms.length) return 1;\n  let score = 0;\n  for (const term of terms) {\n    const at = t.indexOf(term);\n    if (at === 0) score += 4;\n    else if (at > 0) score += SEP.test(t[at - 1]) ? 3 : 2;\n    else if (fuzzy && fuzzyPositions(t, term)) score += 1;\n    else return 0;\n  }\n  return score;\n}\n\n/** In-order characters of `term` in `t`, tight enough to be intended (\"nyk\" → New York, not across a paragraph). */\nfunction fuzzyPositions(t: string, term: string): number[] | null {\n  if (term.length < 2) return null;\n  // start at a word boundary (\"nyk\" → New York, not \"krasnoyarsk\"); try each so a tighter run wins\n  for (let start = t.indexOf(term[0]); start >= 0; start = t.indexOf(term[0], start + 1)) {\n    if (start > 0 && !SEP.test(t[start - 1])) continue;\n    const out = [start];\n    let i = start + 1;\n    for (const ch of term.slice(1)) {\n      i = t.indexOf(ch, i);\n      if (i < 0) break;\n      out.push(i++);\n    }\n    if (out.length === term.length && out[out.length - 1] - start + 1 <= term.length * 3) return out;\n  }\n  return null;\n}\n\n/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */\nexport function matchPositions(text: string, query: string): Set<number> {\n  const t = norm(text);\n  const hits = new Set<number>();\n  for (const term of norm(query).trim().split(/\\s+/).filter(Boolean)) {\n    const at = t.indexOf(term);\n    if (at >= 0) for (let k = 0; k < term.length; k++) hits.add(at + k);\n    else fuzzyPositions(t, term)?.forEach((k) => hits.add(k));\n  }\n  return hits;\n}\n\n/** Renders `text` with the characters that match `query` emphasised. */\nexport function Highlight({ text, query }: { text: string; query: string }) {\n  if (!query.trim()) return <>{text}</>;\n  // NFD normalisation can change length for accented text; only highlight when indexes line up.\n  if (norm(text).length !== text.length) return <>{text}</>;\n  const hits = matchPositions(text, query);\n  if (!hits.size) return <>{text}</>;\n  const parts: React.ReactNode[] = [];\n  let run = \"\";\n  let on = false;\n  const flush = (k: number) => {\n    if (!run) return;\n    parts.push(on ? <mark key={k} className=\"rounded-[2px] bg-transparent font-semibold text-kit-fg\">{run}</mark> : run);\n    run = \"\";\n  };\n  for (let k = 0; k < text.length; k++) {\n    const h = hits.has(k);\n    if (h !== on) {\n      flush(k);\n      on = h;\n    }\n    run += text[k];\n  }\n  flush(text.length);\n  return <>{parts}</>;\n}\n\n/** Filter + rank options for `query` (stable within equal scores). */\nexport function filterOptions<T extends SelectOption>(options: T[], query: string): T[] {\n  if (!query.trim()) return options;\n  return options\n    .map((o, i) => {\n      const label = nodeText(o.label);\n      const main = matchScore(label, query);\n      // secondary text (email, region, aliases) matches on whole substrings only — fuzzy there is noise\n      const rest = matchScore([label, o.description, o.meta, ...(o.keywords ?? [])].filter(Boolean).join(\" \"), query, { fuzzy: false });\n      // a hit in the label outranks a hit only in secondary text\n      // an alias typed exactly (\"IST\", \"PT\", a tag) is as good as a label prefix\n      const exact = o.keywords?.some((k) => norm(k) === norm(query.trim())) ? 9 : 0;\n      return { o, i, s: Math.max(main ? main * 2 + 1 : rest, exact), len: label.length };\n    })\n    .filter((x) => x.s > 0)\n    .sort((a, b) => b.s - a.s || a.len - b.len || a.i - b.i)\n    .map((x) => x.o);\n}\n\nfunction grouped<T extends SelectOption>(options: T[]): { group?: string; items: T[] }[] {\n  if (!options.some((o) => o.group)) return [{ items: options }];\n  const out: { group?: string; items: T[] }[] = [];\n  for (const o of options) {\n    const g = out.find((x) => x.group === o.group);\n    if (g) g.items.push(o);\n    else out.push({ group: o.group, items: [o] });\n  }\n  return out;\n}\n\n/* ── Shared look ────────────────────────────────────────────────────────── */\n\nfunction triggerClass(variant: \"filled\" | \"outline\" | \"ghost\", size: \"sm\" | \"md\" | \"lg\") {\n  const h = size === \"sm\" ? \"h-7 text-kit-sm\" : size === \"lg\" ? \"h-9 text-kit-base\" : \"h-8 text-kit-sm\";\n  return cn(\n    \"group inline-flex w-full min-w-0 items-center justify-between gap-2 rounded-kit-md border px-2.5 text-left text-kit-fg transition-colors data-[placeholder]:text-kit-fg-3 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60\",\n    variant === \"filled\" && \"border-kit-field-border bg-kit-field-bg shadow-kit-field hover:border-kit-field-border-hover\",\n    variant === \"outline\" && \"border-kit-line bg-kit-field-bg shadow-kit-xs hover:border-kit-line-strong\",\n    variant === \"ghost\" && \"w-auto border-transparent bg-transparent px-2 text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg\",\n    h,\n  );\n}\n\n/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */\nexport const selectTriggerClass = triggerClass;\n\n/* V2 select.tsx:174-178. Base UI marks the highlighted and disabled rows of both the Select and the Combobox with\n   data-highlighted / data-disabled, so the two lists share itemClass (V2's cmdk list used data-selected=true). */\nconst itemBase =\n  \"relative flex cursor-pointer select-none items-center gap-2 rounded-kit-md py-1.5 pl-2 pr-8 text-kit-sm text-kit-fg outline-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-kit-fg-2\";\nconst itemClass = cn(itemBase, \"data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover\");\n\nconst groupHeading = \"px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3\";\n\nfunction Lead({ o }: { o: SelectOption }) {\n  if (o.avatar) return <Avatar name={o.avatar.name} src={o.avatar.src} size={20} decorative />;\n  return o.icon ? <>{o.icon}</> : null;\n}\n\n/* ── Select ─────────────────────────────────────────────────────────────── */\n\nexport interface SelectProps {\n  id?: string;\n  \"aria-label\"?: string;\n  value?: string;\n  /** uncontrolled starting value (leave `value` undefined) */\n  defaultValue?: string;\n  onValueChange?: (v: string) => void;\n  options: SelectOption[];\n  placeholder?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  triggerClassName?: string;\n  variant?: \"filled\" | \"outline\" | \"ghost\";\n  align?: \"start\" | \"center\" | \"end\";\n  disabled?: boolean;\n  /** \"auto\" (default): search appears when there are more than 7 options. */\n  searchable?: boolean | \"auto\";\n  searchPlaceholder?: string;\n  /** popover width for the searchable menu (defaults to the trigger, at least 240px) */\n  menuClassName?: string;\n}\n\nexport function Select(props: SelectProps) {\n  const { searchable = \"auto\", options } = props;\n  const search = searchable === true || (searchable === \"auto\" && options.length > SEARCH_THRESHOLD);\n  return search ? <SearchSelect {...props} /> : <PlainSelect {...props} />;\n}\n\nfunction useTriggerA11y(id: string | undefined, ariaLabel: string | undefined, placeholder: React.ReactNode) {\n  const fieldId = useFieldId();\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(id ?? fieldId);\n  return {\n    id: id ?? fieldId,\n    \"aria-label\": ariaLabel ?? (fieldId || labelledBy || labelFor ? undefined : typeof placeholder === \"string\" && placeholder !== \"Select…\" ? placeholder : undefined),\n    \"aria-labelledby\": ariaLabel ? undefined : (labelFor ?? (id || fieldId ? undefined : labelledBy)),\n  };\n}\n\n/** Value that is controlled when `value` is passed and internal otherwise. */\nfunction useSelectValue(value: string | undefined, defaultValue: string | undefined, onValueChange?: (v: string) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = (v: string) => {\n    if (!controlled) setInner(v);\n    onValueChange?.(v);\n  };\n  return [current, set] as const;\n}\n\nfunction PlainSelect({\n  value,\n  defaultValue,\n  onValueChange,\n  options,\n  placeholder = \"Select…\",\n  size = \"md\",\n  className,\n  triggerClassName,\n  variant = \"filled\",\n  align = \"start\",\n  disabled,\n  id,\n  \"aria-label\": ariaLabel,\n}: SelectProps) {\n  const a11y = useTriggerA11y(id, ariaLabel, placeholder);\n  const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options]);\n  const renderItem = (o: SelectOption) => (\n    <SelectPrimitive.Item key={o.value} value={o.value} disabled={o.disabled} className={itemClass}>\n      <Lead o={o} />\n      <div className=\"min-w-0 flex-1\">\n        <SelectPrimitive.ItemText>{o.label}</SelectPrimitive.ItemText>\n        {o.description ? <div className=\"text-kit-xs text-kit-fg-3\">{o.description}</div> : null}\n      </div>\n      {o.meta ? <span className=\"shrink-0 text-kit-xs tabular-nums text-kit-fg-3\">{o.meta}</span> : null}\n      <SelectPrimitive.ItemIndicator className=\"absolute right-2\">\n        <IconCheck className=\"size-4 text-kit-fg\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n  return (\n    <SelectPrimitive.Root<string>\n      items={items}\n      value={current ?? null}\n      onValueChange={(v) => v != null && setCurrent(v)}\n      onOpenChange={setOpen}\n      disabled={disabled}\n    >\n      <SelectPrimitive.Trigger\n        {...a11y}\n        data-state={open ? \"open\" : \"closed\"}\n        className={cn(triggerClass(variant, size), triggerClassName, className)}\n      >\n        <span className=\"flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3\">\n          <SelectPrimitive.Value placeholder={placeholder} />\n        </span>\n        <SelectPrimitive.Icon>\n          <IconChevronDown className=\"size-3.5 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Positioner align={align} sideOffset={6} alignItemWithTrigger={false} className=\"z-[var(--kit-z-menu,80)]\" data-floating-layer=\"\" {...KIT_SCOPE}>\n          <SelectPrimitive.Popup\n            className=\"glass max-h-[min(360px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-kit-lg border p-1 data-[open]:animate-kit-pop-in\"\n          >\n            <SelectPrimitive.List>\n              {grouped(options).map((g, gi) =>\n                g.group ? (\n                  <SelectPrimitive.Group key={g.group + gi}>\n                    <SelectPrimitive.GroupLabel className={groupHeading}>{g.group}</SelectPrimitive.GroupLabel>\n                    {g.items.map(renderItem)}\n                  </SelectPrimitive.Group>\n                ) : (\n                  g.items.map(renderItem)\n                ),\n              )}\n            </SelectPrimitive.List>\n          </SelectPrimitive.Popup>\n        </SelectPrimitive.Positioner>\n      </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n  );\n}\n\n/** V2 scrollIntoContainer (block \"nearest\", 4px margin): scroll `el` into view inside `list` ONLY, never the shell behind it.\n *  Rects are transformed while the menu pops in (scaled), so measure in layout pixels. */\nfunction revealInList(list: HTMLElement, el: HTMLElement | null, margin = 4) {\n  if (!el) return;\n  const br = list.getBoundingClientRect();\n  const er = el.getBoundingClientRect();\n  const k = list.offsetHeight ? br.height / list.offsetHeight || 1 : 1;\n  const top = (er.top - br.top) / k + list.scrollTop;\n  const h = er.height / k;\n  let next = list.scrollTop;\n  if (top < list.scrollTop) next = top - margin;\n  else if (top + h > list.scrollTop + list.clientHeight) next = top + h - list.clientHeight + margin;\n  next = Math.max(0, Math.min(next, list.scrollHeight - list.clientHeight));\n  if (Math.abs(next - list.scrollTop) > 0.5) list.scrollTop = next;\n}\n\nfunction SearchSelect({\n  value,\n  defaultValue,\n  onValueChange,\n  options,\n  placeholder = \"Select…\",\n  size = \"md\",\n  className,\n  triggerClassName,\n  variant = \"filled\",\n  align = \"start\",\n  disabled,\n  id,\n  \"aria-label\": ariaLabel,\n  searchPlaceholder = \"Search…\",\n  menuClassName,\n}: SelectProps) {\n  const a11y = useTriggerA11y(id, ariaLabel, placeholder);\n  const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const selected = options.find((o) => o.value === current);\n  const shown = React.useMemo(() => filterOptions(options, query), [options, query]);\n  const shownValues = React.useMemo(() => shown.map((o) => o.value), [shown]);\n  const listRef = React.useRef<HTMLDivElement>(null);\n\n  /* Reveal the current option on open, inside the list only: scrollIntoView would also scroll the app shell behind the\n     menu (V2 S1). The popup sizes itself a frame or two after it opens, so wait until the list is constrained (it\n     scrolls) before revealing (the list portals in, so it may not exist on the first frame either). */\n  React.useEffect(() => {\n    if (!open) return;\n    let raf = 0;\n    const reveal = (tries: number) => {\n      const list = listRef.current;\n      const settled = list && list.scrollHeight > list.clientHeight;\n      if (!settled && tries > 0) return void (raf = requestAnimationFrame(() => reveal(tries - 1)));\n      if (list) revealInList(list, list.querySelector<HTMLElement>('[data-checked=\"true\"]'));\n    };\n    reveal(6);\n    return () => cancelAnimationFrame(raf);\n  }, [open]);\n\n  const openWith = (q: string) => {\n    setQuery(q);\n    setOpen(true);\n  };\n\n  return (\n    <ComboboxPrimitive.Root<string>\n      value={current ?? null}\n      onValueChange={(v) => {\n        if (v == null) return;\n        setCurrent(v);\n        setOpen(false);\n      }}\n      open={open}\n      onOpenChange={(o) => (o ? openWith(\"\") : setOpen(false))}\n      inputValue={query}\n      onInputValueChange={(q, details) => {\n        // only typing filters; Base UI also writes the picked option's value into the input on selection\n        if (details.reason === \"input-change\" || details.reason === \"input-clear\") setQuery(q);\n      }}\n      items={shownValues}\n      filter={null}\n      autoHighlight\n      loopFocus\n      disabled={disabled}\n    >\n      <ComboboxPrimitive.Trigger\n        {...a11y}\n        data-state={open ? \"open\" : \"closed\"}\n        data-placeholder={selected ? undefined : \"\"}\n        className={cn(triggerClass(variant, size), triggerClassName, className)}\n        onKeyDown={(e: BaseUIEvent<React.KeyboardEvent<HTMLButtonElement>>) => {\n          if (e.metaKey || e.ctrlKey || e.altKey) return;\n          if (e.key.length === 1 && e.key !== \" \") {\n            e.preventDefault();\n            e.preventBaseUIHandler();\n            openWith(e.key); // typing on the closed trigger starts a search\n          } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            e.preventBaseUIHandler();\n            openWith(\"\");\n          }\n        }}\n      >\n        <span className=\"flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3\">\n          {selected ? (\n            <>\n              {selected.avatar ? <Avatar name={selected.avatar.name} src={selected.avatar.src} size={16} decorative /> : null}\n              <span className=\"truncate\">{selected.label}</span>\n            </>\n          ) : (\n            <span className=\"truncate\">{placeholder}</span>\n          )}\n        </span>\n        <IconChevronDown aria-hidden className=\"size-3.5 shrink-0 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180\" />\n      </ComboboxPrimitive.Trigger>\n      <ComboboxPrimitive.Portal>\n        <ComboboxPrimitive.Positioner align={align} sideOffset={6} collisionPadding={12} className=\"z-[var(--kit-z-menu,80)]\" data-floating-layer=\"\" {...KIT_SCOPE}>\n          <ComboboxPrimitive.Popup\n            className={cn(\n              \"glass flex max-h-[min(400px,var(--available-height))] w-[max(var(--anchor-width),240px)] max-w-[min(400px,calc(100vw-24px))] flex-col overflow-hidden rounded-kit-lg border text-kit-fg outline-none data-[open]:animate-kit-pop-in\",\n              menuClassName,\n            )}\n          >\n            {/* V2's <Command> root (select.tsx:403) */}\n            <div className=\"flex min-h-0 flex-1 flex-col\">\n              <div className=\"flex h-9 shrink-0 items-center gap-2 border-b border-kit-line-subtle px-2.5 text-kit-fg-3\">\n                <IconSearch aria-hidden className=\"size-4 shrink-0\" />\n                <ComboboxPrimitive.Input\n                  aria-label={typeof a11y[\"aria-label\"] === \"string\" ? a11y[\"aria-label\"] : \"Options\"}\n                  placeholder={searchPlaceholder}\n                  className=\"h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-4\"\n                />\n              </div>\n              {shown.length === 0 ? <div className=\"px-2 py-6 text-center text-kit-sm text-kit-fg-3\">No matches</div> : null}\n              <ComboboxPrimitive.List ref={listRef} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1 empty:hidden\">\n                {grouped(shown).map((g, gi) => {\n                  const items = g.items.map((o) => {\n                    const text = nodeText(o.label);\n                    const checked = o.value === current;\n                    return (\n                      <ComboboxPrimitive.Item key={o.value} value={o.value} disabled={o.disabled} data-checked={checked} className={itemClass}>\n                        <Lead o={o} />\n                        <div className=\"min-w-0 flex-1\">\n                          <div className=\"truncate\">{typeof o.label === \"string\" ? <Highlight text={text} query={query} /> : o.label}</div>\n                          {o.description ? (\n                            <div className=\"truncate text-kit-xs text-kit-fg-3\">\n                              <Highlight text={o.description} query={query} />\n                            </div>\n                          ) : null}\n                        </div>\n                        {o.meta ? <span className=\"shrink-0 text-kit-xs tabular-nums text-kit-fg-3\">{o.meta}</span> : null}\n                        {checked ? <IconCheck aria-hidden className=\"absolute right-2 size-4 !text-kit-fg\" /> : null}\n                      </ComboboxPrimitive.Item>\n                    );\n                  });\n                  return g.group ? (\n                    <ComboboxPrimitive.Group key={g.group + gi}>\n                      <ComboboxPrimitive.GroupLabel className={groupHeading}>{g.group}</ComboboxPrimitive.GroupLabel>\n                      {items}\n                    </ComboboxPrimitive.Group>\n                  ) : (\n                    <React.Fragment key={\"g\" + gi}>{items}</React.Fragment>\n                  );\n                })}\n              </ComboboxPrimitive.List>\n            </div>\n          </ComboboxPrimitive.Popup>\n        </ComboboxPrimitive.Positioner>\n      </ComboboxPrimitive.Portal>\n    </ComboboxPrimitive.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,mBAAmB;;AAuBhC,SAAgB,SAAS,MAA+B;CACtD,IAAI,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;CACtD,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAC5E,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,KAAK,EAAE;CAC1D,IAAI,MAAM,eAA+C,IAAI,GAAG,OAAO,SAAS,KAAK,MAAM,QAAQ;CACnG,OAAO;AACT;AAEA,IAAM,MAAM;AACZ,IAAM,QAAQ,MAAc,EAAE,UAAU,KAAK,CAAC,CAAC,QAAQ,UAAU,EAAE,CAAC,CAAC,YAAY;;;;;AAMjF,SAAgB,WAAW,MAAc,OAAe,EAAE,QAAQ,SAA8B,CAAC,GAAW;CAC1G,MAAM,IAAI,KAAK,IAAI;CACnB,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAC5D,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,IAAI,QAAQ;CACZ,KAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,KAAK,EAAE,QAAQ,IAAI;EACzB,IAAI,OAAO,GAAG,SAAS;OAClB,IAAI,KAAK,GAAG,SAAS,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,IAAI;OAC/C,IAAI,SAAS,eAAe,GAAG,IAAI,GAAG,SAAS;OAC/C,OAAO;CACd;CACA,OAAO;AACT;;AAGA,SAAS,eAAe,GAAW,MAA+B;CAChE,IAAI,KAAK,SAAS,GAAG,OAAO;CAE5B,KAAK,IAAI,QAAQ,EAAE,QAAQ,KAAK,EAAE,GAAG,SAAS,GAAG,QAAQ,EAAE,QAAQ,KAAK,IAAI,QAAQ,CAAC,GAAG;EACtF,IAAI,QAAQ,KAAK,CAAC,IAAI,KAAK,EAAE,QAAQ,EAAE,GAAG;EAC1C,MAAM,MAAM,CAAC,KAAK;EAClB,IAAI,IAAI,QAAQ;EAChB,KAAK,MAAM,MAAM,KAAK,MAAM,CAAC,GAAG;GAC9B,IAAI,EAAE,QAAQ,IAAI,CAAC;GACnB,IAAI,IAAI,GAAG;GACX,IAAI,KAAK,GAAG;EACd;EACA,IAAI,IAAI,WAAW,KAAK,UAAU,IAAI,IAAI,SAAS,KAAK,QAAQ,KAAK,KAAK,SAAS,GAAG,OAAO;CAC/F;CACA,OAAO;AACT;;AAGA,SAAgB,eAAe,MAAc,OAA4B;CACvE,MAAM,IAAI,KAAK,IAAI;CACnB,MAAM,uBAAO,IAAI,IAAY;CAC7B,KAAK,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,GAAG;EAClE,MAAM,KAAK,EAAE,QAAQ,IAAI;EACzB,IAAI,MAAM,GAAG,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK,KAAK,IAAI,KAAK,CAAC;OAC7D,eAAe,GAAG,IAAI,CAAC,EAAE,SAAS,MAAM,KAAK,IAAI,CAAC,CAAC;CAC1D;CACA,OAAO;AACT;;AAGA,SAAgB,UAAU,EAAE,MAAM,SAA0C;CAC1E,IAAI,CAAC,MAAM,KAAK,GAAG,OAAO,oBAAA,UAAA,EAAA,UAAG,KAAO,CAAA;CAEpC,IAAI,KAAK,IAAI,CAAC,CAAC,WAAW,KAAK,QAAQ,OAAO,oBAAA,UAAA,EAAA,UAAG,KAAO,CAAA;CACxD,MAAM,OAAO,eAAe,MAAM,KAAK;CACvC,IAAI,CAAC,KAAK,MAAM,OAAO,oBAAA,UAAA,EAAA,UAAG,KAAO,CAAA;CACjC,MAAM,QAA2B,CAAC;CAClC,IAAI,MAAM;CACV,IAAI,KAAK;CACT,MAAM,SAAS,MAAc;EAC3B,IAAI,CAAC,KAAK;EACV,MAAM,KAAK,KAAK,oBAAC,QAAD;GAAc,WAAU;GAA0D,UAAA;EAAU,GAAjF,CAAiF,IAAI,GAAG;EACnH,MAAM;CACR;CACA,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,IAAI,KAAK,IAAI,CAAC;EACpB,IAAI,MAAM,IAAI;GACZ,MAAM,CAAC;GACP,KAAK;EACP;EACA,OAAO,KAAK;CACd;CACA,MAAM,KAAK,MAAM;CACjB,OAAO,oBAAA,UAAA,EAAA,UAAG,MAAQ,CAAA;AACpB;;AAGA,SAAgB,cAAsC,SAAc,OAAoB;CACtF,IAAI,CAAC,MAAM,KAAK,GAAG,OAAO;CAC1B,OAAO,QACJ,KAAK,GAAG,MAAM;EACb,MAAM,QAAQ,SAAS,EAAE,KAAK;EAC9B,MAAM,OAAO,WAAW,OAAO,KAAK;EAEpC,MAAM,OAAO,WAAW;GAAC;GAAO,EAAE;GAAa,EAAE;GAAM,GAAI,EAAE,YAAY,CAAC;EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAAG,OAAO,EAAE,OAAO,MAAM,CAAC;EAGhI,MAAM,QAAQ,EAAE,UAAU,MAAM,MAAM,KAAK,CAAC,MAAM,KAAK,MAAM,KAAK,CAAC,CAAC,IAAI,IAAI;EAC5E,OAAO;GAAE;GAAG;GAAG,GAAG,KAAK,IAAI,OAAO,OAAO,IAAI,IAAI,MAAM,KAAK;GAAG,KAAK,MAAM;EAAO;CACnF,CAAC,CAAC,CACD,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,CACtB,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CACvD,KAAK,MAAM,EAAE,CAAC;AACnB;AAEA,SAAS,QAAgC,SAAgD;CACvF,IAAI,CAAC,QAAQ,MAAM,MAAM,EAAE,KAAK,GAAG,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC;CAC7D,MAAM,MAAwC,CAAC;CAC/C,KAAK,MAAM,KAAK,SAAS;EACvB,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE,UAAU,EAAE,KAAK;EAC7C,IAAI,GAAG,EAAE,MAAM,KAAK,CAAC;OAChB,IAAI,KAAK;GAAE,OAAO,EAAE;GAAO,OAAO,CAAC,CAAC;EAAE,CAAC;CAC9C;CACA,OAAO;AACT;AAIA,SAAS,aAAa,SAAyC,MAA0B;CAEvF,OAAO,GACL,2RACA,YAAY,YAAY,gGACxB,YAAY,aAAa,8EACzB,YAAY,WAAW,oGALf,SAAS,OAAO,oBAAoB,SAAS,OAAO,sBAAsB,iBAOpF;AACF;;AAGA,IAAa,qBAAqB;AAMlC,IAAM,YAAY,GAAG,0LAAU,gGAAgG;AAE/H,IAAM,eAAe;AAErB,SAAS,KAAK,EAAE,KAA0B;CACxC,IAAI,EAAE,QAAQ,OAAO,oBAAC,QAAD;EAAQ,MAAM,EAAE,OAAO;EAAM,KAAK,EAAE,OAAO;EAAK,MAAM;EAAI,YAAA;CAAY,CAAA;CAC3F,OAAO,EAAE,OAAO,oBAAA,UAAA,EAAA,UAAG,EAAE,KAAO,CAAA,IAAI;AAClC;AA0BA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EAAE,aAAa,QAAQ,YAAY;CAEzC,OADe,eAAe,QAAS,eAAe,UAAU,QAAQ,SAAA,IACxD,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA,IAAI,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA;AACzE;AAEA,SAAS,eAAe,IAAwB,WAA+B,aAA8B;CAC3G,MAAM,UAAU,WAAW;CAC3B,MAAM,aAAa,mBAAmB;CACtC,MAAM,WAAW,YAAY,MAAM,OAAO;CAC1C,OAAO;EACL,IAAI,MAAM;EACV,cAAc,cAAc,WAAW,cAAc,WAAW,KAAA,IAAY,OAAO,gBAAgB,YAAY,gBAAgB,YAAY,cAAc,KAAA;EACzJ,mBAAmB,YAAY,KAAA,IAAa,aAAa,MAAM,UAAU,KAAA,IAAY;CACvF;AACF;;AAGA,SAAS,eAAe,OAA2B,cAAkC,eAAqC;CACxH,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,YAAY;CACrD,MAAM,aAAa,UAAU,KAAA;CAC7B,MAAM,UAAU,aAAa,QAAQ;CACrC,MAAM,OAAO,MAAc;EACzB,IAAI,CAAC,YAAY,SAAS,CAAC;EAC3B,gBAAgB,CAAC;CACnB;CACA,OAAO,CAAC,SAAS,GAAG;AACtB;AAEA,SAAS,YAAY,EACnB,OACA,cACA,eACA,SACA,cAAc,WACd,OAAO,MACP,WACA,kBACA,UAAU,UACV,QAAQ,SACR,UACA,IACA,cAAc,aACA;CACd,MAAM,OAAO,eAAe,IAAI,WAAW,WAAW;CACtD,MAAM,CAAC,SAAS,cAAc,eAAe,OAAO,cAAc,aAAa;CAC/E,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,QAAQ,MAAM,cAAc,QAAQ,KAAK,OAAO;EAAE,OAAO,EAAE;EAAO,OAAO,EAAE;CAAM,EAAE,GAAG,CAAC,OAAO,CAAC;CACrG,MAAM,cAAc,MAClB,qBAAC,SAAgB,MAAjB;EAAoC,OAAO,EAAE;EAAO,UAAU,EAAE;EAAU,WAAW;EAArF,UAAA;GACE,oBAAC,MAAD,EAAS,EAAI,CAAA;GACb,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAgB,UAAjB,EAAA,UAA2B,EAAE,MAAgC,CAAA,GAC5D,EAAE,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA6B,UAAA,EAAE;IAAiB,CAAA,IAAI,IACjF;;GACJ,EAAE,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAmD,UAAA,EAAE;GAAW,CAAA,IAAI;GAC9F,oBAAC,SAAgB,eAAjB;IAA+B,WAAU;IACvC,UAAA,oBAAC,WAAD,EAAW,WAAU,qBAAsB,CAAA;GACd,CAAA;EACX;CAVK,GAAA,EAAE,KAUP;CAExB,OACE,qBAAC,SAAgB,MAAjB;EACS;EACP,OAAO,WAAW;EAClB,gBAAgB,MAAM,KAAK,QAAQ,WAAW,CAAC;EAC/C,cAAc;EACJ;EALZ,UAAA,CAOE,qBAAC,SAAgB,SAAjB;GACE,GAAI;GACJ,cAAY,OAAO,SAAS;GAC5B,WAAW,GAAG,aAAa,SAAS,IAAI,GAAG,kBAAkB,SAAS;GAHxE,UAAA,CAKE,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,SAAgB,OAAjB,EAAoC,YAAc,CAAA;GAC9C,CAAA,GACN,oBAAC,SAAgB,MAAjB,EAAA,UACE,oBAAC,iBAAD,EAAiB,WAAU,iFAAkF,CAAA,EACzF,CAAA,CACC;EACzB,CAAA,GAAA,oBAAC,SAAgB,QAAjB,EAAA,UACE,oBAAC,SAAgB,YAAjB;GAAmC;GAAO,YAAY;GAAG,sBAAsB;GAAO,WAAU;GAA2B,uBAAoB;GAAG,GAAI;GACpJ,UAAA,oBAAC,SAAgB,OAAjB;IACE,WAAU;IAEV,UAAA,oBAAC,SAAgB,MAAjB,EAAA,UACG,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,OACxB,EAAE,QACA,qBAAC,SAAgB,OAAjB,EAAA,UAAA,CACE,oBAAC,SAAgB,YAAjB;KAA4B,WAAW;KAAe,UAAA,EAAE;IAAkC,CAAA,GACzF,EAAE,MAAM,IAAI,UAAU,CACF,EAAA,GAHK,EAAE,QAAQ,EAGf,IAEvB,EAAE,MAAM,IAAI,UAAU,CAE1B,EACoB,CAAA;GACD,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAE1B;;;AAIA,SAAS,aAAa,MAAmB,IAAwB,SAAS,GAAG;CAC3E,IAAI,CAAC,IAAI;CACT,MAAM,KAAK,KAAK,sBAAsB;CACtC,MAAM,KAAK,GAAG,sBAAsB;CACpC,MAAM,IAAI,KAAK,eAAe,GAAG,SAAS,KAAK,gBAAgB,IAAI;CACnE,MAAM,OAAO,GAAG,MAAM,GAAG,OAAO,IAAI,KAAK;CACzC,MAAM,IAAI,GAAG,SAAS;CACtB,IAAI,OAAO,KAAK;CAChB,IAAI,MAAM,KAAK,WAAW,OAAO,MAAM;MAClC,IAAI,MAAM,IAAI,KAAK,YAAY,KAAK,cAAc,OAAO,MAAM,IAAI,KAAK,eAAe;CAC5F,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,KAAK,eAAe,KAAK,YAAY,CAAC;CACxE,IAAI,KAAK,IAAI,OAAO,KAAK,SAAS,IAAI,IAAK,KAAK,YAAY;AAC9D;AAEA,SAAS,aAAa,EACpB,OACA,cACA,eACA,SACA,cAAc,WACd,OAAO,MACP,WACA,kBACA,UAAU,UACV,QAAQ,SACR,UACA,IACA,cAAc,WACd,oBAAoB,WACpB,iBACc;CACd,MAAM,OAAO,eAAe,IAAI,WAAW,WAAW;CACtD,MAAM,CAAC,SAAS,cAAc,eAAe,OAAO,cAAc,aAAa;CAC/E,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,EAAE;CAC3C,MAAM,WAAW,QAAQ,MAAM,MAAM,EAAE,UAAU,OAAO;CACxD,MAAM,QAAQ,MAAM,cAAc,cAAc,SAAS,KAAK,GAAG,CAAC,SAAS,KAAK,CAAC;CACjF,MAAM,cAAc,MAAM,cAAc,MAAM,KAAK,MAAM,EAAE,KAAK,GAAG,CAAC,KAAK,CAAC;CAC1E,MAAM,UAAU,MAAM,OAAuB,IAAI;CAKjD,MAAM,gBAAgB;EACpB,IAAI,CAAC,MAAM;EACX,IAAI,MAAM;EACV,MAAM,UAAU,UAAkB;GAChC,MAAM,OAAO,QAAQ;GAErB,IAAI,EADY,QAAQ,KAAK,eAAe,KAAK,iBACjC,QAAQ,GAAG,OAAO,MAAM,MAAM,4BAA4B,OAAO,QAAQ,CAAC,CAAC;GAC3F,IAAI,MAAM,aAAa,MAAM,KAAK,cAA2B,yBAAuB,CAAC;EACvF;EACA,OAAO,CAAC;EACR,aAAa,qBAAqB,GAAG;CACvC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,YAAY,MAAc;EAC9B,SAAS,CAAC;EACV,QAAQ,IAAI;CACd;CAEA,OACE,qBAAC,SAAkB,MAAnB;EACE,OAAO,WAAW;EAClB,gBAAgB,MAAM;GACpB,IAAI,KAAK,MAAM;GACf,WAAW,CAAC;GACZ,QAAQ,KAAK;EACf;EACM;EACN,eAAe,MAAO,IAAI,SAAS,EAAE,IAAI,QAAQ,KAAK;EACtD,YAAY;EACZ,qBAAqB,GAAG,YAAY;GAElC,IAAI,QAAQ,WAAW,kBAAkB,QAAQ,WAAW,eAAe,SAAS,CAAC;EACvF;EACA,OAAO;EACP,QAAQ;EACR,eAAA;EACA,WAAA;EACU;EAlBZ,UAAA,CAoBE,qBAAC,SAAkB,SAAnB;GACE,GAAI;GACJ,cAAY,OAAO,SAAS;GAC5B,oBAAkB,WAAW,KAAA,IAAY;GACzC,WAAW,GAAG,aAAa,SAAS,IAAI,GAAG,kBAAkB,SAAS;GACtE,YAAY,MAA2D;IACrE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ;IACxC,IAAI,EAAE,IAAI,WAAW,KAAK,EAAE,QAAQ,KAAK;KACvC,EAAE,eAAe;KACjB,EAAE,qBAAqB;KACvB,SAAS,EAAE,GAAG;IAChB,OAAO,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;KACvD,EAAE,eAAe;KACjB,EAAE,qBAAqB;KACvB,SAAS,EAAE;IACb;GACF;GAhBF,UAAA,CAkBE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,WACC,qBAAA,UAAA,EAAA,UAAA,CACG,SAAS,SAAS,oBAAC,QAAD;KAAQ,MAAM,SAAS,OAAO;KAAM,KAAK,SAAS,OAAO;KAAK,MAAM;KAAI,YAAA;IAAY,CAAA,IAAI,MAC3G,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA,SAAS;IAAY,CAAA,CACjD,EAAA,CAAA,IAEF,oBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAkB,CAAA;GAE5C,CAAA,GACN,oBAAC,iBAAD;IAAiB,eAAA;IAAY,WAAU;GAA2F,CAAA,CACzG;EAC3B,CAAA,GAAA,oBAAC,SAAkB,QAAnB,EAAA,UACE,oBAAC,SAAkB,YAAnB;GAAqC;GAAO,YAAY;GAAG,kBAAkB;GAAI,WAAU;GAA2B,uBAAoB;GAAG,GAAI;GAC/I,UAAA,oBAAC,SAAkB,OAAnB;IACE,WAAW,GACT,uOACA,aACF;IAGA,UAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACE,oBAAC,YAAD;QAAY,eAAA;QAAY,WAAU;OAAmB,CAAA,GACrD,oBAAC,SAAkB,OAAnB;QACE,cAAY,OAAO,KAAK,kBAAkB,WAAW,KAAK,gBAAgB;QAC1E,aAAa;QACb,WAAU;OACX,CAAA,CACE;;MACJ,MAAM,WAAW,IAAI,oBAAC,OAAD;OAAK,WAAU;OAAkD,UAAA;MAAe,CAAA,IAAI;MAC1G,oBAAC,SAAkB,MAAnB;OAAwB,KAAK;OAAS,WAAU;OAC7C,UAAA,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,OAAO;QAC7B,MAAM,QAAQ,EAAE,MAAM,KAAK,MAAM;SAC/B,MAAM,OAAO,SAAS,EAAE,KAAK;SAC7B,MAAM,UAAU,EAAE,UAAU;SAC5B,OACE,qBAAC,SAAkB,MAAnB;UAAsC,OAAO,EAAE;UAAO,UAAU,EAAE;UAAU,gBAAc;UAAS,WAAW;UAA9G,UAAA;WACE,oBAAC,MAAD,EAAS,EAAI,CAAA;WACb,qBAAC,OAAD;YAAK,WAAU;YAAf,UAAA,CACE,oBAAC,OAAD;aAAK,WAAU;aAAY,UAAA,OAAO,EAAE,UAAU,WAAW,oBAAC,WAAD;cAAiB;cAAa;aAAQ,CAAA,IAAI,EAAE;YAAW,CAAA,GAC/G,EAAE,cACD,oBAAC,OAAD;aAAK,WAAU;aACb,UAAA,oBAAC,WAAD;cAAW,MAAM,EAAE;cAAoB;aAAQ,CAAA;YAC5C,CAAA,IACH,IACD;;WACJ,EAAE,OAAO,oBAAC,QAAD;YAAM,WAAU;YAAmD,UAAA,EAAE;WAAW,CAAA,IAAI;WAC7F,UAAU,oBAAC,WAAD;YAAW,eAAA;YAAY,WAAU;WAAwC,CAAA,IAAI;UAClE;SAZK,GAAA,EAAE,KAYP;QAE5B,CAAC;QACD,OAAO,EAAE,QACP,qBAAC,SAAkB,OAAnB,EAAA,UAAA,CACE,oBAAC,SAAkB,YAAnB;SAA8B,WAAW;SAAe,UAAA,EAAE;QAAoC,CAAA,GAC7F,KACsB,EAAA,GAHK,EAAE,QAAQ,EAGf,IAEzB,oBAAC,MAAM,UAAP,EAAA,UAAgC,MAAsB,GAAjC,MAAM,EAA2B;OAE1D,CAAC;MACqB,CAAA;KACrB;;GACkB,CAAA;EACG,CAAA,EACN,CAAA,CACJ;;AAE5B"}

package/dist/ui/shortcut-hint.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export declare function ShortcutHintsProvider({ on, children }: {
+    on?: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useShortcutHints(): boolean;
+/** Non-hook read for toasts and other imperative call sites. */
+export declare function shortcutHintsOn(): boolean;
+type Props = React.HTMLAttributes<HTMLElement> & {
+    as?: "span" | "div" | "p" | "li" | "fragment";
+    children: React.ReactNode;
+};
+export declare function ShortcutHint({ as, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};