@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/controls/date.js

@@ -0,0 +1,466 @@
+import { cn } from "../lib/cn.js";
+import { useKitEnv } from "../context.js";
+import { Button } from "../ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger, Tooltip } from "../ui/overlay.js";
+import { Select } from "../ui/select.js";
+import { ALL_ZONES, browserZone, parseStored, resolveShown, todayIn, useDefaultZone, validZone, wallInstant, writeValue, zoneCity, zoneLabel, zonePolicy, zoneShortOffset } from "./date-zone.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconClock, IconLock, IconWorld } from "@tabler/icons-react";
+//#region src/controls/date.tsx
+/**
+* DATE / DATETIME — one picker for date, time and time zone (DESIGN 8.9, CPO D43). V2 controls/date.tsx, with the
+* stored shapes prod keeps (date-zone.ts header) and a calendar you can drive from the keyboard:
+*
+*   arrows move a day / a week · Home / End go to the week's start / end · Page Up / Down move a month (Shift: a year)
+*   Enter or Space picks · the calendar is one tab stop (the picked day, else today, else the 1st)
+*
+* A value this picker cannot read (an object, a word) is shown with its reason and never overwritten by a stray
+* click. A wall time a clock change skips is refused with the reason, not shifted.
+*/
+var pad = (n) => String(n).padStart(2, "0");
+var toUtc = (ymd) => {
+	const [y, m, d] = ymd.split("-").map(Number);
+	return new Date(Date.UTC(y, m - 1, d));
+};
+var fromUtc = (d) => `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
+var addDays = (ymd, n) => {
+	const d = toUtc(ymd);
+	d.setUTCDate(d.getUTCDate() + n);
+	return fromUtc(d);
+};
+var addMonths = (ymd, n) => {
+	const d = toUtc(ymd);
+	const day = d.getUTCDate();
+	const t = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + n, 1));
+	const last = new Date(Date.UTC(t.getUTCFullYear(), t.getUTCMonth() + 1, 0)).getUTCDate();
+	t.setUTCDate(Math.min(day, last));
+	return fromUtc(t);
+};
+var monthOf = (ymd) => ymd.slice(0, 7);
+var fmt = (ymd, o) => toUtc(ymd).toLocaleDateString("en-US", {
+	...o,
+	timeZone: "UTC"
+});
+var fmtTime = (hm) => {
+	const [h, m] = hm.split(":").map(Number);
+	return new Date(Date.UTC(2e3, 0, 1, h, m)).toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit",
+		timeZone: "UTC"
+	});
+};
+var WD = [
+	"Mo",
+	"Tu",
+	"We",
+	"Th",
+	"Fr",
+	"Sa",
+	"Su"
+];
+function MiniCalendar({ value, today, onSelect }) {
+	const [view, setView] = React.useState(() => `${monthOf(value ?? today)}-01`);
+	const [cursor, setCursor] = React.useState(value ?? today);
+	const grid = React.useRef(null);
+	const refocus = React.useRef(false);
+	const viewMonth = monthOf(view);
+	const stop = [
+		cursor,
+		value,
+		today
+	].find((d) => d && monthOf(d) === viewMonth) ?? view;
+	const lead = (toUtc(view).getUTCDay() + 6) % 7;
+	const cells = Array.from({ length: 42 }, (_, i) => addDays(view, i - lead));
+	React.useEffect(() => {
+		if (!refocus.current) return;
+		refocus.current = false;
+		grid.current?.querySelector(`[data-day="${cursor}"]`)?.focus();
+	}, [cursor, view]);
+	const go = (ymd) => {
+		refocus.current = true;
+		setCursor(ymd);
+		if (monthOf(ymd) !== viewMonth) setView(`${monthOf(ymd)}-01`);
+	};
+	const onKeyDown = (e) => {
+		const from = e.target.dataset.day;
+		if (!from) return;
+		const dow = (toUtc(from).getUTCDay() + 6) % 7;
+		const to = {
+			ArrowLeft: () => addDays(from, -1),
+			ArrowRight: () => addDays(from, 1),
+			ArrowUp: () => addDays(from, -7),
+			ArrowDown: () => addDays(from, 7),
+			Home: () => addDays(from, -dow),
+			End: () => addDays(from, 6 - dow),
+			PageUp: () => addMonths(from, e.shiftKey ? -12 : -1),
+			PageDown: () => addMonths(from, e.shiftKey ? 12 : 1)
+		}[e.key];
+		if (!to) return;
+		e.preventDefault();
+		go(to());
+	};
+	const page = (n) => {
+		const next = addMonths(view, n);
+		setView(next);
+		setCursor(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-[248px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Previous month",
+					onClick: () => page(-1),
+					className: "flex size-7 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover",
+					children: /* @__PURE__ */ jsx(IconChevronLeft, {
+						className: "size-4",
+						stroke: 1.5
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg",
+					"aria-live": "polite",
+					children: fmt(view, {
+						month: "long",
+						year: "numeric"
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Next month",
+					onClick: () => page(1),
+					className: "flex size-7 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover",
+					children: /* @__PURE__ */ jsx(IconChevronRight, {
+						className: "size-4",
+						stroke: 1.5
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: grid,
+			role: "group",
+			"aria-label": fmt(view, {
+				month: "long",
+				year: "numeric"
+			}),
+			className: "grid grid-cols-7 gap-0.5 text-center",
+			onKeyDown,
+			children: [WD.map((d) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pb-1 text-kit-2xs text-kit-fg-3",
+				children: d
+			}, d)), cells.map((d) => {
+				const out = monthOf(d) !== viewMonth;
+				const sel = d === value;
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-day": d,
+					tabIndex: d === stop ? 0 : -1,
+					onClick: () => {
+						setCursor(d);
+						onSelect(d);
+					},
+					"aria-pressed": sel,
+					"aria-current": d === today ? "date" : void 0,
+					"aria-label": fmt(d, {
+						weekday: "long",
+						month: "long",
+						day: "numeric",
+						year: "numeric"
+					}),
+					className: cn("tabular-nums flex size-8 items-center justify-center rounded-kit-md text-kit-sm transition-colors", sel ? "bg-kit-inverse font-medium text-kit-fg-inverse" : out ? "text-kit-fg-4 hover:bg-kit-hover" : "text-kit-fg hover:bg-kit-hover", !sel && d === today && "ring-1 ring-inset ring-kit-line-strong"),
+					children: Number(d.slice(8))
+				}, d);
+			})]
+		})]
+	});
+}
+/** One searchable list: Suggested (the default zone, your zone, the value's zone) first, then every IANA zone by region. */
+function zoneOptions(current, def, at) {
+	const suggested = [];
+	const seen = /* @__PURE__ */ new Set();
+	const option = (z, group, description) => ({
+		value: z,
+		label: zoneLabel(z, at),
+		description,
+		group,
+		keywords: [
+			z,
+			zoneCity(z),
+			zoneShortOffset(z, at),
+			...description ? [description] : []
+		]
+	});
+	const push = (z, note) => {
+		if (seen.has(z) || !validZone(z)) return;
+		seen.add(z);
+		suggested.push(option(z, "Suggested", note));
+	};
+	push(def.zone, def.source === "site" ? "Site time zone" : "Your time zone");
+	push(browserZone(), "Your time zone");
+	push(current, "Current");
+	return [...suggested, ...ALL_ZONES.filter((z) => !seen.has(z)).map((z) => option(z, z.includes("/") ? z.split("/")[0] : "Other"))];
+}
+function ZoneSelect({ zone, def, at, disabled, onPick }) {
+	const options = React.useMemo(() => zoneOptions(zone, def, at), [
+		zone,
+		def,
+		at
+	]);
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": "Time zone",
+		size: "md",
+		className: "min-w-0 flex-1",
+		searchable: true,
+		searchPlaceholder: "Search city, region or offset",
+		menuClassName: "w-[300px]",
+		value: zone,
+		onValueChange: onPick,
+		options,
+		disabled
+	});
+}
+function DateControl({ field, value, onChange, readOnly, id, invalid }) {
+	const { variant } = useKitEnv();
+	const withTime = field.type === "datetime";
+	const policy = zonePolicy(field);
+	const def = useDefaultZone();
+	const [picked, setPicked] = React.useState();
+	const [open, setOpen] = React.useState(false);
+	const [problem, setProblem] = React.useState(null);
+	const parsed = React.useMemo(() => parseStored(value), [value]);
+	const { wall, zone } = React.useMemo(() => resolveShown(parsed, policy.mode, {
+		fixed: policy.zone,
+		def: def.zone,
+		picked
+	}), [
+		parsed,
+		policy.mode,
+		policy.zone,
+		def.zone,
+		picked
+	]);
+	const zoned = policy.mode !== "none";
+	const time = wall?.time ?? "09:00";
+	const today = todayIn(zoned ? zone : void 0);
+	const at = React.useMemo(() => wall ? wallInstant(zone, wall) : /* @__PURE__ */ new Date(), [wall, zone]);
+	if (!parsed.readable) return /* @__PURE__ */ jsx(Unreadable, {
+		id,
+		title: field.title,
+		value
+	});
+	const commit = (next, z = zone) => {
+		const r = writeValue({
+			withTime,
+			mode: policy.mode,
+			wall: next,
+			zone: z
+		});
+		if (!r.ok) {
+			setProblem(r.reason);
+			return false;
+		}
+		setProblem(null);
+		onChange(r.value);
+		return true;
+	};
+	const pickDay = (ymd) => {
+		if (commit({
+			ymd,
+			time
+		}) && !withTime) setOpen(false);
+	};
+	const timeText = withTime && wall ? fmtTime(wall.time) : "";
+	const showZone = zoned && withTime;
+	const full = wall ? `${fmt(wall.ymd, {
+		weekday: "long",
+		month: "long",
+		day: "numeric",
+		year: "numeric"
+	})}${timeText ? ` at ${timeText}` : ""}${showZone ? ` (${zoneLabel(zone, at)})` : ""}` : "";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (o) => {
+			setOpen(o);
+			if (!o) setProblem(null);
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				id,
+				type: "button",
+				disabled: readOnly,
+				"aria-invalid": invalid || void 0,
+				"aria-label": wall ? `${field.title}: ${full}. Change` : `${field.title}: pick a date`,
+				className: cn("@container/date flex w-full min-w-0 items-center gap-2 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg shadow-kit-field transition-colors hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus", variant === "document" ? "h-9" : "h-8", invalid && "border-[var(--kit-field-invalid)]")
+			}),
+			children: [
+				/* @__PURE__ */ jsx(IconCalendar, {
+					className: "size-4 shrink-0 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				}),
+				wall ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 items-baseline gap-1.5 whitespace-nowrap",
+					"data-slot": "date-text",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "shrink-0",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "hidden @[260px]/date:inline",
+								children: [fmt(wall.ymd, { weekday: "short" }), ", "]
+							}),
+							fmt(wall.ymd, {
+								month: "short",
+								day: "numeric",
+								year: "numeric"
+							}),
+							timeText ? /* @__PURE__ */ jsxs("span", {
+								className: "text-kit-fg-2",
+								children: [" · ", timeText]
+							}) : null
+						]
+					}), showZone ? /* @__PURE__ */ jsx("span", {
+						className: "hidden min-w-0 truncate text-kit-xs text-kit-fg-3 @[200px]/date:inline",
+						children: zoneShortOffset(zone, at)
+					}) : null]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-kit-fg-3",
+					children: withTime ? "Pick a date and time" : "Pick a date"
+				}),
+				/* @__PURE__ */ jsx(IconChevronDown, {
+					className: "size-3.5 shrink-0 text-kit-fg-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto",
+			"aria-label": withTime ? `${field.title}: date and time` : `${field.title}: date`,
+			children: [
+				/* @__PURE__ */ jsx(MiniCalendar, {
+					value: wall?.ymd ?? null,
+					today,
+					onSelect: pickDay
+				}),
+				withTime ? /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex w-[248px] flex-col gap-2 border-t border-kit-line pt-3",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(IconClock, {
+								className: "size-4 shrink-0 text-kit-fg-3",
+								stroke: 1.5,
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Time"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "time",
+								value: time,
+								onChange: (e) => e.target.value && commit({
+									ymd: wall?.ymd ?? today,
+									time: e.target.value
+								}),
+								className: "h-8 min-w-0 flex-1 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2 text-kit-sm text-kit-fg outline-none hover:border-kit-field-border-hover focus:border-kit-field-border-focus",
+								"aria-label": "Time"
+							})
+						]
+					}), zoned ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(IconWorld, {
+							className: "size-4 shrink-0 text-kit-fg-3",
+							stroke: 1.5,
+							"aria-hidden": true
+						}), policy.mode === "pick" ? /* @__PURE__ */ jsx(ZoneSelect, {
+							zone,
+							def,
+							at,
+							disabled: !wall,
+							onPick: (z) => {
+								if (!wall) return;
+								if (commit(wall, z)) setPicked(z);
+							}
+						}) : /* @__PURE__ */ jsx(Tooltip, {
+							content: policy.mode === "site" ? "Uses the site's time zone (Site settings › General)." : "Set by the developer for this field.",
+							children: /* @__PURE__ */ jsxs("span", {
+								tabIndex: 0,
+								className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-kit-md bg-kit-subtle px-2 text-kit-sm text-kit-fg-2 outline-none",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: zoneLabel(zone, at)
+								}), /* @__PURE__ */ jsx(IconLock, {
+									className: "size-3.5 shrink-0 text-kit-fg-3",
+									stroke: 1.5,
+									role: "img",
+									"aria-label": policy.mode === "site" ? "Site time zone" : "Fixed time zone"
+								})]
+							})
+						})]
+					}) : null]
+				}) : null,
+				problem ? /* @__PURE__ */ jsxs("p", {
+					role: "alert",
+					className: "mt-2 flex w-[248px] items-start gap-1.5 text-kit-xs text-kit-danger-fg",
+					children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						stroke: 1.5,
+						"aria-hidden": true
+					}), problem]
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-2 flex justify-between",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => pickDay(today),
+						children: "Today"
+					}), wall ? /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						variant: "ghost",
+						onClick: () => {
+							onChange(null);
+							setProblem(null);
+							setOpen(false);
+						},
+						children: "Clear"
+					}) : null]
+				})
+			]
+		})]
+	});
+}
+/** A stored value this picker cannot read: shown with the reason, kept as it is, never replaced by a stray pick. */
+function Unreadable({ id, title, value }) {
+	const raw = typeof value === "string" ? value : JSON.stringify(value);
+	return /* @__PURE__ */ jsxs("output", {
+		id,
+		tabIndex: 0,
+		"data-slot": "date-unreadable",
+		className: "flex min-w-0 items-start gap-2 rounded-kit-md border border-dashed border-kit-line-strong bg-kit-subtle px-2.5 py-2 text-kit-xs text-kit-fg-2 outline-none focus-visible:outline-2 focus-visible:outline-kit-focus-ring",
+		children: [/* @__PURE__ */ jsx(IconAlertTriangle, {
+			className: "mt-0.5 size-3.5 shrink-0 text-kit-warning-fg",
+			stroke: 1.5,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0",
+			children: [
+				title,
+				" holds a value this picker can't read, so it is kept as it is:",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "break-all font-kit-mono text-kit-fg",
+					children: raw
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { DateControl, MiniCalendar };
+
+//# sourceMappingURL=date.js.map

package/dist/controls/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","names":[],"sources":["../../src/controls/date.tsx"],"sourcesContent":["/**\n * DATE / DATETIME — one picker for date, time and time zone (DESIGN 8.9, CPO D43). V2 controls/date.tsx, with the\n * stored shapes prod keeps (date-zone.ts header) and a calendar you can drive from the keyboard:\n *\n *   arrows move a day / a week · Home / End go to the week's start / end · Page Up / Down move a month (Shift: a year)\n *   Enter or Space picks · the calendar is one tab stop (the picked day, else today, else the 1st)\n *\n * A value this picker cannot read (an object, a word) is shown with its reason and never overwritten by a stray\n * click. A wall time a clock change skips is refused with the reason, not shifted.\n */\nimport * as React from \"react\";\nimport { IconAlertTriangle, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconClock, IconLock, IconWorld } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitEnv } from \"../context\";\nimport type { ControlProps } from \"../types\";\nimport { Button } from \"../ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger, Tooltip } from \"../ui/overlay\";\nimport { Select, type SelectOption } from \"../ui/select\";\nimport {\n  ALL_ZONES, browserZone, parseStored, resolveShown, todayIn, useDefaultZone, validZone, wallInstant, writeValue, zoneCity, zoneLabel,\n  zonePolicy, zoneShortOffset, type Wall,\n} from \"./date-zone\";\n\n/* ── Day arithmetic on \"YYYY-MM-DD\" (UTC, so no local zone leaks in) ──── */\nconst pad = (n: number) => String(n).padStart(2, \"0\");\nconst toUtc = (ymd: string) => {\n  const [y, m, d] = ymd.split(\"-\").map(Number);\n  return new Date(Date.UTC(y, m - 1, d));\n};\nconst fromUtc = (d: Date) => `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;\nconst addDays = (ymd: string, n: number) => {\n  const d = toUtc(ymd);\n  d.setUTCDate(d.getUTCDate() + n);\n  return fromUtc(d);\n};\nconst addMonths = (ymd: string, n: number) => {\n  const d = toUtc(ymd);\n  const day = d.getUTCDate();\n  const t = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + n, 1));\n  const last = new Date(Date.UTC(t.getUTCFullYear(), t.getUTCMonth() + 1, 0)).getUTCDate();\n  t.setUTCDate(Math.min(day, last));\n  return fromUtc(t);\n};\nconst monthOf = (ymd: string) => ymd.slice(0, 7);\nconst fmt = (ymd: string, o: Intl.DateTimeFormatOptions) => toUtc(ymd).toLocaleDateString(\"en-US\", { ...o, timeZone: \"UTC\" });\nconst fmtTime = (hm: string) => {\n  const [h, m] = hm.split(\":\").map(Number);\n  return new Date(Date.UTC(2000, 0, 1, h, m)).toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\", timeZone: \"UTC\" });\n};\n\n/* ── Calendar ─────────────────────────────────────────────────────────── */\nconst WD = [\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"];\nexport function MiniCalendar({ value, today, onSelect }: { value: string | null; today: string; onSelect: (ymd: string) => void }) {\n  const [view, setView] = React.useState(() => `${monthOf(value ?? today)}-01`);\n  const [cursor, setCursor] = React.useState<string>(value ?? today);\n  const grid = React.useRef<HTMLDivElement>(null);\n  const refocus = React.useRef(false);\n  const viewMonth = monthOf(view);\n  /* the one tab stop: the cursor when it is in view, else the picked day, today, or the 1st */\n  const stop = [cursor, value, today].find((d) => d && monthOf(d) === viewMonth) ?? view;\n  const lead = (toUtc(view).getUTCDay() + 6) % 7;\n  const cells = Array.from({ length: 42 }, (_, i) => addDays(view, i - lead));\n\n  React.useEffect(() => {\n    if (!refocus.current) return;\n    refocus.current = false;\n    grid.current?.querySelector<HTMLButtonElement>(`[data-day=\"${cursor}\"]`)?.focus();\n  }, [cursor, view]);\n\n  const go = (ymd: string) => {\n    refocus.current = true;\n    setCursor(ymd);\n    if (monthOf(ymd) !== viewMonth) setView(`${monthOf(ymd)}-01`);\n  };\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const from = (e.target as HTMLElement).dataset.day;\n    if (!from) return;\n    const dow = (toUtc(from).getUTCDay() + 6) % 7;\n    const to = ({\n      ArrowLeft: () => addDays(from, -1),\n      ArrowRight: () => addDays(from, 1),\n      ArrowUp: () => addDays(from, -7),\n      ArrowDown: () => addDays(from, 7),\n      Home: () => addDays(from, -dow),\n      End: () => addDays(from, 6 - dow),\n      PageUp: () => addMonths(from, e.shiftKey ? -12 : -1),\n      PageDown: () => addMonths(from, e.shiftKey ? 12 : 1),\n    } as Record<string, () => string>)[e.key];\n    if (!to) return;\n    e.preventDefault();\n    go(to());\n  };\n  const page = (n: number) => {\n    const next = addMonths(view, n);\n    setView(next);\n    setCursor(next);\n  };\n\n  return (\n    <div className=\"w-[248px]\">\n      <div className=\"mb-2 flex items-center justify-between\">\n        <button type=\"button\" aria-label=\"Previous month\" onClick={() => page(-1)} className=\"flex size-7 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover\">\n          <IconChevronLeft className=\"size-4\" stroke={1.5} />\n        </button>\n        <span className=\"text-kit-sm font-medium text-kit-fg\" aria-live=\"polite\">{fmt(view, { month: \"long\", year: \"numeric\" })}</span>\n        <button type=\"button\" aria-label=\"Next month\" onClick={() => page(1)} className=\"flex size-7 items-center justify-center rounded-kit-md text-kit-fg-2 hover:bg-kit-hover\">\n          <IconChevronRight className=\"size-4\" stroke={1.5} />\n        </button>\n      </div>\n      <div ref={grid} role=\"group\" aria-label={fmt(view, { month: \"long\", year: \"numeric\" })} className=\"grid grid-cols-7 gap-0.5 text-center\" onKeyDown={onKeyDown}>\n        {WD.map((d) => (\n          <span key={d} aria-hidden className=\"pb-1 text-kit-2xs text-kit-fg-3\">{d}</span>\n        ))}\n        {cells.map((d) => {\n          const out = monthOf(d) !== viewMonth;\n          const sel = d === value;\n          return (\n            <button\n              key={d}\n              type=\"button\"\n              data-day={d}\n              tabIndex={d === stop ? 0 : -1}\n              onClick={() => {\n                setCursor(d);\n                onSelect(d);\n              }}\n              aria-pressed={sel}\n              aria-current={d === today ? \"date\" : undefined}\n              aria-label={fmt(d, { weekday: \"long\", month: \"long\", day: \"numeric\", year: \"numeric\" })}\n              className={cn(\n                \"tabular-nums flex size-8 items-center justify-center rounded-kit-md text-kit-sm transition-colors\",\n                sel ? \"bg-kit-inverse font-medium text-kit-fg-inverse\" : out ? \"text-kit-fg-4 hover:bg-kit-hover\" : \"text-kit-fg hover:bg-kit-hover\",\n                !sel && d === today && \"ring-1 ring-inset ring-kit-line-strong\",\n              )}\n            >\n              {Number(d.slice(8))}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/* ── Zone list ────────────────────────────────────────────────────────── */\n/** One searchable list: Suggested (the default zone, your zone, the value's zone) first, then every IANA zone by region. */\nfunction zoneOptions(current: string, def: { zone: string; source: string }, at: Date): SelectOption[] {\n  const suggested: SelectOption[] = [];\n  const seen = new Set<string>();\n  const option = (z: string, group: string, description?: string): SelectOption => ({\n    value: z,\n    label: zoneLabel(z, at),\n    description,\n    group,\n    keywords: [z, zoneCity(z), zoneShortOffset(z, at), ...(description ? [description] : [])],\n  });\n  const push = (z: string, note: string) => {\n    if (seen.has(z) || !validZone(z)) return;\n    seen.add(z);\n    suggested.push(option(z, \"Suggested\", note));\n  };\n  push(def.zone, def.source === \"site\" ? \"Site time zone\" : \"Your time zone\");\n  push(browserZone(), \"Your time zone\");\n  push(current, \"Current\");\n  return [...suggested, ...ALL_ZONES.filter((z) => !seen.has(z)).map((z) => option(z, z.includes(\"/\") ? z.split(\"/\")[0] : \"Other\"))];\n}\n\nfunction ZoneSelect({ zone, def, at, disabled, onPick }: { zone: string; def: { zone: string; source: string }; at: Date; disabled: boolean; onPick: (z: string) => void }) {\n  const options = React.useMemo(() => zoneOptions(zone, def, at), [zone, def, at]);\n  return (\n    <Select\n      aria-label=\"Time zone\"\n      size=\"md\"\n      className=\"min-w-0 flex-1\"\n      searchable\n      searchPlaceholder=\"Search city, region or offset\"\n      menuClassName=\"w-[300px]\"\n      value={zone}\n      onValueChange={onPick}\n      options={options}\n      disabled={disabled}\n    />\n  );\n}\n\n/* ── The control ──────────────────────────────────────────────────────── */\nexport function DateControl({ field, value, onChange, readOnly, id, invalid }: ControlProps) {\n  const { variant } = useKitEnv();\n  const withTime = field.type === \"datetime\";\n  const policy = zonePolicy(field);\n  const def = useDefaultZone();\n  const [picked, setPicked] = React.useState<string>();\n  const [open, setOpen] = React.useState(false);\n  const [problem, setProblem] = React.useState<string | null>(null);\n  const parsed = React.useMemo(() => parseStored(value), [value]);\n  const { wall, zone } = React.useMemo(() => resolveShown(parsed, policy.mode, { fixed: policy.zone, def: def.zone, picked }), [parsed, policy.mode, policy.zone, def.zone, picked]);\n  const zoned = policy.mode !== \"none\";\n  const time = wall?.time ?? \"09:00\";\n  const today = todayIn(zoned ? zone : undefined);\n  const at = React.useMemo(() => (wall ? wallInstant(zone, wall) : new Date()), [wall, zone]);\n\n  if (!parsed.readable) return <Unreadable id={id} title={field.title} value={value} />;\n\n  const commit = (next: Wall, z = zone) => {\n    const r = writeValue({ withTime, mode: policy.mode, wall: next, zone: z });\n    if (!r.ok) {\n      setProblem(r.reason);\n      return false;\n    }\n    setProblem(null);\n    onChange(r.value);\n    return true;\n  };\n  const pickDay = (ymd: string) => {\n    if (commit({ ymd, time }) && !withTime) setOpen(false);\n  };\n\n  const timeText = withTime && wall ? fmtTime(wall.time) : \"\";\n  const showZone = zoned && withTime;\n  const full = wall ? `${fmt(wall.ymd, { weekday: \"long\", month: \"long\", day: \"numeric\", year: \"numeric\" })}${timeText ? ` at ${timeText}` : \"\"}${showZone ? ` (${zoneLabel(zone, at)})` : \"\"}` : \"\";\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(o) => {\n        setOpen(o);\n        if (!o) setProblem(null);\n      }}\n    >\n      <PopoverTrigger\n        render={\n          <button\n            id={id}\n            type=\"button\"\n            disabled={readOnly}\n            aria-invalid={invalid || undefined}\n            aria-label={wall ? `${field.title}: ${full}. Change` : `${field.title}: pick a date`}\n            className={cn(\n              \"@container/date flex w-full min-w-0 items-center gap-2 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg shadow-kit-field transition-colors hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus\",\n              variant === \"document\" ? \"h-9\" : \"h-8\",\n              invalid && \"border-[var(--kit-field-invalid)]\",\n            )}\n          />\n        }\n      >\n        <IconCalendar className=\"size-4 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n        {wall ? (\n          /* never truncate the date itself: drop the weekday first, then the zone (it stays in the label and popover) */\n          <span className=\"flex min-w-0 flex-1 items-baseline gap-1.5 whitespace-nowrap\" data-slot=\"date-text\">\n            <span className=\"shrink-0\">\n              <span className=\"hidden @[260px]/date:inline\">{fmt(wall.ymd, { weekday: \"short\" })}, </span>\n              {fmt(wall.ymd, { month: \"short\", day: \"numeric\", year: \"numeric\" })}\n              {timeText ? <span className=\"text-kit-fg-2\"> · {timeText}</span> : null}\n            </span>\n            {showZone ? <span className=\"hidden min-w-0 truncate text-kit-xs text-kit-fg-3 @[200px]/date:inline\">{zoneShortOffset(zone, at)}</span> : null}\n          </span>\n        ) : (\n          <span className=\"min-w-0 flex-1 truncate text-kit-fg-3\">{withTime ? \"Pick a date and time\" : \"Pick a date\"}</span>\n        )}\n        <IconChevronDown className=\"size-3.5 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto\" aria-label={withTime ? `${field.title}: date and time` : `${field.title}: date`}>\n        <MiniCalendar value={wall?.ymd ?? null} today={today} onSelect={pickDay} />\n        {withTime ? (\n          <div className=\"mt-3 flex w-[248px] flex-col gap-2 border-t border-kit-line pt-3\">\n            <label className=\"flex items-center gap-2\">\n              <IconClock className=\"size-4 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n              <span className=\"sr-only\">Time</span>\n              <input\n                type=\"time\"\n                value={time}\n                onChange={(e) => e.target.value && commit({ ymd: wall?.ymd ?? today, time: e.target.value })}\n                className=\"h-8 min-w-0 flex-1 rounded-kit-md border border-kit-field-border bg-kit-field-bg px-2 text-kit-sm text-kit-fg outline-none hover:border-kit-field-border-hover focus:border-kit-field-border-focus\"\n                aria-label=\"Time\"\n              />\n            </label>\n            {zoned ? (\n              <div className=\"flex items-center gap-2\">\n                <IconWorld className=\"size-4 shrink-0 text-kit-fg-3\" stroke={1.5} aria-hidden />\n                {policy.mode === \"pick\" ? (\n                  <ZoneSelect\n                    zone={zone}\n                    def={def}\n                    at={at}\n                    disabled={!wall}\n                    onPick={(z) => {\n                      if (!wall) return;\n                      // keep the wall time the author typed; the instant moves with the zone (6.4)\n                      if (commit(wall, z)) setPicked(z);\n                    }}\n                  />\n                ) : (\n                  <Tooltip content={policy.mode === \"site\" ? \"Uses the site's time zone (Site settings › General).\" : \"Set by the developer for this field.\"}>\n                    <span tabIndex={0} className=\"flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-kit-md bg-kit-subtle px-2 text-kit-sm text-kit-fg-2 outline-none\">\n                      <span className=\"min-w-0 flex-1 truncate\">{zoneLabel(zone, at)}</span>\n                      <IconLock className=\"size-3.5 shrink-0 text-kit-fg-3\" stroke={1.5} role=\"img\" aria-label={policy.mode === \"site\" ? \"Site time zone\" : \"Fixed time zone\"} />\n                    </span>\n                  </Tooltip>\n                )}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {problem ? (\n          <p role=\"alert\" className=\"mt-2 flex w-[248px] items-start gap-1.5 text-kit-xs text-kit-danger-fg\">\n            <IconAlertTriangle className=\"mt-0.5 size-3.5 shrink-0\" stroke={1.5} aria-hidden />\n            {problem}\n          </p>\n        ) : null}\n        <div className=\"mt-2 flex justify-between\">\n          <Button size=\"xs\" variant=\"ghost\" onClick={() => pickDay(today)}>\n            Today\n          </Button>\n          {wall ? (\n            <Button\n              size=\"xs\"\n              variant=\"ghost\"\n              onClick={() => {\n                // null, not \"\": the backend skips an empty value but refuses \"\" as \"not a valid date\"\n                onChange(null);\n                setProblem(null);\n                setOpen(false);\n              }}\n            >\n              Clear\n            </Button>\n          ) : null}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n/** A stored value this picker cannot read: shown with the reason, kept as it is, never replaced by a stray pick. */\nfunction Unreadable({ id, title, value }: { id: string; title: string; value: unknown }) {\n  const raw = typeof value === \"string\" ? value : JSON.stringify(value);\n  return (\n    <output\n      id={id}\n      tabIndex={0}\n      data-slot=\"date-unreadable\"\n      className=\"flex min-w-0 items-start gap-2 rounded-kit-md border border-dashed border-kit-line-strong bg-kit-subtle px-2.5 py-2 text-kit-xs text-kit-fg-2 outline-none focus-visible:outline-2 focus-visible:outline-kit-focus-ring\"\n    >\n      <IconAlertTriangle className=\"mt-0.5 size-3.5 shrink-0 text-kit-warning-fg\" stroke={1.5} aria-hidden />\n      <span className=\"min-w-0\">\n        {title} holds a value this picker can't read, so it is kept as it is:{\" \"}\n        <span className=\"break-all font-kit-mono text-kit-fg\">{raw}</span>\n      </span>\n    </output>\n  );\n}\n"],"mappings":"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"}

