@bettercms-ai/kit 1.0.0 → 2.0.0-next.1

package/dist/engine/expand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.js","names":[],"sources":["../../src/engine/expand.tsx"],"sourcesContent":["/**\n * Expanded editing (CPO D49), owned by the engine: rich text, code and tables open in the ONE shared\n * ExpandedEditorModal (ui/expanded-editor-modal.tsx). V2 did this per control (RichTextControl + RichTextExpandAction,\n * TableControl + TableFullScreenAction); the engine opens the modal around WHATEVER control the field has: the kit\n * control from CONTROLS, or the host's when a control hands a stored value off (LegacyFallback). The modal body is that same control on the same value and the same onChange, so the field underneath\n * and the expanded one stay in sync and every write keeps the exact stored shape the inline control writes.\n *\n * Ways in (V2): the ⤢ button in the field's label row (shown on hover, always on touch), and ⌘↵ / Ctrl+↵ while the\n * field's control has focus. Inside the modal ⌘↵ or Esc closes it (menus and popovers inside close first) and focus\n * returns to whatever opened it. A control lane may open or close it from its own toolbar with `openExpanded`.\n *\n * Offered only where expanding edits something: never read-only, never a type whose control behind it cannot edit\n * (code and tables expand only once a kit control is registered for them; the host draws those read-only today).\n */\nimport * as React from \"react\";\nimport type { ComponentType } from \"react\";\nimport { IconArrowsMaximize } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { resolveFrames } from \"../lib/frames\";\nimport { isObj, pathKey } from \"../lib/path\";\nimport type { FieldPath, FieldSchema, SchemaType } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\nimport { useForm, useKitEnv } from \"../context\";\nimport { Tooltip } from \"../ui/overlay\";\nimport { ExpandedEditorModal } from \"../ui/expanded-editor-modal\";\n\nexport interface ExpandSpec {\n  /** \"reading\" centres a ~720px writing column; \"wide\" uses the whole dialog (tables, code) */\n  layout: \"reading\" | \"wide\";\n  /** the header's quiet meta line for this value (\"12 lines\", \"6 rows · 4 columns\") */\n  meta?: (value: unknown) => string;\n  /** the label-row button's name and tooltip */\n  label: \"Expand editor\" | \"Edit in full screen\";\n  /** V2: the document variant already draws the full editor in its column, so writing types offer no ⤢ there */\n  panelOnly?: boolean;\n  /** expanding needs a kit control: the host's control for this type cannot edit it (read-only card) */\n  needsKitControl?: boolean;\n}\n\nconst count = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;\nfunction codeLines(v: unknown) {\n  const src = typeof v === \"string\" ? v : isObj(v) && typeof v.code === \"string\" ? v.code : \"\";\n  return count(src ? src.split(\"\\n\").length : 0, \"line\");\n}\nfunction tableSize(v: unknown) {\n  const rows = isObj(v) && Array.isArray(v.rows) ? v.rows.length : 0;\n  const cols = isObj(v) && Array.isArray(v.columns) ? v.columns.length : 0;\n  return `${count(rows, \"row\")} · ${count(cols, \"column\")}`;\n}\n\n/** Type → how it expands. Additive like CONTROLS: one entry per type. Plain long text (`text`) has none: V2's\n *  TextControl is a bare textarea that grows to its value, so an extra ⤢ would only add a tab stop V2 lacks. */\nexport const EXPANDABLE: Partial<Record<SchemaType, ExpandSpec>> = {\n  richtext: { layout: \"reading\", label: \"Expand editor\", panelOnly: true },\n  code: { layout: \"wide\", meta: codeLines, label: \"Expand editor\", needsKitControl: true },\n  table: { layout: \"wide\", meta: tableSize, label: \"Edit in full screen\", needsKitControl: true },\n};\n\n/** The spec when this field can expand here, else null. */\nexport function expandSpecFor(field: FieldSchema, opts: { readOnly: boolean; hasKitControl: boolean; variant: string }): ExpandSpec | null {\n  const spec = EXPANDABLE[field.type];\n  if (!spec || opts.readOnly) return null;\n  if (spec.needsKitControl && !opts.hasKitControl) return null;\n  if (spec.panelOnly && opts.variant === \"document\") return null;\n  return spec;\n}\n\n/* ── which field (docId:pathKey) has its expanded editor open: one at a time, shared with toolbar buttons ── */\nlet openKey: string | null = null;\nconst subs = new Set<() => void>();\nexport function openExpanded(key: string | null) {\n  if (openKey === key) return;\n  openKey = key;\n  subs.forEach((s) => s());\n}\nexport const expandKey = (docId: string, path: FieldPath) => `${docId}:${pathKey(path)}`;\nexport function useExpandedKey() {\n  return React.useSyncExternalStore(\n    (cb) => {\n      subs.add(cb);\n      return () => subs.delete(cb);\n    },\n    () => openKey,\n    () => openKey,\n  );\n}\n\n/** ⌘↵ / Ctrl+↵ (no Shift or Alt): the expand shortcut. */\nexport const isExpandShortcut = (e: React.KeyboardEvent | KeyboardEvent) => e.key === \"Enter\" && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey;\n\n/** The label-row ⤢ (V2 RichTextExpandAction / TableFullScreenButton): hidden at rest until hover, always on touch. */\nexport function ExpandAction({ field, path, spec }: { field: FieldSchema; path: FieldPath; spec: ExpandSpec }) {\n  const env = useKitEnv();\n  const wide = spec.label === \"Edit in full screen\";\n  return (\n    <Tooltip content={spec.label} shortcut=\"⌘↵\">\n      <button\n        type=\"button\"\n        aria-label={wide ? `Edit ${field.title} in full screen` : `Expand ${field.title}`}\n        aria-haspopup=\"dialog\"\n        data-kit-expand=\"\"\n        onClick={() => openExpanded(expandKey(env.docId, path))}\n        className={cn(\n          \"-my-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-kit-md text-kit-fg-3 outline-none hover:bg-kit-hover hover:text-kit-fg\",\n          \"focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-kit-focus-ring focus-visible:[outline-style:solid]\",\n          // V2: quiet at rest (hover / touch shows it). Keyboard focus keeps it visible, so Tab never lands on nothing.\n          \"opacity-0 group-hover/field:opacity-100 focus-visible:opacity-100 [@media(pointer:coarse)]:opacity-100\",\n        )}\n      >\n        <IconArrowsMaximize aria-hidden className=\"size-3.5\" stroke={1.5} />\n      </button>\n    </Tooltip>\n  );\n}\n\n/** The modal's breadcrumb: the document, the frames down to this field's parent, then the field. */\nfunction useCrumbs(field: FieldSchema, path: FieldPath): string[] {\n  const form = useForm();\n  const env = useKitEnv();\n  if (!form) return [env.docTitle, field.title].filter(Boolean) as string[];\n  const { frames } = resolveFrames(form.schema, form.value, path.slice(0, -1), form.resolveSchema);\n  const titles = frames.filter((f) => f.kind !== \"history\").map((f, i) => (i === 0 ? env.docTitle || f.title : f.title));\n  return [...titles, field.title].filter(Boolean);\n}\n\n/**\n * The field's expanded editor: the same control, value and onChange in the modal. Mounted only while open, so the\n * inline control and this one never fight over the same DOM id (the modal one gets `${id}-expanded`).\n */\nexport function ExpandedField({\n  field,\n  path,\n  spec,\n  Control,\n  value,\n  onChange,\n  onBlur,\n  invalid,\n  id,\n  parent,\n}: {\n  field: FieldSchema;\n  path: FieldPath;\n  spec: ExpandSpec;\n  Control: ComponentType<ControlProps>;\n  value: unknown;\n  onChange: (v: unknown) => void;\n  onBlur?: () => void;\n  invalid?: boolean;\n  id: string;\n  parent?: Record<string, unknown>;\n}) {\n  const env = useKitEnv();\n  const key = expandKey(env.docId, path);\n  const open = useExpandedKey() === key;\n  const crumbs = useCrumbs(field, path);\n  // close when this field goes away (block deselected, drilled elsewhere, schema changed)\n  React.useEffect(\n    () => () => {\n      if (openKey === key) openExpanded(null);\n    },\n    [key],\n  );\n  return (\n    <ExpandedEditorModal\n      open={open}\n      onOpenChange={(o) => openExpanded(o ? key : null)}\n      crumbs={crumbs}\n      meta={spec.meta?.(value)}\n      layout={spec.layout}\n      returnFocus={() =>\n        document.querySelector<HTMLElement>(`[data-field-key=\"${CSS.escape(pathKey(path))}\"] [data-kit-expand]`) ??\n        document.getElementById(id)\n      }\n    >\n      {open ? (\n        <div\n          data-kit-expanded={field.type}\n          className={cn(\"min-w-0\", spec.layout === \"wide\" && \"flex min-h-0 flex-1 flex-col\")}\n          onBlur={onBlur}\n          onKeyDown={(e) => {\n            if (!isExpandShortcut(e)) return;\n            e.preventDefault();\n            openExpanded(null);\n          }}\n        >\n          <Control field={field} value={value} onChange={onChange} id={`${id}-expanded`} invalid={invalid} path={path} parent={parent} onBlur={onBlur} />\n        </div>\n      ) : null}\n    </ExpandedEditorModal>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { FieldList as FieldList$1 } from "./grouping.js";
 import { KitField } from "./kit-field.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/kit/engine/field-list.tsx
