@protobase/ui 0.21.7 → 0.21.9

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.7";
+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/primitives/segmented.js

@@ -11,10 +11,15 @@ const sizes = {
 		option: "px-3 text-body"
 	}
 };
+/** A segmented switch's classes, for a row of links that looks like one: the group, and each option, `active` the chosen. */
+const segmentedClass = {
+	group: (size = "sm") => cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	option: (active, size = "sm") => cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground")
+};
 const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = false }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
-	className: cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	className: segmentedClass.group(size),
 	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": option.value === value,
@@ -23,9 +28,9 @@ const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = fa
 			title: option.label
 		},
 		onClick: () => onChange(option.value),
-		className: cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		className: segmentedClass.option(option.value === value, size),
 		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), !iconOnly && option.label]
 	}, option.value))
 });
 //#endregion
-export { Segmented };
+export { Segmented, segmentedClass };

package/dist/primitives/textarea.d.ts

@@ -1,9 +1,10 @@
-import { TextareaHTMLAttributes } from "react";
+import { Ref, TextareaHTMLAttributes } from "react";
 //#region src/primitives/textarea.d.ts
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
   value: string;
   invalid?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-export declare const Textarea: ({ invalid, className, rows, value, ...rest }: TextareaProps) => import("react").JSX.Element;
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+export declare const Textarea: ({ invalid, className, rows, value, ref: given, ...rest }: TextareaProps) => import("react").JSX.Element;
 //#endregion

package/dist/primitives/textarea.js

@@ -1,15 +1,20 @@
 import { cn } from "../lib/cn.js";
 import { useFieldControl } from "./field-control.js";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/textarea.tsx
 const fit = (box) => {
 	box.style.height = "auto";
 	box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+const Textarea = ({ invalid, className, rows = 3, value, ref: given, ...rest }) => {
 	const ref = useRef(null);
+	const setRef = useCallback((box) => {
+		ref.current = box;
+		if (typeof given === "function") given(box);
+		else if (given) given.current = box;
+	}, [given]);
 	const control = useFieldControl();
 	useLayoutEffect(() => {
 		if (ref.current) fit(ref.current);
@@ -27,7 +32,7 @@ const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 		return () => observer.disconnect();
 	}, []);
 	return /* @__PURE__ */ jsx("textarea", {
-		ref,
+		ref: setRef,
 		rows,
 		value,
 		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-body text-foreground shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", invalid ? "border-danger" : "border-border-strong", className),

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 };