@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/engine/frame.js

@@ -0,0 +1,601 @@
+import { cn } from "../lib/cn.js";
+import { resolveFieldAccess, seesDevSurfaces, useForm, useKitEnv, useKitServices } from "../context.js";
+import { frameKeyOf, isObj, newKey, pathKey, same } from "../lib/path.js";
+import { Button, IconButton } from "../ui/button.js";
+import { Segmented } from "../ui/controls.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Tooltip } from "../ui/overlay.js";
+import { condCtx, isHidden, isTextual, plainText, previewOf, summarize } from "../lib/schema.js";
+import { Thumb } from "./bits.js";
+import { Avatar } from "../ui/display.js";
+import { HISTORY_SEGMENT } from "../schema/types.js";
+import { apiName } from "./field-shell.js";
+import { Select } from "../ui/select.js";
+import { fitsSegmented } from "../ui/choice-switch.js";
+import { relTime } from "../lib/utils.js";
+import { FallbackControl, KitField } from "./kit-field.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowBackUp, IconArrowDown, IconArrowUp, IconCopy, IconDots, IconTrash } from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+//#region src/engine/frame.tsx
+/**
+* FrameView — what the panel shows for the current breadcrumb: the root fields, a drilled object / array item /
+* slot block (with "2 of 4" stepper, variant switcher and per-slot layout settings), the one button screen,
+* or a field's history as a stacked panel. Port of V2 engine/frame.tsx.
+*
+* FrameStage + useFrameNavigation — V2 schema-form's drill-in stage (direction-aware slide, scroll memory per frame,
+* focus on the entering frame, Esc / ⌥↑↓). Exported here so SchemaForm wires them without re-deriving the motion.
+*
+* FrameSlots — the frame draws other lanes' pieces (FieldList / FieldSection from grouping, ButtonScreen from link,
+* TableFrame from table). They arrive through context so this file never imports a module that does not exist yet;
+* a missing slot falls back to a plain field list (FieldList), the raw value (ButtonScreen, through
+* FallbackControl), a named note (TableFrame) or nothing (FieldSection). SchemaForm always hands ButtonScreen and TableFrame.
+*/
+var SlotsCtx = React.createContext({});
+var FrameSlotsProvider = SlotsCtx.Provider;
+var useFrameSlots = () => React.useContext(SlotsCtx);
+/** Stand-in until the grouping lane's FieldList lands: the frame's visible fields in schema order. */
+function PlainFieldList({ fields, basePath }) {
+	const form = useForm();
+	const raw = basePath.length ? form.getAt(basePath) : form.value;
+	const parent = isObj(raw) ? raw : {};
+	const cc = condCtx(form, basePath);
+	const shown = fields.filter((f) => !isHidden(f, parent, cc));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5",
+		children: [shown.map((f) => /* @__PURE__ */ jsx("div", {
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsx(KitField, {
+				field: f,
+				path: [...basePath, f.name],
+				parent
+			})
+		}, f.name)), shown.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "py-6 text-center text-kit-sm text-kit-fg-3",
+			children: "No fields here yet."
+		}) : null]
+	});
+}
+/** A button frame outside SchemaForm (no ButtonScreen slot) edits the button's raw value (FallbackControl), never an empty body. */
+function RawButtonScreen({ frame }) {
+	const form = useForm();
+	const id = React.useId();
+	const field = frame.field ?? {
+		name: String(frame.path.at(-1) ?? "button"),
+		title: frame.title,
+		type: "button"
+	};
+	return /* @__PURE__ */ jsx(FallbackControl, {
+		field,
+		value: form.getAt(frame.path),
+		onChange: (n) => form.setAt(frame.path, n),
+		id,
+		path: frame.path
+	});
+}
+/** The button frame: header (the button's label) + the kit ButtonScreen, read-only when the lens can't edit the field. */
+function ButtonFrame({ frame, parentTitle }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const slots = useFrameSlots();
+	const v = form.getAt(frame.path);
+	const ButtonScreen = slots.ButtonScreen;
+	const readOnly = frame.field ? resolveFieldAccess(frame.field, env).readOnly : !!env.readOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5",
+		children: [/* @__PURE__ */ jsx(FrameHeader, {
+			frame,
+			context: parentTitle ? `${frame.title} in ${parentTitle}` : frame.title,
+			title: slots.normLink?.(v).label || frame.title
+		}), ButtonScreen ? /* @__PURE__ */ jsx(ButtonScreen, {
+			value: v,
+			onChange: (n) => form.setAt(frame.path, n),
+			title: frame.title,
+			readOnly
+		}) : /* @__PURE__ */ jsx(RawButtonScreen, { frame })]
+	});
+}
+function FrameView({ frame, parentTitle }) {
+	const form = useForm();
+	const slots = useFrameSlots();
+	const FieldList = slots.FieldList ?? PlainFieldList;
+	if (frame.kind === "history") return /* @__PURE__ */ jsx(HistoryView, {
+		field: frame.field,
+		path: frame.path.slice(0, -1)
+	});
+	if (frame.kind === "button") return /* @__PURE__ */ jsx(ButtonFrame, {
+		frame,
+		parentTitle
+	});
+	if (frame.kind === "tableRow" || frame.kind === "tableColumn") {
+		const it = frame.item;
+		const TableFrame = slots.TableFrame;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-5",
+			children: [/* @__PURE__ */ jsx(FrameHeader, {
+				frame,
+				context: `${it.itemSchema?.title} ${it.index + 1} of ${it.count} in ${frame.field?.title ?? "the table"}`,
+				title: frame.title
+			}), TableFrame ? /* @__PURE__ */ jsx(TableFrame, { frame }) : /* @__PURE__ */ jsx("p", {
+				role: "note",
+				"data-kit-legacy": "table",
+				className: "text-kit-sm text-kit-fg-3",
+				children: "This table's rows and columns are edited in the table itself."
+			})]
+		});
+	}
+	if (frame.kind === "root") return /* @__PURE__ */ jsx(FieldList, {
+		fields: frame.fields,
+		fieldsets: frame.fieldsets,
+		groups: frame.groups,
+		basePath: [],
+		memoryKey: "root"
+	});
+	const it = frame.item;
+	const block = it?.block;
+	const variants = block?.variants ?? [];
+	const raw = form.getAt(frame.path);
+	const cur = isObj(raw) ? raw : {};
+	const FieldSection = slots.FieldSection;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5",
+		children: [
+			/* @__PURE__ */ jsx(FrameHeader, {
+				frame,
+				context: frameContext(frame, parentTitle),
+				title: frame.title
+			}),
+			block && variants.length > 1 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg-2",
+					children: "Layout"
+				}), fitsSegmented(variants.map((v) => v.name)) ? /* @__PURE__ */ jsx(Segmented, {
+					"aria-label": "Layout",
+					value: String(cur._variant ?? variants[0].id),
+					onChange: (v) => form.setAt([...frame.path, "_variant"], v),
+					items: variants.map((v) => ({
+						value: v.id,
+						label: v.name
+					})),
+					className: "w-full [&>button]:flex-1"
+				}) : /* @__PURE__ */ jsx(Select, {
+					"aria-label": "Variant",
+					value: String(cur._variant ?? variants[0].id),
+					onValueChange: (v) => form.setAt([...frame.path, "_variant"], v),
+					options: variants.map((v) => ({
+						value: v.id,
+						label: v.name,
+						description: v.description
+					}))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx(FieldList, {
+				fields: frame.fields,
+				fieldsets: frame.fieldsets,
+				groups: frame.groups,
+				basePath: frame.path,
+				memoryKey: `f:${frame.kind}:${it?.block?.name ?? it?.itemSchema?.name ?? frame.field?.name ?? ""}`
+			}),
+			it?.slotField?.slotSettings?.length && FieldSection ? /* @__PURE__ */ jsx(FieldSection, {
+				title: `Layout in ${it.slotField.title.toLowerCase()}`,
+				description: "How this block sits in its parent. The block's own content is above.",
+				collapsible: false,
+				children: /* @__PURE__ */ jsx(FieldList, {
+					fields: it.slotField.slotSettings,
+					basePath: [...frame.path, "_settings"],
+					memoryKey: `slotset:${it.slotField.name}`
+				})
+			}) : null
+		]
+	});
+}
+/**
+* The context line under a drilled frame's title: "Tier 1 of 3 in Tiers" for an item (the item noun is the item
+* schema's title, which the adapter reads back from prod `ui.itemLabel`), "Address in Author" for an object.
+*/
+function frameContext(frame, parentTitle) {
+	const it = frame.item;
+	if (it) {
+		const noun = (frame.kind === "block" ? it.block?.title : it.itemSchema?.title) ?? "Item";
+		const owner = (frame.kind === "block" ? it.slotField?.title : frame.field?.title) ?? "the list";
+		return `${noun} ${it.index + 1} of ${it.count} in ${owner}`;
+	}
+	return parentTitle ? `${frame.field?.title ?? "Group"} in ${parentTitle}` : "Group";
+}
+/**
+* CPO D43 — the drilled frame's header answers "what am I editing, and where does it live?":
+*   [media?]  Starter                                   [↑] [↓] [⋯]
+*             Tier 1 of 3 in Tiers
+* The big title lives HERE only; the breadcrumb above is the path (its current crumb is small, D38). Prev / next are
+* labelled icon buttons whose tooltips name the sibling ("Previous tier: Starter"). No eyebrow, no duplicate counter.
+* Title 14/24 semibold (owner call). The native title= on the truncating h2 is V2 parity (kit-engine deviation from
+* the dashboard's no-title rule, see run ledger #32).
+*/
+function FrameHeader({ frame, context, title }) {
+	const form = useForm();
+	const { toast } = useKitServices();
+	const it = frame.item;
+	const media = it ? previewOf(it.block ?? it.itemSchema, form.getAt(frame.path), it.index).media : void 0;
+	const step = (d) => {
+		if (!it) return;
+		const n = it.index + d;
+		if (n < 0 || n >= it.count) return;
+		form.navigate([...it.arrayPath, n]);
+	};
+	const listRaw = it ? form.getAt(it.arrayPath) : void 0;
+	const list = Array.isArray(listRaw) ? listRaw : [];
+	const noun = (it?.block?.title ?? it?.itemSchema?.title ?? "item").toLowerCase();
+	const sibling = (i) => it && i >= 0 && i < it.count ? it.titleAt ? it.titleAt(i) : previewOf(it.block ?? it.itemSchema, list[i], i, it.block?.title ?? it.itemSchema?.title).title : "";
+	const prev = it ? sibling(it.index - 1) : "";
+	const next = it ? sibling(it.index + 1) : "";
+	const moved = React.useRef(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2.5 outline-none",
+		"data-frame-header": true,
+		tabIndex: -1,
+		children: [
+			media ? /* @__PURE__ */ jsx(Thumb, {
+				media,
+				size: 36
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "truncate text-kit-base font-semibold leading-6 text-kit-fg",
+					title,
+					children: title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "truncate text-kit-xs leading-4 text-kit-fg-3",
+					children: context
+				})]
+			}),
+			it ? /* @__PURE__ */ jsxs("div", {
+				className: "-mr-1 flex shrink-0 items-center gap-0.5 pt-0.5",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						label: prev ? `Previous ${noun}: ${prev}` : `No previous ${noun}`,
+						tooltip: prev ? `Previous ${noun}: ${prev}` : `First ${noun}`,
+						size: "sm",
+						disabled: it.index === 0,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 })
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: next ? `Next ${noun}: ${next}` : `No next ${noun}`,
+						tooltip: next ? `Next ${noun}: ${next}` : `Last ${noun}`,
+						size: "sm",
+						disabled: it.index >= it.count - 1,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 })
+					}),
+					/* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: `${title} actions`,
+						children: /* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+							label: `${title} actions`,
+							tooltip: false,
+							size: "sm",
+							children: /* @__PURE__ */ jsx(IconDots, { stroke: 1.5 })
+						}) })
+					}), /* @__PURE__ */ jsxs(MenuContent, {
+						align: "end",
+						className: "w-48",
+						finalFocus: () => !moved.current,
+						children: [
+							/* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+								onClick: () => {
+									moved.current = true;
+									const copy = isObj(list[it.index]) ? {
+										...structuredClone(list[it.index]),
+										_key: newKey()
+									} : list[it.index];
+									form.setAt(it.arrayPath, [
+										...list.slice(0, it.index + 1),
+										copy,
+										...list.slice(it.index + 1)
+									]);
+									form.navigate([...it.arrayPath, it.index + 1]);
+									toast?.success("Duplicated", { description: "You're now editing the copy." });
+								},
+								children: "Duplicate"
+							}),
+							/* @__PURE__ */ jsx(MenuSeparator, {}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								danger: true,
+								icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+								onClick: () => {
+									moved.current = true;
+									const prevList = list;
+									form.navigate(parentFramePath(it.arrayPath));
+									form.setAt(it.arrayPath, list.filter((_, j) => j !== it.index));
+									toast?.(`“${title}” removed`, {
+										action: {
+											label: "Undo",
+											onClick: () => form.setAt(it.arrayPath, prevList)
+										},
+										duration: 1e4
+									});
+								},
+								children: "Remove"
+							})
+						]
+					})] })
+				]
+			}) : null
+		]
+	});
+}
+/** The frame that owns an array: drop the array field name (and the item index above it, if any). */
+var parentFramePath = (arrayPath) => arrayPath.slice(0, -1);
+/**
+* V2 drew demo people (seed `currentUser` / `members`, a fixed "26 hours ago" / "3 days ago"). The kit has no seed:
+* session versions carry their own `by` and `at`; the opened and published baselines have no author or time here, so
+* their row says only what they are.
+*/
+function HistoryView({ field, path }) {
+	const env = useKitEnv();
+	const form = useForm();
+	const { toast } = useKitServices();
+	const key = pathKey(path);
+	const now = form.getAt(path);
+	const session = form.history(key);
+	const baseline = form.baselineAt(path);
+	const published = form.hasPublished ? form.publishedAt(path) : void 0;
+	const versions = [];
+	versions.push({
+		id: "now",
+		label: "Current draft",
+		by: session[0]?.by ?? "You",
+		at: Date.now(),
+		value: now,
+		current: true
+	});
+	session.slice(1).forEach((h, i) => versions.push({
+		id: `s${i}`,
+		label: h.label ?? "Edit",
+		by: h.by,
+		at: h.at,
+		value: h.value
+	}));
+	if (!same(baseline, now) && !session.some((h) => same(h.value, baseline))) versions.push({
+		id: "open",
+		label: "When you opened it",
+		value: baseline
+	});
+	if (published !== void 0) versions.push({
+		id: "pub",
+		label: "Published",
+		value: published
+	});
+	const show = (v) => {
+		if (isTextual(field.type)) return plainText(v) || "Empty";
+		if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? "item" : "items"}`;
+		if (isObj(v)) return summarize(field.fields ?? [], v) || plainText(v) || "Set";
+		if (typeof v === "boolean") return v ? "On" : "Off";
+		return v == null || v === "" ? "Empty" : String(v);
+	};
+	const meta = (v) => {
+		if (v.current) return `Now · ${v.by}`;
+		if (v.at === void 0) return v.label;
+		return `${relTime(v.at)}${v.by ? ` · ${v.by}` : ""}${v.label ? ` · ${v.label}` : ""}`;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			seesDevSurfaces(env) ? /* @__PURE__ */ jsx("div", {
+				className: "text-kit-2xs font-medium text-kit-fg-3",
+				children: apiName(form.schema.name, path)
+			}) : null,
+			/* @__PURE__ */ jsxs("h2", {
+				className: "text-kit-base font-semibold text-kit-fg",
+				children: ["History of ", field.title.toLowerCase()]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-kit-xs text-kit-fg-3",
+				children: "Restoring lands in the draft and doesn't publish. Publish afterwards to go live."
+			})
+		] }), /* @__PURE__ */ jsx("ul", {
+			className: "overflow-hidden rounded-kit-lg border border-kit-line",
+			children: versions.map((v, i) => /* @__PURE__ */ jsxs("li", {
+				"data-version": v.id,
+				className: "group/ver flex items-start gap-2.5 border-b border-kit-line-subtle px-3 py-2.5 last:border-b-0",
+				children: [
+					v.by ? /* @__PURE__ */ jsx(Avatar, {
+						name: v.by,
+						size: 22
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "size-[22px] shrink-0 rounded-full bg-kit-muted"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 text-kit-sm",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-medium text-kit-fg",
+									children: v.current ? "Current draft" : `Version ${versions.length - i}`
+								}), v.id === "pub" ? /* @__PURE__ */ jsx("span", {
+									className: "rounded-kit-md bg-kit-success-soft px-1 text-kit-2xs text-kit-success-fg",
+									children: "Published"
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "text-kit-xs text-kit-fg-3",
+								children: meta(v)
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: cn("mt-1 line-clamp-2 rounded-kit-md bg-kit-subtle px-2 py-1 text-kit-xs text-kit-fg-2", field.type === "color" && "flex items-center gap-1.5"),
+								children: [field.type === "color" && typeof v.value === "string" ? /* @__PURE__ */ jsx("span", {
+									className: "size-3 rounded-kit-md",
+									style: { background: v.value }
+								}) : null, show(v.value)]
+							})
+						]
+					}),
+					v.current ? null : /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "secondary",
+						className: "opacity-0 transition-opacity focus-visible:opacity-100 group-hover/ver:opacity-100 [@media(pointer:coarse)]:opacity-100",
+						leftIcon: /* @__PURE__ */ jsx(IconArrowBackUp, { stroke: 1.5 }),
+						onClick: () => {
+							const prev = now;
+							form.setAt(path, v.value, { label: "Restored" });
+							form.navigate(parentOfField(path));
+							toast?.("Restored as a draft", {
+								description: field.title,
+								action: {
+									label: "Undo",
+									onClick: () => form.setAt(path, prev)
+								},
+								duration: 1e4
+							});
+						},
+						children: "Restore"
+					})
+				]
+			}, v.id))
+		})]
+	});
+}
+/** Navigate back from a field's history to the frame that shows the field. */
+function parentOfField(path) {
+	for (let i = path.length - 1; i >= 0; i--) if (typeof path[i] === "number") return path.slice(0, i + 1);
+	return path.length > 1 ? path.slice(0, -1) : [];
+}
+/** The title shown as `parentTitle` for the current frame (the root crumb's label for depth 1). */
+function parentTitleOf(frames, rootLabel) {
+	if (frames.length < 2) return void 0;
+	return frames.length === 2 ? rootLabel : frames[frames.length - 2].title;
+}
+/** Floating layers (Base UI popups carry these roles); keys and focus coming from one belong to that layer. */
+var LAYER = "[role=dialog],[role=menu],[role=listbox]";
+/** Slide direction for a frame change: deeper → 1, shallower → −1, a sibling step → by index. */
+function frameDirection(prev, frames, key) {
+	if (prev.key === key) return 0;
+	const cur = frames[frames.length - 1];
+	if (frames.length > prev.depth) return 1;
+	if (frames.length < prev.depth) return -1;
+	return (cur.item?.index ?? 0) >= prev.index ? 1 : -1;
+}
+/**
+* The drill-in stack's behaviour. `root` wraps the form (keys bubble to it), `scroller` is the scrolling element (or
+* null when the host scrolls). Returns the current frame, its key, the slide direction and the form's onKeyDown.
+*/
+function useFrameNavigation({ frames, navigate, root, scroller }) {
+	const current = frames[frames.length - 1];
+	const frameKey = frameKeyOf(current.path);
+	const prev = React.useRef({
+		depth: frames.length,
+		index: current.item?.index ?? 0,
+		key: frameKey
+	});
+	const dir = frameDirection(prev.current, frames, frameKey);
+	const dirRef = React.useRef(1);
+	if (dir) dirRef.current = dir;
+	const scrollMem = React.useRef(/* @__PURE__ */ new Map());
+	React.useLayoutEffect(() => {
+		const was = prev.current.key;
+		if (was === frameKey) return;
+		if (scroller.current) scrollMem.current.set(was, scroller.current.scrollTop);
+		prev.current = {
+			depth: frames.length,
+			index: current.item?.index ?? 0,
+			key: frameKey
+		};
+		const el = scroller.current;
+		if (el) el.scrollTop = scrollMem.current.get(frameKey) ?? 0;
+		const active = document.activeElement;
+		const layer = active && active !== document.body ? active.closest(LAYER) : null;
+		const fromLayer = !!layer && !layer.contains(root.current);
+		if (root.current && (active === document.body || root.current.contains(active) || fromLayer)) root.current.querySelector(`[data-frame-body="${CSS.escape(frameKey)}"]`)?.focus({ preventScroll: true });
+	});
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented) return;
+		const t = e.target;
+		const layer = t.closest(LAYER);
+		if (layer && root.current && !layer.contains(root.current)) return;
+		if (e.key === "Escape" && frames.length > 1 && !t.isContentEditable) {
+			e.preventDefault();
+			e.stopPropagation();
+			navigate(frames[frames.length - 2].path);
+			return;
+		}
+		const it = current.item;
+		if (it && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			const typing = t.matches("input,textarea,select") || t.isContentEditable;
+			if (e.altKey || !typing && t.matches("[data-frame-body],[data-frame-header]")) {
+				const n = it.index + (e.key === "ArrowUp" ? -1 : 1);
+				if (n >= 0 && n < it.count) {
+					e.preventDefault();
+					navigate([...it.arrayPath, n]);
+				}
+			}
+		}
+	};
+	return {
+		current,
+		frameKey,
+		dir: dirRef.current,
+		onKeyDown
+	};
+}
+var EASE = [
+	.22,
+	1,
+	.36,
+	1
+];
+/**
+* The frame body with V2's slide: 24px along the travel direction + fade, 220ms, ease [0.22, 1, 0.36, 1]; reduced
+* motion keeps only the fade. `before` renders inside the root frame above its fields (the synced-from note).
+*/
+function FrameStage({ frames, frameKey, dir, rootLabel, variant, before, review }) {
+	const reduce = useReducedMotion();
+	const current = frames[frames.length - 1];
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative",
+		style: review ? { clipPath: "inset(-100vh 0 -100vh -16px)" } : { overflowX: "clip" },
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			custom: dir,
+			children: /* @__PURE__ */ jsxs(motion.div, {
+				custom: dir,
+				variants: {
+					enter: (d) => ({
+						x: reduce ? 0 : d * 24,
+						opacity: 0
+					}),
+					center: {
+						x: 0,
+						opacity: 1
+					},
+					exit: (d) => ({
+						x: reduce ? 0 : d * -24,
+						opacity: 0
+					})
+				},
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: {
+					duration: .22,
+					ease: EASE
+				},
+				"data-frame-body": frameKey,
+				tabIndex: -1,
+				className: cn("outline-none focus-visible:shadow-none", variant === "document" ? "py-1" : "px-4 py-4"),
+				children: [current.kind === "root" ? before : null, /* @__PURE__ */ jsx(FrameView, {
+					frame: current,
+					parentTitle: parentTitleOf(frames, rootLabel)
+				})]
+			}, frameKey)
+		})
+	});
+}
+//#endregion
+export { FrameHeader, FrameSlotsProvider, FrameStage, FrameView, HISTORY_SEGMENT, HistoryView, frameContext, frameDirection, parentOfField, parentTitleOf, useFrameNavigation, useFrameSlots };
+
+//# sourceMappingURL=frame.js.map