@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/engine/field-shell.js

@@ -0,0 +1,988 @@
+import { cn } from "../lib/cn.js";
+import { AI_PRESETS, FieldHeaderSlot, KitSectionTitle, seesDevSurfaces, useForm, useKitEnv, useKitServices } from "../context.js";
+import { pathKey, same } from "../lib/path.js";
+import { Button, Sparkle } from "../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Popover, PopoverAnchor, PopoverContent, Tooltip } from "../ui/overlay.js";
+import { isTextual, plainText } from "../lib/schema.js";
+import { RowChrome } from "./bits.js";
+import { Avatar, avatarRingSpread } from "../ui/display.js";
+import { presenceColor } from "../ui/presence.js";
+import { HISTORY_SEGMENT } from "../schema/types.js";
+import { resolveHelp } from "../schema/help.js";
+import { textLength } from "../lib/validate.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertCircle, IconAlertTriangle, IconArrowBackUp, IconBraces, IconClipboard, IconCopy, IconDots, IconHistory, IconInfoCircle, IconLock, IconMessage, IconMessagePlus, IconRefresh, IconRotate, IconWorld } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { createPortal } from "react-dom";
+//#region src/engine/field-shell.tsx
+/**
+* FIELD SHELL — the one field chrome (V2 HEAD 9829bf1 kit/engine/field-shell.tsx; production FieldShell + CPO D8).
+*
+*   [Label *] [ⓘ] [override dot] [changed dot] [synced] [EN]  ……  [42 / 60] [action] [Reset] [undo] [comments] [presence] [⋯]
+*   help text (CPO D39: 12/16 --fg-3, 4px under the label, 1–2 lines; hidden while an error shows)
+*   ┌ control ───────────────────────────────┐   ← peer editing: the control's border in their colour
+*   └────────────────────────────────────────┘
+*   error / warning message ……………………… meta (42 / 60)
+*
+* Accessories (add-comment, ⋯) take NO space at rest; they appear on hover/focus (always on touch). A comment
+* COUNT chip is always visible. AI lives in ⋯ ("Rewrite with AI"), never as a label sparkle (CPO-142).
+*
+* Services (toast, AI rewrite, in-place comments) come from KitServices; a missing service hides its surface.
+*/
+/** `html`: a rich text value as its editor html (read through the host's codec), so Paste re-stores it for the target field. */
+var clip = null;
+/** Test seam: forget the shared field clipboard. */
+var resetFieldClipboard = () => {
+	clip = null;
+};
+var KIND = {
+	image: "an image",
+	file: "a file",
+	video: "a video",
+	reference: "a reference",
+	link: "a link",
+	button: "a button",
+	array: "a list",
+	slot: "blocks",
+	object: "a group of fields",
+	boolean: "an on/off value",
+	number: "a number",
+	color: "a colour"
+};
+var kindOf = (t) => isTextual(t) ? "text" : KIND[t] ?? t;
+var escHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+/** Plain text as editor html: one escaped paragraph per line. */
+var paragraphs = (text) => text.split(/\n+/).map((l) => l.trim()).filter(Boolean).map((l) => `<p>${escHtml(l)}</p>`).join("");
+/**
+* Html into a rich text field, stored in the field's own shape through the host's codec. A write that would drop
+* something is refused with the words the codec names; nothing is stored.
+*/
+function richTextWrite(codec, field, path, html, prev) {
+	try {
+		const out = codec.write(html, {
+			field,
+			path
+		}, prev);
+		return out.losses.length ? { refused: `${field.title} can't keep ${out.losses.join(", ")}` } : { value: out.value };
+	} catch (err) {
+		return { refused: `${field.title} could not store this text (${err instanceof Error ? err.message : String(err)})` };
+	}
+}
+/** A rich text value as editor html, when the host's codec reads it. */
+function richTextHtml(codec, field, path, value) {
+	if (!codec || field.type !== "richtext") return void 0;
+	try {
+		return codec.read(value, {
+			field,
+			path
+		}).html;
+	} catch {
+		return;
+	}
+}
+var apiName = (schemaName, path) => [schemaName, ...path.filter((s) => s !== HISTORY_SEGMENT)].reduce((a, s) => typeof s === "number" ? `${a}[${s}]` : a ? `${a}.${s}` : String(s), "");
+/** A long label truncates on one line; past this many characters a native `title` carries the full label (DESIGN 4.4). */
+var LABEL_HINT_AT = 28;
+var REVEAL = "hidden group-hover/field:inline-flex group-focus-within/field:inline-flex data-[state=open]:inline-flex data-[popup-open]:inline-flex [@media(pointer:coarse)]:inline-flex";
+function FieldShell({ field, path, id, value, onChange, readOnly, issue, action, layout = "stack", noComments, meta, className, children }) {
+	const env = useKitEnv();
+	const form = useForm();
+	const services = useKitServices();
+	const key = pathKey(path);
+	const slot = React.useContext(FieldHeaderSlot);
+	const lifted = slot && slot.key === key && layout === "stack" ? slot.el : null;
+	const [ai, setAi] = React.useState(false);
+	const [commentsOpen, setCommentsOpen] = React.useState(false);
+	const [commentArea, setCommentArea] = React.useState({ collisionPadding: 12 });
+	const peers = env.presence[key] ?? [];
+	const editor = peers.find((p) => p.status !== "viewing");
+	const InPlaceComments = services.FieldComments;
+	const quiet = env.fieldChrome === "quiet";
+	const bare = quiet || env.fieldChrome === "preview";
+	const canComment = !noComments && !bare && (!!env.onComment || !!InPlaceComments);
+	const openCount = env.comments[key] ?? 0;
+	const useStoreCount = env.onComment ? void 0 : services.useFieldCommentCount;
+	const changed = !!form?.hasPublished && !same(value, form.publishedAt(path));
+	const inh = form?.inherited && path.length === 1 ? form.inherited : void 0;
+	const overridden = !!inh && inh.isOverridden(key);
+	const reviewing = !!env.review;
+	const bar = env.review && env.review.count(path) > 0 ? env.review.bar(path, field) : null;
+	const sectionTitle = React.useContext(KitSectionTitle);
+	const repeatsSection = quiet && layout === "stack" && !!sectionTitle && sectionTitle.trim().toLowerCase() === field.title.trim().toLowerCase();
+	const canUndo = !bare && !!form?.canUndo(key) && !readOnly;
+	const synced = field.synced?.from;
+	const limit = field.validation?.max ?? field.validation?.recommendedMax;
+	const len = textLength(value);
+	const near = !!limit && len >= limit * .8;
+	const counter = limit && (field.type === "string" || field.type === "text" || field.type === "richtext") ? /* @__PURE__ */ jsxs("span", {
+		"data-slot": "field-counter",
+		className: cn("tabular-nums text-kit-xs", !near && "hidden group-focus-within/field:inline", field.validation?.max && len > field.validation.max ? "text-kit-danger-fg" : field.validation?.recommendedMax && len > field.validation.recommendedMax ? "text-kit-warning-fg" : "text-kit-fg-3"),
+		children: [
+			len,
+			" / ",
+			limit
+		]
+	}) : null;
+	const dense = env.helpDisplay === "tooltip";
+	const lockedHere = !!readOnly && !!field.access?.edit && !env.readOnly && !env.can(field.access.edit);
+	const help = lockedHere ? (field.lockReason?.trim() || "Set by developers").replace(/\.?$/, ".") : resolveHelp(field);
+	const helpNode = lockedHere ? /* @__PURE__ */ jsxs("span", {
+		"data-locked": "",
+		className: "inline-flex items-start gap-1",
+		children: [/* @__PURE__ */ jsx(IconLock, {
+			className: "mt-px size-3 shrink-0",
+			stroke: 1.75,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Locked. "
+		}), help] })]
+	}) : help;
+	const more = field.helpMore || void 0;
+	const erroring = issue?.level === "error";
+	const helpInline = !!help && (!dense || lockedHere) && !erroring;
+	const tip = dense && !lockedHere ? [help, more].filter(Boolean).join(" ") : more;
+	const helpId = `${id}-help`;
+	const moreId = `${id}-more`;
+	const msgId = `${id}-msg`;
+	const describedBy = [
+		helpInline && helpId,
+		tip && moreId,
+		issue && msgId
+	].filter(Boolean).join(" ");
+	React.useEffect(() => {
+		const el = document.getElementById(id);
+		if (!el) return;
+		const next = [...(el.getAttribute("aria-describedby") ?? "").split(" ").filter((t) => t && !t.startsWith(`${id}-`)), ...describedBy.split(" ").filter(Boolean)].join(" ");
+		if (next) el.setAttribute("aria-describedby", next);
+		else el.removeAttribute("aria-describedby");
+	}, [id, describedBy]);
+	const info = tip ? /* @__PURE__ */ jsx(Tooltip, {
+		content: /* @__PURE__ */ jsx("span", {
+			className: "block max-w-[260px] whitespace-normal font-normal leading-4",
+			children: tip
+		}),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": `About ${field.title}`,
+			className: "-my-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 hover:text-kit-fg-2",
+			children: [/* @__PURE__ */ jsx(IconInfoCircle, {
+				className: "size-3.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				id: moreId,
+				className: "sr-only",
+				children: tip
+			})]
+		})
+	}) : null;
+	const label = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: field.title
+	}), field.validation?.required ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "text-kit-fg-2",
+		children: "*"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "(required)"
+	})] }) : null] });
+	const badges = /* @__PURE__ */ jsxs(Fragment, { children: [
+		overridden ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `Overrides ${inh.from}. Changes to the block no longer reach this field.`,
+			children: /* @__PURE__ */ jsx("span", {
+				role: "img",
+				className: "size-1.5 shrink-0 rounded-full bg-kit-accent",
+				"aria-label": `Overrides ${inh.from}`
+			})
+		}) : null,
+		changed && !reviewing ? /* @__PURE__ */ jsx(Tooltip, {
+			content: "Changed since publish",
+			children: /* @__PURE__ */ jsx("span", {
+				role: "img",
+				className: "size-1.5 shrink-0 rounded-full bg-kit-warning",
+				"aria-label": "Changed since publish"
+			})
+		}) : null,
+		synced ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `Synced from ${synced}. Changes apply on every page that uses it.`,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex h-4 shrink-0 items-center gap-0.5 rounded-kit-md bg-kit-info-soft px-1 text-kit-2xs font-medium text-kit-info-fg",
+				children: [/* @__PURE__ */ jsx(IconRefresh, {
+					className: "size-2.5",
+					stroke: 2,
+					"aria-hidden": true
+				}), "Synced"]
+			})
+		}) : null,
+		field.localized ? /* @__PURE__ */ jsx(Tooltip, {
+			content: "Translatable: this field can hold a value for each of the site's languages.",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex h-4 shrink-0 items-center gap-0.5 rounded-kit-md bg-kit-muted px-1 text-kit-2xs font-medium text-kit-fg-3",
+				children: [/* @__PURE__ */ jsx(IconWorld, {
+					className: "size-2.5",
+					stroke: 2,
+					"aria-hidden": true
+				}), "EN"]
+			})
+		}) : null
+	] });
+	const accessories = /* @__PURE__ */ jsxs(Fragment, { children: [
+		action,
+		overridden && !readOnly ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `Use ${inh.from}'s value again`,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					const box = e.currentTarget.closest("[data-field-key]");
+					inh.reset(key);
+					requestAnimationFrame(() => (document.getElementById(id) ?? box?.querySelector("textarea, input, [contenteditable=true], button"))?.focus({ preventScroll: true }));
+				},
+				"aria-label": `Reset ${field.title} to ${inh.from}`,
+				className: "inline-flex h-5 items-center rounded-kit-md px-1 text-kit-xs text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+				children: "Reset"
+			})
+		}) : null,
+		canUndo ? /* @__PURE__ */ jsx(Tooltip, {
+			content: `Undo last change to ${field.title}`,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Undo last change to ${field.title}`,
+				onClick: () => form?.undo(key),
+				className: "inline-flex size-5 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg",
+				children: /* @__PURE__ */ jsx(IconArrowBackUp, {
+					className: "size-3.5",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			})
+		}) : null,
+		canComment ? /* @__PURE__ */ jsx(CommentButton, {
+			count: openCount,
+			useCount: useStoreCount ? () => useStoreCount(env.docId, key) : void 0,
+			label: field.title,
+			open: commentsOpen,
+			onOpen: (el) => {
+				if (env.onComment) return env.onComment(path, field);
+				setCommentArea(fieldPopoverCollision(el.closest("[data-field-key]")));
+				setCommentsOpen(true);
+			}
+		}) : null,
+		/* @__PURE__ */ jsx(PeerStack, { peers }),
+		bare ? null : /* @__PURE__ */ jsx(FieldMenu, {
+			field,
+			path,
+			value,
+			onChange,
+			readOnly: !!readOnly,
+			changed,
+			onAi: () => setAi(true)
+		})
+	] });
+	const control = /* @__PURE__ */ jsx("div", {
+		className: cn("relative", editor && "[&_.border-kit-field-border]:border-[var(--peer)]"),
+		style: editor ? { "--peer": editor.color ?? presenceColor(editor.id ?? editor.name) } : void 0,
+		children
+	});
+	const message = issue || meta ? /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-4 items-start justify-between gap-3",
+		children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			children: issue ? /* @__PURE__ */ jsxs(motion.p, {
+				id: msgId,
+				initial: {
+					opacity: 0,
+					y: -2
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				role: issue.level === "error" ? "alert" : "status",
+				className: cn("flex min-w-0 items-start gap-1 text-kit-xs", issue.level === "error" ? "text-kit-danger-fg" : "text-kit-warning-fg"),
+				children: [issue.level === "error" ? /* @__PURE__ */ jsx(IconAlertCircle, {
+					className: "mt-px size-3.5 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				}) : /* @__PURE__ */ jsx(IconAlertTriangle, {
+					className: "mt-px size-3.5 shrink-0",
+					stroke: 1.5,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "min-w-0",
+					children: [issue.message, issue.fix && !readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: issue.fix.apply,
+						className: "font-medium text-kit-fg underline-offset-2 hover:underline",
+						children: issue.fix.label
+					})] }) : null]
+				})]
+			}, issue.message) : /* @__PURE__ */ jsx("span", {})
+		}), meta ? /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center gap-2",
+			children: meta
+		}) : null]
+	}) : null;
+	const labelEl = /* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		id: `${id}-label`,
+		className: "flex min-w-0 items-center gap-1 text-kit-sm font-medium text-kit-fg-2 transition-colors group-focus-within/field:text-kit-fg",
+		title: field.title.length > 28 ? field.title : void 0,
+		children: label
+	});
+	const body = layout === "row" ? /* @__PURE__ */ jsxs("div", {
+		className: cn("group/field relative flex min-w-0 flex-col gap-1.5", className),
+		"data-field-key": key,
+		"data-field": path.length === 1 ? key : void 0,
+		"data-slot": "kit-field",
+		children: [
+			bar,
+			/* @__PURE__ */ jsx(RowChrome.Provider, {
+				value: /* @__PURE__ */ jsxs(Fragment, { children: [
+					info,
+					badges,
+					accessories
+				] }),
+				children: control
+			}),
+			message
+		]
+	}) : layout === "card" && quiet ? /* @__PURE__ */ jsxs("div", {
+		className: cn("group/field relative flex flex-col gap-1", className),
+		"data-field-key": key,
+		"data-field": path.length === 1 ? key : void 0,
+		"data-slot": "kit-field",
+		children: [
+			bar,
+			/* @__PURE__ */ jsxs("div", {
+				"data-field-head": "",
+				className: "flex min-h-8 items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						htmlFor: id,
+						id: `${id}-label`,
+						className: "min-w-0 flex-1 cursor-pointer",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-1 text-kit-sm font-medium text-kit-fg-2 transition-colors group-focus-within/field:text-kit-fg",
+							children: [
+								label,
+								info,
+								badges
+							]
+						}), helpInline ? /* @__PURE__ */ jsx("span", {
+							id: helpId,
+							"data-slot": "field-help",
+							className: "mt-0.5 block text-kit-xs leading-4 text-kit-fg-3",
+							children: helpNode
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex shrink-0 items-center gap-0.5 empty:hidden",
+						children: accessories
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex shrink-0 items-center",
+						children: readOnly ? /* @__PURE__ */ jsx("span", {
+							className: "text-kit-sm text-kit-fg-2",
+							children: value ? "On" : "Off"
+						}) : control
+					})
+				]
+			}),
+			message
+		]
+	}) : layout === "card" ? /* @__PURE__ */ jsxs("div", {
+		className: cn("group/field relative flex flex-col gap-1.5", className),
+		"data-field-key": key,
+		"data-field": path.length === 1 ? key : void 0,
+		"data-slot": "kit-field",
+		children: [
+			bar,
+			/* @__PURE__ */ jsxs("div", {
+				"data-field-head": "",
+				className: cn("flex items-center gap-3 rounded-kit-lg border bg-kit-surface px-3 py-2.5 transition-colors", issue?.level === "error" ? "border-[var(--kit-field-invalid)]" : "border-kit-line hover:border-kit-line-strong"),
+				children: [
+					control,
+					/* @__PURE__ */ jsxs("label", {
+						htmlFor: id,
+						id: `${id}-label`,
+						className: "min-w-0 flex-1 cursor-pointer",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-1.5 text-kit-sm font-medium text-kit-fg",
+							children: [
+								label,
+								info,
+								badges
+							]
+						}), helpInline ? /* @__PURE__ */ jsx("span", {
+							id: helpId,
+							"data-slot": "field-help",
+							className: "block text-kit-xs leading-4 text-kit-fg-3",
+							children: helpNode
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-kit-xs text-kit-fg-3",
+						children: value ? "On" : "Off"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex shrink-0 items-center gap-0.5 empty:hidden",
+						children: accessories
+					})
+				]
+			}),
+			message
+		]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: cn("group/field relative flex min-w-0 flex-col gap-1.5", className),
+		"data-field-key": key,
+		"data-field": path.length === 1 ? key : void 0,
+		"data-slot": "kit-field",
+		"data-inherited": inh && !overridden ? "" : void 0,
+		"data-overridden": overridden ? "" : void 0,
+		children: [
+			bar,
+			repeatsSection ? /* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				id: `${id}-label`,
+				className: "sr-only",
+				children: label
+			}) : lifted ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				id: `${id}-label`,
+				className: "sr-only",
+				children: label
+			}), createPortal(/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-0.5 [&>button]:!inline-flex",
+				children: [
+					info,
+					badges,
+					counter,
+					accessories
+				]
+			}), lifted)] }) : /* @__PURE__ */ jsxs("div", {
+				"data-slot": "field-label-row",
+				"data-field-head": "",
+				className: "flex min-h-5 min-w-0 items-center gap-1.5",
+				children: [
+					labelEl,
+					info,
+					badges,
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					counter,
+					/* @__PURE__ */ jsx("span", {
+						className: "flex shrink-0 items-center gap-0.5",
+						children: accessories
+					})
+				]
+			}),
+			helpInline ? /* @__PURE__ */ jsx("p", {
+				id: helpId,
+				"data-slot": "field-help",
+				className: "-mt-0.5 text-kit-xs leading-4 text-kit-fg-3",
+				children: helpNode
+			}) : null,
+			control,
+			message
+		]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: ai,
+		onOpenChange: setAi,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+			className: "min-w-0",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open: commentsOpen,
+				onOpenChange: (open, d) => {
+					if (!open && d.reason === "escape-key" && document.activeElement?.hasAttribute("data-esc-owner")) return d.cancel();
+					setCommentsOpen(open);
+				},
+				children: [/* @__PURE__ */ jsx(PopoverAnchor, {
+					className: "min-w-0",
+					children: body
+				}), commentsOpen && InPlaceComments ? /* @__PURE__ */ jsx(PopoverContent, {
+					align: "start",
+					sideOffset: 8,
+					...commentArea,
+					initialFocus: false,
+					className: "w-[clamp(280px,var(--anchor-width),420px)] p-0",
+					children: /* @__PURE__ */ jsx(InPlaceComments, {
+						docId: env.docId,
+						fieldKey: key,
+						label: field.title,
+						quote: plainText(value).slice(0, 80) || void 0,
+						onClose: () => setCommentsOpen(false),
+						onOpenPanel: env.onComment ? () => {
+							env.onComment?.(path, field);
+							setCommentsOpen(false);
+						} : void 0
+					})
+				}) : null]
+			})
+		}), ai ? /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			sideOffset: 8,
+			className: "w-[clamp(300px,var(--anchor-width),440px)] p-0",
+			children: /* @__PURE__ */ jsx(AiRewrite, {
+				field,
+				path,
+				value,
+				onChange,
+				onClose: () => setAi(false)
+			})
+		}) : null]
+	});
+}
+/** V2 features/comments fieldPopoverCollision: inside a scrolling panel, collide with that panel below its sticky header. */
+function fieldPopoverCollision(anchor) {
+	let area = anchor?.parentElement ?? null;
+	while (area && !/(auto|scroll)/.test(getComputedStyle(area).overflowY)) area = area.parentElement;
+	if (!area || area === document.scrollingElement) return { collisionPadding: 12 };
+	const sticky = parseFloat(getComputedStyle(area).getPropertyValue("--kit-sticky-top")) || 0;
+	return {
+		collisionBoundary: area,
+		collisionPadding: {
+			top: sticky + 8,
+			right: 8,
+			bottom: 8,
+			left: 8
+		}
+	};
+}
+/** Comment count chip (always visible) or the hover-revealed "Add comment" icon. `useCount` (the host's store hook)
+*  replaces `count` when the kit draws the comments in place. */
+function CommentButton({ useCount, ...props }) {
+	return useCount ? /* @__PURE__ */ jsx(StoreCommentButton, {
+		useCount,
+		...props
+	}) : /* @__PURE__ */ jsx(CountedCommentButton, { ...props });
+}
+function StoreCommentButton({ useCount, ...props }) {
+	return /* @__PURE__ */ jsx(CountedCommentButton, {
+		...props,
+		count: useCount()
+	});
+}
+function CountedCommentButton({ count, label, open, onOpen }) {
+	if (count > 0) return /* @__PURE__ */ jsx(Tooltip, {
+		content: `${count} open comment${count === 1 ? "" : "s"} on ${label}`,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: (e) => onOpen(e.currentTarget),
+			"data-state": open ? "open" : "closed",
+			"aria-label": `${count} open comments on ${label}`,
+			className: "-my-0.5 inline-flex h-5 items-center gap-0.5 rounded-kit-md px-1 text-kit-2xs font-medium text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[state=open]:bg-kit-hover data-[state=open]:text-kit-fg",
+			children: [/* @__PURE__ */ jsx(IconMessage, {
+				className: "size-3.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: count
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: "Add comment",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: (e) => onOpen(e.currentTarget),
+			"data-state": open ? "open" : "closed",
+			"aria-label": `Add comment to ${label}`,
+			className: cn(REVEAL, "-my-0.5 size-6 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg"),
+			children: /* @__PURE__ */ jsx(IconMessagePlus, {
+				className: "size-3.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			})
+		})
+	});
+}
+/** Who is in this field: 16px faces in the label row's action slot (no overlap with the label or the input), name on hover. */
+function PeerStack({ peers, size = 16 }) {
+	const shown = peers.slice(0, 3);
+	const rest = peers.length - shown.length;
+	const ring = "var(--kit-avatar-ring, var(--kit-surface))";
+	const band = avatarRingSpread({
+		ring,
+		ringWidth: 1,
+		ringAccent: "x"
+	});
+	const box = size + band * 2;
+	const overlap = -(Math.round(size * .25) + band * 2);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: shown.length ? /* @__PURE__ */ jsxs(motion.span, {
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: { duration: .25 },
+			className: "flex h-5 items-center",
+			"data-slot": "field-presence",
+			children: [shown.map((p, i) => /* @__PURE__ */ jsx(Tooltip, {
+				content: `${p.name} · ${p.status === "viewing" ? "Viewing" : "Editing"} this field`,
+				children: /* @__PURE__ */ jsx("span", {
+					style: {
+						marginLeft: i ? overlap : 0,
+						zIndex: shown.length - i + 1,
+						width: box,
+						height: box
+					},
+					className: cn("relative inline-flex shrink-0 rounded-full transition-transform duration-150 hover:!z-30 hover:-translate-y-px", p.status === "viewing" && "opacity-60"),
+					children: /* @__PURE__ */ jsx(Avatar, {
+						name: p.name,
+						src: p.avatar,
+						size,
+						ring,
+						ringWidth: 1,
+						ringAccent: p.color ?? presenceColor(p.id ?? p.name),
+						decorative: true
+					})
+				})
+			}, p.name + i)), rest > 0 ? /* @__PURE__ */ jsx(Tooltip, {
+				content: peers.slice(shown.length).map((p) => p.name).join(", "),
+				children: /* @__PURE__ */ jsx("span", {
+					style: {
+						marginLeft: overlap,
+						width: box,
+						height: box,
+						padding: band
+					},
+					className: "relative z-[1] inline-flex shrink-0",
+					children: /* @__PURE__ */ jsxs("span", {
+						style: {
+							width: size,
+							height: size,
+							boxShadow: `0 0 0 ${band}px var(--kit-surface)`,
+							fontSize: Math.max(8, Math.round(size * .5))
+						},
+						className: "inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2",
+						children: ["+", rest]
+					})
+				})
+			}) : null]
+		}, "peers") : null
+	});
+}
+function FieldMenu({ field, path, value, onChange, readOnly, changed, onAi }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const { toast, aiRewrite, richText, FieldMenuExtras } = useKitServices();
+	const key = pathKey(path);
+	const api = apiName(form?.schema.name ?? "doc", path);
+	const textual = isTextual(field.type);
+	const prose = field.type === "string" || field.type === "text" || field.type === "richtext" && !!richText;
+	const editable = !readOnly;
+	const dev = seesDevSurfaces(env);
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: "Field actions",
+		children: /* @__PURE__ */ jsx(MenuTrigger, {
+			"aria-label": `${field.title} actions`,
+			className: cn(REVEAL, "-my-0.5 size-6 items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover data-[popup-open]:text-kit-fg"),
+			children: /* @__PURE__ */ jsx(IconDots, {
+				className: "size-3.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			})
+		})
+	}), /* @__PURE__ */ jsxs(MenuContent, {
+		align: "end",
+		className: "w-60",
+		children: [
+			/* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconCopy, { stroke: 1.5 }),
+				onClick: () => {
+					const html = richTextHtml(richText, field, path, value);
+					clip = {
+						type: field.type,
+						value: structuredCloneish(value),
+						label: field.title,
+						...html !== void 0 ? { html } : {}
+					};
+					const text = textual ? plainText(value) || "" : typeof value === "string" ? value : JSON.stringify(value ?? null, null, 2);
+					navigator.clipboard?.writeText(text).catch(() => {});
+					toast?.success(`${field.title} copied`);
+				},
+				children: "Copy value"
+			}),
+			editable ? /* @__PURE__ */ jsx(PasteItem, {
+				field,
+				path,
+				value,
+				onChange
+			}) : null,
+			editable && form?.hasPublished && changed ? /* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconRotate, { stroke: 1.5 }),
+				onClick: () => {
+					const prev = value;
+					onChange(form.publishedAt(path));
+					toast?.(`${field.title} reset to published`, {
+						action: {
+							label: "Undo",
+							onClick: () => onChange(prev)
+						},
+						duration: 1e4
+					});
+				},
+				children: "Reset to published"
+			}) : null,
+			form?.canNavigate ? /* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconHistory, { stroke: 1.5 }),
+				onClick: () => form.navigate([...path, HISTORY_SEGMENT]),
+				children: "History"
+			}) : null,
+			FieldMenuExtras ? /* @__PURE__ */ jsx(FieldMenuExtras, {
+				field,
+				path,
+				readOnly
+			}) : null,
+			editable && prose && aiRewrite ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(MenuSeparator, {}),
+				form?.aiKeys.has(key) ? /* @__PURE__ */ jsx(MenuItem, {
+					icon: /* @__PURE__ */ jsx(IconArrowBackUp, { stroke: 1.5 }),
+					onClick: () => {
+						form.undo(key);
+						form.markAi(key, false);
+					},
+					children: "Undo AI change"
+				}) : null,
+				/* @__PURE__ */ jsx(MenuItem, {
+					icon: /* @__PURE__ */ jsx(Sparkle, { size: 16 }),
+					onClick: () => window.setTimeout(onAi, 0),
+					children: "Rewrite with AI"
+				})
+			] }) : null,
+			dev ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null,
+			dev ? /* @__PURE__ */ jsx(MenuItem, {
+				icon: /* @__PURE__ */ jsx(IconBraces, { stroke: 1.5 }),
+				onClick: () => {
+					navigator.clipboard?.writeText(api).catch(() => {});
+					toast?.success(`Copied ${api}`);
+				},
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex w-full items-center justify-between gap-3",
+					children: ["Copy API name", /* @__PURE__ */ jsx("span", {
+						className: "truncate font-kit-mono text-kit-2xs text-kit-fg-3",
+						children: api.length > 22 ? `…${api.slice(-20)}` : api
+					})]
+				})
+			}) : null
+		]
+	})] });
+}
+/** Reads the shared clipboard when the menu opens (it mounts with the popup), so a copy in another field is seen. */
+function PasteItem({ field, path, value, onChange }) {
+	const { toast, richText } = useKitServices();
+	const textual = isTextual(field.type);
+	const needsCodec = !!clip && field.type === "richtext" && clip.type !== "richtext" && !richText;
+	const pasteOk = clip && !needsCodec && (clip.type === field.type || textual && isTextual(clip.type));
+	const pasteReason = !clip ? "Copy a value from a field first." : needsCodec ? "This rich text field takes a copied rich text value only." : pasteOk ? null : `Clipboard holds ${kindOf(clip.type)}. This field takes ${kindOf(field.type)}.`;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		icon: /* @__PURE__ */ jsx(IconClipboard, { stroke: 1.5 }),
+		disabled: !pasteOk,
+		className: cn(pasteReason && "h-auto py-1.5"),
+		onClick: () => {
+			if (!clip) return;
+			const prev = value;
+			let next;
+			if (field.type === "richtext" && richText && (clip.type !== "richtext" || clip.html !== void 0)) {
+				const out = richTextWrite(richText, field, path, clip.html ?? paragraphs(plainText(clip.value)), prev);
+				if ("refused" in out) {
+					toast?.(`Not pasted: ${out.refused}.`);
+					return;
+				}
+				next = out.value;
+			} else next = textual && clip.type === "richtext" && field.type !== "richtext" ? plainText(clip.value) : structuredCloneish(clip.value);
+			onChange(next);
+			toast?.(`Pasted into ${field.title}`, {
+				action: {
+					label: "Undo",
+					onClick: () => onChange(prev)
+				},
+				duration: 1e4
+			});
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col",
+			children: ["Paste value", pasteReason ? /* @__PURE__ */ jsx("span", {
+				className: "whitespace-normal text-kit-xs text-kit-fg-3",
+				children: pasteReason
+			}) : null]
+		})
+	});
+}
+function structuredCloneish(v) {
+	try {
+		return structuredClone(v);
+	} catch {
+		return v;
+	}
+}
+function AiRewrite({ field, path, value, onChange, onClose }) {
+	const form = useForm();
+	const { toast, aiRewrite, richText } = useKitServices();
+	const key = pathKey(path);
+	const [preset, setPreset] = React.useState(null);
+	const [out, setOut] = React.useState(null);
+	const [failed, setFailed] = React.useState(false);
+	const attempt = React.useRef(0);
+	const latest = React.useRef(0);
+	const source = plainText(value);
+	const run = (p) => {
+		if (!aiRewrite) return;
+		setPreset(p);
+		setOut(null);
+		setFailed(false);
+		const ticket = ++latest.current;
+		Promise.resolve().then(() => aiRewrite(source, p, attempt.current++)).then((result) => {
+			if (latest.current === ticket) setOut(result);
+		}, () => {
+			if (latest.current === ticket) setFailed(true);
+		});
+	};
+	const apply = () => {
+		if (!out) return;
+		const prev = value;
+		let next = out;
+		if (field.type === "richtext") {
+			const stored = richText ? richTextWrite(richText, field, path, paragraphs(out), prev) : { refused: `${field.title} has no rich text storage here` };
+			if ("refused" in stored) {
+				toast?.(`Not applied: ${stored.refused}.`);
+				return;
+			}
+			next = stored.value;
+		}
+		onChange(next);
+		form?.markAi(key, true);
+		toast?.("Rewritten with AI", {
+			icon: /* @__PURE__ */ jsx(Sparkle, { size: 14 }),
+			action: {
+				label: "Undo",
+				onClick: () => {
+					onChange(prev);
+					form?.markAi(key, false);
+				}
+			},
+			duration: 1e4
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-b border-kit-line px-3 py-2.5",
+				children: [/* @__PURE__ */ jsx(Sparkle, { size: 16 }), /* @__PURE__ */ jsxs("span", {
+					className: "text-kit-sm font-medium text-kit-fg",
+					children: ["Rewrite ", field.title.toLowerCase()]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1 px-3 pt-2.5",
+				children: AI_PRESETS.map((p) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => run(p.id),
+					className: cn("h-6 rounded-full border px-2 text-kit-xs transition-colors", preset === p.id ? "border-[var(--kit-emphasis-line)] bg-kit-surface text-kit-fg" : "border-kit-line text-kit-fg-2 hover:border-kit-line-strong hover:text-kit-fg"),
+					children: p.label
+				}, p.id))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "px-3 py-3",
+				children: !preset ? /* @__PURE__ */ jsx("p", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "Pick a direction. You'll see the suggestion before anything changes."
+				}) : failed ? /* @__PURE__ */ jsxs("p", {
+					role: "alert",
+					className: "text-kit-xs text-kit-danger-fg",
+					children: [
+						"Couldn't rewrite ",
+						field.title.toLowerCase(),
+						". Try again."
+					]
+				}) : out == null ? /* @__PURE__ */ jsx("p", {
+					className: "text-kit-sm",
+					children: /* @__PURE__ */ jsxs(Shimmer, { children: [
+						"Rewriting ",
+						field.title.toLowerCase(),
+						"…"
+					] })
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "rounded-kit-lg bg-kit-subtle p-2.5 text-kit-sm leading-5 text-kit-fg",
+					children: /* @__PURE__ */ jsx(TypeOut, { text: out })
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 border-t border-kit-line px-3 py-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "ghost",
+					onClick: onClose,
+					children: "Discard"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-1",
+					children: [out || failed ? /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						leftIcon: /* @__PURE__ */ jsx(IconRefresh, { stroke: 1.5 }),
+						onClick: () => preset && run(preset),
+						children: "Try again"
+					}) : null, /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "primary",
+						disabled: !out,
+						onClick: apply,
+						children: "Apply"
+					})]
+				})]
+			})
+		]
+	});
+}
+function Shimmer({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "bg-[linear-gradient(90deg,var(--kit-fg-3)_0%,var(--kit-fg)_45%,var(--kit-fg-3)_90%)] bg-[length:200%_100%] bg-clip-text text-transparent [animation:kit-shimmer-text_1.6s_linear_infinite] motion-reduce:[animation:none]",
+		children
+	});
+}
+/**
+* Reduced motion as the app reads it: the OS query or the in-app preference (which stamps `data-reduce-motion` on
+* <html>; the kit cannot import the app's hook). Read per render, so a toggle applies to the next answer.
+*/
+function motionReduced() {
+	if (typeof window === "undefined") return false;
+	return document.documentElement.hasAttribute("data-reduce-motion") || !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+/** Reduced: the whole answer at once, with no caret (canvas revamp V701, lib/motion TypeOut semantics). */
+function TypeOut({ text, speed = 14 }) {
+	const reduce = motionReduced();
+	const [n, setN] = React.useState(reduce ? text.length : 0);
+	React.useEffect(() => {
+		if (reduce) {
+			setN(text.length);
+			return;
+		}
+		setN(0);
+		const id = setInterval(() => {
+			setN((x) => {
+				const next = Math.min(text.length, x + Math.max(1, Math.round(text.length / 120)));
+				if (next >= text.length) clearInterval(id);
+				return next;
+			});
+		}, speed);
+		return () => clearInterval(id);
+	}, [
+		text,
+		speed,
+		reduce
+	]);
+	return /* @__PURE__ */ jsxs("span", { children: [text.slice(0, n), n < text.length ? /* @__PURE__ */ jsx("span", {
+		"data-typeout-caret": true,
+		className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] bg-kit-fg motion-safe:animate-pulse"
+	}) : null] });
+}
+//#endregion
+export { FieldShell, LABEL_HINT_AT, PeerStack, apiName, resetFieldClipboard };
+
+//# sourceMappingURL=field-shell.js.map