@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/engine/frame.js.map

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

package/dist/engine/group-summary.d.ts

@@ -0,0 +1,5 @@
+import type { FieldSchema } from "../schema/types";
+/** "Top 56 · Bottom 88 · Sides M". Short values (numbers, scales, 1–4 letter options, on-switches) get their field's
+ *  name in front so they mean something; text speaks for itself. Media, references and code are skipped, unless
+ *  nothing else is set: a group of set icons then reads as their names, never as "Nothing set yet". */
+export declare function groupSummary(fields: FieldSchema[], value: unknown, max?: number): string;

package/dist/engine/group-summary.js

@@ -0,0 +1,70 @@
+import { isObj } from "../lib/path.js";
+import { isEmptyValue, isHidden, plainText } from "../lib/schema.js";
+import { resolveScale } from "../schema/scale.js";
+//#region src/engine/group-summary.ts
+/**
+* groupSummary (V2 HEAD 9829bf1 kit/engine/grouping.tsx): what a collapsed group holds, in one line. Lives on its own
+* until the grouping lane ports grouping.tsx, which then re-exports it from there.
+*/
+/** "Top 56 · Bottom 88 · Sides M". Short values (numbers, scales, 1–4 letter options, on-switches) get their field's
+*  name in front so they mean something; text speaks for itself. Media, references and code are skipped, unless
+*  nothing else is set: a group of set icons then reads as their names, never as "Nothing set yet". */
+function groupSummary(fields, value, max = 3) {
+	if (!isObj(value)) return "";
+	const parts = [];
+	const media = [];
+	for (const f of fields) {
+		if (parts.length >= max) break;
+		if (isHidden(f, value)) continue;
+		const x = value[f.name];
+		if (isEmptyValue(x)) continue;
+		switch (f.type) {
+			case "image":
+			case "file":
+			case "video":
+				media.push(f.title);
+				continue;
+			case "reference":
+			case "json":
+			case "code":
+			case "object":
+			case "slot":
+			case "geopoint": continue;
+			case "boolean":
+				if (x === true) parts.push(f.title);
+				continue;
+			case "number": {
+				const label = f.scale ? resolveScale(f.scale, x).label : `${x}${f.numeric?.unit ? ` ${f.numeric.unit}` : ""}`;
+				parts.push(`${f.title} ${label}`);
+				continue;
+			}
+			case "rating":
+				parts.push(`${f.title} ${x} / 5`);
+				continue;
+			case "select": {
+				const label = f.options?.find((o) => o.value === x)?.label ?? String(x);
+				parts.push(label.length <= 4 ? `${f.title} ${label}` : label);
+				continue;
+			}
+			case "multiselect":
+			case "tags":
+				if (Array.isArray(x)) parts.push(x.length <= 2 ? x.map((v) => f.options?.find((o) => o.value === v)?.label ?? String(v)).join(", ") : `${x.length} ${f.title.toLowerCase()}`);
+				continue;
+			case "array":
+				if (Array.isArray(x)) parts.push(`${x.length} ${f.title.toLowerCase()}`);
+				continue;
+			case "color":
+				parts.push(`${f.title} ${String(x)}`);
+				continue;
+			default: {
+				const t = plainText(x);
+				if (t) parts.push(t.length > 32 ? `${t.slice(0, 30)}…` : t);
+			}
+		}
+	}
+	return (parts.length ? parts : media.slice(0, max)).join(" · ");
+}
+//#endregion
+export { groupSummary };
+
+//# sourceMappingURL=group-summary.js.map

