@broberg/app-shell 0.10.1 → 0.11.1

package/README.md

@@ -46,13 +46,46 @@ the user menu reads and writes theme, palette, surfaces and backdrop through it.
 | `Sidebar` | Groups (foldable, remembered) + footer, from data. Items can have `children` (one level) that open and close. Active item from `currentPath`. Badges, 99+. |
 | `TopBar` | Brand left, `actions` slot, then **the bell and the user menu, always last, in that order**. |
 | `NotificationBell` | Unread count, panel (dropdown on desktop, bottom sheet on a phone), mark one / all read. |
-| `UserMenu` | Avatar, name + email, **Konto** → Broberg ID, your items, Theme · Palette · Surfaces · Backdrop, sign out. |
+| `UserMenu` | Avatar, name + email, **Konto** → Broberg ID, your items, Theme · Palette · Surfaces (· Backdrop, opt-in), sign out. |
 | `PageHeader`, `PageTabs` | Eyebrow/title/description/actions; tabs as routes (`?tab=` or one path per tab). |
 | `Avatar` | `picture` when given, otherwise initials. |
 | `AccountPage` | The user's own name and picture, edited inside the app (0.4.0). |
 | `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.11.1 — the palette list floats over the menu (F001.25)
+
+Christian 10/10: «Kunne denne ikke være en pop-over ting så dialogen ikke bliver
+forstørret hver gang man klikker på listen?» The list is now a popover
+(`position: fixed`, placed from the button): the menu keeps its height and
+nothing below moves. It opens below the button, upward when there is no room,
+stays inside the viewport, and closes when the menu scrolls or the window
+resizes. testids and keys unchanged. Rendering moved: the open list no longer
+pushes «Flader» and the rest down.
+
+## 0.11.0 — the user menu's Appearance, tidied (F001.23)
+
+Christian 10/10, via appkit: «Neuroner … er reelt set kun til trail og cardmem» and «Paletten er ikke pæn».
+
+- **Backdrop (Neurons · Plain) is opt-in.** It only means something in an app
+  that draws the neuron canvas (`mountConstellation` from `@broberg/theme`).
+  **trail and cardmem: add one line to keep it:**
+  ```tsx
+  <AppShell userMenu={{ appearance: { backdrop: true } }} … />
+  ```
+  `appearance: false` still hides the whole block; `true`/omitted shows Theme ·
+  Palette · Surfaces.
+- **Palette is a dropdown**, not four wrapping buttons. Custom, not a native
+  `<select>` (D-4cd764): arrows open and move, Enter/Space choose, Escape closes
+  the list without choosing and leaves the menu open; a second Escape closes the
+  menu. (0.11.1: it floats over the menu as a popover.)
+  testids: `user-menu-palette` (the button), `user-menu-palette-list`,
+  `user-menu-palette-<id>` (each option). **A Lens flow that clicked
+  `user-menu-palette-<id>` directly must click `user-menu-palette` first.**
+- New dependency: `@broberg/ui-controls-core` (its keyboard reducer — pure, no DOM).
+- Pairs with `@broberg/theme` 0.13.0, where Layered is the default. Works with
+  ≥ 0.11.0 too; then the old default (Flat) applies.
+
 ## 0.9.2 — ConfirmDialog listens from the first frame (F092.14)
 
 0.9.1 carried the same change but never reached npm: its publish run was stopped by a flaky test in this package (happy-dom followed an external link to the live site; now switched off). 0.9.2 is the first published version with the fix.

package/css/app-shell.css

@@ -298,6 +298,27 @@
 }
 .bas-seg > button[aria-pressed="true"] { background: var(--olive-btn); color: var(--paper, var(--bg-card)); }
 .bas-seg > button:not([aria-pressed="true"]):hover { color: var(--fg); }
+/* F001.23/F001.25 — the palette dropdown. The list is a POPOVER (position
+   fixed, placed from the button in JS), so opening it neither grows the menu
+   nor gets clipped by its overflow. */
+.bas-dd { position: relative; display: inline-flex; }
+.bas-dd__btn {
+  display: inline-flex; align-items: center; gap: 8px; min-width: 120px; justify-content: space-between;
+  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 500; padding: 5px 10px;
+  border-radius: var(--bas-radius); background: var(--bg-sunk); border: 1px solid var(--border); color: var(--fg); cursor: pointer;
+}
+.bas-dd__btn:hover { border-color: var(--fg-faint); }
+.bas-dd__btn:active { background: var(--active); }
+.bas-dd__btn[aria-expanded="true"] .bas-dd__caret { transform: rotate(180deg); }
+.bas-dd__caret { color: var(--fg-muted); transition: transform .12s; }
+.bas-dd__list {
+  z-index: 70; list-style: none; margin: 0; padding: 4px; max-height: min(60vh, 320px); overflow-y: auto;
+  border-radius: var(--bas-radius); background: var(--bg-card); border: 1px solid var(--border);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
+}
+.bas-dd__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: calc(var(--bas-radius) - 2px); font-size: 12.5px; color: var(--fg); cursor: pointer; }
+.bas-dd__opt.is-active { background: var(--hover); }
+.bas-dd__opt:active { background: var(--active); }
 
 /* ── page header + tabs ── */
 .bas-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 24px 24px 12px; }

package/dist/preact.cjs

@@ -2,6 +2,7 @@
 
 var hooks = require('preact/hooks');
 var shell = require('@broberg/notifications/shell');
+var uiControlsCore = require('@broberg/ui-controls-core');
 var theme = require('@broberg/theme');
 var jsxRuntime = require('preact/jsx-runtime');
 
@@ -844,6 +845,91 @@ function Segmented(props) {
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-seg", "data-testid": props.testid, role: "group", "aria-label": props.label, onKeyDown, children: props.options.map(([v, label]) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-pressed": props.value === v, "data-testid": `${props.testid}-${v}`, onClick: () => props.onChange(v), children: label }, v)) });
 }
+function Dropdown(props) {
+  const [state, setState] = hooks.useState({ open: false, highlighted: -1 });
+  const btnRef = hooks.useRef(null);
+  const listRef = hooks.useRef(null);
+  const [pos, setPos] = hooks.useState(void 0);
+  hooks.useLayoutEffect(() => {
+    if (!state.open || !btnRef.current) return setPos(void 0);
+    const r = btnRef.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const h = listRef.current?.offsetHeight ?? 0;
+    const width = Math.min(Math.max(r.width, 160), vw - 2 * m);
+    const left = Math.max(m, Math.min(r.right - width, vw - width - m));
+    const below = r.bottom + 4;
+    const top = below + h <= vh - m || r.top - 4 - h < m ? Math.min(below, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${width}px` });
+  }, [state.open]);
+  hooks.useEffect(() => {
+    if (!state.open) return;
+    const close = (e) => {
+      if (e.target instanceof Node && listRef.current?.contains(e.target)) return;
+      setState((st) => ({ ...st, open: false }));
+    };
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [state.open]);
+  const current = Math.max(0, props.options.findIndex(([v]) => v === props.value));
+  const choose = (i) => {
+    setState({ open: false, highlighted: i });
+    props.onChange(props.options[i][0]);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Tab") return setState((st) => ({ ...st, open: false }));
+    const from = state.open ? state : { open: false, highlighted: current };
+    const { state: next, intent } = uiControlsCore.selectKeyReducer(from, e.key, props.options.length);
+    if (intent.type === "none" && next === from) return;
+    e.preventDefault();
+    if (state.open || intent.type !== "close") e.stopPropagation();
+    if (intent.type === "select") return choose(intent.index);
+    setState(next);
+  };
+  const optId = (v) => `${props.testid}-opt-${v}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-dd", onFocusOut: (e) => !e.currentTarget.contains(e.relatedTarget) && setState((st) => ({ ...st, open: false })), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: btnRef,
+        type: "button",
+        class: "bas-dd__btn",
+        "data-testid": props.testid,
+        "aria-haspopup": "listbox",
+        "aria-expanded": state.open,
+        "aria-label": props.label,
+        "aria-activedescendant": state.open && state.highlighted >= 0 ? optId(props.options[state.highlighted][0]) : void 0,
+        onClick: () => setState((st) => ({ open: !st.open, highlighted: current })),
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.options[current]?.[1] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-dd__caret", "aria-hidden": "true", children: "\u25BE" })
+        ]
+      }
+    ),
+    state.open ? /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listRef, class: "bas-dd__list", style: pos ?? { position: "fixed", visibility: "hidden" }, role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        id: optId(v),
+        role: "option",
+        "aria-selected": props.value === v,
+        class: "bas-dd__opt" + (i === state.highlighted ? " is-active" : ""),
+        "data-testid": `${props.testid}-${v}`,
+        onMouseDown: (e) => e.preventDefault(),
+        onMouseEnter: () => setState((st) => ({ ...st, highlighted: i })),
+        onClick: () => choose(i),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-mi__check", "aria-hidden": "true", children: props.value === v ? "\u2713" : "" }),
+          label
+        ]
+      },
+      v
+    )) }) : null
+  ] });
+}
 function UserMenu(p) {
   const t = TEXT[p.lang];
   const [open, setOpen] = hooks.useState(false);
@@ -1004,16 +1090,16 @@ function UserMenu(p) {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pref", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.palette }),
-            /* @__PURE__ */ jsxRuntime.jsx(Segmented, { testid: "user-menu-palette", value: palette, options: theme.PALETTES.map((x) => [x, theme.PALETTE_LABELS[x]]), onChange: theme.setPalette })
+            /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { testid: "user-menu-palette", label: t.palette, value: palette, options: theme.PALETTES.map((x) => [x, theme.PALETTE_LABELS[x]]), onChange: theme.setPalette })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pref", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.surfaces }),
             /* @__PURE__ */ jsxRuntime.jsx(Segmented, { testid: "user-menu-surfaces", value: surfaces, options: [["flat", t.flat], ["layered", t.layered]], onChange: theme.setSurfaces })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pref", children: [
+          typeof p.appearance === "object" && p.appearance.backdrop ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-pref", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.backdrop }),
             /* @__PURE__ */ jsxRuntime.jsx(Segmented, { testid: "user-menu-backdrop", value: backdrop, options: [["neurons", t.neurons], ["plain", t.plain]], onChange: theme.setBackdrop })
-          ] })
+          ] }) : null
         ] })
       ] }) : null,
       p.language ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [