@bettercms-ai/kit 1.0.0 → 2.0.0

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/{ui → dist/ui}/button.d.ts

@@ -8,8 +8,8 @@ import { type VariantProps } from "./variants";
  * The keyboard focus ring is the global :focus-visible outline, suppressed under pointer modality (DESIGN.md 3.7).
  */
 export declare const buttonVariants: (props?: {
-    variant?: "accent" | "link" | "primary" | "secondary" | "ghost" | "soft" | "danger" | "danger-ghost" | "ai" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    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. */
@@ -21,7 +21,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 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?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     variant?: "outline" | "ghost" | "soft" | null | undefined;
 } | undefined) => string;
 /**

package/{ui → dist/ui}/button.js

@@ -3,10 +3,10 @@ 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 { IconLoader2, IconPlus } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconLoader2, IconPlus } from "@tabler/icons-react";
 import { Tooltip } from "@base-ui/react/tooltip";
-//#region src/kit/ui/button.tsx
+//#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.
@@ -17,8 +17,8 @@ import { Tooltip } from "@base-ui/react/tooltip";
 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-[var(--kit-shadow-button-primary)] hover:bg-kit-inverse-hover active:bg-kit-inverse",
-			accent: "bg-kit-accent text-kit-accent-on shadow-kit-xs hover:bg-kit-accent-hover",
+			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",
@@ -44,7 +44,6 @@ var buttonVariants = variants("relative inline-flex items-center justify-center
 		size: "md"
 	}
 });
-var SOLID_DISABLED = "[.dark_&]:disabled:bg-[#2a2a2d] [.dark_&]:disabled:text-[#9e9ea1] [.dark_&]:disabled:opacity-100 [.dark_&]:disabled:shadow-none";
 function mergeRefs(...refs) {
 	return (node) => {
 		for (const ref of refs) if (typeof ref === "function") ref(node);
@@ -55,7 +54,7 @@ var Button = React.forwardRef(({ className, variant, size, asChild, loading, lef
 	const classes = cn(buttonVariants({
 		variant,
 		size
-	}), (variant === "primary" || variant === "accent") && SOLID_DISABLED, className);
+	}), className);
 	if (asChild && React.isValidElement(children)) return React.cloneElement(children, {
 		...props,
 		...children.props,
@@ -82,7 +81,7 @@ var Button = React.forwardRef(({ className, variant, size, asChild, loading, lef
 });
 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 data-[popup-open]:bg-kit-selected data-[popup-open]:text-kit-fg", {
+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",

package/dist/ui/button.js.map

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

package/{ui → dist/ui}/choice-switch.js

@@ -2,7 +2,7 @@ import { Segmented } from "./controls.js";
 import { Select, nodeText } from "./select.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/kit/ui/choice-switch.tsx
+//#region src/ui/choice-switch.tsx
 /** Most options a segmented switch may hold. */
 var SEGMENTED_MAX = 3;
 /**

package/dist/ui/choice-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-switch.js","names":[],"sources":["../../src/ui/choice-switch.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Segmented } from \"./controls\";\nimport { Select, nodeText } from \"./select\";\n\n/* ── Pickers: segmented vs dropdown (D46) ──────────────────────────────────\n   A tab-style switch is for 2–3 short options people flip often. Four or more options, or labels that would wrap or\n   truncate in a 340px inspector, become a dropdown (the D34 Select, with a one-line description where an option\n   isn't self-explanatory). `fitsSegmented` is the single test; `ChoiceSwitch` applies it for dynamic lists\n   (variants, schema options, presets) so call sites never have to count. */\n\n/** Most options a segmented switch may hold. */\nexport const SEGMENTED_MAX = 3;\n/**\n * Longest label (characters) that stays on one line when the row shares a 340px inspector:\n * two options get ~134px each (about 18 characters at 13px), three get ~84px (about 12).\n */\nexport const SEGMENTED_MAX_LABEL = { 2: 18, 3: 12 } as const;\n\nexport function fitsSegmented(labels: React.ReactNode[]): boolean {\n  const n = labels.length;\n  if (n < 2 || n > SEGMENTED_MAX) return false;\n  const max = SEGMENTED_MAX_LABEL[n as 2 | 3];\n  return labels.every((l) => nodeText(l).trim().length <= max);\n}\n\nexport interface ChoiceSwitchItem<T extends string> {\n  value: T;\n  label: React.ReactNode;\n  /** one line under the option in the dropdown; ignored while it renders as a segmented switch */\n  description?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function ChoiceSwitch<T extends string>({\n  value,\n  onChange,\n  items,\n  \"aria-label\": ariaLabel,\n  size = \"sm\",\n  layout = \"auto\",\n  disabled,\n  className,\n  segmentedClassName,\n  selectClassName,\n  layoutId,\n  placeholder,\n}: {\n  value: T;\n  onChange: (v: T) => void;\n  items: ChoiceSwitchItem<T>[];\n  \"aria-label\"?: string;\n  size?: \"sm\" | \"md\";\n  /** \"auto\" applies D46; force a look only when a design reason overrides the rule */\n  layout?: \"auto\" | \"segmented\" | \"dropdown\";\n  disabled?: boolean;\n  /** applied to whichever control renders */\n  className?: string;\n  segmentedClassName?: string;\n  selectClassName?: string;\n  layoutId?: string;\n  placeholder?: string;\n}) {\n  const segmented = layout === \"segmented\" || (layout === \"auto\" && fitsSegmented(items.map((i) => i.label)));\n  if (segmented)\n    return (\n      <Segmented<T>\n        size={size}\n        aria-label={ariaLabel}\n        value={value}\n        onChange={(v) => !disabled && onChange(v)}\n        layoutId={layoutId}\n        className={[className, segmentedClassName].filter(Boolean).join(\" \") || undefined}\n        items={items.map((i) => ({ value: i.value, label: i.label, icon: i.icon, disabled: disabled || i.disabled }))}\n      />\n    );\n  return (\n    <Select\n      size={size}\n      aria-label={ariaLabel}\n      value={value || undefined}\n      disabled={disabled}\n      placeholder={placeholder}\n      onValueChange={(v) => onChange(v as T)}\n      className={[className, selectClassName].filter(Boolean).join(\" \") || undefined}\n      options={items.map((i) => ({ value: i.value, label: i.label, description: i.description, icon: i.icon, disabled: i.disabled }))}\n    />\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAa,gBAAgB;;;;;AAK7B,IAAa,sBAAsB;CAAE,GAAG;CAAI,GAAG;AAAG;AAElD,SAAgB,cAAc,QAAoC;CAChE,MAAM,IAAI,OAAO;CACjB,IAAI,IAAI,KAAK,IAAA,GAAmB,OAAO;CACvC,MAAM,MAAM,oBAAoB;CAChC,OAAO,OAAO,OAAO,MAAM,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG;AAC7D;AAWA,SAAgB,aAA+B,EAC7C,OACA,UACA,OACA,cAAc,WACd,OAAO,MACP,SAAS,QACT,UACA,WACA,oBACA,iBACA,UACA,eAgBC;CAED,IADkB,WAAW,eAAgB,WAAW,UAAU,cAAc,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC,GAEvG,OACE,oBAAC,WAAD;EACQ;EACN,cAAY;EACL;EACP,WAAW,MAAM,CAAC,YAAY,SAAS,CAAC;EAC9B;EACV,WAAW,CAAC,WAAW,kBAAkB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EACxE,OAAO,MAAM,KAAK,OAAO;GAAE,OAAO,EAAE;GAAO,OAAO,EAAE;GAAO,MAAM,EAAE;GAAM,UAAU,YAAY,EAAE;EAAS,EAAE;CAC7G,CAAA;CAEL,OACE,oBAAC,QAAD;EACQ;EACN,cAAY;EACZ,OAAO,SAAS,KAAA;EACN;EACG;EACb,gBAAgB,MAAM,SAAS,CAAM;EACrC,WAAW,CAAC,WAAW,eAAe,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EACrE,SAAS,MAAM,KAAK,OAAO;GAAE,OAAO,EAAE;GAAO,OAAO,EAAE;GAAO,aAAa,EAAE;GAAa,MAAM,EAAE;GAAM,UAAU,EAAE;EAAS,EAAE;CAC/H,CAAA;AAEL"}

package/{ui → dist/ui}/controls.js

@@ -1,50 +1,49 @@
 import { cn } from "../lib/cn.js";
 import { useFieldLabelledBy, useLabelFor } from "./field-context.js";
-import { INK_ACTIVE } from "./surfaces.js";
 import { TooltipLayer, TooltipRoot } from "./tooltip-root.js";
 import { TooltipScope } from "./button.js";
 import { useShortcutHints } from "./shortcut-hint.js";
 import * as React from "react";
-import { IconCheck, IconMinus } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconMinus } from "@tabler/icons-react";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { Switch } from "@base-ui/react/switch";
-import { Checkbox } from "@base-ui/react/checkbox";
-import { RadioGroup } from "@base-ui/react/radio-group";
-import { Radio } from "@base-ui/react/radio";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { Slider } from "@base-ui/react/slider";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
-import { Progress } from "@base-ui/react/progress";
-//#region src/kit/ui/controls.tsx
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+//#region src/ui/controls.tsx
 var PILL_SPRING = {
 	type: "spring",
 	stiffness: 520,
 	damping: 42
 };
-function Switch$1({ className, size = "md", ...props }) {
+function Switch({ className, size = "md", ...props }) {
 	const sm = size === "sm";
 	const labelledBy = useFieldLabelledBy();
 	const labelFor = useLabelFor(props.id);
-	return /* @__PURE__ */ jsx(Switch.Root, {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		className: cn("group relative inline-flex shrink-0 items-center rounded-full bg-kit-switch-off transition-colors duration-200 data-[checked]:bg-kit-success data-[disabled]:opacity-40", sm ? "h-4 w-7" : "h-5 w-9", className),
 		"aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelFor ?? (props.id ? void 0 : labelledBy)),
 		...props,
-		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn("pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-kit-spring", sm ? "size-3 translate-x-0.5 data-[checked]:translate-x-[14px]" : "size-4 translate-x-0.5 data-[checked]:translate-x-[18px]") })
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: cn("pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-[var(--kit-ease-spring)]", sm ? "size-3 translate-x-0.5 data-[checked]:translate-x-[14px]" : "size-4 translate-x-0.5 data-[checked]:translate-x-[18px]") })
 	});
 }
 /** `checked` keeps V2's tri-state value: true, false or "indeterminate". */
