@protobase/ui 0.21.7 → 0.21.9

package/dist/app/app.js

@@ -193,6 +193,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		onSignOut: user && (() => void signOut()),
 		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
+		appName: meta.appName,
 		logo: ProjectLogo,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),

package/dist/app/charts/chart-view.js

@@ -1,4 +1,5 @@
 import { Skeleton } from "../../primitives/skeleton.js";
+import { viewerZone } from "../../format/zone.js";
 import { labelFieldOf } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useAggregate } from "../../data/use-aggregates.js";
@@ -30,7 +31,8 @@ const ChartView = ({ model, view, groupBy, type = "bar", sum, average, filter =
 	const label = target && target.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
 	const params = dated ? {
 		granularity,
-		range
+		range,
+		timeZone: viewerZone()
 	} : {
 		limit,
 		...label && { label }

package/dist/app/comments/comment-body.js

@@ -0,0 +1,13 @@
+import { bodyParts } from "./mention-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/comments/comment-body.tsx
+/** A comment's text as written, line breaks kept, each `@{name}` of someone it mentions picked out. */
+const CommentBody = ({ comment }) => /* @__PURE__ */ jsx("p", {
+	className: "whitespace-pre-wrap break-words",
+	children: bodyParts(comment.body, comment.mentions).map((part, index) => "mention" in part ? /* @__PURE__ */ jsxs("span", {
+		className: "font-medium text-primary",
+		children: ["@", part.mention]
+	}, index) : part.text)
+});
+//#endregion
+export { CommentBody };

package/dist/app/comments/comment-composer.js

@@ -0,0 +1,149 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../primitives/button.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { Textarea } from "../../primitives/textarea.js";
+import { refusalReason } from "../displays/board-columns.js";
+import { menuKeyTarget } from "../../primitives/menu-keys.js";
+import { activeMention, insertMention, mentionedIds } from "./mention-text.js";
+import { useMentionable } from "./use-mentionable.js";
+import { usePostComment } from "./use-post-comment.js";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/comments/comment-composer.tsx
+/** The most people the list offers; few enough that it never needs a scrollbar of its own. */
+const shownPeople = 8;
+/**
+* The box a comment is written in. Typing `@` lists the people who may read the record by the name typed after it:
+* the arrows move, Enter or Tab picks, Escape closes. ⌘/Ctrl+Enter or the button posts.
+*/
+const CommentComposer = ({ resource, recordKey }) => {
+	const [text, setText] = useState("");
+	const [caret, setCaret] = useState(0);
+	const [focused, setFocused] = useState(false);
+	const [picked, setPicked] = useState([]);
+	const [active, setActive] = useState(0);
+	const [closed, setClosed] = useState();
+	const box = useRef(null);
+	const nextCaret = useRef(void 0);
+	const listId = useId();
+	const toast = useToast();
+	const post = usePostComment(resource, recordKey);
+	const mention = activeMention(text, caret);
+	const open = focused && mention !== void 0 && mention.start !== closed;
+	const people = useMentionable(resource, recordKey, open ? mention.query : void 0);
+	const options = open ? (people.data ?? []).slice(0, shownPeople) : [];
+	const listed = open && people.data !== void 0;
+	const optionId = (index) => `${listId}-${index}`;
+	useEffect(() => setActive(0), [mention?.query]);
+	const mentionStart = mention?.start;
+	useEffect(() => {
+		if (mentionStart === void 0) setClosed(void 0);
+	}, [mentionStart]);
+	useLayoutEffect(() => {
+		if (nextCaret.current === void 0 || !box.current) return;
+		box.current.setSelectionRange(nextCaret.current, nextCaret.current);
+		setCaret(nextCaret.current);
+		nextCaret.current = void 0;
+	}, [text]);
+	const pick = (user) => {
+		if (!mention) return;
+		const next = insertMention(text, mention, user.name);
+		nextCaret.current = next.caret;
+		setText(next.text);
+		setPicked((current) => [...current, user]);
+	};
+	const submit = () => {
+		if (text.trim() === "" || post.isPending) return;
+		post.mutate({
+			body: text,
+			mentions: mentionedIds(text, picked)
+		}, {
+			onSuccess: () => {
+				setText("");
+				setPicked([]);
+			},
+			onError: (error) => toast.show({
+				state: "error",
+				title: "Could not post the comment",
+				description: refusalReason(error)
+			})
+		});
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			submit();
+			return;
+		}
+		if (!open) return;
+		const target = menuKeyTarget(event.key, active, options.length);
+		if (target !== void 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			setActive(target);
+			return;
+		}
+		if ((event.key === "Enter" || event.key === "Tab") && options[active]) {
+			event.preventDefault();
+			pick(options[active]);
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			setClosed(mention.start);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				ref: box,
+				role: "combobox",
+				"aria-label": "Comment",
+				"aria-multiline": true,
+				"aria-autocomplete": "list",
+				"aria-expanded": listed,
+				"aria-controls": listId,
+				"aria-activedescendant": listed && options[active] ? optionId(active) : void 0,
+				placeholder: "Write a comment, @ to mention someone",
+				value: text,
+				onChange: (event) => {
+					setText(event.target.value);
+					setCaret(event.target.selectionStart);
+				},
+				onSelect: (event) => setCaret(event.currentTarget.selectionStart),
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onKeyDown
+			}), listed && /* @__PURE__ */ jsxs("ul", {
+				id: listId,
+				role: "listbox",
+				"aria-label": "People to mention",
+				className: "absolute z-30 mt-1 w-full max-w-sm rounded-md border bg-background py-1 shadow-pop",
+				onMouseDown: (event) => event.preventDefault(),
+				children: [options.map((user, index) => /* @__PURE__ */ jsx("li", {
+					id: optionId(index),
+					role: "option",
+					"aria-selected": index === active,
+					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted"),
+					onMouseMove: () => index !== active && setActive(index),
+					onClick: () => pick(user),
+					children: user.name
+				}, user.id)), options.length === 0 && /* @__PURE__ */ jsx("li", {
+					className: "px-3 py-1.5 text-muted-foreground",
+					children: "No one found"
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			size: "sm",
+			disabled: text.trim() === "",
+			loading: post.isPending,
+			onClick: submit,
+			children: "Comment"
+		}) })]
+	});
+};
+//#endregion
+export { CommentComposer };

