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

package/dist/ui/autocomplete.d.ts

@@ -18,13 +18,41 @@ export interface AutocompleteProps {
     filter?: ((options: SelectOption[], query: string) => SelectOption[]) | null;
     placeholder?: string;
     size?: "sm" | "md" | "lg";
+    /** decorative icon before the input */
     leading?: React.ReactNode;
+    /** an interactive control inside the field before the input (the link-type menu); rendered as is */
+    leadingSlot?: React.ReactNode;
     loading?: boolean;
     invalid?: boolean;
     disabled?: boolean;
     /** open the suggestions when the field takes focus (default true, as V2) */
     openOnFocus?: boolean;
+    /** controlled open; the list shows while open and it has rows or a note */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** render the list in the flow under the field instead of a floating popup (panels, popovers) */
+    inlineList?: boolean;
+    /** a status row shown, with the list kept open, when no row matches */
+    emptyNote?: React.ReactNode;
+    /** a status row under the rows when there are rows (a partial-load error) */
+    listNote?: React.ReactNode;
+    /** highlight row 0 on every keystroke that leaves text, so Enter picks it; empty text highlights nothing */
+    highlightFirst?: boolean;
+    /** emphasise the query inside row labels (default true; V2's link rows draw the plain title) */
+    highlightMatches?: boolean;
+    /** the listbox's accessible name */
+    listLabel?: string;
+    /** a pick also writes the row's label into the text (default true); false = a pick only calls onSelect */
+    fillOnSelect?: boolean;
+    /** replaces the built-in clear (setText("")) on the X */
+    onClear?: () => void;
+    /** a control inside the field after the clear button (the file-library button) */
+    trailingSlot?: React.ReactNode;
+    /** data-* attributes on the list's layer (the floating positioner, or the inline wrapper) */
+    listAttrs?: Record<`data-${string}`, string>;
+    inputRef?: React.Ref<HTMLInputElement>;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     className?: string;
     menuClassName?: string;
 }
-export declare function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, value, defaultValue, onValueChange, options, onSelect, onEnter, filter, placeholder, size, leading, loading, invalid, disabled, openOnFocus, className, menuClassName, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, value, defaultValue, onValueChange, options, onSelect, onEnter, filter, placeholder, size, leading, leadingSlot, loading, invalid, disabled, openOnFocus, open: openProp, onOpenChange, inlineList, emptyNote, listNote, highlightFirst, highlightMatches, listLabel, fillOnSelect, onClear, trailingSlot, listAttrs, inputRef, onBlur, className, menuClassName, }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/autocomplete.js

@@ -1,11 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.js";
+import { Spinner } from "./spinner.js";
 import { KIT_SCOPE } from "./surfaces.js";
 import { IconButton } from "./button.js";
 import { Highlight, filterOptions, nodeText } from "./select.js";
-import { Spinner } from "./spinner.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IconX } from "@tabler/icons-react";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/ui/autocomplete.tsx
@@ -14,7 +14,8 @@ var H = {
 	md: "h-8",
 	lg: "h-9"
 };
-function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, value, defaultValue = "", onValueChange, options, onSelect, onEnter, filter = filterOptions, placeholder, size = "md", leading, loading, invalid, disabled, openOnFocus = true, className, menuClassName }) {
+var NOTE = "px-2 py-1.5 text-kit-xs text-kit-fg-3";
+function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, value, defaultValue = "", onValueChange, options, onSelect, onEnter, filter = filterOptions, placeholder, size = "md", leading, leadingSlot, loading, invalid, disabled, openOnFocus = true, open: openProp, onOpenChange, inlineList = false, emptyNote, listNote, highlightFirst = false, highlightMatches = true, listLabel, fillOnSelect = true, onClear, trailingSlot, listAttrs, inputRef, onBlur, className, menuClassName }) {
 	const fieldId = useFieldId();
 	const labelledBy = useFieldLabelledBy();
 	const labelFor = useLabelFor(id ?? fieldId);
@@ -25,36 +26,105 @@ function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDes
 		if (value === void 0) setInner(t);
 		onValueChange?.(t);
 	};
-	const [open, setOpen] = React.useState(false);
-	const highlighted = React.useRef(void 0);
+	const [innerOpen, setInnerOpen] = React.useState(false);
+	const open = openProp ?? innerOpen;
+	const setOpen = (o) => {
+		if (openProp === void 0) setInnerOpen(o);
+		onOpenChange?.(o);
+	};
+	const [highlighted, setHighlighted] = React.useState(void 0);
 	const shown = React.useMemo(() => filter ? filter(options, text) : options, [
 		filter,
 		options,
 		text
 	]);
+	const hasEmptyNote = emptyNote != null && emptyNote !== false;
+	const visible = open && (shown.length > 0 || hasEmptyNote);
+	const firstStandsIn = highlightFirst && visible && text.trim() !== "" && !highlighted && shown.length > 0 && !shown[0].disabled;
+	const pick = (o) => {
+		onSelect?.(o);
+		if (fillOnSelect) setText(nodeText(o.label));
+		setOpen(false);
+	};
 	const named = id ?? fieldId ?? ariaLabel;
