@bettercms-ai/kit 1.0.0 → 2.0.0

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

@@ -1,9 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { HintTooltip } from "./button.js";
+import { Tooltip } from "./overlay.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar } from "@base-ui/react/avatar";
-//#region src/kit/ui/display.tsx
+import { IconClock } from "@tabler/icons-react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/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",
@@ -20,7 +22,7 @@ var badgeSizes = {
 	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"]);
+	return cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium transition-colors duration-150 ease-out [&_svg]:size-3", badgeTones[tone ?? "neutral"], badgeSizes[size ?? "md"]);
 }
 function Badge({ className, tone, size, dot, children, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
@@ -48,13 +50,15 @@ var statusMap = {
 		label: "Draft",
 		tone: "neutral"
 	},
+	/** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */
 	changed: {
-		label: "Edited",
-		tone: "warning"
+		label: "Published",
+		tone: "success"
 	},
+	/** D53: live, with changes kept as draft (left out of whole-site publishes). */
 	held: {
-		label: "Edits held",
-		tone: "neutral"
+		label: "Published",
+		tone: "success"
 	},
 	scheduled: {
 		label: "Scheduled",
@@ -81,26 +85,49 @@ var statusMap = {
 		tone: "neutral"
 	}
 };
-function StatusPill({ status, label, className, size = "md" }) {
+function StatusPill({ status, label, tone, className, size = "md" }) {
 	const s = statusMap[status];
 	return /* @__PURE__ */ jsxs(Badge, {
-		tone: s.tone,
+		tone: 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")
+			className: cn("size-1.5 rounded-full bg-current", (status === "building" || status === "live") && "animate-kit-pulse-dot")
 		}), label ?? s.label]
 	});
 }