package/dist/app/comments/comments-section.js

@@ -0,0 +1,78 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { Avatar } from "../../primitives/avatar.js";
+import { formatDateTime, formatRelativeTime } from "../../format/date.js";
+import { Button } from "../../primitives/button.js";
+import { hueOf, initialsOf } from "../../auth/user-to-shell.js";
+import { Section } from "../../record-view/section.js";
+import { ErrorBanner } from "../error-banner.js";
+import { CommentBody } from "./comment-body.js";
+import { CommentComposer } from "./comment-composer.js";
+import { useRecordComments } from "./use-record-comments.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/comments/comments-section.tsx
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-2",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))
+});
+const Comment = ({ comment }) => {
+	const author = comment.author.name ?? comment.author.id;
+	const at = Date.parse(comment.createdAt);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex gap-3 py-3 first:pt-0 last:pb-0",
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			initials: initialsOf(author) || "?",
+			hue: hueOf(comment.author.id),
+			size: "md",
+			className: "ring-0"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsxs("p", { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: author
+				}),
+				" ",
+				/* @__PURE__ */ jsxs("time", {
+					dateTime: comment.createdAt,
+					title: formatDateTime(at),
+					className: "text-muted-foreground",
+					children: ["· ", formatRelativeTime(Math.max(0, Math.round((Date.now() - at) / 1e3)))]
+				})
+			] }), /* @__PURE__ */ jsx(CommentBody, { comment })]
+		})]
+	});
+};
+/**
+* The record's comments, oldest first with the newest just above the box, and Show earlier comments for those before;
+* `canWrite` false, for a visitor who is not signed in, leaves out the box.
+*/
+const CommentsSection = ({ item, resource, recordKey, canWrite }) => {
+	const comments = useRecordComments(resource, recordKey);
+	return /* @__PURE__ */ jsxs(Section, {
+		title: item.title,
+		children: [comments.isPending ? /* @__PURE__ */ jsx(Loading, {}) : comments.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Could not load the comments",
+			error: comments.error
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [comments.hasNextPage && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			className: "mb-4",
+			disabled: comments.isFetchingNextPage,
+			onClick: () => void comments.fetchNextPage(),
+			children: "Show earlier comments"
+		}), comments.items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: "No comments yet."
+		}) : /* @__PURE__ */ jsx("ol", {
+			className: "divide-y divide-border",
+			children: comments.items.map((comment) => /* @__PURE__ */ jsx(Comment, { comment }, comment.id))
+		})] }), canWrite && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: /* @__PURE__ */ jsx(CommentComposer, {
+				resource,
+				recordKey
+			})
+		})]
+	});
+};
+//#endregion
+export { CommentsSection };

package/dist/app/comments/mention-text.js

