@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/table/table-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-link.js","names":[],"sources":["../../../src/kit/controls/table/table-link.tsx"],"sourcesContent":["/**\n * A link cell's address (BE TableLink `{ label, href, newTab?, rel? }`): the address, \"Open in a new tab\" and the\n * relationship search engines read. V2 opened its global link panel (controls/link.tsx LinkPopoverBody); that panel is the\n * link lane's, so the table carries this one, writing the same four keys the backend takes and nothing else.\n *\n * Refusals are named before anything is written: a script address (javascript:, data:, vbscript:) is refused here\n * exactly as the backend refuses it (`link_value_invalid`).\n */\nimport * as React from \"react\";\nimport { IconLink } from \"@tabler/icons-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../../ui/button\";\nimport { Input } from \"../../ui/input\";\nimport { Switch } from \"../../ui/controls\";\nimport { Select } from \"../../ui/select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/overlay\";\nimport type { TableLink } from \"../../schema/table\";\n\nexport const LINK_RELS: { value: NonNullable<TableLink[\"rel\"]>; label: string }[] = [\n  { value: \"follow\", label: \"Follow (default)\" },\n  { value: \"nofollow\", label: \"Don't vouch for it (nofollow)\" },\n  { value: \"sponsored\", label: \"Paid or sponsored\" },\n  { value: \"ugc\", label: \"Written by visitors\" },\n];\n\n/** BE link-value.ts isScriptHref: what no link may hold. */\nexport const isScriptHref = (href: string) => /^\\s*(javascript|data|vbscript):/i.test(href.replace(/[\\p{Cc}\\s]+/gu, \"\"));\nexport const hrefProblem = (href: string) => (isScriptHref(href) ? \"Script links (javascript:, data:, vbscript:) aren't allowed.\" : null);\n\n/** The stored link with only the keys it uses: `newTab` only when on, `rel` only when not the default. */\nexport function tableLink(label: string, href: string, newTab?: boolean, rel?: TableLink[\"rel\"]): TableLink {\n  return { label, href, ...(newTab ? { newTab: true } : {}), ...(rel && rel !== \"follow\" ? { rel } : {}) };\n}\n\n/** Address + options, as one popover body (the spreadsheet's link button) or inline (a row's link cell). */\nexport function LinkAddressEditor({\n  link,\n  onSave,\n  onCancel,\n  autoFocus,\n}: {\n  link: TableLink;\n  onSave: (next: TableLink) => void;\n  onCancel?: () => void;\n  autoFocus?: boolean;\n}) {\n  const [href, setHref] = React.useState(link.href);\n  const [newTab, setNewTab] = React.useState(!!link.newTab);\n  const [rel, setRel] = React.useState<NonNullable<TableLink[\"rel\"]>>(link.rel ?? \"follow\");\n  const id = React.useId();\n  const problem = hrefProblem(href);\n  const save = () => !problem && onSave(tableLink(link.label, href.trim(), newTab, rel));\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex flex-col gap-1.5\">\n        <label htmlFor={`${id}-href`} className=\"text-kit-xs font-medium text-kit-fg-2\">Address</label>\n        <Input\n          id={`${id}-href`}\n          size=\"sm\"\n          autoFocus={autoFocus}\n          value={href}\n          placeholder=\"https://… or /pricing\"\n          aria-invalid={problem ? true : undefined}\n          aria-describedby={problem ? `${id}-problem` : undefined}\n          onChange={(e) => setHref(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") { e.preventDefault(); save(); }\n          }}\n        />\n        {problem ? <p id={`${id}-problem`} role=\"alert\" className=\"text-kit-xs text-kit-danger-fg\">{problem}</p> : null}\n      </div>\n      <div className=\"flex min-h-8 items-center justify-between gap-2 text-kit-sm text-kit-fg-2\">\n        <span aria-hidden>Open in a new tab</span>\n        <Switch size=\"sm\" checked={newTab} onCheckedChange={setNewTab} aria-label=\"Open in a new tab\" />\n      </div>\n      <div className=\"flex flex-col gap-1.5\">\n        <span id={`${id}-rel`} className=\"text-kit-xs font-medium text-kit-fg-2\">Search engines</span>\n        <Select aria-label=\"Search engines\" size=\"sm\" value={rel} onValueChange={(v) => setRel(v as typeof rel)} options={LINK_RELS} />\n      </div>\n      <div className=\"flex items-center justify-end gap-1.5\">\n        {link.href ? (\n          <Button size=\"sm\" variant=\"ghost\" className=\"mr-auto text-kit-fg-2\" onClick={() => onSave(tableLink(link.label, \"\"))}>\n            Remove link\n          </Button>\n        ) : null}\n        {onCancel ? (\n          <Button size=\"sm\" variant=\"ghost\" onClick={onCancel}>\n            Cancel\n          </Button>\n        ) : null}\n        <Button size=\"sm\" variant=\"primary\" disabled={!!problem} onClick={save}>\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n}\n\n/** The small link button beside a link cell's words: opens the address editor. */\nexport function LinkAddressButton({ link, onSave, readOnly, className }: { link: TableLink; onSave: (l: TableLink) => void; readOnly?: boolean; className?: string }) {\n  const [open, setOpen] = React.useState(false);\n  if (readOnly && !link.href) return null;\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        disabled={readOnly}\n        tabIndex={-1}\n        aria-label={link.href ? `Link: ${link.href}` : \"Add a link address\"}\n        className={cn(\n          \"flex size-5 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 outline-none hover:bg-kit-hover hover:text-kit-fg\",\n          link.href && \"text-kit-fg-2\",\n          className,\n        )}\n      >\n        <IconLink className=\"size-3.5\" stroke={1.75} />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-[320px] p-3\">\n        <LinkAddressEditor\n          link={link}\n          autoFocus\n          onCancel={() => setOpen(false)}\n          onSave={(l) => {\n            onSave(l);\n            setOpen(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/controls/table/table.d.ts

@@ -0,0 +1,9 @@
+import type { Frame } from "../../lib/frames";
+import type { ControlProps } from "../../types";
+/** Label-row action of a table field (KitField ACTIONS.table): the one way into the full-screen spreadsheet (D49). */
+export declare function TableFullScreenAction({ path }: Pick<ControlProps, "path">): import("react/jsx-runtime").JSX.Element;
+export declare function TableControl({ field, value, onChange, readOnly, path }: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** The body of a drilled table row or column frame (FrameView draws the standard header above it): FrameSlots.TableFrame. */
+export declare function TableFrame({ frame }: {
+    frame: Frame;
+}): import("react/jsx-runtime").JSX.Element;

package/controls/table/table.js

@@ -0,0 +1,103 @@
+import { pathKey } from "../../lib/path.js";
+import { resolveFieldAccess, useForm, useKitEnv } from "../../context.js";
+import { GENERAL_TABLE, emptyTable, isTableValue, normalizeTable } from "../../schema/table.js";
+import { TableEditor, TableFullScreenButton, TableItemEditor } from "./table-editor.js";
+import { storedTable } from "./stored.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/kit/controls/table/table.tsx
+/**
+* TABLE control (CPO D42, D50, D52; port of V2 kit/controls/table.tsx): the `table` field type (a content-model `table`
+* field, or a component `table` prop with `config.mode: "data"`) edits like any nested array, with no container of its
+* own: Title, Columns, Rows (groups live in the row list), Note under the table, and a collapsed Table settings that
+* offers only what `field.table.settings` allows (no `table` options = a general table, everything offered). A row or a
+* column drills through the form's own navigation (TableFrame), so the breadcrumb and frame header are the ones every
+* FAQ or feature item uses. The ⤢ button in the field's label row (TableFullScreenAction) opens the spreadsheet in the
+* expanded-editor modal (D49).
+*
+* Value: `TableValue` (schema/table.ts), written in the exact shape the backend stores (stored.ts): keys the editor
+* fills in for itself are never written back unless the person changed them.
+*/
+var fullKey = null;
+var subs = /* @__PURE__ */ new Set();
+var setFullKey = (k) => {
+	fullKey = k;
+	subs.forEach((f) => f());
+};
+var subscribe = (f) => (subs.add(f), () => void subs.delete(f));
+var useFullOpen = (k) => React.useSyncExternalStore(subscribe, () => fullKey === k, () => false);
+var fullKeyOf = (docId, path) => `${docId}:${pathKey(path)}`;
+/** Label-row action of a table field (KitField ACTIONS.table): the one way into the full-screen spreadsheet (D49). */
+function TableFullScreenAction({ path }) {
+	const env = useKitEnv();
+	return /* @__PURE__ */ jsx(TableFullScreenButton, {
+		className: "-my-1",
+		onOpen: () => setFullKey(fullKeyOf(env.docId, path))
+	});
+}
+function TableControl({ field, value, onChange, readOnly, path }) {
+	const env = useKitEnv();
+	const form = useForm();
+	const t = React.useMemo(() => isTableValue(value) ? normalizeTable(value) : null, [value]);
+	const fallback = React.useMemo(() => isTableValue(field.initialValue) ? normalizeTable(field.initialValue) : emptyTable(), [field.initialValue]);
+	const key = fullKeyOf(env.docId, path);
+	const full = useFullOpen(key);
+	React.useEffect(() => () => void (fullKey === key && setFullKey(null)), [key]);
+	const host = React.useRef(null);
+	const nav = React.useMemo(() => form?.canNavigate ? {
+		id: key,
+		basePath: path,
+		open: (kind, i) => form.navigate([
+			...path,
+			kind,
+			i
+		])
+	} : void 0, [
+		form,
+		key,
+		path
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: host,
+		className: "min-w-0",
+		"data-kit-control": "table",
+		children: /* @__PURE__ */ jsx(TableEditor, {
+			value: t ?? fallback,
+			onChange: (next) => onChange(storedTable(next, value)),
+			readOnly,
+			options: field.table ?? GENERAL_TABLE,
+			developer: env.can("schema.manage"),
+			label: field.title,
+			parentTitle: env.docTitle,
+			nav,
+			fullScreen: {
+				open: full,
+				onOpenChange: (o) => setFullKey(o ? key : null),
+				returnFocus: () => host.current?.closest("[data-field-key]")?.querySelector("button[aria-label=\"Edit in full screen\"]") ?? null
+			}
+		})
+	});
+}
+/** The body of a drilled table row or column frame (FrameView draws the standard header above it): FrameSlots.TableFrame. */
+function TableFrame({ frame }) {
+	const form = useForm();
+	const env = useKitEnv();
+	const it = frame.item;
+	const field = frame.field;
+	const tablePath = it.arrayPath.slice(0, -1);
+	const raw = form.getAt(tablePath);
+	const readOnly = resolveFieldAccess(field, env).readOnly;
+	return /* @__PURE__ */ jsx(TableItemEditor, {
+		kind: frame.kind === "tableRow" ? "row" : "column",
+		index: it.index,
+		value: normalizeTable(raw),
+		onChange: (next) => form.setAt(tablePath, storedTable(next, raw)),
+		options: field.table ?? GENERAL_TABLE,
+		developer: env.can("schema.manage"),
+		readOnly
+	});
+}
+//#endregion
+export { TableControl, TableFrame, TableFullScreenAction };
+
+//# sourceMappingURL=table.js.map

package/controls/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/kit/controls/table/table.tsx"],"sourcesContent":["/**\n * TABLE control (CPO D42, D50, D52; port of V2 kit/controls/table.tsx): the `table` field type (a content-model `table`\n * field, or a component `table` prop with `config.mode: \"data\"`) edits like any nested array, with no container of its\n * own: Title, Columns, Rows (groups live in the row list), Note under the table, and a collapsed Table settings that\n * offers only what `field.table.settings` allows (no `table` options = a general table, everything offered). A row or a\n * column drills through the form's own navigation (TableFrame), so the breadcrumb and frame header are the ones every\n * FAQ or feature item uses. The ⤢ button in the field's label row (TableFullScreenAction) opens the spreadsheet in the\n * expanded-editor modal (D49).\n *\n * Value: `TableValue` (schema/table.ts), written in the exact shape the backend stores (stored.ts): keys the editor\n * fills in for itself are never written back unless the person changed them.\n */\nimport * as React from \"react\";\nimport { resolveFieldAccess, useForm, useKitEnv } from \"../../context\";\nimport type { Frame } from \"../../lib/frames\";\nimport { pathKey } from \"../../lib/path\";\nimport type { FieldPath } from \"../../schema/types\";\nimport { GENERAL_TABLE, emptyTable, isTableValue, normalizeTable, type TableValue } from \"../../schema/table\";\nimport type { ControlProps } from \"../../types\";\nimport { TableEditor, TableFullScreenButton, TableItemEditor } from \"./table-editor\";\nimport { storedTable } from \"./stored\";\n\n/* Which table field has its spreadsheet open (the label-row button and the control share it). */\nlet fullKey: string | null = null;\nconst subs = new Set<() => void>();\nconst setFullKey = (k: string | null) => {\n  fullKey = k;\n  subs.forEach((f) => f());\n};\nconst subscribe = (f: () => void) => (subs.add(f), () => void subs.delete(f));\nconst useFullOpen = (k: string) => React.useSyncExternalStore(subscribe, () => fullKey === k, () => false);\nconst fullKeyOf = (docId: string, path: FieldPath) => `${docId}:${pathKey(path)}`;\n\n/** Label-row action of a table field (KitField ACTIONS.table): the one way into the full-screen spreadsheet (D49). */\nexport function TableFullScreenAction({ path }: Pick<ControlProps, \"path\">) {\n  const env = useKitEnv();\n  return <TableFullScreenButton className=\"-my-1\" onOpen={() => setFullKey(fullKeyOf(env.docId, path))} />;\n}\n\nexport function TableControl({ field, value, onChange, readOnly, path }: ControlProps) {\n  const env = useKitEnv();\n  const form = useForm();\n  const t = React.useMemo(() => (isTableValue(value) ? normalizeTable(value) : null), [value]);\n  // no value yet: the field's default table, else an empty 3 × 2 one (nothing is written until the person edits it)\n  const fallback = React.useMemo(() => (isTableValue(field.initialValue) ? normalizeTable(field.initialValue) : emptyTable()), [field.initialValue]);\n  const key = fullKeyOf(env.docId, path);\n  const full = useFullOpen(key);\n  // the spreadsheet belongs to this mount: a dock closed with it open must not reopen it on the next visit\n  React.useEffect(() => () => void (fullKey === key && setFullKey(null)), [key]);\n  const host = React.useRef<HTMLDivElement>(null);\n  const nav = React.useMemo(\n    () => (form?.canNavigate ? { id: key, basePath: path, open: (kind: \"rows\" | \"columns\", i: number) => form.navigate([...path, kind, i]) } : undefined),\n    [form, key, path],\n  );\n  return (\n    <div ref={host} className=\"min-w-0\" data-kit-control=\"table\">\n      <TableEditor\n        value={t ?? fallback}\n        onChange={(next: TableValue) => onChange(storedTable(next, value))}\n        readOnly={readOnly}\n        options={field.table ?? GENERAL_TABLE}\n        developer={env.can(\"schema.manage\")}\n        label={field.title}\n        parentTitle={env.docTitle}\n        nav={nav}\n        fullScreen={{\n          open: full,\n          onOpenChange: (o) => setFullKey(o ? key : null),\n          returnFocus: () => host.current?.closest(\"[data-field-key]\")?.querySelector<HTMLElement>('button[aria-label=\"Edit in full screen\"]') ?? null,\n        }}\n      />\n    </div>\n  );\n}\n\n/** The body of a drilled table row or column frame (FrameView draws the standard header above it): FrameSlots.TableFrame. */\nexport function TableFrame({ frame }: { frame: Frame }) {\n  const form = useForm()!;\n  const env = useKitEnv();\n  const it = frame.item!;\n  const field = frame.field!;\n  const tablePath = it.arrayPath.slice(0, -1);\n  const raw = form.getAt(tablePath);\n  const readOnly = resolveFieldAccess(field, env).readOnly;\n  return (\n    <TableItemEditor\n      kind={frame.kind === \"tableRow\" ? \"row\" : \"column\"}\n      index={it.index}\n      value={normalizeTable(raw)}\n      onChange={(next) => form.setAt(tablePath, storedTable(next, raw))}\n      options={field.table ?? GENERAL_TABLE}\n      developer={env.can(\"schema.manage\")}\n      readOnly={readOnly}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,IAAI,UAAyB;AAC7B,IAAM,uBAAO,IAAI,KAAiB;AAClC,IAAM,cAAc,MAAqB;AACvC,WAAU;AACV,MAAK,SAAS,MAAM,GAAG,CAAC;;AAE1B,IAAM,aAAa,OAAmB,KAAK,IAAI,EAAE,QAAQ,KAAK,KAAK,OAAO,EAAE;AAC5E,IAAM,eAAe,MAAc,MAAM,qBAAqB,iBAAiB,YAAY,SAAS,MAAM;AAC1G,IAAM,aAAa,OAAe,SAAoB,GAAG,MAAM,GAAG,QAAQ,KAAK;;AAG/E,SAAgB,sBAAsB,EAAE,QAAoC;CAC1E,MAAM,MAAM,WAAW;AACvB,QAAO,oBAAC,uBAAD;EAAuB,WAAU;EAAQ,cAAc,WAAW,UAAU,IAAI,OAAO,KAAK,CAAC;EAAI,CAAA;;AAG1G,SAAgB,aAAa,EAAE,OAAO,OAAO,UAAU,UAAU,QAAsB;CACrF,MAAM,MAAM,WAAW;CACvB,MAAM,OAAO,SAAS;CACtB,MAAM,IAAI,MAAM,cAAe,aAAa,MAAM,GAAG,eAAe,MAAM,GAAG,MAAO,CAAC,MAAM,CAAC;CAE5F,MAAM,WAAW,MAAM,cAAe,aAAa,MAAM,aAAa,GAAG,eAAe,MAAM,aAAa,GAAG,YAAY,EAAG,CAAC,MAAM,aAAa,CAAC;CAClJ,MAAM,MAAM,UAAU,IAAI,OAAO,KAAK;CACtC,MAAM,OAAO,YAAY,IAAI;AAE7B,OAAM,sBAAsB,MAAM,YAAY,OAAO,WAAW,KAAK,GAAG,CAAC,IAAI,CAAC;CAC9E,MAAM,OAAO,MAAM,OAAuB,KAAK;CAC/C,MAAM,MAAM,MAAM,cACT,MAAM,cAAc;EAAE,IAAI;EAAK,UAAU;EAAM,OAAO,MAA0B,MAAc,KAAK,SAAS;GAAC,GAAG;GAAM;GAAM;GAAE,CAAC;EAAE,GAAG,KAAA,GAC3I;EAAC;EAAM;EAAK;EAAK,CAClB;AACD,QACE,oBAAC,OAAD;EAAK,KAAK;EAAM,WAAU;EAAU,oBAAiB;YACnD,oBAAC,aAAD;GACE,OAAO,KAAK;GACZ,WAAW,SAAqB,SAAS,YAAY,MAAM,MAAM,CAAC;GACxD;GACV,SAAS,MAAM,SAAS;GACxB,WAAW,IAAI,IAAI,gBAAgB;GACnC,OAAO,MAAM;GACb,aAAa,IAAI;GACZ;GACL,YAAY;IACV,MAAM;IACN,eAAe,MAAM,WAAW,IAAI,MAAM,KAAK;IAC/C,mBAAmB,KAAK,SAAS,QAAQ,mBAAmB,EAAE,cAA2B,6CAA2C,IAAI;IACzI;GACD,CAAA;EACE,CAAA;;;AAKV,SAAgB,WAAW,EAAE,SAA2B;CACtD,MAAM,OAAO,SAAS;CACtB,MAAM,MAAM,WAAW;CACvB,MAAM,KAAK,MAAM;CACjB,MAAM,QAAQ,MAAM;CACpB,MAAM,YAAY,GAAG,UAAU,MAAM,GAAG,GAAG;CAC3C,MAAM,MAAM,KAAK,MAAM,UAAU;CACjC,MAAM,WAAW,mBAAmB,OAAO,IAAI,CAAC;AAChD,QACE,oBAAC,iBAAD;EACE,MAAM,MAAM,SAAS,aAAa,QAAQ;EAC1C,OAAO,GAAG;EACV,OAAO,eAAe,IAAI;EAC1B,WAAW,SAAS,KAAK,MAAM,WAAW,YAAY,MAAM,IAAI,CAAC;EACjE,SAAS,MAAM,SAAS;EACxB,WAAW,IAAI,IAAI,gBAAgB;EACzB;EACV,CAAA"}

package/controls/text.d.ts

@@ -0,0 +1,17 @@
+import type { ControlProps } from "../types";
+export declare const str: (v: unknown) => string;
+/** border-only focus (no halo) for text entry; `[&_input]` reaches the input inside an Input with leading/trailing */
+export declare const TEXT_FOCUS = "focus:shadow-none focus-visible:shadow-none [&_input]:focus:shadow-none";
+export declare function StringControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function UrlControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;
+/** The text a slug follows: the first title-like sibling, else the document title. */
+export declare function slugSource(parent: Record<string, unknown> | undefined, docTitle?: string): string;
+/** What a keystroke may leave in a slug: lowercase letters, digits and hyphens (spaces become hyphens). */
+export declare const slugTyping: (s: string) => string;
+/** The stored slug: no leading, trailing or doubled hyphens (the backend's pattern). */
+export declare const slugTidy: (s: string) => string;
+/** Label-row "Generate" for slug fields (ACTIONS.slug; prod: ghost button in the label row). */
+export declare function SlugGenerate({ parent, value, onChange, readOnly }: Pick<ControlProps, "parent" | "value" | "onChange" | "readOnly">): import("react/jsx-runtime").JSX.Element | null;
+export declare function SlugControl({ value, onChange, readOnly, id, invalid, parent, path, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/controls/text.js

@@ -0,0 +1,287 @@
+import { cn } from "../lib/cn.js";
+import { useForm, useKitEnv, useKitServices } from "../context.js";
+import { Button, IconButton } from "../ui/button.js";
+import { Tooltip } from "../ui/overlay.js";
+import { plainText } from "../lib/schema.js";
+import { Input, Textarea } from "../ui/input.js";
+import { slugify } from "../lib/utils.js";
+import * as React from "react";
+import { IconAlertTriangle, IconExternalLink, IconMail, IconWorld } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/controls/text.tsx
+/**
+* TEXT — string · text · email · url · slug (V2 HEAD 9829bf1 kit/controls/text.tsx, DESIGN §8.2–8.3).
+* Founder rule: text grows to show its whole value, never clipped. Text entry gets NO focus ring or halo — the border
+* steps rest → hover → focus on the box only (prod CPO-069).
+*
+* Stored shapes (prod): string / longtext / email / slug / url (text + inputType "url") all store a plain string.
+* Slug keeps the backend's `^[a-z0-9]+(?:-[a-z0-9]+)*$`: keystrokes are filtered, and the stray hyphens typing leaves
+* (a trailing "-" before the next word) are tidied on blur.
+*/
+var str = (v) => typeof v === "string" ? v : v == null ? "" : String(v);
+/** border-only focus (no halo) for text entry; `[&_input]` reaches the input inside an Input with leading/trailing */
+var TEXT_FOCUS = "focus:shadow-none focus-visible:shadow-none [&_input]:focus:shadow-none";
+function StringControl({ field, value, onChange, readOnly, id, invalid, onBlur }) {
+	const { variant } = useKitEnv();
+	return /* @__PURE__ */ jsx(Textarea, {
+		id,
+		rows: 1,
+		value: str(value),
+		readOnly,
+		"aria-invalid": invalid,
+		placeholder: field.placeholder,
+		onBlur,
+		onKeyDown: (e) => e.key === "Enter" && e.preventDefault(),
+		onChange: (e) => onChange(e.target.value.replace(/\r?\n/g, " ")),
+		className: cn(TEXT_FOCUS, "min-h-8 py-1.5 leading-5", variant === "document" && "min-h-9 py-2")
+	});
+}
+function TextControl({ field, value, onChange, readOnly, id, invalid, onBlur }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		id,
+		rows: field.rows ?? 3,
+		value: str(value),
+		readOnly,
+		"aria-invalid": invalid,
+		placeholder: field.placeholder,
+		onBlur,
+		onChange: (e) => onChange(e.target.value),
+		className: cn(TEXT_FOCUS, "leading-5")
+	});
+}
+function EmailControl({ field, value, onChange, readOnly, id, invalid, onBlur }) {
+	const { variant } = useKitEnv();
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		size: variant === "document" ? "lg" : "md",
+		type: "email",
+		value: str(value),
+		readOnly,
+		"aria-invalid": invalid,
+		onBlur,
+		placeholder: field.placeholder ?? "name@company.com",
+		leading: /* @__PURE__ */ jsx(IconMail, { stroke: 1.5 }),
+		onChange: (e) => onChange(e.target.value.trim()),
+		className: TEXT_FOCUS
+	});
+}
+function UrlControl({ field, value, onChange, readOnly, id, invalid, onBlur }) {
+	const v = str(value);
+	const { variant } = useKitEnv();
+	const open = /^https?:\/\/\S+/.test(v);
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		size: variant === "document" ? "lg" : "md",
+		value: v,
+		readOnly,
+		"aria-invalid": invalid,
+		onBlur,
+		placeholder: field.placeholder ?? "https://example.com",
+		onChange: (e) => onChange(e.target.value.trim()),
+		leading: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 }),
+		className: cn(TEXT_FOCUS, "[&_input]:text-kit-accent-fg"),
+		trailing: open ? /* @__PURE__ */ jsx(Tooltip, {
+			content: "Open link in a new tab",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Open link",
+				className: "pointer-events-auto flex rounded-kit-md p-0.5 hover:bg-kit-selected hover:text-kit-fg",
+				onClick: () => window.open(v, "_blank", "noopener"),
+				children: /* @__PURE__ */ jsx(IconExternalLink, {
+					className: "size-4",
+					stroke: 1.5
+				})
+			})
+		}) : void 0
+	});
+}
+var TITLE_KEYS = [
+	"title",
+	"name",
+	"heading",
+	"question",
+	"label"
+];
+/** The text a slug follows: the first title-like sibling, else the document title. */
+function slugSource(parent, docTitle) {
+	for (const k of TITLE_KEYS) {
+		const t = plainText(parent?.[k]);
+		if (t) return t;
+	}
+	return docTitle ?? "";
+}
+/** What a keystroke may leave in a slug: lowercase letters, digits and hyphens (spaces become hyphens). */
+var slugTyping = (s) => s.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+/** The stored slug: no leading, trailing or doubled hyphens (the backend's pattern). */
+var slugTidy = (s) => slugTyping(s).replace(/-+/g, "-").replace(/^-|-$/g, "");
+/** Label-row "Generate" for slug fields (ACTIONS.slug; prod: ghost button in the label row). */
+function SlugGenerate({ parent, value, onChange, readOnly }) {
+	const { docTitle } = useKitEnv();
+	const src = slugSource(parent, docTitle);
+	if (readOnly || !src) return null;
+	const next = slugify(src);
+	if (!next) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: `Generate from “${src.length > 32 ? `${src.slice(0, 30)}…` : src}”`,
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "ghost",
+			className: "h-5 px-1.5 text-kit-xs text-kit-fg-2",
+			disabled: next === value,
+			onClick: () => onChange(next),
+			children: "Generate"
+		})
+	});
+}
+function SlugControl({ value, onChange, readOnly, id, invalid, parent, path, onBlur }) {
+	const v = str(value);
+	const env = useKitEnv();
+	const form = useForm();
+	const { toast } = useKitServices();
+	const src = slugSource(parent, env.docTitle);
+	const following = React.useRef(env.isPublished === false && (v === "" || v === slugify(src)));
+	const seenSrc = React.useRef(src);
+	React.useEffect(() => {
+		if (seenSrc.current === src) return;
+		seenSrc.current = src;
+		if (!following.current || readOnly) return;
+		const next = slugify(src);
+		if (next && next !== v) onChange(next);
+	}, [src]);
+	const live = form?.hasPublished ? str(form.publishedAt(path)) : env.isPublished ? str(form?.baselineAt(path) ?? "") : "";
+	const [confirmed, setConfirmed] = React.useState(null);
+	const changedLive = !!live && live !== v && confirmed !== v;
+	const host = env.urlPrefix?.replace(/^https?:\/\//, "");
+	const url = host ? `https://${host}${v}` : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				value: v,
+				readOnly,
+				"aria-invalid": invalid,
+				placeholder: "empty-is-the-home-page",
+				className: cn(TEXT_FOCUS, "font-kit-mono"),
+				onChange: (e) => {
+					following.current = false;
+					onChange(slugTyping(e.target.value));
+				},
+				onBlur: () => {
+					const tidy = slugTidy(v);
+					if (tidy !== v) onChange(tidy);
+					onBlur?.();
+				}
+			}),
+			changedLive ? /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "flex flex-col gap-2 rounded-kit-md border border-kit-warning-line bg-kit-warning-soft px-3 py-2.5 text-kit-sm",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "flex items-start gap-1.5 text-kit-warning-fg",
+					children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+						className: "mt-0.5 size-4 shrink-0",
+						stroke: 1.5
+					}), /* @__PURE__ */ jsxs("span", { children: [
+						"The old address ",
+						/* @__PURE__ */ jsxs("span", {
+							className: "font-kit-mono",
+							children: ["/", live]
+						}),
+						" will stop working."
+					] })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-1.5",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "primary",
+						onClick: () => {
+							setConfirmed(v);
+							toast?.success("New address kept", { description: `/${live} will return “Not found”` });
+						},
+						children: "Use the new address"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => {
+							following.current = false;
+							onChange(live);
+						},
+						children: "Keep the old slug"
+					})]
+				})]
+			}) : null,
+			url && host ? /* @__PURE__ */ jsx(AddressLine, {
+				url,
+				domain: host.replace(/\/.*$/, ""),
+				status: env.isPublished === void 0 ? void 0 : env.isPublished ? {
+					live: true,
+					label: "Live"
+				} : {
+					live: false,
+					label: "Not live yet"
+				},
+				onCopy: () => {
+					navigator.clipboard?.writeText(url).then(() => toast?.success("Address copied", { description: url }), () => toast?.("Couldn't copy the address", { description: "The browser blocked clipboard access." }));
+				},
+				children: env.isPublished ? /* @__PURE__ */ jsx(IconButton, {
+					size: "xs",
+					label: "Open live",
+					onClick: () => window.open(url, "_blank", "noopener"),
+					children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.5 })
+				}) : null
+			}) : null
+		]
+	});
+}
+function splitTail(display) {
+	const cut = display.indexOf("/") >= 0 ? display.lastIndexOf("/") : -1;
+	let tail = cut > 0 ? display.slice(cut) : "";
+	if (tail.length > 18) tail = tail.slice(-14);
+	return [display.slice(0, display.length - tail.length), tail];
+}
+function AddressLine({ url, domain, status, onCopy, children }) {
+	const display = url.replace(/^https?:\/\//, "");
+	const [head, tail] = splitTail(display);
+	const domainPart = head.startsWith(domain) ? domain : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-6 min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: /* @__PURE__ */ jsx("span", {
+				className: "font-kit-mono",
+				children: display
+			}),
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: onCopy,
+				"aria-label": `Copy address ${url}`,
+				className: "-ml-1 flex h-6 min-w-0 items-center rounded-kit-md px-1 font-kit-mono text-kit-xs text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 truncate",
+					children: [domainPart ? /* @__PURE__ */ jsx("span", {
+						className: "text-kit-fg-3",
+						children: domainPart
+					}) : null, head.slice(domainPart.length)]
+				}), tail ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 whitespace-pre",
+					children: tail
+				}) : null]
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "ml-auto flex shrink-0 items-center gap-1.5",
+			children: [status ? /* @__PURE__ */ jsxs("span", {
+				className: "mr-0.5 inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-kit-xs text-kit-fg-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: cn("size-1.5 shrink-0 rounded-full", status.live ? "bg-kit-success" : "bg-kit-fg-4")
+				}), status.label]
+			}) : null, children ? /* @__PURE__ */ jsx("span", {
+				className: "flex items-center gap-0.5",
+				children
+			}) : null]
+		})]
+	});
+}
+//#endregion
+export { EmailControl, SlugControl, SlugGenerate, StringControl, TEXT_FOCUS, TextControl, UrlControl, str };
+
+//# sourceMappingURL=text.js.map

