@protobase/ui 0.23.6 → 0.23.8

package/dist/app/displays/timeline-row.js

@@ -0,0 +1,42 @@
+import { cn } from "../../lib/cn.js";
+import { CalendarEvent, eventTitle } from "./calendar-event.js";
+import { barOf } from "./timeline-range.js";
+import { share, timelineGrid } from "./timeline-scale.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/timeline-row.tsx
+/**
+* A record of a timeline: its title, and its bar over the days it is on, an event chip as wide as those days, cut
+* square where it goes on before or after them. The bar is the link to the record, and is picked up to move it.
+*/
+const TimelineRow = ({ model, view, display, row, days, movable, dragged }) => {
+	const bar = barOf(row.record, display, model, days);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(timelineGrid, "relative border-b border-border last:border-b-0"),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "truncate px-2 pt-1 text-xs sm:py-1.5",
+			children: eventTitle(model, view, display, row)
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative h-7",
+			children: bar && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-1/2 -translate-y-1/2",
+				style: {
+					left: share(bar.first, days.length),
+					width: share(bar.last - bar.first + 1, days.length)
+				},
+				children: /* @__PURE__ */ jsx(CalendarEvent, {
+					model,
+					view,
+					display,
+					row,
+					day: bar.start,
+					movable,
+					dragged,
+					className: cn(bar.before && "rounded-l-none border-l-0", bar.after && "rounded-r-none border-r-0")
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { TimelineRow };

package/dist/app/displays/timeline-scale.js

@@ -0,0 +1,50 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/timeline-scale.tsx
+/** A timeline's columns: the records' titles beside their bars, above them on a phone. */
+const timelineGrid = "grid grid-cols-1 sm:grid-cols-[12rem_minmax(0,1fr)]";
+/** Where `count` days of `total` end, as a share of the bars' width. */
+const share = (count, total) => `${count / total * 100}%`;
+/** The scale over a timeline's rows: the marks of its days or months, today's marked. */
+const TimelineScale = ({ ticks, days, today, label, trackRef }) => /* @__PURE__ */ jsxs("div", {
+	className: cn(timelineGrid, "border-b border-border bg-surface"),
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "hidden truncate px-2 py-1 text-xs font-medium text-muted-foreground sm:block",
+		children: label
+	}), /* @__PURE__ */ jsx("div", {
+		ref: trackRef,
+		"aria-hidden": true,
+		className: "relative h-6",
+		children: ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+			className: cn("absolute inset-y-0 items-center truncate px-1 text-xs tabular-nums text-muted-foreground", tick.index > 0 ? "border-l border-border" : "border-border sm:border-l", tick.minor ? "hidden sm:flex" : "flex", tick.span === 1 && days[tick.index] === today && "font-medium text-primary"),
+			style: {
+				left: share(tick.index, days.length),
+				width: share(tick.span, days.length)
+			},
+			children: tick.label
+		}, tick.index))
+	})]
+});
+/** The lines behind a timeline's rows where each mark starts, and today's day shaded. */
+const TimelineLines = ({ ticks, days, today }) => {
+	const at = days.indexOf(today);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: cn(timelineGrid, "pointer-events-none absolute inset-0"),
+		children: [/* @__PURE__ */ jsx("span", { className: "hidden sm:block" }), /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [at >= 0 && /* @__PURE__ */ jsx("span", {
+				className: "absolute inset-y-0 bg-primary/10",
+				style: {
+					left: share(at, days.length),
+					width: share(1, days.length)
+				}
+			}), ticks.map((tick) => /* @__PURE__ */ jsx("span", {
+				className: cn("absolute inset-y-0 w-px bg-border", (tick.minor || tick.index === 0) && "hidden sm:block"),
+				style: { left: share(tick.index, days.length) }
+			}, tick.index))]
+		})]
+	});
+};
+//#endregion
+export { TimelineLines, TimelineScale, share, timelineGrid };

package/dist/app/embedded-list/embedded-list.js

@@ -13,6 +13,7 @@ import { DataGrid } from "../../data-grid/data-grid.js";
 import { viewAllAddress } from "./embedded-display.js";
 import { BoardDisplay } from "../displays/board-display.js";
 import { CalendarDisplay } from "../displays/calendar-display.js";
+import { TimelineDisplay } from "../displays/timeline-display.js";
 import { CardsDisplay } from "../displays/cards-display.js";
 import { CustomDisplay } from "../displays/custom-display.js";
 import { MapDisplay } from "../displays/map-display.js";
@@ -181,6 +182,12 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			display: shown,
 			fields,
 			filter
+		}) : shown.kind === "timeline" ? /* @__PURE__ */ jsx(TimelineDisplay, {
+			model,
+			view,
+			display: shown,
+			fields,
+			filter
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list

package/dist/app/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Protobase</title>
+    <!-- Makes the app installable, named for the app: the server answers it, as it alone knows the name. -->
+    <link rel="manifest" href="/api/manifest.webmanifest" />
     <!-- The theme before the first paint, so a dark page never flashes light: as theme/theme-preference.ts resolves it, the choice stored in this browser, else the system's. -->
     <script>
       var stored = null

package/dist/app/list-page.js

@@ -34,6 +34,7 @@ import { listHandOrder } from "./hand-order/hand-order.js";
 import { useDisplayRows } from "./displays/use-display-rows.js";
 import { BoardDisplay } from "./displays/board-display.js";
 import { CalendarDisplay } from "./displays/calendar-display.js";
+import { TimelineDisplay } from "./displays/timeline-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
@@ -213,7 +214,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		setFilter(state, text ? [...others, where$1.search(text)] : others);
 	};
 	const plural = view?.names?.plural ?? humanize(resource);
-	const sorted = display?.kind === "calendar" || display?.kind === "board" && boardRank(model) ? void 0 : display;
+	const sorted = display?.kind === "calendar" || display?.kind === "timeline" || display?.kind === "board" && boardRank(model) ? void 0 : display;
 	const sortMenu = sorted && /* @__PURE__ */ jsx(SortMenu, {
 		model,
 		view,
@@ -446,6 +447,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			at: address.calendar,
 			linkTo: (calendar) => listTo({ calendar })
 		});
+		if (display.kind === "timeline") return /* @__PURE__ */ jsx(TimelineDisplay, {
+			model,
+			view,
+			display,
+			fields: loaded,
+			filter: loadFilter,
+			at: address.timeline,
+			linkTo: (timeline) => listTo({ timeline })
+		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
 			list: displayRows

package/dist/format/date.js

@@ -19,6 +19,7 @@ const month = dateFormat("month", {
 	month: "long",
 	year: "numeric"
 });
+const monthName = dateFormat("monthName", { month: "long" });
 const weekday = dateFormat("weekday", { weekday: "short" });
 const weekdayDate = dateFormat("weekdayDate", {
 	weekday: "long",
@@ -49,6 +50,10 @@ const formatDateTime = (ms, zone = viewerZone()) => {
 };
 /** "October 2026". */
 const formatMonth = (ms) => month().format(ms);
+/** "October". */
+const formatMonthName = (ms) => monthName().format(ms);
+/** "October – December 2026": the months from `from` to `to`, both included. */
+const formatMonthRange = (from, to) => month().formatRange(from, to);
 /** "Mon". */
 const formatWeekday = (ms) => weekday().format(ms);
 /** "Monday, 12 Oct 2026". */
@@ -79,4 +84,4 @@ const formatRelativeTime = (seconds) => {
 	return relative().format(-Math.sign(seconds) * Math.floor(away / size), unit);
 };
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };
+export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatMonthName, formatMonthRange, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };

package/dist/package.js

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