@protobase/ui 0.6.0 → 0.8.0

package/dist/app/app.js

@@ -4,6 +4,7 @@ import { AuthProvider, useAuth } from "../auth/auth-provider.js";
 import { AccountSecurityPage } from "../account/account-security-page.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
 import { ApiProvider } from "../data/api-provider.js";
+import { managesOrganization, organizationMenuItems, organizationPageTitles } from "../organizations/organization-paths.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
@@ -17,6 +18,11 @@ import { Router, matchRoute, useRouter } from "./router.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
 import { CreatePage } from "./create/create-page.js";
 import { ListPage } from "./list-page.js";
+import { MembersPage } from "../organizations/members-page.js";
+import { InvitationsPage } from "../organizations/invitations-page.js";
+import { reopenIn, useOrganizations } from "../organizations/use-organizations.js";
+import { OrganizationPage } from "../organizations/organization-page.js";
+import { OrganizationsPage } from "../organizations/organizations-page.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
 import { ComposedPage } from "./pages/composed-page.js";
@@ -31,7 +37,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/app.tsx
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
-	const { state, signOut, stopStaffSession } = useAuth();
+	const { state, session, signOut, stopStaffSession, organizations: organizationSettings } = useAuth();
 	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
 	const { user, staff } = state;
 	const { path, params, basePath, navigate } = useRouter();
@@ -75,7 +81,11 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		client: runtime
 	});
 	const admin = isAdmin(user);
-	const accountPage = path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : void 0;
+	const organizations = useOrganizations(Boolean(organizationSettings));
+	const current = organizations.current;
+	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
+	const organizationPage = organizationSettings ? organizationPageTitles[path] : void 0;
+	const accountPage = path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : organizationPage;
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
 		route,
@@ -87,6 +97,16 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const content = path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: "Admins only",
 		children: "Only an admin can change how people sign in."
+	}) : organizationPage && path === "/-/organization" ? /* @__PURE__ */ jsx(OrganizationPage, {
+		current,
+		basePath,
+		onChanged: organizations.reload
+	}) : organizationPage && (path === "/-/organization/members" || path === "/-/organization/invitations") ? !managesOrganization(current) ? /* @__PURE__ */ jsx(Notice, {
+		title: "Owners and admins only",
+		children: "Only the organization's owners and admins manage its members."
+	}) : path === "/-/organization/members" ? /* @__PURE__ */ jsx(MembersPage, { current }) : /* @__PURE__ */ jsx(InvitationsPage, { current }) : organizationPage && path === "/-/organizations" || outsideOrganizations ? /* @__PURE__ */ jsx(OrganizationsPage, {
+		state: organizations,
+		basePath
 	}) : !route.resource ? /* @__PURE__ */ jsx(Notice, {
 		title: "Choose a resource",
 		children: "Pick one from the sidebar."
@@ -100,9 +120,21 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		breadcrumb,
 		user: userToShell(user),
 		onSignOut: () => void signOut(),
-		workspace,
+		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
-		userMenu: [...userMenuFromMeta(meta, basePath, route.resource), ...accountMenuItems(basePath, path, admin)],
+		userMenu: [
+			...userMenuFromMeta(meta, basePath, route.resource),
+			...organizationSettings ? organizationMenuItems(basePath, path, current) : [],
+			...accountMenuItems(basePath, path, admin)
+		],
+		organizations: organizationSettings && {
+			...current?.organization && { current: {
+				id: current.organization.id,
+				name: current.organization.name
+			} },
+			others: organizations.organizations.filter((organization) => organization.id !== current?.organization?.id),
+			onSwitch: (id) => void session.organizations.switchTo(id).then(() => reopenIn(basePath))
+		},
 		onNavigate: open,
 		search: search.available ? {
 			placeholder: search.placeholder,

package/dist/app/create/create-page.js

@@ -99,6 +99,7 @@ const LoadedCreate = ({ resource }) => {
 						view: meta.views[target.name]
 					} : void 0,
 					invalid: Boolean(errors[name]),
+					resource: model.name,
 					onChange: (next) => change(name, next)
 				})
 			};

