@protobase/ui 0.21.8 → 0.21.10

package/dist/data-grid/grid-header.js

@@ -2,15 +2,22 @@ import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
-import { HeaderMenu } from "./header-menu.js";
+import { HeaderMenu, unsortableText } from "./header-menu.js";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-header.tsx
 const SortIcon = ({ sorted }) => {
 	if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "size-3 text-foreground" });
 	if (sorted === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "size-3 text-foreground" });
 	return /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3 opacity-0 group-hover/head:opacity-100" });
 };
+const HeaderLabel = ({ spec }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	className: "truncate",
+	children: spec.header
+}), spec.highlight && /* @__PURE__ */ jsx("span", {
+	className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
+	children: "New"
+})] });
 const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing, minScale, pins = {}, lastPinned, scrolled, onTogglePin, onClearSelection }) => /* @__PURE__ */ jsxs("div", {
 	className: "grid h-8 shrink-0 items-center border-b bg-surface text-xs font-medium text-muted-foreground",
 	style: { gridTemplateColumns: gridTemplate(specs, gutter, trailing, minScale) },
@@ -37,27 +44,21 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 				"data-col-id": spec.id,
 				style: pinned ? { left: pins[spec.id] } : void 0,
 				className: cn("group/cell flex h-full min-w-0 items-center", pinned && "sticky z-10 bg-inherit", pinned && scrolled && spec.id === lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]", spec.highlight && "bg-primary-soft text-primary-text"),
-				children: [/* @__PURE__ */ jsxs("button", {
+				children: [spec.sortable ? /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: onSort,
-					disabled: !spec.sortable,
-					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", spec.sortable && "hover:text-foreground", sorted && "text-foreground"),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: spec.header
-						}),
-						spec.highlight && /* @__PURE__ */ jsx("span", {
-							className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
-							children: "New"
-						}),
-						spec.sortable && /* @__PURE__ */ jsx(SortIcon, { sorted })
-					]
+					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", "hover:text-foreground", sorted && "text-foreground"),
+					children: [/* @__PURE__ */ jsx(HeaderLabel, { spec }), /* @__PURE__ */ jsx(SortIcon, { sorted })]
+				}) : /* @__PURE__ */ jsx("div", {
+					title: unsortableText,
+					className: cn("flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end"),
+					children: /* @__PURE__ */ jsx(HeaderLabel, { spec })
 				}), /* @__PURE__ */ jsx("div", {
 					className: "pr-1.5",
 					children: /* @__PURE__ */ jsx(HeaderMenu, {
 						header: spec.header,
 						pinned,
+						sortable: Boolean(spec.sortable),
 						onTogglePin: () => onTogglePin(spec.id)
 					})
 				})]

package/dist/data-grid/header-menu.js

@@ -2,8 +2,10 @@ import { useEffect, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/header-menu.tsx
-/** The "..." in a column header: for now, pinning the column to the left edge. */
-const HeaderMenu = ({ header, pinned, onTogglePin }) => {
+/** Why a column header does nothing when pressed: a list sorts only on the columns its view makes sortable. */
+const unsortableText = "This column can't be sorted";
+/** The "..." in a column header: pinning the column to the left edge, and saying so when the list can't sort by it. */
+const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 	const [open, setOpen] = useState(false);
 	const root = useRef(null);
 	useEffect(() => {
@@ -29,10 +31,18 @@ const HeaderMenu = ({ header, pinned, onTogglePin }) => {
 			onClick: () => setOpen(!open),
 			className: "relative inline-flex size-5 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground focus-visible:opacity-100 after:absolute after:-inset-2 after:content-[''] md:opacity-0 md:group-hover/cell:opacity-100 aria-expanded:opacity-100",
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
-		}), open && /* @__PURE__ */ jsx("ul", {
+		}), open && /* @__PURE__ */ jsxs("ul", {
 			role: "menu",
 			className: "absolute right-0 top-full z-30 mt-1 min-w-32 rounded-md border bg-background py-1 text-body font-normal text-foreground shadow-pop",
-			children: /* @__PURE__ */ jsx("li", {
+			children: [!sortable && /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsx("span", {
+					role: "menuitem",
+					"aria-disabled": "true",
+					className: "block min-h-9 whitespace-nowrap px-3 py-1.5 text-muted-foreground",
+					children: "This column can't be sorted"
+				})
+			}), /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
@@ -44,9 +54,9 @@ const HeaderMenu = ({ header, pinned, onTogglePin }) => {
 					},
 					children: pinned ? "Unpin" : "Pin to left"
 				})
-			})
+			})]
 		})]
 	});
 };
 //#endregion
