@broberg/app-shell 0.10.1 → 0.11.1

package/dist/preact.d.cts

@@ -465,8 +465,15 @@ interface UserMenuProps {
     items?: UserMenuItem[];
     onSignOut?: () => void | Promise<void>;
     onNavigate?: Navigate;
-    /** Show Theme · Palette · Surfaces · Backdrop. Default true. */
-    appearance?: boolean;
+    /**
+     * Show Theme · Palette · Surfaces. Default true; false hides the block.
+     * F001.23 — the Backdrop row (Neurons · Plain) is opt-in: pass
+     * `{ backdrop: true }`. Only apps that draw the neuron canvas
+     * (mountConstellation — trail, cardmem) have anything for it to switch.
+     */
+    appearance?: boolean | {
+        backdrop?: 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.

package/dist/preact.d.ts

@@ -465,8 +465,15 @@ interface UserMenuProps {
     items?: UserMenuItem[];
     onSignOut?: () => void | Promise<void>;
     onNavigate?: Navigate;
-    /** Show Theme · Palette · Surfaces · Backdrop. Default true. */
-    appearance?: boolean;
+    /**
+     * Show Theme · Palette · Surfaces. Default true; false hides the block.
+     * F001.23 — the Backdrop row (Neurons · Plain) is opt-in: pass
+     * `{ backdrop: true }`. Only apps that draw the neuron canvas
+     * (mountConstellation — trail, cardmem) have anything for it to switch.
+     */
+    appearance?: boolean | {
+        backdrop?: 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.

package/dist/preact.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useMemo, useLayoutEffect } from 'preact/hooks';
 import { createBellShell } from '@broberg/notifications/shell';
+import { selectKeyReducer } from '@broberg/ui-controls-core';
 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';
 
@@ -842,6 +843,91 @@ function Segmented(props) {
   };
   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 Dropdown(props) {
+  const [state, setState] = useState({ open: false, highlighted: -1 });
+  const btnRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(void 0);
+  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]);
+  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 } = 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__ */ jsxs("div", { class: "bas-dd", onFocusOut: (e) => !e.currentTarget.contains(e.relatedTarget) && setState((st) => ({ ...st, open: false })), children: [
+    /* @__PURE__ */ 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__ */ jsx("span", { children: props.options[current]?.[1] }),
+          /* @__PURE__ */ jsx("span", { class: "bas-dd__caret", "aria-hidden": "true", children: "\u25BE" })
+        ]
+      }
+    ),
+    state.open ? /* @__PURE__ */ 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__ */ 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__ */ 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] = useState(false);
@@ -1002,16 +1088,16 @@ function UserMenu(p) {
           ] }),
           /* @__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__ */ jsx(Dropdown, { testid: "user-menu-palette", label: t.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: [
+          typeof p.appearance === "object" && p.appearance.backdrop ? /* @__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
         ] })
       ] }) : null,
       p.language ? /* @__PURE__ */ jsxs(Fragment, { children: [