package/dist/app/create/create-values.js

@@ -36,6 +36,7 @@ const createBody = (model, resources, draft) => Object.fromEntries(Object.entrie
 	if (!field) return [];
 	if (isChosen(value)) return [[name, keyValue(resources[field.relation?.resource ?? ""], value.key)]];
 	if (field.type === "boolean") return [[name, Boolean(value)]];
+	if (field.type === "file") return value ? [[name, toPatchValue(field, value)]] : [];
 	if (String(value).trim() === "") return [];
 	return [[name, toPatchValue(field, value)]];
 }));

package/dist/app/field-editor.js

@@ -6,6 +6,7 @@ import { RelationPicker } from "./relation-picker.js";
 import { displayValue } from "../live/display-value.js";
 import { isEditable } from "../live/field-values.js";
 import { SensitiveField } from "./sensitive-field.js";
+import { FileField } from "./file-field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -14,7 +15,16 @@ const numeric = /* @__PURE__ */ new Set([
 	"bigint",
 	"decimal"
 ]);
-const FieldEditor = ({ field, hints, value, stored, relationLabel, relationHref, relationPicker, invalid, locked, placeholder, reveal, onChange }) => {
+const FieldEditor = ({ field, hints, value, stored, relationLabel, relationHref, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
+	if (field.type === "file") return /* @__PURE__ */ jsx(FileField, {
+		field,
+		hints,
+		resource: resource ?? "",
+		value,
+		locked: locked || !resource,
+		invalid,
+		onChange
+	});
 	if (field.sensitive) return /* @__PURE__ */ jsx(SensitiveField, {
 		field,
 		hints,

package/dist/app/file-field.js

@@ -0,0 +1,177 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { useClient } from "../data/api-provider.js";
+import { humanize } from "../live/naming.js";
+import { acceptOf, fileShown, formatSize, isPreviewable } from "../live/file-values.js";
+import { ErrorBanner } from "./error-banner.js";
+import { useRef, useState } from "react";
+import { FileText, Paperclip, Upload } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+//#region src/app/file-field.tsx
+const Thumbnail = ({ url, type }) => url && isPreviewable(type) ? /* @__PURE__ */ jsx("img", {
+	src: url,
+	alt: "",
+	className: "size-10 shrink-0 rounded border border-border object-cover"
+}) : /* @__PURE__ */ jsx("span", {
+	className: "flex size-10 shrink-0 items-center justify-center rounded border border-border bg-muted text-muted-foreground",
+	children: /* @__PURE__ */ jsx(FileText, { className: "size-4" })
+});
+/** The file as it is: thumbnail or icon, name (a link while it has a URL), type and size, and what the server corrected. */
+const FileSummary = ({ value }) => {
+	const shown = fileShown(value);
+	if (!shown) return /* @__PURE__ */ jsx("div", {
+		className: "py-1.5 text-[13px] text-muted-foreground",
+		children: "—"
+	});
+	if ("missing" in shown) return /* @__PURE__ */ jsx("div", {
+		className: "py-1.5 text-[13px] text-danger-text",
+		children: "The file is missing from storage"
+	});
+	const url = "url" in shown ? shown.url : void 0;
+	const corrected = "corrected" in shown ? shown.corrected : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-3 py-1",
+		children: [/* @__PURE__ */ jsx(Thumbnail, {
+			url,
+			type: shown.type
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 text-[13px]",
+			children: [url && !url.startsWith("blob:") ? /* @__PURE__ */ jsx("a", {
+				href: url,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "block truncate font-medium text-primary-text hover:underline",
+				children: shown.name
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "block truncate font-medium",
+				children: shown.name
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "block truncate text-xs text-muted-foreground",
+				children: [
+					shown.type,
+					shown.size !== void 0 && ` · ${formatSize(shown.size)}`,
+					corrected && ` · sent as ${corrected.from}`
+				]
+			})]
+		})]
+	});
+};
+/**
+* A file field: drop a file or choose one, and it uploads at once with progress; Save then stores it with the record.
+* The type shown is the one the server detected, so a `photo.png` that is a JPEG says so.
+*/
+const FileField = ({ field, hints, resource, value, locked, invalid, onChange }) => {
+	const client = useClient();
+	const input = useRef(null);
+	const [progress, setProgress] = useState();
+	const [dragging, setDragging] = useState(false);
+	const label = hints?.label ?? humanize(field.name);
+	const upload = useMutation({
+		mutationFn: async (file) => {
+			setProgress(0);
+			const uploaded = await client.upload(resource, field.name, file, { onProgress: (sent, total) => setProgress(total > 0 ? sent / total : 0) });
+			return {
+				uploaded,
+				...isPreviewable(uploaded.file.type) && { preview: URL.createObjectURL(file) }
+			};
+		},
+		onSuccess: (draft) => onChange(draft),
+		onSettled: () => setProgress(void 0)
+	});
+	if (locked || field.readOnly) return /* @__PURE__ */ jsx(FileSummary, { value });
+	const choose = (files) => {
+		const file = files?.[0];
+		if (file) upload.mutate(file);
+	};
+	const drop = (event) => {
+		event.preventDefault();
+		setDragging(false);
+		choose(event.dataTransfer.files);
+	};
+	const picker = /* @__PURE__ */ jsx("input", {
+		ref: input,
+		type: "file",
+		hidden: true,
+		accept: acceptOf(field),
+		"aria-label": `Choose a file for ${label}`,
+		onChange: (event) => choose(event.target.files)
+	});
+	const error = upload.error && /* @__PURE__ */ jsx("div", {
+		className: "mt-2",
+		children: /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "Not uploaded",
+			error: upload.error
+		})
+	});
+	if (upload.isPending) return /* @__PURE__ */ jsxs("div", {
+		className: "py-1.5",
+		role: "status",
+		"aria-label": `Uploading ${label}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "h-1.5 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-primary transition-[width]",
+				style: { width: `${Math.round((progress ?? 0) * 100)}%` }
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"Uploading… ",
+				Math.round((progress ?? 0) * 100),
+				"%"
+			]
+		})]
+	});
+	if (fileShown(value)) return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ jsx(FileSummary, { value })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onClick: () => input.current?.click(),
+					children: "Replace"
+				}),
+				field.nullable && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => onChange(null),
+					children: "Remove"
+				})
+			]
+		}),
+		picker,
+		error
+	] });
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			onDragOver: (event) => {
+				event.preventDefault();
+				setDragging(true);
+			},
+			onDragLeave: () => setDragging(false),
+			onDrop: drop,
+			className: cn("flex items-center gap-3 rounded-md border border-dashed px-3 py-2.5 text-[13px] text-muted-foreground", dragging ? "border-primary bg-primary/5" : invalid ? "border-danger" : "border-border-strong"),
+			children: [
+				/* @__PURE__ */ jsx(Upload, { className: "size-4 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: "Drop a file here or"
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					onClick: () => input.current?.click(),
+					children: [/* @__PURE__ */ jsx(Paperclip, { className: "size-3.5" }), "Choose a file"]
+				})
+			]
+		}),
+		picker,
+		error
+	] });
+};
+//#endregion
+export { FileField };

package/dist/app/pages/blocks/modal-form.js

@@ -20,6 +20,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 /** The literal defaults of new records, or the record's values when editing; relations as `{ key, label }` once chosen. */
 const startingDraft = (model, fields, record) => Object.fromEntries(fields.map((name) => {
 	const field = model.fields[name];
+	if (field.type === "file") return [name, record?.record[name] ?? null];
 	if (record) return [name, field.type === "boolean" ? Boolean(record.record[name]) : toDraft(record.record[name])];
 	const fallback = field.default && "value" in field.default ? field.default.value : void 0;
 	return [name, field.type === "boolean" ? Boolean(fallback) : toDraft(fallback)];
@@ -99,6 +100,7 @@ const ModalFormDialog = ({ model, record, mode, label, title, fields, values, on
 							view: views[target.name]
 						} : void 0,
 						invalid: Boolean(errors[name]),
+						resource: model.name,
 						onChange: (next) => {
 							setErrors(({ [name]: _, ...rest }) => rest);
 							setDraft((current) => ({

package/dist/app/pages/field-value.js

@@ -3,6 +3,7 @@ import { Badge } from "../../primitives/badge.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { Link } from "../router.js";
+import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { toneFor } from "../../live/columns-from-model.js";
@@ -44,6 +45,14 @@ const FieldValue = ({ model, field, value, format, relationLabel }) => {
 		value,
 		known: relationLabel
 	});
+	const file = field.type === "file" ? fileShown(value) : void 0;
+	if (file && "url" in file && file.url) return /* @__PURE__ */ jsx("a", {
+		href: file.url,
+		target: "_blank",
+		rel: "noreferrer",
+		className: "font-medium text-primary-text hover:underline",
+		children: file.name
+	});
 	const text = displayValue(field, value, hints);
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(Badge, {
 		tone: toneFor(String(value)),

package/dist/app/record-page.js

@@ -151,6 +151,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				locked: !canUpdate || access === "read",
 				invalid: Boolean(editor.errors[name]),
 				reveal: field.sensitive ? () => client.reveal(model.name, recordKey, name) : void 0,
+				resource: model.name,
 				onChange: (next) => editor.change(name, next)
 			})
 		}, field.sensitive ? `${name}:${stored.etag}` : name);

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

@@ -1,5 +1,6 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { displayValue } from "../live/display-value.js";
 import { differs, toDraft, toPatchValue } from "../live/field-values.js";
 import { useLiveSave } from "./use-live-save.js";
 import { readDraft, writeDraft } from "./draft-storage.js";
@@ -48,7 +49,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		lines?.order,
 		stored.etag
 	]);
-	const value = (name) => name in draft ? draft[name] : model.fields[name].type === "boolean" ? stored.record[name] : toDraft(stored.record[name]);
+	const value = (name) => name in draft ? draft[name] : ["boolean", "file"].includes(model.fields[name].type) ? stored.record[name] : toDraft(stored.record[name]);
 	const change = (name, next) => {
 		setErrors((current) => without(current, name));
 		setDraft((current) => differs(model.fields[name], next, stored.record[name]) ? {
@@ -65,7 +66,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 			const field = model.fields[name];
 			if (!differs(field, mine, latest.record[name])) continue;
 			keep[name] = mine;
-			if (toDraft(latest.record[name]) !== toDraft(stored.record[name])) theirs[name] = toDraft(latest.record[name]);
+			if (toDraft(latest.record[name]) !== toDraft(stored.record[name])) theirs[name] = field.type === "file" ? displayValue(field, latest.record[name]) : toDraft(latest.record[name]);
 		}
 		setDraft(keep);
 		setConflicts(theirs);

package/dist/app-shell/app-shell.js

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, onNavigate, onSignOut, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, onNavigate, onSignOut, organizations, search, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -23,7 +23,8 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		groups: navGroups,
 		userMenu,
 		onNavigate,
-		onSignOut
+		onSignOut,
+		organizations
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className),

package/dist/app-shell/profile-menu.js

@@ -2,12 +2,12 @@ import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
 import { useEffect, useRef, useState } from "react";
-import { ChevronsUpDown, LogOut } from "lucide-react";
+import { Check, ChevronsUpDown, LogOut } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */
-const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut }) => {
+const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut, organizations }) => {
 	const [local, setLocal] = useState(false);
 	const open = controlled ?? local;
 	const root = useRef(null);
@@ -77,6 +77,31 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 						children: user.email
 					})]
 				}),
+				organizations && (organizations.current || organizations.others.length > 0) && /* @__PURE__ */ jsxs("div", {
+					className: "border-b py-1",
+					role: "group",
+					"aria-label": "Organizations",
+					children: [organizations.current && /* @__PURE__ */ jsxs("div", {
+						className: cn(menuRow, "text-foreground hover:bg-transparent"),
+						"aria-current": "true",
+						children: [/* @__PURE__ */ jsx(Check, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: organizations.current.name
+						})]
+					}), organizations.others.map((organization) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: "menuitem",
+						onClick: () => {
+							setLocal(false);
+							organizations.onSwitch(organization.id);
+						},
+						className: menuRow,
+						children: [/* @__PURE__ */ jsx("span", { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: organization.name
+						})]
+					}, organization.id))]
+				}),
 				items.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: cn(onSignOut && "border-b"),
 					children: items.map((item) => {

package/dist/app-shell/sidebar.js

@@ -7,7 +7,7 @@ import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, organizations }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -53,7 +53,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 						open: profileMenuOpen,
 						items: userMenu,
 						onNavigate,
-						onSignOut
+						onSignOut,
+						organizations
 					})
 				})
 			]

package/dist/auth/auth-gate.js

@@ -14,6 +14,8 @@ import { SignInPage } from "./sign-in-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
 import { StaffSignInPage } from "./staff-sign-in-page.js";
 import { TwoFactorPage } from "./two-factor-page.js";
+import { readInvitationLink, withoutInvitationLink } from "../organizations/invitation-link.js";
+import { InvitationPage } from "../organizations/invitation-page.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-gate.tsx
@@ -29,6 +31,12 @@ const firstPage = () => {
 		kind: "staff-sign-in",
 		link: staff
 	};
+	const invitation = readInvitationLink(href);
+	if (invitation) return {
+		kind: "invitation",
+		token: invitation.token,
+		signingIn: false
+	};
 	const provider = readSignInLink(href);
 	if (provider) return {
 		kind: "provider-sign-in",
@@ -43,9 +51,11 @@ const firstPage = () => {
 const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
 const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(window.location.href));
 const forgetSignInLink = () => window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
+const forgetInvitationLink = () => window.history.replaceState(window.history.state, "", withoutInvitationLink(window.location.href));
 /**
 * Shows the app when the user is signed in (or the server has no login), and the right page otherwise: the sign-in
-* steps, or the page an emailed reset link or a staff link opened.
+* steps, or the page an emailed reset link, an invitation link or a staff link opened. An invited person with an
+* account signs in first and comes back to the invitation.
 */
 const AuthGate = ({ workspace, children }) => {
 	const { state, recheck, passwordReset, signOut, signInProviders } = useAuth();
@@ -108,6 +118,17 @@ const AuthGate = ({ workspace, children }) => {
 			setPage({ kind: "sign-in" });
 		}
 	});
+	if (page.kind === "invitation" && (state.kind === "signed-in" || state.kind === "signed-out" && !page.signingIn)) return /* @__PURE__ */ jsx(InvitationPage, {
+		token: page.token,
+		onDone: () => {
+			forgetInvitationLink();
+			setPage({ kind: "sign-in" });
+		},
+		onSignIn: () => setPage({
+			...page,
+			signingIn: true
+		})
+	});
 	if (state.kind === "signed-in") return children;
 	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
 		methods: state.methods,
@@ -124,11 +145,12 @@ const AuthGate = ({ workspace, children }) => {
 		email: page.email,
 		onBack: () => setPage({ kind: "sign-in" })
 	});
-	const providerError = page.providerError && providerMessage(page.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
-	const error = page.error ?? providerError;
+	const signIn = page.kind === "sign-in" ? page : { kind: "sign-in" };
+	const providerError = signIn.providerError && providerMessage(signIn.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
+	const error = signIn.error ?? providerError;
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
-		notice: page.notice,
+		notice: signIn.notice,
 		error,
 		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
 		onCodeSent: (email) => setPage({

package/dist/auth/auth-provider.js

@@ -17,6 +17,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
 	const [staffSignIn, setStaffSignIn] = useState();
+	const [organizations, setOrganizations] = useState();
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
@@ -45,6 +46,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
 			setStaffSignIn(status.staffSignIn);
+			setOrganizations(status.organizations);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
 			return user ? enter(user) : setState({ kind: "signed-out" });
@@ -65,6 +67,7 @@ const AuthProvider = ({ session: given, children }) => {
 			name: providerName(id, platformSignIn)
 		})),
 		staffSignIn,
+		...organizations && { organizations },
 		markSignedOut,
 		recheck,
 		signIn: async (email, password) => finish(await session.signIn(email, password)),
@@ -94,6 +97,7 @@ const AuthProvider = ({ session: given, children }) => {
 		socialProviders,
 		platformSignIn,
 		staffSignIn,
+		organizations,
 		markSignedOut,
 		recheck,
 		finish,

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

@@ -31,6 +31,8 @@ export declare const useClient: () => {
     position: number;
   }) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;
   meta: (etag?: 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>;
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/data-grid/cells.js

@@ -4,8 +4,9 @@ import { Badge } from "../primitives/badge.js";
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime } from "../format/date.js";
+import { fileShown, isPreviewable } from "../live/file-values.js";
 import { userById } from "../mocks/users.js";
-import { Check } from "lucide-react";
+import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cells.tsx
@@ -64,6 +65,26 @@ const renderCell = (spec, value) => {
 				strokeWidth: 3
 			})
 		}) : muted("No");
+		case "file": {
+			const file = fileShown(value);
+			if (!file) return muted("—");
+			if ("missing" in file) return /* @__PURE__ */ jsx("span", {
+				className: "truncate text-danger-text",
+				children: file.name
+			});
+			const url = "url" in file ? file.url : void 0;
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex min-w-0 items-center gap-2",
+				children: [url && isPreviewable(file.type) ? /* @__PURE__ */ jsx("img", {
+					src: url,
+					alt: "",
+					className: "size-5 shrink-0 rounded-sm object-cover"
+				}) : /* @__PURE__ */ jsx(Paperclip, { className: "size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: file.name
+				})]
+			});
+		}
 		case "user": {
 			const user = userById(String(value));
 			return /* @__PURE__ */ jsxs("span", {

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

@@ -32,7 +32,8 @@ const widths = {
 	number: 100,
 	signed: 110,
 	percent: 110,
-	user: 130
+	user: 130,
+	file: 180
 };
 /** Room for a header at 12px plus cell padding, the sort arrow and the column menu button. */
 const headerWidth = (header, sortable) => Math.ceil(header.length * 7.2) + 24 + (sortable ? 16 : 0) + 28;
@@ -48,6 +49,7 @@ const idLike = /^(number|sku|reference|code)$/;
 const kindOf = (field, view, index) => {
 	switch (field.type) {
 		case "relation": return "relation";
+		case "file": return "file";
 		case "enum": return "status";
 		case "boolean": return "boolean";
 		case "timestamp": return "datetime";

package/dist/live/display-value.js

@@ -1,4 +1,5 @@
 import { formatDate, formatDateTime } from "../format/date.js";
+import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
 /** A read-only rendering of a stored value, following the view's prefix, decimals, format and value label hints. */
@@ -6,6 +7,7 @@ const displayValue = (field, value, hints = {}) => {
 	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 "date": return formatDate(Date.parse(String(value)));