@apliteni/apliteni-ui 0.137.0 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.137.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:
@@ -976,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

@@ -560,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';
@@ -598,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. */
@@ -1201,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';
@@ -1248,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 })
@@ -1882,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: [
@@ -2440,6 +2440,7 @@ var SEARCH_DEFAULTS = {
 function Dropdown({
   label,
   value,
+  selectedValue,
   placeholder = "Select\u2026",
   variant,
   items,
@@ -2584,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));
@@ -2770,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();
@@ -3595,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 }),
@@ -4341,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);
         }) })
       ] }),
@@ -5201,10 +5203,145 @@ var AccentPicker = forwardRef10(function AccentPicker2({
   );
 });
 
-// src/NavTabs.tsx
-import { Fragment as Fragment17, 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";
+// 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 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,
@@ -5222,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,
@@ -5235,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(Fragment18, { 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(Fragment17, { 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);
       })
     }
   );
@@ -5256,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 Fragment19, 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,
@@ -5265,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(Fragment19, { 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(" "),
@@ -5297,6 +5434,7 @@ var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
   AccentPicker,
+  AccountMenu,
   AppShell,
   Avatar,
   BackLink,
@@ -5356,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/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); }