package/controls/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../src/kit/controls/text.tsx"],"sourcesContent":["/**\n * TEXT — string · text · email · url · slug (V2 HEAD 9829bf1 kit/controls/text.tsx, DESIGN §8.2–8.3).\n * Founder rule: text grows to show its whole value, never clipped. Text entry gets NO focus ring or halo — the border\n * steps rest → hover → focus on the box only (prod CPO-069).\n *\n * Stored shapes (prod): string / longtext / email / slug / url (text + inputType \"url\") all store a plain string.\n * Slug keeps the backend's `^[a-z0-9]+(?:-[a-z0-9]+)*$`: keystrokes are filtered, and the stray hyphens typing leaves\n * (a trailing \"-\" before the next word) are tidied on blur.\n */\nimport * as React from \"react\";\nimport { IconAlertTriangle, IconExternalLink, IconMail, IconWorld } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { slugify } from \"../lib/utils\";\nimport { plainText } from \"../lib/schema\";\nimport { useForm, useKitEnv, useKitServices } from \"../context\";\nimport { Button, IconButton } from \"../ui/button\";\nimport { Input, Textarea } from \"../ui/input\";\nimport { Tooltip } from \"../ui/overlay\";\nimport type { ControlProps } from \"../types\";\n\nexport const str = (v: unknown) => (typeof v === \"string\" ? v : v == null ? \"\" : String(v));\n/** border-only focus (no halo) for text entry; `[&_input]` reaches the input inside an Input with leading/trailing */\nexport const TEXT_FOCUS = \"focus:shadow-none focus-visible:shadow-none [&_input]:focus:shadow-none\";\n\nexport function StringControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  const { variant } = useKitEnv();\n  return (\n    <Textarea\n      id={id}\n      rows={1}\n      value={str(value)}\n      readOnly={readOnly}\n      aria-invalid={invalid}\n      placeholder={field.placeholder}\n      onBlur={onBlur}\n      onKeyDown={(e) => e.key === \"Enter\" && e.preventDefault()}\n      onChange={(e) => onChange(e.target.value.replace(/\\r?\\n/g, \" \"))}\n      className={cn(TEXT_FOCUS, \"min-h-8 py-1.5 leading-5\", variant === \"document\" && \"min-h-9 py-2\")}\n    />\n  );\n}\n\nexport function TextControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  return (\n    <Textarea\n      id={id}\n      rows={field.rows ?? 3}\n      value={str(value)}\n      readOnly={readOnly}\n      aria-invalid={invalid}\n      placeholder={field.placeholder}\n      onBlur={onBlur}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(TEXT_FOCUS, \"leading-5\")}\n    />\n  );\n}\n\nexport function EmailControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  const { variant } = useKitEnv();\n  return (\n    <Input\n      id={id}\n      size={variant === \"document\" ? \"lg\" : \"md\"}\n      type=\"email\"\n      value={str(value)}\n      readOnly={readOnly}\n      aria-invalid={invalid}\n      onBlur={onBlur}\n      placeholder={field.placeholder ?? \"name@company.com\"}\n      leading={<IconMail stroke={1.5} />}\n      onChange={(e) => onChange(e.target.value.trim())}\n      className={TEXT_FOCUS}\n    />\n  );\n}\n\nexport function UrlControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  const v = str(value);\n  const { variant } = useKitEnv();\n  const open = /^https?:\\/\\/\\S+/.test(v);\n  return (\n    <Input\n      id={id}\n      size={variant === \"document\" ? \"lg\" : \"md\"}\n      value={v}\n      readOnly={readOnly}\n      aria-invalid={invalid}\n      onBlur={onBlur}\n      placeholder={field.placeholder ?? \"https://example.com\"}\n      onChange={(e) => onChange(e.target.value.trim())}\n      leading={<IconWorld stroke={1.5} />}\n      className={cn(TEXT_FOCUS, \"[&_input]:text-kit-accent-fg\")}\n      trailing={\n        open ? (\n          <Tooltip content=\"Open link in a new tab\">\n            <button\n              type=\"button\"\n              aria-label=\"Open link\"\n              className=\"pointer-events-auto flex rounded-kit-md p-0.5 hover:bg-kit-selected hover:text-kit-fg\"\n              onClick={() => window.open(v, \"_blank\", \"noopener\")}\n            >\n              <IconExternalLink className=\"size-4\" stroke={1.5} />\n            </button>\n          </Tooltip>\n        ) : undefined\n      }\n    />\n  );\n}\n\n/* ── Slug ──────────────────────────────────────────────────────────── */\nconst TITLE_KEYS = [\"title\", \"name\", \"heading\", \"question\", \"label\"];\n/** The text a slug follows: the first title-like sibling, else the document title. */\nexport function slugSource(parent: Record<string, unknown> | undefined, docTitle?: string) {\n  for (const k of TITLE_KEYS) {\n    const t = plainText(parent?.[k]);\n    if (t) return t;\n  }\n  return docTitle ?? \"\";\n}\n/** What a keystroke may leave in a slug: lowercase letters, digits and hyphens (spaces become hyphens). */\nexport const slugTyping = (s: string) => s.toLowerCase().replace(/\\s+/g, \"-\").replace(/[^a-z0-9-]/g, \"\");\n/** The stored slug: no leading, trailing or doubled hyphens (the backend's pattern). */\nexport const slugTidy = (s: string) => slugTyping(s).replace(/-+/g, \"-\").replace(/^-|-$/g, \"\");\n\n/** Label-row \"Generate\" for slug fields (ACTIONS.slug; prod: ghost button in the label row). */\nexport function SlugGenerate({ parent, value, onChange, readOnly }: Pick<ControlProps, \"parent\" | \"value\" | \"onChange\" | \"readOnly\">) {\n  const { docTitle } = useKitEnv();\n  const src = slugSource(parent, docTitle);\n  if (readOnly || !src) return null;\n  const next = slugify(src);\n  if (!next) return null;\n  return (\n    <Tooltip content={`Generate from “${src.length > 32 ? `${src.slice(0, 30)}…` : src}”`}>\n      <Button size=\"xs\" variant=\"ghost\" className=\"h-5 px-1.5 text-kit-xs text-kit-fg-2\" disabled={next === value} onClick={() => onChange(next)}>\n        Generate\n      </Button>\n    </Tooltip>\n  );\n}\n\nexport function SlugControl({ value, onChange, readOnly, id, invalid, parent, path, onBlur }: ControlProps) {\n  const v = str(value);\n  const env = useKitEnv();\n  const form = useForm();\n  const { toast } = useKitServices();\n  const src = slugSource(parent, env.docTitle);\n  /* Follows the title until someone edits it (CPO-087), only when the host says the document was never published:\n     a host that cannot tell (the dock) leaves isPublished undefined and the slug never changes on its own. It reacts\n     to a title edit, never to mounting, so opening a form writes nothing. */\n  const following = React.useRef(env.isPublished === false && (v === \"\" || v === slugify(src)));\n  const seenSrc = React.useRef(src);\n  React.useEffect(() => {\n    if (seenSrc.current === src) return;\n    seenSrc.current = src;\n    if (!following.current || readOnly) return;\n    const next = slugify(src);\n    if (next && next !== v) onChange(next);\n  }, [src]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  /* the address the site serves today: the published value, else (published doc, no published copy) the mount value */\n  const live = form?.hasPublished ? str(form.publishedAt(path)) : env.isPublished ? str(form?.baselineAt(path) ?? \"\") : \"\";\n  const [confirmed, setConfirmed] = React.useState<string | null>(null);\n  const changedLive = !!live && live !== v && confirmed !== v;\n  const host = env.urlPrefix?.replace(/^https?:\\/\\//, \"\");\n  const url = host ? `https://${host}${v}` : \"\";\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <Input\n        id={id}\n        value={v}\n        readOnly={readOnly}\n        aria-invalid={invalid}\n        placeholder=\"empty-is-the-home-page\"\n        className={cn(TEXT_FOCUS, \"font-kit-mono\")}\n        onChange={(e) => {\n          following.current = false;\n          onChange(slugTyping(e.target.value));\n        }}\n        onBlur={() => {\n          const tidy = slugTidy(v);\n          if (tidy !== v) onChange(tidy);\n          onBlur?.();\n        }}\n      />\n      {changedLive ? (\n        <div role=\"status\" className=\"flex flex-col gap-2 rounded-kit-md border border-kit-warning-line bg-kit-warning-soft px-3 py-2.5 text-kit-sm\">\n          <p className=\"flex items-start gap-1.5 text-kit-warning-fg\">\n            <IconAlertTriangle className=\"mt-0.5 size-4 shrink-0\" stroke={1.5} />\n            <span>\n              The old address <span className=\"font-kit-mono\">/{live}</span> will stop working.\n            </span>\n          </p>\n          <div className=\"flex gap-1.5\">\n            <Button\n              size=\"xs\"\n              variant=\"primary\"\n              onClick={() => {\n                setConfirmed(v);\n                toast?.success(\"New address kept\", { description: `/${live} will return “Not found”` });\n              }}\n            >\n              Use the new address\n            </Button>\n            <Button\n              size=\"xs\"\n              variant=\"ghost\"\n              onClick={() => {\n                following.current = false;\n                onChange(live);\n              }}\n            >\n              Keep the old slug\n            </Button>\n          </div>\n        </div>\n      ) : null}\n      {url && host ? (\n        <AddressLine\n          url={url}\n          domain={host.replace(/\\/.*$/, \"\")}\n          status={env.isPublished === undefined ? undefined : env.isPublished ? { live: true, label: \"Live\" } : { live: false, label: \"Not live yet\" }}\n          onCopy={() => {\n            void navigator.clipboard?.writeText(url).then(\n              () => toast?.success(\"Address copied\", { description: url }),\n              () => toast?.(\"Couldn't copy the address\", { description: \"The browser blocked clipboard access.\" }),\n            );\n          }}\n        >\n          {env.isPublished ? (\n            <IconButton size=\"xs\" label=\"Open live\" onClick={() => window.open(url, \"_blank\", \"noopener\")}>\n              <IconExternalLink stroke={1.5} />\n            </IconButton>\n          ) : null}\n        </AddressLine>\n      ) : null}\n    </div>\n  );\n}\n\n/* V2 features/hosting/address-line.tsx (D66): one calm line under the slug — the mono URL (middle-truncated so the slug\n   end stays; full URL in the tooltip; copies on click) · the live state as a dot and a word · trailing icon buttons. */\nfunction splitTail(display: string): [string, string] {\n  const cut = display.indexOf(\"/\") >= 0 ? display.lastIndexOf(\"/\") : -1;\n  let tail = cut > 0 ? display.slice(cut) : \"\";\n  if (tail.length > 18) tail = tail.slice(-14);\n  return [display.slice(0, display.length - tail.length), tail];\n}\n\nfunction AddressLine({ url, domain, status, onCopy, children }: { url: string; domain: string; status?: { live: boolean; label: string }; onCopy: () => void; children?: React.ReactNode }) {\n  const display = url.replace(/^https?:\\/\\//, \"\");\n  const [head, tail] = splitTail(display);\n  const domainPart = head.startsWith(domain) ? domain : \"\";\n  return (\n    <div className=\"flex h-6 min-w-0 items-center gap-2\">\n      <Tooltip content={<span className=\"font-kit-mono\">{display}</span>}>\n        <button\n          type=\"button\"\n          onClick={onCopy}\n          aria-label={`Copy address ${url}`}\n          className=\"-ml-1 flex h-6 min-w-0 items-center rounded-kit-md px-1 font-kit-mono text-kit-xs text-kit-fg-2 transition-colors hover:bg-kit-hover hover:text-kit-fg\"\n        >\n          <span className=\"min-w-0 truncate\">\n            {domainPart ? <span className=\"text-kit-fg-3\">{domainPart}</span> : null}\n            {head.slice(domainPart.length)}\n          </span>\n          {tail ? <span className=\"shrink-0 whitespace-pre\">{tail}</span> : null}\n        </button>\n      </Tooltip>\n      <span className=\"ml-auto flex shrink-0 items-center gap-1.5\">\n        {status ? (\n          <span className=\"mr-0.5 inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-kit-xs text-kit-fg-2\">\n            <span aria-hidden className={cn(\"size-1.5 shrink-0 rounded-full\", status.live ? \"bg-kit-success\" : \"bg-kit-fg-4\")} />\n            {status.label}\n          </span>\n        ) : null}\n        {children ? <span className=\"flex items-center gap-0.5\">{children}</span> : null}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/engine/array.d.ts

