@broberg/app-shell 0.10.0 → 0.11.0

package/README.md

@@ -46,13 +46,36 @@ 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.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. It opens in flow under its row, so the menu never clips it.
+  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

@@ -148,6 +148,13 @@
 .bas-sidebar.is-railed .bas-item__bar { left: -6px; }
 .bas-sidebar.is-railed .bas-item__count { position: absolute; top: 2px; right: 2px; padding: 0 4px; }
 .bas-sidebar.is-railed .bas-sidebar__head { justify-content: center; padding: 10px 0 4px; }
+/* F092.16 — the flyout renders INSIDE the railed sidebar, so every rail rule above
+ * hit its children too: labels hidden (0,3,0 beat the flyout's 0,2,0), items
+ * centred with no padding. An empty flyout with only a title (appkit, Lens
+ * 3aca21d1). These restore the flyout's own item layout at 0,4,0. */
+.bas-sidebar.is-railed .bas-flyout .bas-item__label { display: block; }
+.bas-sidebar.is-railed .bas-flyout .bas-item { justify-content: flex-start; padding: 6px 8px; }
+.bas-sidebar.is-railed .bas-flyout .bas-item__count { position: static; padding: 1px 6px; }
 .bas-sidebar.is-railed .bas-sidebar__mark { display: flex; align-items: center; justify-content: center; }
 
 /* Desktop fold: "offcanvas" hides the sidebar, "icon" keeps a 48px rail. */
@@ -291,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 — the palette dropdown. The list opens IN FLOW under its row (the
+   menu clips its overflow, so an absolute list near the bottom would be cut);
+   display:contents lets button and list wrap inside .bas-pref. */
+.bas-pref:has(> .bas-dd) { flex-wrap: wrap; }
+.bas-dd { display: contents; }
+.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 {
+  flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 4px;
+  border-radius: var(--bas-radius); background: var(--bg-sunk); border: 1px solid var(--border);
+}
+.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');
 
@@ -637,7 +638,7 @@ function Sidebar(p) {
         "aria-label": "Navigation",
         children: [
           p.header || p.brandMark ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-sidebar__head", children: [
-            p.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.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.header ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__brand", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: p.homeHref, onNavigate: p.onNavigate, onAfter: close, class: "bas-home", "data-testid": p.brandTestId ?? "sidebar-brand-home", "aria-label": p.homeLabel, children: p.header }) : p.header }) : null,
             p.brandMark ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__mark", "data-testid": "sidebar-brand-mark", children: p.homeHref ? /* @__PURE__ */ jsxRuntime.jsx(
               NavLink,
               {
@@ -844,6 +845,63 @@ 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 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",
+      {
+        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", { class: "bas-dd__list", 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 +1062,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: [