@protobase/ui 0.15.0 → 0.15.2

package/dist/app/app.js

@@ -191,7 +191,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			others: organizations.organizations.filter((organization) => organization.id !== current?.organization?.id),
 			onSwitch: (id) => void session.organizations.switchTo(id).then(() => reopenIn(basePath))
 		},
-		theme: user && {
+		theme: {
 			preference: theme.preference,
 			onChange: theme.choose
 		},

package/dist/app-shell/sidebar.js

@@ -1,12 +1,13 @@
 import { cn } from "../lib/cn.js";
 import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
+import { ThemeSwitch } from "./theme-switch.js";
 import { ProfileMenu } from "./profile-menu.js";
 import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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, onSignIn, organizations, roles, theme, sticky }) => {
 	const expanding = mode === "icon-expand";
@@ -58,7 +59,10 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 						organizations,
 						roles,
 						theme
-					}) : onSignIn && /* @__PURE__ */ jsxs("button", {
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
+						theme,
+						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-[13px] text-muted-foreground md:min-h-0"
+					}), onSignIn && /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						onClick: onSignIn,
 						"aria-label": "Sign in",
@@ -67,7 +71,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 							className: "whitespace-nowrap",
 							children: "Sign in"
 						})]
-					})
+					})] })
 				})
 			]
 		})

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

@@ -31,6 +31,10 @@ export type MetaData = {
   maps?: {
     style: string;
   };
+  /** The hosts besides the app's own whose images are drawn with the page's referrer (see `FileImage`). */
+  files?: {
+    trustedHosts: string[];
+  };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
   /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */

package/dist/data/use-meta.js

@@ -37,6 +37,7 @@ const useMeta = () => {
 				...result.meta.runtime && { runtime: result.meta.runtime },
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
 				...result.meta.maps && { maps: result.meta.maps },
+				...result.meta.files && { files: result.meta.files },
 				...result.meta.plugins && { plugins: result.meta.plugins },
 				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
 					source,

package/dist/live/file-image.js

@@ -1,3 +1,5 @@
+import { imageReferrerPolicy } from "./image-referrer.js";
+import { useTrustedImageHosts } from "./use-trusted-image-hosts.js";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { thumbHashToDataURL } from "thumbhash";
@@ -12,9 +14,13 @@ const placeholderImage = (hash) => {
 	}
 	return thumbHashToDataURL(Uint8Array.from(binary, (char) => char.charCodeAt(0)));
 };
-/** An image of a file, its placeholder drawn blurred behind it until it has loaded. */
+/**
+* An image of a file, its placeholder drawn blurred behind it until it has loaded. One from another site than the app's
+* own and its trusted hosts loads without a referrer.
+*/
 const FileImage = ({ image, className, loading }) => {
 	const [loaded, setLoaded] = useState();
+	const trustedHosts = useTrustedImageHosts();
 	const placeholder = useMemo(() => image.placeholder === void 0 ? void 0 : placeholderImage(image.placeholder), [image.placeholder]);
 	const waiting = placeholder !== void 0 && loaded !== image.url;
 	return /* @__PURE__ */ jsx("img", {
@@ -22,6 +28,7 @@ const FileImage = ({ image, className, loading }) => {
 		alt: "",
 		loading,
 		decoding: "async",
+		referrerPolicy: imageReferrerPolicy(image.url, window.location.href, trustedHosts),
 		onLoad: () => setLoaded(image.url),
 		className,
 		style: waiting ? {

package/dist/live/image-referrer.js

@@ -0,0 +1,15 @@
+//#region src/live/image-referrer.ts
+/**
+* The `referrerPolicy` an image at `url` is drawn with on the page at `page`: the browser's default for the page's own
+* origin, a trusted host, or a local image (`data:`, `blob:`); `no-referrer` for any other, so another site never learns
+* which page of the app showed its image.
+*/
+const imageReferrerPolicy = (url, page, trustedHosts) => {
+	if (!URL.canParse(url, page)) return "no-referrer";
+	const target = new URL(url, page);
+	if (target.protocol !== "http:" && target.protocol !== "https:") return void 0;
+	if (target.origin === new URL(page).origin || trustedHosts.includes(target.hostname)) return void 0;
+	return "no-referrer";
+};
+//#endregion
+export { imageReferrerPolicy };

package/dist/live/use-trusted-image-hosts.js

@@ -0,0 +1,14 @@
+import { MetaContext } from "../data/meta-context.js";
+import { useContext, useMemo } from "react";
+//#region src/live/use-trusted-image-hosts.ts
+const hostOf = (url) => URL.canParse(url) ? [new URL(url).hostname] : [];
+/**
+* The hosts besides the page's own whose images are drawn with the page's referrer: those `/meta` names, where the app's
+* providers link public files from, and those of the app's sources. None outside `MetaGate`.
+*/
+const useTrustedImageHosts = () => {
+	const meta = useContext(MetaContext);
+	return useMemo(() => [...meta?.files?.trustedHosts ?? [], ...(meta?.sources ?? []).flatMap(({ source }) => hostOf(source.url))], [meta?.files, meta?.sources]);
+};
+//#endregion
+export { useTrustedImageHosts };

package/dist/package.js

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