@apliteni/apliteni-ui 0.136.0 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.136.0",
+  "version": "0.138.0",
 
   "workspaces": [
     "react"

package/react/README.md

@@ -232,6 +232,8 @@ finds its rows by `data-dd-item`, which is in the props you spread.
 leave `open` out and the component keeps its own, starting from `defaultOpen`. `onSelect`
 reports the item's `value` and the item. Pass `ariaLabel` to a `select` dropdown: a listbox
 needs a name, and axe says so — the same reason every vanilla dropdown story passes one.
+Pass `selectedValue` when the caller owns the selected row. Its tick stays on that value after
+`onSelect` until the caller changes it.
 
 **`search` puts a field over the rows**, the same one the factory draws, and Guidelines /
 Component choice makes it a rule at ten options or any list fed by data:
@@ -307,6 +309,19 @@ once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` po
 vitest and Storybook straight at `../src/` — which is why the class-name parity tests
 now compare against the working tree rather than the last published release.
 
+### Table appearance
+
+`DataTable` takes the vanilla table hooks as props. `zebra`, `hover` (on unless `false`), `stack`,
+`density`, `stickyHeader` and `pinnedIdentity` set the table modifiers. `rowState={(row) => 'target' | 'dead' | undefined}`
+marks a row, `footer` takes totals rows, and `caption` names the table for assistive technology. A column takes
+`rowHeader` and `cell` (`'title' | 'code' | 'long' | 'strong' | 'act'`). A `dead` row is muted, so put the word
+that names its state in one of its cells.
+
+```tsx
+<DataTable columns={columns} rows={rows} selectable={false} pager={false}
+  density="dense" zebra stack rowState={(r) => (r.id === landedOn ? 'target' : undefined)} />
+```
+
 ### Tables with another presentation of the same rows
 
 Pass `selectable={false}` to omit selection controls and their callbacks. Existing callers
@@ -963,6 +978,29 @@ instead of 32, with the same line drawn in the middle of it.
   ]} />
 ```
 
+## TopBar
+
+`TopBar` is the band: the brand first, then your slots after the spacer. Fill `view`, `version`,
+`theme` and `account` with `ViewSwitch`, `VersionSwitcher`, `ThemeToggle` and `AccountMenu`, or
+leave one out. Leave out `account` for the signed-out bar. The brand is the Apliteni mark and
+`word`, or pass your own `brand`. Put it above `AppShell` or on its own.
+
+```tsx
+<TopBar
+  view={<ViewSwitch items={[{ id: 'deck', label: 'Deck' }, { id: 'text', label: 'Text' }]} active="deck" />}
+  version={<VersionSwitcher versions={versions} value={version} onChange={setVersion} />}
+  theme={<ThemeToggle />}
+  account={<AccountMenu name="Ada Lovelace" email="ada@apliteni.com" current="prefs" onSignOut={signOut} />} />
+```
+
+`ViewSwitch` is a group of links, so it takes `renderLink` like `NavTabs`. The current view is
+filled with the same accent fill as a `Segmented` choice and has `aria-current="page"`.
+`VersionSwitcher` takes `{ value, label, badge }` versions. The button shows only the chosen
+name. Each row shows a name, a badge and the selected tick. `AccountMenu` shows the
+avatar mark, the reader's name and address, the rows in `items` and Sign out. Both menus are the
+kit's `Dropdown`, so they share its keyboard and placement. `current` marks one account page in
+accent ink and defaults to `prefs`.
+
 ## NavTabs and Breadcrumbs
 
 `NavTabs` renders route links with the kit’s underline or pill presentation. Pass

package/react/dist/index.d.ts

@@ -281,6 +281,10 @@ type Column<T> = {
      * why: docs/components.md#dense-financial-tables
      */
     linked?: boolean;
+    /** Renders this column's body cells as row headers (`th scope="row"`), as the kit's compact table does. */
+    rowHeader?: boolean;
+    /** `title` gives the column the remaining width, `code` sets a handle or id in the table's small text, `long` is running text that gets its own line in a stacked row, `strong` bolds a figure, `act` right-aligns a row action. */
+    cell?: 'title' | 'code' | 'long' | 'strong' | 'act';
 };
 type TableSort<T> = {
     key: (keyof T & string) | undefined;
@@ -316,6 +320,16 @@ type PagerProps = {
 type DataTableProps<T> = {
     columns: Column<T>[];
     rows: T[];
+    /** The kit's `--zebra`, `--hover` (on unless `false`) and `--stack` hooks. A stacked table lays each row out as a block below the phone step, so no column scrolls out of reach. */
+    zebra?: boolean;
+    hover?: boolean;
+    stack?: boolean;
+    /** Marks a row the reader landed on (`target`) or a revoked one (`dead`). A dead row is muted, so put the word that names its state in one of its cells. */
+    rowState?: (row: T) => 'target' | 'dead' | undefined;
+    /** Table footer rows, such as totals: `<tr>` elements with a `th scope="row"` label. */
+    footer?: ReactNode;
+    /** A caption read by assistive technology only. */
+    caption?: string;
     dense?: boolean;
     density?: 'default' | 'dense' | 'compact';
     stickyHeader?: boolean;
@@ -345,7 +359,7 @@ type DataTableProps<T> = {
 declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
 declare function DataTable<T extends {
     name: string;
-}>({ columns, rows, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
+}>({ columns, rows, zebra, hover, stack, rowState, footer, caption, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
 
 type PaginationProps = {
     page?: number;
@@ -546,6 +560,8 @@ type DropdownProps = {
     label?: string;
     /** What the trigger shows. Given one, the trigger is yours to update. */
     value?: string;
+    /** When given, the caller owns the selected row, including after a pick. */
+    selectedValue?: string | number;
     placeholder?: string;
     /** Inferred from the items when it is left out, exactly as the factory infers it. */
     variant?: 'select' | 'menu';
@@ -584,7 +600,7 @@ type DropdownProps = {
     /** Draw the row yourself. `props` is everything the row needs; spread it. */
     row?: (item: DropdownItem, props: DropdownRowProps) => ReactNode;
 };
-declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, 'aria-describedby': describedBy, 'aria-invalid': invalid, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ label, value, selectedValue, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, 'aria-describedby': describedBy, 'aria-invalid': invalid, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
 
 type BackLinkOwnProps = {
     /** The address. No address, or a `javascript:` one, and nothing is rendered. */
@@ -1187,6 +1203,69 @@ declare const AccentPicker: react.ForwardRefExoticComponent<Omit<HTMLAttributes<
     options?: readonly Accent[];
 } & react.RefAttributes<HTMLDivElement>>;
 
+type TopBarProps = Omit<ComponentPropsWithoutRef<'header'>, 'children'> & {
+    /** The lockup. Left out, the bar draws the Apliteni mark and `word`. */
+    brand?: ReactNode;
+    /** The product word beside the mark, when `brand` is left out. */
+    word?: string;
+    brandHref?: string;
+    /** A `ViewSwitch`, or nothing. */
+    view?: ReactNode;
+    /** A `VersionSwitcher`, or nothing. */
+    version?: ReactNode;
+    /** A `ThemeToggle`, or nothing. */
+    theme?: ReactNode;
+    /** An `AccountMenu`. Left out, the bar is the signed-out bar. */
+    account?: ReactNode;
+};
+/** The band: brand first, the controls after the spacer. Each control is a slot. */
+declare function TopBar({ brand, word, brandHref, view, version, theme, account, className, ...rest }: TopBarProps): react.JSX.Element;
+type ViewSwitchItem = {
+    id: string;
+    label: string;
+    href?: string;
+    target?: string;
+};
+type ViewSwitchProps = {
+    items: readonly ViewSwitchItem[];
+    active: string;
+    /** Names the group. */
+    label?: string;
+    /** Spread linkProps onto the router link, including children. */
+    renderLink?: (item: ViewSwitchItem, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
+};
+/** The Deck and Text switch: links between views of one page, the current one filled. */
+declare function ViewSwitch({ items, active, label, renderLink }: ViewSwitchProps): react.JSX.Element;
+type Version = {
+    value: string;
+    label: string;
+    badge?: 'live' | 'archive';
+};
+type VersionSwitcherProps = {
+    versions: readonly Version[];
+    value: string;
+    onChange?: (value: string) => void;
+    /** Names the list and the button. */
+    label?: string;
+    defaultOpen?: boolean;
+};
+/** The version menu: the button shows the chosen name, the open list ticks it. */
+declare function VersionSwitcher({ versions, value, onChange, label, defaultOpen }: VersionSwitcherProps): react.JSX.Element;
+type AccountMenuProps = {
+    name: string;
+    email: string;
+    /** The rows above Sign out. Left out, the kit's account pages. */
+    items?: DropdownEntry[];
+    /** The current account page. One menu row takes the accent ink. */
+    current?: string;
+    signOutHref?: string;
+    onSignOut?: () => void;
+    onSelect?: (value: string | number | undefined) => void;
+    defaultOpen?: boolean;
+};
+/** The avatar and its menu. */
+declare function AccountMenu({ name, email, items, current, signOutHref, onSignOut, onSelect, defaultOpen, }: AccountMenuProps): react.JSX.Element;
+
 type NavTabBadge = string | number | {
     text: string | number;
     tone?: 'neutral' | 'accent' | 'live' | 'danger';
@@ -1234,4 +1313,4 @@ declare const Breadcrumbs: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { type Accent, AccentPicker, type AccentPickerProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Feedback, type FeedbackPayload, type FeedbackProps, type FeedbackResult, type FeedbackSection, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { type Accent, AccentPicker, type AccentPickerProps, AccountMenu, type AccountMenuProps, type AddFilter, AppShell, type AppShellProps, type AppShellSection, Avatar, type AvatarProps, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Chart, type ChartBridgeStep, type ChartBridgeTones, type ChartPeriod, type ChartProps, type ChartSeries, type ChartTone, CheckList, type CheckListProps, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownAvatar, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Feedback, type FeedbackPayload, type FeedbackProps, type FeedbackResult, type FeedbackSection, Field, type FieldControlProps, type FieldProps, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Footer, type FooterColumn, type FooterLink, type FooterProps, type FooterSocial, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, type NavTabBadge, type NavTabItem, NavTabs, type NavTabsProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, TopBar, type TopBarProps, type Version, VersionSwitcher, type VersionSwitcherProps, ViewSwitch, type ViewSwitchItem, type ViewSwitchProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -94,7 +94,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 var Button = forwardRef3(function Button2({
   variant = "secondary",
   size = "md",
-  icon: icon8,
+  icon: icon9,
   leading,
   iconRight,
   iconOnly,
@@ -158,7 +158,7 @@ var Button = forwardRef3(function Button2({
     className
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon8;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon9;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   const Root = href === void 0 ? "button" : "a";
   return /* @__PURE__ */ jsxs3(
@@ -203,7 +203,7 @@ var Button = forwardRef3(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon8 && /* @__PURE__ */ jsx4(Icon, { name: icon8 }),
+        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon9 && /* @__PURE__ */ jsx4(Icon, { name: icon9 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx4("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx4("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx4(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs3("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [
@@ -284,14 +284,14 @@ var StatusDot = forwardRef5(function StatusDot2({
 // src/primitives/Card.tsx
 import { icon as kitIcon, safeUrl } from "@apliteni/apliteni-ui";
 import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function Card({ title, sub, level = 2, variant, pad: pad2, icon: icon8, href, className, children }) {
+function Card({ title, sub, level = 2, variant, pad: pad2, icon: icon9, href, className, children }) {
   const n = Number(level);
   const Heading = href != null ? "div" : `h${[2, 3, 4, 5, 6].includes(n) ? n : 2}`;
   const titled = title != null && title !== false && title !== "";
   const classes = ["ui-card", variant && `ui-card--${variant}`, pad2 && `ui-card--pad-${pad2}`, href != null && "ui-card--interactive", className].filter(Boolean).join(" ");
   const inner = /* @__PURE__ */ jsxs5(Fragment, { children: [
     titled && /* @__PURE__ */ jsxs5(Heading, { className: "ui-card__title", children: [
-      icon8 && /* @__PURE__ */ jsx9("span", { className: "ui-card__icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: kitIcon(icon8) } }),
+      icon9 && /* @__PURE__ */ jsx9("span", { className: "ui-card__icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: kitIcon(icon9) } }),
       title
     ] }),
     sub != null && /* @__PURE__ */ jsx9("div", { className: "ui-card__sub", children: sub }),
@@ -303,9 +303,9 @@ function Card({ title, sub, level = 2, variant, pad: pad2, icon: icon8, href, cl
 // src/primitives/Callout.tsx
 import { calloutIcons, icon as kitIcon2 } from "@apliteni/apliteni-ui";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-function Callout({ variant, icon: icon8 = calloutIcons[variant ?? "neutral"], children, actions }) {
+function Callout({ variant, icon: icon9 = calloutIcons[variant ?? "neutral"], children, actions }) {
   return /* @__PURE__ */ jsxs6("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
-    /* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon2(icon8) } }),
+    /* @__PURE__ */ jsx10("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon2(icon9) } }),
     /* @__PURE__ */ jsxs6("div", { className: "ui-callout__body", children: [
       children,
       actions != null && /* @__PURE__ */ jsx10("div", { className: "ui-toolbar ui-callout__actions", children: actions })
@@ -1351,7 +1351,7 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment6, useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef10, useState as useState7 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
@@ -1579,7 +1579,8 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var CELL_CLASS = { title: "ui-table__title", code: "ui-table__code", long: "ui-table__long", strong: "ui-table__num--strong", act: "ui-table__act" };
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1589,6 +1590,12 @@ function sortTableRows(rows, sort) {
 function DataTable({
   columns,
   rows,
+  zebra = false,
+  hover = true,
+  stack: stack2 = false,
+  rowState,
+  footer,
+  caption,
   dense = false,
   density,
   stickyHeader = false,
@@ -1686,70 +1693,72 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
+      children: sort.key === k ? /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
         /* @__PURE__ */ jsx19("path", { d: "m8 9 4-4 4 4" }),
         /* @__PURE__ */ jsx19("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
+  const Wrap = scrollable ? "div" : Fragment6;
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    /* @__PURE__ */ jsx19(
-      "div",
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx19(Wrap, { ...scrollable ? { className: "ui-table-scroll", role: "region", "aria-label": scrollLabel, tabIndex: 0 } : {}, children: /* @__PURE__ */ jsxs15(
+      "table",
       {
-        className: scrollable ? "ui-table-scroll" : void 0,
-        role: scrollable ? "region" : void 0,
-        "aria-label": scrollable ? scrollLabel : void 0,
-        tabIndex: scrollable ? 0 : void 0,
-        children: /* @__PURE__ */ jsxs15(
-          "table",
-          {
-            ref: table,
-            className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
-            "aria-busy": loading || void 0,
-            children: [
-              /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx19("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: pageAllOn,
-                    "aria-label": "Select all rows on this page",
-                    ref: (input) => {
-                      if (input) input.indeterminate = pageSomeOn;
-                    },
-                    onChange: () => onTogglePage(slice.map((r) => r.name))
-                  }
-                ) }) : null,
-                columns.map((c, columnIndex) => (
-                  // The sort control is a real <button> inside the header cell. It used to be
-                  // role="button" ON the <th>, which threw away the columnheader role and put
-                  // aria-sort on a role that forbids it.
-                  /* @__PURE__ */ jsx19(
-                    "th",
-                    {
-                      scope: "col",
-                      className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
-                      "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                      children: c.sortable ? (
-                        // The label is its own box so it can truncate: in a pinned
-                        // identity column on a phone the header is capped, and a bare
-                        // text node would push the caret out of the cell instead.
-                        /* @__PURE__ */ jsxs15("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                          /* @__PURE__ */ jsx19("span", { className: "rx-sort__label", children: c.label }),
-                          caret(c.key)
-                        ] })
-                      ) : c.label
-                    },
-                    c.key
-                  )
-                ))
-              ] }) }),
-              /* @__PURE__ */ jsxs15("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs15("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx19("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
+        ref: table,
+        className: ["ui-table", hover && "ui-table--hover", zebra && "ui-table--zebra", stack2 && "ui-table--stack", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
+        "aria-busy": loading || void 0,
+        role: stack2 ? "table" : void 0,
+        children: [
+          caption ? /* @__PURE__ */ jsx19("caption", { className: "ui-sr", children: caption }) : null,
+          /* @__PURE__ */ jsx19("thead", { role: stack2 ? "rowgroup" : void 0, children: /* @__PURE__ */ jsxs15("tr", { role: stack2 ? "row" : void 0, children: [
+            selectable ? /* @__PURE__ */ jsx19("th", { scope: "col", role: stack2 ? "columnheader" : void 0, className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "checkbox",
+                checked: pageAllOn,
+                "aria-label": "Select all rows on this page",
+                ref: (input) => {
+                  if (input) input.indeterminate = pageSomeOn;
+                },
+                onChange: () => onTogglePage(slice.map((r) => r.name))
+              }
+            ) }) : null,
+            columns.map((c, columnIndex) => (
+              // The sort control is a real <button> inside the header cell. It used to be
+              // role="button" ON the <th>, which threw away the columnheader role and put
+              // aria-sort on a role that forbids it.
+              /* @__PURE__ */ jsx19(
+                "th",
+                {
+                  scope: "col",
+                  role: stack2 ? "columnheader" : void 0,
+                  className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
+                  "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
+                  children: c.sortable ? (
+                    // The label is its own box so it can truncate: in a pinned
+                    // identity column on a phone the header is capped, and a bare
+                    // text node would push the caret out of the cell instead.
+                    /* @__PURE__ */ jsxs15("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                      /* @__PURE__ */ jsx19("span", { className: "rx-sort__label", children: c.label }),
+                      caret(c.key)
+                    ] })
+                  ) : c.label
+                },
+                c.key
+              )
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxs15("tbody", { role: stack2 ? "rowgroup" : void 0, children: [
+            !slice.length && /* @__PURE__ */ jsx19("tr", { role: stack2 ? "row" : void 0, children: /* @__PURE__ */ jsx19("td", { role: stack2 ? "cell" : void 0, colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+            slice.map((r) => /* @__PURE__ */ jsxs15(
+              "tr",
+              {
+                role: stack2 ? "row" : void 0,
+                className: rowState?.(r) ? `is-${rowState(r)}` : void 0,
+                children: [
+                  selectable ? /* @__PURE__ */ jsx19("td", { role: stack2 ? "cell" : void 0, className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
                     "input",
                     {
                       type: "checkbox",
@@ -1758,14 +1767,29 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx19("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
-                ] }, r.name))
-              ] })
-            ]
-          }
-        )
+                  columns.map((c, columnIndex) => {
+                    const Cell = c.rowHeader ? "th" : "td";
+                    return /* @__PURE__ */ jsx19(
+                      Cell,
+                      {
+                        scope: c.rowHeader ? "row" : void 0,
+                        role: stack2 ? c.rowHeader ? "rowheader" : "cell" : void 0,
+                        "data-label": stack2 && c.num && typeof c.label === "string" ? c.label : void 0,
+                        className: [c.num && "ui-table__num", c.cell && CELL_CLASS[c.cell], pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" ") || void 0,
+                        children: c.render ? c.render(r) : String(r[c.key])
+                      },
+                      c.key
+                    );
+                  })
+                ]
+              },
+              r.name
+            ))
+          ] }),
+          footer ? /* @__PURE__ */ jsx19("tfoot", { role: stack2 ? "rowgroup" : void 0, children: footer }) : null
+        ]
       }
-    ),
+    ) }),
     pager ? (
       // The strip that pages a table may not be wider than the rows it pages (#504).
       // The two are siblings, and no selector sizes one to the other, so the width is
@@ -1858,12 +1882,12 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon8 = "lock",
+  icon: icon9 = "lock",
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs16("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx20("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx20(Icon, { name: icon8 }) }),
+    /* @__PURE__ */ jsx20("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx20(Icon, { name: icon9 }) }),
     /* @__PURE__ */ jsx20("div", { className: "ui-denied__title", children: title }),
     sub && /* @__PURE__ */ jsx20("div", { className: "ui-denied__sub", children: sub }),
     need && /* @__PURE__ */ jsxs16("div", { className: "ui-denied__need", children: [
@@ -2347,7 +2371,7 @@ function DatePicker({
 
 // src/Dropdown.tsx
 import {
-  Fragment as Fragment7,
+  Fragment as Fragment8,
   useCallback as useCallback5,
   useContext as useContext2,
   useEffect as useEffect8,
@@ -2375,7 +2399,7 @@ import { createContext as createContext2 } from "react";
 var FieldContext = createContext2(null);
 
 // src/Dropdown.tsx
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
 var inPanel = (node) => {
@@ -2416,6 +2440,7 @@ var SEARCH_DEFAULTS = {
 function Dropdown({
   label,
   value,
+  selectedValue,
   placeholder = "Select\u2026",
   variant,
   items,
@@ -2560,15 +2585,16 @@ function Dropdown({
   const name = ariaLabel || (label ? String(label).replace(/:\s*$/, "") : "") || "Options";
   const given = rows.find((it) => it.selected);
   const givenKey = given ? keyOf(given) : null;
-  const pickedKey = pick && pick.against === givenKey ? pick.key : null;
+  const pickedKey = selectedValue === void 0 && pick && pick.against === givenKey ? pick.key : null;
   useEffect8(() => {
     if (pick && pick.against !== givenKey) setPick(null);
   }, [givenKey, pick]);
   const picked = pickedKey != null ? rows.find((it) => keyOf(it) === pickedKey) : void 0;
-  const shown = value != null ? value : isSelect ? picked?.label ?? given?.label : null;
+  const controlled = selectedValue !== void 0 ? rows.find((it) => it.value === selectedValue) : void 0;
+  const shown = value != null ? value : isSelect ? selectedValue !== void 0 ? controlled?.label : picked?.label ?? given?.label : null;
   const marked2 = isSelect && rows.some((it) => it.avatar);
-  const chosen = marked2 ? value != null ? rows.find((it) => it.label === value) : picked ?? given : void 0;
-  const selectedOf = (it) => pickedKey != null ? it.disabled ? !!it.selected : keyOf(it) === pickedKey : !!it.selected;
+  const chosen = marked2 ? value != null ? rows.find((it) => it.label === value) : selectedValue !== void 0 ? controlled : picked ?? given : void 0;
+  const selectedOf = (it) => selectedValue !== void 0 ? it.value === selectedValue : pickedKey != null ? it.disabled ? !!it.selected : keyOf(it) === pickedKey : !!it.selected;
   const hiddenBy = (it) => Boolean(sx) && !dropdownMatch(it.label, query);
   const filtering = Boolean(sx) && dropdownFiltering(query);
   const visible = rows.filter((it) => !hiddenBy(it));
@@ -2746,7 +2772,7 @@ function Dropdown({
       e.preventDefault();
       return;
     }
-    if (isSelect) setPick({ key: keyOf(item), against: givenKey });
+    if (isSelect && selectedValue === void 0) setPick({ key: keyOf(item), against: givenKey });
     onSelect?.(item.value, item);
     setOpen(false);
     trigger.current?.focus();
@@ -2838,7 +2864,7 @@ function Dropdown({
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
-      children: /* @__PURE__ */ jsxs18(Fragment8, { children: [
+      children: /* @__PURE__ */ jsxs18(Fragment9, { children: [
         entry.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: entry.avatar.key, name: entry.avatar.name, src: entry.avatar.src, empty: entry.avatar.empty }) : entry.icon && /* @__PURE__ */ jsx22(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
         /* @__PURE__ */ jsxs18("span", { className: "ui-dropdown__main", children: [
           /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__label", children: entry.label }),
@@ -2848,7 +2874,7 @@ function Dropdown({
         asOption && /* @__PURE__ */ jsx22(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx22(Fragment7, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx22(Fragment8, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
     return /* @__PURE__ */ jsx22(Tag, { ...props }, key);
   }
@@ -2870,7 +2896,7 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
     /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
     /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
@@ -2895,7 +2921,7 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs18(Fragment9, { children: [
             marked2 && (chosen?.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: chosen.avatar.key, name: chosen.avatar.name, src: chosen.avatar.src, empty: chosen.avatar.empty }) : /* @__PURE__ */ jsx22(Avatar, { empty: true })),
             label && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__pre", children: label }),
             /* @__PURE__ */ jsx22("span", { className: cx6("ui-dropdown__value", marked2 && !chosen && "is-placeholder"), children: shown != null ? shown : placeholder })
@@ -2925,7 +2951,7 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          sx ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
             /* @__PURE__ */ jsxs18("div", { className: "ui-dropdown__search", children: [
               /* @__PURE__ */ jsx22(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
               /* @__PURE__ */ jsx22(
@@ -3076,7 +3102,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 // src/FilterBar.tsx
 import { useRef as useRef13, useState as useState10 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var SEARCH_AT = 10;
 var isRow2 = (entry) => entry !== "---" && !entry.separator;
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
@@ -3183,7 +3209,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
             variant: "menu",
             sections,
             ariaLabel: addLabel,
-            triggerContent: /* @__PURE__ */ jsxs21(Fragment9, { children: [
+            triggerContent: /* @__PURE__ */ jsxs21(Fragment10, { children: [
               /* @__PURE__ */ jsx26(Icon, { name: "plus" }),
               addLabel
             ] }),
@@ -3234,7 +3260,7 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 
 // src/Snippet.tsx
 import { useEffect as useEffect9, useRef as useRef14, useState as useState11 } from "react";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState11("idle");
   const request = useRef14(0);
@@ -3262,7 +3288,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
   return /* @__PURE__ */ jsxs23("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
     /* @__PURE__ */ jsxs23("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx28("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      copy && /* @__PURE__ */ jsxs23(Fragment11, { children: [
         /* @__PURE__ */ jsx28(
           "button",
           {
@@ -3284,7 +3310,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 // src/Tabs.tsx
 import { useEffect as useEffect10, useId as useId9, useRef as useRef15 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
   const previous = useRef15(value);
@@ -3333,7 +3359,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+          item.count != null && /* @__PURE__ */ jsxs24(Fragment12, { children: [
             " ",
             item.count
           ] })
@@ -3571,11 +3597,11 @@ var cases = {
   "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
   "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
 };
-function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actions }) {
+function EmptyState({ variant = "first-run", title, sub, icon: icon9, art, actions }) {
   const preset = cases[variant];
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
-  const glyph = icon8 ?? preset.icon;
+  const glyph = icon9 ?? preset.icon;
   return /* @__PURE__ */ jsxs27("div", { className: "ui-empty", children: [
     art ? typeof art === "string" ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon3(glyph) } }) : null,
     heading && /* @__PURE__ */ jsx32("div", { className: "ui-empty__title", children: heading }),
@@ -3585,7 +3611,7 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actio
 }
 
 // src/FileDrop.tsx
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3753,7 +3779,7 @@ function FileDrop({
             children: /* @__PURE__ */ jsx33("span", { style: { width: `${file.progress}%` } })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs28(Fragment12, { children: [
+      ] }) : /* @__PURE__ */ jsxs28(Fragment13, { children: [
         /* @__PURE__ */ jsx33(
           Button,
           {
@@ -3936,7 +3962,7 @@ import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect14, useId as useId11, useState as useState15 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
@@ -3962,7 +3988,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs31(Fragment13, { children: [
+  const children = /* @__PURE__ */ jsxs31(Fragment14, { children: [
     (item.leading ?? item.icon) && /* @__PURE__ */ jsx36("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx36(Icon, { name: item.icon }) }),
     /* @__PURE__ */ jsx36("span", { className: "ui-nav__label", children: item.label }),
     count != null && count !== "" && /* @__PURE__ */ jsx36("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
@@ -4102,7 +4128,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -4204,7 +4230,7 @@ function AppShell({
     ] }),
     /* @__PURE__ */ jsxs33("div", { className: "ui-app__well", children: [
       /* @__PURE__ */ jsxs33("header", { className: "ui-app__bar", children: [
-        navigable && /* @__PURE__ */ jsxs33(Fragment14, { children: [
+        navigable && /* @__PURE__ */ jsxs33(Fragment15, { children: [
           /* @__PURE__ */ jsx38(
             Button,
             {
@@ -4317,10 +4343,10 @@ function Footer({
       brand !== false && /* @__PURE__ */ jsxs34("div", { className: "ui-footer__brand", children: [
         lockup,
         tagline && /* @__PURE__ */ jsx39("p", { className: "ui-footer__tagline", children: tagline }),
-        social.length > 0 && /* @__PURE__ */ jsx39("div", { className: "ui-footer__socials", children: social.map(({ label, href: to, icon: icon8 = "github" }) => {
-          const markup = SOCIAL_GLYPHS[icon8];
-          const fill = icon8 === "mail" ? "none" : "currentColor";
-          const viewBox = icon8 === "linkedin" ? "0 0 448 512" : "0 0 24 24";
+        social.length > 0 && /* @__PURE__ */ jsx39("div", { className: "ui-footer__socials", children: social.map(({ label, href: to, icon: icon9 = "github" }) => {
+          const markup = SOCIAL_GLYPHS[icon9];
+          const fill = icon9 === "mail" ? "none" : "currentColor";
+          const viewBox = icon9 === "linkedin" ? "0 0 448 512" : "0 0 24 24";
           return /* @__PURE__ */ jsx39("a", { className: "ui-footer__social", href: safeUrl2(to ?? "#"), "aria-label": label, children: /* @__PURE__ */ jsx39("svg", { viewBox, fill, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: markup } }) }, label);
         }) })
       ] }),
@@ -4467,7 +4493,7 @@ import {
   useState as useState18
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var HEIGHT = { months: 216, bridge: 216, spark: 32 };
 var PAD = 2;
 var ZERO_INSET = 1.5;
@@ -5097,7 +5123,7 @@ function Chart(props) {
                   `${column.label}-${i}`
                 )) })
               ] }) }),
-              /* @__PURE__ */ jsx41("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs36(Fragment15, { children: [
+              /* @__PURE__ */ jsx41("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs36(Fragment16, { children: [
                 /* @__PURE__ */ jsx41("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
                 /* @__PURE__ */ jsx41("span", { className: "ui-tip__value", children: format(open.value) }),
                 (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx41("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
@@ -5120,7 +5146,7 @@ function Chart(props) {
                 /* @__PURE__ */ jsx41("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs36("tr", { "aria-current": pick === i ? true : void 0, children: [
                   /* @__PURE__ */ jsxs36("th", { scope: "row", children: [
                     row.column.label,
-                    row.column.estimated && /* @__PURE__ */ jsxs36(Fragment15, { children: [
+                    row.column.estimated && /* @__PURE__ */ jsxs36(Fragment16, { children: [
                       " ",
                       /* @__PURE__ */ jsx41("span", { className: "ui-chart__state", children: stateOf(row.column) })
                     ] })
@@ -5177,10 +5203,145 @@ var AccentPicker = forwardRef10(function AccentPicker2({
   );
 });
 
+// src/TopBar.tsx
+import { Fragment as Fragment17 } from "react";
+import { prism as prism3, safeUrl as safeUrl3, icon as icon7, ACCOUNT_NAV } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment18, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+function TopBar({
+  brand,
+  word = "Strategy",
+  brandHref = "/",
+  view,
+  version,
+  theme,
+  account,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx43("header", { ...rest, className: ["topbar", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs37("div", { className: "topbar__in", children: [
+    brand ?? /* @__PURE__ */ jsxs37("a", { className: "brand", href: safeUrl3(brandHref), "aria-label": `Apliteni ${word}`, children: [
+      /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", dangerouslySetInnerHTML: { __html: prism3("tb-mark", 22) } }),
+      /* @__PURE__ */ jsx43("span", { children: word })
+    ] }),
+    view,
+    /* @__PURE__ */ jsx43("span", { className: "spacer" }),
+    version,
+    theme,
+    account
+  ] }) });
+}
+function ViewSwitch({ items, active, label = "View", renderLink }) {
+  return /* @__PURE__ */ jsx43("div", { className: "dtsw on", role: "group", "aria-label": label, children: items.map((item) => {
+    const current = item.id === active;
+    const linkProps = {
+      className: current ? "cur" : void 0,
+      href: safeUrl3(item.href || `#${item.id}`),
+      target: item.target,
+      "aria-current": current ? "page" : void 0,
+      children: item.label
+    };
+    return /* @__PURE__ */ jsx43(Fragment17, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
+  }) });
+}
+var BADGE = { live: "Live", archive: "Archive" };
+function VersionSwitcher({ versions, value, onChange, label = "Version", defaultOpen }) {
+  const current = versions.find((v) => v.value === value);
+  return /* @__PURE__ */ jsx43("div", { className: "vsw", children: /* @__PURE__ */ jsx43(
+    Dropdown,
+    {
+      variant: "select",
+      align: "start",
+      triggerClass: "vsw__btn",
+      panelClass: "vsw__menu",
+      selectedValue: value,
+      chevron: false,
+      defaultOpen,
+      ariaLabel: `${label} \u2014 ${current?.label ?? ""}`,
+      triggerContent: /* @__PURE__ */ jsxs37(Fragment18, { children: [
+        /* @__PURE__ */ jsx43("span", { className: "cur", children: current?.label }),
+        /* @__PURE__ */ jsx43("span", { className: "car", "aria-hidden": "true" })
+      ] }),
+      items: versions.map((v) => ({
+        label: v.label,
+        value: v.value,
+        badge: BADGE[v.badge ?? "archive"],
+        selected: v.value === value
+      })),
+      row: (item, props) => /* @__PURE__ */ jsxs37("div", { ...props, className: `${props.className} vopt`, children: [
+        /* @__PURE__ */ jsx43("span", { className: "vname", children: item.label }),
+        /* @__PURE__ */ jsx43("span", { className: `vbadge ${item.badge === "Live" ? "live" : "arch"}`, children: String(item.badge) }),
+        /* @__PURE__ */ jsx43("span", { className: "vtick", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon7("check") } })
+      ] }),
+      onSelect: (picked) => {
+        if (picked != null) onChange?.(String(picked));
+      }
+    }
+  ) });
+}
+var initialsOf = (name, email) => {
+  const from = name.trim() || email.split("@")[0] || "";
+  return (from.split(/[\s._-]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("") || "?").toUpperCase();
+};
+var ACCOUNT_ITEMS = ACCOUNT_NAV.map((item) => ({
+  label: item.label,
+  icon: item.icon,
+  value: item.id,
+  href: `#${item.id}`
+}));
+function AccountMenu({
+  name,
+  email,
+  items = ACCOUNT_ITEMS,
+  current = "prefs",
+  signOutHref,
+  onSignOut,
+  onSelect,
+  defaultOpen
+}) {
+  const mark = initialsOf(name, email);
+  return /* @__PURE__ */ jsx43("div", { className: "acct on", children: /* @__PURE__ */ jsx43(
+    Dropdown,
+    {
+      variant: "menu",
+      align: "end",
+      chevron: false,
+      triggerClass: "avatar",
+      panelClass: "amenu",
+      defaultOpen,
+      ariaLabel: "Account",
+      triggerContent: mark,
+      header: /* @__PURE__ */ jsxs37("div", { className: "ahead", children: [
+        /* @__PURE__ */ jsx43("span", { className: "avatar", children: mark }),
+        /* @__PURE__ */ jsxs37("span", { className: "aw", children: [
+          /* @__PURE__ */ jsx43("span", { className: "anm", children: name }),
+          /* @__PURE__ */ jsx43("span", { className: "aem", title: email, children: email })
+        ] })
+      ] }),
+      items: [...items, "---", { label: "Sign out", icon: "logout", value: "sign-out", href: signOutHref }],
+      row: (item, props) => /* @__PURE__ */ jsxs37(
+        "a",
+        {
+          ...props,
+          href: item.disabled ? void 0 : item.href ? safeUrl3(item.href) : item.value === "sign-out" && onSignOut ? void 0 : safeUrl3(item.value === "sign-out" ? "#logout" : `#${item.value}`),
+          className: [props.className.replace(/\bui-dropdown__item\b/, "").trim(), !item.disabled && item.value === current && "cur", item.value === "sign-out" && "aout"].filter(Boolean).join(" "),
+          children: [
+            item.icon && /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon7(item.icon) } }),
+            item.label
+          ]
+        }
+      ),
+      onSelect: (value, item) => {
+        if (item.value === "sign-out") onSignOut?.();
+        else onSelect?.(value);
+      }
+    }
+  ) });
+}
+
 // src/NavTabs.tsx
-import { Fragment as Fragment16, forwardRef as forwardRef11, useEffect as useEffect18, useRef as useRef23, useImperativeHandle as useImperativeHandle2 } from "react";
-import { safeUrl as safeUrl3, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment19, forwardRef as forwardRef11, useEffect as useEffect18, useRef as useRef23, useImperativeHandle as useImperativeHandle2 } from "react";
+import { safeUrl as safeUrl4, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment20, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var NavTabs = forwardRef11(function NavTabs2({
   items,
   active,
@@ -5198,7 +5359,7 @@ var NavTabs = forwardRef11(function NavTabs2({
   useEffect18(() => {
     if (navRef.current) revealCurrentNav(navRef.current);
   }, [active, signature]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "nav",
     {
       ...rest,
@@ -5211,20 +5372,20 @@ var NavTabs = forwardRef11(function NavTabs2({
       },
       children: items.map((item) => {
         const badge = item.badge != null && typeof item.badge === "object" ? item.badge : { text: item.badge, tone: void 0 };
-        const inner = /* @__PURE__ */ jsxs37(Fragment17, { children: [
-          /* @__PURE__ */ jsx43("span", { className: "ui-nav__tab-label", children: item.label }),
-          badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx43("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
+        const inner = /* @__PURE__ */ jsxs38(Fragment20, { children: [
+          /* @__PURE__ */ jsx44("span", { className: "ui-nav__tab-label", children: item.label }),
+          badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx44("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
         ] });
-        if (item.disabled) return /* @__PURE__ */ jsx43("span", { className: "ui-nav__tab is-disabled", "aria-disabled": "true", children: inner }, item.id);
+        if (item.disabled) return /* @__PURE__ */ jsx44("span", { className: "ui-nav__tab is-disabled", "aria-disabled": "true", children: inner }, item.id);
         const current = item.id === active;
         const linkProps = {
           className: ["ui-nav__tab", current && "is-active"].filter(Boolean).join(" "),
-          href: safeUrl3(item.href || `#${item.id}`),
+          href: safeUrl4(item.href || `#${item.id}`),
           target: item.target,
           "aria-current": current ? "page" : void 0,
           children: inner
         };
-        return /* @__PURE__ */ jsx43(Fragment16, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
+        return /* @__PURE__ */ jsx44(Fragment19, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx44("a", { ...linkProps }) }, item.id);
       })
     }
   );
@@ -5232,8 +5393,8 @@ var NavTabs = forwardRef11(function NavTabs2({
 
 // src/Breadcrumbs.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { icon as icon7, safeUrl as safeUrl4 } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+import { icon as icon8, safeUrl as safeUrl5 } from "@apliteni/apliteni-ui";
+import { Fragment as Fragment21, jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 var Breadcrumbs = forwardRef12(function Breadcrumbs2({
   items,
   renderLink,
@@ -5241,21 +5402,21 @@ var Breadcrumbs = forwardRef12(function Breadcrumbs2({
   "aria-label": ariaLabel = "Breadcrumb",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "nav",
     {
       ...rest,
       ref,
       className: ["ui-nav", "ui-nav--crumbs", className].filter(Boolean).join(" "),
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx44("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
+      children: /* @__PURE__ */ jsx45("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
         const current = index === items.length - 1;
-        const inner = /* @__PURE__ */ jsxs38(Fragment18, { children: [
-          item.icon && /* @__PURE__ */ jsx44("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon7(item.icon) } }),
-          /* @__PURE__ */ jsx44("span", { className: "ui-nav__crumb-label", children: item.label })
+        const inner = /* @__PURE__ */ jsxs39(Fragment21, { children: [
+          item.icon && /* @__PURE__ */ jsx45("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon8(item.icon) } }),
+          /* @__PURE__ */ jsx45("span", { className: "ui-nav__crumb-label", children: item.label })
         ] });
-        const linkProps = !current && item.href ? { className: "ui-nav__crumb", href: safeUrl4(item.href), target: item.target, children: inner } : null;
-        return /* @__PURE__ */ jsx44("li", { className: "ui-nav__crumb-item", children: linkProps ? renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx44("a", { ...linkProps }) : /* @__PURE__ */ jsx44(
+        const linkProps = !current && item.href ? { className: "ui-nav__crumb", href: safeUrl5(item.href), target: item.target, children: inner } : null;
+        return /* @__PURE__ */ jsx45("li", { className: "ui-nav__crumb-item", children: linkProps ? renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx45("a", { ...linkProps }) : /* @__PURE__ */ jsx45(
           "span",
           {
             className: ["ui-nav__crumb", current && "is-current"].filter(Boolean).join(" "),
@@ -5273,6 +5434,7 @@ var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
   AccentPicker,
+  AccountMenu,
   AppShell,
   Avatar,
   BackLink,
@@ -5332,6 +5494,9 @@ export {
   Timeline,
   Toast,
   Tooltip,
+  TopBar,
+  VersionSwitcher,
+  ViewSwitch,
   sortTableRows,
   useToast
 };

package/src/components/topbar.js

@@ -38,11 +38,11 @@ export function versionSwitcher(versions = [], activeIdx = 0) {
   const opts = versions.map((v, i) => {
     const key = String(v.badge || 'archive').toLowerCase();
     return `<div class="vopt" role="option" data-dd-item tabindex="-1" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
-      `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
-      `<span class="vbadge ${key === 'live' ? 'live' : 'arch'}">${Object.hasOwn(VBADGE, key) ? VBADGE[key] : v.badge}</span></div>`;
+      `<span class="vname">${v.label}</span>` +
+      `<span class="vbadge ${key === 'live' ? 'live' : 'arch'}">${Object.hasOwn(VBADGE, key) ? VBADGE[key] : v.badge}</span><span class="vtick" aria-hidden="true">${icon('check')}</span></div>`;
   }).join('');
   return `<div class="vsw" data-dropdown><button type="button" class="vsw__btn" data-dropdown-trigger aria-haspopup="listbox" aria-expanded="false" aria-label="Version — ${esc(cur)}">` +
-    `<span class="lbl">version:</span><span class="cur">${cur}</span><span class="car"></span></button>` +
+    `<span class="cur">${cur}</span><span class="car"></span></button>` +
     `<div class="vsw__menu" data-dropdown-panel role="listbox" aria-label="Version">${opts}</div></div>`;
 }
 

package/src/styles/table.css

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Table — .ui-table  (hairline rows, opaque base surface)
- * Row modifiers: .is-dead (revoked/struck), .is-target (landed on), right-aligned .ui-table__act
+ * Row modifiers: .is-dead (revoked, shown by its muted ink and a word), .is-target (landed on), right-aligned .ui-table__act
  * ========================================================================== */
 
 .ui-table {
@@ -52,14 +52,6 @@
 .ui-table th:last-child { padding-right: 0; }
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
 .ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
-.ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
-/* The strike is painted by the cell across its in-flow inline descendants, and an atomic
-   inline-level box is not one — so a linked name in a revoked row needs it struck itself.
-   On hover it carries both lines: the cell-link hover rule below is a whole `text-decoration`,
-   which would otherwise replace the strike with the underline.
-   held by: src/styles/table-focus.test.js */
-.ui-table tr.is-dead td.ui-table__title a { text-decoration: line-through; }
-.ui-table tr.is-dead td.ui-table__title a:hover { text-decoration-line: underline line-through; }
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 
 /* Row hover: an inset, rounded fill so the highlight never sits flush against a
@@ -72,7 +64,6 @@
   border-spacing: 0;
   padding: 0 var(--space-2);
 }
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td { background: var(--surface-2); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:first-child {
   border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:last-child {
@@ -106,8 +97,6 @@
 .ui-table--zebra td:first-child { padding-left: var(--space-3); }
 .ui-table--zebra th:last-child,
 .ui-table--zebra td:last-child { padding-right: var(--space-3); }
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
 
 /* A link in a cell is a value that happens to open something: the row's ink, underlined
    on hover — what .ui-identity below has always done. Without it, base.css's bare
@@ -213,7 +202,7 @@
  * bold only in the figure. Scoped to the table, the helper wins on either cell and the
  * row reads as one row. */
 .ui-table :is(th, td).ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
-.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
+.ui-table__code { font-size: var(--text-sm); color: var(--text); }
 /* Two things in one cell — a row's own name and the state of it — side by side
  * while the column has room and stacked when it does not. The wrap comes from flex
  * because a dense cell is nowrap, and the column is then only as wide as the wider
@@ -234,13 +223,13 @@
 
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
 .ui-table { background: var(--table-bg); }
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td {
-  background: var(--table-bg);
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--table-bg); }
+/* A row hover is a quiet neutral step. The row paints under transparent cells in a
+   scroll region, while ordinary cells cover the row without breaking its fill. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
 }
-.ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
 
 /* The row a reference landed a reader on. The mark is a GROUND, not a line: an outline
    says the keyboard is here (Artur, r34), and this one persists — it answers which row the
@@ -332,6 +321,9 @@
    beneath them. */
 .ui-table-scroll > .ui-table,
 .ui-table-scroll > .ui-table tbody td:not(.ui-table__identity, .ui-table__selection) { background-color: transparent; }
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
+}
 /* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
    it draws the band inward too rather than spending a halo across the card around it.
    It had no room of its own to draw in — the padding above is horizontal — which is the
@@ -387,7 +379,7 @@
 .ui-delta--success { color: var(--chip-success-ink); }
 .ui-delta--danger { color: var(--chip-danger-ink); }
 .ui-identity { min-height: 24px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; }
-.ui-identity__symbol { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
+.ui-identity__symbol { font-weight: var(--weight-semibold); }
 .ui-identity__name { white-space: normal; max-width: var(--panel-sm); }
 .ui-identity__logo { width: 24px; height: 24px; flex: 0 0 24px; position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--text-xs); }
 .ui-identity__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@@ -500,10 +492,8 @@ a.ui-identity:hover { text-decoration: underline; }
   .ui-table.ui-table--stack > tbody > tr {
     display: flex; flex-wrap: wrap; align-items: baseline;
     column-gap: var(--space-3); row-gap: var(--space-1);
-    /* The inset is on the row, not the table: the hover outline draws at the row's own
-       edge, so a pad on the table would put the outline back against the text (#71). It is
-       the step a dense cell already pays sideways, so the outline and the row separator keep
-       the clearance they had at the width above this one. */
+    /* The inset is on the row, not the table, so its hover fill and separator keep
+       their clearance at the width above this one. */
     padding: var(--space-3); border-bottom: 1px solid var(--border);
   }
   .ui-table.ui-table--stack > tbody > tr:last-child { border-bottom: 0; }
@@ -515,7 +505,21 @@ a.ui-identity:hover { text-decoration: underline; }
     display: block; width: auto; min-width: 0; max-width: 100%; height: auto;
     padding: 0; border-bottom: 0; white-space: normal; overflow-wrap: break-word;
   }
+  .ui-table.ui-table--stack.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+    background: transparent;
+  }
   .ui-table.ui-table--stack > tbody > tr > td.ui-table__long { flex: 0 0 100%; text-align: left; }
+  /* The head is gone, so an amount that names its column in `data-label` says it in front of
+     the figure, in the unit's size and body ink. */
+  .ui-table.ui-table--stack > tbody > tr > td[data-label]::before {
+    content: attr(data-label) / ""; margin-right: var(--space-1); font-size: var(--text-xs);
+  }
+  /* The cells of a stacked row are separate boxes with gaps between them, so a tint on each
+     would paint patches. The row paints one tint and the cells let it through. */
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) {
+    background: color-mix(in srgb, var(--accent) 12%, transparent); /* code-bg: inherit — this translucent wash leaves the chip on its opaque ground. */
+  }
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) > :is(td, th) { background: transparent; }
   /* A stacked row has no columns left to pin, stick or inset, and the identity's name is
      what the row is about — the fold hides it only because a pinned column is narrow. */
   .ui-table.ui-table--stack.ui-table--pinned > :where(thead, tbody) > tr > :where(.ui-table__identity, .ui-table__selection) {

package/src/styles/topbar.css

@@ -69,7 +69,11 @@
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .dtsw a:hover { color: var(--strong); }
-.dtsw a.cur { color: var(--strong); background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
+.dtsw a.cur { color: var(--accent-contrast); background: var(--accent); }
+:where(:root[data-theme="dark"]) .dtsw a.cur { color: var(--signal-contrast); }
+@media (forced-colors: active) {
+  .dtsw a.cur { forced-color-adjust: none; background: Highlight; color: HighlightText; --ring: var(--ring-width) solid CanvasText; }
+}
 .dtsw a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 /* Theme toggle — a single icon-only switch (no label). */
@@ -96,6 +100,7 @@
 
 /* Version switcher */
 .vsw { position: relative; }
+.vsw > .ui-dropdown { max-width: 100%; min-width: 0; }
 .vsw__btn {
   display: inline-flex;
   align-items: center;
@@ -117,16 +122,16 @@
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
 .vsw__btn:hover:not(:focus-visible) { border-color: var(--accent); }
 .vsw__btn:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
-.vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
   width: 8px; height: 8px;
   border-right: 1.6px solid var(--muted);
   border-bottom: 1.6px solid var(--muted);
-  transform: rotate(45deg) translateY(-1px);
+  transform: translateY(-2px) rotate(45deg);
   transition: transform var(--dur-fast) var(--ease);
 }
-.vsw.open .vsw__btn .car { transform: rotate(-135deg) translateY(2px); }
+.vsw.open .vsw__btn .car,
+.vsw .ui-dropdown.open .vsw__btn .car { transform: translateY(2px) rotate(-135deg); }
 .vsw__menu {
   position: absolute;
   top: calc(100% + 9px);
@@ -214,8 +219,12 @@
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */
 .vopt:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+/* The selected version carries the kit's menu tick, as `.ui-dropdown__tick` does for
+   every other menu; the badge keeps its own place beside it. */
+.vopt .vtick { margin-left: 8px; flex: none; display: none; color: var(--accent); margin-top: 1px; }
+.vopt .vtick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
+.vopt[aria-selected="true"] .vtick { display: inline-flex; }
 .vopt .vname { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
-.vopt .vmeta { font-size: var(--text-xs); color: var(--text); margin-top: 2px; }
 .vopt .vbadge {
   /* rank: chip */
   font-size: var(--text-xs);
@@ -231,10 +240,8 @@
    the same neutral chip fill rather than the card surface — which, inside a panel that
    is itself lighter than a card, was darker than the ground it sat on. #453 */
 .vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
-/* The version label drops at the shell breakpoint.
-   Anchor the menu to its right edge so a closed panel cannot widen the page. */
+/* Anchor the menu to its right edge so a closed panel cannot widen the page. */
 @media (max-width: 720px) {
-  .vsw__btn .lbl { display: none; }
   .vsw__menu { left: auto; right: 0; }
 }
 
@@ -273,7 +280,7 @@
      end inset. A long label gives way to an ellipsis, and 8px always stays between the
      two controls. */
   .topbar__in > .vsw { grid-area: 2 / 2 / 3 / -1; justify-self: end; min-width: 0; max-width: calc(100% - var(--space-2)); margin-left: var(--space-2); }
-  .vsw__btn { max-width: 100%; }
+  .vsw__btn { max-width: 100%; min-width: 0; }
   .vsw__btn .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .vsw__btn .car { flex: none; }
   /* Two 44px rows, an 8px gap, the 4px and 3px insets and the bottom border. */
@@ -304,6 +311,8 @@
    accent band is the second band #578 round r34 took off the focus rules, and a
    pointer resting on a focused control would put it back. One indicator, which is
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
+/* The React menu puts the dropdown trigger's pill padding and flex row on the avatar. */
+.acct .avatar { display: grid; padding: 0; }
 .acct .avatar:hover:not(:focus-visible) { border-color: var(--accent); }
 .avatar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 /* The account button holding an Avatar: the part paints the circle in the reader's hue and
@@ -376,6 +385,8 @@
   border-radius: 14px 14px 0 0;
   display: flex; align-items: center; gap: 11px;
 }
+.amenu .ui-dropdown__sep { margin: 5px 0; }
+.amenu .ahead .avatar { cursor: default; }
 .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
 .amenu .ahead .anm { color: var(--strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu .ahead .aem { color: var(--text); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -388,6 +399,10 @@
 .amenu a:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
 .amenu a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 .amenu a.cur { color: var(--accent); }
+/* A custom account row keeps the Dropdown's disabled state without its row shape. */
+.amenu a.is-disabled { /* muted-ink: state — unavailable account page */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
+/* The SVG takes the row's height; its React wrapper adds no line box. */
+.amenu a > span[aria-hidden="true"] { display: contents; }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
 .amenu a.aout { color: var(--text); }

package/src/tokens/tokens.css

@@ -574,10 +574,7 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
 .ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
 .ui-toast,
 .ui-toast--soft,
 .ui-toast--outline,
@@ -598,10 +595,14 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td { --code-bg: var(--table-code-bg); }
+.ui-table--zebra tbody tr:nth-child(even) td { --code-bg: var(--table-code-bg); }
+/* A neutral hovered row gives an inline code chip the card surface. The step from
+ * --surface-2 clears 1.1:1 in both themes, even when the table follows a card. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th),
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  --code-bg: var(--surface);
+}
 .ui-card--accent,
 .ui-card--live,
 .ui-snippet--reveal { --code-bg: var(--surface); }