@drawbridge/components 0.1.6 → 0.1.8

package/dist/dashboard/form-organization-workflow.mjs

@@ -4,13 +4,14 @@ import Link from "./link.mjs";
 import { Fragment, useCallback, useState } from "react";
 import { request } from "@drawbridge/drawbridge-utils/fetch";
 import { useForm, useWatch, Controller } from "../shared/lib/form.mjs";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import yup, { resolver } from "../shared/lib/yup.mjs";
 import Form from "../shared/form.mjs";
 import Fieldset from "../shared/fieldset.mjs";
 import InputGroup from "../input-group.mjs";
 import Error from "../shared/error.mjs";
 import InputText from "../input-text.mjs";
+import InputTextarea from "../input-textarea.mjs";
 import InputUrl from "../shared/input-url.mjs";
 import InputResource from "./input-resource.mjs";
 import InputCombobox from "./input-combobox.mjs";
@@ -19,6 +20,7 @@ import { InputArrayButton, InputArrayControl, InputArraySortable } from "./input
 import Badge from "../shared/badge.mjs";
 import CardTask from "./card-task.mjs";
 import { LoaderDynamic } from "../shared/loader.mjs";
+import { smsNumberActive } from "./lib/sms.mjs";
 import Trash from "../icons/trash.mjs";
 import Button from "../shared/button.mjs";
 const emailSteps = ["step.email.send", "step.email.digest"];
@@ -195,32 +197,45 @@ const WorkflowTitleField = ({ control, formState }) => /* @__PURE__ */ jsx(
   }
 );
 const campaignFilterId = (campaign) => (campaign == null ? void 0 : campaign.id) || campaign || null;
+const campaignFilterIds = (filters) => (Array.isArray(filters == null ? void 0 : filters.campaigns) ? filters.campaigns : [filters == null ? void 0 : filters.campaign]).map(campaignFilterId).filter(Boolean);
+const filterRows = (ids, docs) => ids.map((id) => docs.find((doc) => (doc == null ? void 0 : doc.id) === id) || { id });
+const filterSeed = (seeds, id) => (seeds || []).find((doc) => (doc == null ? void 0 : doc.id) === id);
+const filterMissing = (error) => {
+  if ((error == null ? void 0 : error.status) === 404) return { result: null };
+  throw error;
+};
 const WorkflowFilterField = ({
   collection,
   control,
   label,
   message,
   model,
+  multiple = false,
   name,
   organization,
-  resource
+  resource,
+  seeds
 }) => {
   const queryClient = useQueryClient();
-  const id = useWatch({
+  const value = useWatch({
     control,
     name
   });
-  const selected = useQuery({
-    queryKey: ["workflow-filter", model, organization, id],
-    queryFn: async () => {
-      const { result } = await request({
-        endpoint: "/organization/" + organization + "/" + resource + "/" + id
-      }).catch(() => ({ result: null }));
-      return result;
-    },
-    enabled: Boolean(id),
-    staleTime: Infinity
-  });
+  const ids = multiple ? value || [] : [value].filter(Boolean);
+  const docs = useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ["workflow-filter", model, organization, id],
+      queryFn: async () => {
+        const { result } = await request({
+          endpoint: "/organization/" + organization + "/" + resource + "/" + id
+        }).catch(filterMissing);
+        return result;
+      },
+      initialData: () => filterSeed(seeds, id),
+      staleTime: Infinity
+    }))
+  }).map((query) => query.data);
+  const seed = (doc) => (doc == null ? void 0 : doc.id) && queryClient.setQueryData(["workflow-filter", model, organization, doc.id], doc);
   return /* @__PURE__ */ jsx(
     Controller,
     {
@@ -237,11 +252,15 @@ const WorkflowFilterField = ({
                   ...{
                     endpoint: "/organization/" + organization + "/" + collection,
                     model,
-                    onChange: (doc) => {
-                      if (doc == null ? void 0 : doc.id) queryClient.setQueryData(["workflow-filter", model, organization, doc.id], doc);
+                    multiple,
+                    onChange: multiple ? (picked) => {
+                      picked.forEach(seed);
+                      onChange(picked.map((doc) => doc == null ? void 0 : doc.id).filter(Boolean));
+                    } : (doc) => {
+                      seed(doc);
                       onChange((doc == null ? void 0 : doc.id) || null);
                     },
-                    value: selected.data || null
+                    value: multiple ? filterRows(ids, docs) : docs[0] || null
                   }
                 }
               ),
@@ -328,7 +347,7 @@ const FormOrganizationWorkflow = ({
               // Both blank, meaning every campaign and every segment. The
               // create drawer asks for a trigger and a title only; narrowing
               // is done on the workflow page afterwards.
-              campaign: null,
+              campaigns: [],
               segment: null
             }
           }
@@ -397,6 +416,48 @@ const FormOrganizationWorkflow = ({
     }
   );
 };
+const workflowSchema = yup.object({
+  title: yup.string().required().max(100).label("Title"),
+  triggerEvent: yup.string().label("Trigger").required("A trigger is required"),
+  steps: yup.array().of(
+    yup.object({
+      type: yup.string().label("Step").required("A step is required"),
+      url: yup.string().when("type", ([type], schema) => {
+        if (type === "step.webhook.send") {
+          return schema.url().required("URL is required").label("URL");
+        }
+        return schema;
+      }),
+      subject: yup.string().when("type", ([type], schema) => {
+        if (emailSteps.includes(type)) {
+          return schema.required("Subject is required").label("Subject");
+        }
+        return schema;
+      }),
+      message: yup.string().when("type", ([type], schema) => {
+        if (type === "step.sms.send") {
+          return schema.required("Message is required").max(1500).label("Message");
+        }
+        if (messageSteps.includes(type)) {
+          return schema.required("Message is required").label("Message");
+        }
+        return schema;
+      }),
+      // No minimum. The organization owner is always a recipient, so a
+      // step with no members chosen is complete — requiring one here
+      // made the step unsaveable for a solo merchant, who has no
+      // member documents to choose and cannot reach the members
+      // endpoint at all.
+      members: yup.array().label("Recipients"),
+      discount: yup.object().nullable().when("type", ([type], schema) => {
+        if (type === "step.commerce.code.issue") {
+          return schema.required("Discount is required").label("Discount");
+        }
+        return schema;
+      })
+    })
+  )
+});
 const FormOrganizationWorkflowEdit = ({
   disabled,
   onClose,
@@ -404,11 +465,13 @@ const FormOrganizationWorkflowEdit = ({
   onSuccess,
   values
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const { catalog, catalogList, triggerOptions } = useWorkflowCatalog(values == null ? void 0 : values.organization, (_a = values == null ? void 0 : values.trigger) == null ? void 0 : _a.event);
   const { items: memberItems, loading: membersLoading } = useOrganizationMembers(values == null ? void 0 : values.organization);
   const queryClient = useQueryClient();
-  const ownerEmail = queryClient.getQueryData(["organization", values == null ? void 0 : values.organization]).owner.email;
+  const organizationData = queryClient.getQueryData(["organization", values == null ? void 0 : values.organization]);
+  const ownerEmail = organizationData.owner.email;
+  const smsActive = smsNumberActive(organizationData);
   const commerceConnectionId = ((_b = catalogList.flatMap((item) => item.steps || []).find(
     (s) => s.value === "step.commerce.customer.insert" || s.value === "step.commerce.code.issue"
   )) == null ? void 0 : _b.connectionId) || null;
@@ -436,55 +499,15 @@ const FormOrganizationWorkflowEdit = ({
   const { control, formState, getValues, handleSubmit, setValue } = useForm({
     values: {
       steps: defaultSteps,
-      filterCampaign: campaignFilterId((_h = (_g = values == null ? void 0 : values.trigger) == null ? void 0 : _g.filters) == null ? void 0 : _h.campaign),
+      filterCampaigns: campaignFilterIds((_g = values == null ? void 0 : values.trigger) == null ? void 0 : _g.filters),
       // Stored and returned as a plain id — extend.workflow() $lookup-hydrates
       // only the campaign — but read through the same reducer, so the field
       // stays right if the segment is ever hydrated too.
-      filterSegment: campaignFilterId((_j = (_i = values == null ? void 0 : values.trigger) == null ? void 0 : _i.filters) == null ? void 0 : _j.segment),
+      filterSegment: campaignFilterId((_i = (_h = values == null ? void 0 : values.trigger) == null ? void 0 : _h.filters) == null ? void 0 : _i.segment),
       title: (values == null ? void 0 : values.title) || "",
-      triggerEvent: ((_k = values == null ? void 0 : values.trigger) == null ? void 0 : _k.event) || ""
+      triggerEvent: ((_j = values == null ? void 0 : values.trigger) == null ? void 0 : _j.event) || ""
     },
-    resolver: resolver(
-      yup.object({
-        title: yup.string().required().max(100).label("Title"),
-        triggerEvent: yup.string().label("Trigger").required("A trigger is required"),
-        steps: yup.array().of(
-          yup.object({
-            type: yup.string().label("Step").required("A step is required"),
-            url: yup.string().when("type", ([type], schema) => {
-              if (type === "step.webhook.send") {
-                return schema.url().required("URL is required").label("URL");
-              }
-              return schema;
-            }),
-            subject: yup.string().when("type", ([type], schema) => {
-              if (messageSteps.includes(type)) {
-                return schema.required("Subject is required").label("Subject");
-              }
-              return schema;
-            }),
-            message: yup.string().when("type", ([type], schema) => {
-              if (messageSteps.includes(type)) {
-                return schema.required("Message is required").label("Message");
-              }
-              return schema;
-            }),
-            // No minimum. The organization owner is always a recipient, so a
-            // step with no members chosen is complete — requiring one here
-            // made the step unsaveable for a solo merchant, who has no
-            // member documents to choose and cannot reach the members
-            // endpoint at all.
-            members: yup.array().label("Recipients"),
-            discount: yup.object().nullable().when("type", ([type], schema) => {
-              if (type === "step.commerce.code.issue") {
-                return schema.required("Discount is required").label("Discount");
-              }
-              return schema;
-            })
-          })
-        )
-      })
-    )
+    resolver: resolver(workflowSchema)
   });
   const watchedTrigger = useWatch({
     control,
@@ -494,7 +517,7 @@ const FormOrganizationWorkflowEdit = ({
     control,
     name: "steps"
   });
-  const issueIndex = ((_l = values == null ? void 0 : values.issue) == null ? void 0 : _l.step) ? (watchedSteps || []).findIndex((step) => (step == null ? void 0 : step.type) === values.issue.step) : -1;
+  const issueIndex = ((_k = values == null ? void 0 : values.issue) == null ? void 0 : _k.step) ? (watchedSteps || []).findIndex((step) => (step == null ? void 0 : step.type) === values.issue.step) : -1;
   const selectedTriggerEntry = catalogList.find((item) => item.trigger === watchedTrigger) || null;
   const getAvailableVariables = (index) => {
     return watchedSteps.slice(0, index).flatMap((watchedStep) => {
@@ -534,6 +557,22 @@ const FormOrganizationWorkflowEdit = ({
             href: "/organizations/" + (values == null ? void 0 : values.organization) + "/connections/" + step.slug,
             onClick: onClose
           }
+        } : {},
+        // The same link-shaped option, greyed: it cannot be picked, and
+        // clicking it opens Settings, where the number is bought.
+        ...step.value === "step.sms.send" && !smsActive ? {
+          badge: {
+            text: "Settings"
+          },
+          className: "opacity-50",
+          disabled: false,
+          element: Link,
+          key: step == null ? void 0 : step.key,
+          props: {
+            "aria-disabled": true,
+            href: "/organizations/" + (values == null ? void 0 : values.organization) + "/settings",
+            onClick: onClose
+          }
         } : {}
       }))
     ];
@@ -580,7 +619,7 @@ const FormOrganizationWorkflowEdit = ({
   };
   const onSubmit = async ({
     steps,
-    filterCampaign,
+    filterCampaigns,
     filterSegment,
     title,
     triggerEvent
@@ -590,10 +629,8 @@ const FormOrganizationWorkflowEdit = ({
         steps: steps.map(({ connectionId, discount, members, message, score, slug, subject, text, type, url }, index) => {
           const settings = {};
           if (type === "step.webhook.send") settings.url = url;
-          if (messageSteps.includes(type)) {
-            settings.subject = subject;
-            settings.message = message;
-          }
+          if (emailSteps.includes(type)) settings.subject = subject;
+          if (messageSteps.includes(type)) settings.message = message;
           if (emailSteps.includes(type)) {
             if (score && score.subject === subject && score.message === message) settings.score = score;
             else if (score) setValue("steps." + index + ".score", null);
@@ -616,7 +653,7 @@ const FormOrganizationWorkflowEdit = ({
         trigger: {
           event: triggerEvent,
           filters: {
-            campaign: filterCampaign || null,
+            campaigns: filterCampaigns || [],
             segment: filterSegment || null
           }
         }
@@ -686,12 +723,14 @@ const FormOrganizationWorkflowEdit = ({
                 ...{
                   collection: "campaigns",
                   control,
-                  label: "Campaign",
-                  message: "Only trigger for leads from a specific campaign. Leaving blank will trigger for all campaigns.",
+                  label: "Campaigns",
+                  message: "Only runs for leads from the campaigns you add. With none added, it runs for every campaign.",
                   model: "campaign",
-                  name: "filterCampaign",
+                  multiple: true,
+                  name: "filterCampaigns",
                   organization: values == null ? void 0 : values.organization,
-                  resource: "campaign"
+                  resource: "campaign",
+                  seeds: (_m = (_l = values == null ? void 0 : values.trigger) == null ? void 0 : _l.filters) == null ? void 0 : _m.campaigns
                 }
               }
             ),
@@ -714,7 +753,7 @@ const FormOrganizationWorkflowEdit = ({
               InputGroup,
               {
                 ...{
-                  error: (_n = (_m = formState == null ? void 0 : formState.errors) == null ? void 0 : _m.steps) == null ? void 0 : _n.message,
+                  error: (_o = (_n = formState == null ? void 0 : formState.errors) == null ? void 0 : _n.steps) == null ? void 0 : _o.message,
                   input: /* @__PURE__ */ jsx(
                     InputArraySortable,
                     {
@@ -944,36 +983,6 @@ const FormOrganizationWorkflowEdit = ({
                                   }
                                 }
                               ),
-                              step.type === "step.sms.send" && /* @__PURE__ */ jsx(
-                                Controller,
-                                {
-                                  ...{
-                                    control,
-                                    name: `steps.${index}.subject`,
-                                    render: ({ field: { value, onChange } }) => {
-                                      var _a2, _b2, _c2, _d2;
-                                      return /* @__PURE__ */ jsx(
-                                        InputGroup,
-                                        {
-                                          ...{
-                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.subject) == null ? void 0 : _d2.message,
-                                            input: /* @__PURE__ */ jsx(
-                                              InputText,
-                                              {
-                                                ...{
-                                                  onChange,
-                                                  value: value || ""
-                                                }
-                                              }
-                                            ),
-                                            label: "Subject"
-                                          }
-                                        }
-                                      );
-                                    }
-                                  }
-                                }
-                              ),
                               step.type === "step.sms.send" && /* @__PURE__ */ jsx(
                                 Controller,
                                 {
@@ -988,10 +997,11 @@ const FormOrganizationWorkflowEdit = ({
                                           ...{
                                             error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.message) == null ? void 0 : _d2.message,
                                             input: /* @__PURE__ */ jsx(
-                                              InputText,
+                                              InputTextarea,
                                               {
                                                 ...{
                                                   onChange,
+                                                  rows: 3,
                                                   value: value || ""
                                                 }
                                               }
@@ -1105,5 +1115,10 @@ export {
   FormOrganizationWorkflow,
   FormOrganizationWorkflowEdit,
   campaignFilterId,
-  stepRow
+  campaignFilterIds,
+  filterMissing,
+  filterRows,
+  filterSeed,
+  stepRow,
+  workflowSchema
 };

package/dist/dashboard/lib/navigation.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var navigation_exports = {};
 __export(navigation_exports, {
-  interceptHref: () => interceptHref
+  expiredSessionHref: () => expiredSessionHref,
+  interceptHref: () => interceptHref,
+  retrySession: () => retrySession,
+  sessionRetryKey: () => sessionRetryKey
 });
 module.exports = __toCommonJS(navigation_exports);
 const interceptHref = ({
@@ -40,7 +43,24 @@ const interceptHref = ({
   if (url.pathname === location.pathname && url.search === location.search) return null;
   return url.pathname + url.search + url.hash;
 };
+const expiredSessionHref = ({
+  csrf,
+  pathname = "/",
+  search = ""
+}) => {
+  if (pathname === "/auth" || pathname.startsWith("/auth/")) return null;
+  const back = "/auth?redirectTo=" + encodeURIComponent(pathname + search);
+  return "/api/auth/signout?redirectTo=" + encodeURIComponent(back) + (csrf ? "&csrf=" + encodeURIComponent(csrf) : "");
+};
+const sessionRetryKey = "drawbridge.session.retry";
+const retrySession = ({
+  now,
+  stamp
+}) => !(Number(stamp) > now - 6e4);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  interceptHref
+  expiredSessionHref,
+  interceptHref,
+  retrySession,
+  sessionRetryKey
 });

package/dist/dashboard/lib/navigation.mjs

@@ -18,6 +18,23 @@ const interceptHref = ({
   if (url.pathname === location.pathname && url.search === location.search) return null;
   return url.pathname + url.search + url.hash;
 };
+const expiredSessionHref = ({
+  csrf,
+  pathname = "/",
+  search = ""
+}) => {
+  if (pathname === "/auth" || pathname.startsWith("/auth/")) return null;
+  const back = "/auth?redirectTo=" + encodeURIComponent(pathname + search);
+  return "/api/auth/signout?redirectTo=" + encodeURIComponent(back) + (csrf ? "&csrf=" + encodeURIComponent(csrf) : "");
+};
+const sessionRetryKey = "drawbridge.session.retry";
+const retrySession = ({
+  now,
+  stamp
+}) => !(Number(stamp) > now - 6e4);
 export {
-  interceptHref
+  expiredSessionHref,
+  interceptHref,
+  retrySession,
+  sessionRetryKey
 };

package/dist/dashboard/lib/sms.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sms_exports = {};
+__export(sms_exports, {
+  smsNumberActive: () => smsNumberActive
+});
+module.exports = __toCommonJS(sms_exports);
+const smsNumberActive = (organization) => ((organization == null ? void 0 : organization.identityItems) || []).some((row) => (row == null ? void 0 : row.type) === "sms" && (row == null ? void 0 : row.status) === "verified");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  smsNumberActive
+});

package/dist/dashboard/lib/sms.mjs

@@ -0,0 +1,4 @@
+const smsNumberActive = (organization) => ((organization == null ? void 0 : organization.identityItems) || []).some((row) => (row == null ? void 0 : row.type) === "sms" && (row == null ? void 0 : row.status) === "verified");
+export {
+  smsNumberActive
+};

package/dist/dashboard/provider-ui.js

@@ -37,6 +37,7 @@ var import_react_query = require("@tanstack/react-query");
 var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
 var import_socket = require("socket.io-client");
 var import_template_not_found = __toESM(require("./template-not-found"));
+var import_navigation = require("./lib/navigation");
 var import_drawer = __toESM(require("./drawer"));
 var import_guard_navigation = __toESM(require("./guard-navigation"));
 var import_modal = __toESM(require("./modal"));
@@ -46,7 +47,7 @@ const ProviderUi = ({
   children,
   token
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const queryClient = (0, import_react_query.useQueryClient)();
   const tokenRef = (0, import_react.useRef)(token);
   (0, import_react.useEffect)(
@@ -171,7 +172,31 @@ const ProviderUi = ({
       }
     ]
   });
-  if ((account == null ? void 0 : account.isLoading) || (app == null ? void 0 : app.isLoading)) {
+  const expired = ((_a = account == null ? void 0 : account.error) == null ? void 0 : _a.status) === 401 && typeof window !== "undefined" ? (0, import_navigation.expiredSessionHref)({
+    csrf: (_b = document.cookie.match(/(?:^|;\s*)drawbridge\.csrf=([^;]+)/)) == null ? void 0 : _b[1],
+    pathname: window.location.pathname,
+    search: window.location.search
+  }) : null;
+  (0, import_react.useEffect)(
+    () => {
+      if (!expired) return;
+      const signOut = () => window.location.replace(expired);
+      try {
+        if (!(0, import_navigation.retrySession)({ now: Date.now(), stamp: window.sessionStorage.getItem(import_navigation.sessionRetryKey) })) return signOut();
+        window.sessionStorage.setItem(import_navigation.sessionRetryKey, String(Date.now()));
+      } catch {
+        return signOut();
+      }
+      fetch(
+        "/api/auth/refresh",
+        {
+          method: "POST"
+        }
+      ).then((response) => response.ok ? window.location.reload() : signOut()).catch(signOut);
+    },
+    [expired]
+  );
+  if ((account == null ? void 0 : account.isLoading) || (app == null ? void 0 : app.isLoading) || expired) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loader.LogoLoader, {});
   }
   ;
@@ -182,7 +207,7 @@ const ProviderUi = ({
         ...{
           button: false,
           href: false,
-          message: (_a = app == null ? void 0 : app.error) == null ? void 0 : _a.message
+          message: (_c = app == null ? void 0 : app.error) == null ? void 0 : _c.message
         }
       }
     );
@@ -195,7 +220,7 @@ const ProviderUi = ({
         {
           ...{
             button: false,
-            message: (_b = account == null ? void 0 : account.error) == null ? void 0 : _b.message
+            message: (_d = account == null ? void 0 : account.error) == null ? void 0 : _d.message
           }
         }
       );
@@ -207,7 +232,7 @@ const ProviderUi = ({
         ...{
           button: "Sign in",
           href: "/auth",
-          message: (_c = account == null ? void 0 : account.error) == null ? void 0 : _c.message
+          message: (_e = account == null ? void 0 : account.error) == null ? void 0 : _e.message
         }
       }
     );
@@ -227,7 +252,7 @@ const ProviderUi = ({
             })
           )
         },
-        children: (_d = drawer == null ? void 0 : drawer.data) == null ? void 0 : _d.children
+        children: (_f = drawer == null ? void 0 : drawer.data) == null ? void 0 : _f.children
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/dashboard/provider-ui.mjs

@@ -5,6 +5,7 @@ import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { isTransientError, request, setMemoryToken } from "@drawbridge/drawbridge-utils/fetch";
 import { io } from "socket.io-client";
 import TemplateNotFound from "./template-not-found.mjs";
+import { expiredSessionHref, retrySession, sessionRetryKey } from "./lib/navigation.mjs";
 import Drawer from "./drawer.mjs";
 import GuardNavigation from "./guard-navigation.mjs";
 import Modal from "./modal.mjs";
@@ -14,7 +15,7 @@ const ProviderUi = ({
   children,
   token
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const queryClient = useQueryClient();
   const tokenRef = useRef(token);
   useEffect(
@@ -139,7 +140,31 @@ const ProviderUi = ({
       }
     ]
   });
-  if ((account == null ? void 0 : account.isLoading) || (app == null ? void 0 : app.isLoading)) {
+  const expired = ((_a = account == null ? void 0 : account.error) == null ? void 0 : _a.status) === 401 && typeof window !== "undefined" ? expiredSessionHref({
+    csrf: (_b = document.cookie.match(/(?:^|;\s*)drawbridge\.csrf=([^;]+)/)) == null ? void 0 : _b[1],
+    pathname: window.location.pathname,
+    search: window.location.search
+  }) : null;
+  useEffect(
+    () => {
+      if (!expired) return;
+      const signOut = () => window.location.replace(expired);
+      try {
+        if (!retrySession({ now: Date.now(), stamp: window.sessionStorage.getItem(sessionRetryKey) })) return signOut();
+        window.sessionStorage.setItem(sessionRetryKey, String(Date.now()));
+      } catch {
+        return signOut();
+      }
+      fetch(
+        "/api/auth/refresh",
+        {
+          method: "POST"
+        }
+      ).then((response) => response.ok ? window.location.reload() : signOut()).catch(signOut);
+    },
+    [expired]
+  );
+  if ((account == null ? void 0 : account.isLoading) || (app == null ? void 0 : app.isLoading) || expired) {
     return /* @__PURE__ */ jsx(LogoLoader, {});
   }
   ;
@@ -150,7 +175,7 @@ const ProviderUi = ({
         ...{
           button: false,
           href: false,
-          message: (_a = app == null ? void 0 : app.error) == null ? void 0 : _a.message
+          message: (_c = app == null ? void 0 : app.error) == null ? void 0 : _c.message
         }
       }
     );
@@ -163,7 +188,7 @@ const ProviderUi = ({
         {
           ...{
             button: false,
-            message: (_b = account == null ? void 0 : account.error) == null ? void 0 : _b.message
+            message: (_d = account == null ? void 0 : account.error) == null ? void 0 : _d.message
           }
         }
       );
@@ -175,7 +200,7 @@ const ProviderUi = ({
         ...{
           button: "Sign in",
           href: "/auth",
-          message: (_c = account == null ? void 0 : account.error) == null ? void 0 : _c.message
+          message: (_e = account == null ? void 0 : account.error) == null ? void 0 : _e.message
         }
       }
     );
@@ -195,7 +220,7 @@ const ProviderUi = ({
             })
           )
         },
-        children: (_d = drawer == null ? void 0 : drawer.data) == null ? void 0 : _d.children
+        children: (_f = drawer == null ? void 0 : drawer.data) == null ? void 0 : _f.children
       }
     ),
     /* @__PURE__ */ jsx(