@bettercms-ai/kit 0.1.1 → 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-link.js","names":[],"sources":["../../../src/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/dist/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/dist/controls/table/table.js

@@ -0,0 +1,103 @@
+import { GENERAL_TABLE, emptyTable, isTableValue, normalizeTable } from "../../schema/table.js";
+import { resolveFieldAccess, useForm, useKitEnv } from "../../context.js";
+import { pathKey } from "../../lib/path.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/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/dist/controls/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/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,IAAgB;AACjC,IAAM,cAAc,MAAqB;CACvC,UAAU;CACV,KAAK,SAAS,MAAM,EAAE,CAAC;AACzB;AACA,IAAM,aAAa,OAAmB,KAAK,IAAI,CAAC,SAAS,KAAK,KAAK,OAAO,CAAC;AAC3E,IAAM,eAAe,MAAc,MAAM,qBAAqB,iBAAiB,YAAY,SAAS,KAAK;AACzG,IAAM,aAAa,OAAe,SAAoB,GAAG,MAAM,GAAG,QAAQ,IAAI;;AAG9E,SAAgB,sBAAsB,EAAE,QAAoC;CAC1E,MAAM,MAAM,UAAU;CACtB,OAAO,oBAAC,uBAAD;EAAuB,WAAU;EAAQ,cAAc,WAAW,UAAU,IAAI,OAAO,IAAI,CAAC;CAAI,CAAA;AACzG;AAEA,SAAgB,aAAa,EAAE,OAAO,OAAO,UAAU,UAAU,QAAsB;CACrF,MAAM,MAAM,UAAU;CACtB,MAAM,OAAO,QAAQ;CACrB,MAAM,IAAI,MAAM,cAAe,aAAa,KAAK,IAAI,eAAe,KAAK,IAAI,MAAO,CAAC,KAAK,CAAC;CAE3F,MAAM,WAAW,MAAM,cAAe,aAAa,MAAM,YAAY,IAAI,eAAe,MAAM,YAAY,IAAI,WAAW,GAAI,CAAC,MAAM,YAAY,CAAC;CACjJ,MAAM,MAAM,UAAU,IAAI,OAAO,IAAI;CACrC,MAAM,OAAO,YAAY,GAAG;CAE5B,MAAM,sBAAsB,MAAM,YAAY,OAAO,WAAW,IAAI,IAAI,CAAC,GAAG,CAAC;CAC7E,MAAM,OAAO,MAAM,OAAuB,IAAI;CAC9C,MAAM,MAAM,MAAM,cACT,MAAM,cAAc;EAAE,IAAI;EAAK,UAAU;EAAM,OAAO,MAA0B,MAAc,KAAK,SAAS;GAAC,GAAG;GAAM;GAAM;EAAC,CAAC;CAAE,IAAI,KAAA,GAC3I;EAAC;EAAM;EAAK;CAAI,CAClB;CACA,OACE,oBAAC,OAAD;EAAK,KAAK;EAAM,WAAU;EAAU,oBAAiB;EACnD,UAAA,oBAAC,aAAD;GACE,OAAO,KAAK;GACZ,WAAW,SAAqB,SAAS,YAAY,MAAM,KAAK,CAAC;GACvD;GACV,SAAS,MAAM,SAAS;GACxB,WAAW,IAAI,IAAI,eAAe;GAClC,OAAO,MAAM;GACb,aAAa,IAAI;GACZ;GACL,YAAY;IACV,MAAM;IACN,eAAe,MAAM,WAAW,IAAI,MAAM,IAAI;IAC9C,mBAAmB,KAAK,SAAS,QAAQ,kBAAkB,CAAC,EAAE,cAA2B,4CAA0C,KAAK;GAC1I;EACD,CAAA;CACE,CAAA;AAET;;AAGA,SAAgB,WAAW,EAAE,SAA2B;CACtD,MAAM,OAAO,QAAQ;CACrB,MAAM,MAAM,UAAU;CACtB,MAAM,KAAK,MAAM;CACjB,MAAM,QAAQ,MAAM;CACpB,MAAM,YAAY,GAAG,UAAU,MAAM,GAAG,EAAE;CAC1C,MAAM,MAAM,KAAK,MAAM,SAAS;CAChC,MAAM,WAAW,mBAAmB,OAAO,GAAG,CAAC,CAAC;CAChD,OACE,oBAAC,iBAAD;EACE,MAAM,MAAM,SAAS,aAAa,QAAQ;EAC1C,OAAO,GAAG;EACV,OAAO,eAAe,GAAG;EACzB,WAAW,SAAS,KAAK,MAAM,WAAW,YAAY,MAAM,GAAG,CAAC;EAChE,SAAS,MAAM,SAAS;EACxB,WAAW,IAAI,IAAI,eAAe;EACxB;CACX,CAAA;AAEL"}

