@foir/sdk 0.27.1 → 0.29.0

package/dist/data.js

@@ -1380,6 +1380,8 @@ function printSubscriptionDocument(input) {
 }
 
 // src/data/ws-transport.ts
+var CLOSE_CREDENTIAL_ENDED = 4402;
+var CLOSE_FORBIDDEN = 4403;
 var GQL = {
   connectionInit: "connection_init",
   connectionAck: "connection_ack",
@@ -1414,6 +1416,9 @@ var FoirSocketTransport = class {
   disposed = false;
   keepAlive = null;
   retryTimer = null;
+  // A bearer renewed after the socket's lapsed (4402), presented from the next
+  // connect on in place of the client's own.
+  renewedBearer = null;
   constructor(config) {
     if (config.dispatch !== void 0) {
       throw new FoirRequestError(
@@ -1486,12 +1491,14 @@ var FoirSocketTransport = class {
     socket.onmessage = (event) => this.receive(event.data);
     socket.onerror = () => {
     };
-    socket.onclose = () => this.handleClose();
+    socket.onclose = (event) => this.handleClose(event);
   }
   async sendConnectionInit(socket) {
     this.connecting = false;
     try {
-      const { headers } = await resolveFoirAuth(this.config);
+      const { headers } = await resolveFoirAuth(
+        this.renewedBearer ? { ...this.config, bearerToken: this.renewedBearer } : this.config
+      );
       const { "Content-Type": _contentType, ...params } = headers;
       const extra = await this.config.connectionParams?.() ?? {};
       this.send(socket, {
@@ -1505,19 +1512,53 @@ var FoirSocketTransport = class {
       this.teardownSocket(true);
     }
   }
-  handleClose() {
+  handleClose(event) {
+    const code = event?.code;
     const wasAcknowledged = this.acknowledged;
     this.teardownSocket(false);
     if (this.disposed || this.registrations.size === 0) return;
     for (const registration of this.registrations.values()) {
       registration.sent = false;
     }
+    if (code === CLOSE_FORBIDDEN) {
+      this.failAll(
+        new FoirRequestError(
+          "[foir] the subscription socket was refused where it asked to stand: the signed-in user is no member of the organization this client names"
+        )
+      );
+      return;
+    }
+    if (code === CLOSE_CREDENTIAL_ENDED) {
+      void this.reconnectWithARenewedBearer();
+      return;
+    }
     this.scheduleReconnect(
       new FoirRequestError(
         wasAcknowledged ? "[foir] the subscription socket closed and could not be re-established" : "[foir] the subscription socket closed before the credential was accepted"
       )
     );
   }
+  /**
+   * Reconnect after the socket's credential lapsed: with the bearer renewed
+   * through the client's `refreshBearer` where it has one, failing every
+   * subscription with `FoirSessionExpiredError` when the session is over. A
+   * client without one reconnects at once, presenting what its bearer
+   * provider gives now.
+   */
+  async reconnectWithARenewedBearer() {
+    const refresh = this.config.refreshBearer;
+    if (refresh) {
+      const token = await renewBearerOnce(refresh).catch(() => null);
+      if (this.disposed) return;
+      if (!token) {
+        this.failAll(new FoirSessionExpiredError());
+        return;
+      }
+      this.renewedBearer = token;
+    }
+    this.attempt = 0;
+    this.ensureConnected();
+  }
   scheduleReconnect(error) {
     if (this.disposed || this.registrations.size === 0) return;
     if (this.attempt >= this.policy.maxAttempts) {

package/dist/media/ProgressiveMedia.d.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'react';
 import type { ProgressiveImageSource, ProgressiveVideoSource, VariantTierKey } from './media';
 export interface ProgressiveMediaProps {
     image?: ProgressiveImageSource;
@@ -25,6 +26,31 @@ export interface ProgressiveMediaProps {
     muted?: boolean;
     /** Video playback — loop on end. Default true. */
     loop?: boolean;
+    /**
+     * Video playback: show the browser's controls. Defaults to `!autoplay`. A
+     * video with controls shows from the start, its poster standing until it
+     * plays, so the controls can always be reached.
+     */
+    controls?: boolean;
+    /** Video: how much the browser fetches before it plays (`<video preload>`). */
+    preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Where the media sits in its box when it is cropped to fit, as CSS
+     * `object-position` (`'30% 60%'`), for a focal point. Applies to the image,
+     * the video and its thumbnail. Default centre.
+     */
+    objectPosition?: string;
+    /**
+     * The `<video>` element, once it mounts: for a caller's own play and pause
+     * controls, and the events that keep them in step.
+     */
+    videoRef?: Ref<HTMLVideoElement>;
+    /**
+     * Called once when a video's source cannot be played. The video is then
+     * removed, and its thumbnail, labelled with `alt`, stands in for it over
+     * the colour and blurhash layers.
+     */
+    onVideoError?: () => void;
     /**
      * When false, skip loading the full media layer (no `<video>`/full `<img>`
      * mount, no HLS attach, no full-image preload). The lower layers — colour,
@@ -53,4 +79,4 @@ export interface ProgressiveMediaProps {
      */
     variantTiers?: readonly VariantTierKey[];
 }
-export declare function ProgressiveMedia({ image, video, alt, className, fill, fit, placeholder, autoplay, muted, loop, active, sizes, priority, variantTiers, }: ProgressiveMediaProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProgressiveMedia({ image, video, alt, className, fill, fit, placeholder, autoplay, muted, loop, controls, preload, objectPosition, videoRef: externalVideoRef, onVideoError, active, sizes, priority, variantTiers, }: ProgressiveMediaProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/media.js

@@ -213,6 +213,11 @@ function ProgressiveMedia({
   autoplay = true,
   muted = true,
   loop = true,
+  controls,
+  preload,
+  objectPosition,
+  videoRef: externalVideoRef,
+  onVideoError,
   active = true,
   sizes = "100vw",
   priority = false,
@@ -225,7 +230,13 @@ function ProgressiveMedia({
   const source = video ?? image;
   const isVideo = !!video;
   const [wrapperRef, inViewport] = useInViewport("300px", priority);
-  const videoActive = isVideo && active && (priority || inViewport);
+  const [failedUrl, setFailedUrl] = useState2(void 0);
+  const videoFailed = isVideo && failedUrl !== void 0 && failedUrl === video?.url;
+  const [videoSize, setVideoSize] = useState2(
+    null
+  );
+  const videoActive = isVideo && active && !videoFailed && (priority || inViewport);
+  const showControls = controls ?? !autoplay;
   const imageActive = !isVideo && active;
   const hlsUrl = video?.hlsUrl;
   const useHls = isVideo && !!hlsUrl;
@@ -282,6 +293,8 @@ function ProgressiveMedia({
         cleanupRef.current = null;
       }
       videoRef.current = el;
+      if (typeof externalVideoRef === "function") externalVideoRef(el);
+      else if (externalVideoRef) externalVideoRef.current = el;
       if (!el) return;
       if (el.readyState >= 3) {
         onFullReady();
@@ -299,7 +312,7 @@ function ProgressiveMedia({
         el.removeEventListener("playing", handler);
       };
     },
-    [onFullReady]
+    [onFullReady, externalVideoRef]
   );
   if (!source) {
     if (!placeholder) return null;
@@ -314,8 +327,9 @@ function ProgressiveMedia({
     );
   }
   const effective = !isVideo ? effectiveImageDimensions(image) : null;
-  const w = effective?.width ?? source.width;
-  const h = effective?.height ?? source.height;
+  const w = effective?.width ?? source.width ?? videoSize?.w;
+  const h = effective?.height ?? source.height ?? videoSize?.h;
+  const positioned = objectPosition ? { objectPosition } : void 0;
   const aspect = w && h ? w / h : 16 / 10;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -342,13 +356,14 @@ function ProgressiveMedia({
           "img",
           {
             src: thumbnailUrl,
-            alt: "",
-            "aria-hidden": true,
+            alt: videoFailed ? alt ?? "" : "",
+            "aria-hidden": videoFailed ? void 0 : true,
             width: w,
             height: h,
             loading: priority ? "eager" : "lazy",
             fetchPriority: priority ? "high" : void 0,
-            className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-400 ease-in-out ${stage === "thumbnail" || stage === "full" ? "opacity-100" : "opacity-0"}`
+            className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-400 ease-in-out ${stage === "thumbnail" || stage === "full" ? "opacity-100" : "opacity-0"}`,
+            style: positioned
           }
         ),
         videoActive ? /* @__PURE__ */ jsx2(
@@ -363,8 +378,21 @@ function ProgressiveMedia({
             muted,
             loop,
             playsInline: true,
-            controls: !autoplay,
-            className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-500 ease-in-out ${stage === "full" ? "opacity-100" : "opacity-0"}`
+            controls: showControls,
+            preload,
+            "aria-label": alt || void 0,
+            onLoadedMetadata: (e) => {
+              const v = e.currentTarget;
+              if (!source.width && v.videoWidth && v.videoHeight) {
+                setVideoSize({ w: v.videoWidth, h: v.videoHeight });
+              }
+            },
+            onError: () => {
+              setFailedUrl(video?.url);
+              onVideoError?.();
+            },
+            className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-500 ease-in-out ${stage === "full" || showControls ? "opacity-100" : "opacity-0"}`,
+            style: positioned
           }
         ) : imageActive ? (
           // <picture>: browser picks AVIF when it can decode it, else WebP. The
@@ -383,7 +411,8 @@ function ProgressiveMedia({
                 height: h,
                 loading: priority ? "eager" : "lazy",
                 fetchPriority: priority ? "high" : void 0,
-                className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-500 ease-in-out ${stage === "full" ? "opacity-100" : "opacity-0"}`
+                className: `absolute inset-0 h-full w-full ${fitClass} transition-opacity duration-500 ease-in-out ${stage === "full" ? "opacity-100" : "opacity-0"}`,
+                style: positioned
               }
             )
           ] })

package/dist/next/session.d.ts

@@ -27,8 +27,12 @@ interface PasswordArgs {
 }
 /** Password sign-in in a route handler; persists the session to cookies. */
 export declare function foirSignInWithPassword({ env, store, email, password, cookieOptions, }: PasswordArgs): Promise<FoirUser>;
-/** Register a user in a route handler; persists the session to cookies. */
-export declare function foirRegisterWithPassword({ env, store, email, password, cookieOptions, }: PasswordArgs): Promise<FoirUser>;
+/**
+ * Start a sign-up in a route handler: the address is mailed a code, and
+ * {@link foirSignInWithOtp} with it finishes the account and persists the
+ * session to cookies.
+ */
+export declare function foirRegisterWithPassword({ env, email, password, }: Pick<PasswordArgs, 'env' | 'email' | 'password'>): Promise<void>;
 /** Complete an OTP sign-in in a route handler; persists the session to cookies. */
 export declare function foirSignInWithOtp({ env, store, email, otp, cookieOptions, }: {
     env: FoirEnv;

package/dist/next.js

@@ -1127,8 +1127,8 @@ async function getSessionUser(adapter) {
 async function signInWithPassword(adapter, env, vars) {
   return saveSession(adapter, await login(env, vars));
 }
-async function signUpWithPassword(adapter, env, vars) {
-  return saveSession(adapter, await register(env, vars));
+async function signUpWithPassword(env, vars) {
+  await register(env, vars);
 }
 async function signInWithOTP(adapter, env, vars) {
   return saveSession(adapter, await loginWithOTP(env, vars));
@@ -1158,15 +1158,10 @@ function foirSignInWithPassword({
 }
 function foirRegisterWithPassword({
   env,
-  store,
   email,
-  password,
-  cookieOptions
+  password
 }) {
-  return signUpWithPassword(createFoirCookieAdapter(store, { cookieOptions }), env, {
-    email,
-    password
-  });
+  return signUpWithPassword(env, { email, password });
 }
 function foirSignInWithOtp({
   env,

package/dist/placement.js

@@ -70,6 +70,7 @@ var GRANT_TABLE = [
   ["apikeys:write", "none", [], []],
   ["organizations:read", "none", [], []],
   ["organizations:write", "none", [], []],
+  ["orgsettings:write", "none", [], []],
   ["organizations:create", "none", [], []],
   ["organizations:delete", "none", [], []],
   ["organizations:reach", "none", [], []],
@@ -80,7 +81,7 @@ var GRANT_TABLE = [
   ["projects:read", "none", [], []],
   ["projects:write", "none", [], []],
   ["project:stand", "none", [], []],
-  ["project:manage", "none", [], ["project:stand", "records:read.all", "records:create", "records:write.all", "records:delete.all", "records:publish.all", "records:attribute", "search:read", "embeddings:read", "embeddings:write", "schemas:read", "drafts:read", "files:read.all", "files:write.all", "files:delete.all", "users:read.all", "identities:read", "users:create", "identities:delete", "users:write.all", "users:setup", "users:delete.all", "notifications:read.all", "notifications:write.all", "notifications:consent", "pushcredentials:read", "pushcredentials:write", "notes:read.all", "notes:write.all", "notes:create", "approvals:read", "approvals:write", "rooms:read", "rooms:write", "presence:read", "operations:read", "operations:execute", "operations:write", "appconfig:read", "schedules:read", "schedules:write", "hooks:read", "hooks:write", "auth:login_with_foir", "authclients:read", "authclients:write", "domains:read", "domains:write", "loginpages:read", "loginpages:write", "secrets:read", "secrets:list", "secrets:put", "secrets:delete", "appsecrets:read", "appsecrets:list", "appsecrets:put", "appsecrets:delete", "usersecrets:read", "usersecrets:list", "usersecrets:put", "usersecrets:delete", "opsecrets:read", "opsecrets:write", "settings:read", "settings:write", "designtokens:read", "designtokens:write", "models:read", "models:write", "configs:read", "configs:write", "signinproviders:read", "signinproviders:write", "apps:read", "apps:write", "events:read", "targeting:debug", "visitors:forward", "apikeys:read", "apikeys:write", "organizations:read", "organizations:create", "organizations:delete", "organizations:write", "organizations:reach", "members:read", "members:write", "roles:read", "roles:write", "projects:read", "projects:write", "audit:read"]],
+  ["project:manage", "none", [], ["project:stand", "records:read.all", "records:create", "records:write.all", "records:delete.all", "records:publish.all", "records:attribute", "search:read", "embeddings:read", "embeddings:write", "schemas:read", "drafts:read", "files:read.all", "files:write.all", "files:delete.all", "users:read.all", "identities:read", "users:create", "identities:delete", "users:write.all", "users:setup", "users:delete.all", "notifications:read.all", "notifications:write.all", "notifications:consent", "pushcredentials:read", "pushcredentials:write", "notes:read.all", "notes:write.all", "notes:create", "approvals:read", "approvals:write", "rooms:read", "rooms:write", "presence:read", "operations:read", "operations:execute", "operations:write", "appconfig:read", "schedules:read", "schedules:write", "hooks:read", "hooks:write", "authclients:read", "authclients:write", "domains:read", "domains:write", "loginpages:read", "loginpages:write", "secrets:read", "secrets:list", "secrets:put", "secrets:delete", "appsecrets:read", "appsecrets:list", "appsecrets:put", "appsecrets:delete", "usersecrets:read", "usersecrets:list", "usersecrets:put", "usersecrets:delete", "opsecrets:read", "opsecrets:write", "settings:read", "settings:write", "designtokens:read", "designtokens:write", "models:read", "models:write", "configs:read", "configs:write", "signinproviders:read", "signinproviders:write", "apps:read", "apps:write", "events:read", "targeting:debug", "visitors:forward", "apikeys:read", "apikeys:write", "organizations:read", "organizations:create", "organizations:delete", "organizations:write", "orgsettings:write", "organizations:reach", "members:read", "members:write", "roles:read", "roles:write", "projects:read", "projects:write", "audit:read"]],
   ["projects:create", "none", [], []],
   ["projects:delete", "none", [], []],
   ["tenants:read", "none", [], []],
@@ -111,7 +112,6 @@ var GRANT_TABLE = [
   ["usersecrets:list", "none", [], []],
   ["usersecrets:put", "none", [], []],
   ["usersecrets:delete", "none", [], []],
-  ["auth:login_with_foir", "none", [], []],
   ["signinproviders:read", "none", [], []],
   ["signinproviders:write", "none", [], []]
 ];

package/dist/react/FoirFeedback.d.ts

@@ -46,6 +46,25 @@ export interface FoirFeedbackProps {
      * button that calls it; given none, it says so and stops.
      */
     onSignIn?: () => void;
+    /**
+     * Whether a visitor can sign in on this site. Default true. `false` says
+     * they cannot, so where the project takes no notes from visitors who are not
+     * signed in, the widget says feedback is not open rather than asking them to
+     * sign in somewhere they cannot.
+     */
+    signIn?: boolean;
+    /**
+     * How the panel opens. `inline` (the default) opens it under the button, in
+     * the page's flow. `dialog` opens it over the page in a modal `<dialog>`,
+     * with a backdrop, closed by Escape, the backdrop or its Close button.
+     */
+    layout?: 'inline' | 'dialog';
+    /**
+     * The built-in styles' colours, radius and type. See
+     * `FoirFeedbackAppearance`: each is also a CSS custom property, so a
+     * stylesheet can set it instead. Ignored with `className`.
+     */
+    appearance?: FoirFeedbackAppearance;
     /** Called with a signed-in user's note once it is written. */
     onSubmitted?: (note: FoirUserNote) => void;
     /**
@@ -61,9 +80,45 @@ export interface FoirFeedbackProps {
     onError?: (error: unknown) => void;
     /**
      * Style it yourself. Passing a class turns OFF the built-in inline styles
-     * entirely, so the `data-foir-feedback-*` attributes below are yours to target
-     * without fighting anything.
+     * entirely, `appearance` with them, so the `data-foir-feedback-*` attributes
+     * are yours to target without fighting anything.
      */
     className?: string;
 }
-export declare function FoirFeedback({ client, subjects, subject, label, triggerLabel, title, placeholder, defaultOpen, onSignIn, onSubmitted, onVisitorSubmitted, onError, className, }: FoirFeedbackProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The built-in styles' tokens.
+ *
+ * Each is a CSS custom property on the wrapper, `--foir-feedback-<name>`, which
+ * the built-in styles read with today's look as the fallback. So a token can be
+ * set here, or from a stylesheet, where a design system's own variables can
+ * feed it:
+ *
+ * ```css
+ * [data-foir-feedback] { --foir-feedback-radius: var(--radius); }
+ * ```
+ *
+ * A value is any CSS value the property takes.
+ */
+export interface FoirFeedbackAppearance {
+    /** `--foir-feedback-text`. Default: inherited, or the browser's dialog text in a dialog. */
+    colorText?: string;
+    /** `--foir-feedback-muted`, the line naming what it is about. Default: the text at three quarters. */
+    colorMuted?: string;
+    /** `--foir-feedback-background`, the panel and its fields. Default: none, or the browser's dialog background in a dialog. */
+    colorBackground?: string;
+    /** `--foir-feedback-border`. Default `currentColor`. */
+    colorBorder?: string;
+    /** `--foir-feedback-primary`, the send button's fill and border. Default: no fill. */
+    colorPrimary?: string;
+    /** `--foir-feedback-primary-text`, the send button's text. Default: inherited. */
+    colorPrimaryText?: string;
+    /** `--foir-feedback-danger`, a failure. Default `#c0392b`. */
+    colorDanger?: string;
+    /** `--foir-feedback-radius`, the panel's corners; its controls take three quarters. Default `8px`. */
+    radius?: string;
+    /** `--foir-feedback-font-family`. Default: inherited. */
+    fontFamily?: string;
+    /** `--foir-feedback-font-size`. Default: inherited. */
+    fontSize?: string;
+}
+export declare function FoirFeedback({ client, subjects, subject, label, triggerLabel, title, placeholder, defaultOpen, onSignIn, signIn, layout, appearance, onSubmitted, onVisitorSubmitted, onError, className, }: FoirFeedbackProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/FoirProvider.d.ts

@@ -28,10 +28,14 @@ export interface FoirContextValue {
         email: string;
         password: string;
     }): Promise<FoirUser>;
+    /**
+     * Start a sign-up: the address is mailed a code, and `signInWithOtp` with it
+     * finishes the account and signs them in.
+     */
     register(vars: {
         email: string;
         password: string;
-    }): Promise<FoirUser>;
+    }): Promise<void>;
     requestOtp(email: string): Promise<boolean>;
     signInWithOtp(vars: {
         email: string;
@@ -138,7 +142,7 @@ export declare function useFoirAuth(): {
     register: (vars: {
         email: string;
         password: string;
-    }) => Promise<FoirUser>;
+    }) => Promise<void>;
     requestOtp: (email: string) => Promise<boolean>;
     signInWithOtp: (vars: {
         email: string;

package/dist/react/index.d.ts

@@ -20,7 +20,7 @@ export type { OAuthButtonsProps } from './OAuthButtons';
 export { UserButton } from './UserButton';
 export type { UserButtonProps } from './UserButton';
 export { FoirFeedback } from './FoirFeedback';
-export type { FoirFeedbackProps, FoirFeedbackClient } from './FoirFeedback';
+export type { FoirFeedbackAppearance, FoirFeedbackClient, FoirFeedbackProps, } from './FoirFeedback';
 export { createLocalStorageAdapter } from './localStorageAdapter';
 export type { FoirAccess, FoirUser, SessionAdapter, AuthProviderPublic } from '../auth';
 export type { FoirEnv } from '../graphql/foir-request';