+	const rows = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Autocomplete$1.List, {
+			"aria-label": listLabel,
+			className: "max-h-72 overflow-y-auto overscroll-contain empty:hidden",
+			children: shown.map((o, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [o.group && (i === 0 || shown[i - 1].group !== o.group) ? /* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				className: "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1",
+				children: o.group
+			}) : null, /* @__PURE__ */ jsxs(Autocomplete$1.Item, {
+				value: o,
+				disabled: o.disabled,
+				onClick: () => onSelect?.(o),
+				"data-first-active": firstStandsIn && i === 0 ? "" : void 0,
+				className: "flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover data-[first-active]:bg-kit-hover",
+				children: [
+					o.icon ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
+						children: o.icon
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 shrink truncate text-kit-fg",
+						children: highlightMatches && typeof o.label === "string" ? /* @__PURE__ */ jsx(Highlight, {
+							text: o.label,
+							query: text
+						}) : o.label
+					}),
+					o.description ? /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+						children: o.description
+					}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					o.meta ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-kit-2xs text-kit-fg-3",
+						children: o.meta
+					}) : null
+				]
+			})] }, o.value))
+		}),
+		shown.length === 0 && hasEmptyNote ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: NOTE,
+			children: emptyNote
+		}) : null,
+		shown.length > 0 && listNote != null && listNote !== false ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: NOTE,
+			children: listNote
+		}) : null
+	] });
 	return /* @__PURE__ */ jsxs(Autocomplete$1.Root, {
 		items: shown,
 		filter: null,
 		mode: "list",
 		value: text,
-		onValueChange: (t) => setText(t),
+		onValueChange: (t, details) => {
+			if (!fillOnSelect && details.reason === "item-press") return;
+			setText(t);
+		},
 		itemToStringValue: (o) => nodeText(o.label),
-		open: open && shown.length > 0,
+		open: visible,
 		onOpenChange: setOpen,
-		onItemHighlighted: (o) => highlighted.current = o,
+		inline: inlineList,
+		autoHighlight: highlightFirst,
+		onItemHighlighted: (o) => setHighlighted(o),
 		openOnInputClick: true,
 		loopFocus: true,
 		disabled,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("flex min-w-0 items-center rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-[border-color,box-shadow] duration-150 hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus focus-within:shadow-kit-ring-field", invalid && "border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]", disabled && "cursor-not-allowed bg-kit-subtle opacity-60", H[size], className),
 			children: [
+				leadingSlot,
 				leading ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
 					className: "ml-2.5 flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
 					children: leading
 				}) : null,
 				/* @__PURE__ */ jsx(Autocomplete$1.Input, {
+					ref: inputRef,
 					id: id ?? fieldId,
 					"aria-label": ariaLabel,
 					"aria-labelledby": ariaLabel ? void 0 : labelFor ?? (named ? void 0 : labelledBy),
@@ -64,8 +134,20 @@ function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDes
 					autoComplete: "off",
 					spellCheck: false,
 					onFocus: () => openOnFocus && setOpen(true),
+					onBlur,
+					onKeyDownCapture: (e) => {
+						if (e.key === "Escape" && visible) {
+							e.preventDefault();
+							e.stopPropagation();
+							setOpen(false);
+						}
+					},
 					onKeyDown: (e) => {
-						if (e.key === "Enter" && !highlighted.current) onEnter?.(text);
+						if (e.key !== "Enter") return;
+						if (firstStandsIn) {
+							e.preventDefault();
+							pick(shown[0]);
+						} else if (!highlighted || !visible) onEnter?.(text);
 					},
 					className: "h-full min-w-0 flex-1 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3 disabled:cursor-not-allowed"
 				}),
@@ -80,11 +162,17 @@ function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDes
 					variant: "ghost",
 					className: "mr-1",
 					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => setText(""),
+					onClick: () => onClear ? onClear() : setText(""),
 					children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
-				}) : null
+				}) : null,
+				trailingSlot
 			]
-		}), /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+		}), inlineList ? visible ? /* @__PURE__ */ jsx("div", {
+			...listAttrs,
+			className: cn("mt-1 rounded-kit-md border border-kit-line bg-kit-surface p-1", menuClassName),
+			onMouseDown: (e) => e.preventDefault(),
+			children: rows
+		}) : null : /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
 			align: "start",
 			side: "bottom",
 			sideOffset: 4,
@@ -92,43 +180,10 @@ function Autocomplete({ id, "aria-label": ariaLabel, "aria-describedby": ariaDes
 			className: "z-[var(--kit-z-menu,80)]",
 			"data-floating-layer": "",
 			...KIT_SCOPE,
+			...listAttrs,
 			children: /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
 				className: cn("w-[max(var(--anchor-width),280px)] max-w-[min(420px,calc(100vw-24px))] rounded-kit-lg border bg-kit-surface p-1 text-kit-fg shadow-lg outline-none data-[open]:animate-kit-pop-in", menuClassName),
-				children: /* @__PURE__ */ jsx(Autocomplete$1.List, {
-					className: "max-h-72 overflow-y-auto overscroll-contain",
-					children: shown.map((o, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [o.group && (i === 0 || shown[i - 1].group !== o.group) ? /* @__PURE__ */ jsx("div", {
-						role: "presentation",
-						className: "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1",
-						children: o.group
-					}) : null, /* @__PURE__ */ jsxs(Autocomplete$1.Item, {
-						value: o,
-						disabled: o.disabled,
-						onClick: () => onSelect?.(o),
-						className: "flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover",
-						children: [
-							o.icon ? /* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
-								children: o.icon
-							}) : null,
-							/* @__PURE__ */ jsx("span", {
-								className: "min-w-0 shrink truncate text-kit-fg",
-								children: typeof o.label === "string" ? /* @__PURE__ */ jsx(Highlight, {
-									text: o.label,
-									query: text
-								}) : o.label
-							}),
-							o.description ? /* @__PURE__ */ jsx("span", {
-								className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
-								children: o.description
-							}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
-							o.meta ? /* @__PURE__ */ jsx("span", {
-								className: "shrink-0 text-kit-2xs text-kit-fg-3",
-								children: o.meta
-							}) : null
-						]
-					})] }, o.value))
-				})
+				children: rows
 			})
 		}) })]
 	});

