@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/engine/grouping.js

@@ -0,0 +1,996 @@
+import { cn } from "../lib/cn.js";
+import { KitSectionTitle, useForm, useKitEnv } from "../context.js";
+import { isObj, keyStartsWith, pathKey } from "../lib/path.js";
+import { KitIcon } from "../lib/icons.js";
+import { Segmented } from "../ui/controls.js";
+import { Menu, MenuContent, MenuItem, MenuTrigger, Tooltip } from "../ui/overlay.js";
+import { condCtx, isEmptyValue, isHidden } from "../lib/schema.js";
+import { IssueDot } from "./bits.js";
+import { PeerStack } from "./field-shell.js";
+import { groupSummary } from "./group-summary.js";
+import { SHORT_TEXT_MAX, columnSpans, isColumnField } from "../lib/columns.js";
+import { isIconImage } from "../lib/icon-image.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronDown, IconChevronRight, IconDeviceDesktop, IconDeviceLaptop, IconDeviceMobile, IconDeviceTablet, IconMessage } from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+//#region src/engine/grouping.tsx
+/**
+* GROUPING (CPO D45; V2 HEAD 9829bf1 kit/engine/grouping.tsx + the layout half of kit/engine/field-list.tsx) — the four
+* ways the Block Kit puts fields together, and the rules for nesting them.
+*
+*   Group tabs        Content · Media · Design · Settings          top of a frame only (FieldList)
+*   <FieldSection>    ──────────────────────────────────          a titled set of siblings: hairline above, 36px header,
+*                     Spacing          Top 56 · Bottom 88  ›      no box, no left rule; collapsed = one-line summary
+*   <FieldInset>      Rating line                                  a small object (≤3 simple fields): its label, then the
+*                     │ Stars [ 4.9  / 5 ]                         children behind ONE 1px --line inset line (D63). No tint,
+*                     │ Text  [ 4.9 from 2,400+ reviews ]          no box, no radius: never a box inside a line.
+*   <FieldUnit>       ┌ Shop cookware           Primary › ┐       ONE compound control (button = label + link, image + alt)
+*                     └ /products                          ┘
+*   Drill row         [▣] Desktop ›                               anything bigger, or anything one level deeper
+*
+* Nesting: section (level 1, spacing only) → inset (level 2, the inset line) → level 3+ always drills. Never two
+* containers in one level. Rhythm: field gap 16 · group gap 24, the same gap inside an inset; dense (form width ≤ 360px)
+* 12 · 20; document 20 · 32.
+* Columns (D63, `columnSpans`): side by side only for genuinely short fields (number, switch, select, date, colour, icon,
+* rating, text with max ≤ 24) AND only when the form is at least 420px wide (a container query). Everything else is full
+* width, so a text value never wraps in a cramped column.
+* `<BreakpointGroup>`: per-screen-size objects (desktop / tablet / phone) as ONE group with a segmented switcher.
+*
+* Port notes (kit vs V2): V2 token utilities carry the kit- prefix (text-fg-3 → text-kit-fg-3, bg-well →
+* bg-kit-well, border-field → border-kit-field-border); `motion/react` is `framer-motion`; V2's `scrollbar-none` and
+* `tabular` utilities are written out. V2's FieldList imports KitField directly; here it takes `renderField` so the
+* engine has no grouping ↔ kit-field import cycle.
+*/
+/** Gaps per host. `stack` = between sibling fields; `group` = before a section / after one; `gridY` = rows of a column grid.
+*  An inset uses the same field gap as everything else (D63: one rhythm). */
+var RHYTHM = {
+	panel: {
+		tabs: "pb-4 @max-[360px]:pb-3",
+		stack: "gap-4 @max-[360px]:gap-3",
+		field: "pt-4 @max-[360px]:pt-3",
+		group: "pt-6 @max-[360px]:pt-5",
+		gridY: "gap-y-4 @max-[360px]:gap-y-3"
+	},
+	document: {
+		tabs: "pb-5",
+		stack: "gap-5",
+		field: "pt-5",
+		group: "pt-8",
+		gridY: "gap-y-5"
+	}
+};
+var useRhythm = () => RHYTHM[useKitEnv().variant];
+var InsetDepth = React.createContext(0);
+/** 0 at a frame's top level and inside sections; 1 inside an inset (or an expanded array row). */
+var useInsetDepth = () => React.useContext(InsetDepth);
+/** Mark children as sitting inside one container (array inline rows use this so objects inside them drill). */
+function InsetScope({ children }) {
+	const d = React.useContext(InsetDepth);
+	return /* @__PURE__ */ jsx(InsetDepth.Provider, {
+		value: d + 1,
+		children
+	});
+}
+function useGroupStatus(paths) {
+	const form = useForm();
+	const env = useKitEnv();
+	let errors = 0;
+	let warnings = 0;
+	const peers = [];
+	let comments = 0;
+	const keys = paths.map(pathKey);
+	for (const p of paths) {
+		const r = form?.rollup(p) ?? {
+			errors: 0,
+			warnings: 0
+		};
+		errors += r.errors;
+		warnings += r.warnings;
+	}
+	for (const [k, list] of Object.entries(env.presence)) if (keys.some((g) => keyStartsWith(k, g))) {
+		for (const p of list) if (!peers.some((x) => x.name === p.name)) peers.push(p);
+	}
+	for (const [k, n] of Object.entries(env.comments)) if (keys.some((g) => keyStartsWith(k, g))) comments += n;
+	return {
+		errors,
+		warnings,
+		peers,
+		comments
+	};
+}
+/** A field that animates its height in and out when a condition shows or hides it (D45). `space` = its top spacing. */
+var Appear = React.forwardRef(({ children, space, className }, ref) => {
+	const t = {
+		duration: useReducedMotion() ? 0 : .2,
+		ease: [
+			.22,
+			1,
+			.36,
+			1
+		]
+	};
+	const el = React.useRef(null);
+	const clip = (on) => {
+		if (el.current) el.current.style.overflow = on ? "hidden" : "";
+	};
+	return /* @__PURE__ */ jsx(motion.div, {
+		ref: (n) => {
+			el.current = n;
+			if (typeof ref === "function") ref(n);
+			else if (ref) ref.current = n;
+		},
+		initial: {
+			height: 0,
+			opacity: 0
+		},
+		animate: {
+			height: "auto",
+			opacity: 1
+		},
+		exit: {
+			height: 0,
+			opacity: 0
+		},
+		transition: t,
+		onAnimationStart: () => clip(true),
+		onAnimationComplete: () => clip(false),
+		className: cn("min-w-0", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: space,
+			children
+		})
+	});
+});
+Appear.displayName = "Appear";
+/** Sibling fields that appear / disappear smoothly. `gapless`: the parent draws the gaps (grid, inset). */
+function AnimatedFields({ fields, render, gapless, space }) {
+	const rhythm = useRhythm();
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: fields.map((f, i) => /* @__PURE__ */ jsx(Appear, {
+			space: gapless || i === 0 ? void 0 : space ?? rhythm.field,
+			children: render(f)
+		}, f.name))
+	});
+}
+function GroupBadges({ status }) {
+	const { errors, warnings, peers, comments } = status;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		errors ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `${errors} ${errors === 1 ? "issue" : "issues"} to fix inside`,
+			children: /* @__PURE__ */ jsx("span", {
+				role: "img",
+				"aria-label": `${errors} ${errors === 1 ? "issue" : "issues"} to fix`,
+				className: "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-kit-danger-soft px-1 text-kit-2xs font-medium tabular-nums text-kit-danger-fg",
+				children: errors
+			})
+		}) : warnings ? /* @__PURE__ */ jsx(IssueDot, {
+			errors: 0,
+			warnings
+		}) : null,
+		comments ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `${comments} open ${comments === 1 ? "comment" : "comments"} inside`,
+			children: /* @__PURE__ */ jsxs("span", {
+				role: "img",
+				"aria-label": `${comments} open ${comments === 1 ? "comment" : "comments"}`,
+				className: "inline-flex h-4 shrink-0 items-center gap-0.5 rounded-kit-md px-0.5 text-kit-2xs tabular-nums text-kit-fg-3",
+				children: [/* @__PURE__ */ jsx(IconMessage, {
+					className: "size-3",
+					stroke: 1.75,
+					"aria-hidden": true
+				}), comments]
+			})
+		}) : null,
+		peers.length ? /* @__PURE__ */ jsx(PeerStack, {
+			peers,
+			size: 16
+		}) : null
+	] });
+}
+/**
+* Sibling fields, laid out by the D63 rule: a plain animated stack, or (when `columns` and at least one pair of short
+* neighbours) a grid that turns two-up only when the form is ≥ 420px wide. Used by sections, insets and array rows.
+*/
+function FieldRun({ fields, render, columns = true, values }) {
+	const rhythm = useRhythm();
+	const icons = splitIcons(fields, values ?? {});
+	if (icons) return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col",
+		children: [
+			icons.before.length ? /* @__PURE__ */ jsx(FieldRun, {
+				fields: icons.before,
+				render,
+				columns
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: icons.before.length ? rhythm.field : void 0,
+				children: /* @__PURE__ */ jsx(IconGroup, {
+					fields: icons.icons,
+					render
+				})
+			}),
+			icons.after.length ? /* @__PURE__ */ jsx("div", {
+				className: rhythm.field,
+				children: /* @__PURE__ */ jsx(FieldRun, {
+					fields: icons.after,
+					render,
+					columns
+				})
+			}) : null
+		]
+	});
+	const spans = columns ? columnSpans(fields) : fields.map(() => false);
+	if (!spans.some(Boolean)) return /* @__PURE__ */ jsx("div", {
+		className: "flex min-w-0 flex-col",
+		children: /* @__PURE__ */ jsx(AnimatedFields, {
+			fields,
+			render
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-columns",
+		className: cn("grid min-w-0 grid-cols-1 gap-x-3 @[420px]:grid-cols-2", rhythm.gridY),
+		children: fields.map((f, i) => /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", !spans[i] && "@[420px]:col-span-2"),
+			children: render(f)
+		}, f.name))
+	});
+}
+/**
+* A header with eight social icons would otherwise stack eight rows between its texts. A lone icon is just its row:
+* no heading for one. `isIconImage` is the same rule the image control draws the row by.
+*/
+function splitIcons(fields, values) {
+	const icons = fields.filter((f) => isIconImage(f, values[f.name]));
+	if (icons.length < 2) return null;
+	const at = fields.indexOf(icons[0]);
+	const rest = fields.filter((f) => !icons.includes(f));
+	return {
+		before: rest.slice(0, at),
+		icons,
+		after: rest.slice(at)
+	};
+}
+function IconGroup({ fields, render }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-labelledby": id,
+		"data-slot": "kit-icon-group",
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("p", {
+			id,
+			className: "text-kit-xs font-medium text-kit-fg-3",
+			children: "Icons"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-col gap-2",
+			children: fields.map((f) => /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: render(f)
+			}, f.name))
+		})]
+	});
+}
+function FieldSection({ title, description, collapsible = true, defaultOpen = true, open: openProp, onOpenChange, summary, status, divider = true, revealWhen, disabled, actions, lead, columns, icon, adornment, className, bodyClassName, children }) {
+	const rhythm = useRhythm();
+	const { variant } = useKitEnv();
+	const id = React.useId();
+	const [inner, setInner] = React.useState(defaultOpen);
+	const open = !collapsible || (openProp ?? inner);
+	const setOpen = (o) => {
+		if (openProp === void 0) setInner(o);
+		onOpenChange?.(o);
+	};
+	React.useEffect(() => {
+		if (revealWhen && !open) setOpen(true);
+	}, [revealWhen]);
+	const st = {
+		errors: 0,
+		warnings: 0,
+		peers: [],
+		comments: 0,
+		...status
+	};
+	const titleCls = cn("min-w-0 truncate font-semibold text-kit-fg", variant === "document" ? "text-kit-base" : "text-kit-sm", disabled && "text-kit-fg-4");
+	const body = /* @__PURE__ */ jsxs("div", {
+		id: `${id}-body`,
+		className: cn("flex flex-col pb-2 pt-1", rhythm.stack, bodyClassName),
+		children: [
+			description ? /* @__PURE__ */ jsx("p", {
+				className: "-mt-1 text-kit-xs leading-4 text-kit-fg-3",
+				children: description
+			}) : null,
+			lead,
+			columns === 2 ? /* @__PURE__ */ jsx("div", {
+				className: cn("grid grid-cols-1 gap-x-3 @[420px]:grid-cols-2", rhythm.gridY),
+				children
+			}) : children
+		]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		role: "group",
+		"aria-labelledby": `${id}-title`,
+		"data-group": "section",
+		"data-state": open ? "open" : "closed",
+		className: cn("group/section relative", divider && "border-t border-kit-line pt-1", "before:pointer-events-none before:absolute before:-left-2.5 before:bottom-2 before:top-11 before:w-px before:bg-transparent before:transition-colors before:duration-200 data-[state=open]:focus-within:before:bg-kit-line", "[&:has([data-group=inset]:focus-within)]:before:!bg-transparent", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-9 items-center gap-2",
+			children: [collapsible ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => !disabled && setOpen(!open),
+				"aria-expanded": open,
+				"aria-controls": open ? `${id}-body` : void 0,
+				"aria-disabled": disabled || void 0,
+				className: cn("group/sh -mx-2 flex h-9 min-w-0 flex-1 items-center gap-2 rounded-kit-md px-2 text-left transition-colors", disabled ? "cursor-not-allowed" : "hover:bg-kit-hover"),
+				children: [
+					icon ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "flex shrink-0 text-kit-fg-3 [&_svg]:size-3.5",
+						children: icon
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						id: `${id}-title`,
+						className: titleCls,
+						children: title
+					}),
+					adornment,
+					!open && Array.isArray(summary) ? /* @__PURE__ */ jsx(SummaryChips, { chips: summary }) : !open && summary ? /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-right text-kit-xs text-kit-fg-3",
+						children: summary
+					}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					!open ? /* @__PURE__ */ jsx(GroupBadges, { status: st }) : null,
+					/* @__PURE__ */ jsx(IconChevronRight, {
+						"aria-hidden": true,
+						stroke: 1.5,
+						className: cn("size-4 shrink-0 text-kit-fg-3 transition-transform duration-200 group-hover/sh:text-kit-fg-2", open && "rotate-90")
+					})
+				]
+			}) : /* @__PURE__ */ jsx("h3", {
+				id: `${id}-title`,
+				className: cn(titleCls, "flex-1"),
+				children: title
+			}), actions]
+		}), /* @__PURE__ */ jsx(KitSectionTitle.Provider, {
+			value: title,
+			children: collapsible ? /* @__PURE__ */ jsx(SectionBody, {
+				open,
+				children: body
+			}) : body
+		})]
+	});
+}
+/** A collapsed section's summary as neutral chips (the schema editor's field settings): 2 chips, then "+N" with the rest
+*  in its tooltip; none = a quiet "Nothing set". Colour stays for type and status, so these are --constraint chips. */
+function SummaryChips({ chips }) {
+	if (!chips.length) return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 flex-1 truncate text-right text-kit-xs text-kit-fg-3",
+		children: "Nothing set"
+	});
+	const shown = chips.slice(0, 2);
+	const rest = chips.slice(2);
+	const chip = "inline-flex h-5 min-w-0 shrink items-center rounded-[4px] bg-kit-constraint-bg px-1.5 text-kit-2xs font-medium text-kit-constraint-fg";
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 items-center justify-end gap-1",
+		children: [shown.map((c) => /* @__PURE__ */ jsx("span", {
+			className: chip,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: c
+			})
+		}, c)), rest.length ? /* @__PURE__ */ jsx(Tooltip, {
+			content: rest.join(" · "),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: cn(chip, "shrink-0 tabular-nums"),
+				children: ["+", rest.length]
+			})
+		}) : null]
+	});
+}
+/**
+* The open / close motion of a section (D52: no jitter). Height only, 200ms, the same curve as conditional fields. The
+* body is clipped ONLY while the height moves, so focus rings, the gutter edge and popovers are never cut at rest and
+* nothing snaps when the clip comes off; no opacity flash on the content; instant with reduced motion.
+*/
+function SectionBody({ open, children }) {
+	const reduce = useReducedMotion();
+	const el = React.useRef(null);
+	const clip = (on) => {
+		if (el.current) el.current.style.overflow = on ? "hidden" : "";
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: open ? /* @__PURE__ */ jsx(motion.div, {
+			ref: el,
+			initial: { height: 0 },
+			animate: { height: "auto" },
+			exit: { height: 0 },
+			transition: {
+				duration: reduce ? 0 : .2,
+				ease: [
+					.22,
+					1,
+					.36,
+					1
+				]
+			},
+			onAnimationStart: () => clip(true),
+			onAnimationComplete: () => clip(false),
+			className: "min-w-0",
+			children
+		}) : null
+	});
+}
+/**
+* D63: the ONE way to show "these fields belong together" inside a form. The object's label sits above (the field shell);
+* the children sit behind a single 1px --line inset line, `ml-1.5 pl-3`. No tint, no ring, no radius, no padding box.
+* Children keep the form's own field gap. Short neighbours pair up on wide forms through `FieldRun`.
+*/
+function FieldInset({ children, labelledBy, label, className }) {
+	return /* @__PURE__ */ jsx(InsetScope, { children: /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-labelledby": labelledBy,
+		"aria-label": labelledBy ? void 0 : label,
+		"data-group": "inset",
+		className: cn(INSET_LINE, "flex flex-col", className),
+		children
+	}) });
+}
+/** The inset line every nested group uses (inline objects, expanded array rows). */
+var INSET_LINE = "ml-1.5 min-w-0 border-l border-kit-line pl-3";
+/**
+* Reads as ONE input: the field border, radius 6, the input focus treatment on the whole unit; rows inside are split by a
+* hairline and have no borders of their own. Use for values that only make sense together (founder rule: a button's
+* label and link are one unit).
+*/
+var FieldUnit = React.forwardRef(({ invalid, disabled, className, children, ...rest }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "group",
+	"data-slot": "field-unit",
+	"data-invalid": invalid || void 0,
+	"aria-disabled": disabled || void 0,
+	...rest,
+	className: cn("flex min-w-0 flex-col divide-y divide-kit-line-subtle rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-[border-color,box-shadow] duration-150", "hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus focus-within:shadow-kit-ring-field", "[&>*:first-child]:rounded-t-[5px] [&>*:last-child]:rounded-b-[5px]", invalid && "border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]", disabled && "pointer-events-none bg-kit-subtle opacity-60", className),
+	children
+}));
+FieldUnit.displayName = "FieldUnit";
+/** One row of a unit: 36px, 8px side padding, no border (the unit draws the hairline between rows). */
+function FieldUnitRow({ className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cn("flex min-h-9 min-w-0 items-center gap-2 px-1", className),
+		children
+	});
+}
+var BREAKPOINT_NAMES = [
+	"desktop",
+	"laptop",
+	"tablet",
+	"mobile",
+	"phone"
+];
+var isBreakpointName = (n) => BREAKPOINT_NAMES.includes(n.toLowerCase());
+var BP_ICON = {
+	desktop: IconDeviceDesktop,
+	laptop: IconDeviceLaptop,
+	tablet: IconDeviceTablet,
+	mobile: IconDeviceMobile,
+	phone: IconDeviceMobile
+};
+/** An object field "differs" from the base breakpoint when it has an inherit switch that is off, or (without one) any value. */
+function overrides(f, v) {
+	if (!isObj(v)) return false;
+	const inherit = (f.fields ?? []).find((x) => x.type === "boolean" && /^(inherit|same|sameAs|useDesktop|inheritDesktop)/i.test(x.name));
+	if (inherit) return v[inherit.name] === false;
+	return (f.fields ?? []).some((x) => !isEmptyValue(v[x.name]));
+}
+/**
+* Per-screen-size settings as ONE group: the section header, then a segmented switcher (Desktop · Tablet · Phone) with a
+* dot on every size that has its own values; only the chosen size's fields show. Replaces three stacked groups.
+*/
+function BreakpointGroup({ set, members, basePath, memoryKey, divider, renderField }) {
+	const form = useForm();
+	const rhythm = useRhythm();
+	const [bp, setBp] = React.useState(() => form.memory.get(`${memoryKey}:bp`) ?? members[0].name);
+	const active = members.find((m) => m.name === bp) ?? members[0];
+	const select = (n) => {
+		setBp(n);
+		form.memory.set(`${memoryKey}:bp`, n);
+	};
+	const [open, setOpen] = React.useState(() => form.memory.get(memoryKey) ?? !set.collapsed);
+	const status = useGroupStatus(members.map((m) => [...basePath, m.name]));
+	const valueOf = (m) => form.getAt([...basePath, m.name]);
+	const differing = members.slice(1).filter((m) => overrides(m, valueOf(m)));
+	const summary = differing.length ? `Own settings on ${differing.map((m) => m.title.toLowerCase()).join(" and ")}` : `Same on every screen`;
+	const activeValue = valueOf(active);
+	const obj = isObj(activeValue) ? activeValue : {};
+	const cc = condCtx(form, [...basePath, active.name]);
+	const fields = (active.fields ?? []).filter((f) => !isHidden(f, obj, cc));
+	const id = React.useId();
+	const compactBp = members.length >= 4 && members.every((m) => BP_ICON[m.name.toLowerCase()] || m.icon);
+	return /* @__PURE__ */ jsx(FieldSection, {
+		title: set.title,
+		description: set.description,
+		collapsible: set.collapsible !== false,
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			form.memory.set(memoryKey, o);
+		},
+		summary,
+		status,
+		divider,
+		revealWhen: form.showAllErrors && status.errors > 0,
+		lead: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx(Segmented, {
+				"aria-label": `${set.title}: screen size`,
+				size: "sm",
+				value: active.name,
+				onChange: select,
+				collapseInactive: compactBp,
+				className: "w-full [&>button]:flex-1",
+				items: members.map((m, i) => {
+					const Icon = BP_ICON[m.name.toLowerCase()];
+					const own = i > 0 && differing.includes(m);
+					const errs = form.rollup([...basePath, m.name]).errors;
+					const dot = errs ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-1.5 rounded-full bg-kit-danger"
+					}) : own ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-1.5 rounded-full bg-kit-accent"
+					}) : null;
+					const sr = errs ? ", has issues" : own ? ", has its own settings" : "";
+					const glyph = Icon ? /* @__PURE__ */ jsx(Icon, { stroke: 1.5 }) : m.icon ? /* @__PURE__ */ jsx(KitIcon, { name: m.icon }) : void 0;
+					if (compactBp) return {
+						value: m.name,
+						name: `${m.title}${sr}`,
+						tooltip: m.title,
+						icon: /* @__PURE__ */ jsxs("span", {
+							className: "relative inline-flex",
+							children: [glyph, dot ? /* @__PURE__ */ jsx("span", {
+								className: "absolute -right-1 -top-0.5 inline-flex",
+								children: dot
+							}) : null]
+						}),
+						label: /* @__PURE__ */ jsxs("span", { children: [m.title, sr ? /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: sr
+						}) : null] })
+					};
+					return {
+						value: m.name,
+						icon: glyph,
+						label: /* @__PURE__ */ jsxs("span", {
+							className: "inline-flex items-center gap-1",
+							children: [
+								m.title,
+								dot,
+								sr ? /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: sr
+								}) : null
+							]
+						})
+					};
+				})
+			}), active.description ? /* @__PURE__ */ jsxs("p", {
+				className: "text-kit-xs leading-4 text-kit-fg-3",
+				children: [
+					active.title,
+					" · ",
+					active.description
+				]
+			}) : null]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-labelledby": `${id}-bp`,
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsxs("span", {
+				id: `${id}-bp`,
+				className: "sr-only",
+				children: [active.title, " settings"]
+			}), /* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: fields.map((f, i) => /* @__PURE__ */ jsx(Appear, {
+					space: i === 0 ? void 0 : rhythm.field,
+					children: renderField(f, [
+						...basePath,
+						active.name,
+						f.name
+					], obj)
+				}, f.name))
+			}, active.name)]
+		})
+	});
+}
+var ADVANCED = {
+	name: "__advanced",
+	title: "Advanced",
+	description: "Rarely-changed and developer settings",
+	collapsed: true
+};
+var BREAKPOINTS = {
+	name: "__breakpoints",
+	title: "Screen sizes",
+	layout: "breakpoints"
+};
+/** Fields in schema order, with each fieldset (and the auto "Advanced" / "Screen sizes" sets) placed at its first member. */
+function arrangeFields(fields, fieldsets = []) {
+	const items = [];
+	const sets = /* @__PURE__ */ new Map();
+	const adv = [];
+	const bpCount = fields.filter((f) => !f.fieldset && !f.advanced && f.type === "object" && isBreakpointName(f.name)).length;
+	for (const f of fields) {
+		const auto = !f.fieldset && !f.advanced && bpCount >= 2 && f.type === "object" && isBreakpointName(f.name);
+		const setName = f.fieldset ?? (auto ? BREAKPOINTS.name : void 0);
+		if (setName) {
+			let s = sets.get(setName);
+			if (!s) {
+				s = {
+					kind: "set",
+					set: auto ? BREAKPOINTS : fieldsets.find((x) => x.name === setName) ?? {
+						name: setName,
+						title: setName
+					},
+					fields: []
+				};
+				sets.set(setName, s);
+				items.push(s);
+			}
+			s.fields.push(f);
+		} else if (f.advanced) adv.push(f);
+		else items.push({
+			kind: "field",
+			field: f
+		});
+	}
+	if (adv.length) items.push({
+		kind: "set",
+		set: ADVANCED,
+		fields: adv
+	});
+	return items;
+}
+/** The frame's loose icon fields (not those inside a fieldset) as one "Icons" item where the first was. @see splitIcons */
+function gatherIcons(items, obj) {
+	const icons = items.flatMap((it) => it.kind === "field" ? [it.field] : []).filter((f) => isIconImage(f, obj[f.name]));
+	if (icons.length < 2) return items;
+	const out = [];
+	for (const it of items) if (it.kind !== "field" || !icons.includes(it.field)) out.push(it);
+	else if (it.field === icons[0]) out.push({
+		kind: "icons",
+		fields: icons
+	});
+	return out;
+}
+/** The group a field without `group` belongs to: the one marked `default`, else the first. */
+var defaultGroup = (groups) => groups?.find((g) => g.default) ?? groups?.[0];
+/**
+* FieldList — lays out one frame's fields (CPO D45 grouping): group TABS (with error dots) at the top of the frame only,
+* FIELDSETS as <FieldSection> (hairline + 36px header, no box, collapsed = one-line summary), breakpoint objects as ONE
+* <BreakpointGroup> with a switcher, an auto "Advanced" section for `advanced` fields, and `hidden` conditions that
+* appear / disappear with a height animation.
+* Rhythm: label→control 6 · fields 16 · groups 24 (dense ≤360px: 12 · 20; document: 20 · 32).
+*/
+function FieldList({ fields, fieldsets, groups, basePath, memoryKey, renderField }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const raw = form.getAt(basePath);
+	const obj = isObj(raw) ? raw : {};
+	const cc = condCtx(form, basePath);
+	const visible = fields.filter((f) => !isHidden(f, obj, cc));
+	const usable = (groups ?? []).filter((g) => visible.some((f) => (f.group ?? defaultGroup(groups)?.name) === g.name));
+	const tabs = usable.length >= 2;
+	const allTab = tabs && env.variant === "document";
+	const memTab = form.memory.get(`${memoryKey}:tab`);
+	const [tab, setTab] = React.useState(memTab ?? (allTab ? "__all" : defaultGroup(usable)?.name ?? ""));
+	const select = (t) => {
+		setTab(t);
+		form.memory.set(`${memoryKey}:tab`, t);
+	};
+	const validTabs = [...allTab ? ["__all"] : [], ...usable.map((g) => g.name)];
+	const active = validTabs.includes(tab) ? tab : validTabs[0] ?? "";
+	const inTab = (f) => !tabs || active === "__all" || (f.group ?? defaultGroup(groups)?.name) === active;
+	const groupErrors = (g) => visible.filter((f) => (f.group ?? defaultGroup(groups)?.name) === g).reduce((n, f) => n + form.rollup([...basePath, f.name]).errors, 0);
+	const items = gatherIcons(arrangeFields(visible.filter(inTab), fieldsets), obj);
+	const rhythm = useRhythm();
+	const review = env.review;
+	const [openRuns, setOpenRuns] = React.useState(() => /* @__PURE__ */ new Set());
+	const itemChanged = (it) => !review || (it.kind === "field" ? review.count([...basePath, it.field.name]) > 0 : it.fields.some((f) => review.count([...basePath, f.name]) > 0));
+	const segs = [];
+	for (const it of items) {
+		if (!review?.onlyChanges || itemChanged(it)) {
+			segs.push({
+				kind: "item",
+				it
+			});
+			continue;
+		}
+		const last = segs[segs.length - 1];
+		const n = it.kind === "field" ? 1 : it.fields.length;
+		if (last?.kind === "fold") {
+			last.items.push(it);
+			last.n += n;
+		} else segs.push({
+			kind: "fold",
+			key: `fold:${it.kind === "field" ? it.field.name : it.kind === "set" ? it.set.name : "icons"}`,
+			items: [it],
+			n
+		});
+	}
+	const rows = segs.flatMap((sg) => sg.kind === "item" ? [sg] : [sg, ...openRuns.has(sg.key) ? sg.items.map((it) => ({
+		kind: "item",
+		it
+	})) : []]);
+	const toggleRun = (key) => setOpenRuns((o) => {
+		const n = new Set(o);
+		if (n.has(key)) n.delete(key);
+		else n.add(key);
+		return n;
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [
+			tabs ? /* @__PURE__ */ jsx("div", {
+				className: rhythm.tabs,
+				children: /* @__PURE__ */ jsx(GroupTabs, {
+					id: memoryKey,
+					value: active,
+					onChange: select,
+					items: [...allTab ? [{
+						name: "__all",
+						title: "All fields"
+					}] : [], ...usable].map((g) => ({
+						value: g.name,
+						label: g.title,
+						icon: "icon" in g ? g.icon : void 0,
+						errors: g.name === "__all" ? 0 : groupErrors(g.name)
+					}))
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: rows.map((row, i) => {
+					if (row.kind === "fold") {
+						const open = openRuns.has(row.key);
+						const label = `${row.n} unchanged ${row.n === 1 ? "field" : "fields"}`;
+						return /* @__PURE__ */ jsx(Appear, {
+							space: i === 0 ? void 0 : rhythm.field,
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								"aria-expanded": open,
+								onClick: () => toggleRun(row.key),
+								className: "flex w-full items-center gap-2 rounded-kit-md text-kit-xs text-kit-fg-3 outline-none hover:text-kit-fg-2 focus-visible:text-kit-fg",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: "h-px flex-1 bg-kit-line-subtle"
+									}),
+									open ? `Hide ${label}` : label,
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: "h-px flex-1 bg-kit-line-subtle"
+									})
+								]
+							})
+						}, row.key);
+					}
+					const it = row.it;
+					const prev = rows[i - 1];
+					const space = i === 0 ? void 0 : it.kind === "set" ? prev?.kind === "item" && prev.it.kind === "set" ? void 0 : rhythm.group : rhythm.field;
+					return it.kind === "field" ? /* @__PURE__ */ jsx(Appear, {
+						space,
+						children: renderField(it.field, [...basePath, it.field.name], obj)
+					}, it.field.name) : it.kind === "icons" ? /* @__PURE__ */ jsx(Appear, {
+						space,
+						children: /* @__PURE__ */ jsx(IconGroup, {
+							fields: it.fields,
+							render: (f) => renderField(f, [...basePath, f.name], obj)
+						})
+					}, "icons") : /* @__PURE__ */ jsx(Appear, {
+						space,
+						children: /* @__PURE__ */ jsx(FieldsetSection, {
+							set: it.set,
+							fields: it.fields,
+							basePath,
+							obj,
+							memoryKey: `${memoryKey}:fs:${it.set.name}`,
+							divider: i > 0,
+							renderField
+						})
+					}, `set:${it.set.name}`);
+				})
+			}, active || "all"),
+			items.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "py-6 text-center text-kit-sm text-kit-fg-3",
+				children: "No fields here yet."
+			}) : null
+		]
+	});
+}
+var MORE_W = 72;
+/** Tabs that don't fit the width fold into a "More" menu, never clipped (V2 HEAD c896beb field-list.tsx GroupTabs). The
+*  active tab always shows its label: when it sits in the fold it takes the last visible slot. */
+function GroupTabs({ id, value, onChange, items }) {
+	const { variant } = useKitEnv();
+	const uid = React.useId();
+	const gap = variant === "document" ? 20 : 16;
+	const wrap = React.useRef(null);
+	const measure = React.useRef(null);
+	const [fit, setFit] = React.useState(items.length);
+	const sig = items.map((t) => `${t.value}:${t.label}:${t.icon ?? ""}`).join("|");
+	React.useLayoutEffect(() => {
+		const w = wrap.current;
+		const m = measure.current;
+		if (!w || !m) return;
+		const run = () => {
+			const widths = Array.from(m.querySelectorAll("[data-seg-value]")).map((el) => el.offsetWidth);
+			const room = w.clientWidth;
+			if (!room || !widths.length) return;
+			if (widths.reduce((a, b) => a + b, 0) + gap * (widths.length - 1) <= room) return setFit(widths.length);
+			let used = 0;
+			let k = 0;
+			for (; k < widths.length; k++) {
+				const next = used + (k ? gap : 0) + widths[k];
+				if (next + gap + MORE_W > room) break;
+				used = next;
+			}
+			setFit(Math.max(1, k));
+		};
+		run();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(run);
+		ro.observe(w);
+		return () => ro.disconnect();
+	}, [sig, gap]);
+	const toTab = (t) => ({
+		value: t.value,
+		icon: t.icon ? /* @__PURE__ */ jsx(KitIcon, {
+			name: t.icon,
+			className: "size-3.5"
+		}) : void 0,
+		label: /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5",
+			"aria-label": t.errors ? `${t.label}, has errors` : void 0,
+			children: [t.label, t.errors ? /* @__PURE__ */ jsx("span", {
+				className: "size-1.5 rounded-full bg-kit-danger",
+				"aria-hidden": true
+			}) : null]
+		})
+	});
+	let shown = items.slice(0, fit);
+	if (fit < items.length && !shown.some((t) => t.value === value)) {
+		const act = items.find((t) => t.value === value);
+		if (act) shown = [...shown.slice(0, Math.max(0, fit - 1)), act];
+	}
+	const rest = items.filter((t) => !shown.includes(t));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrap,
+		className: "relative -mt-1 flex min-w-0 items-stretch",
+		children: [
+			/* @__PURE__ */ jsx(Segmented, {
+				variant: "tabs",
+				bordered: true,
+				"aria-label": "Field groups",
+				size: "md",
+				layoutId: `kit-tab-${uid}-${id}`,
+				value,
+				onChange,
+				className: cn("min-w-0 flex-1", variant === "document" ? "gap-5" : "gap-4"),
+				items: shown.map(toTab)
+			}),
+			rest.length ? /* @__PURE__ */ jsxs("span", {
+				className: "flex shrink-0 items-center border-b border-kit-line pl-2",
+				children: [/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+					render: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "inline-flex h-8 items-center gap-1 text-kit-sm font-medium text-kit-fg-3 transition-colors hover:text-kit-fg-2 data-[popup-open]:text-kit-fg"
+					}),
+					children: [
+						"More",
+						rest.some((t) => t.errors) ? /* @__PURE__ */ jsx("span", {
+							className: "size-1.5 rounded-full bg-kit-danger",
+							"aria-label": "has errors"
+						}) : null,
+						/* @__PURE__ */ jsx(IconChevronDown, {
+							className: "size-3.5",
+							stroke: 1.5,
+							"aria-hidden": true
+						})
+					]
+				}), /* @__PURE__ */ jsx(MenuContent, {
+					align: "end",
+					children: rest.map((t) => /* @__PURE__ */ jsxs(MenuItem, {
+						icon: t.icon ? /* @__PURE__ */ jsx(KitIcon, {
+							name: t.icon,
+							className: "size-3.5"
+						}) : void 0,
+						onClick: () => onChange(t.value),
+						children: [t.label, t.errors ? /* @__PURE__ */ jsx("span", {
+							className: "ml-1.5 inline-block size-1.5 rounded-full bg-kit-danger",
+							"aria-label": "has errors"
+						}) : null]
+					}, t.value))
+				})] }), /* @__PURE__ */ jsx("span", {
+					hidden: true,
+					children: rest.map((t) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						tabIndex: -1,
+						"data-seg-value": t.value,
+						onClick: () => onChange(t.value)
+					}, t.value))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: measure,
+				"aria-hidden": true,
+				inert: true,
+				className: "pointer-events-none invisible absolute left-0 top-0 flex whitespace-nowrap",
+				children: /* @__PURE__ */ jsx(Segmented, {
+					variant: "tabs",
+					size: "md",
+					value: "__measure",
+					onChange: () => {},
+					className: variant === "document" ? "gap-5" : "gap-4",
+					items: items.map(toTab)
+				})
+			})
+		]
+	});
+}
+function FieldsetSection({ set, fields, basePath, obj, memoryKey, divider, renderField }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const breakpoints = set.layout === "breakpoints" && fields.length >= 2 && fields.every((f) => f.type === "object");
+	const remembered = form.memory.get(memoryKey);
+	const [open, setOpen] = React.useState(remembered ?? !set.collapsed);
+	const status = useGroupStatus(fields.map((f) => [...basePath, f.name]));
+	if (breakpoints) return /* @__PURE__ */ jsx(BreakpointGroup, {
+		set,
+		members: fields,
+		basePath,
+		memoryKey,
+		divider,
+		renderField
+	});
+	return /* @__PURE__ */ jsx(FieldSection, {
+		title: set.title,
+		description: set.description,
+		collapsible: set.collapsible !== false,
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			form.memory.set(memoryKey, o);
+		},
+		summary: env.sectionSummary?.(set, obj) ?? (groupSummary(fields, obj) || "Nothing set yet"),
+		status,
+		divider,
+		revealWhen: form.showAllErrors && status.errors > 0,
+		children: /* @__PURE__ */ jsx(FieldRun, {
+			fields,
+			columns: set.columns === 2,
+			render: (f) => renderField(f, [...basePath, f.name], obj)
+		})
+	});
+}
+/** D41: a short field shares a 2-column row; a scale, slider, cards or radio select needs the full row. */
+var isShort = (f) => [
+	"string",
+	"number",
+	"select",
+	"color",
+	"icon",
+	"boolean",
+	"date",
+	"slug",
+	"email",
+	"url",
+	"rating"
+].includes(f.type) && !(f.type === "select" && (f.layout === "cards" || f.layout === "radio")) && !(f.type === "number" && (f.scale || f.layout === "slider"));
+//#endregion
+export { AnimatedFields, Appear, BreakpointGroup, FieldInset, FieldList, FieldRun, FieldSection, FieldUnit, FieldUnitRow, FieldsetSection, GroupTabs, INSET_LINE, IconGroup, InsetScope, RHYTHM, SHORT_TEXT_MAX, arrangeFields, columnSpans, defaultGroup, groupSummary, isBreakpointName, isColumnField, isShort, splitIcons, useGroupStatus, useInsetDepth, useRhythm };
+
+//# sourceMappingURL=grouping.js.map