@broberg/app-shell 0.2.2 → 0.3.0

package/dist/preact.d.ts

@@ -32,6 +32,12 @@ declare function isActivePath(href: string, currentPath: string): boolean;
  * http(s) URL is followed; anything else returns null and the row just closes.
  */
 declare function safeNavigate(target: string | null | undefined): string | null;
+/**
+ * F092.10 — is this link leaving the app? An http(s) link to another origin.
+ * Paths, "#…", mailto:/tel: and the app's own origin are not. Owner decision
+ * D-d28547: every external link opens in a new tab.
+ */
+declare function isExternal(href: string | null | undefined, origin?: string | undefined): boolean;
 /**
  * The label of the nav item the user is on, for the content header (F092.4).
  * Sub-items count, and the most specific match wins: on "/models/genesis" a
@@ -100,6 +106,8 @@ declare const TEXT: {
         readonly openMenu: "Åbn menu";
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
+        readonly language: "Sprog";
+        readonly couldNotMarkAll: "Kunne ikke markere alle som læst. Prøv igen.";
         readonly collapse: "Skjul sidemenu";
         readonly expand: "Vis sidemenu";
         readonly notifications: "Notifikationer";
@@ -126,6 +134,8 @@ declare const TEXT: {
         readonly openMenu: "Open menu";
         readonly closeMenu: "Close menu";
         readonly home: "Home";
+        readonly language: "Language";
+        readonly couldNotMarkAll: "Could not mark all as read. Try again.";
         readonly collapse: "Hide sidebar";
         readonly expand: "Show sidebar";
         readonly notifications: "Notifications";
@@ -179,6 +189,8 @@ interface SidebarProps {
     homeHref?: string;
     /** Accessible name of the brandMark link (it has no visible text). Default "Forside"/"Home". */
     homeLabel?: string;
+    /** data-testid of the brand link in the sidebar head. */
+    brandTestId?: string;
     /** Phone, drawer mode: is the drawer open. */
     mobileOpen?: boolean;
     onClose?: () => void;
@@ -222,6 +234,18 @@ interface UserMenuProps {
     onNavigate?: Navigate;
     /** Show Theme · Palette · Surfaces · Backdrop. Default true. */
     appearance?: boolean;
+    /**
+     * F092.11 — a «Sprog»/«Language» row with a segmented control, like the
+     * appearance rows. The app owns the language; the shell shows and reports it.
+     */
+    language?: {
+        value: string;
+        options: {
+            id: string;
+            label: string;
+        }[];
+        onChange: (id: string) => void;
+    };
     lang: Lang;
 }
 declare function Avatar({ user, size }: {
@@ -294,6 +318,12 @@ interface AppShellProps {
     collapse?: "offcanvas" | "icon";
     /** The app's logo icon for the top of the icon rail. */
     brandMark?: ComponentChildren;
+    /**
+     * F092.8 — "inset" (default, shadcn dashboard-01): no full-width top bar; the
+     * brand heads the sidebar, and the content's top row is sidebar button ·
+     * title · actions · bell · user menu. "topbar": the 0.2.x full-width bar.
+     */
+    layout?: "inset" | "topbar";
     /** F092.7 — the app's start page. Brand and brandMark become links to it; on a phone the click closes the drawer. */
     homeHref?: string;
     /** Accessible name for the brandMark link. Default "Forside"/"Home". */
@@ -311,4 +341,4 @@ interface AppShellProps {
 }
 declare function AppShell(p: AppShellProps): JSX.Element;
 
-export { 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, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { 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, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -23,6 +23,18 @@ function safeNavigate(target) {
     return null;
   }
 }
+function isExternal(href, origin = typeof location !== "undefined" ? location.origin : void 0) {
+  if (typeof href !== "string") return false;
+  const h = href.trim();
+  if (!origin) return /^(https?:)?\/\//i.test(h);
+  let u;
+  try {
+    u = new URL(h, origin);
+  } catch {
+    return false;
+  }
+  return (u.protocol === "http:" || u.protocol === "https:") && u.origin !== origin;
+}
 function activeNavLabel(groups, footer, currentPath) {
   let best;
   const visit = (it) => {
@@ -172,6 +184,8 @@ var TEXT = {
     openMenu: "\xC5bn menu",
     closeMenu: "Luk menu",
     home: "Forside",
+    language: "Sprog",
+    couldNotMarkAll: "Kunne ikke markere alle som l\xE6st. Pr\xF8v igen.",
     collapse: "Skjul sidemenu",
     expand: "Vis sidemenu",
     notifications: "Notifikationer",
@@ -198,6 +212,8 @@ var TEXT = {
     openMenu: "Open menu",
     closeMenu: "Close menu",
     home: "Home",
+    language: "Language",
+    couldNotMarkAll: "Could not mark all as read. Try again.",
     collapse: "Hide sidebar",
     expand: "Show sidebar",
     notifications: "Notifications",
@@ -236,6 +252,9 @@ function useIsMobile() {
 }
 function NavLink(props) {
   const { href, onNavigate, onAfter, children, ...rest } = props;
+  if (isExternal(href)) {
+    return /* @__PURE__ */ jsx("a", { ...rest, href, target: "_blank", rel: "noopener noreferrer", onClick: () => onAfter?.(), children });
+  }
   return /* @__PURE__ */ jsx(
     "a",
     {
@@ -411,7 +430,7 @@ function Sidebar(p) {
         "aria-label": "Navigation",
         children: [
           p.header || p.brandMark ? /* @__PURE__ */ jsxs("div", { class: "bas-sidebar__head", children: [
-            p.header ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": "sidebar-brand-home", children: p.header }) : p.header }) : null,
+            p.header ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": p.brandTestId ?? "sidebar-brand-home", children: p.header }) : p.header }) : null,
             p.brandMark ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__mark", "data-testid": "sidebar-brand-mark", children: p.homeHref ? /* @__PURE__ */ jsx(
               NavLink,
               {
@@ -484,14 +503,42 @@ function NotificationBell({ source, onNavigate, lang }) {
       else void shell.refresh();
     });
   }, [shell, source]);
+  const bellRef = useRef(null);
+  const panelRef = useRef(null);
   useEffect(() => {
     if (!state.open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && shell.escape() === "close") e.preventDefault();
+      if (e.key === "Escape" && shell.escape() === "close") {
+        e.preventDefault();
+        bellRef.current?.focus();
+      }
+    };
+    const onDown = (e) => {
+      const t2 = e.target;
+      if (t2 && (panelRef.current?.contains(t2) || bellRef.current?.contains(t2))) return;
+      shell.close();
     };
     document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
   }, [state.open, shell]);
+  const [markAllFailed, setMarkAllFailed] = useState(false);
+  useEffect(() => {
+    if (!state.open) setMarkAllFailed(false);
+  }, [state.open]);
+  const onMarkAll = async () => {
+    setMarkAllFailed(false);
+    try {
+      await shell.markAllSeen();
+    } catch {
+      setMarkAllFailed(true);
+      return;
+    }
+    shell.close();
+  };
   const label = badgeLabel(state.count);
   const onRow = async (n) => {
     shell.close();
@@ -500,7 +547,9 @@ function NotificationBell({ source, onNavigate, lang }) {
       await shell.refresh();
     }
     const target = safeNavigate(n.navigate);
-    if (target) {
+    if (target && isExternal(target)) {
+      if (typeof window !== "undefined") window.open(target, "_blank", "noopener,noreferrer");
+    } else if (target) {
       if (onNavigate) onNavigate(target);
       else if (typeof window !== "undefined") window.location.assign(target);
     }
@@ -511,6 +560,7 @@ function NotificationBell({ source, onNavigate, lang }) {
       "button",
       {
         type: "button",
+        ref: bellRef,
         class: "bas-iconbtn",
         "data-testid": "topbar-notifications",
         "aria-label": t.notifications,
@@ -530,6 +580,7 @@ function NotificationBell({ source, onNavigate, lang }) {
       /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
           class: "bas-panel " + (mobile ? "bas-panel--sheet" : "bas-panel--drop"),
           role: "dialog",
           "aria-label": shell.labels.panel,
@@ -537,8 +588,9 @@ function NotificationBell({ source, onNavigate, lang }) {
           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("button", { type: "button", class: "bas-link", "data-testid": "notifications-mark-all", onClick: () => void onMarkAll(), disabled: !state.count, children: shell.labels.markAll })
             ] }),
+            markAllFailed ? /* @__PURE__ */ jsx("p", { class: "bas-panel__note is-error", role: "alert", "data-testid": "notifications-mark-all-error", children: t.couldNotMarkAll }) : null,
             /* @__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",
               {
@@ -573,7 +625,16 @@ function Avatar({ user, size = 28 }) {
   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)) });
+  const onKeyDown = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const buttons = [...e.currentTarget.querySelectorAll("button")];
+    const i = buttons.indexOf(document.activeElement);
+    if (i < 0) return;
+    e.preventDefault();
+    const next = (i + (e.key === "ArrowRight" ? 1 : -1) + buttons.length) % buttons.length;
+    buttons[next].focus();
+  };
+  return /* @__PURE__ */ jsx("div", { class: "bas-seg", "data-testid": props.testid, role: "group", "aria-label": props.label, onKeyDown, 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];
@@ -642,7 +703,7 @@ function UserMenu(p) {
         ] })
       ] }),
       /* @__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: [
+      p.accountHref ? /* @__PURE__ */ jsxs(NavLink, { href: p.accountHref, onNavigate: p.onNavigate, onAfter: () => setOpen(false), class: "bas-mi", "data-testid": "user-menu-account", role: "menuitem", children: [
         /* @__PURE__ */ jsx(IconUser, {}),
         /* @__PURE__ */ jsx("span", { children: t.account })
       ] }) : null,
@@ -701,6 +762,22 @@ function UserMenu(p) {
           ] })
         ] })
       ] }) : null,
+      p.language ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        p.appearance === false ? /* @__PURE__ */ jsx("div", { class: "bas-sep" }) : null,
+        /* @__PURE__ */ jsx("div", { class: "bas-prefs", children: /* @__PURE__ */ jsxs("div", { class: "bas-pref", children: [
+          /* @__PURE__ */ jsx("span", { children: t.language }),
+          /* @__PURE__ */ jsx(
+            Segmented,
+            {
+              testid: "user-menu-language",
+              label: t.language,
+              value: p.language.value,
+              options: p.language.options.map((o) => [o.id, o.label]),
+              onChange: p.language.onChange
+            }
+          )
+        ] }) })
+      ] }) : 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: [
@@ -750,6 +827,8 @@ function PageTabs(p) {
 function AppShell(p) {
   const prefix = p.storageKey ?? "broberg-app-shell";
   const mode = p.mobile ?? "drawer";
+  const layout = p.layout ?? "inset";
+  const inset = layout === "inset";
   const collapse = p.collapse ?? (mode === "rail" ? "icon" : "offcanvas");
   const [collapsed, setCollapsed] = useState(() => readFlag(`${prefix}.collapsed`, false));
   const [drawer, setDrawer] = useState(false);
@@ -765,8 +844,8 @@ function AppShell(p) {
   const expanded = drawerMode ? drawer : !collapsed;
   const triggerLabel = drawerMode ? drawer ? t.closeMenu : t.openMenu : collapsed ? t.expand : t.collapse;
   const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
-  return /* @__PURE__ */ jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, "data-layout": layout, children: [
+    inset ? null : /* @__PURE__ */ jsx(
       TopBar,
       {
         brand: p.brand,
@@ -796,7 +875,8 @@ function AppShell(p) {
           mobileOpen: drawer,
           onClose: () => setDrawer(false),
           mobile: mode,
-          header: mode === "drawer" ? p.brand : void 0,
+          header: inset || mode === "drawer" ? p.brand : void 0,
+          brandTestId: inset ? "brand-home" : void 0,
           groupsKey: `${prefix}.groups`,
           itemsKey: `${prefix}.items`,
           lang: p.lang
@@ -820,6 +900,12 @@ function AppShell(p) {
           heading ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
+          ] }) : null,
+          inset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { class: "bas-spacer" }),
+            p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-contenthead__actions", children: p.actions }) : null,
+            /* @__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
           ] }) : null
         ] }),
         p.children
@@ -828,6 +914,6 @@ function AppShell(p) {
   ] });
 }
 
-export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map