@protobase/ui 0.33.4 → 0.34.0

package/dist/connect/interaction-guard.js

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/connect/interaction-guard.ts
+/** Whether the page runs inside another page's frame; comparing the two windows works across origins and in a sandbox. */
+const isFramed = (win = window) => win.top !== win.self;
+/**
+* Calls `onChange(true)` once the document has been visible and focused for `delayMs` without a break, and
+* `onChange(false)` as soon as the window loses focus or the document is hidden, waiting again from the next focus. A
+* click aimed at another page, such as the second half of a double-click on a page that just gave way to this one,
+* lands before then. Returns the cleanup that removes its listeners and timer.
+*/
+const armAfterFocus = (doc, delayMs, onChange) => {
+	let armed = false;
+	let timer;
+	const set = (value) => {
+		if (armed === value) return;
+		armed = value;
+		onChange(value);
+	};
+	const disarm = () => {
+		clearTimeout(timer);
+		set(false);
+	};
+	const wait = () => {
+		disarm();
+		if (doc.visibilityState === "visible" && doc.hasFocus()) timer = setTimeout(() => set(true), delayMs);
+	};
+	const visibility = () => doc.visibilityState === "visible" ? wait() : disarm();
+	doc.defaultView?.addEventListener("focus", wait);
+	doc.defaultView?.addEventListener("blur", disarm);
+	doc.addEventListener("visibilitychange", visibility);
+	wait();
+	return () => {
+		clearTimeout(timer);
+		doc.defaultView?.removeEventListener("focus", wait);
+		doc.defaultView?.removeEventListener("blur", disarm);
+		doc.removeEventListener("visibilitychange", visibility);
+	};
+};
+/**
+* Whether a click on a guarded button goes through: only one whose press began on it while it was armed (`down`), and
+* not a key held down and repeating. A mouse button held across the moment it arms, or Enter held from before, does
+* not count.
+*/
+const pressGate = () => {
+	let began = false;
+	return {
+		/** The press began: on `pointerdown` or `keydown`, with whether the button was armed then and the key repeats. */
+		down: (armed, repeat = false) => {
+			began = armed && !repeat;
+		},
+		/** The click: true once for a press that began armed. */
+		take: () => {
+			const counts = began;
+			began = false;
+			return counts;
+		}
+	};
+};
+/** Whether the page has been in front for `delayMs` (`armAfterFocus`), as React state. */
+const useArmedAfterFocus = (delayMs) => {
+	const [armed, setArmed] = useState(false);
+	useEffect(() => armAfterFocus(document, delayMs, setArmed), [delayMs]);
+	return armed;
+};
+/** The handlers of a button guarded by `armed`: its press must begin while armed for its click to act (`pressGate`). */
+const useGuardedPress = (armed, onPress) => {
+	const gate = useRef(pressGate());
+	return {
+		onPointerDown: () => gate.current.down(armed),
+		onKeyDown: (event) => gate.current.down(armed, event.repeat),
+		onClick: () => {
+			if (gate.current.take()) onPress();
+		}
+	};
+};
+//#endregion
+export { armAfterFocus, isFramed, pressGate, useArmedAfterFocus, useGuardedPress };

package/dist/connect/redirect-target.js

@@ -0,0 +1,36 @@
+//#region src/connect/redirect-target.ts
+const loopbackHosts = [
+	"localhost",
+	"127.0.0.1",
+	"[::1]"
+];
+const unsafeSchemes = [
+	"javascript:",
+	"data:",
+	"vbscript:",
+	"file:",
+	"blob:",
+	"about:"
+];
+/** Where `redirectUri` sends the code, or `undefined` for one the page will not send it to. */
+const redirectTarget = (redirectUri) => {
+	if (!URL.canParse(redirectUri)) return void 0;
+	const url = new URL(redirectUri);
+	if (url.protocol === "https:") return {
+		kind: "site",
+		host: url.host
+	};
+	if (url.protocol === "http:") return loopbackHosts.includes(url.hostname) ? {
+		kind: "this-computer",
+		port: url.port || "80"
+	} : void 0;
+	if (unsafeSchemes.includes(url.protocol)) return void 0;
+	return {
+		kind: "device-app",
+		uri: redirectUri.split("?")[0].split("#")[0]
+	};
+};
+/** Whether `url` is one the page may send the browser to: anything but a scheme that runs or shows content in the page. */
+const isSafeTarget = (url) => !URL.canParse(url, "http://local") || !unsafeSchemes.includes(new URL(url, "http://local").protocol);
+//#endregion
+export { isSafeTarget, redirectTarget };