+var shortDate = (iso) => new Date(iso).toLocaleDateString("en-GB", {
+	day: "numeric",
+	month: "short"
+});
+function StatusMark({ status, at, className }) {
+	const label = `${status === "changed" || status === "held" ? "Published, with unpublished changes" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : ""}`;
+	const mark = status === "published" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-kit-success" }) : status === "changed" || status === "held" ? /* @__PURE__ */ jsx("span", {
+		className: "relative size-2 rounded-full bg-kit-success",
+		children: /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface" })
+	}) : status === "scheduled" ? /* @__PURE__ */ jsx(IconClock, {
+		className: "size-3 text-kit-info-fg",
+		stroke: 2
+	}) : status === "review" ? /* @__PURE__ */ jsx("span", { className: "size-[7px] rotate-45 rounded-[1px] bg-kit-info" }) : status === "archived" ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-kit-xs border border-kit-fg-4" }) : /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full border-[1.5px] border-kit-fg-4" });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label,
+			className: cn("flex size-4 shrink-0 items-center justify-center", className),
+			children: mark
+		})
+	});
+}
 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 = [
+var avatarPalette = [
 	"#c2410c",
 	"#be185d",
 	"#7e22ce",
@@ -111,30 +138,12 @@ var AVATAR_LIGHT = [
 	"#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;
-}
+].map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);
 /** 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)];
+	let h = 0;
+	for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
+	return avatarPalette[h % avatarPalette.length];
 }
 function initials(name) {
 	return name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
@@ -143,7 +152,7 @@ function initials(name) {
 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 }) {
+function Avatar({ name, src, size = 24, className, ring, ringWidth = 2, ringAccent, square, status, decorative }) {
 	const spread = avatarRingSpread({
 		ring,
 		ringWidth,
@@ -152,22 +161,25 @@ function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAc
 	return /* @__PURE__ */ jsxs("span", {
 		className: "relative inline-flex shrink-0",
 		style: spread ? { padding: spread } : void 0,
-		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
+		children: [/* @__PURE__ */ jsxs(Avatar$1.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, {
+			children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
 				src,
 				alt: decorative ? "" : name,
 				className: "size-full object-cover"
-			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+			}) : null, /* @__PURE__ */ jsx(Avatar$1.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),
+				style: {
+					background: colorFor(name),
+					fontSize: Math.max(9, Math.round(size * .4))
+				},
+				className: "flex size-full items-center justify-center font-semibold text-kit-avatar-on",
 				children: initials(name)
 			})]
 		}), status ? /* @__PURE__ */ jsx("span", {
@@ -183,7 +195,7 @@ function Avatar$1({ name, src, size = 24, className, ring, ringWidth = 2, ringAc
 * 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 }) {
+function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar-ring)", className, label }) {
 	const shown = people.slice(0, max);
 	const hidden = people.slice(shown.length);
 	const step = Math.round(size * .25);
@@ -208,7 +220,7 @@ function AvatarStack({ people, max = 4, size = 24, ringColor = "var(--kit-avatar
 					height: box
 				},
 				className: slot,
-				children: /* @__PURE__ */ jsx(Avatar$1, {
+				children: /* @__PURE__ */ jsx(Avatar, {
 					name: p.name,
 					src: p.src,
 					size,
@@ -277,12 +289,11 @@ function Separator({ vertical, className }) {
 		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";
+/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */
 function Skeleton({ className }) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
-		className: cn(SKELETON, "rounded-kit-md", className)
+		className: cn("skeleton rounded-kit-md", className)
 	});
 }
 function EmptyState({ icon, title, description, actions, className, compact }) {
@@ -435,10 +446,10 @@ 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) })]
+		children: [pulse ? /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-50", 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 };
+export { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, Separator, SettingsSection, Skeleton, Stat, StatusMark, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap };
 
 //# sourceMappingURL=display.js.map

package/dist/ui/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","names":[],"sources":["../../src/ui/display.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"../lib/cn\";\nimport { IconClock } from \"@tabler/icons-react\";\nimport { HintTooltip } from \"./button\";\nimport { Tooltip } from \"./overlay\";\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 transition-colors duration-150 ease-out [&_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  /** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */\n  changed: { label: \"Published\", tone: \"success\" },\n  /** D53: live, with changes kept as draft (left out of whole-site publishes). */\n  held: { label: \"Published\", tone: \"success\" },\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  tone,\n  className,\n  size = \"md\",\n}: {\n  status: PublishStatus;\n  label?: string;\n  /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its \"Edited\" amber pill. Remove when it adopts D72. */\n  tone?: BadgeTone;\n  className?: string;\n  size?: BadgeSize;\n}) {\n  const s = statusMap[status];\n  return (\n    <Badge tone={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\",\n        )}\n      />\n      {label ?? s.label}\n    </Badge>\n  );\n}\n\n/* ── Status mark: a row's publish state as a 16px glyph (V2 nav/panes.tsx StatusMark) ── */\nexport type MarkStatus = \"published\" | \"changed\" | \"held\" | \"draft\" | \"scheduled\" | \"review\" | \"archived\";\nconst shortDate = (iso: string) => new Date(iso).toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"short\" });\nexport function StatusMark({ status, at, className }: { status: MarkStatus; at?: string; className?: string }) {\n  const label = `${status === \"changed\" || status === \"held\" ? \"Published, with unpublished changes\" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : \"\"}`;\n  const mark =\n    status === \"published\" ? (\n      <span className=\"size-2 rounded-full bg-kit-success\" />\n    ) : status === \"changed\" || status === \"held\" ? (\n      // still Published; unpublished changes are a fact about it, shown as a small amber dot, never a status of their own\n      <span className=\"relative size-2 rounded-full bg-kit-success\"><span className=\"absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface\" /></span>\n    ) : status === \"scheduled\" ? (\n      <IconClock className=\"size-3 text-kit-info-fg\" stroke={2} />\n    ) : status === \"review\" ? (\n      // §E1.9: In review wears the info tone everywhere (V2 code drew the accent)\n      <span className=\"size-[7px] rotate-45 rounded-[1px] bg-kit-info\" />\n    ) : status === \"archived\" ? (\n      <span className=\"size-2 rounded-kit-xs border border-kit-fg-4\" />\n    ) : (\n      <span className=\"size-2 rounded-full border-[1.5px] border-kit-fg-4\" />\n    );\n  return (\n    <Tooltip content={label}>\n      <span role=\"img\" aria-label={label} className={cn(\"flex size-4 shrink-0 items-center justify-center\", className)}>\n        {mark}\n      </span>\n    </Tooltip>\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), declared in index.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/** 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  let h = 0;\n  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n  return avatarPalette[h % avatarPalette.length];\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={{ background: colorFor(name), fontSize: Math.max(9, Math.round(size * 0.4)) }}\n          className=\"flex size-full items-center justify-center font-semibold text-kit-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)\",\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 --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */\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\", 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 → dist/ui}/expanded-editor-modal.d.ts

@@ -1,7 +1,7 @@
 /**
  * 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
+ * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, 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
@@ -13,7 +13,7 @@ export interface ExpandedEditorModalProps {
     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") */
+    /** quiet right-side line in the header ("12 lines", "6 rows · 4 columns") */
     meta?: React.ReactNode;
     /** "reading" centres a ~720px column (rich text); "wide" uses the full dialog width (tables) */
     layout?: "reading" | "wide";

package/{ui → dist/ui}/expanded-editor-modal.js

@@ -1,17 +1,17 @@
 import { cn } from "../lib/cn.js";
-import { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import { KIT_SCOPE } from "./surfaces.js";
 import { MODAL_LAYER } from "./tooltip-root.js";
 import { Button } from "./button.js";
 import { FLOATING_LAYER, Tooltip } from "./overlay.js";
 import * as React from "react";
-import { IconChevronRight } from "@tabler/icons-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronRight } from "@tabler/icons-react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/kit/ui/expanded-editor-modal.tsx
+//#region src/ui/expanded-editor-modal.tsx
 /**
 * 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
+* wide, header = breadcrumb (… › Field) + a quiet meta line (lines, 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
@@ -61,7 +61,7 @@ function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "readi
 		onOpenChange: change,
 		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 			...KIT_SCOPE,
-			className: "fixed inset-0 z-[70] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+			className: "fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
 		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			...KIT_SCOPE,
 			[MODAL_LAYER]: "",
@@ -82,7 +82,7 @@ function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "readi
 				if (e.key !== "Escape" && e.key !== "F6") e.stopPropagation();
 			},
 			"data-expanded-editor": "",
-			className: cn("fixed inset-4 z-[71] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", FLOATING_LINE, SURFACE_RAISED, "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
+			className: cn("fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
 			children: [/* @__PURE__ */ jsxs("header", {
 				className: "flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3",
 				children: [

package/dist/ui/expanded-editor-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-editor-modal.js","names":[],"sources":["../../src/ui/expanded-editor-modal.tsx"],"sourcesContent":["/**\n * ExpandedEditorModal (CPO D49): the ONE surface for \"expand this editor\": rich-text fields (⤢ in the toolbar / label row)\n * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px\n * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers\n * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field\n * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.\n * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column\n * shifts left (`data-floating-dock`). Esc closes that panel before the modal.\n */\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { FLOATING_LAYER, Tooltip } from \"./overlay\";\nimport { KIT_SCOPE } from \"./surfaces\";\nimport { MODAL_LAYER } from \"./tooltip-root\";\n\nexport interface ExpandedEditorModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** root → current, e.g. [\"Alternating feature rows\", \"Thin walls…\", \"Body\"]; the last one is the title */\n  crumbs: string[];\n  /** quiet right-side line in the header (\"12 lines\", \"6 rows · 4 columns\") */\n  meta?: React.ReactNode;\n  /** \"reading\" centres a ~720px column (rich text); \"wide\" uses the full dialog width (tables) */\n  layout?: \"reading\" | \"wide\";\n  /** where focus lands on open (defaults to the first editable surface) */\n  initialFocus?: () => HTMLElement | null | undefined;\n  /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */\n  returnFocus?: () => HTMLElement | null | undefined;\n  children: React.ReactNode;\n}\n\n/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes\n *  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */\nconst OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;\nconst LIST = \"[role=menu],[role=listbox]\";\n\n/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */\nfunction isOpenList(el: Element) {\n  if (el.matches(\"[data-open],[data-state=open]\")) return true;\n  return !!el.id && !!document.querySelector(`[aria-controls~=\"${CSS.escape(el.id)}\"][aria-expanded=true]`);\n}\nconst openListIn = (root: ParentNode | null | undefined) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);\n\nexport function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = \"reading\", initialFocus, returnFocus, children }: ExpandedEditorModalProps) {\n  const title = crumbs[crumbs.length - 1] ?? \"Editor\";\n  const parents = crumbs.slice(0, -1);\n  const body = React.useRef<HTMLDivElement>(null);\n  const opener = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    if (open) opener.current = document.activeElement as HTMLElement | null;\n  }, [open]);\n\n  const change = (next: boolean, details: DialogPrimitive.Root.ChangeEventDetails) => {\n    if (!next && details.reason === \"outside-press\") {\n      // the editor's own floating layers (selection toolbar, slash menu) are portalled to <body>, outside this dialog:\n      // clicks there belong to the editor, so they never close the modal\n      const t = details.event.target;\n      if (t instanceof Element && t.closest(FLOATING_LAYER)) return details.cancel();\n    }\n    if (!next && details.reason === \"escape-key\") {\n      const e = details.event;\n      const t = e.target instanceof Element ? e.target : null;\n      // an open slash menu / block picker inside the editor, or a floating menu over it, closes first\n      const list = t?.closest(LIST);\n      const inner = openListIn(body.current) || Array.from(document.querySelectorAll(FLOATING_LAYER)).some(openListIn);\n      if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || (list && isOpenList(list)) || inner) return details.cancel();\n      // then a component's properties panel open in here (D54): it closes, the modal stays\n      const panel = body.current?.parentElement?.querySelector(\"[data-floating-panel]\");\n      if (panel) {\n        details.cancel();\n        (e as KeyboardEvent & { bcmsPanelHandled?: boolean }).bcmsPanelHandled = true;\n        panel.dispatchEvent(new CustomEvent(\"floatingpanel:escape\"));\n        return;\n      }\n    }\n    onOpenChange(next);\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={change}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          {...KIT_SCOPE}\n          className=\"fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n        />\n        <DialogPrimitive.Popup\n          {...KIT_SCOPE}\n          {...{ [MODAL_LAYER]: \"\" }}\n          aria-describedby={undefined}\n          initialFocus={() => {\n            // focus lands INSIDE at once (so the trap has a home), then moves to the editor once it has mounted.\n            // Base UI focuses the returned element in a frame of its own, so the editor waits one frame longer.\n            requestAnimationFrame(() =>\n              requestAnimationFrame(() => {\n                const el = initialFocus?.() ?? body.current?.querySelector<HTMLElement>(\"[contenteditable=true], [data-cell], input, textarea\");\n                el?.focus({ preventScroll: true });\n              }),\n            );\n            return body.current;\n          }}\n          finalFocus={() => {\n            // back to whatever opened it, or, when that is gone or hidden, to the host's fallback (the field itself)\n            const o = opener.current;\n            const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : (returnFocus?.() ?? o);\n            requestAnimationFrame(() => target?.focus({ preventScroll: true }));\n            return false;\n          }}\n          // keys typed in the editor never reach the app behind it (canvas shortcuts, form Esc); F6 still moves to a panel\n          onKeyDown={(e) => {\n            if (e.key !== \"Escape\" && e.key !== \"F6\") e.stopPropagation();\n          }}\n          data-expanded-editor=\"\"\n          className={cn(\n            \"fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10\",\n            \"data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]\",\n            \"data-[open]:animate-kit-pop-in\",\n          )}\n        >\n          <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3\">\n            <nav aria-label=\"Field path\" className=\"flex min-w-0 flex-1 items-center gap-1 text-kit-sm\">\n              {parents.map((c, i) => (\n                <React.Fragment key={`${c}-${i}`}>\n                  <Tooltip content={c} side=\"bottom\">\n                    <span className=\"max-w-[220px] truncate text-kit-fg-3\">{c}</span>\n                  </Tooltip>\n                  <IconChevronRight className=\"size-3 shrink-0 text-kit-fg-4\" stroke={1.5} aria-hidden />\n                </React.Fragment>\n              ))}\n              {/* the field title names the dialog (\"Body\"), not the nav's \"Field path\" */}\n              <DialogPrimitive.Title render={<span aria-current=\"location\" />} className=\"min-w-0 truncate font-medium text-kit-fg\">\n                {title}\n              </DialogPrimitive.Title>\n            </nav>\n            {meta ? <span className=\"hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline\">{meta}</span> : null}\n            <DialogPrimitive.Close render={<Button size=\"sm\" variant=\"primary\" />}>Done</DialogPrimitive.Close>\n          </header>\n          <div ref={body} tabIndex={-1} data-expanded-body=\"\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none\">\n            {layout === \"reading\" ? (\n              <div className=\"mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10\">{children}</div>\n            ) : (\n              <div className=\"flex h-full min-h-0 flex-col p-4\">{children}</div>\n            )}\n          </div>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/field-context.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-//#region src/kit/ui/field-context.ts
+//#region src/ui/field-context.ts
 var FieldIdContext = React.createContext(void 0);
 function useFieldId() {
 	return React.useContext(FieldIdContext);

package/dist/ui/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","names":[],"sources":["../../src/ui/field-context.ts"],"sourcesContent":["import * as React from \"react\";\n\n/* The Field wrapper (input.tsx) publishes its label wiring here, so controls in other files (Switch, Select) can read it\n   without importing input.tsx. V2 keeps these contexts inside ui/input.tsx; input.tsx should import them from this file. */\n\nexport const FieldIdContext = React.createContext<string | undefined>(undefined);\nexport function useFieldId() {\n  return React.useContext(FieldIdContext);\n}\n\nexport const FieldLabelledByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldLabelledBy() {\n  return React.useContext(FieldLabelledByContext);\n}\n\nexport const FieldDescribedByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldDescribedBy() {\n  return React.useContext(FieldDescribedByContext);\n}\n\n/* `<label for>` without a <label> element. V2 draws no label on an inline-list row, so the row publishes its sr-only\n   name here and the kit control whose id is `htmlFor` (Input, Textarea, Select, Switch, Checkbox) points its\n   aria-labelledby at `labelId`, unless the control carries its own aria-label / aria-labelledby. */\nexport const FieldLabelForContext = React.createContext<{ htmlFor: string; labelId: string } | undefined>(undefined);\nexport function useLabelFor(id: string | undefined) {\n  const ctx = React.useContext(FieldLabelForContext);\n  return ctx && id && ctx.htmlFor === id ? ctx.labelId : undefined;\n}\n"],"mappings":";;AAKA,IAAa,iBAAiB,MAAM,cAAkC,KAAA,CAAS;AAC/E,SAAgB,aAAa;CAC3B,OAAO,MAAM,WAAW,cAAc;AACxC;AAEA,IAAa,yBAAyB,MAAM,cAAkC,KAAA,CAAS;AACvF,SAAgB,qBAAqB;CACnC,OAAO,MAAM,WAAW,sBAAsB;AAChD;AAEA,IAAa,0BAA0B,MAAM,cAAkC,KAAA,CAAS;AACxF,SAAgB,sBAAsB;CACpC,OAAO,MAAM,WAAW,uBAAuB;AACjD;AAKA,IAAa,uBAAuB,MAAM,cAAgE,KAAA,CAAS;AACnH,SAAgB,YAAY,IAAwB;CAClD,MAAM,MAAM,MAAM,WAAW,oBAAoB;CACjD,OAAO,OAAO,MAAM,IAAI,YAAY,KAAK,IAAI,UAAU,KAAA;AACzD"}

package/{ui → dist/ui}/floating-panel.d.ts

@@ -24,7 +24,7 @@ import { type MotionValue } from "framer-motion";
 export declare const NAV = 56;
 export declare const SNAP = 16;
 export declare const EDGE = 16;
-export declare const Z_FLOAT = "z-[52]";
+export declare const Z_FLOAT = "z-[var(--kit-z-float,52)]";
 export declare const EASE: readonly [0.32, 0.72, 0, 1];
 export type Rect = {
     x: number;

package/{ui → dist/ui}/floating-panel.js

@@ -1,10 +1,11 @@
 import { cn } from "../lib/cn.js";
-import { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import { eventKey } from "../lib/key-event.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue, useReducedMotion } from "framer-motion";
 import { createPortal } from "react-dom";
-//#region src/kit/ui/floating-panel.tsx
+//#region src/ui/floating-panel.tsx
 /**
 * FloatingPanel (CPO D54): ONE primitive for every non-modal window over the work surface. It owns drag, magnetic snap,
 * resize and "remember where I put it"; the ⌘J assistant (D30) and the component properties panel both use it.
@@ -26,9 +27,10 @@ import { createPortal } from "react-dom";
 *   pickers and field drafts first), F6 moves focus between the panel and `focusBack()`. Marked `data-floating-layer`.
 *   Layering: canvas toolbars < panel 52 (= the D30 window) < sheets 55 < dialogs 60 < menus 80 < tooltips 90.
 */
-var SHADOW_SHEET_R = "shadow-[-12px_0_32px_-16px_rgb(0_0_0/0.18)] [.dark_&]:shadow-[-12px_0_32px_-16px_oklch(0.12_0.01_286/0.5)]";
-var SHADOW_SHEET_B = "shadow-[0_-16px_40px_-12px_rgb(0_0_0/0.2)] [.dark_&]:shadow-[0_-16px_40px_-12px_oklch(0.12_0.01_286/0.5)]";
-var Z_FLOAT = "z-[52]";
+var NAV = 56;
+var SNAP = 16;
+var EDGE = 16;
+var Z_FLOAT = "z-[var(--kit-z-float,52)]";
 var EASE = [
 	.32,
 	.72,
@@ -42,6 +44,16 @@ var NO_GUIDES = {
 var vw = () => window.innerWidth;
 var vh = () => window.innerHeight;
 var clampN = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function fitRect(g, b) {
+	const w = clampN(g.w, b.minW, Math.max(b.minW, b.maxW()));
+	const h = clampN(g.h, b.minH, Math.max(b.minH, b.maxH()));
+	return {
+		w,
+		h,
+		x: clampN(g.x, b.pad, Math.max(b.pad, vw() - w - b.pad)),
+		y: clampN(g.y, b.top, Math.max(b.top, vh() - h - b.pad))
+	};
+}
 /** Clamp to the viewport, then pull any edge within SNAP px of a line onto it (the nearest wins). */
 function snapRect(x, y, w, h, lines, b) {
 	let nx = clampN(x, b.pad, Math.max(b.pad, vw() - w - b.pad));
@@ -332,9 +344,12 @@ var SIDE_PANELS = "[data-doc-settings], [data-side-panel]";
 /** A menu, picker, popover or another dialog is open: it takes Esc first. */
 /** An open Base UI popup (popover, menu, select, combobox): it carries data-open and data-side. Kit tooltips don't count. */
 var POPUP_OPEN = "[data-open][data-side]:not([data-kit-tooltip])";
+/** A tooltip (the kit's, or the host's `data-slot="tooltip-content"`), its positioner or arrow: a hint left open never takes Esc. */
+var TOOLTIP = "[data-kit-tooltip], [data-slot=tooltip-content]";
+var isTooltip = (n) => !!n.closest(TOOLTIP) || !!n.querySelector(TOOLTIP);
 var OWNS_ESCAPE = `[role=menu],[role=listbox],[data-cell-editing],${POPUP_OPEN}`;
 function layerOpen(self) {
-	if (document.querySelector(`${POPUP_OPEN}, [data-cell-editing]`)) return true;
+	if (document.querySelector("[data-cell-editing]") || Array.from(document.querySelectorAll(POPUP_OPEN)).some((n) => !isTooltip(n))) return true;
 	const floating = (n) => n.getAttribute("role") === "menu" || !!n.closest("[data-floating-layer]:not([data-floating-panel])");
 	if (Array.from(document.querySelectorAll("[role=menu], [role=listbox]")).some((n) => n.getClientRects().length && floating(n))) return true;
 	return Array.from(document.querySelectorAll("[role=dialog]:is([data-open],[data-state=open])")).some((d) => d !== self && !d.hasAttribute("data-expanded-editor") && !d.hasAttribute("data-floating-panel") && d.id !== "assistant-panel" && !d.hasAttribute("data-doc-panel"));
@@ -357,6 +372,7 @@ var FENCE = {
 	onKeyUp: stop,
 	onContextMenu: stop
 };
+var PANEL_W = 340;
 var PANEL_MAX_AUTO_H = 560;
 var TOP_LIMIT = 72;
 var BOTTOM_GAP = 16;
@@ -670,7 +686,7 @@ var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, an
 		return () => el.removeEventListener("keydown", on);
 	}, [mode]);
 	const onKeyDown = (e) => {
-		if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() === "z") e.stopPropagation();
+		if (!(e.metaKey || e.ctrlKey) || eventKey(e) === "z") e.stopPropagation();
 	};
 	const onHeaderDown = (e) => {
 		if (mode !== "float" || e.button !== 0 || e.target.closest("button, a, input, textarea, [role=menuitem], [contenteditable]")) return;
@@ -751,7 +767,7 @@ var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, an
 			ease: EASE
 		},
 		style: { height: `${sheetH}dvh` },
-		className: cn("fixed inset-x-0 bottom-0 z-[55] flex flex-col overflow-hidden rounded-t-kit-xl border-t border-kit-line pb-[env(safe-area-inset-bottom)] text-kit-fg outline-none", SURFACE_RAISED, SHADOW_SHEET_B),
+		className: "fixed inset-x-0 bottom-0 z-[var(--kit-z-sheet,55)] flex flex-col overflow-hidden rounded-t-kit-xl border-t border-kit-line bg-kit-surface-raised pb-[env(safe-area-inset-bottom)] shadow-kit-sheet-b outline-none",
 		children: [
 			/* @__PURE__ */ jsx(SheetGrabber, {
 				height: sheetH,
@@ -779,7 +795,7 @@ var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, an
 			width: 340,
 			top: 56
 		},
-		className: cn("fixed bottom-0 right-0 z-[55] flex flex-col border-l border-kit-line text-kit-fg outline-none", SURFACE_RAISED, SHADOW_SHEET_R),
+		className: "fixed bottom-0 right-0 z-[var(--kit-z-sheet,55)] flex flex-col border-l border-kit-line bg-kit-surface-raised shadow-kit-sheet-r outline-none",
 		children: [
 			headerEl,
 			body,
@@ -807,7 +823,7 @@ var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, an
 			bottom: 0,
 			height: "55%"
 		},
-		className: cn("absolute z-[20] flex flex-col overflow-hidden text-kit-fg outline-none", SURFACE_RAISED, modalFit === "dock" ? "border-l border-kit-line" : modalFit === "overlay" ? cn("rounded-kit-xl border shadow-kit-lg", FLOATING_LINE) : cn("rounded-t-kit-xl border-t border-kit-line", SHADOW_SHEET_B)),
+		className: cn("absolute z-[20] flex flex-col overflow-hidden bg-kit-surface-raised outline-none", modalFit === "dock" ? "border-l border-kit-line" : modalFit === "overlay" ? "rounded-kit-xl border border-kit-floating-line shadow-kit-lg" : "rounded-t-kit-xl border-t border-kit-line shadow-kit-sheet-b"),
 		children: [
 			headerEl,
 			body,
@@ -834,7 +850,7 @@ var FloatingPanel = React.forwardRef(function FloatingPanel({ id, labelledBy, an
 			scale: 1
 		},
 		transition: fade,
-		className: cn("fixed flex flex-col overflow-hidden rounded-kit-xl border text-kit-fg shadow-kit-xl outline-none", SURFACE_RAISED, kbd ? "border-dashed border-[var(--kit-emphasis-line)]" : FLOATING_LINE, Z_FLOAT),
+		className: cn("fixed flex flex-col overflow-hidden rounded-kit-xl border bg-kit-surface-raised shadow-kit-xl outline-none", kbd ? "border-dashed border-[var(--kit-emphasis-line)]" : "border-kit-floating-line", Z_FLOAT),
 		children: [
 			/* @__PURE__ */ jsx(ResizeEdges, {
 				geom,
@@ -907,6 +923,6 @@ function SheetGrabber({ height, onHeight, onClose }) {
 	});
 }
 //#endregion
-export { FloatingPanel };
+export { EASE, EDGE, FloatingPanel, NAV, NO_GUIDES, PANEL_W, ResizeEdges, ResizeGrip, SNAP, SnapGuides, Z_FLOAT, clampN, fitRect, snapRect, track, useFloatingPanelPrefs, usePanelMode, vh, vw };
 
 //# sourceMappingURL=floating-panel.js.map