package/dist/ui/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"./button\";\nimport { useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { filterOptions, Highlight, nodeText, type SelectOption } from \"./select\";\nimport { Spinner } from \"./spinner\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\n/* ── Autocomplete ────────────────────────────────────────────────────────\n   Free text with suggestions: the value is whatever is typed; a suggestion fills it in. Select only picks fixed options.\n   V2 has no component, only the pattern (kit controls link.tsx:504-650, invite-flow.tsx:197); kit-ports-spec.md §2.\n   Field = the Input look; the list opens on focus or typing, only while it has rows (free text is a valid value, so\n   there is no \"No matches\"); nothing is highlighted until the arrows move, so Enter commits the typed text (onEnter).\n   Ranking is Select's filterOptions + Highlight. */\n\nexport interface AutocompleteProps {\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  /** the text (controlled) */\n  value?: string;\n  defaultValue?: string;\n  /** every keystroke, and the label of a picked suggestion */\n  onValueChange?: (text: string) => void;\n  options: SelectOption[];\n  /** a suggestion was picked (click, or Enter on a highlighted row) */\n  onSelect?: (option: SelectOption) => void;\n  /** Enter with no suggestion highlighted: commit the typed text */\n  onEnter?: (text: string) => void;\n  /** default: Select's ranking; null = the caller already filtered (async options) */\n  filter?: ((options: SelectOption[], query: string) => SelectOption[]) | null;\n  placeholder?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  leading?: React.ReactNode;\n  loading?: boolean;\n  invalid?: boolean;\n  disabled?: boolean;\n  /** open the suggestions when the field takes focus (default true, as V2) */\n  openOnFocus?: boolean;\n  className?: string;\n  menuClassName?: string;\n}\n\nconst H = { sm: \"h-7\", md: \"h-8\", lg: \"h-9\" } as const;\n\nexport function Autocomplete({\n  id,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  options,\n  onSelect,\n  onEnter,\n  filter = filterOptions,\n  placeholder,\n  size = \"md\",\n  leading,\n  loading,\n  invalid,\n  disabled,\n  openOnFocus = true,\n  className,\n  menuClassName,\n}: AutocompleteProps) {\n  const fieldId = useFieldId();\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(id ?? fieldId);\n  const describedBy = useFieldDescribedBy();\n  const [inner, setInner] = React.useState(defaultValue);\n  const text = value ?? inner;\n  const setText = (t: string) => {\n    if (value === undefined) setInner(t);\n    onValueChange?.(t);\n  };\n  const [open, setOpen] = React.useState(false);\n  const highlighted = React.useRef<SelectOption | undefined>(undefined);\n  const shown = React.useMemo(() => (filter ? filter(options, text) : options), [filter, options, text]);\n  const named = id ?? fieldId ?? ariaLabel;\n\n  return (\n    <AutocompletePrimitive.Root\n      items={shown}\n      filter={null}\n      mode=\"list\"\n      value={text}\n      onValueChange={(t) => setText(t)}\n      itemToStringValue={(o: SelectOption) => nodeText(o.label)}\n      open={open && shown.length > 0}\n      onOpenChange={setOpen}\n      onItemHighlighted={(o) => (highlighted.current = o as SelectOption | undefined)}\n      openOnInputClick\n      loopFocus\n      disabled={disabled}\n    >\n      <div\n        className={cn(\n          \"flex min-w-0 items-center rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-[border-color,box-shadow] duration-150 hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus focus-within:shadow-kit-ring-field\",\n          invalid && \"border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]\",\n          disabled && \"cursor-not-allowed bg-kit-subtle opacity-60\",\n          H[size],\n          className,\n        )}\n      >\n        {leading ? (\n          <span aria-hidden className=\"ml-2.5 flex shrink-0 text-kit-fg-3 [&_svg]:size-4\">\n            {leading}\n          </span>\n        ) : null}\n        <AutocompletePrimitive.Input\n          id={id ?? fieldId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabel ? undefined : (labelFor ?? (named ? undefined : labelledBy))}\n          aria-describedby={[ariaDescribedBy, describedBy].filter(Boolean).join(\" \") || undefined}\n          aria-invalid={invalid || undefined}\n          placeholder={placeholder}\n          autoComplete=\"off\"\n          spellCheck={false}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" && !highlighted.current) onEnter?.(text);\n          }}\n          className=\"h-full min-w-0 flex-1 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3 disabled:cursor-not-allowed\"\n        />\n        {loading ? (\n          <Spinner size=\"sm\" tone=\"muted\" label=\"Loading suggestions\" className=\"mr-2\" />\n        ) : text && !disabled ? (\n          <IconButton label=\"Clear\" size=\"xs\" variant=\"ghost\" className=\"mr-1\" onMouseDown={(e) => e.preventDefault()} onClick={() => setText(\"\")}>\n            <IconX stroke={1.5} />\n          </IconButton>\n        ) : null}\n      </div>\n      <AutocompletePrimitive.Portal>\n        <AutocompletePrimitive.Positioner align=\"start\" side=\"bottom\" sideOffset={4} collisionPadding={12} className=\"z-[var(--kit-z-menu,80)]\" data-floating-layer=\"\" {...KIT_SCOPE}>\n          <AutocompletePrimitive.Popup\n            className={cn(\n              \"w-[max(var(--anchor-width),280px)] max-w-[min(420px,calc(100vw-24px))] rounded-kit-lg border bg-kit-surface p-1 text-kit-fg shadow-lg outline-none data-[open]:animate-kit-pop-in\",\n              menuClassName,\n            )}\n          >\n            <AutocompletePrimitive.List className=\"max-h-72 overflow-y-auto overscroll-contain\">\n              {shown.map((o, i) => (\n                <React.Fragment key={o.value}>\n                  {o.group && (i === 0 || shown[i - 1].group !== o.group) ? (\n                    <div role=\"presentation\" className=\"px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1\">\n                      {o.group}\n                    </div>\n                  ) : null}\n                  <AutocompletePrimitive.Item\n                    value={o}\n                    disabled={o.disabled}\n                    onClick={() => onSelect?.(o)}\n                    className=\"flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover\"\n                  >\n                    {o.icon ? (\n                      <span aria-hidden className=\"flex shrink-0 text-kit-fg-3 [&_svg]:size-4\">\n                        {o.icon}\n                      </span>\n                    ) : null}\n                    <span className=\"min-w-0 shrink truncate text-kit-fg\">\n                      {typeof o.label === \"string\" ? <Highlight text={o.label} query={text} /> : o.label}\n                    </span>\n                    {o.description ? <span className=\"min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3\">{o.description}</span> : <span className=\"flex-1\" />}\n                    {o.meta ? <span className=\"shrink-0 text-kit-2xs text-kit-fg-3\">{o.meta}</span> : null}\n                  </AutocompletePrimitive.Item>\n                </React.Fragment>\n              ))}\n            </AutocompletePrimitive.List>\n          </AutocompletePrimitive.Popup>\n        </AutocompletePrimitive.Positioner>\n      </AutocompletePrimitive.Portal>\n    </AutocompletePrimitive.Root>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"./button\";\nimport { useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { filterOptions, Highlight, nodeText, type SelectOption } from \"./select\";\nimport { Spinner } from \"./spinner\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\n/* ── Autocomplete ────────────────────────────────────────────────────────\n   Free text with suggestions: the value is whatever is typed; a suggestion fills it in. Select only picks fixed options.\n   V2 has no component, only the pattern (kit controls link.tsx:504-650, invite-flow.tsx:197); kit-ports-spec.md §2.\n   Field = the Input look; the list opens on focus or typing, only while it has rows (free text is a valid value, so\n   there is no \"No matches\"); nothing is highlighted until the arrows move, so Enter commits the typed text (onEnter).\n   Ranking is Select's filterOptions + Highlight.\n   The link field (LinkPicker) opts into V2 link.tsx's extras: an in-flow list (inlineList), a status note when nothing\n   matches (emptyNote) or under the rows (listNote), the link-type menu inside the field (leadingSlot), row 0 highlighted\n   while typing (highlightFirst), a controlled open, plain row titles (highlightMatches={false}), and Escape that closes\n   only the list while it is open (link.tsx:603-618). */\n\nexport interface AutocompleteProps {\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  /** the text (controlled) */\n  value?: string;\n  defaultValue?: string;\n  /** every keystroke, and the label of a picked suggestion */\n  onValueChange?: (text: string) => void;\n  options: SelectOption[];\n  /** a suggestion was picked (click, or Enter on a highlighted row) */\n  onSelect?: (option: SelectOption) => void;\n  /** Enter with no suggestion highlighted: commit the typed text */\n  onEnter?: (text: string) => void;\n  /** default: Select's ranking; null = the caller already filtered (async options) */\n  filter?: ((options: SelectOption[], query: string) => SelectOption[]) | null;\n  placeholder?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** decorative icon before the input */\n  leading?: React.ReactNode;\n  /** an interactive control inside the field before the input (the link-type menu); rendered as is */\n  leadingSlot?: React.ReactNode;\n  loading?: boolean;\n  invalid?: boolean;\n  disabled?: boolean;\n  /** open the suggestions when the field takes focus (default true, as V2) */\n  openOnFocus?: boolean;\n  /** controlled open; the list shows while open and it has rows or a note */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** render the list in the flow under the field instead of a floating popup (panels, popovers) */\n  inlineList?: boolean;\n  /** a status row shown, with the list kept open, when no row matches */\n  emptyNote?: React.ReactNode;\n  /** a status row under the rows when there are rows (a partial-load error) */\n  listNote?: React.ReactNode;\n  /** highlight row 0 on every keystroke that leaves text, so Enter picks it; empty text highlights nothing */\n  highlightFirst?: boolean;\n  /** emphasise the query inside row labels (default true; V2's link rows draw the plain title) */\n  highlightMatches?: boolean;\n  /** the listbox's accessible name */\n  listLabel?: string;\n  /** a pick also writes the row's label into the text (default true); false = a pick only calls onSelect */\n  fillOnSelect?: boolean;\n  /** replaces the built-in clear (setText(\"\")) on the X */\n  onClear?: () => void;\n  /** a control inside the field after the clear button (the file-library button) */\n  trailingSlot?: React.ReactNode;\n  /** data-* attributes on the list's layer (the floating positioner, or the inline wrapper) */\n  listAttrs?: Record<`data-${string}`, string>;\n  inputRef?: React.Ref<HTMLInputElement>;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  className?: string;\n  menuClassName?: string;\n}\n\nconst H = { sm: \"h-7\", md: \"h-8\", lg: \"h-9\" } as const;\n/* V2 link.tsx:507-509 */\nconst NOTE = \"px-2 py-1.5 text-kit-xs text-kit-fg-3\";\n\nexport function Autocomplete({\n  id,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  options,\n  onSelect,\n  onEnter,\n  filter = filterOptions,\n  placeholder,\n  size = \"md\",\n  leading,\n  leadingSlot,\n  loading,\n  invalid,\n  disabled,\n  openOnFocus = true,\n  open: openProp,\n  onOpenChange,\n  inlineList = false,\n  emptyNote,\n  listNote,\n  highlightFirst = false,\n  highlightMatches = true,\n  listLabel,\n  fillOnSelect = true,\n  onClear,\n  trailingSlot,\n  listAttrs,\n  inputRef,\n  onBlur,\n  className,\n  menuClassName,\n}: AutocompleteProps) {\n  const fieldId = useFieldId();\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(id ?? fieldId);\n  const describedBy = useFieldDescribedBy();\n  const [inner, setInner] = React.useState(defaultValue);\n  const text = value ?? inner;\n  const setText = (t: string) => {\n    if (value === undefined) setInner(t);\n    onValueChange?.(t);\n  };\n  const [innerOpen, setInnerOpen] = React.useState(false);\n  const open = openProp ?? innerOpen;\n  const setOpen = (o: boolean) => {\n    if (openProp === undefined) setInnerOpen(o);\n    onOpenChange?.(o);\n  };\n  const [highlighted, setHighlighted] = React.useState<SelectOption | undefined>(undefined);\n  const shown = React.useMemo(() => (filter ? filter(options, text) : options), [filter, options, text]);\n  const hasEmptyNote = emptyNote != null && emptyNote !== false;\n  const visible = open && (shown.length > 0 || hasEmptyNote);\n  /* highlightFirst: row 0 stands in as the active row while text is typed and nothing else is highlighted (V2\n     link.tsx sets its own active index to 0 on each keystroke); Base UI's autoHighlight normally does the same. */\n  const firstStandsIn = highlightFirst && visible && text.trim() !== \"\" && !highlighted && shown.length > 0 && !shown[0].disabled;\n  const pick = (o: SelectOption) => {\n    onSelect?.(o);\n    if (fillOnSelect) setText(nodeText(o.label));\n    setOpen(false);\n  };\n  const named = id ?? fieldId ?? ariaLabel;\n\n  const rows = (\n    <>\n      <AutocompletePrimitive.List aria-label={listLabel} className=\"max-h-72 overflow-y-auto overscroll-contain empty:hidden\">\n        {shown.map((o, i) => (\n          <React.Fragment key={o.value}>\n            {o.group && (i === 0 || shown[i - 1].group !== o.group) ? (\n              <div role=\"presentation\" className=\"px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1\">\n                {o.group}\n              </div>\n            ) : null}\n            <AutocompletePrimitive.Item\n              value={o}\n              disabled={o.disabled}\n              onClick={() => onSelect?.(o)}\n              data-first-active={firstStandsIn && i === 0 ? \"\" : undefined}\n              className=\"flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover data-[first-active]:bg-kit-hover\"\n            >\n              {o.icon ? (\n                <span aria-hidden className=\"flex shrink-0 text-kit-fg-3 [&_svg]:size-4\">\n                  {o.icon}\n                </span>\n              ) : null}\n              <span className=\"min-w-0 shrink truncate text-kit-fg\">\n                {highlightMatches && typeof o.label === \"string\" ? <Highlight text={o.label} query={text} /> : o.label}\n              </span>\n              {o.description ? <span className=\"min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3\">{o.description}</span> : <span className=\"flex-1\" />}\n              {o.meta ? <span className=\"shrink-0 text-kit-2xs text-kit-fg-3\">{o.meta}</span> : null}\n            </AutocompletePrimitive.Item>\n          </React.Fragment>\n        ))}\n      </AutocompletePrimitive.List>\n      {shown.length === 0 && hasEmptyNote ? (\n        <p role=\"status\" className={NOTE}>\n          {emptyNote}\n        </p>\n      ) : null}\n      {shown.length > 0 && listNote != null && listNote !== false ? (\n        <p role=\"status\" className={NOTE}>\n          {listNote}\n        </p>\n      ) : null}\n    </>\n  );\n\n  return (\n    <AutocompletePrimitive.Root\n      items={shown}\n      filter={null}\n      mode=\"list\"\n      value={text}\n      onValueChange={(t, details) => {\n        // Base UI writes a pressed row's label into the input; a host that swaps the field for a chip opts out\n        if (!fillOnSelect && details.reason === \"item-press\") return;\n        setText(t);\n      }}\n      itemToStringValue={(o: SelectOption) => nodeText(o.label)}\n      open={visible}\n      onOpenChange={setOpen}\n      inline={inlineList}\n      // highlight row 0 while typing; Base UI highlights nothing for empty text, so Enter there commits it (onEnter)\n      autoHighlight={highlightFirst}\n      onItemHighlighted={(o) => setHighlighted(o as SelectOption | undefined)}\n      openOnInputClick\n      loopFocus\n      disabled={disabled}\n    >\n      <div\n        className={cn(\n          \"flex min-w-0 items-center rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-[border-color,box-shadow] duration-150 hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus focus-within:shadow-kit-ring-field\",\n          invalid && \"border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]\",\n          disabled && \"cursor-not-allowed bg-kit-subtle opacity-60\",\n          H[size],\n          className,\n        )}\n      >\n        {leadingSlot}\n        {leading ? (\n          <span aria-hidden className=\"ml-2.5 flex shrink-0 text-kit-fg-3 [&_svg]:size-4\">\n            {leading}\n          </span>\n        ) : null}\n        <AutocompletePrimitive.Input\n          ref={inputRef}\n          id={id ?? fieldId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabel ? undefined : (labelFor ?? (named ? undefined : labelledBy))}\n          aria-describedby={[ariaDescribedBy, describedBy].filter(Boolean).join(\" \") || undefined}\n          aria-invalid={invalid || undefined}\n          placeholder={placeholder}\n          autoComplete=\"off\"\n          spellCheck={false}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onBlur={onBlur}\n          onKeyDownCapture={(e) => {\n            // V2 link.tsx:603-618: while the list shows, Escape closes only the list; the next one reaches the panel\n            if (e.key === \"Escape\" && visible) {\n              e.preventDefault();\n              e.stopPropagation();\n              setOpen(false);\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key !== \"Enter\") return;\n            if (firstStandsIn) {\n              e.preventDefault();\n              pick(shown[0]);\n            } else if (!highlighted || !visible) onEnter?.(text);\n          }}\n          className=\"h-full min-w-0 flex-1 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3 disabled:cursor-not-allowed\"\n        />\n        {loading ? (\n          <Spinner size=\"sm\" tone=\"muted\" label=\"Loading suggestions\" className=\"mr-2\" />\n        ) : text && !disabled ? (\n          <IconButton label=\"Clear\" size=\"xs\" variant=\"ghost\" className=\"mr-1\" onMouseDown={(e) => e.preventDefault()} onClick={() => (onClear ? onClear() : setText(\"\"))}>\n            <IconX stroke={1.5} />\n          </IconButton>\n        ) : null}\n        {trailingSlot}\n      </div>\n      {inlineList ? (\n        visible ? (\n          /* V2 link.tsx:646-649: the in-flow list under the field */\n          <div {...listAttrs} className={cn(\"mt-1 rounded-kit-md border border-kit-line bg-kit-surface p-1\", menuClassName)} onMouseDown={(e) => e.preventDefault()}>\n            {rows}\n          </div>\n        ) : null\n      ) : (\n        <AutocompletePrimitive.Portal>\n          <AutocompletePrimitive.Positioner align=\"start\" side=\"bottom\" sideOffset={4} collisionPadding={12} className=\"z-[var(--kit-z-menu,80)]\" data-floating-layer=\"\" {...KIT_SCOPE} {...listAttrs}>\n            <AutocompletePrimitive.Popup\n              className={cn(\n                \"w-[max(var(--anchor-width),280px)] max-w-[min(420px,calc(100vw-24px))] rounded-kit-lg border bg-kit-surface p-1 text-kit-fg shadow-lg outline-none data-[open]:animate-kit-pop-in\",\n                menuClassName,\n              )}\n            >\n              {rows}\n            </AutocompletePrimitive.Popup>\n          </AutocompletePrimitive.Positioner>\n        </AutocompletePrimitive.Portal>\n      )}\n    </AutocompletePrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/button.js

