@bettercms-ai/kit 0.1.0 → 1.0.0

package/engine/slot.js

@@ -0,0 +1,226 @@
+import { cn } from "../lib/cn.js";
+import { ensureKeys, isObj, itemId, pathKey } from "../lib/path.js";
+import { KitIcon } from "../lib/icons.js";
+import { useForm } from "../context.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay.js";
+import { newBlock, previewOf, slotAllow, summarize } from "../lib/schema.js";
+import { FieldShell } from "./field-shell.js";
+import { RowList, useDrill, useListOps } from "./array.js";
+import { useFieldAccess } from "./kit-field.js";
+import * as React from "react";
+import { IconPlus, IconSearch } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/engine/slot.tsx
+/**
+* SLOTS — blocks inside blocks (tabs, columns, bento, carousels, mega-menu panels; V2 HEAD 9829bf1 kit/engine/slot.tsx).
+* Rows show the block icon, its name and a variant chip; "+ Add block" opens a compact, searchable block picker;
+* opening a row drills into THAT block's own schema (resolved with `resolveSchema(blockType)`).
+*
+* Drill rows call the RowsHostContext frame push (see array.tsx); with nothing to draw the frame they are inert.
+*/
+function SlotField({ field, path }) {
+	const form = useForm();
+	const drill = useDrill();
+	const id = React.useId();
+	const { readOnly } = useFieldAccess(field);
+	const key = pathKey(path);
+	const value = form.getAt(path);
+	const list = Array.isArray(value) ? value : [];
+	const write = (next) => form.setAt(path, ensureKeys(next));
+	const ops = useListOps(field, path, list, write, (i) => drill?.([...path, i]));
+	const available = useAvailableBlocks(field);
+	const rows = list.map((it, i) => {
+		const type = isObj(it) && typeof it._type === "string" ? it._type : "";
+		const block = form.resolveSchema?.(type);
+		const pv = previewOf(block, it, i, block?.title ?? "Block");
+		const variant = block?.variants?.find((v) => isObj(it) && v.id === it._variant)?.name;
+		const settings = field.slotSettings && isObj(it) ? summarize(field.slotSettings, it._settings, 2) : "";
+		return {
+			id: itemId(it, i),
+			index: i,
+			item: it,
+			path: [...path, i],
+			preview: {
+				...pv,
+				title: pv.empty ? block?.title ?? "Unknown block" : pv.title,
+				icon: block?.icon ?? "box"
+			},
+			chip: variant,
+			extra: [pv.empty ? void 0 : block?.title, settings].filter(Boolean).join(" · ") || block?.description || `Block ${i + 1} of ${list.length}`
+		};
+	});
+	return /* @__PURE__ */ jsx(FieldShell, {
+		field,
+		path,
+		id,
+		value: list,
+		onChange: (v) => form.setAt(path, v),
+		readOnly,
+		issue: form.visibleIssue(key),
+		meta: /* @__PURE__ */ jsxs("span", {
+			className: "text-kit-xs text-kit-fg-3",
+			children: [
+				list.length,
+				" ",
+				list.length === 1 ? "block" : "blocks",
+				field.validation?.max != null ? ` · max ${field.validation.max}` : ""
+			]
+		}),
+		children: /* @__PURE__ */ jsx(RowList, {
+			field,
+			rows,
+			readOnly,
+			layout: "list",
+			mode: "drill",
+			openId: null,
+			onOpen: drill && ((r) => drill(r.path)),
+			onCloseInline: () => {},
+			ops,
+			renderInline: () => null,
+			leading: (r) => /* @__PURE__ */ jsx("span", {
+				className: "flex size-7 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg-2 shadow-kit-xs",
+				children: /* @__PURE__ */ jsx(KitIcon, {
+					name: r.preview.icon,
+					className: "size-4"
+				})
+			}),
+			emptyLabel: "No blocks yet. Add one to start composing.",
+			addButton: /* @__PURE__ */ jsx(BlockPicker, {
+				blocks: available,
+				disabled: readOnly || ops.atMax,
+				onPick: (b) => ops.add(newBlock(b, field.slotSettings))
+			})
+		})
+	});
+}
+/** Blocks this slot accepts: its allow list resolved through `resolveSchema`, else the whole block library. */
+function useAvailableBlocks(field) {
+	const form = useForm();
+	const allow = slotAllow(field);
+	return React.useMemo(() => {
+		const lib = form.blockLibrary ?? [];
+		if (!allow?.length) return lib;
+		return allow.map((t) => lib.find((b) => b.name === t) ?? form.resolveSchema?.(t)).filter((b) => !!b);
+	}, [
+		allow?.join("|"),
+		form.blockLibrary,
+		form.resolveSchema
+	]);
+}
+function BlockPicker({ blocks, onPick, disabled, label = "Add block" }) {
+	const [open, setOpen] = React.useState(false);
+	const [q, setQ] = React.useState("");
+	const [active, setActive] = React.useState(0);
+	const list = blocks.filter((b) => !q || `${b.title} ${b.category ?? ""} ${b.description ?? ""}`.toLowerCase().includes(q.toLowerCase()));
+	const cats = Array.from(new Set(list.map((b) => b.category ?? "Blocks")));
+	const flat = cats.flatMap((c) => list.filter((b) => (b.category ?? "Blocks") === c));
+	const pick = (b) => {
+		onPick(b);
+		setOpen(false);
+		setQ("");
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			setQ("");
+			setActive(0);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "text-kit-fg-2",
+				leftIcon: /* @__PURE__ */ jsx(IconPlus, { stroke: 1.5 }),
+				disabled
+			}),
+			children: label
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-[300px] p-0",
+			align: "start",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex h-10 items-center gap-2 border-b border-kit-line px-3 text-kit-fg-3",
+					onKeyDown: (e) => {
+						if (e.key === "ArrowDown") {
+							e.preventDefault();
+							setActive((a) => (a + 1) % Math.max(1, flat.length));
+						}
+						if (e.key === "ArrowUp") {
+							e.preventDefault();
+							setActive((a) => (a - 1 + flat.length) % Math.max(1, flat.length));
+						}
+						if (e.key === "Enter" && flat[active]) {
+							e.preventDefault();
+							pick(flat[active]);
+						}
+					},
+					children: [/* @__PURE__ */ jsx(IconSearch, {
+						className: "size-4 shrink-0",
+						stroke: 1.5
+					}), /* @__PURE__ */ jsx("input", {
+						autoFocus: true,
+						value: q,
+						onChange: (e) => {
+							setQ(e.target.value);
+							setActive(0);
+						},
+						placeholder: "Search blocks",
+						"aria-label": "Search blocks",
+						className: "h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "max-h-80 overflow-y-auto p-1",
+					role: "listbox",
+					children: [flat.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-6 text-center text-kit-sm text-kit-fg-3",
+						children: "No blocks match"
+					}) : null, cats.map((c) => /* @__PURE__ */ jsxs("div", {
+						className: "pb-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "px-2 pb-1 pt-1.5 text-kit-2xs font-medium text-kit-fg-3",
+							children: c
+						}), list.filter((b) => (b.category ?? "Blocks") === c).map((b) => {
+							const i = flat.indexOf(b);
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								role: "option",
+								"aria-selected": i === active,
+								onMouseEnter: () => setActive(i),
+								onClick: () => pick(b),
+								className: cn("flex w-full items-center gap-2.5 rounded-kit-md p-1.5 text-left", i === active && "bg-kit-hover"),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "flex size-8 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-surface text-kit-fg-2 shadow-kit-xs",
+									children: /* @__PURE__ */ jsx(KitIcon, {
+										name: b.icon,
+										className: "size-4"
+									})
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "block truncate text-kit-sm text-kit-fg",
+										children: b.title
+									}), b.description ? /* @__PURE__ */ jsx("span", {
+										className: "block truncate text-kit-xs text-kit-fg-3",
+										children: b.description
+									}) : null]
+								})]
+							}, b.name);
+						})]
+					}, c))]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-hint": "shortcuts",
+					className: "border-t border-kit-line px-3 py-1.5 text-kit-2xs text-kit-fg-3",
+					children: "↵ add · type to search"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { BlockPicker, SlotField, useAvailableBlocks };
+
+//# sourceMappingURL=slot.js.map