package/dist/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 */
+export declare const TEXT_FOCUS = "focus:shadow-none focus-visible: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/dist/controls/text.js

@@ -0,0 +1,322 @@
+import { cn } from "../lib/cn.js";
+import { useForm, useKitEnv, useKitServices } from "../context.js";
+import { Button, IconButton } from "../ui/button.js";
+import { Checkbox } from "../ui/controls.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 { jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconExternalLink, IconMail, IconWorld } from "@tabler/icons-react";
+//#region src/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 */
+var TEXT_FOCUS = "focus:shadow-none focus-visible: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, redirectSlug, saveSlug } = useKitServices();
+	const src = slugSource(parent, env.docTitle);
+	const following = React.useRef(!env.isPublished && (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 = !env.slugIsAddress ? "" : form?.hasPublished ? str(form.publishedAt(path)) : env.isPublished ? str(form?.baselineAt(path) ?? "") : "";
+	const [saving, setSaving] = React.useState(false);
+	const [redirect, setRedirect] = React.useState(true);
+	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 [&_input]: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", {
+				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."
+						] })]
+					}),
+					redirectSlug ? /* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-2 text-kit-fg-2",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							checked: redirect,
+							onCheckedChange: (c) => setRedirect(c === true),
+							nativeButton: true,
+							render: /* @__PURE__ */ jsx("button", { type: "button" })
+						}), "Redirect it to the new address"]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-1.5",
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "xs",
+							variant: "primary",
+							disabled: saving,
+							onClick: async () => {
+								const from = live;
+								const to = v;
+								const redirected = redirect && !!redirectSlug;
+								setSaving(true);
+								try {
+									if (saveSlug) await saveSlug(to);
+								} catch (err) {
+									setSaving(false);
+									toast?.("Couldn't save the new address", { description: errorText(err) });
+									return;
+								}
+								setSaving(false);
+								setConfirmed(to);
+								if (redirected) try {
+									await redirectSlug(from, to);
+								} catch (err) {
+									toast?.("New address saved. The redirect wasn't created", { description: errorText(err) });
+									return;
+								}
+								toast?.success("New address saved", { description: redirected ? `/${from} now redirects to /${to}` : `/${from} will return “Not found”` });
+							},
+							children: "Save 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
+		]
+	});
+}
+/** A host's refusal as one line (an Error's message, else the value itself). */
+var errorText = (err) => err instanceof Error ? err.message : String(err);
+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, slugSource, slugTidy, slugTyping, str };
+
+//# sourceMappingURL=text.js.map

package/dist/controls/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":[],"sources":["../../src/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 { Checkbox } from \"../ui/controls\";\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 */\nexport const TEXT_FOCUS = \"focus:shadow-none focus-visible: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, redirectSlug, saveSlug } = useKitServices();\n  const src = slugSource(parent, env.docTitle);\n  /* Follows the title until someone edits it or the document is published (CPO-087), V2's rule (`!env.isPublished`):\n     a host that passes no isPublished (the dock) follows too, as the help line says. It reacts to a title edit, never\n     to mounting, so opening a form writes nothing. */\n  const following = React.useRef(!env.isPublished && (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     Only where the host says the slug IS the address: a slug prop or a key has no address to break. */\n  const live = !env.slugIsAddress ? \"\" : form?.hasPublished ? str(form.publishedAt(path)) : env.isPublished ? str(form?.baselineAt(path) ?? \"\") : \"\";\n  const [saving, setSaving] = React.useState(false);\n  const [redirect, setRedirect] = React.useState(true);\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 [&_input]: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 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          {/* only where the host files the redirect: the box must not promise one nothing creates */}\n          {redirectSlug ? (\n            <label className=\"flex items-center gap-2 text-kit-fg-2\">\n              <Checkbox checked={redirect} onCheckedChange={(c) => setRedirect(c === true)} nativeButton render={<button type=\"button\" />} />\n              Redirect it to the new address\n            </label>\n          ) : null}\n          <div className=\"flex gap-1.5\">\n            <Button\n              size=\"xs\"\n              variant=\"primary\"\n              disabled={saving}\n              onClick={async () => {\n                const from = live;\n                const to = v;\n                const redirected = redirect && !!redirectSlug;\n                setSaving(true);\n                try {\n                  if (saveSlug) await saveSlug(to);\n                } catch (err) {\n                  setSaving(false);\n                  toast?.(\"Couldn't save the new address\", { description: errorText(err) });\n                  return;\n                }\n                setSaving(false);\n                setConfirmed(to);\n                if (redirected) {\n                  try {\n                    await redirectSlug(from, to);\n                  } catch (err) {\n                    toast?.(\"New address saved. The redirect wasn't created\", { description: errorText(err) });\n                    return;\n                  }\n                }\n                toast?.success(\"New address saved\", { description: redirected ? `/${from} now redirects to /${to}` : `/${from} will return “Not found”` });\n              }}\n            >\n              Save 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/** A host's refusal as one line (an Error's message, else the value itself). */\nconst errorText = (err: unknown) => (err instanceof Error ? err.message : String(err));\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/dist/controls/unknown-value.d.ts

