@broberg/app-shell 0.1.0

package/dist/preact.js

@@ -0,0 +1,665 @@
+import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
+import { createBellShell } from '@broberg/notifications/shell';
+import { getPreference, getPalette, getSurfaces, getBackdrop, onThemeChange, onPaletteChange, onSurfacesChange, onBackdropChange, setPreference, setPalette, PALETTES, PALETTE_LABELS, setSurfaces, setBackdrop } from '@broberg/theme';
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+
+// src/preact.tsx
+
+// src/index.ts
+function isActivePath(href, currentPath) {
+  const path = (currentPath.split(/[?#]/)[0] || "/").replace(/\/+$/, "") || "/";
+  const target = (href.split(/[?#]/)[0] || "/").replace(/\/+$/, "") || "/";
+  if (target === "/") return path === "/";
+  return path === target || path.startsWith(target + "/");
+}
+function badgeLabel(n) {
+  if (!n || n <= 0) return null;
+  return n > 99 ? "99+" : String(n);
+}
+function readFlag(key, fallback) {
+  try {
+    const v = typeof localStorage === "undefined" ? null : localStorage.getItem(key);
+    return v === null ? fallback : v === "1";
+  } catch {
+    return fallback;
+  }
+}
+function writeFlag(key, value) {
+  try {
+    if (typeof localStorage !== "undefined") localStorage.setItem(key, value ? "1" : "0");
+  } catch {
+  }
+}
+function readSet(key) {
+  try {
+    const raw = typeof localStorage === "undefined" ? null : localStorage.getItem(key);
+    const v = raw ? JSON.parse(raw) : [];
+    return new Set(Array.isArray(v) ? v.filter((x) => typeof x === "string") : []);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function writeSet(key, value) {
+  try {
+    if (typeof localStorage !== "undefined") localStorage.setItem(key, JSON.stringify([...value]));
+  } catch {
+  }
+}
+function initials(name, email) {
+  const source = (name ?? "").trim() || (email ?? "").split("@")[0] || "";
+  const words = source.split(/[\s._-]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = words[0][0] ?? "";
+  const last = words.length > 1 ? words[words.length - 1][0] ?? "" : "";
+  return (first + last).toUpperCase() || "?";
+}
+function createFetchNotificationSource(opts) {
+  const base = opts.url.replace(/\/+$/, "");
+  const doFetch = (input, init) => (opts.fetch ?? fetch)(input, { credentials: opts.credentials ?? "include", ...init });
+  const get = async () => {
+    const res = await doFetch(base, { headers: { accept: "application/json" } });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const body = await res.json().catch(() => null);
+    if (!body || !Array.isArray(body.items)) throw new Error("response has no items array");
+    const items = body.items;
+    const unseen = typeof body.unseen === "number" ? body.unseen : items.filter((n) => n.seenAt == null).length;
+    return { items, unseen };
+  };
+  const post = async (path, body) => {
+    const res = await doFetch(`${base}${path}`, {
+      method: "POST",
+      headers: body === void 0 ? void 0 : { "content-type": "application/json" },
+      body: body === void 0 ? void 0 : JSON.stringify(body)
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const r = await res.json().catch(() => ({}));
+    return Array.isArray(r.clearedIds) ? r.clearedIds : [];
+  };
+  return {
+    loadRows: async () => (await get()).items,
+    countUnseen: async () => (await get()).unseen,
+    markSeen: (ids) => post("/seen", { ids }),
+    markAllSeen: () => post("/seen-all"),
+    subscribe(onChange) {
+      if (typeof window === "undefined") return () => {
+      };
+      const onVisible = () => {
+        if (document.visibilityState === "visible") onChange();
+      };
+      window.addEventListener("focus", onChange);
+      document.addEventListener("visibilitychange", onVisible);
+      const ms = opts.pollMs ?? 6e4;
+      const timer = ms > 0 ? setInterval(onChange, ms) : null;
+      return () => {
+        window.removeEventListener("focus", onChange);
+        document.removeEventListener("visibilitychange", onVisible);
+        if (timer) clearInterval(timer);
+      };
+    }
+  };
+}
+function createMemoryNotificationSource(initial = []) {
+  let rows = initial.map((n) => ({ ...n }));
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => listeners.forEach((l) => l());
+  const mark = (pred) => {
+    const now = Date.now();
+    const cleared = [];
+    rows = rows.map((n) => {
+      if (n.seenAt == null && pred(n)) {
+        cleared.push(n.id);
+        return { ...n, seenAt: now };
+      }
+      return n;
+    });
+    if (cleared.length) emit();
+    return cleared;
+  };
+  return {
+    loadRows: async () => rows.map((n) => ({ ...n })),
+    countUnseen: async () => rows.filter((n) => n.seenAt == null).length,
+    markSeen: async (ids) => mark((n) => ids.includes(n.id)),
+    markAllSeen: async () => mark(() => true),
+    subscribe(onChange) {
+      listeners.add(onChange);
+      return () => listeners.delete(onChange);
+    },
+    push(n) {
+      rows = [n, ...rows];
+      emit();
+    },
+    rows: () => rows.map((n) => ({ ...n }))
+  };
+}
+function relativeTime(ts, lang, now = Date.now()) {
+  const ms = typeof ts === "number" ? ts : Date.parse(ts);
+  if (!Number.isFinite(ms)) return "";
+  const m = Math.floor((now - ms) / 6e4);
+  if (m < 1) return lang === "da" ? "nu" : "now";
+  if (m < 60) return `${m} min`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return lang === "da" ? `${h} t` : `${h} h`;
+  const d = Math.floor(h / 24);
+  if (d === 1) return lang === "da" ? "i g\xE5r" : "yesterday";
+  return `${d} d`;
+}
+var TEXT = {
+  da: {
+    openMenu: "\xC5bn menu",
+    collapse: "Skjul sidemenu",
+    expand: "Vis sidemenu",
+    notifications: "Notifikationer",
+    markAllRead: "Mark\xE9r alle l\xE6st",
+    noNotifications: "Ingen notifikationer endnu.",
+    couldNotLoad: "Kunne ikke hente notifikationer.",
+    seeAll: "Vis alle",
+    close: "Luk",
+    account: "Konto",
+    signOut: "Log ud",
+    theme: "Tema",
+    light: "Lys",
+    dark: "M\xF8rk",
+    system: "System",
+    palette: "Palet",
+    surfaces: "Flader",
+    flat: "Flade",
+    layered: "Lag",
+    backdrop: "Baggrund",
+    neurons: "Neuroner",
+    plain: "Ren"
+  },
+  en: {
+    openMenu: "Open menu",
+    collapse: "Hide sidebar",
+    expand: "Show sidebar",
+    notifications: "Notifications",
+    markAllRead: "Mark all read",
+    noNotifications: "No notifications yet.",
+    couldNotLoad: "Could not load notifications.",
+    seeAll: "See all",
+    close: "Close",
+    account: "Account",
+    signOut: "Sign out",
+    theme: "Theme",
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+    palette: "Palette",
+    surfaces: "Surfaces",
+    flat: "Flat",
+    layered: "Layered",
+    backdrop: "Backdrop",
+    neurons: "Neurons",
+    plain: "Plain"
+  }
+};
+var MOBILE_QUERY = "(max-width: 767px)";
+function useIsMobile() {
+  const get = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_QUERY).matches;
+  const [mobile, setMobile] = useState(get);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const on = () => setMobile(mq.matches);
+    mq.addEventListener?.("change", on);
+    return () => mq.removeEventListener?.("change", on);
+  }, []);
+  return mobile;
+}
+function NavLink(props) {
+  const { href, onNavigate, onAfter, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      onClick: (e) => {
+        if (onNavigate && !e.metaKey && !e.ctrlKey && !e.shiftKey && e.button === 0) {
+          e.preventDefault();
+          onNavigate(href);
+        }
+        onAfter?.();
+      },
+      children
+    }
+  );
+}
+var svg = (d, size = 18) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", "stroke-width": "1.9", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: d });
+var IconMenu = () => svg(/* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }), 20);
+var IconChevron = ({ open }) => /* @__PURE__ */ jsx("span", { class: "bas-chev" + (open ? " is-open" : ""), children: svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 12) });
+var IconCollapse = () => svg(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }), 15);
+var IconExpand = () => svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 15);
+var IconBell = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+] }), 19);
+var IconLogOut = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+  /* @__PURE__ */ jsx("path", { d: "m16 17 5-5-5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
+] }), 14);
+var IconUser = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
+] }), 14);
+function Sidebar(p) {
+  const t = TEXT[p.lang];
+  const key = p.groupsKey ?? "broberg-app-shell.groups";
+  const [folded, setFolded] = useState(() => readSet(key));
+  const toggleGroup = (label) => {
+    const next = new Set(folded);
+    next.has(label) ? next.delete(label) : next.add(label);
+    setFolded(next);
+    writeSet(key, next);
+  };
+  const mode = p.mobile ?? "drawer";
+  const close = () => p.onClose?.();
+  const item = (it) => {
+    const active = isActivePath(it.href, p.currentPath);
+    const badge = badgeLabel(it.badge);
+    return /* @__PURE__ */ jsxs(
+      NavLink,
+      {
+        href: it.href,
+        onNavigate: p.onNavigate,
+        onAfter: close,
+        class: "bas-item" + (active ? " is-active" : ""),
+        "data-testid": `sidebar-item-${it.id}`,
+        "aria-current": active ? "page" : void 0,
+        title: it.label,
+        children: [
+          active ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
+          it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
+          /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
+          badge ? /* @__PURE__ */ jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
+        ]
+      },
+      it.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mode === "drawer" ? /* @__PURE__ */ jsx("div", { class: "bas-backdrop" + (p.mobileOpen ? " is-open" : ""), "data-testid": "sidebar-backdrop", onClick: close }) : null,
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        class: `bas-sidebar is-mobile-${mode}` + (p.mobileOpen ? " is-open" : "") + (p.collapsed ? " is-collapsed" : ""),
+        "data-testid": "sidebar-root",
+        "data-mobile": mode,
+        "aria-label": "Navigation",
+        children: [
+          /* @__PURE__ */ jsxs("div", { class: "bas-sidebar__head", children: [
+            p.header ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__brand", children: p.header }) : /* @__PURE__ */ jsx("span", {}),
+            p.onToggleCollapse ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-collapse", "data-testid": "sidebar-collapse", "aria-label": t.collapse, title: t.collapse, onClick: p.onToggleCollapse, children: /* @__PURE__ */ jsx(IconCollapse, {}) }) : null
+          ] }),
+          /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
+            const open = !folded.has(g.label);
+            const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            return /* @__PURE__ */ jsxs("div", { class: "bas-group", children: [
+              /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
+                /* @__PURE__ */ jsx(IconChevron, { open }),
+                /* @__PURE__ */ jsx("span", { children: g.label })
+              ] }),
+              open ? g.items.map(item) : null
+            ] }, g.label);
+          }) }),
+          p.footer?.length ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__foot", children: p.footer.map(item) }) : null
+        ]
+      }
+    )
+  ] });
+}
+function NotificationBell({ source, onNavigate, lang }) {
+  const t = TEXT[lang];
+  const mobile = useIsMobile();
+  const [error, setError] = useState(null);
+  const lastCount = useRef(0);
+  const shell = useMemo(
+    () => createBellShell({
+      labels: { bell: t.notifications, panel: t.notifications, markAll: t.markAllRead, seeAll: t.seeAll, empty: t.noNotifications, close: t.close },
+      countUnseen: async () => {
+        if (!source) return 0;
+        try {
+          lastCount.current = await source.countUnseen();
+          setError(null);
+        } catch (e) {
+          setError(e instanceof Error ? e.message : String(e));
+        }
+        return lastCount.current;
+      },
+      loadRows: async () => {
+        if (!source) return [];
+        try {
+          return await source.loadRows();
+        } catch (e) {
+          setError(e instanceof Error ? e.message : String(e));
+          return [];
+        }
+      },
+      markAllSeen: async () => source ? source.markAllSeen() : []
+    }),
+    [source, lang]
+  );
+  const [state, setState] = useState(shell.getState());
+  useEffect(() => shell.subscribe(setState), [shell]);
+  useEffect(() => {
+    setState(shell.getState());
+    void shell.refresh();
+    return source?.subscribe?.(() => {
+      if (shell.getState().open) void shell.open(shell.getState().anchor);
+      else void shell.refresh();
+    });
+  }, [shell, source]);
+  useEffect(() => {
+    if (!state.open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape" && shell.escape() === "close") e.preventDefault();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [state.open, shell]);
+  const label = badgeLabel(state.count);
+  const onRow = async (n) => {
+    shell.close();
+    if (n.seenAt == null && source) {
+      await source.markSeen([n.id]);
+      await shell.refresh();
+    }
+    if (n.navigate) {
+      if (onNavigate) onNavigate(n.navigate);
+      else if (typeof window !== "undefined") window.location.assign(n.navigate);
+    }
+  };
+  const seen = (n) => n.seenAt != null || state.clearedIds.includes(n.id);
+  return /* @__PURE__ */ jsxs("div", { class: "bas-bell", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        class: "bas-iconbtn",
+        "data-testid": "topbar-notifications",
+        "aria-label": t.notifications,
+        "aria-expanded": state.open,
+        onClick: (e) => {
+          const r = e.currentTarget.getBoundingClientRect();
+          void shell.toggle({ top: r.top, right: r.right, bottom: r.bottom, left: r.left, width: r.width, height: r.height });
+        },
+        children: [
+          /* @__PURE__ */ jsx(IconBell, {}),
+          label ? /* @__PURE__ */ jsx("span", { class: "bas-bell__count", "data-testid": "topbar-notifications-count", children: label }) : null
+        ]
+      }
+    ),
+    state.open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { class: "bas-overlay" + (mobile ? " is-dim" : ""), "data-testid": "notifications-backdrop", onClick: () => shell.close() }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: "bas-panel " + (mobile ? "bas-panel--sheet" : "bas-panel--drop"),
+          role: "dialog",
+          "aria-label": shell.labels.panel,
+          "data-testid": mobile ? "notifications-drawer" : "notifications-dropdown",
+          children: [
+            /* @__PURE__ */ jsxs("div", { class: "bas-panel__head", children: [
+              /* @__PURE__ */ jsx("h3", { children: t.notifications }),
+              /* @__PURE__ */ jsx("button", { type: "button", class: "bas-link", "data-testid": "notifications-mark-all", onClick: () => void shell.markAllSeen(), disabled: !state.count, children: shell.labels.markAll })
+            ] }),
+            /* @__PURE__ */ jsx("div", { class: "bas-panel__list", "data-testid": "notifications-list", children: error && state.rows.length === 0 ? /* @__PURE__ */ jsx("p", { class: "bas-panel__note is-error", "data-testid": "notifications-error", children: t.couldNotLoad }) : state.rows.length === 0 ? /* @__PURE__ */ jsx("p", { class: "bas-panel__note", "data-testid": "notifications-empty", children: shell.labels.empty }) : state.rows.map((n) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                class: "bas-note" + (seen(n) ? " is-read" : ""),
+                "data-testid": "notification-row",
+                "data-id": n.id,
+                onClick: () => void onRow(n),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { class: "bas-note__text", children: [
+                    /* @__PURE__ */ jsx("span", { class: "bas-note__title", children: n.title }),
+                    n.body ? /* @__PURE__ */ jsx("span", { class: "bas-note__body", children: n.body }) : null,
+                    /* @__PURE__ */ jsx("span", { class: "bas-note__time", children: relativeTime(n.createdAt, lang) })
+                  ] }),
+                  !seen(n) ? /* @__PURE__ */ jsx("span", { class: "bas-note__dot" }) : null
+                ]
+              },
+              n.id
+            )) })
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+function Avatar({ user, size = 28 }) {
+  const [broken, setBroken] = useState(false);
+  const style = `width:${size}px;height:${size}px;font-size:${Math.round(size * 0.4)}px`;
+  if (user.picture && !broken) {
+    return /* @__PURE__ */ jsx("img", { class: "bas-avatar", style, src: user.picture, alt: "", referrerpolicy: "no-referrer", onError: () => setBroken(true), "data-testid": "avatar-picture" });
+  }
+  return /* @__PURE__ */ jsx("span", { class: "bas-avatar bas-avatar--initials", style, "data-testid": "avatar-initials", "aria-hidden": "true", children: initials(user.name, user.email) });
+}
+function Segmented(props) {
+  return /* @__PURE__ */ jsx("div", { class: "bas-seg", "data-testid": props.testid, role: "group", children: props.options.map(([v, label]) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": props.value === v, "data-testid": `${props.testid}-${v}`, onClick: () => props.onChange(v), children: label }, v)) });
+}
+function UserMenu(p) {
+  const t = TEXT[p.lang];
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const root = useRef(null);
+  const [pref, setPref] = useState(() => getPreference());
+  const [palette, setPal] = useState(() => getPalette());
+  const [surfaces, setSurf] = useState(() => getSurfaces());
+  const [backdrop, setBack] = useState(() => getBackdrop());
+  useEffect(() => {
+    const offs = [
+      onThemeChange(() => setPref(getPreference())),
+      onPaletteChange(setPal),
+      onSurfacesChange(setSurf),
+      onBackdropChange(setBack)
+    ];
+    return () => offs.forEach((off) => off());
+  }, []);
+  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 firstName = (p.user.name ?? "").trim().split(/\s+/)[0] || p.user.email || "";
+  const signOut = async () => {
+    setBusy(true);
+    try {
+      await p.onSignOut?.();
+    } finally {
+      setBusy(false);
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "bas-usermenu", ref: root, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        class: "bas-userbtn" + (open ? " is-open" : ""),
+        "data-testid": "topbar-user-menu",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": p.user.email ?? p.user.name ?? t.account,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { user: p.user }),
+          /* @__PURE__ */ jsx("span", { class: "bas-userbtn__name", children: firstName })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs("div", { class: "bas-menu", role: "menu", "data-testid": "topbar-user-menu-dropdown", children: [
+      /* @__PURE__ */ jsxs("div", { class: "bas-menu__who", children: [
+        /* @__PURE__ */ jsx(Avatar, { user: p.user, size: 36 }),
+        /* @__PURE__ */ jsxs("div", { class: "bas-menu__whotext", children: [
+          p.user.name ? /* @__PURE__ */ jsx("div", { class: "bas-menu__name", children: p.user.name }) : null,
+          p.user.email ? /* @__PURE__ */ jsx("div", { class: "bas-menu__email", children: p.user.email }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { class: "bas-sep" }),
+      p.accountHref ? /* @__PURE__ */ jsxs("a", { class: "bas-mi", href: p.accountHref, "data-testid": "user-menu-account", role: "menuitem", children: [
+        /* @__PURE__ */ jsx(IconUser, {}),
+        /* @__PURE__ */ jsx("span", { children: t.account })
+      ] }) : null,
+      (p.items ?? []).map(
+        (it) => it.href ? /* @__PURE__ */ jsxs(NavLink, { href: it.href, onNavigate: p.onNavigate, onAfter: () => setOpen(false), class: "bas-mi", "data-testid": `user-menu-${it.id}`, children: [
+          it.icon ?? null,
+          /* @__PURE__ */ jsx("span", { children: it.label })
+        ] }, it.id) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "bas-mi",
+            role: "menuitem",
+            "data-testid": `user-menu-${it.id}`,
+            onClick: () => {
+              setOpen(false);
+              it.onSelect?.();
+            },
+            children: [
+              it.icon ?? null,
+              /* @__PURE__ */ jsx("span", { children: it.label })
+            ]
+          },
+          it.id
+        )
+      ),
+      p.appearance !== false ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { class: "bas-sep" }),
+        /* @__PURE__ */ jsxs("div", { class: "bas-prefs", children: [
+          /* @__PURE__ */ jsxs("div", { class: "bas-pref", children: [
+            /* @__PURE__ */ jsx("span", { children: t.theme }),
+            /* @__PURE__ */ jsx(
+              Segmented,
+              {
+                testid: "user-menu-theme",
+                value: pref,
+                options: [["light", t.light], ["dark", t.dark], ["system", t.system]],
+                onChange: (v) => {
+                  setPreference(v);
+                  setPref(v);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "bas-pref", children: [
+            /* @__PURE__ */ jsx("span", { children: t.palette }),
+            /* @__PURE__ */ jsx(Segmented, { testid: "user-menu-palette", value: palette, options: PALETTES.map((x) => [x, PALETTE_LABELS[x]]), onChange: setPalette })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "bas-pref", children: [
+            /* @__PURE__ */ jsx("span", { children: t.surfaces }),
+            /* @__PURE__ */ jsx(Segmented, { testid: "user-menu-surfaces", value: surfaces, options: [["flat", t.flat], ["layered", t.layered]], onChange: setSurfaces })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { class: "bas-pref", children: [
+            /* @__PURE__ */ jsx("span", { children: t.backdrop }),
+            /* @__PURE__ */ jsx(Segmented, { testid: "user-menu-backdrop", value: backdrop, options: [["neurons", t.neurons], ["plain", t.plain]], onChange: setBackdrop })
+          ] })
+        ] })
+      ] }) : null,
+      p.onSignOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { class: "bas-sep" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-mi is-danger", role: "menuitem", "data-testid": "topbar-sign-out", disabled: busy, onClick: () => void signOut(), children: [
+          /* @__PURE__ */ jsx(IconLogOut, {}),
+          /* @__PURE__ */ jsx("span", { children: t.signOut })
+        ] })
+      ] }) : null
+    ] }) : null
+  ] });
+}
+function TopBar(p) {
+  const t = TEXT[p.lang];
+  return /* @__PURE__ */ jsx("header", { class: "bas-topbar", "data-testid": "topbar-root", children: /* @__PURE__ */ jsxs("div", { class: "bas-topbar__inner", children: [
+    p.onOpenMenu ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-hamburger", "data-testid": "sidebar-toggle", "aria-label": t.openMenu, onClick: p.onOpenMenu, children: /* @__PURE__ */ jsx(IconMenu, {}) }) : null,
+    p.brand ? /* @__PURE__ */ jsx("div", { class: "bas-topbar__brand", children: p.brand }) : null,
+    p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-topbar__actions", children: p.actions }) : null,
+    /* @__PURE__ */ jsx("div", { class: "bas-spacer" }),
+    /* @__PURE__ */ jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
+    p.user ? /* @__PURE__ */ jsx(UserMenu, { user: p.user, ...p.userMenu, onNavigate: p.onNavigate, lang: p.lang }) : null
+  ] }) });
+}
+function PageHeader(p) {
+  return /* @__PURE__ */ jsxs("div", { class: "bas-pagehead", "data-testid": "page-header", children: [
+    /* @__PURE__ */ jsxs("div", { class: "bas-pagehead__text", children: [
+      p.eyebrow ? /* @__PURE__ */ jsx("div", { class: "bas-pagehead__eyebrow", children: p.eyebrow }) : null,
+      /* @__PURE__ */ jsx("h1", { class: "bas-pagehead__title", children: p.title }),
+      p.description ? /* @__PURE__ */ jsx("p", { class: "bas-pagehead__desc", children: p.description }) : null
+    ] }),
+    p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-pagehead__actions", children: p.actions }) : null
+  ] });
+}
+function PageTabs(p) {
+  const mode = p.mode ?? "query";
+  const url = new URL(p.currentUrl, "http://x");
+  const activeId = mode === "query" ? url.searchParams.get("tab") ?? p.tabs[0]?.id : p.tabs.find((tab) => tab.href && isActivePath(tab.href, url.pathname))?.id;
+  return /* @__PURE__ */ jsx("div", { class: "bas-tabs", role: "tablist", "data-testid": "page-tabs", children: p.tabs.map((tab) => {
+    let href = tab.href ?? "";
+    if (mode === "query") {
+      const u = new URL(url.toString());
+      u.searchParams.set("tab", tab.id);
+      href = u.pathname + u.search;
+    }
+    const active = tab.id === activeId;
+    return /* @__PURE__ */ jsx(NavLink, { href, onNavigate: p.onNavigate, class: "bas-tab" + (active ? " is-active" : ""), "data-testid": `page-tab-${tab.id}`, "aria-current": active ? "page" : void 0, children: tab.label }, tab.id);
+  }) });
+}
+function AppShell(p) {
+  const prefix = p.storageKey ?? "broberg-app-shell";
+  const mode = p.mobile ?? "drawer";
+  const [collapsed, setCollapsed] = useState(() => readFlag(`${prefix}.collapsed`, false));
+  const [drawer, setDrawer] = useState(false);
+  const t = TEXT[p.lang];
+  const toggle = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    writeFlag(`${prefix}.collapsed`, next);
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, children: [
+    /* @__PURE__ */ jsx(
+      TopBar,
+      {
+        brand: p.brand,
+        actions: p.actions,
+        onOpenMenu: mode === "drawer" ? () => setDrawer(true) : void 0,
+        notifications: p.notifications,
+        user: p.user,
+        userMenu: p.userMenu,
+        onNavigate: p.onNavigate,
+        lang: p.lang
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { class: "bas-row", children: [
+      /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          groups: p.groups,
+          footer: p.footer,
+          currentPath: p.currentPath,
+          onNavigate: p.onNavigate,
+          collapsed,
+          onToggleCollapse: toggle,
+          mobileOpen: drawer,
+          onClose: () => setDrawer(false),
+          mobile: mode,
+          header: mode === "drawer" ? p.brand : void 0,
+          groupsKey: `${prefix}.groups`,
+          lang: p.lang
+        }
+      ),
+      collapsed && mode === "drawer" ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-iconbtn bas-expand", "data-testid": "sidebar-expand", "aria-label": t.expand, title: t.expand, onClick: toggle, children: /* @__PURE__ */ jsx(IconExpand, {}) }) : null,
+      /* @__PURE__ */ jsx("main", { class: "bas-main", "data-testid": "app-content", children: p.children })
+    ] })
+  ] });
+}
+
+export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, useIsMobile, writeFlag, writeSet };
+//# sourceMappingURL=preact.js.map
+//# sourceMappingURL=preact.js.map