@protobase/ui 0.26.9 → 0.28.0

package/dist/app/app.d.ts

@@ -12,7 +12,7 @@ export type AppProps = {
   client?: Client;
   /** Ready-made clients of the sources `/meta` names, by their URL, for stories and tests. */
   sources?: Record<string, Client>;
-  /** Sign-in state for the app; made from the page's origin when omitted. */
+  /** Sign-in state for the app; made from `baseUrl`'s origin when omitted. */
   auth?: AuthSession;
   /** Path prefix the app is mounted under, for example `/admin`. */
   basePath?: string;

package/dist/app/app.js

@@ -201,6 +201,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		signIn: user ? void 0 : signIn.link(),
 		workspace: current?.organization?.name ?? workspace,
 		appName: meta.appName,
+		appIcon: meta.appIcon,
 		logo: ProjectLogo,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
@@ -309,6 +310,7 @@ const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...r
 	setFallbackLocale(locale ?? "en");
 	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 		session: auth,
+		...rest.baseUrl && { origin: new URL(rest.baseUrl, window.location.href).origin },
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
 			initialUrl,

package/dist/app/main.js

@@ -1,6 +1,7 @@
 import { browserLocale } from "../locale/active-locale.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
+import { pageApiOrigin } from "./page-api-origin.js";
 import { StrictMode } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
@@ -10,7 +11,7 @@ import "../styles.css";
 const root = document.getElementById("root");
 if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
-	baseUrl: "/api/v1",
+	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),
 	locale: browserLocale()
 }) }));

package/dist/app/page-api-origin.js

@@ -0,0 +1,18 @@
+import { apiOriginMeta } from "@protobase/schema/internal";
+//#region src/app/page-api-origin.ts
+/**
+* The API origin the page's `<meta name="protobase-api-origin">` tags name: `undefined` without one. Anything but one
+* tag holding exactly an http or https origin, such as `https://shop.example.com`, is an error.
+*/
+const apiOriginOf = (contents) => {
+	if (contents.length === 0) return void 0;
+	if (contents.length > 1) throw new Error(`The page has ${contents.length} ${apiOriginMeta} meta tags; it may have one`);
+	const value = contents[0];
+	const url = URL.canParse(value) ? new URL(value) : void 0;
+	if (!url || url.protocol !== "http:" && url.protocol !== "https:" || url.origin !== value) throw new Error(`The page's ${apiOriginMeta} meta tag holds "${value}", which is not an http or https origin such as https://shop.example.com`);
+	return value;
+};
+/** The API origin this page names in its `<meta name="protobase-api-origin">` (see `apiOriginOf`). */
+const pageApiOrigin = () => apiOriginOf([...document.querySelectorAll(`meta[name="${apiOriginMeta}"]`)].map((meta) => meta.content));
+//#endregion
+export { apiOriginOf, pageApiOrigin };

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