@@ -1,10 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { SPARKLE_PATH } from "../brand/logo.js";
+import { Spinner } from "./spinner.js";
 import { TooltipLayer, TooltipRoot } from "./tooltip-root.js";
 import { variants } from "./variants.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { IconLoader2, IconPlus } from "@tabler/icons-react";
+import { IconPlus } from "@tabler/icons-react";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/ui/button.tsx
 /**
@@ -69,10 +70,7 @@ var Button = React.forwardRef(({ className, variant, size, asChild, loading, lef
 		className: classes,
 		...props,
 		children: [
-			loading ? /* @__PURE__ */ jsx(IconLoader2, {
-				className: "animate-spin",
-				"aria-hidden": true
-			}) : leftIcon,
+			loading ? /* @__PURE__ */ jsx(Spinner, {}) : leftIcon,
 			variant === "ai" && !leftIcon && !loading ? /* @__PURE__ */ jsx(Sparkle, {}) : null,
 			children,
 			rightIcon

package/dist/ui/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { IconLoader2, IconPlus } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { SPARKLE_PATH } from \"../brand/logo\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\nimport { variants, type VariantProps } from \"./variants\";\n\n/**\n * Button: the only button in the kit.\n * Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.\n * Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)\n *           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)\n * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).\n */\nexport const buttonVariants = variants(\n  \"relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out disabled:pointer-events-none disabled:opacity-45 [&_svg]:shrink-0 [&_svg]:opacity-90\",\n  {\n    variants: {\n      variant: {\n        // .btn-solid: in dark a disabled primary/accent takes the solid --kit-disabled-bg / --kit-disabled-fg pair; light keeps the opacity dim.\n        primary: \"bg-kit-inverse text-kit-fg-inverse shadow-kit-button-primary hover:bg-kit-inverse-hover active:bg-kit-inverse btn-solid\",\n        accent: \"bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover btn-solid\",\n        secondary: \"border border-kit-line-strong bg-kit-control-bg text-kit-fg shadow-kit-xs hover:bg-kit-subtle active:bg-kit-hover\",\n        ghost: \"text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected\",\n        soft: \"bg-kit-muted text-kit-fg hover:bg-kit-selected\",\n        danger: \"bg-kit-danger text-kit-danger-on shadow-kit-xs hover:brightness-95\",\n        \"danger-ghost\": \"text-kit-danger-fg hover:bg-kit-danger-soft\",\n        link: \"text-kit-accent-fg underline-offset-4 hover:underline px-0 h-auto active:scale-100\",\n        ai: \"border border-kit-line bg-kit-control-bg text-kit-fg shadow-kit-xs hover:border-kit-accent-line hover:bg-kit-accent-softer\",\n      },\n      size: {\n        xs: \"h-6 rounded-kit-md px-2 text-kit-xs [&_svg]:size-3.5\",\n        sm: \"h-7 rounded-kit-md px-2.5 text-kit-sm [&_svg]:size-3.5\",\n        md: \"h-8 rounded-kit-md px-3 text-kit-sm [&_svg]:size-4\",\n        lg: \"h-9 rounded-kit-md px-3.5 text-kit-base [&_svg]:size-4\",\n        xl: \"h-10 rounded-kit-md px-4 text-kit-base [&_svg]:size-[18px]\",\n      },\n    },\n    compoundVariants: [{ variant: \"link\", className: \"h-auto px-0\" }],\n    defaultVariants: { variant: \"secondary\", size: \"md\" },\n  },\n);\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Render the single child element (a link, say) with the button's classes and props. */\n  asChild?: boolean;\n  loading?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\ntype ChildProps = { className?: string; ref?: React.Ref<unknown> };\n\nfunction mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.RefObject<T | null>).current = node;\n    }\n  };\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {\n    const classes = cn(buttonVariants({ variant, size }), className);\n    if (asChild && React.isValidElement<ChildProps>(children)) {\n      return React.cloneElement(children, {\n        ...props,\n        ...children.props,\n        className: cn(classes, children.props.className),\n        ref: mergeRefs(ref as React.Ref<unknown>, children.props.ref),\n      });\n    }\n    return (\n      <button ref={ref} type={props.type ?? \"button\"} disabled={disabled || loading} aria-busy={loading || undefined} className={classes} {...props}>\n        {loading ? <IconLoader2 className=\"animate-spin\" aria-hidden /> : leftIcon}\n        {variant === \"ai\" && !leftIcon && !loading ? <Sparkle /> : null}\n        {children}\n        {rightIcon}\n      </button>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\n/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */\nexport const iconButtonVariants = variants(\n  \"relative inline-flex items-center justify-center shrink-0 text-kit-fg-2 transition-colors duration-150 hover:bg-kit-hover hover:text-kit-fg active:scale-[0.96] disabled:opacity-40 disabled:pointer-events-none data-[active=true]:bg-kit-selected data-[active=true]:text-kit-fg\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 rounded-kit-md [&_svg]:size-3.5\",\n        sm: \"size-7 rounded-kit-md [&_svg]:size-4\",\n        md: \"size-8 rounded-kit-md [&_svg]:size-4\",\n        lg: \"size-9 rounded-kit-md [&_svg]:size-[18px]\",\n      },\n      variant: {\n        ghost: \"\",\n        outline: \"border border-kit-line bg-kit-control-bg shadow-kit-xs hover:border-kit-line-strong\",\n        soft: \"bg-kit-muted\",\n      },\n    },\n    defaultVariants: { size: \"md\", variant: \"ghost\" },\n  },\n);\n\n/**\n * a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested\n * there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.\n */\nexport const TooltipScope = React.createContext(false);\n\n/**\n * The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child\n * element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never\n * import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.\n */\nexport function HintTooltip({\n  content,\n  side = \"top\",\n  delay = 350,\n  children,\n}: {\n  content: React.ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  delay?: number;\n  children: React.ReactElement;\n}) {\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={delay} render={children} />\n        <TooltipLayer side={side}>\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {\n  label: string;\n  active?: boolean;\n  /** Hover/focus hint. Defaults to `label`; pass `false` to opt out, or a node to customise. */\n  tooltip?: React.ReactNode | false;\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, size, variant, label, active, children, tooltip, tooltipSide = \"top\", ...props }, ref) => {\n    const inTooltip = React.useContext(TooltipScope);\n    const btn = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        data-active={active ? \"true\" : undefined}\n        className={cn(iconButtonVariants({ size, variant }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n    // Every icon-only button gets a visible hint on hover AND keyboard focus (brief §11), unless a\n    // parent tooltip already provides one or the caller opted out.\n    if (inTooltip || tooltip === false || !label) return btn;\n    return (\n      <HintTooltip content={tooltip ?? label} side={tooltipSide}>\n        {btn}\n      </HintTooltip>\n    );\n  },\n);\nIconButton.displayName = \"IconButton\";\n\n/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */\nexport function Sparkle({ className, size = 16 }: { className?: string; size?: number }) {\n  const id = React.useId().replace(/:/g, \"\");\n  return (\n    <svg width={size} height={size} viewBox=\"2 2 16 16\" className={cn(\"shrink-0\", className)} aria-hidden>\n      <defs>\n        <linearGradient id={`sp${id}`} x1=\"6.89\" y1=\"4.59\" x2=\"18\" y2=\"23.67\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0.0817\" style={{ stopColor: \"var(--kit-brand-violet)\" }} />\n          <stop offset=\"0.4667\" style={{ stopColor: \"var(--kit-brand-coral)\" }} />\n          <stop offset=\"1\" style={{ stopColor: \"var(--kit-brand-rose)\" }} />\n        </linearGradient>\n      </defs>\n      <path d={SPARKLE_PATH} fill={`url(#sp${id})`} />\n    </svg>\n  );\n}\n\n/** D15 progressive disclosure: \"+ Add a message\" / \"+ Limit to specific sites\": reveals an optional input. */\nexport function RevealLink({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"inline-flex h-7 items-center gap-1 rounded-kit-md text-kit-sm font-medium text-kit-fg-2 transition-colors hover:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    >\n      <IconPlus stroke={2} aria-hidden />\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { IconPlus } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { SPARKLE_PATH } from \"../brand/logo\";\nimport { Spinner } from \"./spinner\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\nimport { variants, type VariantProps } from \"./variants\";\n\n/**\n * Button: the only button in the kit.\n * Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.\n * Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)\n *           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)\n * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).\n */\nexport const buttonVariants = variants(\n  \"relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-150 ease-out disabled:pointer-events-none disabled:opacity-45 [&_svg]:shrink-0 [&_svg]:opacity-90\",\n  {\n    variants: {\n      variant: {\n        // .btn-solid: in dark a disabled primary/accent takes the solid --kit-disabled-bg / --kit-disabled-fg pair; light keeps the opacity dim.\n        primary: \"bg-kit-inverse text-kit-fg-inverse shadow-kit-button-primary hover:bg-kit-inverse-hover active:bg-kit-inverse btn-solid\",\n        accent: \"bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover btn-solid\",\n        secondary: \"border border-kit-line-strong bg-kit-control-bg text-kit-fg shadow-kit-xs hover:bg-kit-subtle active:bg-kit-hover\",\n        ghost: \"text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected\",\n        soft: \"bg-kit-muted text-kit-fg hover:bg-kit-selected\",\n        danger: \"bg-kit-danger text-kit-danger-on shadow-kit-xs hover:brightness-95\",\n        \"danger-ghost\": \"text-kit-danger-fg hover:bg-kit-danger-soft\",\n        link: \"text-kit-accent-fg underline-offset-4 hover:underline px-0 h-auto active:scale-100\",\n        ai: \"border border-kit-line bg-kit-control-bg text-kit-fg shadow-kit-xs hover:border-kit-accent-line hover:bg-kit-accent-softer\",\n      },\n      size: {\n        xs: \"h-6 rounded-kit-md px-2 text-kit-xs [&_svg]:size-3.5\",\n        sm: \"h-7 rounded-kit-md px-2.5 text-kit-sm [&_svg]:size-3.5\",\n        md: \"h-8 rounded-kit-md px-3 text-kit-sm [&_svg]:size-4\",\n        lg: \"h-9 rounded-kit-md px-3.5 text-kit-base [&_svg]:size-4\",\n        xl: \"h-10 rounded-kit-md px-4 text-kit-base [&_svg]:size-[18px]\",\n      },\n    },\n    compoundVariants: [{ variant: \"link\", className: \"h-auto px-0\" }],\n    defaultVariants: { variant: \"secondary\", size: \"md\" },\n  },\n);\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Render the single child element (a link, say) with the button's classes and props. */\n  asChild?: boolean;\n  loading?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\ntype ChildProps = { className?: string; ref?: React.Ref<unknown> };\n\nfunction mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) (ref as React.RefObject<T | null>).current = node;\n    }\n  };\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {\n    const classes = cn(buttonVariants({ variant, size }), className);\n    if (asChild && React.isValidElement<ChildProps>(children)) {\n      return React.cloneElement(children, {\n        ...props,\n        ...children.props,\n        className: cn(classes, children.props.className),\n        ref: mergeRefs(ref as React.Ref<unknown>, children.props.ref),\n      });\n    }\n    return (\n      <button ref={ref} type={props.type ?? \"button\"} disabled={disabled || loading} aria-busy={loading || undefined} className={classes} {...props}>\n        {/* the kit Spinner (decorative: the button says it is busy); the size variant's [&_svg] rule sizes its glyph */}\n        {loading ? <Spinner /> : leftIcon}\n        {variant === \"ai\" && !leftIcon && !loading ? <Sparkle /> : null}\n        {children}\n        {rightIcon}\n      </button>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\n/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */\nexport const iconButtonVariants = variants(\n  \"relative inline-flex items-center justify-center shrink-0 text-kit-fg-2 transition-colors duration-150 hover:bg-kit-hover hover:text-kit-fg active:scale-[0.96] disabled:opacity-40 disabled:pointer-events-none data-[active=true]:bg-kit-selected data-[active=true]:text-kit-fg\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 rounded-kit-md [&_svg]:size-3.5\",\n        sm: \"size-7 rounded-kit-md [&_svg]:size-4\",\n        md: \"size-8 rounded-kit-md [&_svg]:size-4\",\n        lg: \"size-9 rounded-kit-md [&_svg]:size-[18px]\",\n      },\n      variant: {\n        ghost: \"\",\n        outline: \"border border-kit-line bg-kit-control-bg shadow-kit-xs hover:border-kit-line-strong\",\n        soft: \"bg-kit-muted\",\n      },\n    },\n    defaultVariants: { size: \"md\", variant: \"ghost\" },\n  },\n);\n\n/**\n * a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested\n * there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.\n */\nexport const TooltipScope = React.createContext(false);\n\n/**\n * The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child\n * element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never\n * import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.\n */\nexport function HintTooltip({\n  content,\n  side = \"top\",\n  delay = 350,\n  children,\n}: {\n  content: React.ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  delay?: number;\n  children: React.ReactElement;\n}) {\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={delay} render={children} />\n        <TooltipLayer side={side}>\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {\n  label: string;\n  active?: boolean;\n  /** Hover/focus hint. Defaults to `label`; pass `false` to opt out, or a node to customise. */\n  tooltip?: React.ReactNode | false;\n  tooltipSide?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, size, variant, label, active, children, tooltip, tooltipSide = \"top\", ...props }, ref) => {\n    const inTooltip = React.useContext(TooltipScope);\n    const btn = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        data-active={active ? \"true\" : undefined}\n        className={cn(iconButtonVariants({ size, variant }), className)}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n    // Every icon-only button gets a visible hint on hover AND keyboard focus (brief §11), unless a\n    // parent tooltip already provides one or the caller opted out.\n    if (inTooltip || tooltip === false || !label) return btn;\n    return (\n      <HintTooltip content={tooltip ?? label} side={tooltipSide}>\n        {btn}\n      </HintTooltip>\n    );\n  },\n);\nIconButton.displayName = \"IconButton\";\n\n/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */\nexport function Sparkle({ className, size = 16 }: { className?: string; size?: number }) {\n  const id = React.useId().replace(/:/g, \"\");\n  return (\n    <svg width={size} height={size} viewBox=\"2 2 16 16\" className={cn(\"shrink-0\", className)} aria-hidden>\n      <defs>\n        <linearGradient id={`sp${id}`} x1=\"6.89\" y1=\"4.59\" x2=\"18\" y2=\"23.67\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0.0817\" style={{ stopColor: \"var(--kit-brand-violet)\" }} />\n          <stop offset=\"0.4667\" style={{ stopColor: \"var(--kit-brand-coral)\" }} />\n          <stop offset=\"1\" style={{ stopColor: \"var(--kit-brand-rose)\" }} />\n        </linearGradient>\n      </defs>\n      <path d={SPARKLE_PATH} fill={`url(#sp${id})`} />\n    </svg>\n  );\n}\n\n/** D15 progressive disclosure: \"+ Add a message\" / \"+ Limit to specific sites\": reveals an optional input. */\nexport function RevealLink({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"inline-flex h-7 items-center gap-1 rounded-kit-md text-kit-sm font-medium text-kit-fg-2 transition-colors hover:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    >\n      <IconPlus stroke={2} aria-hidden />\n      {children}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/index.js