package/engine/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","names":[],"sources":["../../src/kit/engine/slot.tsx"],"sourcesContent":["/**\n * SLOTS — blocks inside blocks (tabs, columns, bento, carousels, mega-menu panels; V2 HEAD 9829bf1 kit/engine/slot.tsx).\n * Rows show the block icon, its name and a variant chip; \"+ Add block\" opens a compact, searchable block picker;\n * opening a row drills into THAT block's own schema (resolved with `resolveSchema(blockType)`).\n *\n * Drill rows call the RowsHostContext frame push (see array.tsx); with nothing to draw the frame they are inert.\n */\nimport * as React from \"react\";\nimport { IconPlus, IconSearch } from \"@tabler/icons-react\";\nimport { KitIcon } from \"../lib/icons\";\nimport { Button } from \"../ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/overlay\";\nimport { cn } from \"../lib/cn\";\nimport type { FieldPath, FieldSchema, TypeSchema } from \"../schema/types\";\nimport { useForm } from \"../context\";\nimport { ensureKeys, isObj, itemId, pathKey } from \"../lib/path\";\nimport { newBlock, previewOf, slotAllow, summarize } from \"../lib/schema\";\nimport { RowList, useDrill, useListOps, type RowModel } from \"./array\";\nimport { FieldShell } from \"./field-shell\";\nimport { useFieldAccess } from \"./kit-field\";\n\nexport function SlotField({ field, path }: { field: FieldSchema; path: FieldPath }) {\n  const form = useForm()!;\n  const drill = useDrill();\n  const id = React.useId();\n  const { readOnly } = useFieldAccess(field);\n  const key = pathKey(path);\n  const value = form.getAt(path);\n  const list = Array.isArray(value) ? value : [];\n  const write = (next: unknown[]) => form.setAt(path, ensureKeys(next));\n  const ops = useListOps(field, path, list, write, (i) => drill?.([...path, i]));\n  const available = useAvailableBlocks(field);\n  const rows: RowModel[] = list.map((it, i) => {\n    const type = isObj(it) && typeof it._type === \"string\" ? it._type : \"\";\n    const block = form.resolveSchema?.(type);\n    const pv = previewOf(block, it, i, block?.title ?? \"Block\");\n    const variant = block?.variants?.find((v) => isObj(it) && v.id === it._variant)?.name;\n    const settings = field.slotSettings && isObj(it) ? summarize(field.slotSettings, it._settings, 2) : \"\";\n    return {\n      id: itemId(it, i),\n      index: i,\n      item: it,\n      path: [...path, i],\n      preview: { ...pv, title: pv.empty ? (block?.title ?? \"Unknown block\") : pv.title, icon: block?.icon ?? \"box\" },\n      chip: variant,\n      extra: [pv.empty ? undefined : block?.title, settings].filter(Boolean).join(\" · \") || block?.description || `Block ${i + 1} of ${list.length}`,\n    };\n  });\n  return (\n    <FieldShell\n      field={field}\n      path={path}\n      id={id}\n      value={list}\n      onChange={(v) => form.setAt(path, v)}\n      readOnly={readOnly}\n      issue={form.visibleIssue(key)}\n      meta={<span className=\"text-kit-xs text-kit-fg-3\">{list.length} {list.length === 1 ? \"block\" : \"blocks\"}{field.validation?.max != null ? ` · max ${field.validation.max}` : \"\"}</span>}\n    >\n      <RowList\n        field={field}\n        rows={rows}\n        readOnly={readOnly}\n        layout=\"list\"\n        mode=\"drill\"\n        openId={null}\n        onOpen={drill && ((r) => drill(r.path))}\n        onCloseInline={() => {}}\n        ops={ops}\n        renderInline={() => null}\n        leading={(r) => (\n          <span className=\"flex size-7 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-control-bg text-kit-fg-2 shadow-kit-xs\">\n            <KitIcon name={r.preview.icon} className=\"size-4\" />\n          </span>\n        )}\n        emptyLabel=\"No blocks yet. Add one to start composing.\"\n        addButton={<BlockPicker blocks={available} disabled={readOnly || ops.atMax} onPick={(b) => ops.add(newBlock(b, field.slotSettings))} />}\n      />\n    </FieldShell>\n  );\n}\n\n/** Blocks this slot accepts: its allow list resolved through `resolveSchema`, else the whole block library. */\nexport function useAvailableBlocks(field: FieldSchema): TypeSchema[] {\n  const form = useForm()!;\n  const allow = slotAllow(field);\n  return React.useMemo(() => {\n    const lib = form.blockLibrary ?? [];\n    if (!allow?.length) return lib;\n    return allow.map((t) => lib.find((b) => b.name === t) ?? form.resolveSchema?.(t)).filter((b): b is TypeSchema => !!b);\n  }, [allow?.join(\"|\"), form.blockLibrary, form.resolveSchema]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function BlockPicker({ blocks, onPick, disabled, label = \"Add block\" }: { blocks: TypeSchema[]; onPick: (b: TypeSchema) => void; disabled?: boolean; label?: string }) {\n  const [open, setOpen] = React.useState(false);\n  const [q, setQ] = React.useState(\"\");\n  const [active, setActive] = React.useState(0);\n  const list = blocks.filter((b) => !q || `${b.title} ${b.category ?? \"\"} ${b.description ?? \"\"}`.toLowerCase().includes(q.toLowerCase()));\n  const cats = Array.from(new Set(list.map((b) => b.category ?? \"Blocks\")));\n  const flat = cats.flatMap((c) => list.filter((b) => (b.category ?? \"Blocks\") === c));\n  const pick = (b: TypeSchema) => {\n    onPick(b);\n    setOpen(false);\n    setQ(\"\");\n  };\n  return (\n    <Popover open={open} onOpenChange={(o) => { setOpen(o); setQ(\"\"); setActive(0); }}>\n      <PopoverTrigger render={<Button size=\"sm\" variant=\"ghost\" className=\"text-kit-fg-2\" leftIcon={<IconPlus stroke={1.5} />} disabled={disabled} />}>{label}</PopoverTrigger>\n      <PopoverContent className=\"w-[300px] p-0\" align=\"start\">\n        <label\n          className=\"flex h-10 items-center gap-2 border-b border-kit-line px-3 text-kit-fg-3\"\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") { e.preventDefault(); setActive((a) => (a + 1) % Math.max(1, flat.length)); }\n            if (e.key === \"ArrowUp\") { e.preventDefault(); setActive((a) => (a - 1 + flat.length) % Math.max(1, flat.length)); }\n            if (e.key === \"Enter\" && flat[active]) { e.preventDefault(); pick(flat[active]); }\n          }}\n        >\n          <IconSearch className=\"size-4 shrink-0\" stroke={1.5} />\n          <input autoFocus value={q} onChange={(e) => { setQ(e.target.value); setActive(0); }} placeholder=\"Search blocks\" aria-label=\"Search blocks\" className=\"h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3\" />\n        </label>\n        <div className=\"max-h-80 overflow-y-auto p-1\" role=\"listbox\">\n          {flat.length === 0 ? <p className=\"px-3 py-6 text-center text-kit-sm text-kit-fg-3\">No blocks match</p> : null}\n          {cats.map((c) => (\n            <div key={c} className=\"pb-1\">\n              <div className=\"px-2 pb-1 pt-1.5 text-kit-2xs font-medium text-kit-fg-3\">{c}</div>\n              {list.filter((b) => (b.category ?? \"Blocks\") === c).map((b) => {\n                const i = flat.indexOf(b);\n                return (\n                  <button\n                    key={b.name}\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={i === active}\n                    onMouseEnter={() => setActive(i)}\n                    onClick={() => pick(b)}\n                    className={cn(\"flex w-full items-center gap-2.5 rounded-kit-md p-1.5 text-left\", i === active && \"bg-kit-hover\")}\n                  >\n                    <span className=\"flex size-8 shrink-0 items-center justify-center rounded-kit-md border border-kit-line bg-kit-surface text-kit-fg-2 shadow-kit-xs\">\n                      <KitIcon name={b.icon} className=\"size-4\" />\n                    </span>\n                    <span className=\"min-w-0 flex-1\">\n                      <span className=\"block truncate text-kit-sm text-kit-fg\">{b.title}</span>\n                      {b.description ? <span className=\"block truncate text-kit-xs text-kit-fg-3\">{b.description}</span> : null}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <div data-hint=\"shortcuts\" className=\"border-t border-kit-line px-3 py-1.5 text-kit-2xs text-kit-fg-3\">↵ add · type to search</div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @bettercms-ai/kit entry point (in-app: "@/kit"). Importing it loads kit.css, whose tokens apply only
+ * inside [data-kit-scope].
+ *
+ * scale.ts, table.ts and lib/utils.ts each export their own `formatNumber`, so they are not re-exported
+ * here: import them by path ("@/kit/schema/scale", "@/kit/schema/table", "@/kit/lib/utils").
+ */
+import { registerKitControls } from "./controls";
+export * from "./schema/types";
+export * from "./schema/sources";
+export * from "./schema/help";
+export * from "./schema/adapters";
+export { cn } from "./lib/cn";
+export * from "./ui";
+export * from "./context";
+export type { ControlProps } from "./types";
+export * from "./engine/schema-form";
+export * from "./engine/kit-field";
+export * from "./engine/field-shell";
+export * from "./engine/bits";
+export * from "./engine/group-summary";
+export { RHYTHM, useRhythm, InsetScope, useInsetDepth, useGroupStatus, Appear, AnimatedFields, FieldSection, FieldInset, FieldUnit, FieldUnitRow, isBreakpointName, BreakpointGroup, arrangeFields, defaultGroup, GroupTabs, FieldsetSection, isShort, type GroupStatus, type RenderField, type GroupTabItem, type FieldSectionProps, } from "./engine/grouping";
+export * from "./engine/field-list";
+export * from "./engine/array";
+export * from "./engine/item-list";
+export * from "./engine/slot";
+export { FrameSlotsProvider, useFrameSlots, FrameView, frameContext, FrameHeader, HistoryView, parentOfField, parentTitleOf, frameDirection, useFrameNavigation, FrameStage, type FrameFieldListProps, type FrameSlots, } from "./engine/frame";
+export * from "./engine/breadcrumb";
+export { resolveFrames, rootFrame, isDrillable, type Frame } from "./lib/frames";
+export * from "./adapters/schema";
+export * from "./adapters/values";
+export * as prod from "./adapters/prod-types";
+export type { LossyFeature } from "./adapters/lossy";
+import "./controls/date-register";
+import "./controls/icon-register";
+import "./controls/code-register";
+import "./controls/json-register";
+import "./controls/location-register";
+import "./controls/media-register";
+import "./controls/reference-register";
+import "./controls/form-picker-register";
+import "./controls/slot-register";
+import "./controls/rich-text";
+import "./controls/table";
+export * as controls from "./controls";
+export { registerKitControls };

package/index.js

@@ -0,0 +1,55 @@
+import { cn } from "./lib/cn.js";
+import { prod_types_exports } from "./adapters/prod-types.js";
+import { AI_PRESETS, DEFAULT_ENV, FieldHeaderSlot, FormProvider, KitEnvProvider, KitServicesProvider, SITE_PALETTE, fieldAccessOf, registerKitServices, resolveFieldAccess, seesDevSurfaces, useForm, useKitEnv, useKitServices, visibleFields, visibleSchema } from "./context.js";
+import { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy } from "./ui/field-context.js";
+import { Button, HintTooltip, IconButton, RevealLink, Sparkle, TooltipScope, buttonVariants, iconButtonVariants } from "./ui/button.js";
+import { ShortcutHint, ShortcutHintsProvider, shortcutHintsOn, useShortcutHints } from "./ui/shortcut-hint.js";
+import { Checkbox, ChoiceCard, ChoiceList, Progress, Radio, RadioGroup, Segmented, Slider, Switch, ToggleGroup, ToggleItem } from "./ui/controls.js";
+import { FLOATING_LAYER, HoverCard, HoverCardContent, HoverCardTrigger, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Sheet, SheetClose, SheetContent, SheetTrigger, Tooltip, TooltipProvider, useFocusReturn } from "./ui/overlay.js";
+import { IssueDot, Kbdish, RowChrome, Thumb } from "./engine/bits.js";
+import { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, SKELETON, Separator, SettingsSection, Skeleton, Stat, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap } from "./ui/display.js";
+import { Field, HelpMore, Input, Label, SearchInput, Textarea } from "./ui/input.js";
+import { AGENT_PRESENCE, presenceColor, presenceSlot, registerPresenceRoster } from "./ui/presence.js";
+import { DEV_FIELD, DEV_ONLY_FIELD, HISTORY_SEGMENT } from "./schema/types.js";
+import { conventionalHelp, resolveHelp } from "./schema/help.js";
+import { FieldShell, LABEL_HINT_AT, PeerStack, apiName, resetFieldClipboard } from "./engine/field-shell.js";
+import { groupSummary } from "./engine/group-summary.js";
+import { AnimatedFields, Appear, BreakpointGroup, FieldInset, FieldSection, FieldUnit, FieldUnitRow, FieldsetSection, GroupTabs, InsetScope, RHYTHM, arrangeFields, defaultGroup, isBreakpointName, isShort, useGroupStatus, useInsetDepth, useRhythm } from "./engine/grouping.js";
+import { Highlight, SEARCH_THRESHOLD, Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass } from "./ui/select.js";
+import { FieldList } from "./engine/field-list.js";
+import { ItemList, SharedSortProvider, arrayMove, useDragReorder, useSharedSort } from "./engine/item-list.js";
+import { ARRAY_CONTROLS, ArrayField, RowList, RowsHostContext, rowToggleField, useDrill, useListOps } from "./engine/array.js";
+import { isDrillable, resolveFrames, rootFrame } from "./lib/frames.js";
+import { ExpandedEditorModal } from "./ui/expanded-editor-modal.js";
+import { FrameCrumbs, KitBreadcrumb, crumbSignature, framesToCrumbs, kitPathItems } from "./engine/breadcrumb.js";
+import { ChoiceSwitch, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, fitsSegmented } from "./ui/choice-switch.js";
+import { FrameHeader, FrameSlotsProvider, FrameStage, FrameView, HistoryView, frameContext, frameDirection, parentOfField, parentTitleOf, useFrameNavigation, useFrameSlots } from "./engine/frame.js";
+import { COALESCE_MS, SchemaForm, UNDO_STEPS } from "./engine/schema-form.js";
+import { BlockPicker, SlotField, useAvailableBlocks } from "./engine/slot.js";
+import { ACTIONS, ACTION_WHEN_READ_ONLY, CONTROLS, FallbackControl, KitField, LegacyFallback, NavRow, NestedForm, plainOf, useFieldAccess, withDefaultHelp } from "./engine/kit-field.js";
+import { controls_exports, registerKitControls } from "./controls/index.js";
+import { CAP_IDS } from "./schema/sources.js";
+import { blockDefToSchema, fieldDefToSchema, fieldDefsToSchema, inferField, propDefToField, titleFromKey } from "./schema/adapters.js";
+import { ActionTray, TrayMeta, TrayMore, actionTrayClass, relTime } from "./ui/action-tray.js";
+import { ModeBar, ModeBarDot, ModeBarLink } from "./ui/mode-bar.js";
+import "./ui/index.js";
+import { buttonFromProd, buttonToProd, codeFromProd, codeToProd, cropPreset, cropRect, dateFromProd, dateToProd, datetimeFromProd, datetimeToProd, imageFromProd, imageToProd, isDockIcon, linkFromProd, linkToProd, listFromProd, listToProd, ratingFromProd, ratingToProd, referenceFromProd, referenceToProd, scaleFromProd, scaleToProd, tableFromProd, tableToProd, tagsFromProd, tagsToProd, videoFromProd, videoToProd, zoneListFromProd, zoneListToProd } from "./adapters/values.js";
+import { CATEGORY_TO_PROD, fromTypeSchema, leafValuePlan, planFromProd, planToProd, propsToTypeSchema, toTypeSchema } from "./adapters/schema.js";
+import "./controls/date-register.js";
+import "./controls/icon-register.js";
+import "./controls/code-register.js";
+import "./controls/json-register.js";
+import "./controls/location-register.js";
+import "./controls/media-register.js";
+import "./controls/reference-register.js";
+import "./controls/form-picker-register.js";
+import "./controls/slot-register.js";
+import "./controls/rich-text/index.js";
+import "./controls/table/index.js";
+import "./kit.css";
+//#region src/kit/index.ts
+registerKitControls();
+//#endregion
+export { ACTIONS, ACTION_WHEN_READ_ONLY, AGENT_PRESENCE, AI_PRESETS, ARRAY_CONTROLS, ActionTray, AnimatedFields, Appear, ArrayField, Avatar, AvatarStack, Badge, BlockPicker, BreakpointGroup, Button, CAP_IDS, CATEGORY_TO_PROD, COALESCE_MS, CONTROLS, Card, CardHeader, Checkbox, ChoiceCard, ChoiceList, ChoiceSwitch, DEFAULT_ENV, DEV_FIELD, DEV_ONLY_FIELD, Dot, EmptyState, ExpandedEditorModal, FLOATING_LAYER, FallbackControl, Field, FieldDescribedByContext, FieldHeaderSlot, FieldInset, FieldLabelledByContext, FieldList, FieldSection, FieldShell, FieldUnit, FieldUnitRow, FieldsetSection, FormProvider, FrameCrumbs, FrameHeader, FrameSlotsProvider, FrameStage, FrameView, GroupTabs, HISTORY_SEGMENT, HelpMore, Highlight, HintTooltip, HistoryView, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, InsetScope, IssueDot, ItemList, Kbd, Kbdish, KitBreadcrumb, KitEnvProvider, KitField, KitServicesProvider, LABEL_HINT_AT, Label, LegacyFallback, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, ModeBar, ModeBarDot, ModeBarLink, NavRow, NestedForm, PageHeader, PeerStack, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RHYTHM, Radio, RadioGroup, RevealLink, RowChrome, RowList, RowsHostContext, SEARCH_THRESHOLD, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, SITE_PALETTE, SKELETON, SchemaForm, SearchInput, Segmented, Select, Separator, SettingsSection, SharedSortProvider, Sheet, SheetClose, SheetContent, SheetTrigger, ShortcutHint, ShortcutHintsProvider, Skeleton, Slider, SlotField, Sparkle, Stat, StatusPill, Switch, Table, Td, Textarea, Th, Thumb, ToggleGroup, ToggleItem, Tooltip, TooltipProvider, TooltipScope, Tr, TrayMeta, TrayMore, UNDO_STEPS, actionTrayClass, apiName, arrangeFields, arrayMove, avatarRingSpread, badgeVariants, blockDefToSchema, buttonFromProd, buttonToProd, buttonVariants, cn, codeFromProd, codeToProd, colorFor, controls_exports as controls, conventionalHelp, cropPreset, cropRect, crumbSignature, dateFromProd, dateToProd, datetimeFromProd, datetimeToProd, defaultGroup, fieldAccessOf, fieldDefToSchema, fieldDefsToSchema, filterOptions, fitsSegmented, frameContext, frameDirection, framesToCrumbs, fromTypeSchema, groupSummary, iconButtonVariants, imageFromProd, imageToProd, inferField, initials, isBreakpointName, isDockIcon, isDrillable, isShort, kitPathItems, leafValuePlan, linkFromProd, linkToProd, listFromProd, listToProd, matchPositions, matchScore, nodeText, parentOfField, parentTitleOf, plainOf, planFromProd, planToProd, presenceColor, presenceSlot, prod_types_exports as prod, propDefToField, propsToTypeSchema, ratingFromProd, ratingToProd, referenceFromProd, referenceToProd, registerKitControls, registerKitServices, registerPresenceRoster, relTime, resetFieldClipboard, resolveFieldAccess, resolveFrames, resolveHelp, rootFrame, rowToggleField, scaleFromProd, scaleToProd, seesDevSurfaces, selectTriggerClass, shortcutHintsOn, statusMap, tableFromProd, tableToProd, tagsFromProd, tagsToProd, titleFromKey, toTypeSchema, useAvailableBlocks, useDragReorder, useDrill, useFieldAccess, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useFocusReturn, useForm, useFrameNavigation, useFrameSlots, useGroupStatus, useInsetDepth, useKitEnv, useKitServices, useListOps, useRhythm, useSharedSort, useShortcutHints, videoFromProd, videoToProd, visibleFields, visibleSchema, withDefaultHelp, zoneListFromProd, zoneListToProd };
+
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/kit/index.ts"],"sourcesContent":["/**\n * @bettercms-ai/kit entry point (in-app: \"@/kit\"). Importing it loads kit.css, whose tokens apply only\n * inside [data-kit-scope].\n *\n * scale.ts, table.ts and lib/utils.ts each export their own `formatNumber`, so they are not re-exported\n * here: import them by path (\"@/kit/schema/scale\", \"@/kit/schema/table\", \"@/kit/lib/utils\").\n */\nimport \"./kit.css\";\nimport { registerKitControls } from \"./controls\";\n\nexport * from \"./schema/types\";\nexport * from \"./schema/sources\";\nexport * from \"./schema/help\";\nexport * from \"./schema/adapters\";\nexport { cn } from \"./lib/cn\";\nexport * from \"./ui\";\n\n/* the form engine, its runtime contexts, and the V2 ↔ prod schema and value adapters */\nexport * from \"./context\";\nexport type { ControlProps } from \"./types\";\nexport * from \"./engine/schema-form\";\nexport * from \"./engine/kit-field\";\nexport * from \"./engine/field-shell\";\nexport * from \"./engine/bits\";\nexport * from \"./engine/group-summary\";\n/* layout (grouping.tsx's FieldList takes `renderField`; the engine's FieldList is field-list's, drawing KitField) */\nexport {\n  RHYTHM, useRhythm, InsetScope, useInsetDepth, useGroupStatus, Appear, AnimatedFields, FieldSection, FieldInset, FieldUnit, FieldUnitRow,\n  isBreakpointName, BreakpointGroup, arrangeFields, defaultGroup, GroupTabs, FieldsetSection, isShort,\n  type GroupStatus, type RenderField, type GroupTabItem, type FieldSectionProps,\n} from \"./engine/grouping\";\nexport * from \"./engine/field-list\";\nexport * from \"./engine/array\";\nexport * from \"./engine/item-list\";\nexport * from \"./engine/slot\";\nexport {\n  FrameSlotsProvider, useFrameSlots, FrameView, frameContext, FrameHeader, HistoryView, parentOfField, parentTitleOf, frameDirection,\n  useFrameNavigation, FrameStage, type FrameFieldListProps, type FrameSlots,\n} from \"./engine/frame\";\nexport * from \"./engine/breadcrumb\";\nexport { resolveFrames, rootFrame, isDrillable, type Frame } from \"./lib/frames\";\nexport * from \"./adapters/schema\";\nexport * from \"./adapters/values\";\n/* the prod model's names (Fieldset, OpenMode, ScaleUnit, SelectOption) collide with the kit's own, so they live under `prod` */\nexport * as prod from \"./adapters/prod-types\";\nexport type { LossyFeature } from \"./adapters/lossy\";\n\n/* controls: each register file adds its types to the engine's dispatch tables (one import per lane file) */\nimport \"./controls/date-register\";\nimport \"./controls/icon-register\";\nimport \"./controls/code-register\";\nimport \"./controls/json-register\";\nimport \"./controls/location-register\";\nimport \"./controls/media-register\";\nimport \"./controls/reference-register\";\nimport \"./controls/form-picker-register\";\nimport \"./controls/slot-register\";\nimport \"./controls/rich-text\";\nimport \"./controls/table\";\n/* the ported controls: registered once here, so any host that loads the kit draws them instead of its legacy control.\n   Their helpers keep short names (str, toNum…), so they live under `controls`. */\nexport * as controls from \"./controls\";\nexport { registerKitControls };\nregisterKitControls();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,qBAAqB"}