package/dist/engine/group-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-summary.js","names":[],"sources":["../../src/engine/group-summary.ts"],"sourcesContent":["/**\n * groupSummary (V2 HEAD 9829bf1 kit/engine/grouping.tsx): what a collapsed group holds, in one line. Lives on its own\n * until the grouping lane ports grouping.tsx, which then re-exports it from there.\n */\nimport { isHidden, isEmptyValue, plainText } from \"../lib/schema\";\nimport { isObj } from \"../lib/path\";\nimport { resolveScale } from \"../schema/scale\";\nimport type { FieldSchema } from \"../schema/types\";\n\n/** \"Top 56 · Bottom 88 · Sides M\". Short values (numbers, scales, 1–4 letter options, on-switches) get their field's\n *  name in front so they mean something; text speaks for itself. Media, references and code are skipped, unless\n *  nothing else is set: a group of set icons then reads as their names, never as \"Nothing set yet\". */\nexport function groupSummary(fields: FieldSchema[], value: unknown, max = 3): string {\n  if (!isObj(value)) return \"\";\n  const parts: string[] = [];\n  const media: string[] = [];\n  for (const f of fields) {\n    if (parts.length >= max) break;\n    if (isHidden(f, value)) continue;\n    const x = value[f.name];\n    if (isEmptyValue(x)) continue;\n    switch (f.type) {\n      case \"image\": case \"file\": case \"video\":\n        media.push(f.title);\n        continue;\n      case \"reference\": case \"json\": case \"code\": case \"object\": case \"slot\": case \"geopoint\":\n        continue;\n      case \"boolean\":\n        if (x === true) parts.push(f.title);\n        continue;\n      case \"number\": {\n        const label = f.scale ? resolveScale(f.scale, x).label : `${x}${f.numeric?.unit ? ` ${f.numeric.unit}` : \"\"}`;\n        parts.push(`${f.title} ${label}`);\n        continue;\n      }\n      case \"rating\":\n        parts.push(`${f.title} ${x} / 5`);\n        continue;\n      case \"select\": {\n        const label = f.options?.find((o) => o.value === x)?.label ?? String(x);\n        parts.push(label.length <= 4 ? `${f.title} ${label}` : label);\n        continue;\n      }\n      case \"multiselect\": case \"tags\":\n        if (Array.isArray(x)) parts.push(x.length <= 2 ? x.map((v) => f.options?.find((o) => o.value === v)?.label ?? String(v)).join(\", \") : `${x.length} ${f.title.toLowerCase()}`);\n        continue;\n      case \"array\":\n        if (Array.isArray(x)) parts.push(`${x.length} ${f.title.toLowerCase()}`);\n        continue;\n      case \"color\":\n        parts.push(`${f.title} ${String(x)}`);\n        continue;\n      default: {\n        const t = plainText(x);\n        if (t) parts.push(t.length > 32 ? `${t.slice(0, 30)}…` : t);\n      }\n    }\n  }\n  return (parts.length ? parts : media.slice(0, max)).join(\" · \");\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,QAAuB,OAAgB,MAAM,GAAW;CACnF,IAAI,CAAC,MAAM,KAAK,GAAG,OAAO;CAC1B,MAAM,QAAkB,CAAC;CACzB,MAAM,QAAkB,CAAC;CACzB,KAAK,MAAM,KAAK,QAAQ;EACtB,IAAI,MAAM,UAAU,KAAK;EACzB,IAAI,SAAS,GAAG,KAAK,GAAG;EACxB,MAAM,IAAI,MAAM,EAAE;EAClB,IAAI,aAAa,CAAC,GAAG;EACrB,QAAQ,EAAE,MAAV;GACE,KAAK;GAAS,KAAK;GAAQ,KAAK;IAC9B,MAAM,KAAK,EAAE,KAAK;IAClB;GACF,KAAK;GAAa,KAAK;GAAQ,KAAK;GAAQ,KAAK;GAAU,KAAK;GAAQ,KAAK,YAC3E;GACF,KAAK;IACH,IAAI,MAAM,MAAM,MAAM,KAAK,EAAE,KAAK;IAClC;GACF,KAAK,UAAU;IACb,MAAM,QAAQ,EAAE,QAAQ,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,EAAE,SAAS,OAAO,IAAI,EAAE,QAAQ,SAAS;IACzG,MAAM,KAAK,GAAG,EAAE,MAAM,GAAG,OAAO;IAChC;GACF;GACA,KAAK;IACH,MAAM,KAAK,GAAG,EAAE,MAAM,GAAG,EAAE,KAAK;IAChC;GACF,KAAK,UAAU;IACb,MAAM,QAAQ,EAAE,SAAS,MAAM,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,SAAS,OAAO,CAAC;IACtE,MAAM,KAAK,MAAM,UAAU,IAAI,GAAG,EAAE,MAAM,GAAG,UAAU,KAAK;IAC5D;GACF;GACA,KAAK;GAAe,KAAK;IACvB,IAAI,MAAM,QAAQ,CAAC,GAAG,MAAM,KAAK,EAAE,UAAU,IAAI,EAAE,KAAK,MAAM,EAAE,SAAS,MAAM,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,GAAG,EAAE,OAAO,GAAG,EAAE,MAAM,YAAY,GAAG;IAC5K;GACF,KAAK;IACH,IAAI,MAAM,QAAQ,CAAC,GAAG,MAAM,KAAK,GAAG,EAAE,OAAO,GAAG,EAAE,MAAM,YAAY,GAAG;IACvE;GACF,KAAK;IACH,MAAM,KAAK,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpC;GACF,SAAS;IACP,MAAM,IAAI,UAAU,CAAC;IACrB,IAAI,GAAG,MAAM,KAAK,EAAE,SAAS,KAAK,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,CAAC;GAC5D;EACF;CACF;CACA,QAAQ,MAAM,SAAS,QAAQ,MAAM,MAAM,GAAG,GAAG,EAAA,CAAG,KAAK,KAAK;AAChE"}