-function Checkbox$1({ className, checked, ...props }) {
+function Checkbox({ className, checked, ...props }) {
 	const indeterminate = checked === "indeterminate";
 	const labelFor = useLabelFor(props.id);
-	return /* @__PURE__ */ jsx(Checkbox.Root, {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		"aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelFor),
-		className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse data-[disabled]:opacity-40", className),
+		className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse", className),
 		checked: checked === void 0 ? void 0 : checked === true,
 		indeterminate,
 		...props,
-		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
 			className: "text-kit-fg-inverse",
 			children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {
 				className: "size-3",
@@ -56,12 +55,12 @@ function Checkbox$1({ className, checked, ...props }) {
 		})
 	});
 }
-var RadioGroup$1 = RadioGroup;
-function Radio$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Radio.Root, {
-		className: cn("flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent data-[disabled]:opacity-40", className),
+var RadioGroup = RadioGroup$1;
+function Radio({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio$1.Root, {
+		className: cn("flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent", className),
 		...props,
-		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "block size-2 rounded-full bg-kit-accent" })
+		children: /* @__PURE__ */ jsx(Radio$1.Indicator, { className: "block size-2 rounded-full bg-kit-accent" })
 	});
 }
 /** Large selectable card used for choices (plans, project kinds, roles). */
