@apliteni/apliteni-ui 0.9.1 → 0.11.4

package/src/components/overlay.js

@@ -0,0 +1,231 @@
+// Overlay primitives — the page state the kit's modal surfaces share.
+//
+// Drawer and Confirm are the same problem twice: content over a scrim that owns
+// the keyboard until it is answered. Three of the questions they raise are
+// properties of the *page*, not of either component — what is inert right now,
+// which overlay Escape talks to, and where Tab may go — and an overlay that
+// answers them from its own storage gets them wrong as soon as a second one is
+// open. So they are answered here, once, from one stack per document.
+//
+// Internal — not re-exported from src/index.js.
+
+// What each overlay paints on, as its stylesheet resolves it today: a drawer at
+// `--z-overlay` (src/styles/drawer.css) and a confirm one above it
+// (src/styles/confirm.css). Absolute values, not ranks, so a sheet that moves and
+// a table that did not is a failed test rather than a keyboard on the wrong layer
+// — stories/overlay-css.test.js holds these two numbers to those two rules.
+export const OVERLAY_LAYER = { drawer: 100, confirm: 101 };
+
+const FOCUSABLE = [
+  'a[href]', 'button:not([disabled])', 'input:not([disabled])',
+  'select:not([disabled])', 'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+// Per document, not per module: JSDOM tests and Storybook iframes each get their
+// own page, and one global stack would let one page's overlays decide another's.
+//   stack   open overlays, bottom → top: { root, panel, dismiss, layer }
+//   marked  what the current top hid, with the state to give back
+const pages = new WeakMap();
+function pageOf(doc) {
+  let page = pages.get(doc);
+  if (!page) { page = { stack: [], marked: [], keys: false }; pages.set(doc, page); }
+  return page;
+}
+
+// Focusable to the *browser*, not merely matching the selector. A control in a
+// closed overlay, an inert subtree or a hidden ancestor is skipped by the real
+// tab order, so a trap that counts it wraps at an element focus never reaches
+// and Tab walks straight out of the modal.
+function reachable(el) {
+  for (let n = el; n && n.nodeType === 1; n = n.parentElement) {
+    if (n.inert || n.hasAttribute('inert') || n.hasAttribute('hidden')) return false;
+    const overlayRoot = n.hasAttribute('data-drawer') || n.hasAttribute('data-confirm');
+    if (overlayRoot && !n.classList.contains('is-open')) return false;
+  }
+  // Browsers can answer the rest properly; JSDOM has no layout and no such method.
+  return typeof el.checkVisibility !== 'function'
+    || el.checkVisibility({ visibilityProperty: true, contentVisibilityAuto: true });
+}
+
+// Focusable controls inside the panel, in DOM order.
+export function focusablesIn(panel) {
+  return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(reachable);
+}
+
+// Hide everything *outside* `root` from AT + the tab order: walk root→body and
+// mark each ancestor's other children. The scrim and panel live inside the root
+// so they stay interactive; an overlay one layer down is outside it, so it does
+// not — a drawer under an aria-modal alertdialog must not be tabbable.
+function mark(page, doc, root) {
+  let node = root;
+  while (node && node.parentElement && node !== doc.body) {
+    for (const sib of node.parentElement.children) {
+      if (sib === node) continue;
+      page.marked.push([sib, sib.getAttribute('aria-hidden'), sib.hasAttribute('inert')]);
+      sib.setAttribute('aria-hidden', 'true');
+      sib.setAttribute('inert', '');
+      sib.inert = true;
+    }
+    node = node.parentElement;
+  }
+}
+
+function unmark(page) {
+  for (let i = page.marked.length - 1; i >= 0; i--) {
+    const [el, ariaHidden, hadInert] = page.marked[i];
+    if (ariaHidden == null) el.removeAttribute('aria-hidden');
+    else el.setAttribute('aria-hidden', ariaHidden);
+    if (!hadInert) { el.removeAttribute('inert'); el.inert = false; }
+  }
+  page.marked = [];
+}
+
+// Recompute the page from the stack — never replay a snapshot taken when an
+// overlay opened, because by the time it closes that snapshot describes a page
+// that has moved on. Roots torn down while open drop out here, so the record of
+// what to give back outlives the node that hid it.
+function sync(doc) {
+  const page = pageOf(doc);
+  for (let i = page.stack.length - 1; i >= 0; i--) {
+    if (!page.stack[i].root.isConnected) page.stack.splice(i, 1);
+  }
+  unmark(page);
+  const top = page.stack[page.stack.length - 1];
+  if (top) mark(page, doc, top.root);
+}
+
+// One keydown owner per document. Escape closes the single topmost overlay and
+// Tab is trapped in that one's panel, so the answer never turns on which
+// component registered a listener first or on where focus happens to be.
+function ownKeys(page, doc) {
+  if (page.keys) return;
+  page.keys = true;
+  doc.addEventListener('keydown', (e) => {
+    const top = page.stack[page.stack.length - 1];
+    if (!top) return;
+    if (e.key === 'Escape') {
+      if (top.dismiss) { e.preventDefault(); top.dismiss(); }
+    } else if (e.key === 'Tab') {
+      trapTab(top.panel, e);
+    }
+  });
+}
+
+// Node.DOCUMENT_POSITION_PRECEDING, without reaching for a global Node that a
+// document-scoped module has no business assuming is there.
+const PRECEDING = 2;
+
+// One way onto the stack. `where` picks the slot; everything after it — the
+// duplicate guard, the key owner, the recompute — is the same either way. Every
+// entry carries its layer, so the comparisons in adoptOverlay never meet undefined.
+function place(root, panel, dismiss, layer, where) {
+  const doc = root.ownerDocument;
+  const page = pageOf(doc);
+  if (page.stack.some((e) => e.root === root)) return;
+  page.stack.splice(where(page), 0, { root, panel, dismiss, layer });
+  ownKeys(page, doc);
+  sync(doc);
+}
+
+// The layer this root actually paints on. In a browser the live z-index is the
+// truth, so a consumer who moves either overlay in their own stylesheet gets the
+// keyboard on the layer they can see. JSDOM has no cascade to resolve: it hands
+// back the declared text — `calc(var(--z-overlay) + 1)` with the kit's sheets,
+// `auto` with none — and neither is a number, so under test the passed constant
+// stands. `auto` must not read as 0; anything unparseable falls through.
+function paintedLayer(root, layer) {
+  const painted = root.ownerDocument.defaultView?.getComputedStyle(root)?.zIndex;
+  const live = painted ? Number(painted) : NaN;
+  return Number.isFinite(live) ? live : layer;
+}
+
+/**
+ * Put an overlay on top of the page. `dismiss` is what Escape calls — pass null
+ * for one that refuses to be dismissed, and Escape then does nothing rather than
+ * falling through to the overlay underneath. This one goes on top whatever layer
+ * it paints on, because opening is history the stack can order by: the thing just
+ * opened is the thing the reader is looking at.
+ */
+export function pushOverlay(root, panel, dismiss, layer) {
+  place(root, panel, dismiss, layer, (page) => page.stack.length);
+}
+
+/**
+ * Take on a root that arrived already open — markup rendered with `open: true`,
+ * which nobody called open…() for. Without this its aria-modal is a claim the
+ * page contradicts: nothing is inert, Tab walks out, Escape has no owner.
+ *
+ * It goes in by paint order, because wiring has no history to order by and the
+ * overlay the reader is looking at is the one drawn over the rest: a confirm sits
+ * a layer above a drawer whichever component's wiring ran first, and whichever
+ * root the markup happens to put first. Document position only separates two
+ * overlays on the same layer, and there it is the right answer rather than a
+ * fallback — at equal stack levels the later root paints on top (CSS 2.2 Appendix
+ * E, steps 8 and 9). That comparison earns its keep whenever adoption order and
+ * document order disagree: a root inserted above one already on the stack and
+ * wired after it, and — in a browser only — a consumer stylesheet that lifts the
+ * drawer onto the confirm's layer, where wiring runs drawer-first however the
+ * markup is ordered. A browser refines the layer from the live z-index; JSDOM has
+ * none to give, so the tests hold OVERLAY_LAYER to the sheets instead. A root that
+ * renders closed is left alone: wiring is not an opening, and it waits for the one
+ * that is. A specimen never reaches here at all — it carries no hook for the
+ * wiring to find.
+ */
+export function adoptOverlay(root, panel, dismiss, layer) {
+  if (!root.classList.contains('is-open')) return;
+  const level = paintedLayer(root, layer);
+  place(root, panel, dismiss, level, (page) => {
+    const at = page.stack.findIndex((e) => e.layer > level
+      || (e.layer === level && (e.root.compareDocumentPosition(root) & PRECEDING)));
+    return at === -1 ? page.stack.length : at;
+  });
+}
+
+/** Take an overlay off the page, wherever in the stack it sits. */
+export function popOverlay(root) {
+  const doc = root.ownerDocument;
+  const page = pageOf(doc);
+  const at = page.stack.findIndex((e) => e.root === root);
+  if (at !== -1) page.stack.splice(at, 1);
+  sync(doc);
+}
+
+/**
+ * Recompute from what is still on the page. The wiring calls this, and the
+ * wiring runs on every re-render, so an overlay destroyed while open cannot
+ * leave the page inert with no node left to hand it back.
+ */
+export function syncOverlays(doc = document) {
+  sync(doc);
+}
+
+/**
+ * Hand focus back to `el`. The overlay was open while the page carried on, so
+ * the element it came from may be detached by now — and focus() on a detached
+ * node is a silent no-op that leaves the reader with no place on the page. Look
+ * for whatever inherited its identity in the re-render, then give up to the page.
+ */
+export function returnFocus(el, doc) {
+  const live = el && !el.isConnected && el.id ? doc?.getElementById(el.id) : el;
+  if (live && live.isConnected && typeof live.focus === 'function') { live.focus(); return; }
+  doc?.body?.focus?.();
+}
+
+// Trap Tab within the panel while open; wrap at both ends, and pull focus back
+// in when it has fallen outside the panel altogether.
+export function trapTab(panel, e) {
+  if (e.key !== 'Tab' || !panel) return;
+  const items = focusablesIn(panel);
+  if (!items.length) { e.preventDefault(); panel.focus(); return; }
+  const first = items[0];
+  const last = items[items.length - 1];
+  const active = (panel.ownerDocument || document).activeElement;
+  if (!panel.contains(active)) {
+    e.preventDefault(); (e.shiftKey ? last : first).focus();
+  } else if (e.shiftKey && (active === first || active === panel)) {
+    e.preventDefault(); last.focus();
+  } else if (!e.shiftKey && active === last) {
+    e.preventDefault(); first.focus();
+  }
+}

package/src/components/shell.js

@@ -1,24 +1,211 @@
-// Account page shell — topbar + sticky sidebar + page body. Drop it into any
-// product to reuse the exact /account layout: pass the product `word`, the
-// signed-in `account`, the current nav `active` id, and the page `title`/`body`.
+// The kit's one page shell. `appShell()` is a full-height rail — brand, the
+// kit's own sidebarNav(), the signed-in reader — beside one <main> that opens
+// with a breadcrumb trail the caller owns. `accountShell()` is a thin preset
+// over it that keeps the topbar, so the published /account API still works.
 // Call wireTopbar() once after mounting to wire the account menu + theme toggle.
-import { topbar } from './topbar.js';
-import { icon } from './index.js';
-
-// Default account navigation: [id, icon, label, href?, target?]. Override with
-// the `nav` option. href defaults to `#{id}` — pass your real route (and an
-// optional target) to make each item a working link.
-export const ACCOUNT_NAV = [
-  ['prefs', 'gear', 'Preferences'],
-  ['access', 'key', 'Access &amp; agents'],
-];
-
-const sidebar = (nav, active, cap = 'Account') =>
-  `<nav class="ui-side"><div class="cap">${cap}</div>` +
-  nav.map(([id, ic, label, href, target]) =>
-    `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''}${id === active ? ' class="on"' : ''}>${icon(ic)}${label}</a>`).join('') +
-  `<div class="ssep"></div><a class="out" href="#logout">${icon('logout')}Sign out</a></nav>`;
+// why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md
+import { topbar as productTopbar } from './topbar.js';
+import { esc, icon } from './index.js';
+import { sidebarNav, breadcrumbs } from './nav.js';
+import { prism } from '../assets/brand.js';
+import { ACCOUNT_NAV, toMenuTuple, initials } from './account-nav.js';
 
+// The one account navigation definition lives in account-nav.js, because
+// topbar.js needs it too and this file already imports topbar.js. Re-exported
+// here so the published name docs/library.md documents keeps working.
+export { ACCOUNT_NAV };
+
+const str = (v) => (v == null ? '' : String(v));
+const isRecord = (v) => typeof v === 'object' && v !== null;
+
+// ---- the options bag, settled once --------------------------------------
+//
+// Every option below carries a shape, and a default parameter covers
+// `undefined` and nothing else — so `nav: null` from an /auth/me, a `maxWidth`
+// out of tenant config, a `crumbs` string written by somebody reading the
+// migration note all arrived as they were. A shell that throws mid-render takes
+// the page with it, so each is settled here, before the first sink sees it, and
+// a parameter is protected by being declared rather than by what it crashes
+// into. Adding one to appShell() means adding it to SHAPES or deciding in the
+// open that it needs nothing.
+
+// accountShell() has always taken its nav as [id, icon, label, href?, target?].
+// Accept that shape and nav.js's object shape side by side, so a consumer's
+// existing tuples and the exported ACCOUNT_NAV both work. A nav that is not a
+// list at all falls back to the default; an entry inside one that is neither
+// shape is dropped, because sideItem() reads `.items` off whatever it is given.
+// An empty list is an answer, not a mistake — it stays empty.
+const toItems = (nav) => (Array.isArray(nav) ? nav : ACCOUNT_NAV)
+  .filter(isRecord)
+  .map((n) => (Array.isArray(n)
+    ? { id: n[0], icon: n[1], label: n[2], href: n[3], target: n[4] }
+    : n));
+
+// The trail is the caller's, and `crumbs` is the one option whose shape changed
+// in this release: the old API was `crumb: 'Payouts'`, a string, and the new one
+// is `crumbs: [{ label }]`. One letter apart. A value that is not a list is not
+// read as a one-crumb trail — that would draw a plausible page and hide the
+// migration mistake — so it is no trail at all, which is the visible answer. A
+// crumb with no label would draw an empty cell, so it goes too.
+const toCrumbs = (crumbs) => (Array.isArray(crumbs) ? crumbs : [])
+  .filter((c) => isRecord(c) && !Array.isArray(c) && str(c.label) !== '');
+
+// The reader, as two strings. railUser() and initials() both read them, and an
+// /auth/me answering `account: null` or a numeric display name reached both.
+const toReader = (a) => (isRecord(a) ? { name: str(a.name), email: str(a.email) } : { name: '', email: '' });
+
+// ---- the topbar, which interpolates where the rail escapes ----------------
+//
+// brand() writes `word` straight into its markup and accountMenu() does the
+// same with the reader's name, address and menu entries. So the escaping is
+// here, on the one path into productTopbar(), and not in each caller:
+// accountShell() escaped for itself and the `topbar` option underneath it
+// escaped for nobody. The caller passes text either way.
+
+// The reader the menu draws. Both fields are always written, empty when the
+// caller gave none — accountMenu()'s own defaults are a demo identity, and a
+// key dropped here is a key its default fills in, which is how a consumer's
+// page came to name its own reader in the rail and the kit's fixture beside it.
+//
+// `initials` travels with them because it is derived, and a derived value comes
+// from what the caller passed, not from the entities made of it: `<Ada>` and
+// `&lt;Ada&gt;` do not start with the same character. The entries land in the
+// same sink and toMenuTuple() is what escapes them; it reads item objects, so
+// tuples go through toItems() first. A nav nobody passed stays unpassed, and
+// accountMenu() falls back to its own derived default rather than to nothing.
+const toMenuReader = (a) => {
+  const { name, email } = toReader(a);
+  const rest = isRecord(a) && !Array.isArray(a) ? a : {};
+  const out = { ...rest, name: esc(name), email: esc(email), initials: esc(initials(name, email)) };
+  if (out.nav != null) out.nav = toItems(out.nav).map(toMenuTuple);
+  return out;
+};
+
+const toTopbar = (t) => {
+  if (!isRecord(t) || Array.isArray(t)) return null;
+  const out = { ...t };
+  if (out.word != null) out.word = esc(str(out.word));
+  if (out.account != null) out.account = toMenuReader(out.account);
+  return out;
+};
+
+// `maxWidth` lands inside a style attribute, which is a declaration list: esc()
+// stops a quote closing the attribute, and `;` is the character that matters
+// there. So a length is all this accepts — a number and a unit the reading
+// column can use, or `none`. Anything else falls back to the default rather
+// than throwing, because a shell that throws mid-render takes the page with it.
+const MAIN_MAX = '860px';
+const LENGTH = /^(?:\d+|\d*\.\d+)(?:px|rem|em|ch|%|vw)$/;
+const mainMax = (v) => {
+  const s = str(v).trim();
+  return s === 'none' || LENGTH.test(s) ? s : MAIN_MAX;
+};
+
+// The one pass. Each key names the function that settles it; nothing else in
+// this file re-checks a value that has been through here.
+const SHAPES = {
+  nav: toItems, crumbs: toCrumbs, account: toReader, maxWidth: mainMax, topbar: toTopbar,
+};
+
+// The text options settle too, by the same argument the rest of them do. A
+// default parameter covers `undefined` and not `null`, so `body: null` from a
+// record with no description drew the word "null" on the page, and `word: null`
+// left the brand link with no accessible name at all. Dropping the key is what
+// lets the declared default apply.
+const TEXT = ['word', 'brandHref', 'navLabel', 'title', 'sub', 'body', 'signOutHref', 'active'];
+
+function settle(options) {
+  const out = { ...options };
+  for (const key of Object.keys(SHAPES)) out[key] = SHAPES[key](out[key]);
+  for (const key of TEXT) if (out[key] == null) delete out[key];
+  return out;
+}
+
+// Signing out is a navigation action, so it belongs in the rail nav's footer
+// slot. Opt-in: a shell that renders it unasked puts a dead link on a page with
+// no session behind it.
+const signOut = (href) =>
+  `<a class="ui-nav__item is-danger" href="${esc(href)}" aria-label="Sign out">` +
+  `<span class="ui-nav__ic">${icon('logout')}</span>` +
+  `<span class="ui-nav__label">Sign out</span></a>`;
+
+// Who is signed in. A sibling of the <nav>, not its footer: a reader's name and
+// address are not navigation, and inside the landmark a screen reader announces
+// the address as an entry. Empty when nobody is — a shell must not invent an
+// identity for a reader it does not know.
+//
+// The initials carry the name, and the spelled-out half is aria-hidden. The
+// narrow rail folds `.ui-app__who` out of view, so a name that lived only there
+// left the initials on screen with nothing at all in the accessibility tree.
+// Naming the mark instead makes the two agree at every width, and says it once.
+function railUser({ name, email }) {
+  if (!name && !email) return '';
+  const who = [name, email].filter(Boolean).join(', ');
+  return `<div class="ui-app__user">` +
+    `<span class="ui-app__av" role="img" aria-label="Signed in as ${esc(who)}">` +
+    `${esc(initials(name, email))}</span>` +
+    `<span class="ui-app__who" aria-hidden="true">` +
+    (name ? `<b>${esc(name)}</b>` : '') +
+    (email ? `<span>${esc(email)}</span>` : '') +
+    `</span></div>`;
+}
+
+// Unique-per-render suffix for the brand mark's clip id — the same reason
+// nav.js keeps a module counter. Two shells on one page must not collide.
+let _shellUid = 0;
+
+export function appShell(options = {}) {
+  // Everything in SHAPES arrives settled; the rest is text, and a text default
+  // is what a default parameter is for.
+  const {
+    word = 'apliteni-ui',
+    brandHref = '#',
+    nav,
+    active,
+    navLabel = 'Account',
+    crumbs,
+    title = '',
+    sub = '',
+    body = '',
+    account,
+    signOutHref = '',
+    topbar,
+    maxWidth,
+  } = settle(options);
+  const rail = sidebarNav({
+    sections: [{ label: navLabel, items: nav }],
+    active,
+    ariaLabel: navLabel,
+    footer: signOutHref ? signOut(signOutHref) : '',
+  });
+  // The topbar already says the product word. Two lockups on one screen is one
+  // product word too many, so the rail head steps aside when there is a topbar.
+  // The word is the link's only text and the narrow rail folds it out of view,
+  // so the name is written out — the mark itself is aria-hidden.
+  const brand = topbar ? '' : `<a class="ui-app__brand" href="${esc(brandHref)}" aria-label="${esc(word)}">`
+    + `${prism(`appb-${++_shellUid}`, 24)}<span>${esc(word)}</span></a>`;
+  // A <div>, not an <aside>: <aside> is the `complementary` landmark — content
+  // related to the page but separable from it — and this holds the page's
+  // primary navigation and the reader who is signed in. The <nav> inside it is
+  // already the landmark that names the menu.
+  const grid = `<div class="ui-app">
+    <div class="ui-app__rail">
+      ${brand}
+      ${rail}
+      ${railUser(account)}
+    </div>
+    <main class="ui-app__main" style="--ui-app-main: ${maxWidth}">
+      ${crumbs.length ? breadcrumbs({ items: crumbs }) : ''}
+      ${title ? `<h1>${title}</h1>` : ''}
+      ${sub ? `<p class="ui-app__sub">${sub}</p>` : ''}
+      <div class="ui-app__body">${body}</div>
+    </main>
+  </div>`;
+  return topbar ? `<div class="ui-app-page">${productTopbar(topbar)}${grid}</div>` : grid;
+}
+
+// The /account preset: appShell() with the topbar switched on, and the old
+// `cap` + `crumb` strings folded into the trail the caller now owns.
 export function accountShell({
   word = 'Account',
   versions,
@@ -31,18 +218,34 @@ export function accountShell({
   title = '',
   sub = '',
   body = '',
+  signOutHref = '#logout',
 } = {}) {
-  return `<div style="position:relative;overflow:hidden;min-height:100vh">
-    <span class="ui-glow ui-glow--purple" style="top:-120px;right:6%;opacity:.35"></span>
-    ${topbar({ word, view: 'text', showSwitch, versions, account: { ...account, active, nav } })}
-    <div class="ui-shell">
-      ${sidebar(nav, active, cap)}
-      <div class="ui-shell__page">
-        <div class="ui-shell__crumbs">${cap} / <b>${crumb || title}</b></div>
-        <h1>${title}</h1>
-        <div class="sub">${sub}</div>
-        <div class="ui-card-stack">${body}</div>
-      </div>
-    </div>
-  </div>`;
+  // The same normaliser appShell() runs, called once here so the rail and the
+  // topbar menu are handed one list rather than two readings of `nav`.
+  const items = toItems(nav);
+  const trail = [{ label: cap }, { label: crumb || title }];
+  // The preset hands the topbar the caller's text, exactly as it hands the rail
+  // the caller's text. toTopbar() is what escapes for the menu's raw sinks, and
+  // it runs once inside appShell() — escaping here as well would reach the menu
+  // as entities, and escaping nowhere is what the public `topbar` option used
+  // to do.
+  return appShell({
+    word,
+    nav: items,
+    active,
+    navLabel: cap,
+    crumbs: trail,
+    title,
+    sub,
+    body,
+    account,
+    signOutHref,
+    topbar: {
+      word,
+      view: 'text',
+      showSwitch,
+      versions,
+      account: { ...(isRecord(account) ? account : {}), active, nav: items },
+    },
+  });
 }

package/src/components/topbar.js

@@ -4,6 +4,7 @@ import { brand } from '../assets/brand.js';
 import { icon, sun, moon } from '../assets/icons.js';
 import { esc } from './index.js';
 import { wireDropdown } from './dropdown.js';
+import { accountMenuNav, initials, toMenuTuple } from './account-nav.js';
 
 const THEME_KEY = 'apliteni-strategy-theme';
 
@@ -52,10 +53,35 @@ export function versionSwitcher(versions = [], activeIdx = 0) {
 }
 
 // `nav` ([id, icon, label, href?, target?][]) mirrors the account sidebar so the
-// dropdown and the sidebar stay in sync; falls back to the default two items.
-export function accountMenu({ name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav } = {}) {
-  const ini = (email.split('@')[0].split(/[._-]+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('') || '?').toUpperCase();
-  const items = nav && nav.length ? nav : [['prefs', 'gear', 'Preferences'], ['access', 'key', 'Access & agents']];
+// dropdown and the sidebar stay in sync. The fallback is derived from the one
+// ACCOUNT_NAV definition rather than restated here: a second literal agreed
+// with it by hand about the icon and disagreed about the encoding, which is the
+// drift #127 was filed about. Every field below is interpolated raw, so what
+// arrives has to arrive escaped — accountMenuNav() is what does that.
+//
+// `initials` is the avatar, for a caller that escapes on the way in. A mark is
+// derived from the reader's name, and a derived value has to be derived before
+// the escaping: `<Ada>` and `&lt;Ada&gt;` do not begin with the same character,
+// so shell.js — which escapes both fields for this sink — computes the mark
+// from the caller's own strings and passes it down beside them. Left out, it is
+// computed here from `name` and `email`, exactly where it always came from.
+export function accountMenu({
+  name = 'Ada Lovelace', email = 'ada@apliteni.com', active = 'prefs', nav, initials: mark,
+} = {}) {
+  // initials() is shared with the rail's avatar — the two are the same reader
+  // on the /account preset, and they used to disagree about who that was.
+  const ini = mark == null ? initials(name, email) : mark;
+  // ACCOUNT_NAV is published, and it is a list of item objects — so the shape a
+  // consumer most naturally hands this option is the one that used to throw here.
+  // Read either; toMenuTuple() escapes an object on the way, which a tuple that
+  // arrives already escaped does not need.
+  //
+  // A list that is empty is an answer and stays empty, which is what the rail
+  // does with the same value. Falling back on `.length` meant a caller who asked
+  // for no entries got none in the rail and the kit's two in the menu — one nav,
+  // two answers, which is the drift #127 exists to close.
+  const items = (Array.isArray(nav) ? nav : accountMenuNav())
+    .map((n) => (Array.isArray(n) ? n : toMenuTuple(n)));
   const it = ([id, ic, label, href, target]) =>
     `<a href="${href || '#' + id}"${target ? ` target="${target}"` : ''} data-dd-item tabindex="-1"${active === id ? ' class="cur"' : ''} role="menuitem">${icon(ic)}${label}</a>`;
   // `on` so the menu is visible in Storybook / standalone use (no /auth/me gate).

package/src/index.css

@@ -17,6 +17,7 @@
 @import "./styles/dropdown.css";
 @import "./styles/nav.css";
 @import "./styles/drawer.css";
+@import "./styles/confirm.css";
 @import "./styles/table.css";
 @import "./styles/empty.css";
 @import "./styles/callout.css";

package/src/index.js

@@ -5,6 +5,7 @@ export * from './components/dropdown.js';
 export * from './components/tabs.js';
 export * from './components/nav.js';
 export * from './components/drawer.js';
+export * from './components/confirm.js';
 export * from './components/topbar.js';
 export * from './components/shell.js';
 export * from './components/footer.js';

package/src/inline.js

@@ -38,6 +38,7 @@ export const styles = {
   dropdown: read('styles/dropdown.css'),
   nav: read('styles/nav.css'),
   drawer: read('styles/drawer.css'),
+  confirm: read('styles/confirm.css'),
   table: read('styles/table.css'),
   empty: read('styles/empty.css'),
   callout: read('styles/callout.css'),
@@ -63,6 +64,7 @@ export const cssText = [
   styles.dropdown,
   styles.nav,
   styles.drawer,
+  styles.confirm,
   styles.table,
   styles.empty,
   styles.callout,