@@ -0,0 +1,45 @@
+//#region src/app/comments/mention-text.ts
+/** The mention the caret is in: an `@` that starts the text or follows whitespace, with no whitespace up to the caret. */
+const activeMention = (text, caret) => {
+	const match = /(?:^|\s)@([^\s@]*)$/.exec(text.slice(0, caret));
+	return match ? {
+		start: caret - match[1].length - 1,
+		query: match[1]
+	} : void 0;
+};
+/** The text with the active mention written out as `@{name} `, and the caret after it. */
+const insertMention = (text, active, name) => {
+	const rest = text.slice(active.start + 1 + active.query.length);
+	const written = `@${name}${rest.startsWith(" ") ? "" : " "}`;
+	return {
+		text: `${text.slice(0, active.start)}${written}${rest}`,
+		caret: active.start + written.length + (rest.startsWith(" ") ? 1 : 0)
+	};
+};
+const escaped = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const mentionPattern = (names) => {
+	const unique = [...new Set(names)].filter(Boolean).sort((a, b) => b.length - a.length);
+	return unique.length === 0 ? void 0 : new RegExp(`(?<![\\p{L}\\p{N}_@])@(${unique.map(escaped).join("|")})(?![\\p{L}\\p{N}_])`, "gu");
+};
+/** The ids of the picked users whose `@{name}` is still in the text, each once. */
+const mentionedIds = (text, picked) => {
+	const pattern = mentionPattern(picked.map((user) => user.name));
+	const written = new Set(pattern ? [...text.matchAll(pattern)].map((match) => match[1]) : []);
+	return [...new Set(picked.filter((user) => written.has(user.name)).map((user) => user.id))];
+};
+/** A comment's text split into plain text and the `@{name}` of each person it mentions whose name is known. */
+const bodyParts = (body, mentions) => {
+	const pattern = mentionPattern(mentions.flatMap((user) => user.name ? [user.name] : []));
+	if (!pattern) return [{ text: body }];
+	const parts = [];
+	let at = 0;
+	for (const match of body.matchAll(pattern)) {
+		if (match.index > at) parts.push({ text: body.slice(at, match.index) });
+		parts.push({ mention: match[1] });
+		at = match.index + match[0].length;
+	}
+	if (at < body.length) parts.push({ text: body.slice(at) });
+	return parts;
+};
+//#endregion
+export { activeMention, bodyParts, insertMention, mentionedIds };

package/dist/app/comments/use-mentionable.js

@@ -0,0 +1,18 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useDebounced } from "../../lib/use-debounced.js";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+//#region src/app/comments/use-mentionable.ts
+/** The people a comment on the record may mention whose name contains `query`, asked 150 ms after it last changed; none while `query` is `undefined`. */
+const useMentionable = (resource, recordKey, query) => {
+	const client = useClient();
+	const settled = useDebounced(query, 150);
+	return useQuery({
+		queryKey: keys.mentionable(resource, recordKey, settled ?? ""),
+		queryFn: () => client.mentionable(resource, recordKey, settled ?? ""),
+		enabled: settled !== void 0,
+		placeholderData: keepPreviousData
+	});
+};
+//#endregion
+export { useMentionable };

package/dist/app/comments/use-post-comment.js

@@ -0,0 +1,15 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+//#region src/app/comments/use-post-comment.ts
+/** Posts a comment on the record, then loads its comments again so the new one shows. */
+const usePostComment = (resource, recordKey) => {
+	const client = useClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (input) => client.comment(resource, recordKey, input),
+		onSuccess: () => queryClient.invalidateQueries({ queryKey: keys.comments(resource, recordKey) })
+	});
+};
+//#endregion
+export { usePostComment };

package/dist/app/comments/use-record-comments.js

@@ -0,0 +1,24 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useInfiniteQuery } from "@tanstack/react-query";
+//#region src/app/comments/use-record-comments.ts
+const pageSize = 20;
+/** A record's comments, oldest first: the newest page, then each earlier one `fetchNextPage` loads, at the top. */
+const useRecordComments = (resource, recordKey) => {
+	const client = useClient();
+	const query = useInfiniteQuery({
+		queryKey: keys.comments(resource, recordKey),
+		initialPageParam: "",
+		queryFn: ({ pageParam }) => client.comments(resource, recordKey, {
+			pageSize,
+			pageToken: pageParam
+		}),
+		getNextPageParam: (last) => last.nextPageToken || void 0
+	});
+	return {
+		...query,
+		items: query.data?.pages.flatMap((page) => page.items).reverse() ?? []
+	};
+};
+//#endregion
+export { useRecordComments };

package/dist/app/current-address.d.ts