@@ -70,7 +69,7 @@ function ChoiceCard({ selected, onSelect, icon, title, description, badge, class
 		type: "button",
 		onClick: onSelect,
 		"aria-pressed": selected,
-		className: cn("group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-offset-[-2px]", selected ? "border-[var(--kit-emphasis-line)] shadow-kit-ring-field" : "border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm", className),
+		className: cn("focus-inset group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150", selected ? "border-[var(--kit-emphasis-line)] shadow-kit-ring-field" : "border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-3",
 			children: [
@@ -108,19 +107,19 @@ function ChoiceList({ className, children, ...props }) {
 		children
 	});
 }
-function Slider$1({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, label, ...props }) {
+function Slider({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, label, ...props }) {
 	const name = ariaLabel ?? label;
 	const v = props.value ?? props.defaultValue ?? [0];
 	const thumbs = Array.isArray(v) ? v.length : 1;
-	return /* @__PURE__ */ jsx(Slider.Root, {
+	return /* @__PURE__ */ jsx(Slider$1.Root, {
 		className: cn("w-full", className),
 		...props,
-		children: /* @__PURE__ */ jsxs(Slider.Control, {
+		children: /* @__PURE__ */ jsxs(Slider$1.Control, {
 			className: "relative flex h-5 w-full touch-none select-none items-center",
-			children: [/* @__PURE__ */ jsx(Slider.Track, {
+			children: [/* @__PURE__ */ jsx(Slider$1.Track, {
 				className: "relative h-1 w-full grow overflow-hidden rounded-full bg-[var(--kit-track-line)]",
-				children: /* @__PURE__ */ jsx(Slider.Indicator, { className: "absolute h-full bg-kit-fg-2" })
-			}), Array.from({ length: thumbs }, (_, i) => /* @__PURE__ */ jsx(Slider.Thumb, {
+				children: /* @__PURE__ */ jsx(Slider$1.Indicator, { className: "absolute h-full bg-kit-fg-2" })
+			}), Array.from({ length: thumbs }, (_, i) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				index: thumbs > 1 ? i : void 0,
 				getAriaLabel: name ? () => name : void 0,
 				"aria-labelledby": name ? void 0 : ariaLabelledby,
@@ -143,7 +142,7 @@ function SegmentTooltip({ content, shortcut, children }) {
 				children: content
 			}), shortcut && hints ? /* @__PURE__ */ jsx("kbd", {
 				"data-hint": "shortcuts",
-				className: cn("mt-px shrink-0 rounded-kit-sm px-1 font-kit-sans text-kit-2xs", INK_ACTIVE),
+				className: "mt-px shrink-0 rounded-kit-sm bg-kit-ink-active px-1 font-kit-sans text-kit-2xs",
 				children: shortcut
 			}) : null]
 		})] })
@@ -281,14 +280,27 @@ function Segmented({ value, onChange, items, size = "md", className, layoutId, i
 		})
 	});
 }
-function ToggleGroup$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx(ToggleGroup, {
-		className: cn("inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]", className),
-		...props
+var ToggleGroupSingle = React.createContext(false);
+function ToggleGroup({ className, ...props }) {
+	const single = !props.multiple;
+	return /* @__PURE__ */ jsx(ToggleGroupSingle.Provider, {
+		value: single,
+		children: /* @__PURE__ */ jsx(ToggleGroup$1, {
+			className: cn("inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]", className),
+			...single ? { role: "radiogroup" } : {},
+			...props
+		})
 	});
 }
 function ToggleItem({ className, ...props }) {
+	const single = React.useContext(ToggleGroupSingle);
 	return /* @__PURE__ */ jsx(Toggle, {
+		...single ? { render: (p, state) => /* @__PURE__ */ jsx("button", {
+			...p,
+			role: "radio",
+			"aria-checked": state.pressed,
+			"aria-pressed": void 0
+		}) } : {},
 		className: cn("inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded-kit-sm px-1.5 text-kit-xs font-medium text-kit-fg-3 transition-colors hover:bg-kit-hover hover:text-kit-fg data-[pressed]:bg-kit-selected data-[pressed]:text-kit-fg [&_svg]:size-3.5", className),
 		...props
 	});
@@ -301,19 +313,19 @@ var progressTones = {
 	ink: "bg-[var(--kit-bar-fill)]",
 	brand: "bg-[var(--kit-bar-fill)]"
 };
-function Progress$1({ value, className, tone = "success", size = "md", label = "Progress" }) {
+function Progress({ value, className, tone = "success", size = "md", label = "Progress" }) {
 	const pct = Math.min(100, Math.max(0, value));
-	return /* @__PURE__ */ jsx(Progress.Root, {
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
 		value: pct,
 		"aria-label": label,
 		className: cn("relative w-full overflow-hidden rounded-full bg-[var(--kit-track)]", size === "sm" ? "h-1" : "h-1.5", className),
-		children: /* @__PURE__ */ jsx(Progress.Indicator, {
-			className: cn("block h-full rounded-full transition-[width] duration-500 ease-kit-out-soft", progressTones[tone]),
+		children: /* @__PURE__ */ jsx(Progress$1.Indicator, {
+			className: cn("h-full rounded-full transition-[width] duration-500 ease-[var(--kit-ease-out-soft)]", progressTones[tone]),
 			style: { width: `${pct}%` }
 		})
 	});
 }
 //#endregion
-export { Checkbox$1 as Checkbox, ChoiceCard, ChoiceList, Progress$1 as Progress, Radio$1 as Radio, RadioGroup$1 as RadioGroup, Segmented, Slider$1 as Slider, Switch$1 as Switch, ToggleGroup$1 as ToggleGroup, ToggleItem };
+export { Checkbox, ChoiceCard, ChoiceList, Progress, Radio, RadioGroup, Segmented, Slider, Switch, ToggleGroup, ToggleItem };
 
 //# sourceMappingURL=controls.js.map

package/dist/ui/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","names":[],"sources":["../../src/ui/controls.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { IconCheck, IconMinus } from \"@tabler/icons-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\nimport { useFieldLabelledBy, useLabelFor } from \"./field-context\";\nimport { TooltipScope } from \"./button\";\nimport { useShortcutHints } from \"./shortcut-hint\";\nimport { TooltipLayer, TooltipRoot } from \"./tooltip-root\";\n\n/* Underlines and selected pills share one spring (DESIGN.md 3.6). */\nconst PILL_SPRING = { type: \"spring\", stiffness: 520, damping: 42 } as const;\n\n/* ── Switch ─────────────────────────────────────────────────────────────── */\nexport function Switch({\n  className,\n  size = \"md\",\n  ...props\n}: SwitchPrimitive.Root.Props & { size?: \"sm\" | \"md\" }) {\n  const sm = size === \"sm\";\n  const labelledBy = useFieldLabelledBy();\n  const labelFor = useLabelFor(props.id);\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"group relative inline-flex shrink-0 items-center rounded-full bg-kit-switch-off transition-colors duration-200 data-[checked]:bg-kit-success data-[disabled]:opacity-40\",\n        sm ? \"h-4 w-7\" : \"h-5 w-9\",\n        className,\n      )}\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : (labelFor ?? (props.id ? undefined : labelledBy)))}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-kit-control-thumb shadow-kit-sm transition-transform duration-200 ease-[var(--kit-ease-spring)]\",\n          sm ? \"size-3 translate-x-0.5 data-[checked]:translate-x-[14px]\" : \"size-4 translate-x-0.5 data-[checked]:translate-x-[18px]\",\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\n/* ── Checkbox ───────────────────────────────────────────────────────────── */\n/** `checked` keeps V2's tri-state value: true, false or \"indeterminate\". */\nexport function Checkbox({\n  className,\n  checked,\n  ...props\n}: Omit<CheckboxPrimitive.Root.Props, \"checked\" | \"indeterminate\"> & { checked?: boolean | \"indeterminate\" }) {\n  const indeterminate = checked === \"indeterminate\";\n  const labelFor = useLabelFor(props.id);\n  return (\n    <CheckboxPrimitive.Root\n      aria-labelledby={props[\"aria-labelledby\"] ?? (props[\"aria-label\"] ? undefined : labelFor)}\n      className={cn(\n        \"peer flex size-4 shrink-0 items-center justify-center rounded-kit-sm border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-inverse data-[checked]:bg-kit-inverse data-[indeterminate]:border-kit-inverse data-[indeterminate]:bg-kit-inverse\",\n        className,\n      )}\n      checked={checked === undefined ? undefined : checked === true}\n      indeterminate={indeterminate}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"text-kit-fg-inverse\">\n        {indeterminate ? <IconMinus className=\"size-3\" stroke={3} /> : <IconCheck className=\"size-3\" stroke={3} />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\n/* ── Radio ──────────────────────────────────────────────────────────────── */\nexport const RadioGroup = RadioGroupPrimitive;\nexport function Radio({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"flex size-4 shrink-0 items-center justify-center rounded-full border border-kit-line-strong bg-kit-control-bg shadow-kit-xs transition-colors hover:border-[var(--kit-emphasis-line)] data-[checked]:border-kit-accent\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"block size-2 rounded-full bg-kit-accent\" />\n    </RadioPrimitive.Root>\n  );\n}\n\n/** Large selectable card used for choices (plans, project kinds, roles). */\nexport function ChoiceCard({\n  selected,\n  onSelect,\n  icon,\n  title,\n  description,\n  badge,\n  className,\n  children,\n}: {\n  selected: boolean;\n  onSelect: () => void;\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  badge?: React.ReactNode;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={selected}\n      className={cn(\n        \"focus-inset group relative flex w-full flex-col gap-1.5 rounded-kit-lg border bg-kit-control-bg px-3 py-2.5 text-left transition-[border-color,box-shadow,background-color] duration-150\", // inset: option cards often sit in a clipped, gapless list\n        selected\n          ? \"border-[var(--kit-emphasis-line)] shadow-kit-ring-field\"\n          : \"border-kit-line hover:border-kit-line-strong hover:shadow-kit-sm\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start gap-3\">\n        {icon ? (\n          <span className={cn(\"mt-0.5 flex shrink-0 items-center justify-center text-kit-fg-2 [&_svg]:size-4\", selected && \"text-kit-fg\")}>\n            {icon}\n          </span>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2 text-kit-sm font-medium text-kit-fg\">\n            {title}\n            {badge}\n          </div>\n          {description ? <p className=\"mt-0.5 text-[13px] leading-[18px] text-kit-fg-2\">{description}</p> : null}\n        </div>\n        <span\n          className={cn(\n            \"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected ? \"border-kit-inverse bg-kit-inverse text-kit-fg-inverse\" : \"border-kit-line-strong\",\n          )}\n        >\n          {selected ? <IconCheck className=\"size-2.5\" stroke={3.5} /> : null}\n        </span>\n      </div>\n      {children}\n    </button>\n  );\n}\n\n/** D15: 2–4 choices → one hairline list of compact rows. Wrap <ChoiceCard>s in it; they lose their own card chrome. */\nexport function ChoiceList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      role=\"group\"\n      className={cn(\n        \"flex flex-col divide-y divide-kit-line-subtle overflow-hidden rounded-kit-lg border border-kit-line\",\n        \"[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none [&>*]:hover:shadow-none [&>*]:hover:bg-kit-hover [&>[aria-pressed=true]]:bg-kit-selected [&>[aria-pressed=true]]:shadow-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/* ── Slider ─────────────────────────────────────────────────────────────── */\nexport function Slider({\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  label,\n  ...props\n}: Omit<SliderPrimitive.Root.Props<number | readonly number[]>, \"className\"> & {\n  className?: string;\n  /** accessible name for the thumb(s) */\n  label?: string;\n}) {\n  const name = ariaLabel ?? label;\n  const v = props.value ?? props.defaultValue ?? [0];\n  const thumbs = Array.isArray(v) ? v.length : 1;\n  return (\n    <SliderPrimitive.Root className={cn(\"w-full\", className)} {...props}>\n      <SliderPrimitive.Control className=\"relative flex h-5 w-full touch-none select-none items-center\">\n        {/* Figma §4.3 slider: 4px track, --fg-2 fill, 12px light thumb with a border (control-thumb lifts off the dark track) */}\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-full bg-[var(--kit-track-line)]\">\n          <SliderPrimitive.Indicator className=\"absolute h-full bg-kit-fg-2\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbs }, (_, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            index={thumbs > 1 ? i : undefined}\n            getAriaLabel={name ? () => name : undefined}\n            aria-labelledby={name ? undefined : ariaLabelledby}\n            className=\"block size-3 rounded-full border border-kit-line-strong bg-kit-control-thumb shadow-kit-md transition-transform hover:scale-110 has-[:focus-visible]:scale-110 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-kit-focus-ring has-[:focus-visible]:[outline-style:solid]\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\n/* V2's overlay <Tooltip> (side bottom, 350ms) for collapsed and icon-only segments, built on the shared ink layer. */\nfunction SegmentTooltip({ content, shortcut, children }: { content: React.ReactNode; shortcut?: string; children: React.ReactElement }) {\n  const hints = useShortcutHints();\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={350} render={children} />\n        <TooltipLayer side=\"bottom\">\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n          {shortcut && hints ? (\n            <kbd data-hint=\"shortcuts\" className=\"mt-px shrink-0 rounded-kit-sm bg-kit-ink-active px-1 font-kit-sans text-kit-2xs\">\n              {shortcut}\n            </kbd>\n          ) : null}\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\n/* ── Segmented ───────────────────────────────────────────────────────────\n   Two deliberate looks (founder: no \"AI-sloppy\" grey pills with counts inside):\n   • variant=\"tabs\"   (opt-in) — quiet text tabs, muted tabular count, 1.5px animated underline.\n                      Use for filters, view sections, panel tabs.\n   • variant=\"toggle\" (default) — slim hairline-bordered control, subtle selected fill, no shadow.\n                      Use for binary/ternary switches: list|grid, light|dark, desktop|tablet|mobile.\n   Pass `count` on items instead of baking numbers into labels.                                            */\nexport type SegmentedItem<T extends string> = {\n  value: T;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  count?: number;\n  tooltip?: React.ReactNode;\n  shortcut?: string;\n  name?: string;\n};\n\nexport function Segmented<T extends string>({\n  value,\n  onChange,\n  items,\n  size = \"md\",\n  className,\n  layoutId,\n  iconOnly,\n  collapseInactive,\n  variant,\n  bordered,\n  \"aria-label\": ariaLabel,\n}: {\n  \"aria-label\"?: string;\n  value: T;\n  onChange: (v: T) => void;\n  items: SegmentedItem<T>[];\n  /** Toggle variant: only the selected item shows its label; the others collapse to icon + tooltip. */\n  collapseInactive?: boolean;\n  size?: \"sm\" | \"md\";\n  className?: string;\n  layoutId?: string;\n  iconOnly?: boolean;\n  variant?: \"tabs\" | \"toggle\";\n  /** tabs only: draw a hairline under the whole tab row */\n  bordered?: boolean;\n}) {\n  const id = React.useId();\n  const v = variant ?? \"toggle\";\n  const reduceMotion = useReducedMotion();\n  const pillTransition = reduceMotion ? { duration: 0 } : PILL_SPRING;\n  const onKey = (e: React.KeyboardEvent, i: number) => {\n    const enabled = items.filter((x) => !x.disabled);\n    const idx = enabled.findIndex((x) => x.value === items[i].value);\n    const fwd = e.key === \"ArrowRight\" || e.key === \"ArrowDown\";\n    const back = e.key === \"ArrowLeft\" || e.key === \"ArrowUp\";\n    const next = fwd\n      ? enabled[(idx + 1) % enabled.length]\n      : back\n        ? enabled[(idx - 1 + enabled.length) % enabled.length]\n        : e.key === \"Home\"\n          ? enabled[0]\n          : e.key === \"End\"\n            ? enabled[enabled.length - 1]\n            : null;\n    if (next) {\n      e.preventDefault();\n      onChange(next.value);\n      // roving tabindex: keep keyboard focus on the newly selected item\n      const group = (e.currentTarget as HTMLElement).closest(\"[data-segmented]\");\n      requestAnimationFrame(() => group?.querySelector<HTMLElement>(`[data-seg-value=\"${CSS.escape(next.value)}\"]`)?.focus());\n    }\n  };\n\n  if (v === \"tabs\") {\n    return (\n      <div role=\"tablist\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-5\", bordered && \"border-b border-kit-line\", className)}>\n        {items.map((it, i) => {\n          const active = it.value === value;\n          return (\n            <button\n              key={it.value}\n              role=\"tab\"\n              type=\"button\"\n              data-seg-value={it.value}\n              aria-selected={active}\n              tabIndex={active ? 0 : -1}\n              disabled={it.disabled}\n              onKeyDown={(e) => onKey(e, i)}\n              onClick={() => onChange(it.value)}\n              className={cn(\n                \"group relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium tracking-[-0.01em] transition-colors duration-150 disabled:opacity-40 [&_svg]:size-4\",\n                size === \"sm\" ? \"h-7 text-kit-xs [&_svg]:size-3.5\" : \"h-8 text-kit-sm\",\n                active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:text-kit-fg-2\",\n              )}\n            >\n              {it.icon}\n              {iconOnly ? null : it.label}\n              {typeof it.count === \"number\" ? (\n                <span className={cn(\"text-kit-xs font-normal tabular-nums\", active ? \"text-kit-fg-2\" : \"text-kit-fg-4\")}>{it.count}</span>\n              ) : null}\n              {active ? (\n                <motion.span\n                  layoutId={layoutId ?? `tab-${id}`}\n                  transition={pillTransition}\n                  data-seg-indicator=\"\"\n                  className={cn(\"absolute inset-x-0 h-[1.5px] rounded-full bg-kit-fg\", bordered ? \"-bottom-px\" : \"bottom-0\")}\n                />\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    /* Toggle metrics (D29, founder): container 1px border + 2px padding, 2px between items, pill radius = container (6) − 2.\n       md items are 28px tall and icon-only items exactly 28×28; sm items 24px. Collapsing items keep the icon at the same\n       inset in both states (6px md / 5px sm) — only the label wrapper animates its width, with the icon→label gap inside it. */\n    <div role=\"radiogroup\" aria-label={ariaLabel} data-segmented className={cn(\"inline-flex items-center gap-[2px] rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}>\n      {items.map((it, i) => {\n        const active = it.value === value;\n        const sm = size === \"sm\";\n        const hasLabel = !iconOnly && it.label !== \"\" && it.label != null;\n        const showLabel = hasLabel && (!collapseInactive || active);\n        const btn = (\n          <button\n            key={it.value}\n            role=\"radio\"\n            type=\"button\"\n            data-seg-value={it.value}\n            aria-checked={active}\n            aria-label={iconOnly && typeof it.label === \"string\" ? it.label : collapseInactive ? it.name : undefined}\n            tabIndex={active ? 0 : -1}\n            disabled={it.disabled}\n            onKeyDown={(e) => onKey(e, i)}\n            onClick={() => onChange(it.value)}\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-kit-sm font-medium transition-[color,background-color,padding] duration-150 disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0\",\n              sm ? \"h-6 text-kit-xs [&_svg]:size-3.5\" : \"h-7 text-kit-sm\",\n              iconOnly || !hasLabel\n                ? sm ? \"w-6 px-0\" : \"w-7 px-0\"\n                : collapseInactive\n                  ? sm ? (active ? \"pl-[5px] pr-2\" : \"px-[5px]\") : active ? \"pl-1.5 pr-2.5\" : \"px-1.5\"\n                  : sm ? \"px-2\" : \"px-2.5\",\n              active ? \"text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\",\n            )}\n          >\n            {active ? (\n              <motion.span\n                layoutId={layoutId ?? `seg-${id}`}\n                transition={pillTransition}\n                data-seg-indicator=\"\"\n                className=\"absolute inset-0 rounded-kit-sm bg-kit-selected\"\n              />\n            ) : null}\n            <span className={cn(\"relative z-[1] inline-flex items-center\", !collapseInactive && \"gap-1.5\")}>\n              {it.icon}\n              {!hasLabel ? null : collapseInactive ? (\n                <AnimatePresence initial={false}>\n                  {showLabel ? (\n                    <motion.span\n                      key=\"label\"\n                      initial={{ width: 0, opacity: 0 }}\n                      animate={{ width: \"auto\", opacity: 1 }}\n                      exit={{ width: 0, opacity: 0 }}\n                      transition={reduceMotion ? { duration: 0 } : { duration: 0.18, ease: [0.2, 0, 0, 1] }}\n                      className=\"inline-flex overflow-hidden\"\n                    >\n                      <span className={sm ? \"pl-1\" : \"pl-1.5\"}>{it.label}</span>\n                    </motion.span>\n                  ) : null}\n                </AnimatePresence>\n              ) : (\n                it.label\n              )}\n              {typeof it.count === \"number\" ? <span className=\"text-kit-xs font-normal tabular-nums text-kit-fg-3\">{it.count}</span> : null}\n            </span>\n          </button>\n        );\n        if (collapseInactive && it.tooltip)\n          return (\n            <SegmentTooltip key={it.value} content={it.tooltip} shortcut={it.shortcut}>\n              {btn}\n            </SegmentTooltip>\n          );\n        return iconOnly && typeof it.label === \"string\" ? (\n          <SegmentTooltip key={it.value} content={it.label}>\n            {btn}\n          </SegmentTooltip>\n        ) : (\n          btn\n        );\n      })}\n    </div>\n  );\n}\n\n/* ── Toggle group (toolbar style) ───────────────────────────────────────\n   One choice (the default) is a radio group in WAI-ARIA: role=\"radiogroup\" with role=\"radio\" + aria-checked items, as\n   V2's Radix ToggleGroup type=\"single\" renders. `multiple` keeps group + aria-pressed (independent toggles). The arrow\n   keys rove the items either way (Base UI's composite). */\nconst ToggleGroupSingle = React.createContext(false);\nexport function ToggleGroup({ className, ...props }: Omit<ToggleGroupPrimitive.Props, \"className\"> & { className?: string }) {\n  const single = !props.multiple;\n  return (\n    <ToggleGroupSingle.Provider value={single}>\n      <ToggleGroupPrimitive\n        className={cn(\"inline-flex items-center gap-px rounded-kit-md border border-kit-line bg-kit-field-bg p-[2px]\", className)}\n        {...(single ? { role: \"radiogroup\" } : {})}\n        {...props}\n      />\n    </ToggleGroupSingle.Provider>\n  );\n}\nexport function ToggleItem({ className, ...props }: Omit<TogglePrimitive.Props, \"className\"> & { className?: string }) {\n  const single = React.useContext(ToggleGroupSingle);\n  return (\n    <TogglePrimitive\n      {...(single\n        ? { render: (p: React.ComponentProps<\"button\">, state: { pressed: boolean }) => <button {...p} role=\"radio\" aria-checked={state.pressed} aria-pressed={undefined} /> }\n        : {})}\n      className={cn(\n        \"inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded-kit-sm px-1.5 text-kit-xs font-medium text-kit-fg-3 transition-colors hover:bg-kit-hover hover:text-kit-fg data-[pressed]:bg-kit-selected data-[pressed]:text-kit-fg [&_svg]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Progress ──────────────────────────────────────────────────────────── */\nconst progressTones = {\n  success: \"bg-kit-success\",\n  accent: \"bg-kit-accent\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  // --bar-fill: ink in light, a quiet grey in dark (no near-white glare on a dark track)\n  ink: \"bg-[var(--kit-bar-fill)]\",\n  brand: \"bg-[var(--kit-bar-fill)]\",\n};\nexport function Progress({\n  value,\n  className,\n  tone = \"success\",\n  size = \"md\",\n  label = \"Progress\",\n}: {\n  value: number;\n  className?: string;\n  /** accessible name, e.g. \"AI credits used\" */\n  label?: string;\n  tone?: keyof typeof progressTones;\n  size?: \"sm\" | \"md\";\n}) {\n  const pct = Math.min(100, Math.max(0, value));\n  return (\n    <ProgressPrimitive.Root\n      value={pct}\n      aria-label={label}\n      className={cn(\n        \"relative w-full overflow-hidden rounded-full bg-[var(--kit-track)]\",\n        size === \"sm\" ? \"h-1\" : \"h-1.5\",\n        className,\n      )}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(\"h-full rounded-full transition-[width] duration-500 ease-[var(--kit-ease-out-soft)]\", progressTones[tone])}\n        style={{ width: `${pct}%` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/display.d.ts

@@ -30,12 +30,20 @@ export declare const statusMap: Record<PublishStatus, {
     label: string;
     tone: BadgeTone;
 }>;
-export declare function StatusPill({ status, label, className, size, }: {
+export declare function StatusPill({ status, label, tone, className, size, }: {
     status: PublishStatus;
     label?: string;
+    /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its "Edited" amber pill. Remove when it adopts D72. */
+    tone?: BadgeTone;
     className?: string;
     size?: BadgeSize;
 }): import("react/jsx-runtime").JSX.Element;
+export type MarkStatus = "published" | "changed" | "held" | "draft" | "scheduled" | "review" | "archived";
+export declare function StatusMark({ status, at, className }: {
+    status: MarkStatus;
+    at?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
 /** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
 export declare function colorFor(seed: string): string;
@@ -91,8 +99,7 @@ export declare function Separator({ vertical, className }: {
     vertical?: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
-export declare const SKELETON = "bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none";
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
 export declare function Skeleton({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;