@broberg/app-shell 0.6.0 → 0.7.1

package/dist/preact.d.cts

@@ -209,6 +209,28 @@ declare function copenhagenDay(at?: Date): string;
 declare function fillDays(series: AnalyticsDay[], days: number, now?: Date): AnalyticsDay[];
 /** Whole-percent change against the previous period, or null when there is nothing to compare with. */
 declare function changePct(now: number, before: number): number | null;
+interface TenantMembershipRow {
+    tenant: {
+        id: string;
+        slug: string;
+        name: string;
+        status?: "active" | "suspended";
+    };
+    role: string;
+}
+interface TenantAdapter {
+    load(): Promise<TenantMembershipRow[]>;
+}
+declare class TenantLoadError extends Error {
+    readonly status: number;
+    constructor(status: number);
+}
+/** GET {url} (default /api/me/memberships) → the user's memberships. Non-2xx or a bad body THROWS. */
+declare function createFetchTenantAdapter(opts?: {
+    url?: string;
+    fetch?: typeof fetch;
+    credentials?: RequestCredentials;
+}): TenantAdapter;
 declare const TEXT: {
     readonly da: {
         readonly openMenu: "Åbn menu";
@@ -271,6 +293,12 @@ declare const TEXT: {
         readonly analyticsLoading: "Henter tal…";
         readonly analyticsUnconfigured: "Analytics er ikke sat op for denne app.";
         readonly analyticsUnavailable: "Upmetrics svarer ikke lige nu. Prøv igen om lidt.";
+        readonly tenantSwitch: "Skift organisation";
+        readonly tenantLoadFailed: "Kunne ikke hente dine organisationer.";
+        readonly tenantSwitchFailed: "Kunne ikke skifte organisation. Du er stadig i {name}.";
+        readonly tenantRetry: "Prøv igen";
+        readonly tenantSuspended: "lukket";
+        readonly tenantActive: "aktiv";
     };
     readonly en: {
         readonly openMenu: "Open menu";
@@ -333,6 +361,12 @@ declare const TEXT: {
         readonly analyticsLoading: "Loading figures…";
         readonly analyticsUnconfigured: "Analytics is not set up for this app.";
         readonly analyticsUnavailable: "Upmetrics is not answering right now. Try again shortly.";
+        readonly tenantSwitch: "Switch organisation";
+        readonly tenantLoadFailed: "Could not load your organisations.";
+        readonly tenantSwitchFailed: "Could not switch organisation. You are still in {name}.";
+        readonly tenantRetry: "Try again";
+        readonly tenantSuspended: "suspended";
+        readonly tenantActive: "active";
     };
 };
 type Lang = keyof typeof TEXT;
@@ -563,5 +597,24 @@ interface AnalyticsPageProps {
  * as a quiet month.
  */
 declare function AnalyticsPage({ lang, adapter, periods, initialDays }: AnalyticsPageProps): JSX.Element;
+interface TenantSwitcherProps {
+    lang: Lang;
+    /** The slug the app is in right now — the app knows it (from tenantMiddleware). */
+    activeSlug: string;
+    /** Default: `createFetchTenantAdapter()` → GET /api/me/memberships (@broberg/tenant/hono tenantRoutes). */
+    adapter?: TenantAdapter;
+    /**
+     * Switch through the APP's own route — navigate to `/t/<slug>/…`, or set the
+     * preference and reload. A rejection keeps the current organisation and shows
+     * why; the switcher never pretends a switch happened.
+     */
+    onSwitch: (slug: string) => Promise<void> | void;
+}
+/**
+ * The user's own organisations, the active one marked, and a switch. Only the
+ * memberships the backend returns are listed — never a typed or guessed slug.
+ * With one organisation it is a plain label, not a menu.
+ */
+declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }: TenantSwitcherProps): JSX.Element;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -209,6 +209,28 @@ declare function copenhagenDay(at?: Date): string;
 declare function fillDays(series: AnalyticsDay[], days: number, now?: Date): AnalyticsDay[];
 /** Whole-percent change against the previous period, or null when there is nothing to compare with. */
 declare function changePct(now: number, before: number): number | null;
+interface TenantMembershipRow {
+    tenant: {
+        id: string;
+        slug: string;
+        name: string;
+        status?: "active" | "suspended";
+    };
+    role: string;
+}
+interface TenantAdapter {
+    load(): Promise<TenantMembershipRow[]>;
+}
+declare class TenantLoadError extends Error {
+    readonly status: number;
+    constructor(status: number);
+}
+/** GET {url} (default /api/me/memberships) → the user's memberships. Non-2xx or a bad body THROWS. */
+declare function createFetchTenantAdapter(opts?: {
+    url?: string;
+    fetch?: typeof fetch;
+    credentials?: RequestCredentials;
+}): TenantAdapter;
 declare const TEXT: {
     readonly da: {
         readonly openMenu: "Åbn menu";
@@ -271,6 +293,12 @@ declare const TEXT: {
         readonly analyticsLoading: "Henter tal…";
         readonly analyticsUnconfigured: "Analytics er ikke sat op for denne app.";
         readonly analyticsUnavailable: "Upmetrics svarer ikke lige nu. Prøv igen om lidt.";
+        readonly tenantSwitch: "Skift organisation";
+        readonly tenantLoadFailed: "Kunne ikke hente dine organisationer.";
+        readonly tenantSwitchFailed: "Kunne ikke skifte organisation. Du er stadig i {name}.";
+        readonly tenantRetry: "Prøv igen";
+        readonly tenantSuspended: "lukket";
+        readonly tenantActive: "aktiv";
     };
     readonly en: {
         readonly openMenu: "Open menu";
@@ -333,6 +361,12 @@ declare const TEXT: {
         readonly analyticsLoading: "Loading figures…";
         readonly analyticsUnconfigured: "Analytics is not set up for this app.";
         readonly analyticsUnavailable: "Upmetrics is not answering right now. Try again shortly.";
+        readonly tenantSwitch: "Switch organisation";
+        readonly tenantLoadFailed: "Could not load your organisations.";
+        readonly tenantSwitchFailed: "Could not switch organisation. You are still in {name}.";
+        readonly tenantRetry: "Try again";
+        readonly tenantSuspended: "suspended";
+        readonly tenantActive: "active";
     };
 };
 type Lang = keyof typeof TEXT;
@@ -563,5 +597,24 @@ interface AnalyticsPageProps {
  * as a quiet month.
  */
 declare function AnalyticsPage({ lang, adapter, periods, initialDays }: AnalyticsPageProps): JSX.Element;
+interface TenantSwitcherProps {
+    lang: Lang;
+    /** The slug the app is in right now — the app knows it (from tenantMiddleware). */
+    activeSlug: string;
+    /** Default: `createFetchTenantAdapter()` → GET /api/me/memberships (@broberg/tenant/hono tenantRoutes). */
+    adapter?: TenantAdapter;
+    /**
+     * Switch through the APP's own route — navigate to `/t/<slug>/…`, or set the
+     * preference and reload. A rejection keeps the current organisation and shows
+     * why; the switcher never pretends a switch happened.
+     */
+    onSwitch: (slug: string) => Promise<void> | void;
+}
+/**
+ * The user's own organisations, the active one marked, and a switch. Only the
+ * memberships the backend returns are listed — never a typed or guessed slug.
+ * With one organisation it is a plain label, not a menu.
+ */
+declare function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }: TenantSwitcherProps): JSX.Element;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -272,6 +272,32 @@ function fillDays(series, days, now = /* @__PURE__ */ new Date()) {
 function changePct(now, before) {
   return before === 0 ? null : Math.round((now - before) / before * 100);
 }
+var TenantLoadError = class extends Error {
+  constructor(status) {
+    super(`HTTP ${status}`);
+    this.status = status;
+    this.name = "TenantLoadError";
+  }
+  status;
+};
+function createFetchTenantAdapter(opts = {}) {
+  return {
+    async load() {
+      let res;
+      try {
+        res = await (opts.fetch ?? fetch)(opts.url ?? "/api/me/memberships", { credentials: opts.credentials ?? "same-origin", headers: { accept: "application/json" } });
+      } catch {
+        throw new TenantLoadError(0);
+      }
+      const body = await res.json().catch(() => null);
+      if (!res.ok) throw new TenantLoadError(res.status);
+      if (!Array.isArray(body) || !body.every((r) => r && typeof r.role === "string" && r.tenant && typeof r.tenant.slug === "string")) {
+        throw new TenantLoadError(res.status);
+      }
+      return body;
+    }
+  };
+}
 var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
@@ -333,7 +359,13 @@ var TEXT = {
     analyticsEmpty: "Ingen bes\xF8g i perioden.",
     analyticsLoading: "Henter tal\u2026",
     analyticsUnconfigured: "Analytics er ikke sat op for denne app.",
-    analyticsUnavailable: "Upmetrics svarer ikke lige nu. Pr\xF8v igen om lidt."
+    analyticsUnavailable: "Upmetrics svarer ikke lige nu. Pr\xF8v igen om lidt.",
+    tenantSwitch: "Skift organisation",
+    tenantLoadFailed: "Kunne ikke hente dine organisationer.",
+    tenantSwitchFailed: "Kunne ikke skifte organisation. Du er stadig i {name}.",
+    tenantRetry: "Pr\xF8v igen",
+    tenantSuspended: "lukket",
+    tenantActive: "aktiv"
   },
   en: {
     openMenu: "Open menu",
@@ -395,7 +427,13 @@ var TEXT = {
     analyticsEmpty: "No visits in this period.",
     analyticsLoading: "Loading figures\u2026",
     analyticsUnconfigured: "Analytics is not set up for this app.",
-    analyticsUnavailable: "Upmetrics is not answering right now. Try again shortly."
+    analyticsUnavailable: "Upmetrics is not answering right now. Try again shortly.",
+    tenantSwitch: "Switch organisation",
+    tenantLoadFailed: "Could not load your organisations.",
+    tenantSwitchFailed: "Could not switch organisation. You are still in {name}.",
+    tenantRetry: "Try again",
+    tenantSuspended: "suspended",
+    tenantActive: "active"
   }
 };
 var MOBILE_QUERY = "(max-width: 767px)";
@@ -1312,7 +1350,96 @@ function AnalyticsSeries({ data, t, locale, num }) {
     ] })
   ] });
 }