package/dist/engine/grouping.d.ts

@@ -0,0 +1,238 @@
+/**
+ * GROUPING (CPO D45; V2 HEAD 9829bf1 kit/engine/grouping.tsx + the layout half of kit/engine/field-list.tsx) — the four
+ * ways the Block Kit puts fields together, and the rules for nesting them.
+ *
+ *   Group tabs        Content · Media · Design · Settings          top of a frame only (FieldList)
+ *   <FieldSection>    ──────────────────────────────────          a titled set of siblings: hairline above, 36px header,
+ *                     Spacing          Top 56 · Bottom 88  ›      no box, no left rule; collapsed = one-line summary
+ *   <FieldInset>      Rating line                                  a small object (≤3 simple fields): its label, then the
+ *                     │ Stars [ 4.9  / 5 ]                         children behind ONE 1px --line inset line (D63). No tint,
+ *                     │ Text  [ 4.9 from 2,400+ reviews ]          no box, no radius: never a box inside a line.
+ *   <FieldUnit>       ┌ Shop cookware           Primary › ┐       ONE compound control (button = label + link, image + alt)
+ *                     └ /products                          ┘
+ *   Drill row         [▣] Desktop ›                               anything bigger, or anything one level deeper
+ *
+ * Nesting: section (level 1, spacing only) → inset (level 2, the inset line) → level 3+ always drills. Never two
+ * containers in one level. Rhythm: field gap 16 · group gap 24, the same gap inside an inset; dense (form width ≤ 360px)
+ * 12 · 20; document 20 · 32.
+ * Columns (D63, `columnSpans`): side by side only for genuinely short fields (number, switch, select, date, colour, icon,
+ * rating, text with max ≤ 24) AND only when the form is at least 420px wide (a container query). Everything else is full
+ * width, so a text value never wraps in a cramped column.
+ * `<BreakpointGroup>`: per-screen-size objects (desktop / tablet / phone) as ONE group with a segmented switcher.
+ *
+ * Port notes (kit vs V2): V2 token utilities carry the kit- prefix (text-fg-3 → text-kit-fg-3, bg-well →
+ * bg-kit-well, border-field → border-kit-field-border); `motion/react` is `framer-motion`; V2's `scrollbar-none` and
+ * `tabular` utilities are written out. V2's FieldList imports KitField directly; here it takes `renderField` so the
+ * engine has no grouping ↔ kit-field import cycle.
+ */
+import * as React from "react";
+import type { FieldGroup, FieldPath, FieldSchema, Fieldset } from "../schema/types";
+import { type KitPeer } from "../context";
+import { groupSummary } from "./group-summary";
+export { columnSpans, isColumnField, SHORT_TEXT_MAX } from "../lib/columns";
+export { groupSummary };
+/** Gaps per host. `stack` = between sibling fields; `group` = before a section / after one; `gridY` = rows of a column grid.
+ *  An inset uses the same field gap as everything else (D63: one rhythm). */
+export declare const RHYTHM: {
+    readonly panel: {
+        readonly tabs: "pb-4 @max-[360px]:pb-3";
+        readonly stack: "gap-4 @max-[360px]:gap-3";
+        readonly field: "pt-4 @max-[360px]:pt-3";
+        readonly group: "pt-6 @max-[360px]:pt-5";
+        readonly gridY: "gap-y-4 @max-[360px]:gap-y-3";
+    };
+    readonly document: {
+        readonly tabs: "pb-5";
+        readonly stack: "gap-5";
+        readonly field: "pt-5";
+        readonly group: "pt-8";
+        readonly gridY: "gap-y-5";
+    };
+};
+export declare const useRhythm: () => {
+    readonly tabs: "pb-4 @max-[360px]:pb-3";
+    readonly stack: "gap-4 @max-[360px]:gap-3";
+    readonly field: "pt-4 @max-[360px]:pt-3";
+    readonly group: "pt-6 @max-[360px]:pt-5";
+    readonly gridY: "gap-y-4 @max-[360px]:gap-y-3";
+} | {
+    readonly tabs: "pb-5";
+    readonly stack: "gap-5";
+    readonly field: "pt-5";
+    readonly group: "pt-8";
+    readonly gridY: "gap-y-5";
+};
+/** 0 at a frame's top level and inside sections; 1 inside an inset (or an expanded array row). */
+export declare const useInsetDepth: () => number;
+/** Mark children as sitting inside one container (array inline rows use this so objects inside them drill). */
+export declare function InsetScope({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useGroupStatus(paths: FieldPath[]): {
+    errors: number;
+    warnings: number;
+    peers: KitPeer[];
+    comments: number;
+};
+export type GroupStatus = ReturnType<typeof useGroupStatus>;
+/** A field that animates its height in and out when a condition shows or hides it (D45). `space` = its top spacing. */
+export declare const Appear: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    space?: string;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Sibling fields that appear / disappear smoothly. `gapless`: the parent draws the gaps (grid, inset). */
+export declare function AnimatedFields({ fields, render, gapless, space }: {
+    fields: FieldSchema[];
+    render: (f: FieldSchema) => React.ReactNode;
+    gapless?: boolean;
+    space?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Sibling fields, laid out by the D63 rule: a plain animated stack, or (when `columns` and at least one pair of short
+ * neighbours) a grid that turns two-up only when the form is ≥ 420px wide. Used by sections, insets and array rows.
+ */
+export declare function FieldRun({ fields, render, columns, values }: {
+    fields: FieldSchema[];
+    render: (f: FieldSchema) => React.ReactNode;
+    columns?: boolean;
+    values?: Record<string, unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A header with eight social icons would otherwise stack eight rows between its texts. A lone icon is just its row:
+ * no heading for one. `isIconImage` is the same rule the image control draws the row by.
+ */
+export declare function splitIcons(fields: FieldSchema[], values: Record<string, unknown>): {
+    before: FieldSchema[];
+    icons: FieldSchema[];
+    after: FieldSchema[];
+} | null;
+export declare function IconGroup({ fields, render }: {
+    fields: FieldSchema[];
+    render: (f: FieldSchema) => React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface FieldSectionProps {
+    title: string;
+    description?: string;
+    /** collapsible header (default true). false = a static heading. */
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    /** controlled */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** one-line summary shown while collapsed ("Top 56 · Bottom 88"); a string list renders as neutral chips */
+    summary?: React.ReactNode;
+    /** roll-up shown on the header while collapsed */
+    status?: Partial<GroupStatus>;
+    /** hairline above (off for the first item of a frame) */
+    divider?: boolean;
+    /** open the section when this turns true (e.g. a publish attempt found errors inside) */
+    revealWhen?: boolean;
+    disabled?: boolean;
+    /** extra header control, outside the toggle (rare) */
+    actions?: React.ReactNode;
+    /** content above the fields, inside the body (e.g. a breakpoint switcher) */
+    lead?: React.ReactNode;
+    columns?: 1 | 2;
+    /** leading glyph before the title (dense panels: the Design tab's section icons) */
+    icon?: React.ReactNode;
+    /** small mark right after the title, inside the toggle (e.g. a "changed" dot) */
+    adornment?: React.ReactNode;
+    className?: string;
+    /** override the body's gap (dense rows) */
+    bodyClassName?: string;
+    children: React.ReactNode;
+}
+export declare function FieldSection({ title, description, collapsible, defaultOpen, open: openProp, onOpenChange, summary, status, divider, revealWhen, disabled, actions, lead, columns, icon, adornment, className, bodyClassName, children, }: FieldSectionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * D63: the ONE way to show "these fields belong together" inside a form. The object's label sits above (the field shell);
+ * the children sit behind a single 1px --line inset line, `ml-1.5 pl-3`. No tint, no ring, no radius, no padding box.
+ * Children keep the form's own field gap. Short neighbours pair up on wide forms through `FieldRun`.
+ */
+export declare function FieldInset({ children, labelledBy, label, className, }: {
+    children: React.ReactNode;
+    labelledBy?: string;
+    label?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The inset line every nested group uses (inline objects, expanded array rows). */
+export declare const INSET_LINE = "ml-1.5 min-w-0 border-l border-kit-line pl-3";
+/**
+ * Reads as ONE input: the field border, radius 6, the input focus treatment on the whole unit; rows inside are split by a
+ * hairline and have no borders of their own. Use for values that only make sense together (founder rule: a button's
+ * label and link are one unit).
+ */
+export declare const FieldUnit: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    invalid?: boolean;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** One row of a unit: 36px, 8px side padding, no border (the unit draws the hairline between rows). */
+export declare function FieldUnitRow({ className, children, ...rest }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const isBreakpointName: (n: string) => boolean;
+export type RenderField = (field: FieldSchema, path: FieldPath, parent: Record<string, unknown>) => React.ReactNode;
+/**
+ * Per-screen-size settings as ONE group: the section header, then a segmented switcher (Desktop · Tablet · Phone) with a
+ * dot on every size that has its own values; only the chosen size's fields show. Replaces three stacked groups.
+ */
+export declare function BreakpointGroup({ set, members, basePath, memoryKey, divider, renderField, }: {
+    set: Fieldset;
+    members: FieldSchema[];
+    basePath: FieldPath;
+    memoryKey: string;
+    divider?: boolean;
+    renderField: RenderField;
+}): import("react/jsx-runtime").JSX.Element;
+type ArrangedItem = {
+    kind: "field";
+    field: FieldSchema;
+} | {
+    kind: "set";
+    set: Fieldset;
+    fields: FieldSchema[];
+};
+/** Fields in schema order, with each fieldset (and the auto "Advanced" / "Screen sizes" sets) placed at its first member. */
+export declare function arrangeFields(fields: FieldSchema[], fieldsets?: Fieldset[]): ArrangedItem[];
+/** The group a field without `group` belongs to: the one marked `default`, else the first. */
+export declare const defaultGroup: (groups?: FieldGroup[]) => FieldGroup | undefined;
+/**
+ * FieldList — lays out one frame's fields (CPO D45 grouping): group TABS (with error dots) at the top of the frame only,
+ * FIELDSETS as <FieldSection> (hairline + 36px header, no box, collapsed = one-line summary), breakpoint objects as ONE
+ * <BreakpointGroup> with a switcher, an auto "Advanced" section for `advanced` fields, and `hidden` conditions that
+ * appear / disappear with a height animation.
+ * Rhythm: label→control 6 · fields 16 · groups 24 (dense ≤360px: 12 · 20; document: 20 · 32).
+ */
+export declare function FieldList({ fields, fieldsets, groups, basePath, memoryKey, renderField, }: {
+    fields: FieldSchema[];
+    fieldsets?: Fieldset[];
+    groups?: FieldGroup[];
+    basePath: FieldPath;
+    /** where to remember the selected tab / open fieldsets */
+    memoryKey: string;
+    /** draws one field (the engine passes KitField) */
+    renderField: RenderField;
+}): import("react/jsx-runtime").JSX.Element;
+export interface GroupTabItem {
+    value: string;
+    label: string;
+    icon?: string;
+    errors: number;
+}
+/** Tabs that don't fit the width fold into a "More" menu, never clipped (V2 HEAD c896beb field-list.tsx GroupTabs). The
+ *  active tab always shows its label: when it sits in the fold it takes the last visible slot. */
+export declare function GroupTabs({ id, value, onChange, items }: {
+    id: string;
+    value: string;
+    onChange: (v: string) => void;
+    items: GroupTabItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FieldsetSection({ set, fields, basePath, obj, memoryKey, divider, renderField, }: {
+    set: Fieldset;
+    fields: FieldSchema[];
+    basePath: FieldPath;
+    obj: Record<string, unknown>;
+    memoryKey: string;
+    divider: boolean;
+    renderField: RenderField;
+}): import("react/jsx-runtime").JSX.Element;
+/** D41: a short field shares a 2-column row; a scale, slider, cards or radio select needs the full row. */
+export declare const isShort: (f: FieldSchema) => boolean;