@@ -0,0 +1,17 @@
+export interface UnknownValue {
+    /** what identifies the value to `onRemap` / `onRemove` */
+    key: string;
+    /** what the dock says: the stored value as stored, or its kind and name ("Heading 2 style “h2”") */
+    label: string;
+    /** the declared values it may be changed to; empty = remove only */
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+export declare function UnknownValueNote({ items, onRemap, onRemove, readOnly, }: {
+    items: readonly UnknownValue[];
+    onRemap: (key: string, to: string) => void;
+    onRemove: (key: string) => void;
+    readOnly?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/controls/unknown-value.js

@@ -0,0 +1,66 @@
+import { Button } from "../ui/button.js";
+import { Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger } from "../ui/overlay.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconChevronDown } from "@tabler/icons-react";
+//#region src/controls/unknown-value.tsx
+/**
+* UNKNOWN VALUE — a stored value the field's schema no longer declares (H4).
+*
+* A select option that was renamed or removed, a rich-text style or mark the field's Accept list no longer names: the
+* value is KEPT, by the control and by every save, and said here, with the two ways out a person can take on purpose:
+* change it to a value the field does declare, or remove it. Nothing changes until they pick one. (Sanity empties the
+* select and strips the mark; we never drop a value in silence.)
+*/
+function UnknownValueNote({ items, onRemap, onRemove, readOnly }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "kit-unknown-values",
+		role: "status",
+		className: "flex flex-col gap-1",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex min-h-8 min-w-0 items-center gap-2 rounded-kit-md bg-kit-warning-soft py-1 pl-2.5 pr-1 text-kit-xs text-kit-warning-fg",
+			children: [
+				/* @__PURE__ */ jsx(IconAlertTriangle, {
+					"aria-hidden": true,
+					className: "size-3.5 shrink-0",
+					stroke: 1.5
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: [
+						"Unknown value ",
+						item.label,
+						". Kept as it is."
+					]
+				}),
+				readOnly ? null : /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						rightIcon: /* @__PURE__ */ jsx(IconChevronDown, { stroke: 1.5 }),
+						"aria-label": `Fix unknown value ${item.label}`
+					}),
+					children: "Fix"
+				}), /* @__PURE__ */ jsxs(MenuContent, {
+					align: "end",
+					children: [item.options.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(MenuLabel, { children: "Change to" }),
+						item.options.map((o) => /* @__PURE__ */ jsx(MenuItem, {
+							onClick: () => onRemap(item.key, o.value),
+							children: o.label
+						}, o.value)),
+						/* @__PURE__ */ jsx(MenuSeparator, {})
+					] }) : null, /* @__PURE__ */ jsx(MenuItem, {
+						danger: true,
+						onClick: () => onRemove(item.key),
+						children: "Remove"
+					})]
+				})] })
+			]
+		}, item.key))
+	});
+}
+//#endregion
+export { UnknownValueNote };
+
+//# sourceMappingURL=unknown-value.js.map