+function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
+  const t = TEXT[lang];
+  const api = useMemo(() => adapter ?? createFetchTenantAdapter(), [adapter]);
+  const [rows, setRows] = useState(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(null);
+  const [switchFailed, setSwitchFailed] = useState(false);
+  const root = useRef(null);
+  const load = () => {
+    setLoadFailed(false);
+    api.load().then(setRows, () => setLoadFailed(true));
+  };
+  useEffect(load, [api]);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (root.current && !root.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const active = rows?.find((r) => r.tenant.slug === activeSlug);
+  const label = active?.tenant.name ?? activeSlug;
+  const pick = async (slug) => {
+    if (slug === activeSlug || busy) return;
+    setBusy(slug);
+    setSwitchFailed(false);
+    try {
+      await onSwitch(slug);
+      setOpen(false);
+    } catch {
+      setSwitchFailed(true);
+    } finally {
+      setBusy(null);
+    }
+  };
+  if (rows && rows.length <= 1 && !loadFailed) {
+    return /* @__PURE__ */ jsx("div", { class: "bas-tenant", "data-testid": "tenant-switcher", children: /* @__PURE__ */ jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { class: "bas-tenant", ref: root, "data-testid": "tenant-switcher", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        class: "bas-tenant__btn" + (open ? " is-open" : ""),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": t.tenantSwitch,
+        onClick: () => setOpen((v) => !v),
+        "data-testid": "tenant-switcher-button",
+        children: /* @__PURE__ */ jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label })
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { class: "bas-menu bas-tenant__menu", role: "menu", "data-testid": "tenant-switcher-menu", children: [
+      loadFailed ? /* @__PURE__ */ jsxs("div", { class: "bas-tenant__note", role: "alert", "data-testid": "tenant-switcher-load-error", children: [
+        /* @__PURE__ */ jsx("span", { children: t.tenantLoadFailed }),
+        /* @__PURE__ */ jsx("button", { type: "button", class: "bas-mi", onClick: load, "data-testid": "tenant-switcher-retry", children: t.tenantRetry })
+      ] }) : null,
+      switchFailed ? /* @__PURE__ */ jsx("p", { class: "bas-tenant__note is-error", role: "alert", "data-testid": "tenant-switcher-switch-error", children: t.tenantSwitchFailed.replace("{name}", label) }) : null,
+      (rows ?? []).map((r) => {
+        const isActive = r.tenant.slug === activeSlug;
+        const suspended = r.tenant.status === "suspended";
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": isActive,
+            class: "bas-mi bas-tenant__item" + (isActive ? " is-active" : ""),
+            disabled: suspended || busy !== null,
+            onClick: () => void pick(r.tenant.slug),
+            "data-testid": `tenant-switcher-item-${r.tenant.slug}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "bas-tenant__name", children: r.tenant.name }),
+              /* @__PURE__ */ jsx("span", { class: "bas-tenant__role", children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : r.role })
+            ]
+          },
+          r.tenant.id
+        );
+      })
+    ] }) : null
+  ] });
+}
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AnalyticsError, AnalyticsPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TenantLoadError, TenantSwitcher, TopBar, UserMenu, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map