@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/ui/shortcut-hint.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/ui/shortcut-hint.tsx
+var ShortcutHintsContext = React.createContext(false);
+var current = false;
+function ShortcutHintsProvider({ on = false, children }) {
+	React.useLayoutEffect(() => {
+		current = on;
+		if (typeof document !== "undefined") document.documentElement.dataset.shortcutHints = on ? "on" : "off";
+	}, [on]);
+	return /* @__PURE__ */ jsx(ShortcutHintsContext.Provider, {
+		value: on,
+		children
+	});
+}
+function useShortcutHints() {
+	return React.useContext(ShortcutHintsContext);
+}
+/** Non-hook read for toasts and other imperative call sites. */
+function shortcutHintsOn() {
+	return current;
+}
+function ShortcutHint({ as = "span", children, ...rest }) {
+	if (!useShortcutHints()) return null;
+	if (as === "fragment") return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(as, {
+		"data-hint": "shortcuts",
+		...rest,
+		children
+	});
+}
+//#endregion
+export { ShortcutHint, ShortcutHintsProvider, shortcutHintsOn, useShortcutHints };
+
+//# sourceMappingURL=shortcut-hint.js.map

package/dist/ui/shortcut-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-hint.js","names":[],"sources":["../../src/ui/shortcut-hint.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/* D44: keyboard-shortcut hints are OFF by default (founder: \"genuinely irritating\").\n   Account > Preferences > \"Show keyboard hints\" turns them back on; the host passes that preference to\n   <ShortcutHintsProvider on={...}>.\n   - <ShortcutHint>…</ShortcutHint> renders nothing while off (use it for every new inline hint strip).\n   - `as` keeps the wrapper element when the hint needs one (span by default; `fragment` for none).\n   - For markup you cannot wrap, add data-hint=\"shortcuts\": the provider mirrors the switch on\n     <html data-shortcut-hints=\"on|off\"> and the stylesheet hides it while off.\n   - For strings (toasts, placeholders) use useShortcutHints() / shortcutHintsOn().\n   NOT hints (always shown): menu shortcut columns, the command palette's key labels, the help sheet. */\n\nconst ShortcutHintsContext = React.createContext(false);\nlet current = false;\n\nexport function ShortcutHintsProvider({ on = false, children }: { on?: boolean; children: React.ReactNode }) {\n  React.useLayoutEffect(() => {\n    current = on;\n    if (typeof document !== \"undefined\") document.documentElement.dataset.shortcutHints = on ? \"on\" : \"off\";\n  }, [on]);\n  return <ShortcutHintsContext.Provider value={on}>{children}</ShortcutHintsContext.Provider>;\n}\n\nexport function useShortcutHints() {\n  return React.useContext(ShortcutHintsContext);\n}\n\n/** Non-hook read for toasts and other imperative call sites. */\nexport function shortcutHintsOn() {\n  return current;\n}\n\ntype Props = React.HTMLAttributes<HTMLElement> & { as?: \"span\" | \"div\" | \"p\" | \"li\" | \"fragment\"; children: React.ReactNode };\n\nexport function ShortcutHint({ as = \"span\", children, ...rest }: Props) {\n  const on = useShortcutHints();\n  if (!on) return null;\n  if (as === \"fragment\") return <>{children}</>;\n  const Tag = as as \"span\";\n  return (\n    <Tag data-hint=\"shortcuts\" {...rest}>\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":";;;AAYA,IAAM,uBAAuB,MAAM,cAAc,KAAK;AACtD,IAAI,UAAU;AAEd,SAAgB,sBAAsB,EAAE,KAAK,OAAO,YAAyD;CAC3G,MAAM,sBAAsB;EAC1B,UAAU;EACV,IAAI,OAAO,aAAa,aAAa,SAAS,gBAAgB,QAAQ,gBAAgB,KAAK,OAAO;CACpG,GAAG,CAAC,EAAE,CAAC;CACP,OAAO,oBAAC,qBAAqB,UAAtB;EAA+B,OAAO;EAAK;CAAwC,CAAA;AAC5F;AAEA,SAAgB,mBAAmB;CACjC,OAAO,MAAM,WAAW,oBAAoB;AAC9C;;AAGA,SAAgB,kBAAkB;CAChC,OAAO;AACT;AAIA,SAAgB,aAAa,EAAE,KAAK,QAAQ,UAAU,GAAG,QAAe;CAEtE,IAAI,CADO,iBACN,GAAI,OAAO;CAChB,IAAI,OAAO,YAAY,OAAO,oBAAA,UAAA,EAAG,SAAW,CAAA;CAE5C,OACE,oBAAC,IAAD;EAAK,aAAU;EAAY,GAAI;EAC5B;CACE,CAAA;AAET"}

package/dist/ui/spinner.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+declare const sizes: {
+    readonly xs: "size-3";
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+};
+declare const tones: {
+    readonly current: "";
+    readonly muted: "text-kit-fg-3";
+    readonly accent: "text-kit-accent";
+    readonly info: "text-kit-info";
+};
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 12 · 14 · 16 (default) · 20 */
+    size?: keyof typeof sizes;
+    variant?: "icon" | "ring";
+    /** icon colour; the ring keeps V2's line-strong / fg-2 pair */
+    tone?: keyof typeof tones;
+    /** set → role="status" named by it; unset → aria-hidden */
+    label?: string;
+}
+export declare function Spinner({ size, variant, tone, label, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/spinner.js

@@ -0,0 +1,42 @@
+import { cn } from "../lib/cn.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { IconLoader2 } from "@tabler/icons-react";
+//#region src/ui/spinner.tsx
+var sizes = {
+	xs: "size-3",
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5"
+};
+var tones = {
+	current: "",
+	muted: "text-kit-fg-3",
+	accent: "text-kit-accent",
+	info: "text-kit-info"
+};
+function Spinner({ size = "md", variant = "icon", tone = "current", label, className, ...rest }) {
+	const a11y = label ? {
+		role: "status",
+		"aria-label": label
+	} : { "aria-hidden": true };
+	const spin = "animate-spin motion-reduce:animate-none";
+	if (variant === "ring") return /* @__PURE__ */ jsx("span", {
+		...a11y,
+		...rest,
+		className: cn("inline-block shrink-0 rounded-full border-2 border-kit-line-strong border-t-kit-fg-2", sizes[size], spin, className)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		...a11y,
+		...rest,
+		className: cn("inline-flex shrink-0", tones[tone], className),
+		children: /* @__PURE__ */ jsx(IconLoader2, {
+			"aria-hidden": true,
+			className: cn(sizes[size], spin)
+		})
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/ui/spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconLoader2 } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\n\n/* ── Spinner ─────────────────────────────────────────────────────────────\n   V2 has no Spinner component, only the pattern (kit-ports-spec.md §1):\n   • icon: tabler IconLoader2 + animate-spin (button.tsx:73 and ~25 call sites; size-4 text-fg-3 the most common)\n   • ring: size-5 border-2 border-line-strong border-t-fg-2 (schema/index.tsx:355, the Suspense panel fallback)\n   Decorative by default (the host says what is loading, e.g. Button's aria-busy); `label` makes it a polite status. */\nconst sizes = { xs: \"size-3\", sm: \"size-3.5\", md: \"size-4\", lg: \"size-5\" } as const;\nconst tones = { current: \"\", muted: \"text-kit-fg-3\", accent: \"text-kit-accent\", info: \"text-kit-info\" } as const;\n\nexport interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** 12 · 14 · 16 (default) · 20 */\n  size?: keyof typeof sizes;\n  variant?: \"icon\" | \"ring\";\n  /** icon colour; the ring keeps V2's line-strong / fg-2 pair */\n  tone?: keyof typeof tones;\n  /** set → role=\"status\" named by it; unset → aria-hidden */\n  label?: string;\n}\n\nexport function Spinner({ size = \"md\", variant = \"icon\", tone = \"current\", label, className, ...rest }: SpinnerProps) {\n  const a11y = label ? { role: \"status\", \"aria-label\": label } : { \"aria-hidden\": true };\n  const spin = \"animate-spin motion-reduce:animate-none\";\n  if (variant === \"ring\") {\n    return (\n      <span\n        {...a11y}\n        {...rest}\n        className={cn(\"inline-block shrink-0 rounded-full border-2 border-kit-line-strong border-t-kit-fg-2\", sizes[size], spin, className)}\n      />\n    );\n  }\n  return (\n    <span {...a11y} {...rest} className={cn(\"inline-flex shrink-0\", tones[tone], className)}>\n      <IconLoader2 aria-hidden className={cn(sizes[size], spin)} />\n    </span>\n  );\n}\n"],"mappings":";;;;;AASA,IAAM,QAAQ;CAAE,IAAI;CAAU,IAAI;CAAY,IAAI;CAAU,IAAI;AAAS;AACzE,IAAM,QAAQ;CAAE,SAAS;CAAI,OAAO;CAAiB,QAAQ;CAAmB,MAAM;AAAgB;AAYtG,SAAgB,QAAQ,EAAE,OAAO,MAAM,UAAU,QAAQ,OAAO,WAAW,OAAO,WAAW,GAAG,QAAsB;CACpH,MAAM,OAAO,QAAQ;EAAE,MAAM;EAAU,cAAc;CAAM,IAAI,EAAE,eAAe,KAAK;CACrF,MAAM,OAAO;CACb,IAAI,YAAY,QACd,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,GAAG,wFAAwF,MAAM,OAAO,MAAM,SAAS;CACnI,CAAA;CAGL,OACE,oBAAC,QAAD;EAAM,GAAI;EAAM,GAAI;EAAM,WAAW,GAAG,wBAAwB,MAAM,OAAO,SAAS;EACpF,UAAA,oBAAC,aAAD;GAAa,eAAA;GAAY,WAAW,GAAG,MAAM,OAAO,IAAI;EAAI,CAAA;CACxD,CAAA;AAEV"}

package/dist/ui/split-button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SPLIT BUTTON: one action plus its menu, as ONE visual unit (founder, D57: one element per job).
+ *
+ *   <SplitButton label="Publish" icon={<IconFileUpload />} onClick={publish} menuLabel="More publish options">
+ *     <MenuItem …>Schedule…</MenuItem>
+ *   </SplitButton>
+ *
+ *  - Two segments, same height, a 1px divider between them, rounded on the outer edge only.
+ *  - Each segment is its own button with its own keyboard focus ring (the global :focus-visible outline).
+ *  - The chevron segment carries aria-haspopup="menu" and `menuLabel`. No children → no chevron (the primary stands alone).
+ *  - Tokens only (D56): the primary variant is bg-inverse / fg-inverse; secondary is the bordered control.
+ */
+import * as React from "react";
+export interface SplitButtonProps {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    /** Menu items for the chevron segment. Omit (or pass nothing renderable) to hide the chevron. */
+    children?: React.ReactNode;
+    /** Accessible name of the chevron segment. */
+    menuLabel?: string;
+    variant?: "primary" | "secondary";
+    size?: "sm" | "md";
+    disabled?: boolean;
+    /** Menu placement (footers open upward). */
+    side?: "top" | "bottom";
+    menuClassName?: string;
+    /** The menu opened or closed (a caller that reads data only while the menu is open). */
+    onMenuOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/split-button.js

@@ -0,0 +1,60 @@
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "./button.js";
+import { Menu, MenuContent, MenuTrigger } from "./overlay.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronDown } from "@tabler/icons-react";
+//#region src/ui/split-button.tsx
+/**
+* SPLIT BUTTON: one action plus its menu, as ONE visual unit (founder, D57: one element per job).
+*
+*   <SplitButton label="Publish" icon={<IconFileUpload />} onClick={publish} menuLabel="More publish options">
+*     <MenuItem …>Schedule…</MenuItem>
+*   </SplitButton>
+*
+*  - Two segments, same height, a 1px divider between them, rounded on the outer edge only.
+*  - Each segment is its own button with its own keyboard focus ring (the global :focus-visible outline).
+*  - The chevron segment carries aria-haspopup="menu" and `menuLabel`. No children → no chevron (the primary stands alone).
+*  - Tokens only (D56): the primary variant is bg-inverse / fg-inverse; secondary is the bordered control.
+*/
+var SplitButton = React.forwardRef(function SplitButton({ label, icon, onClick, children, menuLabel = "More options", variant = "primary", size = "md", disabled, side = "top", menuClassName, onMenuOpenChange, className }, ref) {
+	const hasMenu = React.Children.toArray(children).some(Boolean);
+	const divider = variant === "primary" ? "before:bg-kit-fg-inverse/25" : "before:bg-kit-line-strong";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"data-slot": "split-button",
+		className: cn("inline-flex shrink-0 items-stretch", className),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			onClick,
+			className: cn(buttonVariants({
+				variant,
+				size
+			}), hasMenu && "rounded-r-none", "pl-2.5 pr-3"),
+			children: [icon, label]
+		}), hasMenu ? /* @__PURE__ */ jsxs(Menu, {
+			onOpenChange: onMenuOpenChange,
+			children: [/* @__PURE__ */ jsx(MenuTrigger, {
+				disabled,
+				"aria-label": menuLabel,
+				"aria-haspopup": "menu",
+				className: cn(buttonVariants({
+					variant,
+					size
+				}), "relative rounded-l-none px-0", size === "sm" ? "w-7" : "w-8", variant === "secondary" && "border-l-0", "before:absolute before:inset-y-1.5 before:left-0 before:w-px before:content-['']", divider),
+				children: /* @__PURE__ */ jsx(IconChevronDown, { stroke: 1.75 })
+			}), /* @__PURE__ */ jsx(MenuContent, {
+				align: "end",
+				side,
+				className: cn("w-60", menuClassName),
+				children
+			})]
+		}) : null]
+	});
+});
+//#endregion
+export { SplitButton };
+
+//# sourceMappingURL=split-button.js.map

package/dist/ui/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["/**\n * SPLIT BUTTON: one action plus its menu, as ONE visual unit (founder, D57: one element per job).\n *\n *   <SplitButton label=\"Publish\" icon={<IconFileUpload />} onClick={publish} menuLabel=\"More publish options\">\n *     <MenuItem …>Schedule…</MenuItem>\n *   </SplitButton>\n *\n *  - Two segments, same height, a 1px divider between them, rounded on the outer edge only.\n *  - Each segment is its own button with its own keyboard focus ring (the global :focus-visible outline).\n *  - The chevron segment carries aria-haspopup=\"menu\" and `menuLabel`. No children → no chevron (the primary stands alone).\n *  - Tokens only (D56): the primary variant is bg-inverse / fg-inverse; secondary is the bordered control.\n */\nimport * as React from \"react\";\nimport { IconChevronDown } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { Menu, MenuContent, MenuTrigger } from \"./overlay\";\n\nexport interface SplitButtonProps {\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  onClick?: () => void;\n  /** Menu items for the chevron segment. Omit (or pass nothing renderable) to hide the chevron. */\n  children?: React.ReactNode;\n  /** Accessible name of the chevron segment. */\n  menuLabel?: string;\n  variant?: \"primary\" | \"secondary\";\n  size?: \"sm\" | \"md\";\n  disabled?: boolean;\n  /** Menu placement (footers open upward). */\n  side?: \"top\" | \"bottom\";\n  menuClassName?: string;\n  /** The menu opened or closed (a caller that reads data only while the menu is open). */\n  onMenuOpenChange?: (open: boolean) => void;\n  className?: string;\n}\n\nexport const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(function SplitButton(\n  { label, icon, onClick, children, menuLabel = \"More options\", variant = \"primary\", size = \"md\", disabled, side = \"top\", menuClassName, onMenuOpenChange, className },\n  ref,\n) {\n  const hasMenu = React.Children.toArray(children).some(Boolean);\n  const divider = variant === \"primary\" ? \"before:bg-kit-fg-inverse/25\" : \"before:bg-kit-line-strong\";\n  return (\n    <div ref={ref} role=\"group\" data-slot=\"split-button\" className={cn(\"inline-flex shrink-0 items-stretch\", className)}>\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={onClick}\n        className={cn(buttonVariants({ variant, size }), hasMenu && \"rounded-r-none\", \"pl-2.5 pr-3\")}\n      >\n        {icon}\n        {label}\n      </button>\n      {hasMenu ? (\n        <Menu onOpenChange={onMenuOpenChange}>\n          <MenuTrigger\n            disabled={disabled}\n            aria-label={menuLabel}\n            aria-haspopup=\"menu\"\n            className={cn(\n              buttonVariants({ variant, size }),\n              \"relative rounded-l-none px-0\",\n              size === \"sm\" ? \"w-7\" : \"w-8\",\n              variant === \"secondary\" && \"border-l-0\",\n              // the 1px divider between the segments (inset top and bottom, like the production control)\n              \"before:absolute before:inset-y-1.5 before:left-0 before:w-px before:content-['']\",\n              divider,\n            )}\n          >\n            <IconChevronDown stroke={1.75} />\n          </MenuTrigger>\n          <MenuContent align=\"end\" side={side} className={cn(\"w-60\", menuClassName)}>\n            {children}\n          </MenuContent>\n        </Menu>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,IAAa,cAAc,MAAM,WAA6C,SAAS,YACrF,EAAE,OAAO,MAAM,SAAS,UAAU,YAAY,gBAAgB,UAAU,WAAW,OAAO,MAAM,UAAU,OAAO,OAAO,eAAe,kBAAkB,aACzJ,KACA;CACA,MAAM,UAAU,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO;CAC7D,MAAM,UAAU,YAAY,YAAY,gCAAgC;CACxE,OACE,qBAAC,OAAD;EAAU;EAAK,MAAK;EAAQ,aAAU;EAAe,WAAW,GAAG,sCAAsC,SAAS;EAAlH,UAAA,CACE,qBAAC,UAAD;GACE,MAAK;GACK;GACD;GACT,WAAW,GAAG,eAAe;IAAE;IAAS;GAAK,CAAC,GAAG,WAAW,kBAAkB,aAAa;GAJ7F,UAAA,CAMG,MACA,KACK;EACP,CAAA,GAAA,UACC,qBAAC,MAAD;GAAM,cAAc;GAApB,UAAA,CACE,oBAAC,aAAD;IACY;IACV,cAAY;IACZ,iBAAc;IACd,WAAW,GACT,eAAe;KAAE;KAAS;IAAK,CAAC,GAChC,gCACA,SAAS,OAAO,QAAQ,OACxB,YAAY,eAAe,cAE3B,oFACA,OACF;IAEA,UAAA,oBAAC,iBAAD,EAAiB,QAAQ,KAAO,CAAA;GACrB,CAAA,GACb,oBAAC,aAAD;IAAa,OAAM;IAAY;IAAM,WAAW,GAAG,QAAQ,aAAa;IACrE;GACU,CAAA,CACT;EACJ,CAAA,IAAA,IACD;;AAET,CAAC"}

package/dist/ui/surfaces.d.ts

@@ -0,0 +1,23 @@
+/**
+ * V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),
+ * as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark
+ * (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.
+ *
+ * Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here
+ * therefore carries KIT_SCOPE (data-kit-scope) itself.
+ */
+export declare const KIT_SCOPE: {
+    readonly "data-kit-scope": "";
+};
+/** .glass: popovers, menus, hover cards. */
+export declare const GLASS = "bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]";
+/** .glass-ink: tooltips (ink is dark in both themes). */
+export declare const INK = "bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]";
+/** --ink-active: the kbd chip on ink. */
+export declare const INK_ACTIVE = "bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]";
+/** --surface-raised: dialogs, sheets, expanded editors. */
+export declare const SURFACE_RAISED = "bg-[var(--kit-surface-raised)]";
+/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */
+export declare const FLOATING_LINE = "border-kit-line [.dark_&]:border-kit-line-strong";
+/** .bg-tray + --tray-line: the action tray under a dialog. */
+export declare const TRAY = "bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]";

package/dist/ui/surfaces.js

@@ -0,0 +1,26 @@
+//#region src/ui/surfaces.ts
+/**
+* V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),
+* as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark
+* (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.
+*
+* Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here
+* therefore carries KIT_SCOPE (data-kit-scope) itself.
+*/
+var KIT_SCOPE = { "data-kit-scope": "" };
+/** .glass: popovers, menus, hover cards. */
+var GLASS = "bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]";
+/** .glass-ink: tooltips (ink is dark in both themes). */
+var INK = "bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]";
+/** --ink-active: the kbd chip on ink. */
+var INK_ACTIVE = "bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]";
+/** --surface-raised: dialogs, sheets, expanded editors. */
+var SURFACE_RAISED = "bg-[var(--kit-surface-raised)]";
+/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */
+var FLOATING_LINE = "border-kit-line [.dark_&]:border-kit-line-strong";
+/** .bg-tray + --tray-line: the action tray under a dialog. */
+var TRAY = "bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]";
+//#endregion
+export { FLOATING_LINE, GLASS, INK, INK_ACTIVE, KIT_SCOPE, SURFACE_RAISED, TRAY };
+
+//# sourceMappingURL=surfaces.js.map

package/dist/ui/surfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaces.js","names":[],"sources":["../../src/ui/surfaces.ts"],"sourcesContent":["/**\n * V2's floating-surface recipes (src/styles/index.css .glass, .glass-ink, .bg-tray, --surface-raised, --floating-line),\n * as class strings. kit.css has no tokens for these yet, so the V2 values are written out here, light and dark\n * (`[.dark_&]` = the app is dark). Each one is a single constant so the integrator can swap it for a kit token later.\n *\n * Portalled layers render outside [data-kit-scope], where every --kit-* value is undefined. Every layer root here\n * therefore carries KIT_SCOPE (data-kit-scope) itself.\n */\nexport const KIT_SCOPE = { \"data-kit-scope\": \"\" } as const;\n\n/** .glass: popovers, menus, hover cards. */\nexport const GLASS =\n  \"bg-kit-surface border-kit-line shadow-[0_1px_2px_rgb(16_16_16/0.04),0_8px_24px_-6px_rgb(16_16_16/0.12)] [.dark_&]:bg-[#252528] [.dark_&]:border-kit-line-strong [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.04),0_12px_32px_-8px_oklch(0.12_0.01_286/0.5)]\";\n\n/** .glass-ink: tooltips (ink is dark in both themes). */\nexport const INK =\n  \"bg-[#1c1c1e] text-[#f5f5f5] shadow-[0_10px_28px_-8px_rgb(0_0_0/0.35)] [.dark_&]:bg-[#3d3d40] [.dark_&]:text-[#ececef] [.dark_&]:shadow-[inset_0_1px_0_oklch(1_0_0/0.06),0_0_0_1px_rgb(255_255_255/0.12),0_14px_36px_-8px_oklch(0.12_0.01_286/0.55)]\";\n\n/** --ink-active: the kbd chip on ink. */\nexport const INK_ACTIVE = \"bg-[rgb(255_255_255/0.15)] [.dark_&]:bg-[rgb(255_255_255/0.13)]\";\n\n/** --surface-raised: dialogs, sheets, expanded editors. */\nexport const SURFACE_RAISED = \"bg-[var(--kit-surface-raised)]\";\n\n/** --floating-line: the edge of modals, sheets, expanded editors (= line; dark = line-strong). */\nexport const FLOATING_LINE = \"border-kit-line [.dark_&]:border-kit-line-strong\";\n\n/** .bg-tray + --tray-line: the action tray under a dialog. */\nexport const TRAY =\n  \"bg-kit-surface bg-[linear-gradient(180deg,rgb(216_216_216/0)_16.105%,rgb(216_216_216/0.6)_123.57%)] border-[#ededed] [.dark_&]:bg-[linear-gradient(180deg,oklch(0.32_0.005_286/0)_16.105%,oklch(0.32_0.005_286/0.6)_123.57%)] [.dark_&]:border-[#3a3a3d]\";\n"],"mappings":";;;;;;;;;AAQA,IAAa,YAAY,EAAE,kBAAkB,GAAG;;AAGhD,IAAa,QACX;;AAGF,IAAa,MACX;;AAGF,IAAa,aAAa;;AAG1B,IAAa,iBAAiB;;AAG9B,IAAa,gBAAgB;;AAG7B,IAAa,OACX"}

