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

package/dist/ui/action-tray.js

@@ -0,0 +1,154 @@
+import { cn } from "../lib/cn.js";
+import { HintTooltip, IconButton } from "./button.js";
+import { Menu, MenuContent, MenuTrigger } from "./overlay.js";
+import { Avatar, AvatarStack } from "./display.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconDots } from "@tabler/icons-react";
+//#region src/ui/action-tray.tsx
+/**
+* ACTION TRAY: Figma 61014:66265 "Bottom". The soft, slightly raised bar at the bottom of editors, inspectors,
+* sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +
+* hairline (a 32px button fits exactly). No blur (D21).
+*
+*   <ActionTray meta={<TrayMeta name="Priya Nair" at={iso} onClick={openHistory} />}>
+*     <Button variant="primary" leftIcon={<IconUpload />}>Publish</Button>
+*     <TrayMore>…menu items…</TrayMore>
+*   </ActionTray>
+*
+* Use for sticky bottom ACTION bars only, never on cards or content areas.
+*/
+var clearing = /* @__PURE__ */ new Set();
+function syncToastOffset() {
+	if (typeof document === "undefined") return;
+	let lift = 0;
+	for (const el of clearing) {
+		const r = el.getBoundingClientRect();
+		if (r.height) lift = Math.max(lift, window.innerHeight - r.top + 12);
+	}
+	if (lift > 0) document.documentElement.style.setProperty("--toast-offset-bottom", `${Math.round(lift)}px`);
+	else document.documentElement.style.removeProperty("--toast-offset-bottom");
+}
+function useToastClearance(ref, on) {
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!on || !el) return;
+		clearing.add(el);
+		syncToastOffset();
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(syncToastOffset) : null;
+		ro?.observe(el);
+		window.addEventListener("resize", syncToastOffset);
+		return () => {
+			clearing.delete(el);
+			ro?.disconnect();
+			window.removeEventListener("resize", syncToastOffset);
+			syncToastOffset();
+		};
+	}, [ref, on]);
+}
+/** Class string for footers that can't take the component (e.g. a shared footer primitive). */
+var actionTrayClass = "shrink-0 border-t border-kit-editor-tray-line bg-tray";
+function ActionTray({ meta, children, className, as: Tag = "div", clearToasts = false, ...props }) {
+	const ref = React.useRef(null);
+	useToastClearance(ref, clearToasts);
+	return /* @__PURE__ */ jsxs(Tag, {
+		ref,
+		"data-action-tray": "",
+		className: cn(actionTrayClass, "@container/tray flex min-h-[45px] items-center justify-between gap-2 px-3 py-1.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children: meta
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-[5px]",
+			children
+		}) : null]
+	});
+}
+/** V2 relTime: "just now", "5m ago", "3h ago", "2d ago", "1w ago", then a date. */
+function relTime(at, now = Date.now()) {
+	const s = Math.round((now - new Date(at).getTime()) / 1e3);
+	if (s < 45) return "just now";
+	const m = Math.round(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.round(m / 60);
+	if (h < 24) return `${h}h ago`;
+	const days = Math.round(h / 24);
+	if (days < 7) return `${days}d ago`;
+	const w = Math.round(days / 7);
+	if (w < 5) return `${w}w ago`;
+	return new Date(at).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
+var fullStamp = (at) => new Date(at).toLocaleString("en-US", {
+	weekday: "short",
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+});
+/**
+* Left meta: avatar 20 · name 13/500 · "Edited 3h ago" 13 muted (Figma). The tooltip carries the full timestamp;
+* when `onClick` is set the whole line is a button (opens History).
+*/
+function TrayMeta({ name, avatarName, src, people, at, verb = "Edited", note, onClick, actionHint = "Open history" }) {
+	const when = note ?? (at ? `${verb} ${relTime(at).replace("just now", "a moment ago")}` : verb);
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "flex shrink-0 items-center gap-1",
+		children: [people && people.length > 1 ? /* @__PURE__ */ jsx(AvatarStack, {
+			people,
+			size: 20,
+			max: 3
+		}) : /* @__PURE__ */ jsx(Avatar, {
+			name: avatarName ?? name,
+			src,
+			size: 20,
+			decorative: true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden whitespace-nowrap text-kit-sm font-medium text-kit-fg @[34rem]/tray:inline",
+			children: name
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline",
+		children: when
+	})] });
+	const tip = at ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : ""}` : onClick ? `${name} · ${when} · ${actionHint}` : `${name} · ${when}`;
+	const body = onClick ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-label": `${name}, ${when}. ${actionHint}`,
+		className: "-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover",
+		children: inner
+	}) : /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [inner, /* @__PURE__ */ jsx("span", {
+			className: "sr-only @[34rem]/tray:hidden",
+			children: `${name}, ${when}`
+		})]
+	});
+	return /* @__PURE__ */ jsx(HintTooltip, {
+		content: tip,
+		children: body
+	});
+}
+/** The tray's "⋯" (32×32 ghost, Figma "Button - Modal actions") opening a menu above the bar. Children are menu items. */
+function TrayMore({ label = "More options", children, menuClassName }) {
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+		label,
+		size: "md",
+		children: /* @__PURE__ */ jsx(IconDots, { "aria-hidden": true })
+	}) }), /* @__PURE__ */ jsx(MenuContent, {
+		side: "top",
+		align: "end",
+		className: cn("w-60", menuClassName),
+		children
+	})] });
+}
+//#endregion
+export { ActionTray, TrayMeta, TrayMore, actionTrayClass, relTime };
+
+//# sourceMappingURL=action-tray.js.map

package/dist/ui/action-tray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-tray.js","names":[],"sources":["../../src/ui/action-tray.tsx"],"sourcesContent":["/**\n * ACTION TRAY: Figma 61014:66265 \"Bottom\". The soft, slightly raised bar at the bottom of editors, inspectors,\n * sheets and dialogs: surface → light grey gradient, 1px top hairline, 12px side padding, 6px vertical, 44px tall +\n * hairline (a 32px button fits exactly). No blur (D21).\n *\n *   <ActionTray meta={<TrayMeta name=\"Priya Nair\" at={iso} onClick={openHistory} />}>\n *     <Button variant=\"primary\" leftIcon={<IconUpload />}>Publish</Button>\n *     <TrayMore>…menu items…</TrayMore>\n *   </ActionTray>\n *\n * Use for sticky bottom ACTION bars only, never on cards or content areas.\n */\nimport * as React from \"react\";\nimport { IconDots } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { HintTooltip, IconButton } from \"./button\";\nimport { Avatar, AvatarStack } from \"./display\";\nimport { Menu, MenuContent, MenuTrigger } from \"./overlay\";\n\n/* ── Toasts clear the tray (S1: a toast covered the schema draft bar's Apply) ─────────────────────────────────────────\n   A tray with `clearToasts` lifts the app's bottom toasts above itself while it is mounted: it writes\n   `--toast-offset-bottom` on the root (the host's Toaster reads it as its bottom offset), the highest tray winning. */\nconst clearing = new Set<HTMLElement>();\nfunction syncToastOffset() {\n  if (typeof document === \"undefined\") return;\n  let lift = 0;\n  for (const el of clearing) {\n    const r = el.getBoundingClientRect();\n    if (r.height) lift = Math.max(lift, window.innerHeight - r.top + 12);\n  }\n  if (lift > 0) document.documentElement.style.setProperty(\"--toast-offset-bottom\", `${Math.round(lift)}px`);\n  else document.documentElement.style.removeProperty(\"--toast-offset-bottom\");\n}\nfunction useToastClearance(ref: React.RefObject<HTMLElement | null>, on: boolean) {\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!on || !el) return;\n    clearing.add(el);\n    syncToastOffset();\n    const ro = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(syncToastOffset) : null;\n    ro?.observe(el);\n    window.addEventListener(\"resize\", syncToastOffset);\n    return () => {\n      clearing.delete(el);\n      ro?.disconnect();\n      window.removeEventListener(\"resize\", syncToastOffset);\n      syncToastOffset();\n    };\n  }, [ref, on]);\n}\n\n/** Class string for footers that can't take the component (e.g. a shared footer primitive). */\nexport const actionTrayClass = \"shrink-0 border-t border-kit-editor-tray-line bg-tray\";\n\nexport function ActionTray({\n  meta,\n  children,\n  className,\n  as: Tag = \"div\",\n  clearToasts = false,\n  ...props\n}: Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** Left slot, usually <TrayMeta>. */\n  meta?: React.ReactNode;\n  /** Right slot: actions (primary last-but-one, ⋯ last). */\n  children?: React.ReactNode;\n  as?: \"div\" | \"footer\";\n  /** a page-level bar at the bottom of the window: bottom toasts sit above it, never over its buttons */\n  clearToasts?: boolean;\n}) {\n  const ref = React.useRef<HTMLElement>(null);\n  useToastClearance(ref, clearToasts);\n  return (\n    <Tag\n      ref={ref as React.Ref<HTMLDivElement>}\n      data-action-tray=\"\"\n      className={cn(actionTrayClass, \"@container/tray flex min-h-[45px] items-center justify-between gap-2 px-3 py-1.5\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">{meta}</div>\n      {children ? <div className=\"flex shrink-0 items-center gap-[5px]\">{children}</div> : null}\n    </Tag>\n  );\n}\n\n/** V2 relTime: \"just now\", \"5m ago\", \"3h ago\", \"2d ago\", \"1w ago\", then a date. */\nexport function relTime(at: string | number | Date, now = Date.now()) {\n  const s = Math.round((now - new Date(at).getTime()) / 1000);\n  if (s < 45) return \"just now\";\n  const m = Math.round(s / 60);\n  if (m < 60) return `${m}m ago`;\n  const h = Math.round(m / 60);\n  if (h < 24) return `${h}h ago`;\n  const days = Math.round(h / 24);\n  if (days < 7) return `${days}d ago`;\n  const w = Math.round(days / 7);\n  if (w < 5) return `${w}w ago`;\n  return new Date(at).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nconst fullStamp = (at: string | number | Date) =>\n  new Date(at).toLocaleString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", hour: \"numeric\", minute: \"2-digit\" });\n\n/**\n * Left meta: avatar 20 · name 13/500 · \"Edited 3h ago\" 13 muted (Figma). The tooltip carries the full timestamp;\n * when `onClick` is set the whole line is a button (opens History).\n */\nexport function TrayMeta({\n  name,\n  avatarName,\n  src,\n  people,\n  at,\n  verb = \"Edited\",\n  note,\n  onClick,\n  actionHint = \"Open history\",\n}: {\n  name: string;\n  /** Full name for the avatar when `name` is shortened (\"You\", first names). */\n  avatarName?: string;\n  src?: string;\n  /** Several editors → avatar stack (first is the last editor). */\n  people?: { name: string; src?: string }[];\n  /** When it was edited; omit for \"just now\" states you phrase yourself via `note`. */\n  at?: string | number | Date;\n  verb?: string;\n  /** Overrides the relative-time text, e.g. \"Edited just now\". */\n  note?: string;\n  onClick?: () => void;\n  actionHint?: string;\n}) {\n  const when = note ?? (at ? `${verb} ${relTime(at).replace(\"just now\", \"a moment ago\")}` : verb);\n  const inner = (\n    <>\n      <span className=\"flex shrink-0 items-center gap-1\">\n        {people && people.length > 1 ? (\n          <AvatarStack people={people} size={20} max={3} />\n        ) : (\n          <Avatar name={avatarName ?? name} src={src} size={20} decorative />\n        )}\n        {/* narrow trays (the grid drawer): just the avatar, the words move into the tooltip; never a clipped \"Edit…\" */}\n        <span className=\"hidden whitespace-nowrap text-kit-sm font-medium text-kit-fg @[34rem]/tray:inline\">{name}</span>\n      </span>\n      <span className=\"hidden min-w-0 truncate text-kit-sm text-kit-fg-3 @[34rem]/tray:inline\">{when}</span>\n    </>\n  );\n  const tip = at\n    ? `${name} · ${verb} ${fullStamp(at)}${onClick ? ` · ${actionHint}` : \"\"}`\n    : onClick\n      ? `${name} · ${when} · ${actionHint}`\n      : `${name} · ${when}`;\n  const body = onClick ? (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={`${name}, ${when}. ${actionHint}`}\n      className=\"-mx-1 flex min-w-0 items-center gap-2 rounded-kit-md px-1 py-0.5 transition-colors hover:bg-kit-hover\"\n    >\n      {inner}\n    </button>\n  ) : (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      {inner}\n      {/* the words hide in narrow trays; screen readers always get them */}\n      <span className=\"sr-only @[34rem]/tray:hidden\">{`${name}, ${when}`}</span>\n    </span>\n  );\n  return <HintTooltip content={tip}>{body}</HintTooltip>;\n}\n\n/** The tray's \"⋯\" (32×32 ghost, Figma \"Button - Modal actions\") opening a menu above the bar. Children are menu items. */\nexport function TrayMore({\n  label = \"More options\",\n  children,\n  menuClassName,\n}: {\n  label?: string;\n  children: React.ReactNode;\n  menuClassName?: string;\n}) {\n  return (\n    // the kit Menu: §12 dismiss guards, the modal-layer marker (an open tooltip closes) and V2's non-looping arrows\n    <Menu>\n      <MenuTrigger\n        render={\n          <IconButton label={label} size=\"md\">\n            <IconDots aria-hidden />\n          </IconButton>\n        }\n      />\n      <MenuContent side=\"top\" align=\"end\" className={cn(\"w-60\", menuClassName)}>\n        {children}\n      </MenuContent>\n    </Menu>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/autocomplete.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type SelectOption } from "./select";
+export interface AutocompleteProps {
+    id?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    /** the text (controlled) */
+    value?: string;
+    defaultValue?: string;
+    /** every keystroke, and the label of a picked suggestion */
+    onValueChange?: (text: string) => void;
+    options: SelectOption[];
+    /** a suggestion was picked (click, or Enter on a highlighted row) */
+    onSelect?: (option: SelectOption) => void;
+    /** Enter with no suggestion highlighted: commit the typed text */
+    onEnter?: (text: string) => void;
+    /** default: Select's ranking; null = the caller already filtered (async options) */
+    filter?: ((options: SelectOption[], query: string) => SelectOption[]) | null;
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    leading?: React.ReactNode;
+    loading?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** open the suggestions when the field takes focus (default true, as V2) */
+    openOnFocus?: boolean;
+    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;

package/dist/ui/autocomplete.js

@@ -0,0 +1,139 @@
+import { cn } from "../lib/cn.js";
+import { useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.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 { IconX } from "@tabler/icons-react";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+//#region src/ui/autocomplete.tsx
+var H = {
+	sm: "h-7",
+	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 }) {
+	const fieldId = useFieldId();
+	const labelledBy = useFieldLabelledBy();
+	const labelFor = useLabelFor(id ?? fieldId);
+	const describedBy = useFieldDescribedBy();
+	const [inner, setInner] = React.useState(defaultValue);
+	const text = value ?? inner;
+	const setText = (t) => {
+		if (value === void 0) setInner(t);
+		onValueChange?.(t);
+	};
+	const [open, setOpen] = React.useState(false);
+	const highlighted = React.useRef(void 0);
+	const shown = React.useMemo(() => filter ? filter(options, text) : options, [
+		filter,
+		options,
+		text
+	]);
+	const named = id ?? fieldId ?? ariaLabel;
+	return /* @__PURE__ */ jsxs(Autocomplete$1.Root, {
+		items: shown,
+		filter: null,
+		mode: "list",
+		value: text,
+		onValueChange: (t) => setText(t),
+		itemToStringValue: (o) => nodeText(o.label),
+		open: open && shown.length > 0,
+		onOpenChange: setOpen,
+		onItemHighlighted: (o) => highlighted.current = 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: [
+				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, {
+					id: id ?? fieldId,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabel ? void 0 : labelFor ?? (named ? void 0 : labelledBy),
+					"aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
+					"aria-invalid": invalid || void 0,
+					placeholder,
+					autoComplete: "off",
+					spellCheck: false,
+					onFocus: () => openOnFocus && setOpen(true),
+					onKeyDown: (e) => {
+						if (e.key === "Enter" && !highlighted.current) 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"
+				}),
+				loading ? /* @__PURE__ */ jsx(Spinner, {
+					size: "sm",
+					tone: "muted",
+					label: "Loading suggestions",
+					className: "mr-2"
+				}) : text && !disabled ? /* @__PURE__ */ jsx(IconButton, {
+					label: "Clear",
+					size: "xs",
+					variant: "ghost",
+					className: "mr-1",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => setText(""),
+					children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+			align: "start",
+			side: "bottom",
+			sideOffset: 4,
+			collisionPadding: 12,
+			className: "z-[var(--kit-z-menu,80)]",
+			"data-floating-layer": "",
+			...KIT_SCOPE,
+			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))
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { Autocomplete };
+
+//# sourceMappingURL=autocomplete.js.map

package/dist/ui/autocomplete.js.map

@@ -0,0 +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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"}

package/dist/ui/button.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { type VariantProps } from "./variants";
+/**
+ * Button: the only button in the kit.
+ * Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.
+ * Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)
+ *           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)
+ * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).
+ */
+export declare const buttonVariants: (props?: {
+    variant?: "link" | "ai" | "primary" | "secondary" | "accent" | "ghost" | "soft" | "danger" | "danger-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+} | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render the single child element (a link, say) with the button's classes and props. */
+    asChild?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */
+export declare const iconButtonVariants: (props?: {
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    variant?: "outline" | "ghost" | "soft" | null | undefined;
+} | undefined) => string;
+/**
+ * a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested
+ * there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.
+ */
+export declare const TooltipScope: React.Context<boolean>;
+/**
+ * The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child
+ * element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never
+ * import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.
+ */
+export declare function HintTooltip({ content, side, delay, children, }: {
+    content: React.ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+    children: React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    label: string;
+    active?: boolean;
+    /** Hover/focus hint. Defaults to `label`; pass `false` to opt out, or a node to customise. */
+    tooltip?: React.ReactNode | false;
+    tooltipSide?: "top" | "bottom" | "left" | "right";
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */
+export declare function Sparkle({ className, size }: {
+    className?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** D15 progressive disclosure: "+ Add a message" / "+ Limit to specific sites": reveals an optional input. */
+export declare function RevealLink({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/button.js

@@ -0,0 +1,201 @@
+import { cn } from "../lib/cn.js";
+import { SPARKLE_PATH } from "../brand/logo.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 { Tooltip } from "@base-ui/react/tooltip";
+//#region src/ui/button.tsx
+/**
+* Button: the only button in the kit.
+* Heights: xs 24 · sm 28 · md 32 (default) · lg 36 · xl 40. Radius 6.
+* Variants: primary (ink) · accent (violet, reserved for the ONE create action per screen)
+*           secondary (bordered) · ghost · soft · danger · danger-ghost · link · ai (gradient sparkle)
+* The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).
+*/
+var buttonVariants = variants("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", {
+	variants: {
+		variant: {
+			primary: "bg-kit-inverse text-kit-fg-inverse shadow-kit-button-primary hover:bg-kit-inverse-hover active:bg-kit-inverse btn-solid",
+			accent: "bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover btn-solid",
+			secondary: "border border-kit-line-strong bg-kit-control-bg text-kit-fg shadow-kit-xs hover:bg-kit-subtle active:bg-kit-hover",
+			ghost: "text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected",
+			soft: "bg-kit-muted text-kit-fg hover:bg-kit-selected",
+			danger: "bg-kit-danger text-kit-danger-on shadow-kit-xs hover:brightness-95",
+			"danger-ghost": "text-kit-danger-fg hover:bg-kit-danger-soft",
+			link: "text-kit-accent-fg underline-offset-4 hover:underline px-0 h-auto active:scale-100",
+			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"
+		},
+		size: {
+			xs: "h-6 rounded-kit-md px-2 text-kit-xs [&_svg]:size-3.5",
+			sm: "h-7 rounded-kit-md px-2.5 text-kit-sm [&_svg]:size-3.5",
+			md: "h-8 rounded-kit-md px-3 text-kit-sm [&_svg]:size-4",
+			lg: "h-9 rounded-kit-md px-3.5 text-kit-base [&_svg]:size-4",
+			xl: "h-10 rounded-kit-md px-4 text-kit-base [&_svg]:size-[18px]"
+		}
+	},
+	compoundVariants: [{
+		variant: "link",
+		className: "h-auto px-0"
+	}],
+	defaultVariants: {
+		variant: "secondary",
+		size: "md"
+	}
+});
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+var Button = React.forwardRef(({ className, variant, size, asChild, loading, leftIcon, rightIcon, children, disabled, ...props }, ref) => {
+	const classes = cn(buttonVariants({
+		variant,
+		size
+	}), className);
+	if (asChild && React.isValidElement(children)) return React.cloneElement(children, {
+		...props,
+		...children.props,
+		className: cn(classes, children.props.className),
+		ref: mergeRefs(ref, children.props.ref)
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: props.type ?? "button",
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: classes,
+		...props,
+		children: [
+			loading ? /* @__PURE__ */ jsx(IconLoader2, {
+				className: "animate-spin",
+				"aria-hidden": true
+			}) : leftIcon,
+			variant === "ai" && !leftIcon && !loading ? /* @__PURE__ */ jsx(Sparkle, {}) : null,
+			children,
+			rightIcon
+		]
+	});
+});
+Button.displayName = "Button";
+/** Square icon-only button. Always pass `label` (used for aria-label + tooltip). */
+var iconButtonVariants = variants("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", {
+	variants: {
+		size: {
+			xs: "size-6 rounded-kit-md [&_svg]:size-3.5",
+			sm: "size-7 rounded-kit-md [&_svg]:size-4",
+			md: "size-8 rounded-kit-md [&_svg]:size-4",
+			lg: "size-9 rounded-kit-md [&_svg]:size-[18px]"
+		},
+		variant: {
+			ghost: "",
+			outline: "border border-kit-line bg-kit-control-bg shadow-kit-xs hover:border-kit-line-strong",
+			soft: "bg-kit-muted"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "ghost"
+	}
+});
+/**
+* a11y: true while rendering inside a tooltip (or a surface that manages its own hints), so an IconButton nested
+* there doesn't add a second tooltip. Provided by HintTooltip and overlay.tsx's <Tooltip>.
+*/
+var TooltipScope = React.createContext(false);
+/**
+* The plain ink hint (DESIGN.md 8.23: top, 6px offset, 8px collision padding, portalled, z 90, 350ms). The child
+* element is the trigger and must take a ref and DOM props. input, display and action-tray use it so they never
+* import overlay.tsx; overlay's <Tooltip> adds the shortcut slot on top of the same layer.
+*/
+function HintTooltip({ content, side = "top", delay = 350, children }) {
+	return /* @__PURE__ */ jsx(TooltipScope.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			delay,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipLayer, {
+			side,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+				children: content
+			})
+		})] })
+	});
+}
+var IconButton = React.forwardRef(({ className, size, variant, label, active, children, tooltip, tooltipSide = "top", ...props }, ref) => {
+	const inTooltip = React.useContext(TooltipScope);
+	const btn = /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		"data-active": active ? "true" : void 0,
+		className: cn(iconButtonVariants({
+			size,
+			variant
+		}), className),
+		...props,
+		children
+	});
+	if (inTooltip || tooltip === false || !label) return btn;
+	return /* @__PURE__ */ jsx(HintTooltip, {
+		content: tooltip ?? label,
+		side: tooltipSide,
+		children: btn
+	});
+});
+IconButton.displayName = "IconButton";
+/** The AI sparkle in the official brand gradient. Used everywhere AI appears. */
+function Sparkle({ className, size = 16 }) {
+	const id = React.useId().replace(/:/g, "");
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "2 2 16 16",
+		className: cn("shrink-0", className),
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+			id: `sp${id}`,
+			x1: "6.89",
+			y1: "4.59",
+			x2: "18",
+			y2: "23.67",
+			gradientUnits: "userSpaceOnUse",
+			children: [
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0.0817",
+					style: { stopColor: "var(--kit-brand-violet)" }
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0.4667",
+					style: { stopColor: "var(--kit-brand-coral)" }
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					style: { stopColor: "var(--kit-brand-rose)" }
+				})
+			]
+		}) }), /* @__PURE__ */ jsx("path", {
+			d: SPARKLE_PATH,
+			fill: `url(#sp${id})`
+		})]
+	});
+}
+/** D15 progressive disclosure: "+ Add a message" / "+ Limit to specific sites": reveals an optional input. */
+function RevealLink({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cn("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", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(IconPlus, {
+			stroke: 2,
+			"aria-hidden": true
+		}), children]
+	});
+}
+//#endregion
+export { Button, HintTooltip, IconButton, RevealLink, Sparkle, TooltipScope, buttonVariants, iconButtonVariants };
+
+//# sourceMappingURL=button.js.map