@protobase/ui 0.55.2 → 0.55.4

package/dist/chat/chat-thread.js

@@ -3,15 +3,18 @@ import { Button } from "../primitives/button.js";
 import { text } from "./messages.js";
 import { scrollAfterChange } from "./thread-scroll.js";
 import { readPlace } from "./read-place.js";
+import { useReadToEnd } from "./use-read-to-end.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-thread.tsx
+const newLineOf = (list) => list.querySelector("[data-chat-divider][data-tone=\"new\"]");
 /**
-* The scrolling list of a chat's messages. A reader at the end follows new messages; one who scrolled back stays where
-* they are until `followKey` changes, and earlier messages loaded above keep them on the message they were reading. It
-* scrolls inside itself, not with the page, since a chat keeps its composer in view beneath it.
+* The scrolling list of a chat's messages. It opens on its `ChatDivider tone="new"` line when it has one, else at the
+* end. A reader at the end follows new messages; one who scrolled back stays where they are until `followKey` changes,
+* and earlier messages loaded above keep them on the message they were reading. It scrolls inside itself, not with the
+* page, since a chat keeps its composer in view beneath it.
 */
-const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }) => {
+const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey, onReadToEnd }) => {
 	const box = useRef(null);
 	const list = useRef(null);
 	const place = useRef({
@@ -22,20 +25,31 @@ const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, fo
 	const remember = () => {
 		if (box.current && list.current) place.current = readPlace(box.current, list.current, followKey);
 	};
+	const readToEnd = () => place.current.atEnd && place.current.first !== void 0;
+	const tellRead = useReadToEnd(onReadToEnd, readToEnd);
+	const scrolled = () => {
+		const wasAtEnd = place.current.atEnd;
+		remember();
+		if (!wasAtEnd && readToEnd()) tellRead();
+	};
 	useLayoutEffect(() => {
 		const element = box.current;
 		if (!element || !list.current) return;
 		const before = place.current;
 		const anchorTop = before.anchor && before.anchor.element.isConnected ? before.anchor.element.getBoundingClientRect().top - element.getBoundingClientRect().top : void 0;
+		const newLine = newLineOf(list.current);
+		const newLineTop = newLine ? newLine.getBoundingClientRect().top - element.getBoundingClientRect().top : void 0;
 		const next = scrollAfterChange(before, {
 			first: list.current.firstElementChild ?? void 0,
 			anchorTop,
 			scrollTop: element.scrollTop,
 			scrollHeight: element.scrollHeight,
-			followKey
+			followKey,
+			newLineTop
 		});
 		if (next !== void 0) element.scrollTop = next;
 		remember();
+		if (readToEnd()) tellRead();
 	}, [length, followKey]);
 	useEffect(() => {
 		const element = box.current;
@@ -50,7 +64,7 @@ const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, fo
 	const showsEmpty = length === 0 && Boolean(empty);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: box,
-		onScroll: remember,
+		onScroll: scrolled,
 		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 [overflow-anchor:none]",
 		children: [
 			onLoadEarlier && /* @__PURE__ */ jsx(Button, {

package/dist/chat/thread-scroll.js

@@ -2,12 +2,15 @@
 const isAtEnd = (box) => box.scrollHeight - box.scrollTop - box.clientHeight <= 24;
 /**
 * The scroll position a chat takes once its messages or follow key changed, or `undefined` to stay put. A changed follow
-* key, such as the reader sending a message, goes to the end wherever the reader was. Messages loaded before the first
+* key, such as the reader sending a message, goes to the end wherever the reader was. A chat that gets its first
+* messages opens with its "New messages" line near the top, when it has one at `newLineTop` below the top of the box,
+* and at the end otherwise. Messages loaded before the first
 * keep the reader on the message they were reading, moved by as much as it moved; otherwise a reader at the end follows
 * the newest message, and one who scrolled back stays where they are.
 */
 const scrollAfterChange = (before, now) => {
 	if (now.followKey !== before.followKey) return now.scrollHeight;
+	if (before.first === void 0 && now.first !== void 0 && now.newLineTop !== void 0) return Math.max(0, now.scrollTop + now.newLineTop - 16);
 	if (before.first !== void 0 && now.first !== before.first && before.anchor && now.anchorTop !== void 0) return now.scrollTop + now.anchorTop - before.anchor.top;
 	if (before.atEnd) return now.scrollHeight;
 };

package/dist/chat/use-read-to-end.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+//#region src/chat/use-read-to-end.ts
+/**
+* Tells `onReadToEnd` that the reader is at the end of a chat, but only while the page shows: the returned function
+* tells it now, and the page becoming visible again tells it when `atEnd()` holds then. Call it before the layout
+* effects that tell, so they tell the latest `onReadToEnd`.
+*/
+const useReadToEnd = (onReadToEnd, atEnd) => {
+	const latest = useRef({
+		onReadToEnd,
+		atEnd
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			onReadToEnd,
+			atEnd
+		};
+	});
+	const tell = useCallback(() => {
+		if (document.visibilityState === "visible") latest.current.onReadToEnd?.();
+	}, []);
+	useEffect(() => {
+		const shown = () => {
+			if (latest.current.atEnd()) tell();
+		};
+		document.addEventListener("visibilitychange", shown);
+		return () => document.removeEventListener("visibilitychange", shown);
+	}, [tell]);
+	return tell;
+};
+//#endregion
+export { useReadToEnd };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
+import { RecordMark } from "./app-shell/nav.js";
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
 import { BoardDrop, BoardDropContext, BoardDropUndo, BoardDropWrite } from "./app/displays/board-drop.js";
 import { Drop, DropRule } from "./app/hand-order/drop-rule.js";
 import { TitleReader, TitleRule } from "./app/titles/title-rule.js";
+import { MarksHook } from "./app/marks/marks-hook.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
@@ -26,8 +28,9 @@ import { ListDisplayRow, RecordCardProps } from "./app/displays/list-displays.js
 import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
-import { MembersResult, useMembers } from "./people/use-members.js";
 import { PushState } from "./notifications/push/web-push.js";
+import { SignedInUser, useSignedInUser } from "./auth/use-signed-in-user.js";
+import { MembersResult, useMembers } from "./people/use-members.js";
 import { usePushNotifications } from "./notifications/push/use-push-notifications.js";
 import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./notifications/bell/use-inbox.js";
 import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
@@ -81,4 +84,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MarksHook, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, type RecordMark, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type SignedInUser, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -59,7 +59,8 @@ import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./no
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
+import { useSignedInUser } from "./auth/use-signed-in-user.js";
 import { Carousel } from "./carousel/carousel.js";
 import { Choices } from "./primitives/choices.js";
 import { RecordPicker } from "./app/record-picker.js";
-export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };

package/dist/notifications/bell/notification-bell.js

@@ -1,13 +1,13 @@
 import { Button } from "../../primitives/button.js";
-import { Badge } from "../../primitives/badge.js";
 import { useRouter } from "../../app/router.js";
 import { usePopoverMenu } from "../../primitives/popover-menu.js";
+import { CountBadge } from "../../primitives/count-badge.js";
 import { usePushNotifications } from "../push/use-push-notifications.js";
 import { NotificationPanel } from "./notification-panel.js";
 import { notificationTarget } from "./notification-target.js";
 import { PushControl } from "./push-control.js";
 import { historyRefused, useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./use-inbox.js";
-import { bellLabel, unreadBadge } from "./unread-label.js";
+import { bellLabel } from "./unread-label.js";
 import { useState } from "react";
 import { Bell } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -25,7 +25,6 @@ const NotificationBell = () => {
 	const push = usePushNotifications();
 	const { navigate, basePath } = useRouter();
 	const [now, setNow] = useState(Date.now);
-	const badge = unreadBadge(unread.data);
 	const label = bellLabel(unread.data);
 	const origin = window.location.origin;
 	if (historyRefused(unread.error)) return null;
@@ -47,11 +46,9 @@ const NotificationBell = () => {
 		"aria-expanded": open,
 		onClick: toggle,
 		className: "relative max-md:size-9",
-		children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 max-md:size-5" }), badge && /* @__PURE__ */ jsx(Badge, {
-			tone: "red",
-			dot: false,
-			className: "pointer-events-none absolute -top-1 -right-1.5 h-4 min-w-4 justify-center px-1 text-[10px] font-semibold max-md:top-0 max-md:right-0",
-			children: badge
+		children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 max-md:size-5" }), /* @__PURE__ */ jsx(CountBadge, {
+			count: unread.data,
+			className: "pointer-events-none absolute -top-1 -right-1.5 max-md:top-0 max-md:right-0"
 		})]
 	}), open && createPortal(/* @__PURE__ */ jsx("div", {
 		ref: menu,

package/dist/notifications/bell/unread-label.js

@@ -1,12 +1,10 @@
 import { text } from "./messages.js";
 //#region src/notifications/bell/unread-label.ts
 const shownMax = 99;
-/** The count over the bell, or none while nothing is unread. */
-const unreadBadge = (count) => count === void 0 || count <= 0 ? void 0 : count > shownMax ? `${shownMax}+` : String(count);
 /** The bell's name for a screen reader, with how many are unread. */
 const bellLabel = (count) => {
 	if (count === void 0 || count <= 0) return text("notifications");
 	return count > shownMax ? text("notificationsManyUnread") : text("notificationsUnread", String(count));
 };
 //#endregion
-export { bellLabel, unreadBadge };
+export { bellLabel };

package/dist/notifications/push/push-notifications.d.ts

@@ -0,0 +1 @@
+import "./web-push.js";

package/dist/package.js

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

package/dist/plugins/plugin-ui.js

@@ -43,6 +43,7 @@ const pluginUi = (plugin, module) => {
 		...ui.dropRules && { dropRules: ui.dropRules },
 		...ui.boardDrops && { boardDrops: ui.boardDrops },
 		...ui.titles && { titles: ui.titles },
+		...ui.marks && { marks: ui.marks },
 		...fields && { fields },
 		...shell && { shell },
 		...beforeSignIn && { beforeSignIn }

package/dist/primitives/count-badge.js

@@ -0,0 +1,20 @@
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/count-badge.tsx
+const shownMax = 99;
+/** A count as its badge shows it: up to 99, then 99+; none while it is zero or unknown. */
+const countBadgeText = (count) => count === void 0 || count <= 0 ? void 0 : count > shownMax ? `${shownMax}+` : String(count);
+/** The small red pill with a count of unread things, such as over the notification bell; nothing while the count is zero. */
+const CountBadge = ({ count, className }) => {
+	const shown = countBadgeText(count);
+	if (!shown) return null;
+	return /* @__PURE__ */ jsx(Badge, {
+		tone: "red",
+		dot: false,
+		className: cn("h-4 min-w-4 justify-center px-1 text-[10px] font-semibold", className),
+		children: shown
+	});
+};
+//#endregion
+export { CountBadge, countBadgeText };