@@ -1,8 +1,8 @@
-import { AppAddress, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
+import { AppAddress, CalendarView, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
 /**
- * A list as the app shows it: every value there, the view's default where the address names none; `map` and
- * `savedSearch`, the saved search it was opened from, have none.
+ * A list as the app shows it: every value there, the view's default where the address names none; `map`, `calendar`
+ * and `savedSearch`, the saved search it was opened from, have none.
  */
 export type ListAddress = {
   kind: 'list';
@@ -12,6 +12,7 @@ export type ListAddress = {
   orderBy: string;
   filterLayout: FilterLayout;
   map?: MapView;
+  calendar?: CalendarView;
   savedSearch?: string;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */

package/dist/app/current-address.js

@@ -56,6 +56,7 @@ const changedList = (read, change, defaults) => {
 		...differs("orderBy") && { orderBy: next.orderBy },
 		...differs("filterLayout") && { filterLayout: next.filterLayout },
 		...next.map && { map: next.map },
+		...next.calendar && { calendar: next.calendar },
 		...next.savedSearch && { savedSearch: next.savedSearch }
 	};
 };

package/dist/app/displays/calendar-controls.js

@@ -0,0 +1,70 @@
+import { segmentedClass } from "../../primitives/segmented.js";
+import { dayIn, viewerZone } from "../../format/zone.js";
+import { formatDayRange, formatMonth } from "../../format/date.js";
+import { buttonClass } from "../../primitives/button.js";
+import { AppLink } from "../use-app-address.js";
+import { calendarView, gridDays, stepView, todayView } from "./calendar-range.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/calendar-controls.tsx
+/** The heading of the month or week a calendar shows. */
+const periodText = (view) => {
+	const days = gridDays(view);
+	const ms = (day) => Date.parse(`${day}T00:00:00Z`);
+	return view.scale === "month" ? formatMonth(ms(view.day)) : formatDayRange(ms(days[0]), ms(days.at(-1)));
+};
+/**
+* The month or week a calendar shows, with the way to the one before, the one holding today, the one after, and the
+* month or the week: links when the calendar's view is in the address, so each opens in a new tab, else buttons.
+*/
+const CalendarControls = ({ view, now, linkTo, onView }) => {
+	const control = (to, className, label, children, current) => linkTo ? /* @__PURE__ */ jsx(AppLink, {
+		to: linkTo(to),
+		className,
+		"aria-label": label,
+		"aria-current": current ? "page" : void 0,
+		children
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		"aria-label": label,
+		"aria-pressed": current,
+		onClick: () => onView?.(to),
+		children
+	});
+	const holdsToday = view.scale === "month" && dayIn(now, viewerZone()).startsWith(view.day.slice(0, 7));
+	const scaled = (to) => to === "week" && holdsToday ? todayView("week", now) : calendarView({
+		scale: to,
+		day: view.day
+	}, now);
+	const scale = (to, label) => control(scaled(to), segmentedClass.option(view.scale === to), label, label, view.scale === to);
+	const unit = view.scale === "month" ? "month" : "week";
+	const square = buttonClass({
+		variant: "secondary",
+		size: "sm"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "text-sm font-medium",
+			children: periodText(view)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					control(stepView(view, -1), square, `Previous ${unit}`, /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })),
+					control(todayView(view.scale, now), square, "Today", "Today"),
+					control(stepView(view, 1), square, `Next ${unit}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }))
+				]
+			}), /* @__PURE__ */ jsxs("span", {
+				role: "group",
+				"aria-label": "Calendar scale",
+				className: segmentedClass.group(),
+				children: [scale("month", "Month"), scale("week", "Week")]
+			})]
+		})]
+	});
+};
+//#endregion
+export { CalendarControls, periodText };

package/dist/app/displays/calendar-day.js

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/cn.js";
+import { formatWeekday, formatWeekdayDate } from "../../format/date.js";
+import { dayId } from "./calendar-dnd.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDroppable } from "@dnd-kit/core";
+//#region src/app/displays/calendar-day.tsx
+/** A day of a calendar, where an event is dropped: headed by its number, today marked, its events in start order. */
+const CalendarDay = ({ day, count, children, more, inMonth, today, week }) => {
+	const { setNodeRef, isOver } = useDroppable({ id: dayId(day) });
+	const ms = Date.parse(`${day}T00:00:00Z`);
+	return /* @__PURE__ */ jsxs("section", {
+		ref: setNodeRef,
+		"aria-label": `${formatWeekdayDate(ms)}, ${count}`,
+		className: cn("flex min-w-0 flex-col gap-1 bg-background p-1", week ? "min-h-28 sm:min-h-64" : "min-h-24", !inMonth && "bg-surface", isOver && "ring-2 ring-inset ring-primary/30"),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: cn("flex items-center gap-1 px-0.5 text-xs", inMonth ? "text-foreground" : "text-muted-foreground"),
+				children: [week && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: formatWeekday(ms)
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-current": today ? "date" : void 0,
+					className: cn("inline-flex size-5 items-center justify-center rounded-full tabular-nums", today && "bg-primary font-medium text-primary-foreground"),
+					children: Number(day.slice(8))
+				})]
+			}),
+			children,
+			more
+		]
+	});
+};
+//#endregion
+export { CalendarDay };