package/dist/ui/tab.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface TabsProps<T extends string> {
+    value?: T;
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function Tabs<T extends string>({ value, defaultValue, onValueChange, className, children }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface TabListProps {
+    "aria-label"?: string;
+    size?: "sm" | "md";
+    /** draw a hairline under the whole tab row (the underline then sits on it) */
+    bordered?: boolean;
+    /** framer layoutId for the underline; defaults to one per list */
+    layoutId?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function TabList({ "aria-label": ariaLabel, size, bordered, layoutId, className, children }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps<T extends string> {
+    value: T;
+    icon?: React.ReactNode;
+    /** a muted tabular count after the label; pass it here, never baked into the label */
+    count?: number;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function Tab<T extends string>({ value, icon, count, disabled, className, children }: TabProps<T>): import("react/jsx-runtime").JSX.Element;
+export interface TabPanelProps<T extends string> {
+    value: T;
+    /** keep the inactive panel in the DOM (hidden); V2 renders only the active one */
+    keepMounted?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function TabPanel<T extends string>({ value, keepMounted, className, children }: TabPanelProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/tab.js

@@ -0,0 +1,87 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "framer-motion";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/ui/tab.tsx
+var PILL_SPRING = {
+	type: "spring",
+	stiffness: 520,
+	damping: 42
+};
+var ListLookContext = React.createContext({
+	size: "md",
+	bordered: false,
+	layoutId: "kit-tab"
+});
+function Tabs({ value, defaultValue, onValueChange, className, children }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		value,
+		defaultValue,
+		onValueChange: (v) => onValueChange?.(v),
+		className,
+		children
+	});
+}
+function TabList({ "aria-label": ariaLabel, size = "md", bordered = false, layoutId, className, children }) {
+	const id = React.useId();
+	const look = React.useMemo(() => ({
+		size,
+		bordered,
+		layoutId: layoutId ?? `tab-${id}`
+	}), [
+		size,
+		bordered,
+		layoutId,
+		id
+	]);
+	return /* @__PURE__ */ jsx(ListLookContext.Provider, {
+		value: look,
+		children: /* @__PURE__ */ jsx(Tabs$1.List, {
+			"aria-label": ariaLabel,
+			activateOnFocus: true,
+			loopFocus: true,
+			className: cn("inline-flex items-center gap-5", bordered && "border-b border-kit-line", className),
+			children
+		})
+	});
+}
+function Tab({ value, icon, count, disabled, className, children }) {
+	const { size, bordered, layoutId } = React.useContext(ListLookContext);
+	const reduceMotion = useReducedMotion();
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		value,
+		disabled,
+		className: cn("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 data-[disabled]:opacity-40 [&_svg]:size-4", size === "sm" ? "h-7 text-kit-xs [&_svg]:size-3.5" : "h-8 text-kit-sm", "text-kit-fg-3 not-data-[active]:hover:text-kit-fg-2 data-[active]:text-kit-fg", className),
+		render: (props, state) => /* @__PURE__ */ jsxs("button", {
+			...props,
+			children: [
+				icon,
+				props.children,
+				typeof count === "number" ? /* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs font-normal tabular-nums text-kit-fg-4 group-data-[active]:text-kit-fg-2",
+					children: count
+				}) : null,
+				state.active ? /* @__PURE__ */ jsx(motion.span, {
+					layoutId,
+					transition: reduceMotion ? { duration: 0 } : PILL_SPRING,
+					"data-tab-indicator": "",
+					className: cn("absolute inset-x-0 h-[1.5px] rounded-full bg-kit-fg", bordered ? "-bottom-px" : "bottom-0")
+				}) : null
+			]
+		}),
+		children
+	});
+}
+function TabPanel({ value, keepMounted, className, children }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		value,
+		keepMounted,
+		className,
+		children
+	});
+}
+//#endregion
+export { Tab, TabList, TabPanel, Tabs };
+
+//# sourceMappingURL=tab.js.map

package/dist/ui/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","names":[],"sources":["../../src/ui/tab.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { motion, useReducedMotion } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\n\n/* ── Tabs ────────────────────────────────────────────────────────────────\n   Real tabs (tablist + tab + tabpanel with aria-controls / aria-labelledby) in the look of V2's\n   Segmented variant=\"tabs\" (controls.tsx:179-273): quiet text tabs, muted tabular count, a 1.5px underline that springs\n   between tabs (layoutId, stiffness 520 / damping 42, instant under reduced motion). Selection follows focus and the\n   arrows wrap, as V2's onKey does. kit-ports-spec.md §3. Segmented stays the tabs look for rows that have no panels. */\nconst PILL_SPRING = { type: \"spring\", stiffness: 520, damping: 42 } as const;\n\ntype ListLook = { size: \"sm\" | \"md\"; bordered: boolean; layoutId: string };\nconst ListLookContext = React.createContext<ListLook>({ size: \"md\", bordered: false, layoutId: \"kit-tab\" });\n\nexport interface TabsProps<T extends string> {\n  value?: T;\n  defaultValue?: T;\n  onValueChange?: (value: T) => void;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function Tabs<T extends string>({ value, defaultValue, onValueChange, className, children }: TabsProps<T>) {\n  return (\n    <TabsPrimitive.Root value={value} defaultValue={defaultValue} onValueChange={(v) => onValueChange?.(v as T)} className={className}>\n      {children}\n    </TabsPrimitive.Root>\n  );\n}\n\nexport interface TabListProps {\n  \"aria-label\"?: string;\n  size?: \"sm\" | \"md\";\n  /** draw a hairline under the whole tab row (the underline then sits on it) */\n  bordered?: boolean;\n  /** framer layoutId for the underline; defaults to one per list */\n  layoutId?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function TabList({ \"aria-label\": ariaLabel, size = \"md\", bordered = false, layoutId, className, children }: TabListProps) {\n  const id = React.useId();\n  const look = React.useMemo(() => ({ size, bordered, layoutId: layoutId ?? `tab-${id}` }), [size, bordered, layoutId, id]);\n  return (\n    <ListLookContext.Provider value={look}>\n      <TabsPrimitive.List\n        aria-label={ariaLabel}\n        activateOnFocus\n        loopFocus\n        className={cn(\"inline-flex items-center gap-5\", bordered && \"border-b border-kit-line\", className)}\n      >\n        {children}\n      </TabsPrimitive.List>\n    </ListLookContext.Provider>\n  );\n}\n\nexport interface TabProps<T extends string> {\n  value: T;\n  icon?: React.ReactNode;\n  /** a muted tabular count after the label; pass it here, never baked into the label */\n  count?: number;\n  disabled?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function Tab<T extends string>({ value, icon, count, disabled, className, children }: TabProps<T>) {\n  const { size, bordered, layoutId } = React.useContext(ListLookContext);\n  const reduceMotion = useReducedMotion();\n  return (\n    <TabsPrimitive.Tab\n      value={value}\n      disabled={disabled}\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 data-[disabled]:opacity-40 [&_svg]:size-4\",\n        size === \"sm\" ? \"h-7 text-kit-xs [&_svg]:size-3.5\" : \"h-8 text-kit-sm\",\n        \"text-kit-fg-3 not-data-[active]:hover:text-kit-fg-2 data-[active]:text-kit-fg\",\n        className,\n      )}\n      render={(props, state) => (\n        <button {...props}>\n          {icon}\n          {props.children}\n          {typeof count === \"number\" ? (\n            <span className=\"text-kit-xs font-normal tabular-nums text-kit-fg-4 group-data-[active]:text-kit-fg-2\">{count}</span>\n          ) : null}\n          {state.active ? (\n            <motion.span\n              layoutId={layoutId}\n              transition={reduceMotion ? { duration: 0 } : PILL_SPRING}\n              data-tab-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      {children}\n    </TabsPrimitive.Tab>\n  );\n}\n\nexport interface TabPanelProps<T extends string> {\n  value: T;\n  /** keep the inactive panel in the DOM (hidden); V2 renders only the active one */\n  keepMounted?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function TabPanel<T extends string>({ value, keepMounted, className, children }: TabPanelProps<T>) {\n  return (\n    <TabsPrimitive.Panel value={value} keepMounted={keepMounted} className={className}>\n      {children}\n    </TabsPrimitive.Panel>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAM,cAAc;CAAE,MAAM;CAAU,WAAW;CAAK,SAAS;AAAG;AAGlE,IAAM,kBAAkB,MAAM,cAAwB;CAAE,MAAM;CAAM,UAAU;CAAO,UAAU;AAAU,CAAC;AAU1G,SAAgB,KAAuB,EAAE,OAAO,cAAc,eAAe,WAAW,YAA0B;CAChH,OACE,oBAAC,OAAc,MAAf;EAA2B;EAAqB;EAAc,gBAAgB,MAAM,gBAAgB,CAAM;EAAc;EACrH;CACiB,CAAA;AAExB;AAaA,SAAgB,QAAQ,EAAE,cAAc,WAAW,OAAO,MAAM,WAAW,OAAO,UAAU,WAAW,YAA0B;CAC/H,MAAM,KAAK,MAAM,MAAM;CACvB,MAAM,OAAO,MAAM,eAAe;EAAE;EAAM;EAAU,UAAU,YAAY,OAAO;CAAK,IAAI;EAAC;EAAM;EAAU;EAAU;CAAE,CAAC;CACxH,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC/B,UAAA,oBAAC,OAAc,MAAf;GACE,cAAY;GACZ,iBAAA;GACA,WAAA;GACA,WAAW,GAAG,kCAAkC,YAAY,4BAA4B,SAAS;GAEhG;EACiB,CAAA;CACI,CAAA;AAE9B;AAYA,SAAgB,IAAsB,EAAE,OAAO,MAAM,OAAO,UAAU,WAAW,YAAyB;CACxG,MAAM,EAAE,MAAM,UAAU,aAAa,MAAM,WAAW,eAAe;CACrE,MAAM,eAAe,iBAAiB;CACtC,OACE,oBAAC,OAAc,KAAf;EACS;EACG;EACV,WAAW,GACT,gNACA,SAAS,OAAO,qCAAqC,mBACrD,iFACA,SACF;EACA,SAAS,OAAO,UACd,qBAAC,UAAD;GAAQ,GAAI;GAAZ,UAAA;IACG;IACA,MAAM;IACN,OAAO,UAAU,WAChB,oBAAC,QAAD;KAAM,WAAU;KAAwF,UAAA;IAAY,CAAA,IAClH;IACH,MAAM,SACL,oBAAC,OAAO,MAAR;KACY;KACV,YAAY,eAAe,EAAE,UAAU,EAAE,IAAI;KAC7C,sBAAmB;KACnB,WAAW,GAAG,uDAAuD,WAAW,eAAe,UAAU;IAC1G,CAAA,IACC;GACE;;EAGT;CACgB,CAAA;AAEvB;AAUA,SAAgB,SAA2B,EAAE,OAAO,aAAa,WAAW,YAA8B;CACxG,OACE,oBAAC,OAAc,OAAf;EAA4B;EAAoB;EAAwB;EACrE;CACkB,CAAA;AAEzB"}

package/dist/ui/toast.d.ts

@@ -0,0 +1,20 @@
+import type { KitToast, KitToastOptions } from "../context";
+export declare const kitToastManager: import("@base-ui/react").ToastManager<any>;
+/** KitServices.toast backed by kitToastManager, plus V2's other sonner calls. */
+export declare const kitToast: KitToast & {
+    error: (message: string, opts?: KitToastOptions) => void;
+    warning: (message: string, opts?: KitToastOptions) => void;
+    info: (message: string, opts?: KitToastOptions) => void;
+    /** stays until dismissed or updated; returns its id */
+    loading: (message: string, opts?: KitToastOptions) => string;
+    dismiss: (id?: string) => void;
+};
+export interface KitToasterProps {
+    /** toasts kept on screen (sonner visibleToasts) */
+    limit?: number;
+    /** ms before a toast closes; a toast's own `duration` wins; loading toasts stay */
+    timeout?: number;
+    className?: string;
+}
+/** Mount once per document, at the root. Its layer carries KIT_SCOPE (a portal sits outside every kit island). */
+export declare function KitToaster({ limit, timeout, className }: KitToasterProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/toast.js

@@ -0,0 +1,115 @@
+import { cn } from "../lib/cn.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import { Spinner } from "./spinner.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/ui/toast.tsx
+var kitToastManager = Toast.createToastManager();
+var seq = 0;
+function add(type, message, opts = {}) {
+	const id = `kit-toast-${++seq}`;
+	const { action } = opts;
+	return kitToastManager.add({
+		id,
+		type,
+		title: message,
+		description: opts.description,
+		timeout: opts.duration,
+		priority: type === "error" ? "high" : "low",
+		data: { icon: opts.icon },
+		actionProps: action ? {
+			children: action.label,
+			onClick: () => (action.onClick(), kitToastManager.close(id))
+		} : void 0
+	});
+}
+/** KitServices.toast backed by kitToastManager, plus V2's other sonner calls. */
+var kitToast = Object.assign((message, opts) => void add("default", message, opts), {
+	success: (message, opts) => void add("success", message, opts),
+	error: (message, opts) => void add("error", message, opts),
+	warning: (message, opts) => void add("warning", message, opts),
+	info: (message, opts) => void add("info", message, opts),
+	loading: (message, opts) => add("loading", message, opts),
+	dismiss: (id) => kitToastManager.close(id)
+});
+function SonnerGlyph({ viewBox, d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox,
+		fill: "currentColor",
+		width: "16",
+		height: "16",
+		"data-toast-glyph": "",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			d,
+			clipRule: "evenodd"
+		})
+	});
+}
+var TYPE_ICON = {
+	success: /* @__PURE__ */ jsx(SonnerGlyph, {
+		viewBox: "0 0 20 20",
+		d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+	}),
+	warning: /* @__PURE__ */ jsx(SonnerGlyph, {
+		viewBox: "0 0 24 24",
+		d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+	}),
+	info: /* @__PURE__ */ jsx(SonnerGlyph, {
+		viewBox: "0 0 20 20",
+		d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+	}),
+	error: /* @__PURE__ */ jsx(SonnerGlyph, {
+		viewBox: "0 0 20 20",
+		d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+	}),
+	loading: /* @__PURE__ */ jsx(Spinner, { size: "md" })
+};
+var VIEWPORT = "fixed bottom-[var(--toast-offset-bottom,16px)] right-4 z-[var(--z-toast,500)] w-[356px] outline-none max-[600px]:left-4 max-[600px]:w-auto";
+var ROOT = cn("[--gap:8px] [--scale:calc(1-var(--toast-index)*0.05)] [--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--gap)*-1+var(--toast-swipe-movement-y))]", "absolute bottom-0 right-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom select-none", "h-[var(--height)] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-var(--toast-index)*var(--gap)))_scale(var(--scale))]", "data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateY(100%)]", "data-[ending-style]:opacity-0 data-[limited]:opacity-0", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(100%)]", "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%))]", "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%))_translateY(var(--offset-y))]", "[transition:transform_400ms_ease,opacity_400ms,height_400ms,box-shadow_200ms]", "after:absolute after:left-0 after:top-full after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "flex items-center rounded-kit-xl border border-kit-tray-line bg-kit-surface-raised bg-clip-padding p-4 font-sans text-kit-sm text-kit-fg shadow-[0_4px_12px_rgba(0,0,0,0.1)] [.dark_&]:border-kit-line-strong");
+var CONTENT = "flex min-w-0 flex-1 items-center gap-1.5 transition-opacity duration-[400ms] data-[behind]:opacity-0 data-[expanded]:opacity-100";
+var ACTION = "ml-auto inline-flex h-6 shrink-0 cursor-pointer items-center rounded-kit-md bg-kit-inverse px-2 text-kit-xs font-medium text-kit-fg-inverse hover:bg-kit-inverse-hover [transition:opacity_400ms,box-shadow_200ms,background-color_150ms]";
+function KitToastItem({ toast }) {
+	const icon = toast.data?.icon ?? TYPE_ICON[toast.type ?? ""];
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		toast,
+		className: ROOT,
+		children: /* @__PURE__ */ jsxs(Toast.Content, {
+			className: CONTENT,
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "flex size-4 shrink-0 items-center [&_svg]:size-4",
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx(Toast.Title, { className: "font-medium leading-[1.5]" }), toast.description ? /* @__PURE__ */ jsx(Toast.Description, { className: "leading-[1.4] text-kit-fg-2" }) : null]
+				}),
+				toast.actionProps ? /* @__PURE__ */ jsx(Toast.Action, { className: ACTION }) : null
+			]
+		})
+	});
+}
+function KitToastList() {
+	const { toasts } = Toast.useToastManager();
+	return toasts.map((t) => /* @__PURE__ */ jsx(KitToastItem, { toast: t }, t.id));
+}
+/** Mount once per document, at the root. Its layer carries KIT_SCOPE (a portal sits outside every kit island). */
+function KitToaster({ limit = 3, timeout = 4e3, className }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager: kitToastManager,
+		limit,
+		timeout,
+		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			...KIT_SCOPE,
+			className: cn(VIEWPORT, className),
+			children: /* @__PURE__ */ jsx(KitToastList, {})
+		}) })
+	});
+}
+//#endregion
+export { KitToaster, kitToast, kitToastManager };
+
+//# sourceMappingURL=toast.js.map

