@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/rich-text/component-card.js

@@ -0,0 +1,706 @@
+import { cn } from "../../lib/cn.js";
+import { useKitServices } from "../../context.js";
+import { Button, IconButton } from "../../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Tooltip } from "../../ui/overlay.js";
+import * as React from "react";
+import { IconAlertTriangle, IconArrowDown, IconArrowUp, IconComponents, IconCopy, IconDots, IconLayoutNavbarCollapse, IconLayoutNavbarExpand, IconLink, IconRefresh, IconTrash, IconUnlink } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/controls/rich-text/component-card.tsx
+/**
+* The embedded component card (V2 features/blocks/instance-card.tsx + instance-ui.tsx StateChip / MissingNote / dialogs),
+* drawn when the host can look the component up (KitServices.useComponentInfo, component-services.ts):
+*
+*   ┌ [icon] Inline CTA   🔗 2 places · ● Edited here                          ⋯ ┐  36px strip
+*   ├ ⚠ The original "Product card" was deleted. …   [Keep as a separate copy] [Remove] ┤  missing only
+*   │  the component itself, drawn live with this place's values (KitServices.ComponentPreview), else    │
+*   │  its snapshot where this place shows exactly that, else its fields; at most 240px, faded            │
+*   └──────────────────────────────────────────────────────────────────────────────┘
+*
+* Every state comes from the lookup or the stored copy: "Missing component" only when the library says there is no
+* such component, the count only when the host measured it, "Edited here" only for overrides of fields the component
+* has, "Detached" for a separate copy (V2 instances.ts `detached`), and "Shared version changed" only when the
+* component's current version (`info.publishedAt`) differs from the one the copy was taken from.
+*
+* A separate copy is made through the host (`copyComponent`, which answers what readers see now) and written as ONE
+* undo step (V2 detachNow: "Make a separate copy"); "Use shared version again" (V2 RelinkDialog) keeps this place's
+* edits as overrides or drops them, also one step. A host without `copyComponent` offers neither.
+*
+* Deviation from V2: V2 shows "Shared version changed" on a LINKED instance after a breaking release (instances.ts
+* `pending`). A linked instance here follows every publish of its component, so there is nothing to review; the
+* notice is drawn on a separate copy instead, whose source moved on, and it opens "Use shared version again".
+*/
+/** V2 NARROW: at or under this card width the scope chip shows its icon only. */
+var NARROW = 480;
+/** V2 PREVIEW_CAP: the preview at rest is at most this tall, faded when its content is taller. */
+var PREVIEW_H = 240;
+var placesShort = (n) => `${n} ${n === 1 ? "place" : "places"}`;
+function useWidth(ref) {
+	const [w, setW] = React.useState(0);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		setW(el.clientWidth);
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => setW(el.clientWidth));
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [ref]);
+	return w;
+}
+/** A stored value as one line of reading text, or null when it has none (lists, empty values, flags). */
+function readable(v) {
+	if (typeof v === "number") return String(v);
+	if (typeof v === "string") return v.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim() || null;
+	if (v && typeof v === "object" && !Array.isArray(v)) {
+		const o = v;
+		return readable(o.label ?? o.text ?? o.title ?? o.href);
+	}
+	return null;
+}
+var parseObj = (s) => {
+	try {
+		const v = s ? JSON.parse(s) : {};
+		return v && typeof v === "object" && !Array.isArray(v) ? v : {};
+	} catch {
+		return {};
+	}
+};
+/** True when `a` is a later instant than `b`; false when either is absent or unreadable (never a made-up "changed"). */
+var laterThan = (a, b) => {
+	const x = a ? Date.parse(a) : NaN;
+	const y = b ? Date.parse(b) : NaN;
+	return Number.isFinite(x) && Number.isFinite(y) && x > y;
+};
+var same = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
+function ComponentCard({ m, el, ctx, use, overrides, set }) {
+	const { copyComponent, toast, ComponentPreview } = useKitServices();
+	const { info, loading, error } = use(m.ref ?? "");
+	const card = React.useRef(null);
+	const width = useWidth(card);
+	const narrow = !!width && width <= NARROW;
+	const [collapsed, setCollapsed] = React.useState(false);
+	const [dialog, setDialog] = React.useState(null);
+	const [busy, setBusy] = React.useState(false);
+	const detached = !!m.detached;
+	const own = React.useMemo(() => parseObj(m.props), [m.props]);
+	const missing = !m.ref || !!info?.missing;
+	const name = info && !info.missing ? info.name : m.name || info?.name || "Component";
+	const fieldKeys = new Set((info?.fields ?? []).map((f) => f.key));
+	const edited = missing || detached ? 0 : Object.keys(overrides).filter((k) => fieldKeys.has(k)).length;
+	const places = info?.places;
+	const known = !!info || missing;
+	const changed = detached && !missing && laterThan(info?.publishedAt, m.sourcePublishedAt);
+	const label = `${name} component${known ? `, ${detached ? `Detached${changed ? ", Shared version changed" : ""}` : missing ? "Missing component" : edited ? "Edited here" : "Shared"}` : ""}${known && !missing && !detached && places != null ? `, ${placesShort(places)}` : ""}`;
+	const rows = detached ? copyRows(own, info?.fields, m.variant) : previewRows(missing, info?.fields, overrides, m.variant);
+	const image = missing || detached || edited || m.variant ? null : info?.image || null;
+	const liveProps = React.useMemo(() => detached ? own : {
+		...Object.fromEntries((info?.fields ?? []).flatMap((f) => f.value !== void 0 ? [[f.key, f.value]] : [])),
+		...overrides
+	}, [
+		detached,
+		own,
+		info?.fields,
+		overrides
+	]);
+	const live = ComponentPreview && m.ref && info && !missing && !m.variant ? {
+		Preview: ComponentPreview,
+		ref: m.ref
+	} : null;
+	const preview = live ? /* @__PURE__ */ jsx(LivePreview, {
+		Preview: live.Preview,
+		componentId: live.ref,
+		title: name,
+		props: liveProps,
+		rows
+	}) : image || rows.length ? /* @__PURE__ */ jsx(PreviewWindow, {
+		image,
+		rows
+	}) : null;
+	const canCopy = !!copyComponent && !!m.ref && !ctx.readOnly;
+	/**
+	* The change as ONE undo step (IslandCtx.step: the dock's toolbar Undo, this toast's Undo and ⌘Z in the body are one
+	* undo), and the toast that offers it back.
+	*/
+	const commit = (patch, label, title, description) => {
+		const before = el.__rt;
+		const undo = ctx.step ? ctx.step(label, () => (set(patch, label, false), el), before) : (set(patch, label), () => ctx.undo?.() ? true : "Changes made after it come first. Press ⌘Z to undo them.");
+		toast?.(title, {
+			description,
+			action: {
+				label: "Undo",
+				onClick: () => {
+					const r = undo();
+					if (r !== true) ctx.notify("Nothing was undone", r);
+				}
+			}
+		});
+	};
+	/** V2 detachNow: this place keeps what readers see now and stops following the component, as one undo step. */
+	const detach = async (title) => {
+		if (!copyComponent || !m.ref || busy) return;
+		setBusy(true);
+		try {
+			const copy = await copyComponent(m.ref, {
+				overrides,
+				...m.variant ? { variant: m.variant } : {}
+			});
+			commit((cur) => ({
+				id: cur.id,
+				ref: cur.ref,
+				...cur.name !== void 0 || info?.name ? { name: cur.name ?? info?.name } : {},
+				...cur.variant !== void 0 ? { variant: cur.variant } : {},
+				detached: true,
+				props: JSON.stringify(copy.props),
+				...copy.blocks !== void 0 ? { blocks: copy.blocks } : {},
+				...copy.sourcePublishedAt ? { sourcePublishedAt: copy.sourcePublishedAt } : {},
+				...cur.extra !== void 0 ? { extra: cur.extra } : {}
+			}), "Make a separate copy", title, "It keeps its content and no longer follows the shared component.");
+		} catch (e) {
+			ctx.notify("This place couldn't keep its own copy", e instanceof Error ? e.message : String(e));
+		} finally {
+			setBusy(false);
+		}
+	};
+	/** V2 instanceOps.relink: keep = what differs from the component becomes overrides; reset = the component's content. */
+	const relink = (mode) => {
+		const kept = copyEdits(m, own, info?.fields);
+		const n = Object.keys(kept).length;
+		commit((cur) => ({
+			id: cur.id,
+			ref: cur.ref,
+			...cur.name !== void 0 ? { name: info?.name ?? cur.name } : {},
+			...mode === "keep" && Object.keys(kept).length ? { overrides: JSON.stringify(kept) } : {},
+			...mode === "keep" && cur.variant !== void 0 ? { variant: cur.variant } : {},
+			...cur.extra !== void 0 ? { extra: cur.extra } : {}
+		}), "Use shared version again", `${name} is shared again`, mode === "keep" && n ? `${n} ${n === 1 ? "edit" : "edits"} kept here.` : "It shows the component's content.");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: card,
+		role: "group",
+		"aria-label": label,
+		"aria-roledescription": "component",
+		"aria-busy": busy || void 0,
+		"data-instance-card": "",
+		"data-rt-isolate": "",
+		"data-state": detached ? "detached" : missing ? "missing" : known ? "linked" : void 0,
+		className: cn("group/inst relative rounded-kit-lg border bg-kit-control-bg text-left transition-colors duration-150 motion-reduce:transition-none", missing && !detached ? "border-kit-warning-line" : "border-kit-line hover:border-kit-line-strong"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-9 select-none items-center gap-1.5 pl-1 pr-1",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "w-1" }),
+					/* @__PURE__ */ jsx(IconComponents, {
+						size: 15,
+						stroke: 1.5,
+						className: "shrink-0 text-kit-fg-2",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 shrink truncate text-kit-sm font-medium text-kit-fg",
+						children: name
+					}),
+					detached ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DetachedChip, {
+						name,
+						compact: narrow
+					}), changed ? /* @__PURE__ */ jsx(ChangedChip, {
+						name,
+						compact: narrow,
+						onReview: canCopy ? () => setDialog("relink") : void 0
+					}) : null] }) : known ? /* @__PURE__ */ jsx(StateChip, {
+						missing,
+						places,
+						edited,
+						compact: narrow
+					}) : null,
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					ctx.readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						className: "shrink-0",
+						label: `${name} actions`,
+						children: /* @__PURE__ */ jsx(IconDots, { stroke: 1.5 })
+					}) }), /* @__PURE__ */ jsxs(MenuContent, {
+						align: "end",
+						className: "w-56",
+						children: [
+							preview ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: collapsed ? /* @__PURE__ */ jsx(IconLayoutNavbarExpand, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconLayoutNavbarCollapse, { stroke: 1.5 }),
+								onClick: () => setCollapsed(!collapsed),
+								children: collapsed ? "Show preview" : "Collapse preview"
+							}) : null,
+							canCopy && info && !missing && !detached ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconUnlink, { stroke: 1.5 }),
+								disabled: busy,
+								onClick: () => setDialog("detach"),
+								children: "Make a separate copy"
+							}) : null,
+							canCopy && missing && !detached ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconUnlink, { stroke: 1.5 }),
+								disabled: busy,
+								onClick: () => void detach("Kept as a separate copy"),
+								children: "Keep as a separate copy"
+							}) : null,
+							canCopy && info && !missing && detached ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 }),
+								onClick: () => setDialog("relink"),
+								children: "Use shared version again"
+							}) : null,
+							ctx.duplicate ? /* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+								onClick: () => ctx.duplicate?.(el),
+								children: "Duplicate"
+							}) : null,
+							ctx.move ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconArrowUp, { stroke: 1.5 }),
+								disabled: !el.previousElementSibling,
+								onClick: () => ctx.move?.(el, -1),
+								children: "Move up"
+							}), /* @__PURE__ */ jsx(MenuItem, {
+								icon: /* @__PURE__ */ jsx(IconArrowDown, { stroke: 1.5 }),
+								disabled: !el.nextElementSibling,
+								onClick: () => ctx.move?.(el, 1),
+								children: "Move down"
+							})] }) : null,
+							/* @__PURE__ */ jsx(MenuSeparator, {}),
+							/* @__PURE__ */ jsx(MenuItem, {
+								danger: true,
+								icon: /* @__PURE__ */ jsx(IconTrash, { stroke: 1.5 }),
+								onClick: () => ctx.remove(el),
+								children: "Remove"
+							})
+						]
+					})] })
+				]
+			}),
+			error ? /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "flex items-center gap-2 border-t border-kit-line-subtle px-3 py-2.5 text-kit-sm text-kit-fg-2",
+				children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+					className: "size-4 shrink-0 text-kit-warning-fg",
+					stroke: 1.5,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1",
+					children: error
+				})]
+			}) : null,
+			missing && !detached && !loading ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2 border-t border-kit-line-subtle px-3 py-2.5 text-kit-sm",
+				role: "note",
+				children: [
+					/* @__PURE__ */ jsx(IconAlertTriangle, {
+						className: "size-4 shrink-0 text-kit-warning-fg",
+						stroke: 1.5,
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1 text-kit-fg-2",
+						children: [
+							"The original “",
+							name,
+							"” was deleted. Readers see nothing in this place."
+						]
+					}),
+					ctx.readOnly ? null : /* @__PURE__ */ jsxs("span", {
+						className: "flex shrink-0 items-center gap-1.5",
+						children: [canCopy ? /* @__PURE__ */ jsx(Button, {
+							size: "xs",
+							variant: "secondary",
+							loading: busy,
+							onClick: () => void detach("Kept as a separate copy"),
+							children: "Keep as a separate copy"
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							size: "xs",
+							variant: "danger-ghost",
+							onClick: () => ctx.remove(el),
+							children: "Remove"
+						})]
+					})
+				]
+			}) : null,
+			collapsed ? null : preview,
+			canCopy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DetachDialog, {
+				open: dialog === "detach",
+				name,
+				places,
+				onClose: () => setDialog(null),
+				onConfirm: () => {
+					setDialog(null);
+					detach(`Separate copy of ${name}`);
+				}
+			}), /* @__PURE__ */ jsx(RelinkDialog, {
+				open: dialog === "relink",
+				name,
+				kept: Object.keys(copyEdits(m, own, info?.fields)).length,
+				onClose: () => setDialog(null),
+				onConfirm: (mode) => {
+					setDialog(null);
+					relink(mode);
+				}
+			})] }) : null
+		]
+	});
+}
+/**
+* A separate copy's EDITS, which it keeps as overrides when it follows the component again: its values that differ from
+* the snapshot taken when the copy was made, never from the component as it is now (a republish since is not an edit
+* of this place; the owner saw "2 fields stay as they are" with nothing edited).
+*
+* A copy made here stores that snapshot: its values (`props`) with the blocks drawn from them (`blocks`), and no
+* surface edits a copy's values afterwards, so it has no edits. Copy markup from V2 stores no snapshot (no `blocks`):
+* its values that differ from the component's, on fields the component has (V2 instanceOps.relink).
+*/
+function copyEdits(m, own, fields) {
+	const out = {};
+	if (m.blocks !== void 0) return out;
+	for (const f of fields ?? []) if (f.key in own && !same(own[f.key], f.value)) out[f.key] = own[f.key];
+	return out;
+}
+/** V2 StateChip: 13px, neutral, not a pill; the missing chip is the one tinted state. */
+function StateChip({ missing, places, edited, compact }) {
+	const base = CHIP;
+	if (missing) return /* @__PURE__ */ jsx(Tooltip, {
+		content: "The component was deleted. Readers see nothing in this place.",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn(base, "bg-kit-warning-soft px-1.5 text-kit-warning-fg"),
+			children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+				className: "size-3.5 shrink-0",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), compact ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Missing component"
+			}) : "Missing component"]
+		})
+	});
+	const count = places ? placesShort(places) : null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: `Changes here apply only to this place. Edit the component to change ${places && places > 1 ? `all ${places}` : "it everywhere"}.${edited ? ` ${edited} ${edited === 1 ? "field" : "fields"} edited here.` : ""}`,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn(base, "px-1 text-kit-fg-2"),
+			tabIndex: -1,
+			children: [
+				/* @__PURE__ */ jsx(IconLink, {
+					className: "size-3.5 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				}),
+				compact ? /* @__PURE__ */ jsxs("span", {
+					className: "sr-only",
+					children: ["Shared", count ? `, ${count}` : ""]
+				}) : count ?? "Shared",
+				!compact && count ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: ", shared"
+				}) : null,
+				edited ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "ml-1 size-1.5 shrink-0 rounded-full bg-kit-accent",
+					"aria-hidden": true
+				}), compact ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: ", edited here"
+				}) : /* @__PURE__ */ jsx("span", { children: "Edited here" })] }) : null
+			]
+		})
+	});
+}
+var CHIP = "inline-flex h-6 shrink-0 items-center gap-1 rounded-kit-md text-[13px] leading-none whitespace-nowrap";
+/** V2 StateChip, detached: fg-3, the unlink glyph. */
+function DetachedChip({ name, compact }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: `A separate copy. Changes to ${name} don't reach it.`,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn(CHIP, "px-1 text-kit-fg-3"),
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsx(IconUnlink, {
+				className: "size-3.5 shrink-0",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), compact ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Detached"
+			}) : "Detached"]
+		})
+	});
+}
+/** V2 StateChip, update: a quiet button that opens the way back to the shared version. */
+function ChangedChip({ name, compact, onReview }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: `${name} changed since this copy was made.`,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onReview,
+			disabled: !onReview,
+			className: cn(CHIP, "px-1 text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg disabled:hover:bg-transparent"),
+			children: [/* @__PURE__ */ jsx(IconRefresh, {
+				className: "size-3.5 shrink-0",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), compact ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Shared version changed"
+			}) : "Shared version changed"]
+		})
+	});
+}
+/** V2 useInstanceDialogs "detach": confirm before this place stops following the component. */
+function DetachDialog({ open, name, places, onClose, onConfirm }) {
+	const others = places != null ? places - 1 : null;
+	return /* @__PURE__ */ jsx(Modal, {
+		open,
+		onOpenChange: (o) => !o && onClose(),
+		children: /* @__PURE__ */ jsxs(ModalContent, {
+			size: "sm",
+			children: [
+				/* @__PURE__ */ jsx(ModalHeader, {
+					title: `Make a separate copy of ${name}?`,
+					description: "This place keeps its current content and stops following the shared component."
+				}),
+				others != null ? /* @__PURE__ */ jsx(ModalBody, {
+					className: "pt-2 text-kit-sm text-kit-fg-2",
+					children: others > 0 ? `The other ${others === 1 ? "place stays" : `${others} places stay`} shared.` : "No other place uses it."
+				}) : null,
+				/* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					autoFocus: true,
+					onClick: onConfirm,
+					children: "Make a copy"
+				})] })
+			]
+		})
+	});
+}
+/** V2 RelinkDialog: keep this place's edits as overrides, or take the component's content. */
+function RelinkDialog({ open, name, kept, onClose, onConfirm }) {
+	const [mode, setMode] = React.useState("keep");
+	React.useEffect(() => {
+		if (open) setMode("keep");
+	}, [open]);
+	const rows = [{
+		v: "keep",
+		title: "Keep my edits here",
+		line: kept ? `${kept} ${kept === 1 ? "field stays" : "fields stay"} as ${kept === 1 ? "it is" : "they are"}; everything else follows ${name} again.` : `Nothing differs, so it simply follows ${name} again.`
+	}, {
+		v: "reset",
+		title: `Use ${name}'s content`,
+		line: "Drops the edits made here. Undo is one click away."
+	}];
+	return /* @__PURE__ */ jsx(Modal, {
+		open,
+		onOpenChange: (o) => !o && onClose(),
+		children: /* @__PURE__ */ jsxs(ModalContent, {
+			size: "sm",
+			children: [
+				/* @__PURE__ */ jsx(ModalHeader, {
+					title: `Use the shared ${name} again?`,
+					description: "This place follows the shared component again."
+				}),
+				/* @__PURE__ */ jsx(ModalBody, {
+					className: "pt-3",
+					children: /* @__PURE__ */ jsx("div", {
+						role: "radiogroup",
+						"aria-label": "Use shared version again",
+						className: "flex flex-col divide-y divide-kit-line overflow-hidden rounded-kit-lg border border-kit-line",
+						onKeyDown: (e) => {
+							if (![
+								"ArrowUp",
+								"ArrowDown",
+								"ArrowLeft",
+								"ArrowRight"
+							].includes(e.key)) return;
+							e.preventDefault();
+							const next = mode === "keep" ? "reset" : "keep";
+							setMode(next);
+							e.currentTarget.querySelector(`[data-mode="${next}"]`)?.focus();
+						},
+						children: rows.map((row) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							role: "radio",
+							"data-mode": row.v,
+							tabIndex: mode === row.v ? 0 : -1,
+							"aria-checked": mode === row.v,
+							onClick: () => setMode(row.v),
+							className: cn("flex min-h-14 items-start gap-3 px-3 py-2.5 text-left transition-colors hover:bg-kit-hover", mode === row.v && "bg-kit-subtle"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border", mode === row.v ? "border-kit-control-checked" : "border-kit-line-strong"),
+								children: mode === row.v ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-kit-fg" }) : null
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "block text-kit-sm font-medium text-kit-fg",
+									children: row.title
+								}), /* @__PURE__ */ jsx("span", {
+									className: "block text-kit-xs text-kit-fg-3",
+									children: row.line
+								})]
+							})]
+						}, row.v))
+					})
+				}),
+				/* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: () => onConfirm(mode),
+					children: "Use shared version"
+				})] })
+			]
+		})
+	});
+}
+/**
+* What the window lists when there is no picture: each field's value as this place shows it (its override, else the
+* component's own), then the layout this place draws it in. A missing component has only what this place stored: its
+* overrides, named by their keys, and its layout.
+*/
+function previewRows(missing, fields, overrides, variant) {
+	const out = [];
+	if (missing || !fields) for (const [key, v] of Object.entries(overrides)) {
+		const text = readable(v);
+		if (text) out.push({
+			key,
+			label: key,
+			text
+		});
+	}
+	else for (const f of fields) {
+		const text = readable(f.key in overrides ? overrides[f.key] : f.value);
+		if (text) out.push({
+			key: f.key,
+			label: f.label,
+			text
+		});
+	}
+	if (variant) out.push({
+		key: "__variant",
+		label: "Layout",
+		text: variant
+	});
+	return out;
+}
+/**
+* A separate copy's values (V2 `props`) in the component's field order. A field the copy doesn't hold draws the
+* component's value for it, as V2's renderer does for a copy (it draws the def with `props`, defaults for the rest);
+* a value the component no longer has a field for follows, under its key. Then its layout.
+*/
+function copyRows(own, fields, variant) {
+	const out = [];
+	const push = (key, label, v) => {
+		const text = readable(v);
+		if (text) out.push({
+			key,
+			label,
+			text
+		});
+	};
+	for (const f of fields ?? []) push(f.key, f.label, f.key in own ? own[f.key] : f.value);
+	for (const [key, v] of Object.entries(own)) if (!fields?.some((f) => f.key === key)) push(key, key, v);
+	if (variant) out.push({
+		key: "__variant",
+		label: "Layout",
+		text: variant
+	});
+	return out;
+}
+/** The preview's frame: under the card's header, at most PREVIEW_H tall. */
+var PREVIEW_CHROME = "relative overflow-hidden rounded-b-kit-lg border-t border-kit-line-subtle bg-kit-subtle";
+function PreviewWindow({ image, rows }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-instance-preview": "",
+		className: PREVIEW_CHROME,
+		style: { maxHeight: PREVIEW_H },
+		children: /* @__PURE__ */ jsx(PreviewBody, {
+			image,
+			rows
+		})
+	});
+}
+/**
+* The component drawn live by the host (KitServices.ComponentPreview), mounted once the card is on screen. Its height is
+* reserved from the start (PREVIEW_H), so the card never moves while it loads; where the host cannot draw it, the values
+* are listed under the reason.
+*/
+function LivePreview({ Preview, componentId, title, props, rows }) {
+	const box = React.useRef(null);
+	const [seen, setSeen] = React.useState(() => typeof IntersectionObserver === "undefined");
+	React.useEffect(() => {
+		const el = box.current;
+		if (seen || !el) return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) setSeen(true);
+		});
+		io.observe(el);
+		return () => io.disconnect();
+	}, [seen]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: box,
+		"data-instance-preview": "",
+		"data-live": "",
+		className: PREVIEW_CHROME,
+		children: seen ? /* @__PURE__ */ jsx(Preview, {
+			componentId,
+			title,
+			props,
+			fallback: (reason) => /* @__PURE__ */ jsx(PreviewBody, {
+				image: null,
+				rows,
+				note: reason
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			style: { height: PREVIEW_H }
+		})
+	});
+}
+function PreviewBody({ image, rows, note }) {
+	const inner = React.useRef(null);
+	const [tall, setTall] = React.useState(false);
+	const [loaded, setLoaded] = React.useState(!image);
+	React.useLayoutEffect(() => {
+		const el = inner.current;
+		if (!el) return;
+		const on = () => setTall(el.scrollHeight > PREVIEW_H + 1);
+		on();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(on);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref: inner,
+		className: cn(tall && "[mask-image:linear-gradient(to_bottom,black_calc(100%-24px),transparent)]"),
+		style: tall || !loaded ? { height: PREVIEW_H } : void 0,
+		children: image ? /* @__PURE__ */ jsx("img", {
+			src: image,
+			alt: "",
+			className: "block h-auto w-full",
+			draggable: false,
+			onLoad: () => setLoaded(true),
+			onError: () => setLoaded(true)
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [note ? /* @__PURE__ */ jsx("p", {
+			className: "px-4 pt-3 text-kit-xs text-kit-fg-3",
+			children: note
+		}) : null, /* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-3 px-4 py-3.5",
+			children: rows.map((r) => /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("dt", {
+					className: "truncate text-kit-xs text-kit-fg-3",
+					children: r.label
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "mt-0.5 line-clamp-3 text-kit-sm text-kit-fg",
+					children: r.text
+				})]
+			}, r.key))
+		})] })
+	});
+}
+//#endregion
+export { ComponentCard };
+
+//# sourceMappingURL=component-card.js.map