package/dist/controls/unknown-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unknown-value.js","names":[],"sources":["../../src/controls/unknown-value.tsx"],"sourcesContent":["/**\n * UNKNOWN VALUE — a stored value the field's schema no longer declares (H4).\n *\n * A select option that was renamed or removed, a rich-text style or mark the field's Accept list no longer names: the\n * value is KEPT, by the control and by every save, and said here, with the two ways out a person can take on purpose:\n * change it to a value the field does declare, or remove it. Nothing changes until they pick one. (Sanity empties the\n * select and strips the mark; we never drop a value in silence.)\n */\nimport { IconAlertTriangle, IconChevronDown } from \"@tabler/icons-react\";\nimport { Button } from \"../ui/button\";\nimport { Menu, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger } from \"../ui/overlay\";\n\nexport interface UnknownValue {\n  /** what identifies the value to `onRemap` / `onRemove` */\n  key: string;\n  /** what the dock says: the stored value as stored, or its kind and name (\"Heading 2 style “h2”\") */\n  label: string;\n  /** the declared values it may be changed to; empty = remove only */\n  options: { value: string; label: string }[];\n}\n\nexport function UnknownValueNote({\n  items,\n  onRemap,\n  onRemove,\n  readOnly,\n}: {\n  items: readonly UnknownValue[];\n  onRemap: (key: string, to: string) => void;\n  onRemove: (key: string) => void;\n  readOnly?: boolean;\n}) {\n  if (items.length === 0) return null;\n  return (\n    <ul data-slot=\"kit-unknown-values\" role=\"status\" className=\"flex flex-col gap-1\">\n      {items.map((item) => (\n        <li key={item.key} className=\"flex min-h-8 min-w-0 items-center gap-2 rounded-kit-md bg-kit-warning-soft py-1 pl-2.5 pr-1 text-kit-xs text-kit-warning-fg\">\n          <IconAlertTriangle aria-hidden className=\"size-3.5 shrink-0\" stroke={1.5} />\n          <span className=\"min-w-0 flex-1 truncate\">Unknown value {item.label}. Kept as it is.</span>\n          {readOnly ? null : (\n            <Menu>\n              <MenuTrigger render={<Button size=\"xs\" variant=\"ghost\" rightIcon={<IconChevronDown stroke={1.5} />} aria-label={`Fix unknown value ${item.label}`} />}>\n                Fix\n              </MenuTrigger>\n              <MenuContent align=\"end\">\n                {item.options.length ? (\n                  <>\n                    <MenuLabel>Change to</MenuLabel>\n                    {item.options.map((o) => (\n                      <MenuItem key={o.value} onClick={() => onRemap(item.key, o.value)}>\n                        {o.label}\n                      </MenuItem>\n                    ))}\n                    <MenuSeparator />\n                  </>\n                ) : null}\n                <MenuItem danger onClick={() => onRemove(item.key)}>\n                  Remove\n                </MenuItem>\n              </MenuContent>\n            </Menu>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,iBAAiB,EAC/B,OACA,SACA,UACA,YAMC;CACD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,OACE,oBAAC,MAAD;EAAI,aAAU;EAAqB,MAAK;EAAS,WAAU;EACxD,UAAA,MAAM,KAAK,SACV,qBAAC,MAAD;GAAmB,WAAU;GAA7B,UAAA;IACE,oBAAC,mBAAD;KAAmB,eAAA;KAAY,WAAU;KAAoB,QAAQ;IAAM,CAAA;IAC3E,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAA0C;MAAe,KAAK;MAAM;KAAsB;;IACzF,WAAW,OACV,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,aAAD;KAAa,QAAQ,oBAAC,QAAD;MAAQ,MAAK;MAAK,SAAQ;MAAQ,WAAW,oBAAC,iBAAD,EAAiB,QAAQ,IAAM,CAAA;MAAG,cAAY,qBAAqB,KAAK;KAAU,CAAA;KAAG,UAAA;IAE1I,CAAA,GACb,qBAAC,aAAD;KAAa,OAAM;KAAnB,UAAA,CACG,KAAK,QAAQ,SACZ,qBAAA,UAAA,EAAA,UAAA;MACE,oBAAC,WAAD,EAAA,UAAW,YAAoB,CAAA;MAC9B,KAAK,QAAQ,KAAK,MACjB,oBAAC,UAAD;OAAwB,eAAe,QAAQ,KAAK,KAAK,EAAE,KAAK;OAC7D,UAAA,EAAE;MACK,GAFK,EAAE,KAEP,CACX;MACD,oBAAC,eAAD,CAAgB,CAAA;KAChB,EAAA,CAAA,IACA,MACJ,oBAAC,UAAD;MAAU,QAAA;MAAO,eAAe,SAAS,KAAK,GAAG;MAAG,UAAA;KAE1C,CAAA,CACC;IACT,CAAA,CAAA,EAAA,CAAA;GAEN;EA1BK,GAAA,KAAK,GA0BV,CACL;CACC,CAAA;AAER"}