@@ -1,4 +1,5 @@
 import { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy } from "./field-context.js";
+import { Spinner } from "./spinner.js";
 import { Button, HintTooltip, IconButton, RevealLink, Sparkle, TooltipScope, buttonVariants, iconButtonVariants } from "./button.js";
 import { ShortcutHint, ShortcutHintsProvider, shortcutHintsOn, useShortcutHints } from "./shortcut-hint.js";
 import { Checkbox, ChoiceCard, ChoiceList, Progress, Radio, RadioGroup, Segmented, Slider, Switch, ToggleGroup, ToggleItem } from "./controls.js";
@@ -7,12 +8,11 @@ import { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, Pag
 import { AGENT_PRESENCE, presenceColor, presenceSlot, registerPresenceRoster } from "./presence.js";
 import { Field, HelpMore, Input, Label, SearchInput, Textarea } from "./input.js";
 import { Highlight, SEARCH_THRESHOLD, Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass } from "./select.js";
+import { Autocomplete } from "./autocomplete.js";
 import { ExpandedEditorModal } from "./expanded-editor-modal.js";
 import { ChoiceSwitch, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, fitsSegmented } from "./choice-switch.js";
 import { ActionTray, TrayMeta, TrayMore, actionTrayClass, relTime } from "./action-tray.js";
 import { ModeBar, ModeBarDot, ModeBarLink } from "./mode-bar.js";
-import { Spinner } from "./spinner.js";
 import { Tab, TabList, TabPanel, Tabs } from "./tab.js";
 import { KitToaster, kitToast, kitToastManager } from "./toast.js";
-import { Autocomplete } from "./autocomplete.js";
 export { AGENT_PRESENCE, ActionTray, Autocomplete, Avatar, AvatarStack, Badge, Button, Card, CardHeader, Checkbox, ChoiceCard, ChoiceList, ChoiceSwitch, Dot, EmptyState, ExpandedEditorModal, FLOATING_LAYER, Field, FieldDescribedByContext, FieldLabelledByContext, FlowBody, FlowClose, FlowFooter, FlowHeader, FlowLabel, FlowModal, HeaderStatus, HelpMore, Highlight, HintTooltip, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, Kbd, KitToaster, Label, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, ModeBar, ModeBarDot, ModeBarLink, MoreOptions, OptionRow, PageHeader, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, RevealLink, SEARCH_THRESHOLD, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, SearchInput, Segmented, Select, Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetTrigger, ShortcutHint, ShortcutHintsProvider, Skeleton, Slider, Sparkle, Spinner, Stat, StatusMark, StatusPill, Switch, Tab, TabList, TabPanel, Table, Tabs, Td, Textarea, Th, ToggleGroup, ToggleItem, Tooltip, TooltipProvider, TooltipScope, Tr, TrayMeta, TrayMore, actionTrayClass, avatarRingSpread, badgeVariants, buttonVariants, colorFor, filterOptions, fitsSegmented, iconButtonVariants, initials, kitToast, kitToastManager, matchPositions, matchScore, nodeText, presenceColor, presenceSlot, registerPresenceRoster, relTime, selectTriggerClass, shortcutHintsOn, statusMap, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useFocusReturn, useShortcutHints };

package/dist/ui/toast.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { KIT_SCOPE } from "./surfaces.js";
 import { Spinner } from "./spinner.js";
+import { KIT_SCOPE } from "./surfaces.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/kit",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "The BetterCMS V2 Block Kit: schema language, form engine, controls and design tokens.",
   "license": "MIT",
   "type": "module",
@@ -73,6 +73,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.4.1",
+    "@bettercms-ai/types": "^1.56.0",
     "@tabler/icons-react": "^3.48.0",
     "framer-motion": "^12.40.0",
     "react": "^19.2.0",
@@ -80,6 +81,7 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.4.1",
+    "@bettercms-ai/types": "workspace:*",
     "@tabler/icons-react": "3.48.0",
     "@tailwindcss/node": "^4.2.2",
     "@tailwindcss/postcss": "^4.2.2",