package/dist/connect/signed-request.js

@@ -0,0 +1,14 @@
+import { readConnectAddress } from "@protobase/schema";
+//#region src/connect/signed-request.ts
+/**
+* The signed request in `url` when the server sends the browser back to this page (`here`: its origin and path), else
+* `undefined`. The origin counts as well as the path: a client's own redirect URI can have this page's path, on its
+* host or a loopback port, and a query of its choosing; and only a query with the provider's signature is a request.
+*/
+const signedRequestFor = (url, here) => {
+	const target = new URL(url, here.origin);
+	if (target.origin !== here.origin || target.pathname !== here.pathname) return void 0;
+	return readConnectAddress(target.search).oauthQuery;
+};
+//#endregion
+export { signedRequestFor };

package/dist/connect/use-connect-address.js

@@ -0,0 +1,11 @@
+import { useRouter } from "../app/router.js";
+import { useMemo } from "react";
+import { readConnectAddress } from "@protobase/schema";
+//#region src/connect/use-connect-address.ts
+/** The connect page's address as logical values: the signed authorization request, when its query holds one. */
+const useConnectAddress = () => {
+	const { params } = useRouter();
+	return useMemo(() => readConnectAddress(params.toString()), [params]);
+};
+//#endregion
+export { useConnectAddress };

package/dist/data/use-live-updates.js

@@ -1,7 +1,7 @@
 import { FocusRefreshContext } from "./focus-refresh.js";
 import { useClient } from "./api-provider.js";
-import { liveRefresh } from "./live-refresh.js";
 import { sourceStatusOf } from "./with-sources.js";
+import { liveRefresh } from "./live-refresh.js";
 import { useContext, useEffect, useMemo } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 //#region src/data/use-live-updates.ts

package/dist/forms/public-form-page.js

@@ -2,11 +2,11 @@ import { Spinner } from "../primitives/spinner.js";
 import { Button } from "../primitives/button.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { text } from "../app/meta-gate-messages.js";
+import { Notice } from "../app/meta-gate.js";
 import { AuthLayout } from "../auth/auth-layout.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
-import { text } from "../app/meta-gate-messages.js";
-import { Notice } from "../app/meta-gate.js";
 import { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.js";
 import { useDocumentTitle } from "../app/document-title.js";
 import { ErrorBanner } from "../app/error-banner.js";

package/dist/index.js

@@ -6,7 +6,10 @@ import { Spinner } from "./primitives/spinner.js";
 import { Button, buttonClass } from "./primitives/button.js";
 import { Dialog } from "./primitives/dialog.js";
 import { OtpInput } from "./primitives/otp-input.js";
+import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
+import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
+import { useMeta } from "./data/use-meta.js";
 import { AuthLayout } from "./auth/auth-layout.js";
 import { ResendCodeButton } from "./auth/resend-code-button.js";
 import { CodeForm } from "./auth/code-form.js";
@@ -18,7 +21,6 @@ import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
 import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
-import { useMeta } from "./data/use-meta.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
@@ -38,11 +40,9 @@ import { useBackendData } from "./assistant-dock/use-backend-data.js";
 import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
-import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { Form } from "./app/create/form.js";

package/dist/live/use-filter-config.js

@@ -8,8 +8,8 @@ import { stateToText } from "./filter-string.js";
 import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { labelKeys, matchOptions } from "./reference-options.js";
 import { useReferenceSearch } from "./use-reference-search.js";
-import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/live/use-filter-config.ts
 const histogramBuckets = 24;
 /**

package/dist/live/use-reference-search.js

@@ -1,8 +1,8 @@
 import { useClient } from "../data/api-provider.js";
 import { labelFieldOf } from "./model-helpers.js";
 import { useState } from "react";
-import { keepPreviousData, useQueries } from "@tanstack/react-query";
 import { createWhere, printFilter } from "@protobase/schema";
+import { keepPreviousData, useQueries } from "@tanstack/react-query";
 //#region src/live/use-reference-search.ts
 const where$1 = createWhere();
 /**

package/dist/package.js

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

package/dist/plugins/plugin-gate.js

@@ -1,9 +1,9 @@
 import { Spinner } from "../primitives/spinner.js";
+import { useAdminMeta } from "../app/meta-gate.js";
 import { mergePlugins } from "./merge-plugins.js";
 import { text } from "./messages.js";
 import { usePluginSource } from "./plugin-source.js";
 import { usePluginLoads } from "./use-plugin-loads.js";
-import { useAdminMeta } from "../app/meta-gate.js";
 import { ProjectUiContext } from "../app/pages/project-ui.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";