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

package/dist/ui/path-crumbs.js

@@ -0,0 +1,566 @@
+import { cn } from "../lib/cn.js";
+import { IconButton } from "./button.js";
+import { Menu as Menu$1, MenuContent, MenuTrigger, Tooltip } from "./overlay.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowLeft, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/ui/path-crumbs.tsx
+/**
+* PATH CRUMBS (CPO D38): the one breadcrumb for every drill-in path: Visuals inspector, Block Kit drill-in,
+* nested documents, media details, the workspace top bar.
+*
+*   <PathCrumbs items={[{ id, label, icon, onSelect }, …, current]} />
+*
+* Look (D38 v3): ancestors fg-3 with an invisible 4px-radius pill that appears on hover (bg-hover) and darkens while
+* pressed (bg-selected); the current item is fg/semibold with its icon, NO box; thin fg-4 chevrons flush between pills (6px from text);
+* the fold chip is a ghost crumb ("Columns… +2 ⌄") whose open state is bg-selected; keyboard-only neutral focus ring.
+*
+* Back (←) and current never collapse, and every visible crumb keeps READABLE TEXT (no icon-only crumbs). The trail
+* adapts to the width it ACTUALLY has (ResizeObserver on the nav + document.fonts.ready, not viewport breakpoints),
+* using space greedily; the first plan that fits wins:
+*
+*   stage 0  everything at full length
+*   stage 1  long labels shorten to their first words (~16ch, word boundary: "Seasoning & care…", "Columns…"):
+*            middle items root side first, then the parent, then the root
+*   stage 2  the middle folds, root side first, into ONE readable chip "[▦] Columns… +2" (its first folded level +
+*            the count) that opens the Pathway popover; the immediate parent stays out of the fold
+*   stage 3  the root joins the fold, then (last) the parent
+*   last     the current item middle-truncates ("Seasoning…ail kit"), full name in a tooltip
+*
+* Every variant is measured once in a hidden mirror and the stage is picked in a layout effect, so the first paint
+* is already right (no flicker, no layout jump). The Pathway popover lists the whole path as an indented tree
+* (↑↓ · Enter · Esc, focus returns to the chip). Siblings menus on crumbs were considered and left out (D6 calm).
+*
+* Links: a crumb with `to` renders through `linkAs` (default: a plain <a href>), so a host can pass its router's Link.
+*/
+var METRICS = {
+	sm: {
+		row: "h-7",
+		text: "text-[13px] leading-5",
+		pill: "h-6 px-1.5",
+		cur: "pr-0.5",
+		gap: "gap-1.5",
+		icon: "[&_svg]:size-3.5",
+		sep: "size-3",
+		back: "sm"
+	},
+	md: {
+		row: "h-8",
+		text: "text-[14px] leading-5",
+		pill: "h-7 px-2",
+		cur: "pr-0.5",
+		gap: "gap-1.5",
+		icon: "[&_svg]:size-4",
+		sep: "size-3.5",
+		back: "md"
+	}
+};
+/** Ancestor / group pill: fg-3 at rest, a quiet pill on hover, darker while pressed, fg-4 + inert when it can't navigate. */
+var PILL = "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-kit-sm text-kit-fg-3 transition-colors duration-100 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected disabled:pointer-events-none disabled:text-kit-fg-4";
+function DefaultLink({ to, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		href: to,
+		...props
+	});
+}
+/** Word-boundary shortening: the first 2–3 words that fit ~16ch ("Seasoning & care kit" → "Seasoning & care…",
+*  "Columns / Bento" → "Columns…"). Never mid-word unless a single word is itself too long. */
+var isJoiner = (w) => /^[/&·\-–—|:,+]+$/.test(w);
+function clipWords(s, max = 16) {
+	const words = s.trim().split(/\s+/);
+	if (s.length <= 12 && words.length <= 2) return s;
+	const out = [];
+	for (let i = 0; i < words.length - 1; i++) {
+		if ([...out, words[i]].join(" ").length > max) break;
+		out.push(words[i]);
+	}
+	while (out.length && isJoiner(out[out.length - 1])) out.pop();
+	if (!out.length) return words[0].length > max ? `${words[0].slice(0, max - 2)}…` : `${words[0]}…`;
+	return `${out.join(" ")}…`;
+}
+var long = (s) => clipWords(s) !== s;
+var clip = (s) => clipWords(s);
+/** Degradation order: the first plan that fits wins. Every visible crumb keeps readable text (no icon-only crumbs). */
+function plansFor(items) {
+	const n = items.length;
+	const plans = [];
+	const forms = items.map(() => "full");
+	const push = (group = null) => plans.push({
+		forms: [...forms],
+		group: group ? { ...group } : null
+	});
+	push();
+	if (n < 2) return plans;
+	const parent = n - 2;
+	const middle = Array.from({ length: Math.max(0, n - 2) }, (_, k) => k + 1);
+	for (const i of middle) if (i !== parent && long(items[i].label)) {
+		forms[i] = "trunc";
+		push();
+	}
+	if (parent >= 1 && long(items[parent].label)) {
+		forms[parent] = "trunc";
+		push();
+	}
+	if (long(items[0].label)) {
+		forms[0] = "trunc";
+		push();
+	}
+	for (let end = 1; end <= parent - 1; end++) push({
+		start: 1,
+		end
+	});
+	if (parent >= 1) push({
+		start: 0,
+		end: parent - 1
+	});
+	push({
+		start: 0,
+		end: parent
+	});
+	return plans;
+}
+/** Keep the head and the tail: "Seasoning wax & chainmail kit" → "Seasoning…mail kit". */
+function middleEllipsis(text, maxPx, measure) {
+	if (measure(text) <= maxPx) return text;
+	let lo = 2;
+	let hi = text.length - 1;
+	let best = "";
+	while (lo <= hi) {
+		const keep = lo + hi >> 1;
+		const head = Math.ceil(keep * .6);
+		const s = `${text.slice(0, head).trimEnd()}…${text.slice(text.length - (keep - head)).trimStart()}`;
+		if (measure(s) <= maxPx) {
+			best = s;
+			lo = keep + 1;
+		} else hi = keep - 1;
+	}
+	return best || null;
+}
+var canvas = null;
+function textMeasurer(el) {
+	if (!el) return null;
+	canvas ??= document.createElement("canvas");
+	let ctx = null;
+	try {
+		ctx = canvas.getContext("2d");
+	} catch {
+		return null;
+	}
+	if (!ctx) return null;
+	const cs = getComputedStyle(el);
+	ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+	return (s) => ctx.measureText(s).width;
+}
+function PathCrumbs({ items, onBack, backLabel, backShortcut, label = "Breadcrumb", size = "sm", linkAs: Link = DefaultLink, className }) {
+	const n = items.length;
+	const parent = n > 1 ? items[n - 2] : void 0;
+	const back = onBack === false ? void 0 : onBack ?? (parent ? () => go(parent) : void 0);
+	const sig = items.map((i) => `${i.id}\u0001${i.label}\u0001${i.icon ? 1 : 0}\u0001${i.errors ? 1 : 0}\u0001${i.container ? 1 : 0}`).join("");
+	const plans = React.useMemo(() => plansFor(items), [sig]);
+	const navRef = React.useRef(null);
+	const mirrorRef = React.useRef(null);
+	const backRef = React.useRef(null);
+	const [fit, setFit] = React.useState({
+		plan: 0,
+		currentText: null
+	});
+	const measure = React.useCallback(() => {
+		const nav = navRef.current;
+		const mirror = mirrorRef.current;
+		if (!nav || !mirror) return;
+		const rect = nav.getBoundingClientRect().width;
+		const scale = nav.offsetWidth && rect ? rect / nav.offsetWidth : 1;
+		const w = (key) => (mirror.querySelector(`[data-m="${key}"]`)?.getBoundingClientRect().width ?? 0) / scale;
+		const avail = nav.clientWidth - (backRef.current ? backRef.current.getBoundingClientRect().width / scale : 0) - .5;
+		const sep = w("sep");
+		const cur = w("cur");
+		const widthOf = (p) => {
+			const parts = [];
+			if (n > 1) {
+				const gk = (g) => `g:${g.start}:${g.end}`;
+				if (p.group?.start === 0) parts.push(w(gk(p.group)));
+				else {
+					parts.push(w(`0:${p.forms[0]}`));
+					if (p.group) parts.push(w(gk(p.group)));
+				}
+				for (let i = 1; i < n - 1; i++) if (!p.group || i > p.group.end) parts.push(w(`${i}:${p.forms[i]}`));
+			}
+			parts.push(cur);
+			return parts.reduce((a, b) => a + b, 0) + sep * (parts.length - 1);
+		};
+		let pick = plans.length - 1;
+		let total = 0;
+		for (let k = 0; k < plans.length; k++) {
+			total = widthOf(plans[k]);
+			if (total <= avail) {
+				pick = k;
+				break;
+			}
+		}
+		let currentText = null;
+		if (pick === plans.length - 1 && (total = widthOf(plans[pick])) > avail) {
+			const textEl = mirror.querySelector("[data-m=\"curtext\"]");
+			const textW = textEl?.getBoundingClientRect().width ?? 0;
+			const room = cur - (total - avail) - (cur - textW);
+			const m = textMeasurer(textEl);
+			if (m && room > 24) currentText = middleEllipsis(items[n - 1].label, room, m);
+		}
+		setFit((f) => f.plan === pick && f.currentText === currentText ? f : {
+			plan: pick,
+			currentText
+		});
+	}, [plans, n]);
+	React.useLayoutEffect(() => {
+		measure();
+	}, [measure, sig]);
+	React.useLayoutEffect(() => {
+		const nav = navRef.current;
+		if (!nav || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => measure());
+		ro.observe(nav);
+		let alive = true;
+		document.fonts?.ready.then(() => alive && measure());
+		return () => {
+			alive = false;
+			ro.disconnect();
+		};
+	}, [measure]);
+	if (!n) return null;
+	const plan = plans[Math.min(fit.plan, plans.length - 1)];
+	const m = METRICS[size];
+	const curItem = items[n - 1];
+	const icon = (c) => c.icon ? /* @__PURE__ */ jsx("span", {
+		className: cn("flex shrink-0 items-center", m.icon),
+		"aria-hidden": true,
+		children: c.icon
+	}) : null;
+	const dot = (c) => c.errors ? /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": "Has errors",
+		className: "size-1.5 shrink-0 rounded-full bg-kit-danger"
+	}) : null;
+	const crumbCls = cn(PILL, m.pill);
+	const body = (c, form) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon(c),
+		/* @__PURE__ */ jsx("span", { children: form === "trunc" ? clip(c.label) : c.label }),
+		dot(c)
+	] });
+	/** The fold chip names its first folded level (the root only when nothing else is folded): "[▦] Columns… +2". */
+	const groupBody = (g) => {
+		const count = g.end - g.start + 1;
+		const lead = items[g.start === 0 && g.end > 0 ? 1 : g.start];
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon(lead),
+			/* @__PURE__ */ jsx("span", { children: clipWords(lead.label, 12) }),
+			count > 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: ["+", count - 1]
+			}) : null,
+			/* @__PURE__ */ jsx(IconChevronDown, {
+				className: cn("-mx-0.5 shrink-0 text-kit-fg-4", m.sep),
+				stroke: 1.75,
+				"aria-hidden": true
+			})
+		] });
+	};
+	const currentCls = cn("inline-flex min-w-0 max-w-full items-center whitespace-nowrap rounded-kit-sm font-semibold text-kit-fg", m.pill, m.cur, m.gap, "[&_[data-crumb-icon]]:text-kit-fg-2");
+	const sepEl = /* @__PURE__ */ jsx(IconChevronRight, {
+		className: cn("shrink-0 text-kit-fg-4", m.sep),
+		stroke: 1.75,
+		"aria-hidden": true
+	});
+	function go(c) {
+		c.onSelect?.();
+	}
+	const crumb = (c, i, form) => {
+		const tip = form !== "full" || void 0;
+		const inner = body(c, form);
+		const aria = form === "trunc" ? c.errors ? `${c.label}, has errors` : c.label : void 0;
+		const el = c.to ? /* @__PURE__ */ jsx(Link, {
+			to: c.to,
+			className: crumbCls,
+			"aria-label": aria,
+			onClick: c.onSelect,
+			children: inner
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: crumbCls,
+			"aria-label": aria,
+			onClick: () => go(c),
+			disabled: !c.onSelect,
+			children: inner
+		});
+		return /* @__PURE__ */ jsxs("li", {
+			className: "flex shrink-0 items-center",
+			children: [i > 0 ? sepEl : null, tip ? /* @__PURE__ */ jsx(Tooltip, {
+				content: c.label,
+				side: "bottom",
+				children: el
+			}) : el]
+		}, c.id);
+	};
+	const shown = [];
+	if (n > 1) {
+		const g = plan.group;
+		const group = (first) => /* @__PURE__ */ jsx(GroupLi, {
+			items,
+			group: g,
+			first,
+			trigger: groupBody(g),
+			sep: sepEl,
+			navRef,
+			label,
+			cls: crumbCls,
+			link: Link
+		}, "grp");
+		if (g?.start === 0) shown.push(group(true));
+		else {
+			shown.push(crumb(items[0], 0, plan.forms[0]));
+			if (g) shown.push(group());
+		}
+		for (let i = 1; i < n - 1; i++) if (!g || i > g.end) shown.push(crumb(items[i], i, plan.forms[i]));
+	}
+	const curLabel = fit.currentText ?? curItem.label;
+	const curNode = /* @__PURE__ */ jsxs("span", {
+		"aria-current": "page",
+		className: currentCls,
+		children: [
+			curItem.icon ? /* @__PURE__ */ jsx("span", {
+				"data-crumb-icon": true,
+				className: cn("flex shrink-0 items-center", m.icon),
+				"aria-hidden": true,
+				children: curItem.icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				"aria-label": curLabel !== curItem.label ? curItem.label : void 0,
+				children: curLabel
+			}),
+			dot(curItem)
+		]
+	});
+	const backText = backLabel ?? (parent ? `Back to ${parent.label}` : "Back");
+	return /* @__PURE__ */ jsxs("nav", {
+		ref: navRef,
+		"aria-label": label,
+		"data-size": size,
+		className: cn("relative flex min-w-0 flex-1 items-center", m.row, m.text, className),
+		children: [
+			back ? /* @__PURE__ */ jsx("div", {
+				ref: backRef,
+				className: "flex shrink-0 items-center",
+				children: /* @__PURE__ */ jsx(Tooltip, {
+					content: backText,
+					shortcut: backShortcut,
+					children: /* @__PURE__ */ jsx(IconButton, {
+						label: backText,
+						size: m.back,
+						onClick: back,
+						className: "shrink-0 rounded-kit-sm",
+						children: /* @__PURE__ */ jsx(IconArrowLeft, { stroke: 1.75 })
+					})
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("ol", {
+				className: "flex min-w-0 flex-1 items-center overflow-hidden",
+				children: [shown, /* @__PURE__ */ jsxs("li", {
+					className: "flex min-w-0 shrink items-center",
+					children: [n > 1 ? sepEl : null, fit.currentText || fit.plan === plans.length - 1 && long(curItem.label) ? /* @__PURE__ */ jsx(Tooltip, {
+						content: curItem.label,
+						side: "bottom",
+						children: /* @__PURE__ */ jsx("span", {
+							tabIndex: 0,
+							className: "flex min-w-0 rounded-kit-sm",
+							children: curNode
+						})
+					}) : curNode]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: mirrorRef,
+				"aria-hidden": true,
+				className: "pointer-events-none invisible absolute left-0 top-0 h-0 w-0 overflow-hidden",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-max flex-col items-start",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-m": "sep",
+							className: "flex",
+							children: sepEl
+						}),
+						items.slice(0, -1).map((c, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							"data-m": `${i}:full`,
+							className: crumbCls,
+							children: body(c, "full")
+						}), /* @__PURE__ */ jsx("span", {
+							"data-m": `${i}:trunc`,
+							className: crumbCls,
+							children: body(c, "trunc")
+						})] }, c.id)),
+						[0, 1].flatMap((start) => items.slice(0, -1).map((_, end) => end < start ? null : /* @__PURE__ */ jsx("span", {
+							"data-m": `g:${start}:${end}`,
+							className: crumbCls,
+							children: groupBody({
+								start,
+								end
+							})
+						}, `g${start}:${end}`))),
+						/* @__PURE__ */ jsxs("span", {
+							"data-m": "cur",
+							className: currentCls,
+							children: [
+								curItem.icon ? /* @__PURE__ */ jsx("span", {
+									"data-crumb-icon": true,
+									className: cn("flex shrink-0 items-center", m.icon),
+									children: curItem.icon
+								}) : null,
+								/* @__PURE__ */ jsx("span", {
+									"data-m": "curtext",
+									children: curItem.label
+								}),
+								dot(curItem)
+							]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+function GroupLi({ items, group, trigger, sep, first, navRef, label, cls, link: Link }) {
+	const count = group.end - group.start + 1;
+	const last = items.length - 1;
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex shrink-0 items-center",
+		children: [first ? null : sep, /* @__PURE__ */ jsxs(Menu$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: "Show the full path",
+			side: "bottom",
+			children: /* @__PURE__ */ jsx(MenuTrigger, {
+				"data-crumb-group": "",
+				className: cn(cls, "aria-expanded:bg-kit-selected aria-expanded:text-kit-fg"),
+				"aria-label": `Show ${count} more ${count === 1 ? "level" : "levels"}`,
+				children: trigger
+			})
+		}), /* @__PURE__ */ jsxs(MenuContent, {
+			align: "start",
+			finalFocus: () => {
+				requestAnimationFrame(() => {
+					const nav = navRef.current?.isConnected ? navRef.current : document.querySelector(`nav[aria-label="${CSS.escape(label)}"]`);
+					if (!nav) return;
+					(nav.querySelector("[data-crumb-group]") ?? nav.querySelector("button, [aria-current], [tabindex='0']"))?.focus({ preventScroll: true });
+				});
+				return false;
+			},
+			className: "w-64 max-w-[calc(100vw-24px)] text-[13px] leading-5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "px-2 pb-1 pt-1 text-kit-xs font-medium text-kit-fg-3",
+				children: "Pathway"
+			}), /* @__PURE__ */ jsx("ol", {
+				role: "none",
+				className: "flex flex-col",
+				children: items.map((c, i) => {
+					const isCurrent = i === last;
+					const hidden = i >= group.start && i <= group.end;
+					const rowCls = cn("relative flex h-7 select-none items-center gap-1.5 rounded-kit-sm pr-2 outline-none transition-colors", isCurrent ? "cursor-default font-semibold text-kit-fg data-[highlighted]:bg-kit-hover" : cn("cursor-pointer data-[highlighted]:bg-kit-hover data-[highlighted]:text-kit-fg active:bg-kit-selected", hidden ? "text-kit-fg" : "text-kit-fg-3"));
+					const style = { paddingLeft: 8 + Math.min(i, 8) * 12 };
+					return /* @__PURE__ */ jsx("li", {
+						role: "none",
+						children: c.to && !isCurrent ? /* @__PURE__ */ jsx(Menu.LinkItem, {
+							closeOnClick: true,
+							render: /* @__PURE__ */ jsx(Link, { to: c.to }),
+							onClick: () => c.onSelect?.(),
+							className: rowCls,
+							style,
+							children: /* @__PURE__ */ jsx(PathRow, {
+								c,
+								depth: i
+							})
+						}) : /* @__PURE__ */ jsx(Menu.Item, {
+							onClick: () => isCurrent ? void 0 : c.onSelect?.(),
+							"aria-current": isCurrent ? "page" : void 0,
+							className: rowCls,
+							style,
+							children: /* @__PURE__ */ jsx(PathRow, {
+								c,
+								depth: i,
+								current: isCurrent
+							})
+						})
+					}, c.id);
+				})
+			})]
+		})] })]
+	});
+}
+function PathRow({ c, depth, current }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		depth > 0 ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "-mt-2 h-3 w-2 shrink-0 rounded-bl-[3px] border-b border-l border-kit-line-strong"
+		}) : null,
+		c.icon ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "flex shrink-0 items-center text-kit-fg-3 [&_svg]:size-3.5",
+			children: c.icon
+		}) : null,
+		c.label.length > 28 ? /* @__PURE__ */ jsx(Tooltip, {
+			content: c.label,
+			side: "right",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: c.label
+			})
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: c.label
+		}),
+		c.errors ? /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": "Has errors",
+			className: "size-1.5 shrink-0 rounded-full bg-kit-danger"
+		}) : null,
+		current ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-1.5 shrink-0 rounded-full bg-kit-accent"
+		}) : null
+	] });
+}
+function PathCrumbSpecimen({ state, label, icon, group, size = "sm" }) {
+	const m = METRICS[size];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center", m.text),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn(PILL, m.pill, "pointer-events-none", {
+				rest: "",
+				hover: "bg-kit-hover text-kit-fg",
+				pressed: "bg-kit-selected text-kit-fg",
+				focus: "shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]",
+				open: "bg-kit-selected text-kit-fg",
+				current: "font-semibold text-kit-fg hover:bg-transparent [&_[data-crumb-icon]]:text-kit-fg-2",
+				disabled: "text-kit-fg-4 hover:bg-transparent hover:text-kit-fg-4"
+			}[state]),
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					"data-crumb-icon": true,
+					className: cn("flex shrink-0 items-center", m.icon),
+					"aria-hidden": true,
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", { children: label }),
+				group ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: "tabular-nums",
+					children: ["+", group]
+				}), /* @__PURE__ */ jsx(IconChevronDown, {
+					className: cn("-mx-0.5 shrink-0 text-kit-fg-4", m.sep),
+					stroke: 1.75,
+					"aria-hidden": true
+				})] }) : null
+			]
+		})
+	});
+}
+//#endregion
+export { PathCrumbSpecimen, PathCrumbs, clipWords, middleEllipsis, plansFor };
+
+//# sourceMappingURL=path-crumbs.js.map