+//#region src/engine/field-list.tsx
 var renderKitField = (field, path, parent) => /* @__PURE__ */ jsx(KitField, {
 	field,
 	path,

package/dist/engine/field-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-list.js","names":[],"sources":["../../src/engine/field-list.tsx"],"sourcesContent":["/**\n * FieldList — lays out one frame's fields (CPO D45 grouping; V2 HEAD 9829bf1 kit/engine/field-list.tsx): group TABS\n * (with error dots) at the top of the frame only, FIELDSETS as <FieldSection>, breakpoint objects as ONE\n * <BreakpointGroup>, an auto \"Advanced\" section, and `hidden` conditions that appear / disappear with a height animation.\n *\n * The layout itself lives in grouping.tsx (`FieldList` there takes `renderField`, so grouping never imports KitField).\n * This module is V2's FieldList as the rest of the engine uses it: the same props, each field drawn by KitField — which\n * is where an object too big to inset becomes its drill row (NavRow), an array its rows, a slot its blocks.\n * Frames (frame.tsx `FrameSlots.FieldList`), expanded array rows and popovers render this.\n */\nimport type { FieldGroup, FieldPath, FieldSchema, Fieldset } from \"../schema/types\";\nimport { FieldList as GroupedFieldList, type RenderField } from \"./grouping\";\nimport { KitField } from \"./kit-field\";\n\nexport interface FieldListProps {\n  fields: FieldSchema[];\n  fieldsets?: Fieldset[];\n  groups?: FieldGroup[];\n  basePath: FieldPath;\n  /** where to remember the selected tab / open fieldsets */\n  memoryKey: string;\n}\n\nconst renderKitField: RenderField = (field, path, parent) => <KitField field={field} path={path} parent={parent} />;\n\nexport function FieldList(props: FieldListProps) {\n  return <GroupedFieldList {...props} renderField={renderKitField} />;\n}\n"],"mappings":";;;;AAuBA,IAAM,kBAA+B,OAAO,MAAM,WAAW,oBAAC,UAAD;CAAiB;CAAa;CAAc;AAAS,CAAA;AAElH,SAAgB,UAAU,OAAuB;CAC/C,OAAO,oBAAC,aAAD;EAAkB,GAAI;EAAO,aAAa;CAAiB,CAAA;AACpE"}

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 };