@bettercms-ai/kit 0.1.0 → 1.0.0

package/ui/display.js

@@ -0,0 +1,444 @@
+import { cn } from "../lib/cn.js";
+import { HintTooltip } from "./button.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/kit/ui/display.tsx
+var badgeTones = {
+	neutral: "bg-kit-muted text-kit-fg-2",
+	outline: "border border-kit-line bg-kit-control-bg text-kit-fg-2",
+	accent: "bg-kit-accent-soft text-kit-accent-fg",
+	success: "bg-kit-success-soft text-kit-success-fg",
+	warning: "bg-kit-warning-soft text-kit-warning-fg",
+	danger: "bg-kit-danger-soft text-kit-danger-fg",
+	info: "bg-kit-info-soft text-kit-info-fg",
+	ink: "bg-[var(--kit-chip-ink-bg)] text-[var(--kit-chip-ink-fg)]"
+};
+var badgeSizes = {
+	sm: "h-[18px] px-1.5 text-kit-2xs",
+	md: "h-5 px-1.5 text-kit-xs",
+	lg: "h-6 px-2 text-kit-xs"
+};
+function badgeVariants({ tone, size } = {}) {
+	return cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium [&_svg]:size-3", badgeTones[tone ?? "neutral"], badgeSizes[size ?? "md"]);
+}
+function Badge({ className, tone, size, dot, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(badgeVariants({
+			tone,
+			size
+		}), className),
+		...props,
+		children: [dot ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-1.5 rounded-full bg-current"
+		}) : null, children]
+	});
+}
+var statusMap = {
+	published: {
+		label: "Published",
+		tone: "success"
+	},
+	live: {
+		label: "Live",
+		tone: "success"
+	},
+	draft: {
+		label: "Draft",
+		tone: "neutral"
+	},
+	changed: {
+		label: "Edited",
+		tone: "warning"
+	},
+	held: {
+		label: "Edits held",
+		tone: "neutral"
+	},
+	scheduled: {
+		label: "Scheduled",
+		tone: "info"
+	},
+	review: {
+		label: "In review",
+		tone: "info"
+	},
+	archived: {
+		label: "Archived",
+		tone: "outline"
+	},
+	error: {
+		label: "Failed",
+		tone: "danger"
+	},
+	building: {
+		label: "Building",
+		tone: "info"
+	},
+	offline: {
+		label: "Offline",
+		tone: "neutral"
+	}
+};
+function StatusPill({ status, label, className, size = "md" }) {
+	const s = statusMap[status];
+	return /* @__PURE__ */ jsxs(Badge, {
+		tone: s.tone,
+		size,
+		className,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-pulse": status === "building" || status === "live" ? "" : void 0,
+			className: cn("size-1.5 rounded-full bg-current", (status === "building" || status === "live") && "animate-[kit-pulse-dot_1.8s_ease-in-out_infinite] motion-reduce:animate-none")
+		}), label ?? s.label]
+	});
+}
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]", className),
+		...props
+	});
+}
+var AVATAR_LIGHT = [
+	"#c2410c",
+	"#be185d",
+	"#7e22ce",
+	"#4338ca",
+	"#1d4ed8",
+	"#047857",
+	"#b45309",
+	"#0369a1",
+	"#a21caf",
+	"#6d28d9"
+];
+var avatarPalette = AVATAR_LIGHT.map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);
+/** One literal class per slot (Tailwind only sees whole class names); kit.css swaps the tone in dark. */
+var AVATAR_BG = [
+	"bg-[var(--kit-avatar-1)]",
+	"bg-[var(--kit-avatar-2)]",
+	"bg-[var(--kit-avatar-3)]",
+	"bg-[var(--kit-avatar-4)]",
+	"bg-[var(--kit-avatar-5)]",
+	"bg-[var(--kit-avatar-6)]",
+	"bg-[var(--kit-avatar-7)]",
+	"bg-[var(--kit-avatar-8)]",
+	"bg-[var(--kit-avatar-9)]",
+	"bg-[var(--kit-avatar-10)]"
+];
+var AVATAR_ON = "text-[var(--kit-avatar-on)]";
+function slotFor(seed) {
+	let h = 0;
+	for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
+	return h % AVATAR_LIGHT.length;
+}
+/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */
+function colorFor(seed) {
+	return avatarPalette[slotFor(seed)];
+}
+function initials(name) {
+	return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+}
+/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */
+function avatarRingSpread({ ring, ringWidth = 2, ringAccent }) {
+	return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;
+}
+function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAccent, square, status, decorative }) {
+	const spread = avatarRingSpread({
+		ring,
+		ringWidth,
+		ringAccent
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex shrink-0",
+		style: spread ? { padding: spread } : void 0,
+		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+			style: {
+				width: size,
+				height: size,
+				boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : ""}` : void 0
+			},
+			className: cn("inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted", square ? "rounded-kit-md" : "rounded-full", className),
+			children: [src ? /* @__PURE__ */ jsx(Avatar.Image, {
+				src,
+				alt: decorative ? "" : name,
+				className: "size-full object-cover"
+			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+				delay: src ? 300 : void 0,
+				"aria-hidden": decorative || void 0,
+				style: { fontSize: Math.max(9, Math.round(size * .4)) },
+				className: cn("flex size-full items-center justify-center font-semibold", AVATAR_BG[slotFor(name)], AVATAR_ON),
+				children: initials(name)
+			})]
+		}), status ? /* @__PURE__ */ jsx("span", {
+			style: spread ? {
+				right: spread,
+				bottom: spread
+			} : void 0,
+			className: cn("absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-kit-surface", status === "online" ? "bg-kit-success" : status === "away" ? "bg-kit-warning" : "bg-kit-fg-4")
+		}) : null]
+	});
+}
+/**
+* AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack
+* sits on; first face on top; a +N pill names the rest on hover.
+*/
+function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar-ring, var(--kit-surface))", className, label }) {
+	const shown = people.slice(0, max);
+	const hidden = people.slice(shown.length);
+	const step = Math.round(size * .25);
+	const band = avatarRingSpread({ ring: ringColor });
+	const box = size + band * 2;
+	const vars = {
+		"--stack-ov": `-${step + band * 2}px`,
+		"--stack-ov-open": `-${Math.max(1, Math.round(step * .35)) + band * 2}px`
+	};
+	const slot = "relative inline-flex shrink-0 rounded-full transition-[margin,transform] duration-150 ease-out [&:not(:first-child)]:ml-[var(--stack-ov)] group-hover/stack:[&:not(:first-child)]:ml-[var(--stack-ov-open)] hover:!z-30 hover:-translate-y-0.5 motion-reduce:transition-none";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label ?? `${people.length} ${people.length === 1 ? "person" : "people"}: ${people.map((p) => p.name).join(", ")}`,
+		style: vars,
+		className: cn("group/stack isolate flex shrink-0 items-center", className),
+		children: [shown.map((p, i) => /* @__PURE__ */ jsx(HintTooltip, {
+			content: p.name,
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					zIndex: shown.length - i + 1,
+					width: box,
+					height: box
+				},
+				className: slot,
+				children: /* @__PURE__ */ jsx(Avatar$1, {
+					name: p.name,
+					src: p.src,
+					size,
+					ring: ringColor,
+					decorative: true
+				})
+			})
+		}, p.name + i)), hidden.length ? /* @__PURE__ */ jsx(HintTooltip, {
+			content: hidden.map((p) => p.name).join(", "),
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					zIndex: 1,
+					width: box,
+					height: box,
+					padding: band
+				},
+				className: slot,
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						width: size,
+						height: size,
+						boxShadow: `0 0 0 ${band}px ${ringColor}`,
+						fontSize: Math.max(9, Math.round(size * .38))
+					},
+					className: "inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2",
+					children: ["+", hidden.length]
+				})
+			})
+		}) : null]
+	});
+}
+function Card({ className, interactive, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-kit-xl border border-kit-line bg-kit-surface", interactive && "cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-kit-line-strong hover:shadow-kit-md", className),
+		...props
+	});
+}
+function CardHeader({ title, description, actions, icon, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start justify-between gap-3 px-4 pt-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-start gap-2.5",
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 flex text-kit-fg-2 [&_svg]:size-4",
+				children: icon
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-kit-base font-semibold text-kit-fg",
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null]
+			})]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center gap-1.5",
+			children: actions
+		}) : null]
+	});
+}
+function Separator({ vertical, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": vertical ? "vertical" : void 0,
+		className: cn(vertical ? "h-4 w-px bg-kit-line" : "h-px w-full bg-kit-line", className)
+	});
+}
+/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
+var SKELETON = "bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none";
+function Skeleton({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn(SKELETON, "rounded-kit-md", className)
+	});
+}
+function EmptyState({ icon, title, description, actions, className, compact }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center text-center", compact ? "gap-2 py-8" : "gap-2.5 py-12", className),
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "flex text-kit-fg-3 [&_svg]:size-4",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-w-sm",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-kit-base font-medium text-kit-fg",
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null]
+			}),
+			actions ? /* @__PURE__ */ jsx("div", {
+				className: "mt-1 flex flex-wrap items-center justify-center gap-2",
+				children: actions
+			}) : null
+		]
+	});
+}
+function PageHeader({ title, description, actions, meta, className, eyebrow, as: Heading = "h1" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-3", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [
+				eyebrow ? /* @__PURE__ */ jsx("div", {
+					className: "mb-1.5 text-kit-xs font-medium text-kit-fg-3",
+					children: eyebrow
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2.5",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						className: "truncate text-kit-xl font-semibold tracking-[-0.015em] text-kit-fg",
+						children: title
+					}), meta]
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null
+			]
+		}), actions ? /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 flex-wrap items-center gap-2",
+			children: actions
+		}) : null]
+	});
+}
+/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */
+function SettingsSection({ title, description, children, footer, className, danger, actions }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("overflow-hidden rounded-kit-xl border bg-kit-surface", danger ? "border-kit-danger-line" : "border-kit-line", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4 px-5 pt-5",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: cn("text-kit-base font-semibold", danger ? "text-kit-danger-fg" : "text-kit-fg"),
+					children: title
+				}), description ? /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 max-w-xl text-kit-sm text-kit-fg-2",
+					children: description
+				}) : null] }), actions]
+			}),
+			children ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-4 px-5 pb-5 pt-4",
+				children
+			}) : /* @__PURE__ */ jsx("div", { className: "h-5" }),
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between gap-3 border-t border-kit-line bg-[var(--kit-subtle-2)] px-5 py-3 text-kit-sm text-kit-fg-2",
+				children: footer
+			}) : null
+		]
+	});
+}
+function Stat({ label, value, delta, hint, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-kit-sm text-kit-fg-2",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xl font-semibold tabular-nums tracking-[-0.01em] text-kit-fg",
+					children: value
+				}), delta ? /* @__PURE__ */ jsxs("span", {
+					className: cn("text-kit-xs font-medium tabular-nums", delta.positive ? "text-kit-success-fg" : "text-kit-danger-fg"),
+					children: [
+						delta.positive ? "↑" : "↓",
+						" ",
+						delta.value
+					]
+				}) : null]
+			}),
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-kit-xs text-kit-fg-3",
+				children: hint
+			}) : null
+		]
+	});
+}
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		className: cn("w-full border-separate border-spacing-0 text-kit-sm", className),
+		...props
+	});
+}
+function Th({ className, children, ...props }) {
+	const empty = children == null || children === false || children === "";
+	return /* @__PURE__ */ jsx("th", {
+		className: cn("sticky top-0 z-[1] h-10 border-b border-kit-line bg-kit-surface px-3 text-left text-kit-sm font-normal text-kit-fg-3 first:pl-4 last:pr-4", className),
+		...props,
+		children: empty ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: props["aria-label"] ?? "Actions"
+		}) : children
+	});
+}
+function Td({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("h-14 border-b border-kit-line-subtle px-3 text-kit-fg first:pl-4 last:pr-4", className),
+		...props
+	});
+}
+function Tr({ className, selected, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-selected": selected ? "true" : void 0,
+		className: cn("group/row transition-colors hover:bg-kit-subtle data-[selected=true]:bg-kit-accent-softer", className),
+		...props
+	});
+}
+var dotTones = {
+	success: "bg-kit-success",
+	warning: "bg-kit-warning",
+	danger: "bg-kit-danger",
+	neutral: "bg-kit-fg-4",
+	accent: "bg-kit-accent",
+	info: "bg-kit-info"
+};
+function Dot({ tone = "success", pulse, className }) {
+	const c = dotTones[tone];
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-flex size-2 shrink-0", className),
+		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-50 motion-reduce:animate-none", c) }) : null, /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", c) })]
+	});
+}
+//#endregion
+export { Avatar$1 as Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, SKELETON, Separator, SettingsSection, Skeleton, Stat, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap };
+
+//# sourceMappingURL=display.js.map

package/ui/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","names":[],"sources":["../../src/kit/ui/display.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"../lib/cn\";\nimport { HintTooltip } from \"./button\";\n\n/* ── Badge ─────────────────────────────────────────────────────────────── */\nconst badgeTones = {\n  neutral: \"bg-kit-muted text-kit-fg-2\",\n  outline: \"border border-kit-line bg-kit-control-bg text-kit-fg-2\",\n  accent: \"bg-kit-accent-soft text-kit-accent-fg\",\n  success: \"bg-kit-success-soft text-kit-success-fg\",\n  warning: \"bg-kit-warning-soft text-kit-warning-fg\",\n  danger: \"bg-kit-danger-soft text-kit-danger-fg\",\n  info: \"bg-kit-info-soft text-kit-info-fg\",\n  // --chip-ink: calm in dark (#343437, = selected), not a white slab\n  ink: \"bg-[var(--kit-chip-ink-bg)] text-[var(--kit-chip-ink-fg)]\",\n};\nconst badgeSizes = { sm: \"h-[18px] px-1.5 text-kit-2xs\", md: \"h-5 px-1.5 text-kit-xs\", lg: \"h-6 px-2 text-kit-xs\" };\nexport type BadgeTone = keyof typeof badgeTones;\nexport type BadgeSize = keyof typeof badgeSizes;\n\nexport function badgeVariants({ tone, size }: { tone?: BadgeTone | null; size?: BadgeSize | null } = {}) {\n  return cn(\n    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium [&_svg]:size-3\",\n    badgeTones[tone ?? \"neutral\"],\n    badgeSizes[size ?? \"md\"],\n  );\n}\n\nexport function Badge({\n  className,\n  tone,\n  size,\n  dot,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement> & { tone?: BadgeTone | null; size?: BadgeSize | null; dot?: boolean }) {\n  return (\n    <span className={cn(badgeVariants({ tone, size }), className)} {...props}>\n      {dot ? <span aria-hidden className=\"size-1.5 rounded-full bg-current\" /> : null}\n      {children}\n    </span>\n  );\n}\n\n/* ── Status pill: the single source for publish states ─────────────────── */\nexport type PublishStatus =\n  | \"published\"\n  | \"draft\"\n  | \"changed\"\n  | \"held\"\n  | \"scheduled\"\n  | \"review\"\n  | \"archived\"\n  | \"error\"\n  | \"building\"\n  | \"live\"\n  | \"offline\";\nexport const statusMap: Record<PublishStatus, { label: string; tone: BadgeTone }> = {\n  published: { label: \"Published\", tone: \"success\" },\n  live: { label: \"Live\", tone: \"success\" },\n  draft: { label: \"Draft\", tone: \"neutral\" },\n  changed: { label: \"Edited\", tone: \"warning\" },\n  /** D53: live, with changes kept as draft (left out of whole-site publishes). */\n  held: { label: \"Edits held\", tone: \"neutral\" },\n  scheduled: { label: \"Scheduled\", tone: \"info\" },\n  review: { label: \"In review\", tone: \"info\" },\n  archived: { label: \"Archived\", tone: \"outline\" },\n  error: { label: \"Failed\", tone: \"danger\" },\n  building: { label: \"Building\", tone: \"info\" },\n  offline: { label: \"Offline\", tone: \"neutral\" },\n};\nexport function StatusPill({\n  status,\n  label,\n  className,\n  size = \"md\",\n}: {\n  status: PublishStatus;\n  label?: string;\n  className?: string;\n  size?: BadgeSize;\n}) {\n  const s = statusMap[status];\n  return (\n    <Badge tone={s.tone} size={size} className={className}>\n      <span\n        aria-hidden\n        data-pulse={status === \"building\" || status === \"live\" ? \"\" : undefined}\n        className={cn(\n          \"size-1.5 rounded-full bg-current\",\n          // V2 pulse-dot: opacity 1 → .45 and scale 1 → .85, 1.8s ease-in-out (keyframe kit-pulse-dot in kit.css)\n          (status === \"building\" || status === \"live\") && \"animate-[kit-pulse-dot_1.8s_ease-in-out_infinite] motion-reduce:animate-none\",\n        )}\n      />\n      {label ?? s.label}\n    </Badge>\n  );\n}\n\n/* ── Kbd ───────────────────────────────────────────────────────────────── */\nexport function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return (\n    <kbd\n      className={cn(\n        \"inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Avatar (used by TrayMeta) ─────────────────────────────────────────── */\n// --kit-avatar-1…10: deep tones with white initials in light, calm lifted tones with dark initials in dark\n// (--kit-avatar-on, ≥ 5:1 both), set in kit.css. colorFor() keeps the light hex as a fallback for a value used outside a kit scope.\nconst AVATAR_LIGHT = [\"#c2410c\", \"#be185d\", \"#7e22ce\", \"#4338ca\", \"#1d4ed8\", \"#047857\", \"#b45309\", \"#0369a1\", \"#a21caf\", \"#6d28d9\"];\nconst avatarPalette = AVATAR_LIGHT.map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);\n/** One literal class per slot (Tailwind only sees whole class names); kit.css swaps the tone in dark. */\nconst AVATAR_BG = [\n  \"bg-[var(--kit-avatar-1)]\",\n  \"bg-[var(--kit-avatar-2)]\",\n  \"bg-[var(--kit-avatar-3)]\",\n  \"bg-[var(--kit-avatar-4)]\",\n  \"bg-[var(--kit-avatar-5)]\",\n  \"bg-[var(--kit-avatar-6)]\",\n  \"bg-[var(--kit-avatar-7)]\",\n  \"bg-[var(--kit-avatar-8)]\",\n  \"bg-[var(--kit-avatar-9)]\",\n  \"bg-[var(--kit-avatar-10)]\",\n];\nconst AVATAR_ON = \"text-[var(--kit-avatar-on)]\";\nfunction slotFor(seed: string) {\n  let h = 0;\n  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n  return h % AVATAR_LIGHT.length;\n}\n/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */\nexport function colorFor(seed: string) {\n  return avatarPalette[slotFor(seed)];\n}\nexport function initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .map((p) => p[0])\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase();\n}\n/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */\nexport function avatarRingSpread({ ring, ringWidth = 2, ringAccent }: { ring?: string; ringWidth?: number; ringAccent?: string }) {\n  return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;\n}\nexport function Avatar({\n  name,\n  src,\n  size = 24,\n  className,\n  ring,\n  ringWidth = 2,\n  ringAccent,\n  square,\n  status,\n  decorative,\n}: {\n  name: string;\n  /** a11y: true when the person's name is already shown as text next to the avatar */\n  decorative?: boolean;\n  src?: string;\n  size?: number;\n  className?: string;\n  /** separating ring colour, drawn as box-shadow so the image keeps its full size (D34) */\n  ring?: string;\n  ringWidth?: number;\n  /** optional 1px outer ring outside `ring` (e.g. a presence colour) */\n  ringAccent?: string;\n  square?: boolean;\n  status?: \"online\" | \"away\" | \"offline\";\n}) {\n  // The ring is a box-shadow, which paints OUTSIDE the element's box. The wrapper reserves that band with padding, so\n  // the face and ring sit wholly inside the avatar's layout box and a clipping ancestor never shaves them.\n  const spread = avatarRingSpread({ ring, ringWidth, ringAccent });\n  return (\n    <span className=\"relative inline-flex shrink-0\" style={spread ? { padding: spread } : undefined}>\n      <AvatarPrimitive.Root\n        style={{\n          width: size,\n          height: size,\n          boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : \"\"}` : undefined,\n        }}\n        className={cn(\n          \"inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted\",\n          square ? \"rounded-kit-md\" : \"rounded-full\",\n          className,\n        )}\n      >\n        {src ? <AvatarPrimitive.Image src={src} alt={decorative ? \"\" : name} className=\"size-full object-cover\" /> : null}\n        <AvatarPrimitive.Fallback\n          delay={src ? 300 : undefined}\n          aria-hidden={decorative || undefined}\n          style={{ fontSize: Math.max(9, Math.round(size * 0.4)) }}\n          className={cn(\"flex size-full items-center justify-center font-semibold\", AVATAR_BG[slotFor(name)], AVATAR_ON)}\n        >\n          {initials(name)}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n      {status ? (\n        <span\n          // inside the box (never -1px outside it), offset past any reserved ring band\n          style={spread ? { right: spread, bottom: spread } : undefined}\n          className={cn(\n            \"absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-kit-surface\",\n            status === \"online\" ? \"bg-kit-success\" : status === \"away\" ? \"bg-kit-warning\" : \"bg-kit-fg-4\",\n          )}\n        />\n      ) : null}\n    </span>\n  );\n}\n\n/**\n * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack\n * sits on; first face on top; a +N pill names the rest on hover.\n */\nexport function AvatarStack({\n  people,\n  max = 4,\n  size = 24,\n  ringColor = \"var(--kit-avatar-ring, var(--kit-surface))\",\n  className,\n  label,\n}: {\n  people: { name: string; src?: string; color?: string }[];\n  max?: number;\n  size?: number;\n  ringColor?: string;\n  className?: string;\n  label?: string;\n}) {\n  const shown = people.slice(0, max);\n  const hidden = people.slice(shown.length);\n  const step = Math.round(size * 0.25);\n  const band = avatarRingSpread({ ring: ringColor });\n  const box = size + band * 2;\n  const vars = {\n    \"--stack-ov\": `-${step + band * 2}px`,\n    \"--stack-ov-open\": `-${Math.max(1, Math.round(step * 0.35)) + band * 2}px`,\n  } as React.CSSProperties;\n  const slot =\n    \"relative inline-flex shrink-0 rounded-full transition-[margin,transform] duration-150 ease-out [&:not(:first-child)]:ml-[var(--stack-ov)] group-hover/stack:[&:not(:first-child)]:ml-[var(--stack-ov-open)] hover:!z-30 hover:-translate-y-0.5 motion-reduce:transition-none\";\n  return (\n    <div\n      role=\"group\"\n      aria-label={label ?? `${people.length} ${people.length === 1 ? \"person\" : \"people\"}: ${people.map((p) => p.name).join(\", \")}`}\n      style={vars}\n      className={cn(\"group/stack isolate flex shrink-0 items-center\", className)}\n    >\n      {shown.map((p, i) => (\n        <HintTooltip key={p.name + i} content={p.name}>\n          <span style={{ zIndex: shown.length - i + 1, width: box, height: box }} className={slot}>\n            <Avatar name={p.name} src={p.src} size={size} ring={ringColor} decorative />\n          </span>\n        </HintTooltip>\n      ))}\n      {hidden.length ? (\n        <HintTooltip content={hidden.map((p) => p.name).join(\", \")}>\n          <span style={{ zIndex: 1, width: box, height: box, padding: band }} className={slot}>\n            <span\n              style={{ width: size, height: size, boxShadow: `0 0 0 ${band}px ${ringColor}`, fontSize: Math.max(9, Math.round(size * 0.38)) }}\n              className=\"inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2\"\n            >\n              +{hidden.length}\n            </span>\n          </span>\n        </HintTooltip>\n      ) : null}\n    </div>\n  );\n}\n\n/* ── Card ──────────────────────────────────────────────────────────────── */\nexport function Card({ className, interactive, ...props }: React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean }) {\n  return (\n    <div\n      className={cn(\n        \"rounded-kit-xl border border-kit-line bg-kit-surface\",\n        interactive && \"cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-kit-line-strong hover:shadow-kit-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport function CardHeader({\n  title,\n  description,\n  actions,\n  icon,\n  className,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  icon?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-start justify-between gap-3 px-4 pt-4\", className)}>\n      <div className=\"flex min-w-0 items-start gap-2.5\">\n        {icon ? <span className=\"mt-0.5 flex text-kit-fg-2 [&_svg]:size-4\">{icon}</span> : null}\n        <div className=\"min-w-0\">\n          <h2 className=\"text-kit-base font-semibold text-kit-fg\">{title}</h2>\n          {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n      </div>\n      {actions ? <div className=\"flex shrink-0 items-center gap-1.5\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Separator ─────────────────────────────────────────────────────────── */\nexport function Separator({ vertical, className }: { vertical?: boolean; className?: string }) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      className={cn(vertical ? \"h-4 w-px bg-kit-line\" : \"h-px w-full bg-kit-line\", className)}\n    />\n  );\n}\n\n/* ── Skeleton ──────────────────────────────────────────────────────────── */\n/** V2 .skeleton: a --skeleton → --skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */\nexport const SKELETON =\n  \"bg-[linear-gradient(90deg,var(--kit-skeleton)_0,var(--kit-skeleton-shine)_40%,var(--kit-skeleton)_80%)] bg-[length:800px_100%] animate-[kit-shimmer_1.6s_linear_infinite] motion-reduce:animate-none\";\nexport function Skeleton({ className }: { className?: string }) {\n  return <div aria-hidden className={cn(SKELETON, \"rounded-kit-md\", className)} />;\n}\n\n/* ── Empty state ───────────────────────────────────────────────────────── */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  actions,\n  className,\n  compact,\n}: {\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  className?: string;\n  compact?: boolean;\n}) {\n  return (\n    // D15: compact = 16px icon (no tile), two lines, one action.\n    <div className={cn(\"flex flex-col items-center justify-center text-center\", compact ? \"gap-2 py-8\" : \"gap-2.5 py-12\", className)}>\n      {icon ? <span className=\"flex text-kit-fg-3 [&_svg]:size-4\">{icon}</span> : null}\n      <div className=\"max-w-sm\">\n        <h2 className=\"text-kit-base font-medium text-kit-fg\">{title}</h2>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"mt-1 flex flex-wrap items-center justify-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Page header (inside main surface) ─────────────────────────────────── */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  meta,\n  className,\n  eyebrow,\n  as: Heading = \"h1\",\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  meta?: React.ReactNode;\n  className?: string;\n  eyebrow?: React.ReactNode;\n  /** Heading level: h1 in the app; demos nested in documentation pass a lower level. */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n}) {\n  return (\n    <div className={cn(\"flex flex-wrap items-end justify-between gap-x-6 gap-y-3\", className)}>\n      <div className=\"min-w-0\">\n        {eyebrow ? <div className=\"mb-1.5 text-kit-xs font-medium text-kit-fg-3\">{eyebrow}</div> : null}\n        <div className=\"flex items-center gap-2.5\">\n          <Heading className=\"truncate text-kit-xl font-semibold tracking-[-0.015em] text-kit-fg\">{title}</Heading>\n          {meta}\n        </div>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */\nexport function SettingsSection({\n  title,\n  description,\n  children,\n  footer,\n  className,\n  danger,\n  actions,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  danger?: boolean;\n  actions?: React.ReactNode;\n}) {\n  return (\n    <section className={cn(\"overflow-hidden rounded-kit-xl border bg-kit-surface\", danger ? \"border-kit-danger-line\" : \"border-kit-line\", className)}>\n      <div className=\"flex items-start justify-between gap-4 px-5 pt-5\">\n        <div>\n          <h2 className={cn(\"text-kit-base font-semibold\", danger ? \"text-kit-danger-fg\" : \"text-kit-fg\")}>{title}</h2>\n          {description ? <p className=\"mt-0.5 max-w-xl text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n        {actions}\n      </div>\n      {children ? <div className=\"flex flex-col gap-4 px-5 pb-5 pt-4\">{children}</div> : <div className=\"h-5\" />}\n      {footer ? (\n        // --subtle-2: half a step between surface and subtle\n        <div className=\"flex items-center justify-between gap-3 border-t border-kit-line bg-[var(--kit-subtle-2)] px-5 py-3 text-kit-sm text-kit-fg-2\">\n          {footer}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/* ── Stat ──────────────────────────────────────────────────────────────── */\nexport function Stat({\n  label,\n  value,\n  delta,\n  hint,\n  className,\n}: {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  delta?: { value: string; positive?: boolean };\n  hint?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <span className=\"text-kit-sm text-kit-fg-2\">{label}</span>\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-kit-xl font-semibold tabular-nums tracking-[-0.01em] text-kit-fg\">{value}</span>\n        {delta ? (\n          <span className={cn(\"text-kit-xs font-medium tabular-nums\", delta.positive ? \"text-kit-success-fg\" : \"text-kit-danger-fg\")}>\n            {delta.positive ? \"↑\" : \"↓\"} {delta.value}\n          </span>\n        ) : null}\n      </div>\n      {hint ? <span className=\"text-kit-xs text-kit-fg-3\">{hint}</span> : null}\n    </div>\n  );\n}\n\n/* ── Table (simple, styled) ────────────────────────────────────────────── */\nexport function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {\n  return <table className={cn(\"w-full border-separate border-spacing-0 text-kit-sm\", className)} {...props} />;\n}\nexport function Th({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {\n  // a11y: an icon/action column header still needs text for screen readers (empty-table-header)\n  const empty = children == null || children === false || children === \"\";\n  return (\n    <th\n      className={cn(\n        \"sticky top-0 z-[1] h-10 border-b border-kit-line bg-kit-surface px-3 text-left text-kit-sm font-normal text-kit-fg-3 first:pl-4 last:pr-4\",\n        className,\n      )}\n      {...props}\n    >\n      {empty ? <span className=\"sr-only\">{props[\"aria-label\"] ?? \"Actions\"}</span> : children}\n    </th>\n  );\n}\nexport function Td({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {\n  return <td className={cn(\"h-14 border-b border-kit-line-subtle px-3 text-kit-fg first:pl-4 last:pr-4\", className)} {...props} />;\n}\nexport function Tr({ className, selected, ...props }: React.HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {\n  return (\n    <tr\n      data-selected={selected ? \"true\" : undefined}\n      className={cn(\"group/row transition-colors hover:bg-kit-subtle data-[selected=true]:bg-kit-accent-softer\", className)}\n      {...props}\n    />\n  );\n}\n\n/* ── Dot / live indicator ──────────────────────────────────────────────── */\nconst dotTones = {\n  success: \"bg-kit-success\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  neutral: \"bg-kit-fg-4\",\n  accent: \"bg-kit-accent\",\n  info: \"bg-kit-info\",\n};\nexport function Dot({ tone = \"success\", pulse, className }: { tone?: keyof typeof dotTones; pulse?: boolean; className?: string }) {\n  const c = dotTones[tone];\n  return (\n    <span className={cn(\"relative inline-flex size-2 shrink-0\", className)}>\n      {pulse ? <span className={cn(\"absolute inset-0 animate-ping rounded-full opacity-50 motion-reduce:animate-none\", c)} /> : null}\n      <span className={cn(\"relative inline-flex size-2 rounded-full\", c)} />\n    </span>\n  );\n}\n"],"mappings":"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"}

package/ui/expanded-editor-modal.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
+ * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
+ * wide, header = breadcrumb (… › Field) + a quiet meta line (word count, rows) + Done. Esc closes (menus and popovers
+ * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
+ * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
+ * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
+ * shifts left (`data-floating-dock`). Esc closes that panel before the modal.
+ */
+import * as React from "react";
+export interface ExpandedEditorModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** root → current, e.g. ["Alternating feature rows", "Thin walls…", "Body"]; the last one is the title */
+    crumbs: string[];
+    /** quiet right-side line in the header ("312 words", "6 rows · 4 columns") */
+    meta?: React.ReactNode;
+    /** "reading" centres a ~720px column (rich text); "wide" uses the full dialog width (tables) */
+    layout?: "reading" | "wide";
+    /** where focus lands on open (defaults to the first editable surface) */
+    initialFocus?: () => HTMLElement | null | undefined;
+    /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */
+    returnFocus?: () => HTMLElement | null | undefined;
+    children: React.ReactNode;
+}
+export declare function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout, initialFocus, returnFocus, children }: ExpandedEditorModalProps): import("react/jsx-runtime").JSX.Element;