@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/date.js

@@ -0,0 +1,458 @@
+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 { IconAlertTriangle, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconClock, IconLock, IconWorld } from "@tabler/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/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("flex size-8 items-center justify-center rounded-kit-md text-kit-sm tabular-nums 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 }) {
+	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: React.useMemo(() => zoneOptions(zone, def, at), [
+			zone,
+			def,
+			at
+		]),
+		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 bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg shadow-kit-field outline-none transition-colors disabled:opacity-60", invalid ? "border-[var(--kit-field-invalid)]" : "border-kit-field-border hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus focus-visible:border-kit-field-border-focus", variant === "document" ? "h-9" : "h-8")
+			}),
+			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("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 focus-visible:outline-2 focus-visible:outline-kit-focus-ring",
+								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 };
+
+//# sourceMappingURL=date.js.map

package/controls/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","names":[],"sources":["../../src/kit/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                \"flex size-8 items-center justify-center rounded-kit-md text-kit-sm tabular-nums 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 bg-kit-field-bg px-2.5 text-left text-kit-sm text-kit-fg shadow-kit-field outline-none transition-colors disabled:opacity-60\",\n              invalid ? \"border-[var(--kit-field-invalid)]\" : \"border-kit-field-border hover:border-kit-field-border-hover data-[popup-open]:border-kit-field-border-focus focus-visible:border-kit-field-border-focus\",\n              variant === \"document\" ? \"h-9\" : \"h-8\",\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              <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 focus-visible:outline-2 focus-visible:outline-kit-focus-ring\">\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/controls/form-picker-register.d.ts

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

package/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/kit/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/controls/form-picker-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-picker-register.js","names":[],"sources":["../../src/kit/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,gBAAgB;AAClD,QAAO,cAAc,WAAW,MAAM,MAAM,KAAK,SAAS,kBAAkB,oBAAoB,WAAW,MAAM"}

package/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;

package/controls/form-picker.js

@@ -0,0 +1,83 @@
+import { KitServicesProvider, useKitEnv, useKitServices } from "../context.js";
+import { ReferenceControl } from "./reference.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/controls/form-picker.tsx
+/**
+* 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).
+*/
+/** A reference whose only target is forms (no filter: a filtered one stays on the reference search). */
+var isFormOnly = (field) => {
+	const to = field.reference?.to ?? [];
+	return to.length === 1 && to[0] === "form" && !field.reference?.filter;
+};
+var SUBMISSIONS = / · [\d,]+ submissions?$/;
+function useFormRows(services) {
+	const loaded = services.useFormOptions ? services.useFormOptions() : null;
+	if (loaded) return {
+		forms: loaded.loading ? null : loaded.forms,
+		error: loaded.error
+	};
+	return { forms: services.forms?.() ?? [] };
+}
+function FormPickerControl(props) {
+	const services = useKitServices();
+	const subs = useKitEnv().can("forms.submissions");
+	const { forms, error } = useFormRows(services);
+	const rowsKey = JSON.stringify(forms);
+	const options = React.useMemo(() => forms?.map((f) => ({
+		id: f.id,
+		kind: "form",
+		title: f.title,
+		subtitle: (subs ? f.subtitle : f.subtitle?.replace(SUBMISSIONS, "")) || null,
+		status: f.status ?? null
+	})) ?? null, [rowsKey, subs]);
+	const reads = React.useMemo(() => {
+		const fail = () => Promise.reject(new Error(error));
+		return {
+			searchReferences: error ? fail : async (q) => {
+				const t = q.q.trim().toLowerCase();
+				return {
+					options: (options ?? []).filter((o) => o.id !== q.excludeId && (!t || o.title.toLowerCase().includes(t))).slice(0, q.limit),
+					truncated: false
+				};
+			},
+			lookupReferences: error ? fail : options ? async (ids) => options.filter((o) => ids.includes(o.id)) : void 0
+		};
+	}, [options, error]);
+	const value = {
+		...services,
+		...reads,
+		createReference: void 0
+	};
+	const formId = typeof props.value === "string" && props.value ? props.value : null;
+	const Details = services.FormDetails;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(KitServicesProvider, {
+			value,
+			children: /* @__PURE__ */ jsx(ReferenceControl, {
+				...props,
+				onChange: (v) => props.onChange(v == null || v === "" ? void 0 : v)
+			})
+		}), formId && Details ? /* @__PURE__ */ jsx(Details, {
+			formId,
+			readOnly: props.readOnly,
+			onPick: (id) => props.onChange(id)
+		}) : null]
+	});
+}
+//#endregion
+export { FormPickerControl, isFormOnly };
+
+//# sourceMappingURL=form-picker.js.map