@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/path-crumbs.d.ts

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ */
+import * as React from "react";
+export interface PathCrumb {
+    /** stable key */
+    id: string;
+    label: string;
+    /** type icon (16px glyph; sized by the crumb) */
+    icon?: React.ReactNode;
+    /** navigate here (ignored on the current item) */
+    onSelect?: () => void;
+    /** …or a link (rendered through PathCrumbs `linkAs`) */
+    to?: string;
+    /** a meaningful container (a block, a folder): may name the collapsed group ("Columns +2") */
+    container?: boolean;
+    /** red dot: something under this level has errors */
+    errors?: number;
+}
+export type PathCrumbLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    to: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+export interface PathCrumbsProps {
+    /** root → current; the last item is the current one */
+    items: PathCrumb[];
+    /** ← goes up one level. Default: the parent's onSelect/to. `false` hides it (top-bar style). */
+    onBack?: (() => void) | false;
+    /** tooltip/aria for ←, default "Back to {parent}" */
+    backLabel?: string;
+    /** a key hint in the ← tooltip, shown only while keyboard hints are on (D44) */
+    backShortcut?: string;
+    /** @deprecated (D38 v3): the current item is always text: weight + colour, never a box. Kept for call-site compat. */
+    current?: "chip" | "text";
+    /** nav aria-label */
+    label?: string;
+    size?: "sm" | "md";
+    /** renders crumbs that have `to` (a router Link); must forward its ref and spread props. Default: <a href> */
+    linkAs?: React.ComponentType<PathCrumbLinkProps>;
+    className?: string;
+}
+export declare function clipWords(s: string, max?: number): string;
+type Form = "full" | "trunc";
+type Group = {
+    start: number;
+    end: number;
+};
+type Plan = {
+    forms: Form[];
+    group: Group | null;
+};
+/** Degradation order: the first plan that fits wins. Every visible crumb keeps readable text (no icon-only crumbs). */
+export declare function plansFor(items: PathCrumb[]): Plan[];
+/** Keep the head and the tail: "Seasoning wax & chainmail kit" → "Seasoning…mail kit". */
+export declare function middleEllipsis(text: string, maxPx: number, measure: (s: string) => number): string | null;
+export declare function PathCrumbs({ items, onBack, backLabel, backShortcut, label, size, linkAs: Link, className }: PathCrumbsProps): import("react/jsx-runtime").JSX.Element | null;
+export type PathCrumbState = "rest" | "hover" | "pressed" | "focus" | "open" | "current" | "disabled";
+export declare function PathCrumbSpecimen({ state, label, icon, group, size }: {
+    state: PathCrumbState;
+    label: string;
+    icon?: React.ReactNode;
+    group?: number;
+    size?: "sm" | "md";
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/path-crumbs.js

@@ -0,0 +1,532 @@
+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 { IconArrowLeft, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/kit/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
+	] });
+}
+//#endregion
+export { PathCrumbs };
+
+//# sourceMappingURL=path-crumbs.js.map