package/dist/controls/form-picker-register.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/controls/form-picker-register.js

@@ -0,0 +1,19 @@
+import { useKitServices } from "../context.js";
+import { CONTROLS } from "../engine/kit-field.js";
+import { ReferenceControl } from "./reference.js";
+import { FormPickerControl, isFormOnly } from "./form-picker.js";
+import { createElement } from "react";
+//#region src/controls/form-picker-register.ts
+/**
+* Lane L3: a reference to forms only (`reference: { to: ["form"] }`, a component's `form` prop) draws the form picker
+* when the host provides the project's forms; any other reference keeps the reference control. Imported after
+* reference-register (kit barrel), so it wraps the registered reference control.
+*/
+var Reference = CONTROLS.reference ?? ReferenceControl;
+CONTROLS.reference = function ReferenceOrFormControl(props) {
+	const { forms, useFormOptions } = useKitServices();
+	return createElement(isFormOnly(props.field) && (forms || useFormOptions) ? FormPickerControl : Reference, props);
+};
+//#endregion
+
+//# sourceMappingURL=form-picker-register.js.map

package/dist/controls/form-picker-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-picker-register.js","names":[],"sources":["../../src/controls/form-picker-register.ts"],"sourcesContent":["/**\n * Lane L3: a reference to forms only (`reference: { to: [\"form\"] }`, a component's `form` prop) draws the form picker\n * when the host provides the project's forms; any other reference keeps the reference control. Imported after\n * reference-register (kit barrel), so it wraps the registered reference control.\n */\nimport { createElement } from \"react\";\nimport type { ControlProps } from \"../types\";\nimport { useKitServices } from \"../context\";\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { ReferenceControl } from \"./reference\";\nimport { FormPickerControl, isFormOnly } from \"./form-picker\";\n\nconst Reference = CONTROLS.reference ?? ReferenceControl;\nCONTROLS.reference = function ReferenceOrFormControl(props: ControlProps) {\n  const { forms, useFormOptions } = useKitServices();\n  return createElement(isFormOnly(props.field) && (forms || useFormOptions) ? FormPickerControl : Reference, props);\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,YAAY,SAAS,aAAa;AACxC,SAAS,YAAY,SAAS,uBAAuB,OAAqB;CACxE,MAAM,EAAE,OAAO,mBAAmB,eAAe;CACjD,OAAO,cAAc,WAAW,MAAM,KAAK,MAAM,SAAS,kBAAkB,oBAAoB,WAAW,KAAK;AAClH"}