package/dist/ui/path-crumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-crumbs.js","names":[],"sources":["../../src/ui/path-crumbs.tsx"],"sourcesContent":["/**\n * PATH CRUMBS (CPO D38): the one breadcrumb for every drill-in path: Visuals inspector, Block Kit drill-in,\n * nested documents, media details, the workspace top bar.\n *\n *   <PathCrumbs items={[{ id, label, icon, onSelect }, …, current]} />\n *\n * Look (D38 v3): ancestors fg-3 with an invisible 4px-radius pill that appears on hover (bg-hover) and darkens while\n * pressed (bg-selected); the current item is fg/semibold with its icon, NO box; thin fg-4 chevrons flush between pills (6px from text);\n * the fold chip is a ghost crumb (\"Columns… +2 ⌄\") whose open state is bg-selected; keyboard-only neutral focus ring.\n *\n * Back (←) and current never collapse, and every visible crumb keeps READABLE TEXT (no icon-only crumbs). The trail\n * adapts to the width it ACTUALLY has (ResizeObserver on the nav + document.fonts.ready, not viewport breakpoints),\n * using space greedily; the first plan that fits wins:\n *\n *   stage 0  everything at full length\n *   stage 1  long labels shorten to their first words (~16ch, word boundary: \"Seasoning & care…\", \"Columns…\"):\n *            middle items root side first, then the parent, then the root\n *   stage 2  the middle folds, root side first, into ONE readable chip \"[▦] Columns… +2\" (its first folded level +\n *            the count) that opens the Pathway popover; the immediate parent stays out of the fold\n *   stage 3  the root joins the fold, then (last) the parent\n *   last     the current item middle-truncates (\"Seasoning…ail kit\"), full name in a tooltip\n *\n * Every variant is measured once in a hidden mirror and the stage is picked in a layout effect, so the first paint\n * is already right (no flicker, no layout jump). The Pathway popover lists the whole path as an indented tree\n * (↑↓ · Enter · Esc, focus returns to the chip). Siblings menus on crumbs were considered and left out (D6 calm).\n *\n * Links: a crumb with `to` renders through `linkAs` (default: a plain <a href>), so a host can pass its router's Link.\n */\nimport * as React from \"react\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { IconArrowLeft, IconChevronDown, IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"./button\";\nimport { Menu, MenuContent, MenuTrigger, Tooltip } from \"./overlay\";\n\n/* ── Metrics: one 2/4/6/8 scale, two densities ─────────────────────────────────────────────\n *            row   text    pill (h · px)   icon  gap  separator                    back\n *   sm       28    13/20   24 · 6          14    6    12 chevron (6 to text)        28\n *   md       32    14/20   28 · 8          16    6    14 chevron (8 to text)        32\n * The chevron sits flush between pills, so the text-to-chevron distance IS the pill padding (one number to tune).\n * The pill is invisible at rest; hover = bg-hover, pressed = bg-selected, radius 4. Hit areas ≥ 24px. */\nconst METRICS = {\n  sm: { row: \"h-7\", text: \"text-[13px] leading-5\", pill: \"h-6 px-1.5\", cur: \"pr-0.5\", gap: \"gap-1.5\", icon: \"[&_svg]:size-3.5\", sep: \"size-3\", back: \"sm\" as const },\n  md: { row: \"h-8\", text: \"text-[14px] leading-5\", pill: \"h-7 px-2\", cur: \"pr-0.5\", gap: \"gap-1.5\", icon: \"[&_svg]:size-4\", sep: \"size-3.5\", back: \"md\" as const },\n};\n/** Ancestor / group pill: fg-3 at rest, a quiet pill on hover, darker while pressed, fg-4 + inert when it can't navigate. */\nconst PILL =\n  \"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-kit-sm text-kit-fg-3 transition-colors duration-100 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected disabled:pointer-events-none disabled:text-kit-fg-4\";\n\nexport interface PathCrumb {\n  /** stable key */\n  id: string;\n  label: string;\n  /** type icon (16px glyph; sized by the crumb) */\n  icon?: React.ReactNode;\n  /** navigate here (ignored on the current item) */\n  onSelect?: () => void;\n  /** …or a link (rendered through PathCrumbs `linkAs`) */\n  to?: string;\n  /** a meaningful container (a block, a folder): may name the collapsed group (\"Columns +2\") */\n  container?: boolean;\n  /** red dot: something under this level has errors */\n  errors?: number;\n}\n\nexport type PathCrumbLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; ref?: React.Ref<HTMLAnchorElement> };\n\nfunction DefaultLink({ to, ...props }: PathCrumbLinkProps) {\n  return <a href={to} {...props} />;\n}\n\nexport interface PathCrumbsProps {\n  /** root → current; the last item is the current one */\n  items: PathCrumb[];\n  /** ← goes up one level. Default: the parent's onSelect/to. `false` hides it (top-bar style). */\n  onBack?: (() => void) | false;\n  /** tooltip/aria for ←, default \"Back to {parent}\" */\n  backLabel?: string;\n  /** a key hint in the ← tooltip, shown only while keyboard hints are on (D44) */\n  backShortcut?: string;\n  /** @deprecated (D38 v3): the current item is always text: weight + colour, never a box. Kept for call-site compat. */\n  current?: \"chip\" | \"text\";\n  /** nav aria-label */\n  label?: string;\n  size?: \"sm\" | \"md\";\n  /** renders crumbs that have `to` (a router Link); must forward its ref and spread props. Default: <a href> */\n  linkAs?: React.ComponentType<PathCrumbLinkProps>;\n  className?: string;\n}\n\n/** Word-boundary shortening: the first 2–3 words that fit ~16ch (\"Seasoning & care kit\" → \"Seasoning & care…\",\n *  \"Columns / Bento\" → \"Columns…\"). Never mid-word unless a single word is itself too long. */\nconst isJoiner = (w: string) => /^[/&·\\-–—|:,+]+$/.test(w);\nexport function clipWords(s: string, max = 16): string {\n  const words = s.trim().split(/\\s+/);\n  if (s.length <= 12 && words.length <= 2) return s;\n  const out: string[] = [];\n  for (let i = 0; i < words.length - 1; i++) {\n    const next = [...out, words[i]].join(\" \");\n    if (next.length > max) break;\n    out.push(words[i]);\n  }\n  while (out.length && isJoiner(out[out.length - 1])) out.pop();\n  if (!out.length) return words[0].length > max ? `${words[0].slice(0, max - 2)}…` : `${words[0]}…`;\n  return `${out.join(\" \")}…`;\n}\nconst long = (s: string) => clipWords(s) !== s;\nconst clip = (s: string) => clipWords(s);\n\ntype Form = \"full\" | \"trunc\";\ntype Group = { start: number; end: number };\ntype Plan = { forms: Form[]; group: Group | null };\n\n/** Degradation order: the first plan that fits wins. Every visible crumb keeps readable text (no icon-only crumbs). */\nexport function plansFor(items: PathCrumb[]): Plan[] {\n  const n = items.length;\n  const plans: Plan[] = [];\n  const forms: Form[] = items.map(() => \"full\");\n  const push = (group: Group | null = null) => plans.push({ forms: [...forms], group: group ? { ...group } : null });\n  push();\n  if (n < 2) return plans;\n  const parent = n - 2;\n  const middle = Array.from({ length: Math.max(0, n - 2) }, (_, k) => k + 1); // 1 … n-2, root side first\n  // 1 · long labels shorten to their first words: middle items root side first, then the parent, then the root\n  for (const i of middle) if (i !== parent && long(items[i].label)) { forms[i] = \"trunc\"; push(); }\n  if (parent >= 1 && long(items[parent].label)) { forms[parent] = \"trunc\"; push(); }\n  if (long(items[0].label)) { forms[0] = \"trunc\"; push(); }\n  // 2 · the middle folds, root side first, into ONE readable chip (\"Columns… +2\"); the parent stays out of it\n  for (let end = 1; end <= parent - 1; end++) push({ start: 1, end });\n  // 3 · the root joins the fold, then (last) the parent\n  if (parent >= 1) push({ start: 0, end: parent - 1 });\n  push({ start: 0, end: parent });\n  return plans;\n}\n\n/** Keep the head and the tail: \"Seasoning wax & chainmail kit\" → \"Seasoning…mail kit\". */\nexport function middleEllipsis(text: string, maxPx: number, measure: (s: string) => number) {\n  if (measure(text) <= maxPx) return text;\n  let lo = 2;\n  let hi = text.length - 1;\n  let best = \"\";\n  while (lo <= hi) {\n    const keep = (lo + hi) >> 1;\n    const head = Math.ceil(keep * 0.6);\n    const s = `${text.slice(0, head).trimEnd()}…${text.slice(text.length - (keep - head)).trimStart()}`;\n    if (measure(s) <= maxPx) { best = s; lo = keep + 1; } else hi = keep - 1;\n  }\n  return best || null;\n}\n\nlet canvas: HTMLCanvasElement | null = null;\nfunction textMeasurer(el: Element | null) {\n  if (!el) return null;\n  canvas ??= document.createElement(\"canvas\");\n  let ctx: CanvasRenderingContext2D | null = null;\n  try {\n    ctx = canvas.getContext(\"2d\");\n  } catch {\n    return null; // no canvas (test DOM): skip the last-resort truncation\n  }\n  if (!ctx) return null;\n  const cs = getComputedStyle(el);\n  ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;\n  return (s: string) => ctx.measureText(s).width;\n}\n\nexport function PathCrumbs({ items, onBack, backLabel, backShortcut, label = \"Breadcrumb\", size = \"sm\", linkAs: Link = DefaultLink, className }: PathCrumbsProps) {\n  const n = items.length;\n  const parent = n > 1 ? items[n - 2] : undefined;\n  const back = onBack === false ? undefined : onBack ?? (parent ? () => go(parent) : undefined);\n  const sig = items.map((i) => `${i.id}\\u0001${i.label}\\u0001${i.icon ? 1 : 0}\\u0001${i.errors ? 1 : 0}\\u0001${i.container ? 1 : 0}`).join(\"\\u0002\");\n  const plans = React.useMemo(() => plansFor(items), [sig]); // eslint-disable-line react-hooks/exhaustive-deps\n  const navRef = React.useRef<HTMLElement>(null);\n  const mirrorRef = React.useRef<HTMLDivElement>(null);\n  const backRef = React.useRef<HTMLDivElement>(null);\n  const [fit, setFit] = React.useState<{ plan: number; currentText: string | null }>({ plan: 0, currentText: null });\n\n  const measure = React.useCallback(() => {\n    const nav = navRef.current;\n    const mirror = mirrorRef.current;\n    if (!nav || !mirror) return;\n    // layout widths, not painted ones: an ancestor mid-animation (scale / pop-in) must not skew the fit\n    const rect = nav.getBoundingClientRect().width;\n    const scale = nav.offsetWidth && rect ? rect / nav.offsetWidth : 1;\n    const w = (key: string) => (mirror.querySelector<HTMLElement>(`[data-m=\"${key}\"]`)?.getBoundingClientRect().width ?? 0) / scale;\n    const avail = nav.clientWidth - (backRef.current ? backRef.current.getBoundingClientRect().width / scale : 0) - 0.5;\n    const sep = w(\"sep\");\n    const cur = w(\"cur\");\n    const widthOf = (p: Plan) => {\n      const parts: number[] = [];\n      if (n > 1) {\n        const gk = (g: Group) => `g:${g.start}:${g.end}`;\n        if (p.group?.start === 0) parts.push(w(gk(p.group)));\n        else {\n          parts.push(w(`0:${p.forms[0]}`));\n          if (p.group) parts.push(w(gk(p.group)));\n        }\n        for (let i = 1; i < n - 1; i++) if (!p.group || i > p.group.end) parts.push(w(`${i}:${p.forms[i]}`));\n      }\n      parts.push(cur);\n      return parts.reduce((a, b) => a + b, 0) + sep * (parts.length - 1);\n    };\n    let pick = plans.length - 1;\n    let total = 0;\n    for (let k = 0; k < plans.length; k++) {\n      total = widthOf(plans[k]);\n      if (total <= avail) { pick = k; break; }\n    }\n    let currentText: string | null = null;\n    if (pick === plans.length - 1 && (total = widthOf(plans[pick])) > avail) {\n      // last resort: middle-truncate the current item to the room that's left\n      const textEl = mirror.querySelector('[data-m=\"curtext\"]');\n      const textW = textEl?.getBoundingClientRect().width ?? 0;\n      const room = cur - (total - avail) - (cur - textW);\n      const m = textMeasurer(textEl);\n      if (m && room > 24) currentText = middleEllipsis(items[n - 1].label, room, m);\n    }\n    setFit((f) => (f.plan === pick && f.currentText === currentText ? f : { plan: pick, currentText }));\n  }, [plans, n]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useLayoutEffect(() => {\n    measure();\n  }, [measure, sig]);\n  React.useLayoutEffect(() => {\n    const nav = navRef.current;\n    if (!nav || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => measure());\n    ro.observe(nav);\n    let alive = true;\n    document.fonts?.ready.then(() => alive && measure());\n    return () => {\n      alive = false;\n      ro.disconnect();\n    };\n  }, [measure]);\n\n  if (!n) return null;\n  const plan = plans[Math.min(fit.plan, plans.length - 1)];\n  const m = METRICS[size];\n  const curItem = items[n - 1];\n\n  /* ── pieces (shared by the mirror and the real trail so the widths match) ── */\n  const icon = (c: PathCrumb) => (c.icon ? <span className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{c.icon}</span> : null);\n  /* V2: the dot itself carries the name (role=\"img\" so assistive tech reads it; no hidden text in the crumb) */\n  const dot = (c: PathCrumb) => (c.errors ? <span role=\"img\" aria-label=\"Has errors\" className=\"size-1.5 shrink-0 rounded-full bg-kit-danger\" /> : null);\n  const crumbCls = cn(PILL, m.pill);\n  const body = (c: PathCrumb, form: Form) => (\n    <>\n      {icon(c)}\n      <span>{form === \"trunc\" ? clip(c.label) : c.label}</span>\n      {dot(c)}\n    </>\n  );\n  /** The fold chip names its first folded level (the root only when nothing else is folded): \"[▦] Columns… +2\". */\n  const groupBody = (g: Group) => {\n    const count = g.end - g.start + 1;\n    const lead = items[g.start === 0 && g.end > 0 ? 1 : g.start];\n    return (\n      <>\n        {icon(lead)}\n        <span>{clipWords(lead.label, 12)}</span>\n        {count > 1 ? <span className=\"tabular-nums\">+{count - 1}</span> : null}\n        <IconChevronDown className={cn(\"-mx-0.5 shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />\n      </>\n    );\n  };\n  // current = emphasis by weight + colour, never a box (D38 v3); same box metrics as a crumb so nothing shifts\n  // it has no pill, so no trailing padding: only the leading inset that lines it up with the chevron rhythm\n  const currentCls = cn(\"inline-flex min-w-0 max-w-full items-center whitespace-nowrap rounded-kit-sm font-semibold text-kit-fg\", m.pill, m.cur, m.gap, \"[&_[data-crumb-icon]]:text-kit-fg-2\");\n  const sepEl = <IconChevronRight className={cn(\"shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />;\n\n  function go(c: PathCrumb) {\n    c.onSelect?.();\n  }\n\n  const crumb = (c: PathCrumb, i: number, form: Form) => {\n    const tip = form !== \"full\" || undefined;\n    const inner = body(c, form);\n    const aria = form === \"trunc\" ? (c.errors ? `${c.label}, has errors` : c.label) : undefined;\n    const el = c.to ? (\n      <Link to={c.to} className={crumbCls} aria-label={aria} onClick={c.onSelect}>{inner}</Link>\n    ) : (\n      <button type=\"button\" className={crumbCls} aria-label={aria} onClick={() => go(c)} disabled={!c.onSelect}>{inner}</button>\n    );\n    return (\n      <li key={c.id} className=\"flex shrink-0 items-center\">\n        {i > 0 ? sepEl : null}\n        {tip ? <Tooltip content={c.label} side=\"bottom\">{el}</Tooltip> : el}\n      </li>\n    );\n  };\n\n  const shown: React.ReactNode[] = [];\n  if (n > 1) {\n    const g = plan.group;\n    const group = (first?: boolean) => (\n      <GroupLi key=\"grp\" items={items} group={g!} first={first} trigger={groupBody(g!)} sep={sepEl} navRef={navRef} label={label} cls={crumbCls} link={Link} />\n    );\n    if (g?.start === 0) shown.push(group(true));\n    else {\n      shown.push(crumb(items[0], 0, plan.forms[0]));\n      if (g) shown.push(group());\n    }\n    for (let i = 1; i < n - 1; i++) if (!g || i > g.end) shown.push(crumb(items[i], i, plan.forms[i]));\n  }\n  const curLabel = fit.currentText ?? curItem.label;\n  const curNode = (\n    <span aria-current=\"page\" className={currentCls}>\n      {curItem.icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{curItem.icon}</span> : null}\n      <span className=\"min-w-0 truncate\" aria-label={curLabel !== curItem.label ? curItem.label : undefined}>{curLabel}</span>\n      {dot(curItem)}\n    </span>\n  );\n  const backText = backLabel ?? (parent ? `Back to ${parent.label}` : \"Back\");\n\n  return (\n    <nav ref={navRef} aria-label={label} data-size={size} className={cn(\"relative flex min-w-0 flex-1 items-center\", m.row, m.text, className)}>\n      {back ? (\n        <div ref={backRef} className=\"flex shrink-0 items-center\">\n          <Tooltip content={backText} shortcut={backShortcut}>\n            <IconButton label={backText} size={m.back} onClick={back} className=\"shrink-0 rounded-kit-sm\">\n              <IconArrowLeft stroke={1.75} />\n            </IconButton>\n          </Tooltip>\n        </div>\n      ) : null}\n      <ol className=\"flex min-w-0 flex-1 items-center overflow-hidden\">\n        {shown}\n        <li className=\"flex min-w-0 shrink items-center\">\n          {n > 1 ? sepEl : null}\n          {fit.currentText || (fit.plan === plans.length - 1 && long(curItem.label)) ? (\n            <Tooltip content={curItem.label} side=\"bottom\">\n              <span tabIndex={0} className=\"flex min-w-0 rounded-kit-sm\">{curNode}</span>\n            </Tooltip>\n          ) : (\n            curNode\n          )}\n        </li>\n      </ol>\n\n      {/* hidden mirror: every variant measured once (never painted, never announced) */}\n      <div ref={mirrorRef} aria-hidden className=\"pointer-events-none invisible absolute left-0 top-0 h-0 w-0 overflow-hidden\">\n        <div className=\"flex w-max flex-col items-start\">\n          <span data-m=\"sep\" className=\"flex\">{sepEl}</span>\n          {items.slice(0, -1).map((c, i) => (\n            <React.Fragment key={c.id}>\n              <span data-m={`${i}:full`} className={crumbCls}>{body(c, \"full\")}</span>\n              <span data-m={`${i}:trunc`} className={crumbCls}>{body(c, \"trunc\")}</span>\n            </React.Fragment>\n          ))}\n          {[0, 1].flatMap((start) =>\n            items.slice(0, -1).map((_, end) =>\n              end < start ? null : <span key={`g${start}:${end}`} data-m={`g:${start}:${end}`} className={crumbCls}>{groupBody({ start, end })}</span>,\n            ),\n          )}\n          <span data-m=\"cur\" className={currentCls}>\n            {curItem.icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)}>{curItem.icon}</span> : null}\n            <span data-m=\"curtext\">{curItem.label}</span>\n            {dot(curItem)}\n          </span>\n        </div>\n      </div>\n    </nav>\n  );\n}\n\n/* ── The folded middle + its Pathway popover ───────────────────────────────────── */\nfunction GroupLi({\n  items,\n  group,\n  trigger,\n  sep,\n  first,\n  navRef,\n  label,\n  cls,\n  link: Link,\n}: {\n  items: PathCrumb[];\n  group: Group;\n  trigger: React.ReactNode;\n  sep: React.ReactNode;\n  first?: boolean;\n  navRef: React.RefObject<HTMLElement | null>;\n  label: string;\n  cls: string;\n  link: React.ComponentType<PathCrumbLinkProps>;\n}) {\n  const count = group.end - group.start + 1;\n  const last = items.length - 1;\n  return (\n    <li className=\"flex shrink-0 items-center\">\n      {first ? null : sep}\n      <Menu>\n        <Tooltip content=\"Show the full path\" side=\"bottom\">\n          <MenuTrigger\n            data-crumb-group=\"\"\n            className={cn(cls, \"aria-expanded:bg-kit-selected aria-expanded:text-kit-fg\")} /* = crumbCls: the mirror measures it */\n            aria-label={`Show ${count} more ${count === 1 ? \"level\" : \"levels\"}`}\n          >\n            {trigger}\n          </MenuTrigger>\n        </Tooltip>\n        {/* the kit MenuContent: §12 dismiss guards and the modal-layer marker (an open tooltip closes) */}\n        <MenuContent\n          align=\"start\"\n          finalFocus={() => {\n            // a jump re-lays the trail (or remounts the host) and the chip may be gone: land on the trail's chip,\n            // ← or current item instead of <body>\n            requestAnimationFrame(() => {\n              const nav = navRef.current?.isConnected ? navRef.current : document.querySelector<HTMLElement>(`nav[aria-label=\"${CSS.escape(label)}\"]`);\n              if (!nav) return;\n              const chip = nav.querySelector<HTMLElement>(\"[data-crumb-group]\");\n              (chip ?? nav.querySelector<HTMLElement>(\"button, [aria-current], [tabindex='0']\"))?.focus({ preventScroll: true });\n            });\n            return false;\n          }}\n          className=\"w-64 max-w-[calc(100vw-24px)] text-[13px] leading-5\"\n        >\n          <div className=\"px-2 pb-1 pt-1 text-kit-xs font-medium text-kit-fg-3\">Pathway</div>\n          {/* role=none: the menu owns its menuitems directly (no list or listitem in between) */}\n          <ol role=\"none\" className=\"flex flex-col\">\n            {items.map((c, i) => {\n              const isCurrent = i === last;\n              const hidden = i >= group.start && i <= group.end;\n              const rowCls = cn(\n                \"relative flex h-7 select-none items-center gap-1.5 rounded-kit-sm pr-2 outline-none transition-colors\",\n                isCurrent\n                  ? \"cursor-default font-semibold text-kit-fg data-[highlighted]:bg-kit-hover\"\n                  : cn(\"cursor-pointer data-[highlighted]:bg-kit-hover data-[highlighted]:text-kit-fg active:bg-kit-selected\", hidden ? \"text-kit-fg\" : \"text-kit-fg-3\"),\n              );\n              const style = { paddingLeft: 8 + Math.min(i, 8) * 12 };\n              return (\n                <li key={c.id} role=\"none\">\n                  {c.to && !isCurrent ? (\n                    <MenuPrimitive.LinkItem\n                      closeOnClick\n                      render={<Link to={c.to} />}\n                      onClick={() => c.onSelect?.()}\n                      className={rowCls}\n                      style={style}\n                    >\n                      <PathRow c={c} depth={i} />\n                    </MenuPrimitive.LinkItem>\n                  ) : (\n                    <MenuPrimitive.Item\n                      onClick={() => (isCurrent ? undefined : c.onSelect?.())}\n                      aria-current={isCurrent ? \"page\" : undefined}\n                      className={rowCls}\n                      style={style}\n                    >\n                      <PathRow c={c} depth={i} current={isCurrent} />\n                    </MenuPrimitive.Item>\n                  )}\n                </li>\n              );\n            })}\n          </ol>\n        </MenuContent>\n      </Menu>\n    </li>\n  );\n}\n\nfunction PathRow({ c, depth, current }: { c: PathCrumb; depth: number; current?: boolean }) {\n  return (\n    <>\n      {depth > 0 ? <span aria-hidden className=\"-mt-2 h-3 w-2 shrink-0 rounded-bl-[3px] border-b border-l border-kit-line-strong\" /> : null}\n      {c.icon ? <span aria-hidden className=\"flex shrink-0 items-center text-kit-fg-3 [&_svg]:size-3.5\">{c.icon}</span> : null}\n      {c.label.length > 28 ? (\n        <Tooltip content={c.label} side=\"right\">\n          <span className=\"min-w-0 flex-1 truncate\">{c.label}</span>\n        </Tooltip>\n      ) : (\n        <span className=\"min-w-0 flex-1 truncate\">{c.label}</span>\n      )}\n      {c.errors ? <span role=\"img\" aria-label=\"Has errors\" className=\"size-1.5 shrink-0 rounded-full bg-kit-danger\" /> : null}\n      {current ? <span aria-hidden className=\"size-1.5 shrink-0 rounded-full bg-kit-accent\" /> : null}\n    </>\n  );\n}\n\n/* ── Specimen (design system): one crumb frozen in a state, built from the SAME constants ─── */\nexport type PathCrumbState = \"rest\" | \"hover\" | \"pressed\" | \"focus\" | \"open\" | \"current\" | \"disabled\";\nexport function PathCrumbSpecimen({ state, label, icon, group, size = \"sm\" }: { state: PathCrumbState; label: string; icon?: React.ReactNode; group?: number; size?: \"sm\" | \"md\" }) {\n  const m = METRICS[size];\n  const forced: Record<PathCrumbState, string> = {\n    rest: \"\",\n    hover: \"bg-kit-hover text-kit-fg\",\n    pressed: \"bg-kit-selected text-kit-fg\",\n    focus: \"shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]\",\n    open: \"bg-kit-selected text-kit-fg\",\n    current: \"font-semibold text-kit-fg hover:bg-transparent [&_[data-crumb-icon]]:text-kit-fg-2\",\n    disabled: \"text-kit-fg-4 hover:bg-transparent hover:text-kit-fg-4\",\n  };\n  return (\n    <span className={cn(\"inline-flex items-center\", m.text)}>\n      <span className={cn(PILL, m.pill, \"pointer-events-none\", forced[state])}>\n        {icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{icon}</span> : null}\n        <span>{label}</span>\n        {group ? (\n          <>\n            <span className=\"tabular-nums\">+{group}</span>\n            <IconChevronDown className={cn(\"-mx-0.5 shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />\n          </>\n        ) : null}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/presence.d.ts

@@ -0,0 +1,16 @@
+/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */
+export declare const AGENT_PRESENCE = "var(--kit-presence-agent)";
+/**
+ * Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).
+ * Each member is then found by id, full name or email.
+ */
+export declare function registerPresenceRoster(members: {
+    id: string;
+    name: string;
+    email?: string;
+    joinedAt?: string;
+}[]): void;
+/** Accepts a person id ("u_priya", "priya"), a full name ("Priya Nair") or an email; returns the slot 1…8. */
+export declare function presenceSlot(person: string): number;
+/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */
+export declare function presenceColor(person: string): string;