@@ -10,7 +10,7 @@ import { useEffect, useRef, 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, appName, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, appIcon, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -31,6 +31,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appNam
 		user,
 		workspace,
 		appName,
+		appIcon,
 		forceExpanded,
 		profileMenuOpen,
 		groups: navGroups,

package/dist/app-shell/logo.d.ts

@@ -4,12 +4,14 @@ export declare const LogoMark: ({ className }: {
   className?: string;
 }) => import("react").JSX.Element;
 /**
- * What the logo at the top of the sidebar gets: `compact` when the sidebar shows only icons, the workspace's name, and
- * the app's name, such as `Property Finder` (`PROTOBASE_APP_NAME` or `createAuth`'s `appName`).
+ * What the logo at the top of the sidebar gets: `compact` when the sidebar shows only icons, the workspace's name, the
+ * app's name, such as `Property Finder` (`PROTOBASE_APP_NAME` or `createAuth`'s `appName`), and the path of its own
+ * icon, its `protobase.favicon.svg`, when the project has one.
  */
 export type ShellLogoProps = {
   compact: boolean;
   workspace?: string;
   appName?: string;
+  appIcon?: string;
 };
 //#endregion

package/dist/app-shell/logo.js

@@ -31,16 +31,21 @@ const Wordmark = ({ className }) => /* @__PURE__ */ jsx("svg", {
 });
 const brandName = "Protobase";
 /**
-* The logo at the top of the sidebar: Protobase's mark, then the app's name, as the brand's wordmark when the app goes by
-* Protobase's name, with the workspace's name under it; the mark alone when compact.
+* The logo at the top of the sidebar: the app's own icon, else Protobase's mark, then the app's name, as the brand's
+* wordmark when the app goes by Protobase's name and has no icon of its own, with the workspace's name under it; the
+* icon alone when compact.
 */
-const Logo = ({ compact, workspace, appName }) => /* @__PURE__ */ jsxs("div", {
+const Logo = ({ compact, workspace, appName, appIcon }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center gap-2.5 overflow-hidden",
-	children: [/* @__PURE__ */ jsx(LogoMark, {}), !compact && /* @__PURE__ */ jsxs("div", {
+	children: [appIcon ? /* @__PURE__ */ jsx("img", {
+		src: appIcon,
+		alt: "",
+		className: "size-7 shrink-0 object-contain"
+	}) : /* @__PURE__ */ jsx(LogoMark, {}), !compact && /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-col gap-0.5 leading-tight",
-		children: [appName && appName !== brandName ? /* @__PURE__ */ jsx("div", {
+		children: [appIcon || appName && appName !== brandName ? /* @__PURE__ */ jsx("div", {
 			className: "truncate text-sm font-semibold text-foreground",
-			children: appName
+			children: appName ?? brandName
 		}) : /* @__PURE__ */ jsx(Wordmark, { className: "self-start" }), workspace && /* @__PURE__ */ jsx("div", {
 			className: "truncate text-[11px] text-muted-foreground",
 			children: workspace

package/dist/app-shell/sidebar.js

@@ -11,7 +11,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -26,7 +26,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, pr
 					children: /* @__PURE__ */ jsx(SidebarLogo, {
 						compact: !inline,
 						workspace,
-						appName
+						appName,
+						appIcon
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {

package/dist/auth/auth-provider.js

@@ -10,8 +10,11 @@ const useAuth = () => {
 	if (!api) throw new Error("useAuth must be used inside AuthProvider");
 	return api;
 };
-/** Finds out whether the server has a login and who is signed in, and keeps that state for the app. */
-const AuthProvider = ({ session: given, children }) => {
+/**
+* Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
+* it makes one on `origin`, the page's own by default.
+*/
+const AuthProvider = ({ session: given, origin, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
@@ -29,7 +32,10 @@ const AuthProvider = ({ session: given, children }) => {
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
-	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
+	const session = useMemo(() => given ?? createAuthSession({
+		...origin && { origin },
+		onSignedOut: () => signedOut.current()
+	}), [given, origin]);
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
 		setState(missing.length > 0 ? {

package/dist/data/meta-data.d.ts

@@ -7,6 +7,8 @@ export type MetaData = {
   etag: string;
   /** The app's name, which ends the tab titles. */
   appName: string;
+  /** The path of the app's own icon, when the project has one, which the sidebar's logo draws. */
+  appIcon?: string;
   resources: Record<string, ResourceModel>;
   views: Record<string, ViewModel>;
   /** Composed pages by name. */

package/dist/data/use-meta.js

@@ -27,6 +27,7 @@ const useMeta = () => {
 			return {
 				etag: result.etag,
 				appName: result.meta.appName,
+				...result.meta.appIcon && { appIcon: result.meta.appIcon },
 				resources: Object.fromEntries(result.meta.resources.map((model) => [model.name, model])),
 				views: Object.fromEntries(result.meta.views.map((model) => [model.resource, model])),
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),

package/dist/package.js

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