@@ -0,0 +1,101 @@
+/**
+ * ARRAYS — compact PREVIEW ROWS that rest closed (CPO D8 + production; V2 HEAD 9829bf1 kit/engine/array.tsx): grip ·
+ * thumb · title + subtitle · validation dot · presence · always-visible ⋯ (Move up/down, Duplicate, Add above/below,
+ * Remove). Opening a row follows ONE rule (CPO D43): ≤3 simple fields expand inline, else it drills in (`openMode`
+ * overrides). Reorder by drag with layout animation; delete with an Undo toast; "Add {noun}" (a type menu when several
+ * item types); min/max honoured.
+ * Arrays of primitives render as a gallery (images), reference chips, or — for text, numbers and URLs — the ITEM LIST
+ * (CPO D47): one input per row, no drill. Arrays of one-field objects (`[{ text }]`) use the same item list. Small
+ * objects with an `included` / `isIncluded` switch get that switch as a check on the row itself.
+ *
+ * Host wiring (RowsHostContext): a drill row calls `drill(path)` (the frame push); without one it falls back to
+ * `form.navigate` while the form draws frames (`form.canNavigate`), else drill rows are inert (no button, no ›).
+ * Dialog items render the host's `NestedForm` (V2 kit-field NestedForm: its own navigation stack); without one the
+ * dialog shows the item's FieldList.
+ *
+ * Kit deviations from V2: sorting is `useDragReorder` (no @dnd-kit in the kit; it keeps dnd-kit's pointer and keyboard
+ * sensor semantics: Space / Enter picks up, arrows move, Space / Enter drops as one write, Escape cancels; the table editor's cross-list drag via
+ * `sortableId` is not ported); toasts come from KitServices (absent → silent); the gallery and reference-chip controls come from
+ * ARRAY_CONTROLS (registered by the controls lane); a host that never registered them edits the raw list (FallbackControl).
+ */
+import * as React from "react";
+import type { ComponentType } from "react";
+import type { FieldPath, FieldSchema } from "../schema/types";
+import type { ControlProps } from "../types";
+import { itemOpenMode, type Preview } from "../lib/schema";
+/** V2 kit-field NestedForm's props: a dialog's own SchemaForm over `fields`, writing into the parent form at `path`. */
+export interface NestedFormProps {
+    fields: FieldSchema[];
+    title: string;
+    icon?: string;
+    path: FieldPath;
+    navRef?: React.Ref<{
+        back: () => boolean;
+    }>;
+}
+export interface RowsHost {
+    /** Push a frame for an item / block path (F7b frames). Default: `form.navigate` while `form.canNavigate`. */
+    drill?: (path: FieldPath) => void;
+    /** Dialog-mode items: V2's NestedForm (own navigation stack). Default: the item's FieldList. */
+    NestedForm?: ComponentType<NestedFormProps>;
+}
+export declare const RowsHostContext: React.Context<RowsHost>;
+/** The frame push for a drill row, or undefined when nothing can draw the frame (the row is then inert). */
+export declare function useDrill(): ((path: FieldPath) => void) | undefined;
+/** Primitive-array controls V2 imports from controls/media (GalleryControl) and controls/reference (ReferencesControl). */
+export declare const ARRAY_CONTROLS: {
+    gallery?: ComponentType<ControlProps>;
+    references?: ComponentType<ControlProps>;
+};
+export declare function ArrayField({ field, path }: {
+    field: FieldSchema;
+    path: FieldPath;
+    parent?: Record<string, unknown>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const rowToggleField: (s?: FieldSchema) => FieldSchema | undefined;
+export interface RowModel {
+    id: string;
+    index: number;
+    item: unknown;
+    preview: Preview;
+    path: FieldPath;
+    chip?: string;
+    extra?: string;
+    /** an included-style switch that is OFF: the title reads muted */
+    dim?: boolean;
+}
+/** Shared list operations (arrays and slots). Remove shows an Undo toast; add can drill into the new item. */
+export declare function useListOps(field: FieldSchema, _path: FieldPath, list: unknown[], write: (next: unknown[]) => void, afterAdd?: (index: number) => void): {
+    atMax: boolean;
+    atMin: boolean;
+    add: (item: unknown, at?: number) => void;
+    duplicate: (i: number) => void;
+    move: (i: number, d: -1 | 1) => void;
+    reorder: (from: number, to: number) => void;
+    remove: (i: number, title: string) => void;
+    insertBlank: (at: number) => void;
+};
+export type ListOps = ReturnType<typeof useListOps>;
+/** The row list used by arrays AND slots. Without `onOpen` the rows are inert (a drill nothing can draw yet). */
+export declare function RowList({ field, rows, readOnly, layout, mode, openId, onOpen, onCloseInline, ops, renderInline, emptyLabel, addButton, leading, rowToggle, dialogNav, menuExtra, }: {
+    dialogNav?: React.RefObject<{
+        back: () => boolean;
+    } | null>;
+    field: FieldSchema;
+    rows: RowModel[];
+    readOnly: boolean;
+    layout: "list" | "grid";
+    mode: ReturnType<typeof itemOpenMode>;
+    openId: string | null;
+    onOpen?: (r: RowModel) => void;
+    onCloseInline: () => void;
+    ops: ListOps;
+    renderInline: (r: RowModel) => React.ReactNode;
+    emptyLabel: string;
+    addButton: React.ReactNode;
+    leading?: (r: RowModel) => React.ReactNode;
+    /** a control BEFORE the title button (never inside it): the included check of feature rows */
+    rowToggle?: (r: RowModel) => React.ReactNode;
+    /** extra items in a row's ⋯ menu, above Remove (a table row's "Move to group") */
+    menuExtra?: (r: RowModel) => React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;