@protobase/ui 0.15.2 → 0.15.4

package/dist/app/displays/map-display.js

@@ -5,8 +5,8 @@ import { mapCards } from "./list-displays.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { ErrorBanner } from "../error-banner.js";
 import { Problem } from "../pages/problem.js";
-import { RecordCard } from "./record-card.js";
 import { useDebounced } from "../../lib/use-debounced.js";
+import { RecordCard } from "./record-card.js";
 import { boundsAround, worldArea } from "../map/map-area.js";
 import { keptSelection, mapPoints, stepSelection } from "./map-groups.js";
 import { useMapRecords } from "./use-map-records.js";

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/filter-panel/range-filter.js

@@ -1,13 +1,26 @@
 import { cn } from "../lib/cn.js";
+import { useDebounced } from "../lib/use-debounced.js";
 import { barInRange, fraction, moveThumb } from "./range-math.js";
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./range-slider.css";
 //#region src/filter-panel/range-filter.tsx
+/** How long a thumb rests, mid-drag or between arrow keys, before the list filters on it. */
+const rangeSettleMs = 1e3;
 const RangeFilter = ({ config, value, onChange }) => {
 	const { min, max, step, histogram, format } = config;
-	const selected = value ?? [min, max];
+	const [draft, setDraft] = useState();
+	const selected = draft ?? value ?? [min, max];
 	const peak = Math.max(...histogram);
-	const commit = (next) => onChange(next[0] === min && next[1] === max ? void 0 : next);
+	const commit = () => {
+		if (!draft) return;
+		setDraft(void 0);
+		onChange(draft[0] === min && draft[1] === max ? void 0 : draft);
+	};
+	const rested = useDebounced(draft, rangeSettleMs);
+	useEffect(() => {
+		if (rested) commit();
+	}, [rested]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		children: [
@@ -40,7 +53,10 @@ const RangeFilter = ({ config, value, onChange }) => {
 					max,
 					step,
 					value: selected[thumb],
-					onChange: (event) => commit(moveThumb(selected, thumb, Number(event.target.value)))
+					onChange: (event) => setDraft(moveThumb(selected, thumb, Number(event.target.value))),
+					onPointerUp: commit,
+					onTouchEnd: commit,
+					onBlur: commit
 				}, thumb))
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -51,4 +67,4 @@ const RangeFilter = ({ config, value, onChange }) => {
 	});
 };
 //#endregion
-export { RangeFilter };
+export { RangeFilter, rangeSettleMs };

package/dist/package.js

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