-export { HeaderMenu };
+export { HeaderMenu, unsortableText };

package/dist/data-grid/row-menu.js

@@ -1,56 +1,19 @@
 import { cn } from "../lib/cn.js";
 import { RouteLink } from "../primitives/route-link.js";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/data-grid/row-menu.tsx
 /** The actions that apply to a row; a row with none gets no menu at all. */
 const availableActions = (actions, row) => actions.filter((action) => action.available?.(row) ?? true);
-const gap = 4;
-/** Below the button, or above it when the viewport has no room underneath. */
-const placeMenu = (button, menuHeight) => {
-	const below = button.bottom + gap;
-	return {
-		top: below + menuHeight > window.innerHeight - gap ? Math.max(gap, button.top - gap - menuHeight) : below,
-		right: window.innerWidth - button.right
-	};
-};
 /**
 * The "..." button at the end of a row, with a small menu of the row's actions. The menu is portalled to the body:
 * every grid row is its own stacking context and the grid body clips, so a menu inside the row would sit under the
 * rows below it.
 */
 const RowMenu = ({ row, actions }) => {
-	const [open, setOpen] = useState(false);
-	const [place, setPlace] = useState();
-	const button = useRef(null);
-	const menu = useRef(null);
-	useLayoutEffect(() => {
-		if (!open || !button.current || !menu.current) {
-			setPlace(void 0);
-			return;
-		}
-		setPlace(placeMenu(button.current.getBoundingClientRect(), menu.current.offsetHeight));
-	}, [open]);
-	useEffect(() => {
-		if (!open) return;
-		const inside = (target) => button.current?.contains(target) || menu.current?.contains(target);
-		const close = (event) => {
-			if (event instanceof KeyboardEvent ? event.key === "Escape" : !inside(event.target)) setOpen(false);
-		};
-		const dismiss = () => setOpen(false);
-		document.addEventListener("mousedown", close);
-		document.addEventListener("keydown", close);
-		document.addEventListener("scroll", dismiss, true);
-		window.addEventListener("resize", dismiss);
-		return () => {
-			document.removeEventListener("mousedown", close);
-			document.removeEventListener("keydown", close);
-			document.removeEventListener("scroll", dismiss, true);
-			window.removeEventListener("resize", dismiss);
-		};
-	}, [open]);
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative flex justify-center bg-inherit",
 		onClick: (event) => event.stopPropagation(),

package/dist/format/date.js

@@ -1,3 +1,4 @@
+import { viewerZone } from "./zone.js";
 //#region src/format/date.ts
 const day = new Intl.DateTimeFormat("en-GB", {
 	day: "numeric",
@@ -10,12 +11,6 @@ const dayShort = new Intl.DateTimeFormat("en-GB", {
 	month: "short",
 	timeZone: "UTC"
 });
-const time = new Intl.DateTimeFormat("en-GB", {
-	hour: "2-digit",
-	minute: "2-digit",
-	hour12: false,
-	timeZone: "UTC"
-});
 const month = new Intl.DateTimeFormat("en-GB", {
 	month: "long",
 	year: "numeric",
@@ -34,7 +29,32 @@ const weekdayDate = new Intl.DateTimeFormat("en-GB", {
 });
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
-const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+const zoned = /* @__PURE__ */ new Map();
+const zonedFormats = (zone) => {
+	const known = zoned.get(zone);
+	if (known) return known;
+	const formats = {
+		day: new Intl.DateTimeFormat("en-GB", {
+			day: "numeric",
+			month: "short",
+			year: "numeric",
+			timeZone: zone
+		}),
+		time: new Intl.DateTimeFormat("en-GB", {
+			hour: "2-digit",
+			minute: "2-digit",
+			hour12: false,
+			timeZone: zone
+		})
+	};
+	zoned.set(zone, formats);
+	return formats;
+};
+/** "6 Oct 2026, 16:32": an instant on the clock of `zone`, the viewer's unless given. */
+const formatDateTime = (ms, zone = viewerZone()) => {
+	const formats = zonedFormats(zone);
+	return `${formats.day.format(ms)}, ${formats.time.format(ms)}`;
+};
 /** "October 2026". */
 const formatMonth = (ms) => month.format(ms);
 /** "Mon". */
@@ -43,8 +63,8 @@ const formatWeekday = (ms) => weekday.format(ms);
 const formatWeekdayDate = (ms) => weekdayDate.format(ms);
 /** "12–18 Oct 2026", "28 Dec 2026 – 3 Jan 2027": the days from `from` to `to`, both included. */
 const formatDayRange = (from, to) => day.formatRange(from, to);
-/** "09:30". */
-const formatTime = (ms) => time.format(ms);
+/** "09:30": an instant's time on the clock of `zone`, the viewer's unless given. */
+const formatTime = (ms, zone = viewerZone()) => zonedFormats(zone).time.format(ms);
 const formatAgo = (seconds) => {
 	if (seconds < 60) return `${seconds} s ago`;
 	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;

package/dist/format/number-text.js

@@ -0,0 +1,16 @@
+//#region src/format/number-text.ts
+/** The decimal separator `locale` writes, the browser's language unless given: `,` for nl-NL and de-DE, `.` for en-GB. */
+const localeDecimal = (locale) => new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/**
+* A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or
+* spaces, and the `decimal` separator before the fraction. Undefined when the text is no such number.
+*/
+const parseNumberText = (text, decimal) => {
+	const group = `[${escapeRegExp(decimal === "." ? "," : ".")}\\s\\u00a0\\u202f']`;
+	const match = new RegExp(`^([-+]?)(\\d{1,3}(?:${group}\\d{3})+|\\d+)(?:${escapeRegExp(decimal)}(\\d+))?$`).exec(text.trim());
+	if (match) return `${match[1] === "-" ? "-" : ""}${match[2].replace(/\D/g, "")}${match[3] ? `.${match[3]}` : ""}`;
+	if (decimal === "." && /^[-+]?\d+(\.\d+)?e[-+]?\d+$/i.test(text.trim())) return String(Number(text.trim()));
+};
+//#endregion
+export { localeDecimal, parseNumberText };

package/dist/format/zone.js

@@ -0,0 +1,62 @@
+//#region src/format/zone.ts
+/** The viewer's IANA time zone, such as `Europe/Amsterdam`. */
+const viewerZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+const partsFormats = /* @__PURE__ */ new Map();
+const partsFormat = (zone) => {
+	const known = partsFormats.get(zone);
+	if (known) return known;
+	const format = new Intl.DateTimeFormat("en-US", {
+		timeZone: zone,
+		hourCycle: "h23",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	partsFormats.set(zone, format);
+	return format;
+};
+const wallClock = (ms, zone) => {
+	const parts = Object.fromEntries(partsFormat(zone).formatToParts(ms).map((part) => [part.type, part.value]));
+	return {
+		year: Number(parts.year),
+		month: Number(parts.month),
+		day: Number(parts.day),
+		hour: Number(parts.hour),
+		minute: Number(parts.minute),
+		second: Number(parts.second)
+	};
+};
+/** How far `zone`'s clock is ahead of UTC at `ms`, in milliseconds: 7 200 000 for Amsterdam in summer. */
+const zoneOffset = (ms, zone) => {
+	const clock = wallClock(ms, zone);
+	return Date.UTC(clock.year, clock.month - 1, clock.day, clock.hour, clock.minute, clock.second) - Math.floor(ms / 1e3) * 1e3;
+};
+const pad = (value) => String(value).padStart(2, "0");
+/** The day `ms` falls on in `zone`, as `YYYY-MM-DD`. */
+const dayIn = (ms, zone) => {
+	const clock = wallClock(ms, zone);
+	return `${clock.year}-${pad(clock.month)}-${pad(clock.day)}`;
+};
+/** The instant `zone`'s clock reads `wall`, a wall-clock time written as if it were UTC milliseconds. */
+const instantAt = (wall, zone) => {
+	const guess = wall - zoneOffset(wall, zone);
+	return wall - zoneOffset(guess, zone);
+};
+/** The instant `day` (`YYYY-MM-DD`) starts in `zone`: its local midnight. */
+const startOfDayIn = (day, zone) => instantAt(Date.parse(`${day}T00:00:00Z`), zone);
+const zoneNames = /* @__PURE__ */ new Map();
+/** The zone a time is shown in, as its hover label says: "Europe/Amsterdam (GMT+2)", or "UTC". */
+const zoneLabel = (ms, zone) => {
+	const known = zoneNames.get(zone) ?? new Intl.DateTimeFormat("en-GB", {
+		timeZone: zone,
+		timeZoneName: "shortOffset"
+	});
+	zoneNames.set(zone, known);
+	const name = known.formatToParts(ms).find((part) => part.type === "timeZoneName")?.value ?? zone;
+	return zone === "UTC" || zone === "Etc/UTC" ? "UTC" : `${zone} (${name})`;
+};
+//#endregion
+export { dayIn, instantAt, startOfDayIn, viewerZone, zoneLabel, zoneOffset };

package/dist/live/columns-from-model.js

@@ -3,6 +3,7 @@ import { badgeWidth, headerWidth } from "../data-grid/content-widths.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitleField } from "./model-helpers.js";
+import { contactFormat } from "./contact-links.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -82,6 +83,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
 			...name === title && { title: true },
+			...kind === "text" && name !== title && contactFormat(viewField) && { link: contactFormat(viewField) },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),

package/dist/live/contact-link.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { contactHref } from "./contact-links.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/live/contact-link.tsx
+const stayInRow = (event) => event.stopPropagation();
+/** A value that is an address as a link that writes to, calls or opens it, a web page in a new tab; else its text. */
+const ContactLink = ({ format, value, className }) => {
+	const href = contactHref(format, value);
+	if (!href) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: value
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		...format === "url" ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick: stayInRow,
+		className: cn("font-medium text-primary-text hover:underline", className),
+		children: value
+	});
+};
+//#endregion
+export { ContactLink };

package/dist/live/contact-links.js

@@ -0,0 +1,42 @@
+//#region src/live/contact-links.ts
+const contactFormats = /* @__PURE__ */ new Set([
+	"email",
+	"phone",
+	"url"
+]);
+/** The view's contact format for a field, if it has one. */
+const contactFormat = (hints) => hints?.format !== void 0 && contactFormats.has(hints.format) ? hints.format : void 0;
+/**
+* Where a value links: `mailto:` an email address, `tel:` a phone number with only its digits and a leading +, and a
+* web address as it is when it is http or https. Nothing for a value that is no such address, which shows as text.
+*/
+const contactHref = (format, value) => {
+	const text = value.trim();
+	if (format === "email") return /^[^\s@]+@[^\s@]+$/.test(text) ? `mailto:${text}` : void 0;
+	if (format === "phone") {
+		const digits = text.replace(/[^\d+]/g, "").replace(/(?!^)\+/g, "");
+		return /\d/.test(digits) ? `tel:${digits}` : void 0;
+	}
+	return /^https?:\/\/\S+$/i.test(text) ? text : void 0;
+};
+/** The input a contact field is edited in: its type, so a mobile screen shows the keyboard for it, and its autofill. */
+const contactInputProps = (format) => {
+	if (format === "email") return {
+		type: "email",
+		inputMode: "email",
+		autoComplete: "email"
+	};
+	if (format === "phone") return {
+		type: "tel",
+		inputMode: "tel",
+		autoComplete: "tel"
+	};
+	if (format === "url") return {
+		type: "url",
+		inputMode: "url",
+		autoComplete: "url"
+	};
+	return {};
+};
+//#endregion
+export { contactFormat, contactHref, contactInputProps };

package/dist/live/display-value.js

@@ -1,16 +1,20 @@
+import { viewerZone, zoneLabel } from "../format/zone.js";
 import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
 const affixed = (text, hints) => `${hints.prefix ?? ""}${text}${hints.suffix ?? ""}`;
-/** A read-only rendering of a stored value, following the view's prefix, suffix, decimals, format and value label hints. */
-const displayValue = (field, value, hints = {}) => {
+/**
+* A read-only rendering of a stored value, following the view's prefix, suffix, decimals, format and value label hints; a
+* timestamp on the clock of `zone`, the viewer's unless given.
+*/
+const displayValue = (field, value, hints = {}, zone = viewerZone()) => {
 	if (value === null || value === void 0 || value === "") return "—";
 	switch (field.type) {
 		case "boolean": return value ? "Yes" : "No";
 		case "file": return fileShown(value)?.name ?? "—";
 		case "enum": return enumLabel(String(value), hints.valueLabels);
-		case "timestamp": return formatDateTime(Date.parse(String(value)));
+		case "timestamp": return formatDateTime(Date.parse(String(value)), zone);
 		case "date": return formatDate(Date.parse(String(value)));
 		case "decimal": {
 			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
@@ -25,5 +29,11 @@ const displayValue = (field, value, hints = {}) => {
 		default: return typeof value === "object" ? JSON.stringify(value) : String(value);
 	}
 };
+/** The hover label of a shown value: the time zone a timestamp is shown in, nothing for other values. */
+const valueTitle = (field, value, zone = viewerZone()) => {
+	if (field.type !== "timestamp" || typeof value !== "string") return void 0;
+	const ms = Date.parse(value);
+	return Number.isNaN(ms) ? void 0 : `Shown in ${zoneLabel(ms, zone)}`;
+};
 //#endregion
-export { displayValue };
+export { displayValue, valueTitle };

package/dist/live/field-values.js

@@ -1,3 +1,4 @@
+import { localeDecimal, parseNumberText } from "../format/number-text.js";
 import { fileDiffers, filePatchValue } from "./file-values.js";
 //#region src/live/field-values.ts
 /** What the editor's text input holds for a stored value. */
@@ -14,32 +15,42 @@ const textEdited = /* @__PURE__ */ new Set([
 const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "timestamp" && field.type !== "relation";
 /** A field a record's form cannot leave empty: written through the API, never null and no boolean, which always holds a value. */
 const isRequiredOnEdit = (field) => !field.readOnly && !field.nullable && field.type !== "boolean";
-/** The JSON value to send for an edited field: integers become numbers, empty optional fields become null. */
-const toPatchValue = (field, draft) => {
+const numeric = /* @__PURE__ */ new Set([
+	"integer",
+	"bigint",
+	"decimal"
+]);
+const numberText = (text, decimal) => parseNumberText(text, decimal) ?? text;
+/**
+* The JSON value to send for an edited field: integers become numbers, empty optional fields become null, and numbers
+* typed with the `decimal` separator of the browser's language are read as such.
+*/
+const toPatchValue = (field, draft, decimal = localeDecimal()) => {
 	if (field.type === "boolean") return Boolean(draft);
 	if (field.type === "file") return filePatchValue(draft);
-	const text = String(draft).trim();
-	if (text === "") return field.nullable ? null : "";
+	const typed = String(draft).trim();
+	if (typed === "") return field.nullable ? null : "";
+	const text = numeric.has(field.type) ? numberText(typed, decimal) : typed;
 	if (field.type === "integer") return Number(text);
 	if (field.type === "relation") return typeof draft === "number" ? draft : text;
 	if (textEdited.has(field.type) || field.type === "enum") return text;
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };
 /** The value a draft stands for, as the API gives one: null when empty, a boolean or number where the field holds one. */
-const fromDraft = (field, draft) => {
+const fromDraft = (field, draft, decimal = localeDecimal()) => {
 	if (field.type === "boolean") return Boolean(draft);
 	if (String(draft ?? "").trim() === "") return null;
-	return toPatchValue(field, draft);
+	return toPatchValue(field, draft, decimal);
 };
 /** The draft for a value, as the editor holds it: a boolean for a boolean field, else its text. */
 const toFieldDraft = (field, value) => field.type === "boolean" ? Boolean(value) : toDraft(value);
-/** Whether the draft differs from what the server holds, comparing numbers by value. */
-const differs = (field, draft, stored) => {
+/** Whether the draft differs from what the server holds, comparing numbers by value, as typed with `decimal`. */
+const differs = (field, draft, stored, decimal = localeDecimal()) => {
 	if (field.type === "boolean") return Boolean(draft) !== Boolean(stored);
 	if (field.type === "file") return fileDiffers(draft, stored);
 	const a = String(draft ?? "").trim();
 	const b = toDraft(stored);
-	if (field.type === "decimal" || field.type === "integer") return a === "" || b === "" ? a !== b : Number(a) !== Number(b);
+	if (field.type === "decimal" || field.type === "integer") return a === "" || b === "" ? a !== b : Number(numberText(a, decimal)) !== Number(b);
 	return a !== b;
 };
 //#endregion

package/dist/live/filter-string.js

@@ -1,3 +1,4 @@
+import { dayIn, startOfDayIn, viewerZone } from "../format/zone.js";
 import { createWhere, parseFilter, printFilter } from "@protobase/schema";
 //#region src/live/filter-string.ts
 const w = createWhere();
@@ -20,18 +21,16 @@ const relative = {
 	}
 };
 const iso = (ms) => new Date(ms).toISOString().replace(".000Z", "Z");
-/** First instant of the period a calendar preset starts at, in UTC. */
-const periodStart = (preset, now) => {
-	const [year, month, day] = [
-		now.getUTCFullYear(),
-		now.getUTCMonth(),
-		now.getUTCDate()
-	];
-	if (preset === "year") return iso(Date.UTC(year, 0, 1));
-	if (preset === "quarter") return iso(Date.UTC(year, Math.floor(month / 3) * 3, 1));
-	if (preset === "month") return iso(Date.UTC(year, month, 1));
-	if (preset === "yesterday") return iso(Date.UTC(year, month, day - 1));
-	return iso(Date.UTC(year, month, day));
+/** The first day of the period a calendar preset starts at, as `YYYY-MM-DD` on the clock of `zone`. */
+const periodStart = (preset, now, zone) => {
+	const today = dayIn(now.getTime(), zone);
+	const [year, month] = [Number(today.slice(0, 4)), Number(today.slice(5, 7)) - 1];
+	const day = (ms) => new Date(ms).toISOString().slice(0, 10);
+	if (preset === "year") return day(Date.UTC(year, 0, 1));
+	if (preset === "quarter") return day(Date.UTC(year, Math.floor(month / 3) * 3, 1));
+	if (preset === "month") return day(Date.UTC(year, month, 1));
+	if (preset === "yesterday") return day(Date.parse(`${today}T00:00:00Z`) - 864e5);
+	return today;
 };
 const calendarPresets = [
 	"year",
@@ -40,23 +39,24 @@ const calendarPresets = [
 	"yesterday",
 	"today"
 ];
-/** Date fields take a plain date, timestamp fields an instant. */
-const instant = (value, kind) => kind === "date" ? {
+/** The literal a day starts at: the plain date for a date field, its first instant in `zone` for a timestamp field. */
+const dayLiteral = (day, kind, zone) => kind === "date" ? day : iso(startOfDayIn(day, zone));
+const instant = (day, kind, zone) => kind === "date" ? {
 	kind: "string",
-	value: value.slice(0, 10),
+	value: dayLiteral(day, kind, zone),
 	span
 } : {
 	kind: "timestamp",
-	value,
+	value: dayLiteral(day, kind, zone),
 	span
 };
-const dateClauses = (field, preset, now, kind) => {
+const dateClauses = (field, preset, now, kind, zone) => {
 	if (preset in relative) return [w.gte(field, w.ago(preset))];
-	const from = w.gte(field, instant(periodStart(preset, now), kind));
-	return preset === "yesterday" ? [from, w.lt(field, instant(periodStart("today", now), kind))] : [from];
+	const from = w.gte(field, instant(periodStart(preset, now, zone), kind, zone));
+	return preset === "yesterday" ? [from, w.lt(field, instant(periodStart("today", now, zone), kind, zone))] : [from];
 };
-/** The panel's state as filter clauses, in a fixed order so the text is stable. */
-const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
+/** The panel's state as filter clauses, in a fixed order so the text is stable; calendar presets start at midnight in `zone`. */
+const stateToClauses = (config, state, now = /* @__PURE__ */ new Date(), zone = viewerZone()) => {
 	const facets = config.facets.flatMap((group) => {
 		const values = state.facets[group.id] ?? [];
 		if (values.length === 0) return [];
@@ -70,7 +70,7 @@ const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
 		const span = state.ranges?.[range.id];
 		return span ? [w.gte(range.id, span[0]), w.lte(range.id, span[1])] : [];
 	});
-	const date = config.dateField && state.date ? dateClauses(config.dateField, state.date, now, config.dateKind) : [];
+	const date = config.dateField && state.date ? dateClauses(config.dateField, state.date, now, config.dateKind, zone) : [];
 	const toggles = (config.toggles ?? []).filter((toggle) => state.toggles.includes(toggle.id)).map((toggle) => w.eq(toggle.id, true));
 	return [
 		...facets,
@@ -80,7 +80,7 @@ const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
 	];
 };
 const clausesToText = (clauses) => clauses.length === 0 ? "" : printFilter(w.and(...clauses));
-const stateToText = (config, state, extras = [], now = /* @__PURE__ */ new Date()) => clausesToText([...stateToClauses(config, state, now), ...extras]);
+const stateToText = (config, state, extras = [], now = /* @__PURE__ */ new Date(), zone = viewerZone()) => clausesToText([...stateToClauses(config, state, now, zone), ...extras]);
 const flatten = (expr) => expr.kind === "and" ? expr.args.flatMap(flatten) : [expr];
 const fieldName = (expr) => expr.field.path.join(".");
 const isTrue = (expr) => expr.kind === "compare" && expr.op === "=" && expr.value.kind === "boolean" && expr.value.value;
@@ -95,20 +95,20 @@ const flagsChosen = (clause, groupOf) => {
 	} : void 0;
 };
 const literalText = (value) => value.kind === "number" ? String(value.raw) : value.kind === "string" ? String(value.value) : void 0;
-const presetOf = (clause, now) => {
+const presetOf = (clause, now, zone) => {
 	const v = clause.value;
 	if (v.kind === "now" && v.offset?.sign === "-") {
 		const { amount, unit } = v.offset.duration;
 		return Object.entries(relative).find(([, d]) => d.amount === amount && d.unit === unit)?.[0];
 	}
-	if (v.kind === "timestamp") return calendarPresets.find((preset) => periodStart(preset, now) === v.value);
-	if (v.kind === "string") return calendarPresets.find((preset) => periodStart(preset, now).slice(0, 10) === v.value);
+	if (v.kind === "timestamp") return calendarPresets.find((preset) => dayLiteral(periodStart(preset, now, zone), "timestamp", zone) === v.value);
+	if (v.kind === "string") return calendarPresets.find((preset) => periodStart(preset, now, zone) === v.value);
 };
 /**
 * The inverse of `stateToText`: clauses that match a widget fill the panel state, everything else
 * (search text, hand-written conditions) is returned as `extras` and survives the round trip.
 */
-const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
+const textToState = (config, text, now = /* @__PURE__ */ new Date(), zone = viewerZone()) => {
 	const parsed = parseFilter(text);
 	if (!parsed.ok) return {
 		ok: false,
@@ -131,10 +131,10 @@ const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
 		if (flags && !state.facets[flags.group]) state.facets[flags.group] = flags.fields;
 		else if (clause.kind === "compare" && facetIds.has(fieldName(clause)) && clause.op === "=" && literalText(clause.value) !== void 0) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], literalText(clause.value)];
 		else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
-		else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
-			state.date = presetOf(clause, now);
+		else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now, zone) && !state.date) {
+			state.date = presetOf(clause, now, zone);
 			dateClause = clause;
-		} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && periodStart("today", now).startsWith(clause.value.value.slice(0, 10))) todayEnd = clause;
+		} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && clause.value.value === dayLiteral(periodStart("today", now, zone), clause.value.kind === "string" ? "date" : "timestamp", zone)) todayEnd = clause;
 		else if (clause.kind === "compare" && toggleIds.has(fieldName(clause)) && clause.op === "=" && clause.value.kind === "boolean" && clause.value.value) state.toggles.push(fieldName(clause));
 		else if (clause.kind === "compare" && rangeIds.has(fieldName(clause)) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
 			const range = bounds.get(fieldName(clause)) ?? { clauses: [] };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.8";
+var version = "0.21.10";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };