@broberg/app-shell 0.7.1 → 0.9.0

package/README.md

@@ -53,6 +53,50 @@ the user menu reads and writes theme, palette, surfaces and backdrop through it.
 | `TenantSwitcher` | The user's own organisations, the active one marked, switching through the app's route (0.7.1). |
 | `AnalyticsPage` | The app's own visitors, page views, page views per day and most visited pages, from Upmetrics (0.6.0). |
 
+## 0.9.0 — ConfirmDialog: the confirm window instead of `window.confirm()` (F092.13)
+
+Asked for by appkit for «Slet» in a `@broberg/data-table` row. No native `confirm()` or `<dialog>` (D-4cd764).
+
+```tsx
+import { ConfirmDialog } from "@broberg/app-shell/preact";
+
+<ConfirmDialog
+  open={!!pending}
+  title="Slet dokument?"
+  body={`«${pending?.title}» slettes permanent.`}
+  confirmLabel="Slet"
+  destructive
+  busy={deleting}
+  error={deleteError}
+  onConfirm={() => remove(pending!.id)}
+  onCancel={() => setPending(null)}
+  testId="doc-delete"
+/>
+```
+
+- `role="alertdialog"`, `aria-modal`, title and body wired with aria-labelledby/describedby. Closed renders nothing.
+- **Focus starts on Cancel**, the safe button, so a stray Enter deletes nothing. Tab stays inside the window, and focus returns to whatever had it before (the ⋮ button).
+- **Escape or a click on the backdrop cancels**; a click inside the window does not.
+- **While `busy`**, both buttons are disabled and neither Escape nor the backdrop closes it: the request has already gone, and a window that vanished would let the user think they had cancelled a deletion that is happening. The confirm button shows a spinner.
+- `error` appears inside the window as `role="alert"`; the window stays open so the user can retry or cancel. You decide when to close it (set `open` false on success).
+- `destructive` makes the confirm button red. Labels default to Danish («Bekræft» / «Annuller»).
+- testids: `<testId>`, `-backdrop`, `-title`, `-body`, `-error`, `-cancel`, `-confirm` (default prefix `confirm-dialog`).
+- Styled in `css/app-shell.css` (`bas-confirm*`) on theme tokens only.
+
+Purely additive: nothing that rendered in 0.8.0 renders differently.
+
+## 0.8.0 — TenantSwitcher on a phone (F029.10, found by appkit's pilot)
+
+- **The menu stays on screen.** It is anchored to the switcher, which sits among
+  your actions rather than at the edge, so at 393 px it ran off the right side.
+  It is now measured when it opens and shifted back inside, 16 px from the edge.
+- **Changed output: no raw role.** Roles are your app's words, so the switcher
+  cannot translate them, and a bare «member» in a Danish UI is worse than nothing.
+  Pass `roleLabel={(role) => …}` to show them; without it, other rows show no role.
+  The active row still says «aktiv», and a suspended one still says so.
+- **On a phone the switcher takes at most 40% of the width**, and the organisation
+  name is cut with «…» before the page title is.
+
 ## 0.7.1 — TenantSwitcher: the user's own organisations (F029.10)
 
 0.7.0 was tagged but never reached npm: the secret gate stopped it on a test fixture key, now listed in `.gitleaksignore`.

package/css/app-shell.css

@@ -382,10 +382,47 @@
 .bas-tenant__btn:hover, .bas-tenant__btn.is-open { background: var(--active); }
 .bas-tenant__btn::after { content: "▾"; font-size: 10px; color: var(--fg-muted); flex: none; }
 .bas-tenant__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
-.bas-tenant__menu { left: 0; right: auto; }
+.bas-tenant__menu { left: 0; right: auto; max-width: calc(100vw - 32px); }
+/* phone: the org name gives way before the page title does */
+@media (max-width: 767px) { .bas-tenant { max-width: 40vw; } }
 .bas-tenant__item { justify-content: space-between; }
 .bas-tenant__item.is-active { font-weight: 600; }
 .bas-tenant__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bas-tenant__role { flex: none; font-size: 11.5px; color: var(--fg-muted); }
 .bas-tenant__note { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--fg-muted); }
 .bas-tenant__note.is-error { color: var(--danger); }
+
+/* ── F092.13 confirm dialog ── */
+.bas-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
+  background: rgba(0, 0, 0, .45);
+}
+.bas-confirm {
+  width: min(440px, 100%); padding: 20px; display: flex; flex-direction: column; gap: 12px;
+  background: var(--bg-card, var(--bg)); color: var(--fg);
+  border: 1px solid var(--border); border-radius: var(--radius, 8px);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, .24);
+}
+.bas-confirm__title { margin: 0; font-size: 17px; font-weight: 600; }
+.bas-confirm__body { color: var(--fg-muted); font-size: 14px; line-height: 1.5; }
+.bas-confirm__error { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius, 8px); padding: 8px 10px; font-size: 13px; }
+.bas-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
+.bas-confirm__btn {
+  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; cursor: pointer;
+  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 8px);
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+.bas-confirm__btn:hover:not(:disabled) { background: var(--hover); }
+.bas-confirm__btn:active:not(:disabled) { background: var(--active); }
+.bas-confirm__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.bas-confirm__btn:disabled { opacity: .6; cursor: not-allowed; }
+.bas-confirm__btn.is-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.bas-confirm__btn.is-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
+.bas-confirm__btn.is-danger { background: var(--danger-btn, var(--danger)); color: var(--accent-fg); border-color: var(--danger-btn, var(--danger)); }
+.bas-confirm__btn.is-danger:hover:not(:disabled) { background: var(--danger-btn, var(--danger)); filter: brightness(1.08); }
+.bas-confirm__spinner {
+  width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent;
+  animation: bas-confirm-spin 700ms linear infinite;
+}
+@keyframes bas-confirm-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .bas-confirm__spinner { animation: none; } }

