@protobase/ui 0.21.6 → 0.21.8

package/dist/app/related-section.js

@@ -1,11 +1,12 @@
 import { Skeleton } from "../primitives/skeleton.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { Section } from "../record-view/section.js";
 import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
+import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { searchAll } from "../live/search-all.js";
+import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { relatedHandOrder } from "./hand-order/hand-order.js";
@@ -82,6 +83,7 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const permissions = usePermissions(item.resource);
 	const [sorting, setSorting] = useState(false);
 	if (!model) return null;
+	const opens = relatedOpens(item, model, resources);
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
 	const handOrder = relatedHandOrder(item, model, permissions);
 	const displaySwitch = /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
@@ -124,7 +126,8 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 			columns,
 			limit: item.limit ?? 10,
 			display,
-			empty: item.empty
+			empty: item.empty,
+			opens
 		}, match.filter)
 	});
 };

package/dist/app/relation-picker.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
-import { labelFieldOf } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
+import { labelFieldOf } from "../live/model-helpers.js";
 import { useList } from "../data/use-list.js";
 import { relationOptionsQuery, titleMatches } from "./relation-options.js";
 import { useCallback, useEffect, useId, useRef, useState } from "react";

package/dist/app/search/search-model.js

@@ -1,5 +1,5 @@
-import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
 import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 //#region src/app/search/search-model.ts

package/dist/app/searches/saved-search-rows.js

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { InlineFilterChips } from "./filter-chip-list.js";
 import { RecordRowBody } from "../record-row/record-row-body.js";

package/dist/app/searches/saved-searches.js

@@ -1,9 +1,9 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { PageHeader } from "../../app-shell/page-header.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { can } from "../permissions.js";
 import { useSavedSearches } from "./use-saved-searches.js";

package/dist/app/searches/update-search-dialog.js

@@ -2,8 +2,8 @@ import { Skeleton } from "../../primitives/skeleton.js";
 import { Button } from "../../primitives/button.js";
 import { useClient } from "../../data/api-provider.js";
 import { humanize } from "../../live/naming.js";
-import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { defaultOrderBy } from "../list-order.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
 import { countQuery } from "../pages/use-layout-data.js";
 import { useFilterChips } from "./use-filter-chips.js";
 import { EmbeddedList } from "../embedded-list/embedded-list.js";

package/dist/app/searches/use-save-search.js

@@ -1,7 +1,7 @@
 import { useClient } from "../../data/api-provider.js";
-import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { useToast } from "../../toasts/toast-provider.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";

package/dist/app/searches/use-saved-searches.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { defaultOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { useQuery } from "@tanstack/react-query";
 //#region src/app/searches/use-saved-searches.ts
 /** Where the user's saved searches of `resource` are cached; a list key, so a write to the resource refreshes it. */

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

@@ -3,13 +3,15 @@ import { AnchorHTMLAttributes } from "react";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/use-app-address.d.ts
 /**
- * The app's address as logical values, and the ways to change it: `set` changes the list in place, `go` moves to
+ * The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
+ * list after a change for a link to it, `go` moves to
  * another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
  * writes the address through this hook, never the query string or a path of its own.
  */
 export declare const useAppAddress: () => {
   address: CurrentAddress | undefined;
   set: (change: ListChange) => void;
+  listTo: (change: ListChange) => AppAddress;
   go: (to: AppAddress, options?: {
     replace?: boolean;
   }) => void;

package/dist/app/use-app-address.js

@@ -1,13 +1,14 @@
 import { useIsXs } from "../lib/use-media-query.js";
 import { Link, useRouter } from "./router.js";
-import { useAdminMeta } from "./meta-gate.js";
 import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
+import { useAdminMeta } from "./meta-gate.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { appPath, readAppPath } from "@protobase/schema";
 //#region src/app/use-app-address.tsx
 /**
-* The app's address as logical values, and the ways to change it: `set` changes the list in place, `go` moves to
+* The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
+* list after a change for a link to it, `go` moves to
 * another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
 * writes the address through this hook, never the query string or a path of its own.
 */
@@ -32,16 +33,14 @@ const useAppAddress = () => {
 	]);
 	const address = useMemo(() => currentAddress(read, defaults), [read, defaults]);
 	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
+	const listTo = useCallback((change) => {
+		if (read?.kind !== "list") throw new Error("listTo and set change the list the app shows; use go to move to another address");
+		return changedList(read, change, defaults(read.resource));
+	}, [read, defaults]);
 	return {
 		address,
-		set: useCallback((change) => {
-			if (read?.kind !== "list") throw new Error("set changes the list the app shows; use go to move to another address");
-			go(changedList(read, change, defaults(read.resource)), { replace: true });
-		}, [
-			read,
-			defaults,
-			go
-		]),
+		set: useCallback((change) => go(listTo(change), { replace: true }), [listTo, go]),
+		listTo,
 		go,
 		href: useCallback((to) => appPath(to, basePath), [basePath]),
 		open: useCallback((target) => navigate(target.startsWith(`${basePath}/`) ? target.slice(basePath.length) : target), [basePath, navigate])

package/dist/assistant-dock/widget-view.js

@@ -1,6 +1,6 @@
 import { reportRenderError } from "../app/error-reporting.js";
-import { ActionCard } from "../action-card/action-card.js";
 import { useProjectUi } from "../app/pages/project-ui.js";
+import { ActionCard } from "../action-card/action-card.js";
 import { Component } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/assistant-dock/widget-view.tsx

package/dist/auth/auth-layout.d.ts

@@ -3,8 +3,10 @@ import { ReactNode } from "react";
 export type AuthLayoutProps = {
   title: string;
   description?: string;
+  /** How wide the card is: `sm`, the default, for a few short inputs; `md` for a form with longer ones. */
+  size?: 'sm' | 'md';
   children: ReactNode;
 };
-/** The frame of the sign-in and first-run pages: logo, title and a card. */
-export declare const AuthLayout: ({ title, description, children }: AuthLayoutProps) => import("react").JSX.Element;
+/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+export declare const AuthLayout: ({ title, description, size, children }: AuthLayoutProps) => import("react").JSX.Element;
 //#endregion

package/dist/auth/auth-layout.js

@@ -1,11 +1,12 @@
+import { cn } from "../lib/cn.js";
 import { LogoMark } from "../app-shell/logo.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-layout.tsx
-/** The frame of the sign-in and first-run pages: logo, title and a card. */
-const AuthLayout = ({ title, description, children }) => /* @__PURE__ */ jsx("div", {
+/** The frame of the sign-in and first-run pages and of public forms: logo, title and a card. */
+const AuthLayout = ({ title, description, size = "sm", children }) => /* @__PURE__ */ jsx("div", {
 	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 py-10",
 	children: /* @__PURE__ */ jsxs("div", {
-		className: "w-full max-w-sm",
+		className: cn("w-full", size === "sm" ? "max-w-sm" : "max-w-lg"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-6 flex flex-col items-center text-center",
 			children: [

package/dist/auth/user-to-shell.js

@@ -1,5 +1,7 @@
 //#region src/auth/user-to-shell.ts
+/** The hue of someone's avatar, the same for the same id. */
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
+/** The initials of someone's avatar: the first letters of the first two words of their name. */
 const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
 const rolesOf = (user) => (user.role ?? "user").split(",").map((role) => role.trim());
 /** The user holds the `admin` role, among others perhaps. */
@@ -18,4 +20,4 @@ const userToShell = (user) => {
 	};
 };
 //#endregion
-export { isAdmin, userToShell };
+export { hueOf, initialsOf, isAdmin, userToShell };

package/dist/data/api-provider.d.ts

@@ -15,11 +15,21 @@ export declare const useClient: () => {
     etag?: string;
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  generate: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], action: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
   history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
     pageSize?: number;
     pageToken?: string;
   }) => Promise<import("@protobase/client").HistoryPage>;
+  comments: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").CommentPage>;
+  comment: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { body, mentions }: {
+    body: string;
+    mentions?: string[];
+  }) => Promise<import("@protobase/client").RecordComment>;
+  mentionable: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], query: string) => Promise<import("@protobase/client").MentionableUser[]>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
@@ -43,6 +53,9 @@ export declare const useClient: () => {
   }) => Promise<import("@protobase/client").MetaResult>;
   invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
   upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
+  form: (name: string) => Promise<import("@protobase/client").PublicForm>;
+  formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
+  submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -60,11 +73,21 @@ export declare const useResourceClient: (resource: string) => {
     etag?: string;
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  generate: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], action: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
   history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
     pageSize?: number;
     pageToken?: string;
   }) => Promise<import("@protobase/client").HistoryPage>;
+  comments: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").CommentPage>;
+  comment: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { body, mentions }: {
+    body: string;
+    mentions?: string[];
+  }) => Promise<import("@protobase/client").RecordComment>;
+  mentionable: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], query: string) => Promise<import("@protobase/client").MentionableUser[]>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
@@ -88,6 +111,9 @@ export declare const useResourceClient: (resource: string) => {
   }) => Promise<import("@protobase/client").MetaResult>;
   invoke: <T = unknown>(name: string, { method, body, path, query, headers }?: import("@protobase/client").InvokeOptions) => Promise<T>;
   upload: (resource: import("@protobase/client").ResourceRef, field: string, file: Blob, { onProgress, signal }?: import("@protobase/client").UploadOptions) => Promise<import("@protobase/client").UploadResult>;
+  form: (name: string) => Promise<import("@protobase/client").PublicForm>;
+  formChallenge: (name: string) => Promise<import("@protobase/client").FormChallenge>;
+  submitForm: (name: string, values: Record<string, unknown>, proof: import("@protobase/client").FormProof) => Promise<void>;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data/query-keys.js

@@ -66,6 +66,21 @@ const keys = {
 		"history",
 		pageSize
 	],
+	/** A record's comments; starts with `record`, so refreshing the record refreshes them too. */
+	comments: (resource, key) => [
+		"record",
+		resource,
+		key,
+		"comments"
+	],
+	/** The people a comment on a record may mention whose name contains `query`. */
+	mentionable: (resource, key, query) => [
+		"record",
+		resource,
+		key,
+		"mentionable",
+		query
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,
@@ -134,7 +149,9 @@ const keys = {
 		resource,
 		key,
 		path
-	]
+	],
+	/** A public form, as `/-/forms/<name>` draws it. */
+	publicForm: (name) => ["public-form", name]
 };
 //#endregion
 export { keys };

package/dist/data-grid/row-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -70,7 +71,13 @@ const RowMenu = ({ row, actions }) => {
 			className: "fixed z-50 min-w-36 rounded-md border bg-background py-1 shadow-pop",
 			children: actions.map((action) => /* @__PURE__ */ jsx("li", {
 				role: "none",
-				children: /* @__PURE__ */ jsx("button", {
+				children: action.link ? /* @__PURE__ */ jsx(RouteLink, {
+					role: "menuitem",
+					to: action.link(row),
+					onClick: () => setOpen(false),
+					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),
+					children: action.label
+				}) : /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "menuitem",
 					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),

package/dist/format/date.js

@@ -16,9 +16,35 @@ const time = new Intl.DateTimeFormat("en-GB", {
 	hour12: false,
 	timeZone: "UTC"
 });
+const month = new Intl.DateTimeFormat("en-GB", {
+	month: "long",
+	year: "numeric",
+	timeZone: "UTC"
+});
+const weekday = new Intl.DateTimeFormat("en-GB", {
+	weekday: "short",
+	timeZone: "UTC"
+});
+const weekdayDate = new Intl.DateTimeFormat("en-GB", {
+	weekday: "long",
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: "UTC"
+});
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
 const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+/** "October 2026". */
+const formatMonth = (ms) => month.format(ms);
+/** "Mon". */
+const formatWeekday = (ms) => weekday.format(ms);
+/** "Monday, 12 Oct 2026". */
+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);
 const formatAgo = (seconds) => {
 	if (seconds < 60) return `${seconds} s ago`;
 	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
@@ -40,4 +66,4 @@ const formatRelativeTime = (seconds) => {
 	return relative.format(-Math.floor(seconds / size), unit);
 };
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayShort, formatRelativeTime };
+export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };

package/dist/forms/prove-human.js

@@ -0,0 +1,24 @@
+import { solveChallenge } from "altcha-lib";
+import { deriveKey } from "altcha-lib/algorithms/web/sha";
+//#region src/forms/prove-human.ts
+/**
+* The bot check of a public form, done: fetches a fresh challenge and solves it in this browser, about a second of its
+* work, so a check never expires while someone types.
+*/
+const proveHuman = async (client, name) => {
+	const challenge = await client.formChallenge(name);
+	const solution = await solveChallenge({
+		challenge,
+		deriveKey
+	});
+	if (!solution) throw new Error("The check that you are not a bot took too long; send the form again");
+	return {
+		challenge,
+		solution: {
+			counter: solution.counter,
+			derivedKey: solution.derivedKey
+		}
+	};
+};
+//#endregion
+export { proveHuman };

package/dist/forms/public-form-page.js

@@ -0,0 +1,142 @@
+import { Spinner } from "../primitives/spinner.js";
+import { Button } from "../primitives/button.js";
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { AuthLayout } from "../auth/auth-layout.js";
+import { humanize } from "../live/naming.js";
+import { Field } from "../record-view/field.js";
+import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
+import { useDocumentTitle } from "../app/document-title.js";
+import { ErrorBanner } from "../app/error-banner.js";
+import { Notice } from "../app/meta-gate.js";
+import { FieldEditor } from "../app/field-editor.js";
+import { fieldErrors, fieldMessage } from "../app/field-errors.js";
+import { useFocusFirstInvalid } from "../app/use-focus-first-invalid.js";
+import { proveHuman } from "./prove-human.js";
+import { useState } from "react";
+import { isApiError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/forms/public-form-page.tsx
+/**
+* `/-/forms/<name>`: a public form, for anyone, signed in or not. It sends with a bot check its browser solves, and
+* then shows the form's thanks in its place.
+*/
+const PublicFormPage = ({ name }) => {
+	const client = useClient();
+	const form = useQuery({
+		queryKey: keys.publicForm(name),
+		queryFn: () => client.form(name)
+	});
+	if (form.isPending) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-48 items-center justify-center gap-2 text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+	});
+	if (form.error) {
+		if (isApiError(form.error) && form.error.status === 404) return /* @__PURE__ */ jsx(Notice, {
+			title: "Not found",
+			children: "There is no form at this address."
+		});
+		return /* @__PURE__ */ jsx(Notice, {
+			title: "Cannot reach the API",
+			children: isApiError(form.error) ? form.error.message : "The server did not answer. Is it running?"
+		});
+	}
+	return /* @__PURE__ */ jsx(LoadedForm, { form: form.data });
+};
+const LoadedForm = ({ form }) => {
+	const client = useClient();
+	const { resource: model, view } = form;
+	const title = form.title ?? view.names?.singular ?? humanize(view.resource);
+	useDocumentTitle(title);
+	const [draft, setDraft] = useState(() => initialDraft(model, [{
+		title,
+		fields: form.fields
+	}]));
+	const [errors, setErrors] = useState({});
+	const [failure, setFailure] = useState();
+	const [sending, setSending] = useState(false);
+	const [sent, setSent] = useState(false);
+	const [rejections, setRejections] = useState(0);
+	const formRef = useFocusFirstInvalid(rejections);
+	if (sent) return /* @__PURE__ */ jsx(AuthLayout, {
+		title,
+		size: "md",
+		children: /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+			children: form.thanks
+		})
+	});
+	const change = (name, value) => {
+		setErrors((current) => Object.fromEntries(Object.entries(current).filter(([field]) => field !== name)));
+		setDraft((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const send = async () => {
+		setSending(true);
+		setFailure(void 0);
+		try {
+			await client.submitForm(form.name, createBody(model, {}, draft), await proveHuman(client, form.name));
+			setSent(true);
+		} catch (error) {
+			const found = fieldErrors(error);
+			setErrors(found);
+			if (Object.keys(found).length > 0) setRejections((count) => count + 1);
+			else setFailure(error);
+		} finally {
+			setSending(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title,
+		size: "md",
+		children: /* @__PURE__ */ jsxs("form", {
+			ref: formRef,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				send();
+			},
+			children: [
+				form.fields.map((name) => {
+					const field = model.fields[name];
+					const hints = view.fields[name];
+					const label = hints?.label ?? humanize(name);
+					const problem = errors[name];
+					return /* @__PURE__ */ jsx(Field, {
+						name,
+						label,
+						help: hints?.help,
+						required: isRequired(field),
+						error: problem && fieldMessage(field, label, problem),
+						children: /* @__PURE__ */ jsx(FieldEditor, {
+							field,
+							hints,
+							value: draft[name] ?? (field.type === "boolean" ? false : ""),
+							stored: void 0,
+							placeholder: hasDatabaseDefault(field) ? "Set by the database" : void 0,
+							invalid: Boolean(problem),
+							onChange: (next) => change(name, next)
+						})
+					}, name);
+				}),
+				failure !== void 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+					title: "Not sent",
+					error: failure
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: sending,
+					className: "min-h-10",
+					children: "Send"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { PublicFormPage };

package/dist/forms/use-form-address.js

@@ -0,0 +1,11 @@
+import { useRouter } from "../app/router.js";
+import { useMemo } from "react";
+import { readFormAddress } from "@protobase/schema";
+//#region src/forms/use-form-address.ts
+/** The public form the address shows, `/-/forms/<name>`, as logical values; `undefined` on any other page. */
+const useFormAddress = () => {
+	const { path } = useRouter();
+	return useMemo(() => readFormAddress(path), [path]);
+};
+//#endregion
+export { useFormAddress };

package/dist/index.js

@@ -16,6 +16,13 @@ import { usePlugin } from "./plugins/plugin-context.js";
 import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
+import { Field } from "./record-view/field.js";
+import { Section } from "./record-view/section.js";
+import { Textarea } from "./primitives/textarea.js";
+import { useMeta } from "./data/use-meta.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { useList } from "./data/use-list.js";
+import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { ChatThread } from "./chat/chat-thread.js";
 import { Composer } from "./chat/composer.js";
@@ -26,19 +33,12 @@ import { CompactTable } from "./compact-table/compact-table.js";
 import { diffStats, parseDiff } from "./diff-view/diff.js";
 import { DiffView } from "./diff-view/diff-view.js";
 import { StepList } from "./step-list/step-list.js";
-import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useBackendData } from "./assistant-dock/use-backend-data.js";
 import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
-import { useMeta } from "./data/use-meta.js";
 import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
-import { Field } from "./record-view/field.js";
-import { Section } from "./record-view/section.js";
-import { Textarea } from "./primitives/textarea.js";
-import { AppLink, useAppAddress } from "./app/use-app-address.js";
-import { useList } from "./data/use-list.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";

package/dist/live/columns-from-model.js

@@ -1,8 +1,8 @@
-import { recordTitleField } from "./model-helpers.js";
 import { humanize } from "./naming.js";
 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 { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {

package/dist/live/use-filter-config.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { labelFieldOf } from "./model-helpers.js";
 import { humanize } from "./naming.js";
+import { labelFieldOf } from "./model-helpers.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";

package/dist/package.js

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

package/dist/plugins/plugin-gate.js

@@ -2,8 +2,8 @@ import { Spinner } from "../primitives/spinner.js";
 import { mergePlugins } from "./merge-plugins.js";
 import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
-import { ProjectUiContext } from "../app/pages/project-ui.js";
 import { useAdminMeta } from "../app/meta-gate.js";
+import { ProjectUiContext } from "../app/pages/project-ui.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/plugins/plugin-gate.tsx