@bettercms-ai/kit 1.0.0 → 2.0.0

package/{engine → dist/engine}/field-shell.js

@@ -1,22 +1,21 @@
 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 { AI_PRESETS, FieldHeaderSlot, seesDevSurfaces, useForm, useKitEnv, useKitServices } from "../context.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 { HelpMore } from "../ui/input.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 { IconAlertCircle, IconAlertTriangle, IconArrowBackUp, IconBraces, IconClipboard, IconCopy, IconDots, IconHistory, IconMessage, IconMessagePlus, IconRefresh, IconRotate, IconWorld } from "@tabler/icons-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/kit/engine/field-shell.tsx
+//#region src/engine/field-shell.tsx
 /**
 * FIELD SHELL — the one field chrome (V2 HEAD 9829bf1 kit/engine/field-shell.tsx; production FieldShell + CPO D8).
 *
@@ -99,13 +98,19 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 	const peers = env.presence[key] ?? [];
 	const editor = peers.find((p) => p.status !== "viewing");
 	const InPlaceComments = services.FieldComments;
-	const canComment = !noComments && (!!env.onComment || !!InPlaceComments);
+	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 canUndo = !!form?.canUndo(key) && !readOnly;
+	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);
@@ -120,11 +125,24 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 		]
 	}) : null;
 	const dense = env.helpDisplay === "tooltip";
-	const help = resolveHelp(field);
+	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 && !erroring;
-	const tip = dense ? [help, more].filter(Boolean).join(" ") : more;
+	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`;
@@ -140,10 +158,25 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 		if (next) el.setAttribute("aria-describedby", next);
 		else el.removeAttribute("aria-describedby");
 	}, [id, describedBy]);
-	const info = tip ? /* @__PURE__ */ jsx(HelpMore, {
-		id: moreId,
-		label: field.title,
-		children: tip
+	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",
@@ -158,14 +191,14 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 	})] }) : null] });
 	const badges = /* @__PURE__ */ jsxs(Fragment, { children: [
 		overridden ? /* @__PURE__ */ jsx(Tooltip, {
-			content: `Overrides ${inh.from}. Changes to the component no longer reach this field.`,
+			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 ? /* @__PURE__ */ jsx(Tooltip, {
+		changed && !reviewing ? /* @__PURE__ */ jsx(Tooltip, {
 			content: "Changed since publish",
 			children: /* @__PURE__ */ jsx("span", {
 				role: "img",
@@ -185,7 +218,7 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 			})
 		}) : null,
 		field.localized ? /* @__PURE__ */ jsx(Tooltip, {
-			content: "Translatable · English (default). Spanish and French are missing.",
+			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, {
@@ -238,7 +271,7 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 			}
 		}) : null,
 		/* @__PURE__ */ jsx(PeerStack, { peers }),
-		/* @__PURE__ */ jsx(FieldMenu, {
+		bare ? null : /* @__PURE__ */ jsx(FieldMenu, {
 			field,
 			path,
 			value,
@@ -277,7 +310,15 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 					className: "mt-px size-3.5 shrink-0",
 					stroke: 1.5,
 					"aria-hidden": true
-				}), issue.message]
+				}), /* @__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",
@@ -291,6 +332,162 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 		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,
@@ -304,102 +501,7 @@ function FieldShell({ field, path, id, value, onChange, readOnly, issue, action,
 				},
 				children: [/* @__PURE__ */ jsx(PopoverAnchor, {
 					className: "min-w-0",
-					children: layout === "row" ? /* @__PURE__ */ jsxs("div", {
-						className: cn("group/field 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: [/* @__PURE__ */ jsx(RowChrome.Provider, {
-							value: /* @__PURE__ */ jsxs(Fragment, { children: [
-								info,
-								badges,
-								accessories
-							] }),
-							children: control
-						}), message]
-					}) : layout === "card" ? /* @__PURE__ */ jsxs("div", {
-						className: cn("group/field flex flex-col gap-1.5", className),
-						"data-field-key": key,
-						"data-field": path.length === 1 ? key : void 0,
-						"data-slot": "kit-field",
-						children: [/* @__PURE__ */ jsxs("div", {
-							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: help
-									}) : 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 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: [
-							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",
-								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: help
-							}) : null,
-							control,
-							message
-						]
-					})
+					children: body
 				}), commentsOpen && InPlaceComments ? /* @__PURE__ */ jsx(PopoverContent, {
 					align: "start",
 					sideOffset: 8,
@@ -471,10 +573,10 @@ function CountedCommentButton({ count, label, open, onOpen }) {
 			onClick: (e) => onOpen(e.currentTarget),
 			"data-state": open ? "open" : "closed",
 			"aria-label": `${count} open comments on ${label}`,
-			className: "inline-flex h-5 items-center gap-1 rounded-full bg-[var(--kit-chip-ink-bg)] px-1.5 text-kit-2xs font-medium text-[var(--kit-chip-ink-fg)] hover:opacity-90",
+			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",
-				stroke: 2,
+				className: "size-3.5",
+				stroke: 1.5,
 				"aria-hidden": true
 			}), /* @__PURE__ */ jsx("span", {
 				className: "tabular-nums",
@@ -567,7 +669,7 @@ function PeerStack({ peers, size = 16 }) {
 function FieldMenu({ field, path, value, onChange, readOnly, changed, onAi }) {
 	const form = useForm();
 	const env = useKitEnv();
-	const { toast, aiRewrite, richText } = useKitServices();
+	const { toast, aiRewrite, richText, FieldMenuExtras } = useKitServices();
 	const key = pathKey(path);
 	const api = apiName(form?.schema.name ?? "doc", path);
 	const textual = isTextual(field.type);
@@ -631,6 +733,11 @@ function FieldMenu({ field, path, value, onChange, readOnly, changed, onAi }) {
 				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, {
@@ -839,9 +946,23 @@ function Shimmer({ children }) {
 		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 [n, setN] = React.useState(0);
+	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) => {
@@ -851,8 +972,15 @@ function TypeOut({ text, speed = 14 }) {
 			});
 		}, speed);
 		return () => clearInterval(id);
-	}, [text, speed]);
-	return /* @__PURE__ */ jsxs("span", { children: [text.slice(0, n), n < text.length ? /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-[1em] w-[2px] translate-y-[2px] animate-pulse bg-kit-fg" }) : null] });
+	}, [
+		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 };