package/kit.css

@@ -0,0 +1,56 @@
+/*
+ * @bettercms-ai/kit keyframes. Nothing else lives here.
+ *
+ * The V2 Block Kit tokens (every --kit-* role, light and dark) are declared once, in src/index.css's light
+ * and dark token blocks, where the dashboard's legacy role names alias them: one token home for the whole
+ * app. The kit's utility names (bg-kit-surface, text-kit-fg-3, rounded-kit-md, ...) are registered there
+ * too, by an "@theme inline reference" block. [data-kit-scope] is a marker: its V2 element defaults (body
+ * text, borders, headings, code mono) sit in index.css's base layer.
+ *
+ * Keyframe names are global, so each carries the kit- prefix. This sheet runs no Tailwind pass (a second
+ * utilities pass would re-emit .hidden and friends after the main sheet). Import it only from the kit entry
+ * point (src/kit/index.ts). src/kit/__tests__/kit-token-home.test.ts holds this file to keyframes only.
+ */
+
+@keyframes kit-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes kit-pop-in {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+
+/* V2 sheet-in-r / sheet-in-l (index.css), run by SheetContent on open */
+@keyframes kit-sheet-in-r {
+  from { transform: translateX(24px); opacity: 0; }
+  to { transform: none; opacity: 1; }
+}
+
+@keyframes kit-sheet-in-l {
+  from { transform: translateX(-24px); opacity: 0; }
+  to { transform: none; opacity: 1; }
+}
+
+/* V2 TabletSheet (editor.tsx:491-513): the bottom sheet rises from y 100%, run by SheetContent side="bottom" */
+@keyframes kit-sheet-in-b {
+  from { transform: translateY(100%); }
+  to { transform: none; }
+}
+
+@keyframes kit-shimmer {
+  from { background-position: -400px 0; }
+  to { background-position: 400px 0; }
+}
+
+/* V2 shimmer-text (index.css:945): a 200%-wide text gradient sweeping right to left, looping seamlessly */
+@keyframes kit-shimmer-text {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@keyframes kit-pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.45; transform: scale(0.85); }
+}