package/dist/controls/form-picker.d.ts

@@ -0,0 +1,43 @@
+/**
+ * FORM PICKER — a reference to the project's forms (`reference: { to: ["form"] }`; a component's `form` prop), drawn as
+ * V2 draws it: the reference control's card and 300px search popover, its rows the host's forms (V2 read them from
+ * `services.forms`, with "{n} fields · {n} submissions" under each name).
+ *
+ * The rows come from the host, never a seed: `forms` (V2's synchronous list) or `useFormOptions`, a React HOOK for a host
+ * that loads them (the dock: GET /forms). While they load, the saved form shows its id; a failed load is said in words
+ * on the card and in the picker. D58: submission counts are form data, so a viewer without `forms.submissions` sees
+ * them dropped from the subtitle (V2 rule).
+ *
+ * Remove clears the value (`undefined`): a form prop stores `{ formId }` or nothing, never a null envelope.
+ * `FormDetails`, when the host has one, draws under a chosen form (where the form renders on the site, editing its fields).
+ */
+import * as React from "react";
+import type { FieldSchema } from "../schema/types";
+import type { ControlProps } from "../types";
+export interface KitFormOption {
+    id: string;
+    title: string;
+    /** "5 fields · 128 submissions" */
+    subtitle?: string;
+    /** "draft" shows the Draft chip (a draft form refuses submissions) */
+    status?: string | null;
+}
+declare module "../context" {
+    interface KitServices {
+        /** A React HOOK: the project's forms, for a host that loads them. One identity for the life of the form. */
+        useFormOptions?: () => {
+            forms: KitFormOption[];
+            loading?: boolean;
+            error?: string;
+        };
+        /** Drawn under a chosen form: the host's own detail for it (where it renders, its fields). */
+        FormDetails?: React.ComponentType<{
+            formId: string;
+            readOnly?: boolean;
+            onPick?: (formId: string) => void;
+        }>;
+    }
+}
+/** A reference whose only target is forms (no filter: a filtered one stays on the reference search). */
+export declare const isFormOnly: (field: FieldSchema) => boolean;
+export declare function FormPickerControl(props: ControlProps): import("react/jsx-runtime").JSX.Element;