package/dist/preact.cjs

@@ -1352,7 +1352,8 @@ function AnalyticsSeries({ data, t, locale, num }) {
     ] })
   ] });
 }
-function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
+var EDGE = 16;
+function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }) {
   const t = TEXT[lang];
   const api = hooks.useMemo(() => adapter ?? createFetchTenantAdapter(), [adapter]);
   const [rows, setRows] = hooks.useState(null);
@@ -1361,6 +1362,18 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
   const [busy, setBusy] = hooks.useState(null);
   const [switchFailed, setSwitchFailed] = hooks.useState(false);
   const root = hooks.useRef(null);
+  const menu = hooks.useRef(null);
+  hooks.useLayoutEffect(() => {
+    const el = menu.current;
+    if (!open || !el) return;
+    el.style.transform = "";
+    const r = el.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth || window.innerWidth;
+    let dx = 0;
+    if (r.right > vw - EDGE) dx = vw - EDGE - r.right;
+    if (r.left + dx < EDGE) dx = EDGE - r.left;
+    if (dx !== 0) el.style.transform = `translateX(${Math.round(dx)}px)`;
+  }, [open, rows, loadFailed, switchFailed]);
   const load = () => {
     setLoadFailed(false);
     api.load().then(setRows, () => setLoadFailed(true));
@@ -1411,7 +1424,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label })
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-menu bas-tenant__menu", role: "menu", "data-testid": "tenant-switcher-menu", children: [
+    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-menu bas-tenant__menu", ref: menu, role: "menu", "data-testid": "tenant-switcher-menu", children: [
       loadFailed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-tenant__note", role: "alert", "data-testid": "tenant-switcher-load-error", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.tenantLoadFailed }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-mi", onClick: load, "data-testid": "tenant-switcher-retry", children: t.tenantRetry })
@@ -1432,7 +1445,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
             "data-testid": `tenant-switcher-item-${r.tenant.slug}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__name", children: r.tenant.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__role", children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : r.role })
+              suspended || isActive || roleLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__role", "data-testid": `tenant-switcher-role-${r.tenant.slug}`, children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : roleLabel(r.role) }) : null
             ]
           },
           r.tenant.id
@@ -1441,6 +1454,97 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
     ] }) : null
   ] });
 }
+var confirmDialogSeq = 0;
+function ConfirmDialog(p) {
+  const t = p.testId ?? "confirm-dialog";
+  const panel = hooks.useRef(null);
+  const cancelBtn = hooks.useRef(null);
+  const ids = hooks.useMemo(() => {
+    const n = ++confirmDialogSeq;
+    return { title: `bas-confirm-title-${n}`, body: `bas-confirm-body-${n}` };
+  }, []);
+  const live = hooks.useRef(p);
+  live.current = p;
+  hooks.useEffect(() => {
+    if (!p.open) return;
+    const before = document.activeElement;
+    cancelBtn.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (!live.current.busy) live.current.onCancel();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const focusable = [...panel.current.querySelectorAll("button:not([disabled])")];
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.current.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.current.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      if (before && typeof before.focus === "function" && document.contains(before)) before.focus();
+    };
+  }, [p.open]);
+  if (!p.open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      class: "bas-confirm-backdrop",
+      "data-testid": `${t}-backdrop`,
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget && !p.busy) p.onCancel();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: panel,
+          class: "bas-confirm",
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-labelledby": ids.title,
+          "aria-describedby": p.body ? ids.body : void 0,
+          "aria-busy": p.busy ? "true" : void 0,
+          "data-testid": t,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { class: "bas-confirm__title", id: ids.title, "data-testid": `${t}-title`, children: p.title }),
+            p.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-confirm__body", id: ids.body, "data-testid": `${t}-body`, children: p.body }) : null,
+            p.error ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-confirm__error", role: "alert", "data-testid": `${t}-error`, children: p.error }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-confirm__actions", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", { ref: cancelBtn, type: "button", class: "bas-confirm__btn", disabled: p.busy, "data-testid": `${t}-cancel`, onClick: () => p.onCancel(), children: p.cancelLabel ?? "Annuller" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  class: `bas-confirm__btn is-primary${p.destructive ? " is-danger" : ""}${p.busy ? " is-busy" : ""}`,
+                  disabled: p.busy,
+                  "data-testid": `${t}-confirm`,
+                  onClick: () => p.onConfirm(),
+                  children: [
+                    p.busy ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-confirm__spinner", "aria-hidden": "true" }) : null,
+                    p.confirmLabel ?? "Bekr\xE6ft"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 
 exports.AVATAR_MAX_BYTES = AVATAR_MAX_BYTES;
 exports.AVATAR_TYPES = AVATAR_TYPES;
@@ -1450,6 +1554,7 @@ exports.AnalyticsError = AnalyticsError;
 exports.AnalyticsPage = AnalyticsPage;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
+exports.ConfirmDialog = ConfirmDialog;
 exports.NotificationBell = NotificationBell;
 exports.PageHeader = PageHeader;
 exports.PageTabs = PageTabs;