package/lib/cn.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+export declare function cn(...inputs: ClassValue[]): string;
+export { twMerge };

package/lib/cn.js

@@ -0,0 +1,53 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/kit/lib/cn.ts
+/** Merge Tailwind classes; our custom text sizes (2xs..3xl) are registered so twMerge
+*  doesn't confuse `text-sm` (size) with `text-fg-2` (color). */
+var merge = extendTailwindMerge({ extend: { classGroups: {
+	"font-size": [{ text: [
+		"2xs",
+		"xs",
+		"sm",
+		"base",
+		"md",
+		"lg",
+		"xl",
+		"2xl",
+		"3xl",
+		"kit-2xs",
+		"kit-xs",
+		"kit-sm",
+		"kit-base",
+		"kit-md",
+		"kit-lg",
+		"kit-xl",
+		"kit-2xl",
+		"kit-3xl"
+	] }],
+	shadow: [{ shadow: [
+		"kit-xs",
+		"kit-sm",
+		"kit-md",
+		"kit-lg",
+		"kit-xl",
+		"kit-canvas-frame",
+		"kit-device",
+		"kit-field",
+		"kit-ring-field"
+	] }],
+	rounded: [{ rounded: [
+		"kit-xs",
+		"kit-sm",
+		"kit-md",
+		"kit-lg",
+		"kit-xl",
+		"kit-2xl"
+	] }]
+} } });
+function cn(...inputs) {
+	return merge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=cn.js.map

package/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/kit/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Merge Tailwind classes; our custom text sizes (2xs..3xl) are registered so twMerge\n *  doesn't confuse `text-sm` (size) with `text-fg-2` (color). */\nimport { extendTailwindMerge } from \"tailwind-merge\";\nconst merge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: [\"2xs\", \"xs\", \"sm\", \"base\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\", \"kit-2xs\", \"kit-xs\", \"kit-sm\", \"kit-base\", \"kit-md\", \"kit-lg\", \"kit-xl\", \"kit-2xl\", \"kit-3xl\"] }],\n      // Kit shadow and radius tokens (src/kit/kit.css @theme, namespaced \"kit-\"). Without this twMerge reads\n      // `shadow-kit-md` as a shadow COLOUR and keeps it next to `shadow-none`, so a variant could no longer\n      // override the base shadow; `rounded-kit-md` would not conflict with `rounded-none` either.\n      shadow: [{ shadow: [\"kit-xs\", \"kit-sm\", \"kit-md\", \"kit-lg\", \"kit-xl\", \"kit-canvas-frame\", \"kit-device\", \"kit-field\", \"kit-ring-field\"] }],\n      rounded: [{ rounded: [\"kit-xs\", \"kit-sm\", \"kit-md\", \"kit-lg\", \"kit-xl\", \"kit-2xl\"] }],\n    },\n  },\n});\nexport function cn(...inputs: ClassValue[]) {\n  return merge(clsx(inputs));\n}\nexport { twMerge };\n"],"mappings":";;;;;AAMA,IAAM,QAAQ,oBAAoB,EAChC,QAAQ,EACN,aAAa;CACX,aAAa,CAAC,EAAE,MAAM;EAAC;EAAO;EAAM;EAAM;EAAQ;EAAM;EAAM;EAAM;EAAO;EAAO;EAAW;EAAU;EAAU;EAAY;EAAU;EAAU;EAAU;EAAW;EAAU,EAAE,CAAC;CAInL,QAAQ,CAAC,EAAE,QAAQ;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAoB;EAAc;EAAa;EAAiB,EAAE,CAAC;CACzI,SAAS,CAAC,EAAE,SAAS;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU,EAAE,CAAC;CACtF,EACF,EACF,CAAC;AACF,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,MAAM,KAAK,OAAO,CAAC"}

package/lib/columns.d.ts

@@ -0,0 +1,14 @@
+/**
+ * COLUMNS (CPO D63; V2 HEAD c896beb kit/lib/columns.ts) — the one rule for putting fields side by side, shared by every
+ * host (sections, insets, array rows). Pure, no React.
+ *
+ * A field may sit in a column only when its value is genuinely short. The layout also needs room: `FieldRun` turns two-up
+ * only when the form is at least 420px wide (a container query), so the 300 to 380px inspector is always one column.
+ */
+import type { FieldSchema } from "../schema/types";
+/** Text longer than this never sits in a column. */
+export declare const SHORT_TEXT_MAX = 24;
+/** Long text, rich text, lists, media, links, references, buttons, tables and objects are always full width. */
+export declare function isColumnField(f: FieldSchema): boolean;
+/** Pairs neighbouring column fields; a column field with no short neighbour spans the full row. true = half width. */
+export declare function columnSpans(fields: FieldSchema[]): boolean[];

package/lib/columns.js

@@ -0,0 +1,27 @@
+/** Long text, rich text, lists, media, links, references, buttons, tables and objects are always full width. */
+function isColumnField(f) {
+	switch (f.type) {
+		case "number": return !f.scale && f.layout !== "slider";
+		case "boolean":
+		case "date":
+		case "color":
+		case "icon":
+		case "rating": return true;
+		case "select": return f.layout !== "cards" && f.layout !== "radio";
+		case "string": return (f.validation?.max ?? Infinity) <= 24;
+		default: return false;
+	}
+}
+/** Pairs neighbouring column fields; a column field with no short neighbour spans the full row. true = half width. */
+function columnSpans(fields) {
+	const out = fields.map(() => false);
+	for (let i = 0; i < fields.length - 1; i++) if (isColumnField(fields[i]) && isColumnField(fields[i + 1])) {
+		out[i] = out[i + 1] = true;
+		i++;
+	}
+	return out;
+}
+//#endregion
+export { columnSpans, isColumnField };
+
+//# sourceMappingURL=columns.js.map

package/lib/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","names":[],"sources":["../../src/kit/lib/columns.ts"],"sourcesContent":["/**\n * COLUMNS (CPO D63; V2 HEAD c896beb kit/lib/columns.ts) — the one rule for putting fields side by side, shared by every\n * host (sections, insets, array rows). Pure, no React.\n *\n * A field may sit in a column only when its value is genuinely short. The layout also needs room: `FieldRun` turns two-up\n * only when the form is at least 420px wide (a container query), so the 300 to 380px inspector is always one column.\n */\nimport type { FieldSchema } from \"../schema/types\";\n\n/** Text longer than this never sits in a column. */\nexport const SHORT_TEXT_MAX = 24;\n\n/** Long text, rich text, lists, media, links, references, buttons, tables and objects are always full width. */\nexport function isColumnField(f: FieldSchema): boolean {\n  switch (f.type) {\n    case \"number\":\n      return !f.scale && f.layout !== \"slider\"; // a scale needs the full row (D41)\n    case \"boolean\": case \"date\": case \"color\": case \"icon\": case \"rating\":\n      return true;\n    case \"select\":\n      return f.layout !== \"cards\" && f.layout !== \"radio\";\n    case \"string\":\n      return (f.validation?.max ?? Infinity) <= SHORT_TEXT_MAX;\n    default:\n      return false;\n  }\n}\n/** Pairs neighbouring column fields; a column field with no short neighbour spans the full row. true = half width. */\nexport function columnSpans(fields: FieldSchema[]): boolean[] {\n  const out = fields.map(() => false);\n  for (let i = 0; i < fields.length - 1; i++) {\n    if (isColumnField(fields[i]) && isColumnField(fields[i + 1])) {\n      out[i] = out[i + 1] = true;\n      i++;\n    }\n  }\n  return out;\n}\n"],"mappings":";AAaA,SAAgB,cAAc,GAAyB;AACrD,SAAQ,EAAE,MAAV;EACE,KAAK,SACH,QAAO,CAAC,EAAE,SAAS,EAAE,WAAW;EAClC,KAAK;EAAW,KAAK;EAAQ,KAAK;EAAS,KAAK;EAAQ,KAAK,SAC3D,QAAO;EACT,KAAK,SACH,QAAO,EAAE,WAAW,WAAW,EAAE,WAAW;EAC9C,KAAK,SACH,SAAQ,EAAE,YAAY,OAAO,aAAA;EAC/B,QACE,QAAO;;;;AAIb,SAAgB,YAAY,QAAkC;CAC5D,MAAM,MAAM,OAAO,UAAU,MAAM;AACnC,MAAK,IAAI,IAAI,GAAG,IAAI,OAAO,SAAS,GAAG,IACrC,KAAI,cAAc,OAAO,GAAG,IAAI,cAAc,OAAO,IAAI,GAAG,EAAE;AAC5D,MAAI,KAAK,IAAI,IAAI,KAAK;AACtB;;AAGJ,QAAO"}

