@protobase/ui 0.15.1 → 0.15.3

package/dist/app/named-icon.js

@@ -1,4 +1,4 @@
-import { Bed, Bell, Bookmark, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bed, Bell, Bookmark, ExternalLink, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
@@ -9,7 +9,8 @@ const byName = {
 	bed: Bed,
 	heart: Heart,
 	bell: Bell,
-	bookmark: Bookmark
+	bookmark: Bookmark,
+	"external-link": ExternalLink
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

package/dist/app/pages/action-href.js

@@ -1,5 +1,43 @@
+import { hrefField } from "@protobase/schema/internal";
 //#region src/app/pages/action-href.ts
 /** `href` with every `{field}` replaced by the record's value, percent-encoded; a missing value becomes empty. */
 const fillHref = (href, record = {}) => href.replace(/\{([A-Za-z_][A-Za-z0-9_]*)\}/g, (_, name) => encodeURIComponent(record[name] === null || record[name] === void 0 ? "" : String(record[name])));
+const webUrl = (value) => {
+	if (typeof value !== "string" || !URL.canParse(value)) return void 0;
+	const url = new URL(value);
+	return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+};
+/**
+* Where a link action's `href` goes from `record`: an href that is only `{field}` is the record's value as it is, when
+* that is an `https:` or `http:` URL, and nothing otherwise; any other href is filled by `fillHref`.
+*/
+const linkTarget = (href, record = {}) => {
+	const field = hrefField(href);
+	return field === void 0 ? fillHref(href, record) : webUrl(record[field]);
+};
+/**
+* Opens a link's target: an `https:` or `http:` page in a new tab that gets neither the app's window nor its address,
+* anything else (`mailto:`) in place. A link without a target does nothing.
+*/
+const openLink = (target) => {
+	if (target === void 0) return;
+	if (/^https?:/i.test(target)) window.open(target, "_blank", "noopener,noreferrer");
+	else window.location.assign(target);
+};
+const hostOf = (target) => URL.canParse(target) ? new URL(target).hostname.replace(/^www\./, "") : "";
+/**
+* `action` as it shows for `record`: a link whose `href` has no target there is left out, and `{host}` in a link's label
+* becomes the host its target opens, without `www.`.
+*/
+const actionFor = (action, record) => {
+	const run = action.run;
+	if (run?.kind !== "link" || !("href" in run)) return action;
+	const target = linkTarget(run.href, record);
+	if (target === void 0) return void 0;
+	return action.label.includes("{host}") ? {
+		...action,
+		label: action.label.replaceAll("{host}", hostOf(target))
+	} : action;
+};
 //#endregion
-export { fillHref };
+export { actionFor, fillHref, linkTarget, openLink };

package/dist/app/pages/use-run-action.js

@@ -5,15 +5,16 @@ import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
 import { useRefreshResource } from "./use-layout-data.js";
-import { fillHref } from "./action-href.js";
+import { actionFor, linkTarget, openLink } from "./action-href.js";
 import { useState } from "react";
 import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/use-run-action.ts
 const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
 * The named actions of `resource`'s view, ready to run on `scope` (the record they act on): built-in behaviour first
-* (`update`, `delete`, `link`), else the handler the project registered under the action's name. `blocked` says why one
-* cannot run; `afterRun` hears about every action that succeeded.
+* (`update`, `delete`, `link`), else the handler the project registered under the action's name. A link to a URL the
+* record holds is left out while it holds none. `blocked` says why one cannot run; `afterRun` hears about every action
+* that succeeded.
 */
 const useActionRunner = (resource, scope, afterRun) => {
 	const { views } = useAdminMeta();
@@ -25,7 +26,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 	const refresh = useRefreshResource();
 	const { go } = useAppAddress();
 	const [running, setRunning] = useState();
-	const actions = views[resource]?.actions ?? [];
+	const actions = (views[resource]?.actions ?? []).flatMap((action) => actionFor(action, scope?.record) ?? []);
 	const blocked = (action) => {
 		const kind = action.run?.kind;
 		if ((kind === "update" || kind === "delete") && !scope) return "Needs a record";
@@ -37,7 +38,7 @@ const useActionRunner = (resource, scope, afterRun) => {
 		const { run } = action;
 		if (run?.kind === "link") {
 			if ("to" in run) go(fillAddress(run.to, scope?.record));
-			else window.location.assign(fillHref(run.href, scope?.record));
+			else openLink(linkTarget(run.href, scope?.record));
 			return;
 		}
 		if (run?.kind === "update") await client.update(resource, scope.key, run.values, scope.etag ?? "*");

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.1";
+var version = "0.15.3";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };