@protobase/ui 0.21.8 → 0.21.9

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.9";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/popover-menu.js

@@ -0,0 +1,56 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/primitives/popover-menu.ts
+const gap = 4;
+/** Below the button, or above it when the viewport has no room underneath; its right edge at the button's. */
+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
+	};
+};
+/**
+* A menu opened by a button and drawn fixed, portalled to the body, under or over the button: it closes on a click
+* outside, Escape, and a scroll or resize, which would move the button away from it. `place` is undefined until the
+* menu is measured, so it is drawn hidden for that first frame.
+*/
+const usePopoverMenu = () => {
+	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]);
+	return {
+		open,
+		setOpen,
+		place,
+		button,
+		menu
+	};
+};
+//#endregion
+export { usePopoverMenu };

package/dist/record-view/action-menu.js

@@ -0,0 +1,59 @@
+import { cn } from "../lib/cn.js";
+import { usePopoverMenu } from "../primitives/popover-menu.js";
+import { MoreVertical } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/record-view/action-menu.tsx
+const itemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
+/**
+* The actions of an action rail as a menu behind a "..." button, as a mobile screen's top bar holds them: each item the
+* rail's, a link where the rail draws one, disabled with its reason when it cannot run. `className` styles the button.
+*/
+const ActionMenu = ({ actions, label = "Actions", className }) => {
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
+	if (actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		ref: button,
+		type: "button",
+		"aria-label": label,
+		"aria-haspopup": "menu",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open),
+		className,
+		children: /* @__PURE__ */ jsx(MoreVertical, { className: "size-5" })
+	}), open && createPortal(/* @__PURE__ */ jsx("ul", {
+		ref: menu,
+		role: "menu",
+		"aria-label": label,
+		style: place ?? { visibility: "hidden" },
+		className: "fixed z-50 min-w-48 rounded-md border bg-background py-1 shadow-pop",
+		children: actions.map(({ name, icon: Icon, onRun, blocked, running, tone, render }) => {
+			const children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+				className: cn("size-4 shrink-0", tone === "danger" ? "text-danger-text" : "text-muted-foreground"),
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("font-medium", tone === "danger" && "text-danger-text"),
+				children: name
+			})] });
+			return /* @__PURE__ */ jsx("li", {
+				role: "none",
+				onClick: () => setOpen(false),
+				children: render ? render({
+					className: itemClass,
+					children,
+					role: "menuitem"
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitem",
+					onClick: onRun,
+					disabled: Boolean(blocked) || running,
+					title: blocked,
+					className: itemClass,
+					children
+				})
+			}, name);
+		})
+	}), document.body)] });
+};
+//#endregion
+export { ActionMenu };

package/dist/record-view/record-header.js

@@ -2,11 +2,7 @@ import { AvatarStack } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-header.tsx
-const RecordHeader = ({ collection, title, titleHidden, status, lastEditedBy, presence = [], actions }) => {
-	if (titleHidden && !collection && !status && !lastEditedBy && presence.length === 0 && !actions) return /* @__PURE__ */ jsx("h1", {
-		className: "sr-only",
-		children: title
-	});
+const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => {
 	return /* @__PURE__ */ jsxs("header", {
 		className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
 		children: [/* @__PURE__ */ jsxs("div", { children: [
@@ -17,7 +13,7 @@ const RecordHeader = ({ collection, title, titleHidden, status, lastEditedBy, pr
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-x-3 gap-y-1",
 				children: [/* @__PURE__ */ jsx("h1", {
-					className: titleHidden ? "sr-only" : "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
+					className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
 					children: title
 				}), status && /* @__PURE__ */ jsx(Badge, {
 					tone: status.tone,

package/dist/record-view/record-sidebar.js

@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/record-sidebar.tsx
 const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
@@ -14,34 +14,6 @@ const MetadataList = ({ rows }) => /* @__PURE__ */ jsx("dl", {
 		})]
 	}, row.label))
 });
-const RelatedRecords = ({ records, onNavigate }) => /* @__PURE__ */ jsx("ul", {
-	className: "-mx-2",
-	children: records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
-		href: record.href ?? "#",
-		onClick: (event) => {
-			event.preventDefault();
-			if (record.href) onNavigate?.(record.href);
-		},
-		className: "group flex items-center justify-between gap-3 rounded-md px-2 py-2 hover:bg-muted",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "min-w-0",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "block text-[11px] uppercase tracking-wide text-faint-foreground",
-					children: record.kind
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "block truncate font-medium text-primary-text",
-					children: record.label
-				}),
-				record.meta && /* @__PURE__ */ jsx("span", {
-					className: "block text-xs text-muted-foreground",
-					children: record.meta
-				})
-			]
-		}), /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 text-faint-foreground group-hover:text-foreground" })]
-	}) }, record.label))
-});
 const SidebarCard = ({ title, children }) => /* @__PURE__ */ jsxs("div", {
 	className: "rounded-lg border border-border bg-background p-4",
 	children: [/* @__PURE__ */ jsx("h3", {
@@ -55,4 +27,4 @@ const MetadataCard = ({ title, rows }) => rows.length === 0 ? null : /* @__PURE_
 	children: /* @__PURE__ */ jsx(MetadataList, { rows })
 });
 //#endregion
-export { MetadataCard, MetadataList, RelatedRecords, SidebarCard };
+export { MetadataCard, MetadataList, SidebarCard };