package/lib/frames.d.ts

@@ -0,0 +1,36 @@
+/**
+ * NAVIGATION MODEL — a path resolves to a STACK OF FRAMES (one per breadcrumb). The last frame is what the
+ * panel shows. Drillable nodes: object fields (drill mode), array items, slot children (blocks), button fields
+ * (the one button screen) and "@history" (a field's versions as a stacked panel).
+ */
+import { type Crumb, type FieldGroup, type FieldPath, type FieldSchema, type Fieldset, type TypeSchema } from "../schema/types";
+export interface Frame {
+    path: FieldPath;
+    kind: Crumb["kind"];
+    title: string;
+    icon?: string;
+    fields: FieldSchema[];
+    fieldsets?: Fieldset[];
+    groups?: FieldGroup[];
+    /** the field that owns this frame (object / array / slot / button / history target) */
+    field?: FieldSchema;
+    /** array items and slot children */
+    item?: {
+        arrayPath: FieldPath;
+        index: number;
+        count: number;
+        itemSchema?: FieldSchema;
+        block?: TypeSchema;
+        slotField?: FieldSchema;
+        /** the title of sibling `i` (table rows and columns, whose items have no schema to preview) */
+        titleAt?: (i: number) => string;
+    };
+}
+export declare function rootFrame(schema: TypeSchema): Frame;
+/** Resolve `path` into frames. Stops at the first segment that doesn't resolve (returns the valid prefix). */
+export declare function resolveFrames(schema: TypeSchema, value: unknown, path: FieldPath, resolveSchema?: (t: string) => TypeSchema | undefined): {
+    frames: Frame[];
+    path: FieldPath;
+};
+/** Can this field be opened as its own frame (drill target)? */
+export declare const isDrillable: (f: FieldSchema) => boolean;