package/dist/ui/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/ui/toast.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport type { KitToast, KitToastOptions } from \"../context\";\nimport { cn } from \"../lib/cn\";\nimport { Spinner } from \"./spinner\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\n/* ── Toast ───────────────────────────────────────────────────────────────\n   V2's toaster (app/root.tsx:24-46: sonner bottom-right, 16px offsets, gap 8, the --toast-offset-bottom lift an\n   ActionTray with clearToasts writes) rebuilt on Base UI Toast. kit-ports-spec.md §4.\n   Kit code never mounts this on its own: it calls KitServices.toast. A host without a toaster of its own mounts\n   <KitToaster /> once and passes `toast: kitToast`; a host with one (the dashboard's sonner) keeps it, so nothing\n   renders twice.\n   The success / error / warning / info glyphs are sonner's own SVG paths (sonner 2.0.8 dist/index.mjs:43-90), copied\n   verbatim. sonner is MIT licensed, Copyright (c) 2023 Emil Kowalski (https://github.com/emilkowalski/sonner). */\n\nexport const kitToastManager = Toast.createToastManager();\n\ntype ToastType = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\nlet seq = 0;\n\nfunction add(type: ToastType, message: string, opts: KitToastOptions = {}): string {\n  const id = `kit-toast-${++seq}`;\n  const { action } = opts;\n  return kitToastManager.add({\n    id,\n    type,\n    title: message,\n    description: opts.description,\n    timeout: opts.duration,\n    priority: type === \"error\" ? \"high\" : \"low\",\n    data: { icon: opts.icon },\n    // sonner closes the toast when its action runs; so does this\n    actionProps: action ? { children: action.label, onClick: () => (action.onClick(), kitToastManager.close(id)) } : undefined,\n  });\n}\n\n/** KitServices.toast backed by kitToastManager, plus V2's other sonner calls. */\nexport const kitToast: KitToast & {\n  error: (message: string, opts?: KitToastOptions) => void;\n  warning: (message: string, opts?: KitToastOptions) => void;\n  info: (message: string, opts?: KitToastOptions) => void;\n  /** stays until dismissed or updated; returns its id */\n  loading: (message: string, opts?: KitToastOptions) => string;\n  dismiss: (id?: string) => void;\n} = Object.assign((message: string, opts?: KitToastOptions) => void add(\"default\", message, opts), {\n  success: (message: string, opts?: KitToastOptions) => void add(\"success\", message, opts),\n  error: (message: string, opts?: KitToastOptions) => void add(\"error\", message, opts),\n  warning: (message: string, opts?: KitToastOptions) => void add(\"warning\", message, opts),\n  info: (message: string, opts?: KitToastOptions) => void add(\"info\", message, opts),\n  loading: (message: string, opts?: KitToastOptions) => add(\"loading\", message, opts),\n  dismiss: (id?: string) => kitToastManager.close(id),\n});\n\n/* sonner's type glyphs, drawn in the toast's text colour (V2 runs without richColors), at the 16px icon slot */\nfunction SonnerGlyph({ viewBox, d }: { viewBox: string; d: string }) {\n  return (\n    <svg viewBox={viewBox} fill=\"currentColor\" width=\"16\" height=\"16\" data-toast-glyph=\"\">\n      <path fillRule=\"evenodd\" d={d} clipRule=\"evenodd\" />\n    </svg>\n  );\n}\nconst TYPE_ICON: Partial<Record<string, React.ReactNode>> = {\n  success: (\n    <SonnerGlyph\n      viewBox=\"0 0 20 20\"\n      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n    />\n  ),\n  warning: (\n    <SonnerGlyph\n      viewBox=\"0 0 24 24\"\n      d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n    />\n  ),\n  info: (\n    <SonnerGlyph\n      viewBox=\"0 0 20 20\"\n      d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\"\n    />\n  ),\n  error: (\n    <SonnerGlyph\n      viewBox=\"0 0 20 20\"\n      d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\"\n    />\n  ),\n  loading: <Spinner size=\"md\" />,\n};\n\n/* Viewport: bottom-right, 16px from the edges; the bottom offset follows an ActionTray's --toast-offset-bottom lift.\n   Under 600px it spans the width less 16px a side (sonner's mobile layout). */\nconst VIEWPORT =\n  \"fixed bottom-[var(--toast-offset-bottom,16px)] right-4 z-[var(--z-toast,500)] w-[356px] outline-none max-[600px]:left-4 max-[600px]:w-auto\";\n\n/* sonner's motion in Base UI's stacked-toast variables: 400ms transform/opacity/height; enter and exit 100% down;\n   collapsed, each toast behind the front lifts gap × index, shrinks 5% per index and takes the front toast's height;\n   hovered or focused, the stack opens to full heights 8px apart. Reduced motion collapses it (kit base rule). */\nconst ROOT = cn(\n  \"[--gap:8px] [--scale:calc(1-var(--toast-index)*0.05)] [--height:var(--toast-frontmost-height,var(--toast-height))]\",\n  \"[--offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--gap)*-1+var(--toast-swipe-movement-y))]\",\n  \"absolute bottom-0 right-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom select-none\",\n  \"h-[var(--height)] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-var(--toast-index)*var(--gap)))_scale(var(--scale))]\",\n  \"data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]\",\n  \"data-[starting-style]:opacity-0 data-[starting-style]:[transform:translateY(100%)]\",\n  \"data-[ending-style]:opacity-0 data-[limited]:opacity-0\",\n  \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(100%)]\",\n  \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+100%))]\",\n  \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+100%))_translateY(var(--offset-y))]\",\n  \"[transition:transform_400ms_ease,opacity_400ms,height_400ms,box-shadow_200ms]\",\n  // the hover bridge between stacked toasts, so the stack stays open while the pointer crosses a gap\n  \"after:absolute after:left-0 after:top-full after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n  // V2's effective look: --surface-raised, tray-line edge (line-strong in dark), 12px radius, sonner's own shadow\n  \"flex items-center rounded-kit-xl border border-kit-tray-line bg-kit-surface-raised bg-clip-padding p-4 font-sans text-kit-sm text-kit-fg shadow-[0_4px_12px_rgba(0,0,0,0.1)] [.dark_&]:border-kit-line-strong\",\n);\n/* the toasts behind the front hide their content while the stack is collapsed (sonner data-front=false > * opacity 0) */\nconst CONTENT = \"flex min-w-0 flex-1 items-center gap-1.5 transition-opacity duration-[400ms] data-[behind]:opacity-0 data-[expanded]:opacity-100\";\nconst ACTION =\n  \"ml-auto inline-flex h-6 shrink-0 cursor-pointer items-center rounded-kit-md bg-kit-inverse px-2 text-kit-xs font-medium text-kit-fg-inverse hover:bg-kit-inverse-hover [transition:opacity_400ms,box-shadow_200ms,background-color_150ms]\";\n\nfunction KitToastItem({ toast }: { toast: Toast.Root.ToastObject }) {\n  const icon = (toast.data as { icon?: React.ReactNode } | undefined)?.icon ?? TYPE_ICON[toast.type ?? \"\"];\n  return (\n    <Toast.Root toast={toast} className={ROOT}>\n      <Toast.Content className={CONTENT}>\n        {icon ? (\n          <span aria-hidden className=\"flex size-4 shrink-0 items-center [&_svg]:size-4\">\n            {icon}\n          </span>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <Toast.Title className=\"font-medium leading-[1.5]\" />\n          {toast.description ? <Toast.Description className=\"leading-[1.4] text-kit-fg-2\" /> : null}\n        </div>\n        {toast.actionProps ? <Toast.Action className={ACTION} /> : null}\n      </Toast.Content>\n    </Toast.Root>\n  );\n}\n\nfunction KitToastList() {\n  const { toasts } = Toast.useToastManager();\n  return toasts.map((t) => <KitToastItem key={t.id} toast={t} />);\n}\n\nexport interface KitToasterProps {\n  /** toasts kept on screen (sonner visibleToasts) */\n  limit?: number;\n  /** ms before a toast closes; a toast's own `duration` wins; loading toasts stay */\n  timeout?: number;\n  className?: string;\n}\n\n/** Mount once per document, at the root. Its layer carries KIT_SCOPE (a portal sits outside every kit island). */\nexport function KitToaster({ limit = 3, timeout = 4000, className }: KitToasterProps) {\n  return (\n    <Toast.Provider toastManager={kitToastManager} limit={limit} timeout={timeout}>\n      <Toast.Portal>\n        <Toast.Viewport {...KIT_SCOPE} className={cn(VIEWPORT, className)}>\n          <KitToastList />\n        </Toast.Viewport>\n      </Toast.Portal>\n    </Toast.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,IAAa,kBAAkB,MAAM,mBAAmB;AAGxD,IAAI,MAAM;AAEV,SAAS,IAAI,MAAiB,SAAiB,OAAwB,CAAC,GAAW;CACjF,MAAM,KAAK,aAAa,EAAE;CAC1B,MAAM,EAAE,WAAW;CACnB,OAAO,gBAAgB,IAAI;EACzB;EACA;EACA,OAAO;EACP,aAAa,KAAK;EAClB,SAAS,KAAK;EACd,UAAU,SAAS,UAAU,SAAS;EACtC,MAAM,EAAE,MAAM,KAAK,KAAK;EAExB,aAAa,SAAS;GAAE,UAAU,OAAO;GAAO,gBAAgB,OAAO,QAAQ,GAAG,gBAAgB,MAAM,EAAE;EAAG,IAAI,KAAA;CACnH,CAAC;AACH;;AAGA,IAAa,WAOT,OAAO,QAAQ,SAAiB,SAA2B,KAAK,IAAI,WAAW,SAAS,IAAI,GAAG;CACjG,UAAU,SAAiB,SAA2B,KAAK,IAAI,WAAW,SAAS,IAAI;CACvF,QAAQ,SAAiB,SAA2B,KAAK,IAAI,SAAS,SAAS,IAAI;CACnF,UAAU,SAAiB,SAA2B,KAAK,IAAI,WAAW,SAAS,IAAI;CACvF,OAAO,SAAiB,SAA2B,KAAK,IAAI,QAAQ,SAAS,IAAI;CACjF,UAAU,SAAiB,SAA2B,IAAI,WAAW,SAAS,IAAI;CAClF,UAAU,OAAgB,gBAAgB,MAAM,EAAE;AACpD,CAAC;AAGD,SAAS,YAAY,EAAE,SAAS,KAAqC;CACnE,OACE,oBAAC,OAAD;EAAc;EAAS,MAAK;EAAe,OAAM;EAAK,QAAO;EAAK,oBAAiB;EACjF,UAAA,oBAAC,QAAD;GAAM,UAAS;GAAa;GAAG,UAAS;EAAW,CAAA;CAChD,CAAA;AAET;AACA,IAAM,YAAsD;CAC1D,SACE,oBAAC,aAAD;EACE,SAAQ;EACR,GAAE;CACH,CAAA;CAEH,SACE,oBAAC,aAAD;EACE,SAAQ;EACR,GAAE;CACH,CAAA;CAEH,MACE,oBAAC,aAAD;EACE,SAAQ;EACR,GAAE;CACH,CAAA;CAEH,OACE,oBAAC,aAAD;EACE,SAAQ;EACR,GAAE;CACH,CAAA;CAEH,SAAS,oBAAC,SAAD,EAAS,MAAK,KAAM,CAAA;AAC/B;AAIA,IAAM,WACJ;AAKF,IAAM,OAAO,GACX,sHACA,8GACA,gGACA,6KACA,6IACA,sFACA,0DACA,uGACA,oHACA,iJACA,iFAEA,6GAEA,+MACF;AAEA,IAAM,UAAU;AAChB,IAAM,SACJ;AAEF,SAAS,aAAa,EAAE,SAA4C;CAClE,MAAM,OAAQ,MAAM,MAAiD,QAAQ,UAAU,MAAM,QAAQ;CACrG,OACE,oBAAC,MAAM,MAAP;EAAmB;EAAO,WAAW;EACnC,UAAA,qBAAC,MAAM,SAAP;GAAe,WAAW;GAA1B,UAAA;IACG,OACC,oBAAC,QAAD;KAAM,eAAA;KAAY,WAAU;KACzB,UAAA;IACG,CAAA,IACJ;IACJ,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAM,OAAP,EAAa,WAAU,4BAA6B,CAAA,GACnD,MAAM,cAAc,oBAAC,MAAM,aAAP,EAAmB,WAAU,8BAA+B,CAAA,IAAI,IAClF;;IACJ,MAAM,cAAc,oBAAC,MAAM,QAAP,EAAc,WAAW,OAAS,CAAA,IAAI;GAC9C;;CACL,CAAA;AAEhB;AAEA,SAAS,eAAe;CACtB,MAAM,EAAE,WAAW,MAAM,gBAAgB;CACzC,OAAO,OAAO,KAAK,MAAM,oBAAC,cAAD,EAAyB,OAAO,EAAI,GAAjB,EAAE,EAAe,CAAC;AAChE;;AAWA,SAAgB,WAAW,EAAE,QAAQ,GAAG,UAAU,KAAM,aAA8B;CACpF,OACE,oBAAC,MAAM,UAAP;EAAgB,cAAc;EAAwB;EAAgB;EACpE,UAAA,oBAAC,MAAM,QAAP,EAAA,UACE,oBAAC,MAAM,UAAP;GAAgB,GAAI;GAAW,WAAW,GAAG,UAAU,SAAS;GAC9D,UAAA,oBAAC,cAAD,CAAe,CAAA;EACD,CAAA,EACJ,CAAA;CACA,CAAA;AAEpB"}

package/dist/ui/tooltip-root.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+export declare const MODAL_LAYER = "data-kit-modal-layer";
+/** Drop-in for Tooltip.Root (controlled or not) that closes itself when a modal layer opens. */
+export declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+/** The ink tooltip surface (V2 overlay.tsx:42: .glass-ink, radius 6, 8×4 padding, 12/500, 1.45 leading, wraps, fades in
+ *  160ms on a delayed open). The --kit-z-tooltip layer sits on the positioner, the element Base UI places. */
+export declare const TOOLTIP_POPUP_CLASS = "flex max-w-[min(280px,calc(100vw-16px))] items-start gap-2 rounded-kit-md glass-ink px-2 py-1 text-kit-xs font-medium leading-[1.45] data-[open]:not-data-[instant]:animate-kit-fade-in";
+/** Portal → positioner (6px offset, 8px collision padding, --kit-z-tooltip, its own kit scope) → ink popup (role="tooltip", as V2's). */
+export declare function TooltipLayer({ side, children, }: {
+    side?: "top" | "bottom" | "left" | "right";
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;