@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/components/navigation/SidePanel.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from 'vue'
+import IconButton from '../buttons/IconButton.vue'
+import { chromeTone } from './chrome-tones.js'
+// Side panel docked beside the Sidebar (Documents, Management). 240px, same tone as the rail; opens by growing from 0 while
+// its content fades in from 12px left. 56px header: title + #actions slot + close (@close). Default slot is the scrolling body.
+const props = defineProps({ open: { type: Boolean, default: true }, title: String, closable: { type: Boolean, default: true }, closeLabel: { type: String, default: 'Close' }, closeIcon: { type: String, default: 'x' }, tone: { type: String, default: 'recessed' }, color: String, width: { type: Number, default: 240 }, size: String, style: Object })
+const emit = defineEmits(['close'])
+const t = computed(() => chromeTone(props.tone, props.color))
+</script>
+<template>
+  <div :aria-hidden="open ? undefined : 'true'" :style="{ width: (open ? width : 0) + 'px', flexShrink: 0, overflow: 'hidden', height: '100%', transition: 'width var(--dur-slow) var(--ease-out)' }">
+    <div :data-theme="t.theme" :data-size="size" :style="{ ...t.vars, width: width + 'px', height: '100%', background: 'var(--sb-bg)', borderRight: '1px solid var(--sb-border)', color: 'var(--sb-text)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', opacity: open ? 1 : 0, transform: open ? 'none' : 'translateX(-12px)', transition: 'opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out)', pointerEvents: open ? 'auto' : 'none', ...style }">
+      <div style="height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 0 16px;box-sizing:border-box;flex-shrink:0">
+        <span style="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);font-weight:var(--weight-medium);color:var(--text-heading)">{{ title }}</span>
+        <div data-size="md" style="display:flex;align-items:center;gap:2px;flex-shrink:0"><slot name="actions" /><IconButton v-if="closable" :icon="closeIcon" muted :label="closeLabel" :title="closeLabel" @click="emit('close')" /></div>
+      </div>
+      <div style="flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column"><slot /></div>
+    </div>
+  </div>
+</template>

package/components/navigation/Sidebar.d.ts

@@ -1,29 +1,45 @@
 import * as React from "react";
 /**
- * App sidebar — 240px expanded / 64px icon rail. Logo header, nav, expandable sections, pinned footer.
+ * App sidebar — 240px expanded / 64px icon rail. 56px brand head (no rule), a 2px-gap nav list, pinned footer items and a version line.
+ * Tones: "recessed" (grey rail, the active item is a white tile with a hairline ring — the default), "flush" (white rail),
+ * "contrast" (the rail scoped to the dark theme), "custom" (dark scope on a solid colour; see SIDEBAR_COLORS).
  * @startingPoint section="Chrome" subtitle="240px app sidebar with icon-rail collapse" viewport="240x600"
  */
 export interface SidebarItem {
-  icon: string;
+  icon?: string;
   label: string;
-  children?: SidebarItem[];
-  /** Expand this section initially */
-  open?: boolean;
+  /** Draws a chevron on the right: the item opens a SidePanel */
+  trailing?: boolean;
+  children?: (SidebarItem | string)[];
 }
 export interface SidebarProps {
+  /** Default KEYBRICKS_NAV */
   items?: SidebarItem[];
+  /** Default KEYBRICKS_NAV_FOOTER (Management, Knowledge Base) */
   footerItems?: SidebarItem[];
   /** Active item label */
   active?: string;
   onSelect?: (label: string) => void;
   collapsed?: boolean;
-  /** Renders the "Collapse" item */
+  /** Renders the Collapse / Expand item at the top of the list. Vue: @toggle-collapse (hide it with :show-toggle="false"). */
   onToggleCollapse?: () => void;
   logo?: string;
   brand?: string;
+  /** Version line under the footer items ("Version 2.4.0"); the rail shows "v2.4.0" */
+  version?: string;
+  tone?: "recessed" | "flush" | "contrast" | "custom";
+  /** For tone "custom": a SIDEBAR_COLORS key (slate, navy, indigo, violet, plum, wine, forest, teal, umber, charcoal) or any hex */
+  color?: string;
+  labels?: { collapse?: string; expand?: string };
   height?: number | string;
   style?: React.CSSProperties;
 }
 export declare function Sidebar(props: SidebarProps): JSX.Element;
-/** The product's real nav model. */
+/** The product's main nav (Home … Task Execution); Documents has trailing: true. */
 export declare const KEYBRICKS_NAV: SidebarItem[];
+/** Pinned footer: Management (trailing) and Knowledge Base. */
+export declare const KEYBRICKS_NAV_FOOTER: SidebarItem[];
+/** Groups for the Management side panel. */
+export declare const KEYBRICKS_MGMT: { icon: string; label: string; children?: string[] }[];
+/** The ten custom rail colours. */
+export declare const SIDEBAR_COLORS: Record<"slate" | "navy" | "indigo" | "violet" | "plum" | "wine" | "forest" | "teal" | "umber" | "charcoal", string>;

package/components/navigation/Sidebar.jsx

@@ -1,75 +1,57 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, KEYBRICKS_MGMT } from "./nav-model.js";
+import { chromeTone, SIDEBAR_COLORS } from "./chrome-tones.js";
 
-function NavItem({ icon, label, active, indent, collapsed, badge, onClick }) {
+const LABEL = { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "18px", letterSpacing: "var(--tracking-base)", fontWeight: "var(--weight-medium)" };
+
+/* One rail row: 36px min, radius-md, 16px icon, medium label, optional trailing chevron (the item opens a side panel). */
+function NavItem({ icon, label, active, indent, collapsed, trailing, onClick }) {
   const [hover, setHover] = React.useState(false);
   return (
-    <div role="button" tabIndex={0} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{ height: indent ? "var(--h-subnav-item)" : "var(--h-nav-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", justifyContent: collapsed ? "center" : "flex-start", gap: 10, padding: collapsed ? "8px 10px" : indent ? "6px 10px" : "8px 10px", boxSizing: "border-box", cursor: "pointer", background: active ? "var(--bg-active)" : hover ? "var(--bg-hover)" : "transparent", color: active ? "var(--text-heading)" : "var(--text-body)", transition: "var(--t-hover)" }}>
-      <Icon name={icon} size={indent ? 14 : 16} />
-      {!collapsed ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", whiteSpace: "nowrap", flex: 1 }}>{label}</span> : null}
-      {!collapsed && badge ? badge : null}
+    <div role="button" tabIndex={0} title={collapsed ? label : undefined} aria-current={active ? "page" : undefined} onClick={onClick} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick && onClick(); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+      style={{ minHeight: indent ? 32 : 36, borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", justifyContent: collapsed ? "center" : "flex-start", gap: 10, padding: indent ? "6px 10px" : "8px 10px", boxSizing: "border-box", cursor: "pointer", userSelect: "none", background: active ? "var(--sb-active)" : hover ? "var(--sb-hover)" : "transparent", color: active ? "var(--sb-active-text)" : "var(--sb-text)", boxShadow: active ? "var(--sb-shadow)" : "none", transition: "var(--t-hover)" }}>
+      {icon ? <span style={{ display: "inline-flex", flexShrink: 0 }}><Icon name={icon} size={indent ? 14 : 16} /></span> : null}
+      {!collapsed ? <span style={LABEL}>{label}</span> : null}
+      {!collapsed && trailing ? <span style={{ display: "inline-flex", flexShrink: 0, opacity: 0.6 }}><Icon name="chevron-right" size={14} /></span> : null}
     </div>
   );
 }
 
 /**
- * Keybricks app sidebar — 240px (collapsed: 64px icon rail). White, hairline right border.
- * items: [{icon,label,children:[{icon,label}]}]; active by label; footer items pinned.
+ * Keybricks app sidebar — 240px, 64px icon rail when collapsed. A 56px brand head (no rule), a 2px-gap list, pinned footer items and a version line.
+ * tone: "recessed" (grey, default) | "flush" (white) | "contrast" (dark) | "custom" (+ color: a SIDEBAR_COLORS key or hex).
+ * items / footerItems: [{ icon, label, trailing?, children? }] — trailing draws a chevron (the item opens a SidePanel); children make a collapsible group.
  */
-export function Sidebar({ items = [], footerItems = [{ icon: "circle-help", label: "Help" }, { icon: "settings", label: "Settings" }, { icon: "moon", label: "Dark Mode" }], active, onSelect, collapsed = false, onToggleCollapse, logo = "assets/keybricks-logo.png", brand = "Keybricks", height = "100%", style }) {
-  const [openSections, setOpen] = React.useState(() => items.filter((i) => i.children && (i.open || (i.children.some((c) => c.label === active)))).map((i) => i.label));
-  const toggleSection = (l) => setOpen(openSections.includes(l) ? openSections.filter((x) => x !== l) : [...openSections, l]);
+export function Sidebar({ items = KEYBRICKS_NAV, footerItems = KEYBRICKS_NAV_FOOTER, active, onSelect, collapsed = false, onToggleCollapse, logo = "assets/keybricks-logo.png", brand = "Keybricks", version, tone = "recessed", color, labels, height = "100%", style }) {
+  const L = { collapse: "Collapse", expand: "Expand", ...labels };
+  const t = chromeTone(tone, color);
+  const [open, setOpen] = React.useState(() => items.filter((i) => i.children && i.children.some((c) => (c.label || c) === active)).map((i) => i.label));
+  const toggle = (l) => setOpen(open.includes(l) ? open.filter((x) => x !== l) : [...open, l]);
+  const pick = (l) => onSelect && onSelect(l);
+  const list = (arr) => arr.map((it) => it.children ? (
+    <div key={it.label} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      <NavItem icon={it.icon} label={it.label} collapsed={collapsed} trailing={false} active={collapsed && it.children.some((c) => (c.label || c) === active)} onClick={() => (collapsed ? pick(it.label) : toggle(it.label))} />
+      {!collapsed && open.includes(it.label) ? <div style={{ marginLeft: 24, display: "flex", flexDirection: "column", gap: 2 }}>{it.children.map((c) => { const lb = c.label || c; return <NavItem key={lb} icon={c.icon} label={lb} indent active={active === lb} onClick={() => pick(lb)} />; })}</div> : null}
+    </div>
+  ) : <NavItem key={it.label} icon={it.icon} label={it.label} collapsed={collapsed} trailing={it.trailing} active={active === it.label} onClick={() => pick(it.label)} />);
   return (
-    <aside style={{ width: collapsed ? "var(--rail-w)" : "var(--sidebar-w)", height, background: "var(--bg-surface)", borderRight: "1px solid var(--border-card)", display: "flex", flexDirection: "column", boxSizing: "border-box", flexShrink: 0, transition: "width .15s ease", ...style }}>
-      <div style={{ height: "var(--topbar-h)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", gap: 10, padding: "0 16px", boxSizing: "border-box", justifyContent: collapsed ? "center" : "flex-start", flexShrink: 0 }}>
-        <img src={logo} alt="" style={{ width: 24, height: 24, objectFit: "contain" }} />
-        {!collapsed ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-lg)", letterSpacing: "-.609px", color: "var(--text-primary)" }}>{brand}</span> : null}
+    <aside data-theme={t.theme} style={{ ...t.vars, width: collapsed ? "var(--rail-w)" : "var(--sidebar-w)", height, background: "var(--sb-bg)", borderRight: "1px solid var(--sb-border)", color: "var(--sb-text)", display: "flex", flexDirection: "column", boxSizing: "border-box", flexShrink: 0, transition: "width .15s ease", ...style }}>
+      <div style={{ height: "var(--topbar-h)", display: "flex", alignItems: "center", gap: 10, padding: "0 16px", boxSizing: "border-box", justifyContent: collapsed ? "center" : "flex-start", flexShrink: 0 }}>
+        <img src={logo} alt="" style={{ width: 24, height: 24, objectFit: "contain", flexShrink: 0 }} />
+        {!collapsed ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", fontWeight: "var(--weight-semibold)", color: "var(--sb-brand)", whiteSpace: "nowrap" }}>{brand}</span> : null}
       </div>
-      <nav style={{ flex: 1, overflowY: "auto", padding: 8, display: "flex", flexDirection: "column", gap: 0 }}>
-        {onToggleCollapse ? <NavItem icon="panel-left" label="Collapse" collapsed={collapsed} onClick={onToggleCollapse} /> : null}
-        {items.map((it) => it.children ? (
-          <div key={it.label}>
-            <div role="button" tabIndex={0} data-wash="" onClick={() => toggleSection(it.label)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleSection(it.label); } }} style={{ background: "var(--wash, transparent)", transition: "var(--t-hover)", height: "var(--h-subnav-item)", display: "flex", alignItems: "center", gap: 10, padding: collapsed ? "6px 10px" : "6px 10px", justifyContent: collapsed ? "center" : "flex-start", cursor: "pointer", color: "var(--text-body)", borderRadius: "var(--radius-md)", boxSizing: "border-box" }}>
-              <Icon name={it.icon} size={16} />
-              {!collapsed ? <><span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", flex: 1 }}>{it.label}</span><Icon name={openSections.includes(it.label) ? "chevron-up" : "chevron-down"} size={14} /></> : null}
-            </div>
-            {!collapsed && openSections.includes(it.label) ? (
-              <div style={{ marginLeft: 24, display: "flex", flexDirection: "column", gap: 2, paddingTop: 2 }}>
-                {it.children.map((c) => <NavItem key={c.label} icon={c.icon} label={c.label} indent active={active === c.label} onClick={() => onSelect && onSelect(c.label)} />)}
-              </div>
-            ) : null}
-          </div>
-        ) : (
-          <NavItem key={it.label} icon={it.icon} label={it.label} collapsed={collapsed} active={active === it.label} onClick={() => onSelect && onSelect(it.label)} />
-        ))}
+      <nav style={{ flex: 1, overflowY: "auto", overflowX: "hidden", padding: 8, display: "flex", flexDirection: "column", gap: 2 }}>
+        {onToggleCollapse ? <NavItem icon={collapsed ? "panel-left" : "chevron-left"} label={collapsed ? L.expand : L.collapse} collapsed={collapsed} onClick={onToggleCollapse} /> : null}
+        {list(items)}
       </nav>
-      <div style={{ borderTop: "1px solid var(--border-card)", padding: 8, display: "flex", flexDirection: "column", flexShrink: 0 }}>
-        {footerItems.map((f) => <NavItem key={f.label} icon={f.icon} label={f.label} collapsed={collapsed} onClick={() => onSelect && onSelect(f.label)} />)}
+      <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 2, flexShrink: 0 }}>
+        {list(footerItems)}
+        {version ? <span title={version} style={{ padding: collapsed ? "8px 0 4px" : "8px 10px 4px", textAlign: collapsed ? "center" : "left", fontFamily: "var(--font-sans)", fontSize: collapsed ? "var(--text-glyph-min)" : "var(--text-xs)", lineHeight: collapsed ? "var(--leading-2xs)" : "var(--leading-xs)", color: "var(--sb-muted)", whiteSpace: "nowrap", overflow: "hidden" }}>{collapsed ? "v" + String(version).split(" ").pop().replace(/^v/i, "") : version}</span> : null}
       </div>
     </aside>
   );
 }
 
-/** Default Keybricks nav model (Home dashboard). */
-export const KEYBRICKS_NAV = [
-  { icon: "house", label: "Home" },
-  { icon: "file-text", label: "Documents" },
-  { icon: "layout-grid", label: "Business Intelligence" },
-  { icon: "database", label: "Data Integration" },
-  { icon: "scale", label: "Reconciliation" },
-  { icon: "network", label: "Consolidation" },
-  {
-    icon: "folder-cog", label: "Management", children: [
-      { icon: "box", label: "Modeling" },
-      { icon: "workflow", label: "Workflow" },
-      { icon: "shield", label: "Security Management" },
-      { icon: "refresh-cw", label: "System Migration" },
-      { icon: "chart-column", label: "Business Logic" },
-      { icon: "list-todo", label: "Tasks Management" },
-      { icon: "circle-check", label: "Validation Rules" },
-      { icon: "settings-2", label: "Control Center" },
-      { icon: "network", label: "Reconciliation" },
-    ],
-  },
-];
+/** Nav models and tones — defined in framework-neutral modules, shared with the Vue entry. */
+export { KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, KEYBRICKS_MGMT, SIDEBAR_COLORS };

package/components/navigation/Sidebar.vue

@@ -1,54 +1,50 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-
-/**
- * Keybricks app sidebar — 240px (collapsed: 64px icon rail). White, hairline right border.
- * items: [{icon,label,children:[{icon,label}]}]; active by label; footer items pinned.
- */
-const props = defineProps({
-  items: { type: Array, default: () => [] },
-  footerItems: { type: Array, default: () => [{ icon: 'circle-help', label: 'Help' }, { icon: 'settings', label: 'Settings' }, { icon: 'moon', label: 'Dark Mode' }] },
-  active: String, collapsed: { type: Boolean, default: false },
-  logo: { type: String, default: 'assets/keybricks-logo.png' }, brand: { type: String, default: 'Keybricks' },
-  height: { type: [String, Number], default: '100%' }, style: Object, canCollapse: Boolean,
-})
+import { KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER } from './nav-model.js'
+import { chromeTone } from './chrome-tones.js'
+// Keybricks app sidebar — 240px, 64px icon rail when collapsed. 56px brand head (no rule), 2px-gap list, pinned footer, version line.
+// tone: "recessed" (grey, default) | "flush" (white) | "contrast" (dark) | "custom" (+ color: a SIDEBAR_COLORS key or hex).
+// items / footerItems: [{ icon, label, trailing?, children? }] — trailing draws a chevron (the item opens a SidePanel); children make a collapsible group.
+const props = defineProps({ items: { type: Array, default: () => KEYBRICKS_NAV }, footerItems: { type: Array, default: () => KEYBRICKS_NAV_FOOTER }, active: String, collapsed: Boolean, logo: { type: String, default: 'assets/keybricks-logo.png' }, brand: { type: String, default: 'Keybricks' }, version: String, tone: { type: String, default: 'recessed' }, color: String, labels: Object, height: { type: String, default: '100%' }, showToggle: { type: Boolean, default: true }, style: Object })
 const emit = defineEmits(['select', 'toggleCollapse'])
-const openSections = ref(props.items.filter(i => i.children && (i.open || i.children.some(c => c.label === props.active))).map(i => i.label))
-function toggleSection(l) { openSections.value = openSections.value.includes(l) ? openSections.value.filter(x => x !== l) : [...openSections.value, l] }
-function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-item)' : 'var(--h-nav-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '10px', padding: indent ? '6px 10px' : '8px 10px', boxSizing: 'border-box', cursor: 'pointer', background: active ? 'var(--bg-active)' : 'transparent', color: active ? 'var(--text-heading)' : 'var(--text-body)', transition: 'var(--t-hover)' } }
+const L = computed(() => ({ collapse: 'Collapse', expand: 'Expand', ...(props.labels || {}) }))
+const t = computed(() => chromeTone(props.tone, props.color))
+const hover = ref(null)
+const open = ref(props.items.filter(i => i.children && i.children.some(c => (c.label || c) === props.active)).map(i => i.label))
+const toggle = (l) => { open.value = open.value.includes(l) ? open.value.filter(x => x !== l) : [...open.value, l] }
+const lb = (c) => c.label || c
+const LABEL = { flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: '18px', letterSpacing: 'var(--tracking-base)', fontWeight: 'var(--weight-medium)' }
+function row(key, active, indent) { return { minHeight: indent ? '32px' : '36px', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: props.collapsed ? 'center' : 'flex-start', gap: '10px', padding: indent ? '6px 10px' : '8px 10px', boxSizing: 'border-box', cursor: 'pointer', userSelect: 'none', background: active ? 'var(--sb-active)' : hover.value === key ? 'var(--sb-hover)' : 'transparent', color: active ? 'var(--sb-active-text)' : 'var(--sb-text)', boxShadow: active ? 'var(--sb-shadow)' : 'none', transition: 'var(--t-hover)' } }
+function key(e, fn) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fn() } }
+const groups = computed(() => [{ id: 'main', list: props.items }, { id: 'foot', list: props.footerItems }])
+const versionText = computed(() => props.collapsed && props.version ? 'v' + String(props.version).split(' ').pop().replace(/^v/i, '') : props.version)
 </script>
 <template>
-  <aside :style="{ width: collapsed ? 'var(--rail-w)' : 'var(--sidebar-w)', height, background: 'var(--bg-surface)', borderRight: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, transition: 'width .15s ease', ...style }">
-    <div :style="{ height: 'var(--topbar-h)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', gap: '10px', padding: '0 16px', boxSizing: 'border-box', justifyContent: collapsed ? 'center' : 'flex-start', flexShrink: 0 }">
-      <img :src="logo" alt="" style="width:24px;height:24px;object-fit:contain" />
-      <span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:-.609px;color:var(--text-primary)">{{ brand }}</span>
+  <aside :data-theme="t.theme" :style="{ ...t.vars, width: collapsed ? 'var(--rail-w)' : 'var(--sidebar-w)', height, background: 'var(--sb-bg)', borderRight: '1px solid var(--sb-border)', color: 'var(--sb-text)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, transition: 'width .15s ease', ...style }">
+    <div :style="{ height: 'var(--topbar-h)', display: 'flex', alignItems: 'center', gap: '10px', padding: '0 16px', boxSizing: 'border-box', justifyContent: collapsed ? 'center' : 'flex-start', flexShrink: 0 }">
+      <img :src="logo" alt="" style="width:24px;height:24px;object-fit:contain;flex-shrink:0" />
+      <span v-if="!collapsed" style="font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);font-weight:var(--weight-semibold);color:var(--sb-brand);white-space:nowrap">{{ brand }}</span>
     </div>
-    <nav style="flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:0">
-      <div v-if="canCollapse" role="button" tabindex="0" @click="emit('toggleCollapse')" :style="itemStyle(false, false)"><Icon name="panel-left" :size="16" /><span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);white-space:nowrap;flex:1">Collapse</span></div>
-      <template v-for="it in items" :key="it.label">
-        <div v-if="it.children">
-          <div role="button" tabindex="0" data-wash="" @click="toggleSection(it.label)" @keydown.enter.prevent="toggleSection(it.label)" @keydown.space.prevent="toggleSection(it.label)" :style="{ background: 'var(--wash, transparent)', transition: 'var(--t-hover)', height: 'var(--h-subnav-item)', display: 'flex', alignItems: 'center', gap: '10px', padding: '6px 10px', justifyContent: collapsed ? 'center' : 'flex-start', cursor: 'pointer', color: 'var(--text-body)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box' }">
-            <Icon :name="it.icon" :size="16" />
-            <template v-if="!collapsed"><span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);flex:1">{{ it.label }}</span><Icon :name="openSections.includes(it.label) ? 'chevron-up' : 'chevron-down'" :size="14" /></template>
+    <template v-for="g in groups" :key="g.id">
+      <component :is="g.id === 'main' ? 'nav' : 'div'" :style="g.id === 'main' ? { flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '8px', display: 'flex', flexDirection: 'column', gap: '2px' } : { padding: '8px', display: 'flex', flexDirection: 'column', gap: '2px', flexShrink: 0 }">
+        <div v-if="g.id === 'main' && showToggle" role="button" tabindex="0" :title="collapsed ? L.expand : undefined" :style="row('__toggle', false)" @click="emit('toggleCollapse')" @keydown="e => key(e, () => emit('toggleCollapse'))" @mouseenter="hover = '__toggle'" @mouseleave="hover = null">
+          <span style="display:inline-flex;flex-shrink:0"><Icon :name="collapsed ? 'panel-left' : 'chevron-left'" :size="16" /></span><span v-if="!collapsed" :style="LABEL">{{ collapsed ? L.expand : L.collapse }}</span>
+        </div>
+        <template v-for="it in g.list" :key="it.label">
+          <div role="button" tabindex="0" :title="collapsed ? it.label : undefined" :aria-current="active === it.label ? 'page' : undefined" :style="row(it.label, active === it.label || (collapsed && it.children && it.children.some(c => lb(c) === active)))" @click="it.children && !collapsed ? toggle(it.label) : emit('select', it.label)" @keydown="e => key(e, () => it.children && !collapsed ? toggle(it.label) : emit('select', it.label))" @mouseenter="hover = it.label" @mouseleave="hover = null">
+            <span v-if="it.icon" style="display:inline-flex;flex-shrink:0"><Icon :name="it.icon" :size="16" /></span>
+            <span v-if="!collapsed" :style="LABEL">{{ it.label }}</span>
+            <span v-if="!collapsed && it.trailing" style="display:inline-flex;flex-shrink:0;opacity:.6"><Icon name="chevron-right" :size="14" /></span>
           </div>
-          <div v-if="!collapsed && openSections.includes(it.label)" style="margin-left:24px;display:flex;flex-direction:column;gap:2px;padding-top:2px">
-            <div v-for="c in it.children" :key="c.label" role="button" tabindex="0" @click="emit('select', c.label)" :style="itemStyle(active === c.label, true)"><Icon :name="c.icon" :size="14" /><span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);white-space:nowrap;flex:1">{{ c.label }}</span></div>
+          <div v-if="it.children && !collapsed && open.includes(it.label)" style="margin-left:24px;display:flex;flex-direction:column;gap:2px">
+            <div v-for="c in it.children" :key="lb(c)" role="button" tabindex="0" :aria-current="active === lb(c) ? 'page' : undefined" :style="row('c:' + lb(c), active === lb(c), true)" @click="emit('select', lb(c))" @keydown="e => key(e, () => emit('select', lb(c)))" @mouseenter="hover = 'c:' + lb(c)" @mouseleave="hover = null">
+              <span v-if="c.icon" style="display:inline-flex;flex-shrink:0"><Icon :name="c.icon" :size="14" /></span><span :style="LABEL">{{ lb(c) }}</span>
+            </div>
           </div>
-        </div>
-        <div v-else role="button" tabindex="0" @click="emit('select', it.label)" :style="itemStyle(active === it.label, false)"><Icon :name="it.icon" :size="16" /><span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);white-space:nowrap;flex:1">{{ it.label }}</span></div>
-      </template>
-    </nav>
-    <div style="border-top:1px solid var(--border-card);padding:8px;display:flex;flex-direction:column;flex-shrink:0">
-      <div v-for="f in footerItems" :key="f.label" role="button" tabindex="0" @click="emit('select', f.label)" :style="itemStyle(false, false)"><Icon :name="f.icon" :size="16" /><span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);white-space:nowrap;flex:1">{{ f.label }}</span></div>
-    </div>
+        </template>
+        <span v-if="g.id === 'foot' && version" :title="version" :style="{ padding: collapsed ? '8px 0 4px' : '8px 10px 4px', textAlign: collapsed ? 'center' : 'left', fontFamily: 'var(--font-sans)', fontSize: collapsed ? 'var(--text-glyph-min)' : 'var(--text-xs)', lineHeight: collapsed ? 'var(--leading-2xs)' : 'var(--leading-xs)', color: 'var(--sb-muted)', whiteSpace: 'nowrap', overflow: 'hidden' }">{{ versionText }}</span>
+      </component>
+    </template>
   </aside>
 </template>
-
-<!-- KEYBRICKS_NAV — default Keybricks nav model (Home dashboard), same shape as Sidebar.jsx's export, for reference:
-export const KEYBRICKS_NAV = [
-  { icon: 'house', label: 'Home' }, { icon: 'file-text', label: 'Documents' },
-  { icon: 'layout-grid', label: 'Business Intelligence' }, { icon: 'database', label: 'Data Integration' },
-  { icon: 'scale', label: 'Reconciliation' }, { icon: 'network', label: 'Consolidation' },
-  { icon: 'folder-cog', label: 'Management', children: [ ... ] },
-] -->

package/components/navigation/TopBar.d.ts

@@ -1,14 +1,39 @@
 import * as React from "react";
-/** 56px top bar with bare search + bell + dark AI Assistant button. */
+/** 56px top bar: bare search left; dark AI Assistant, notifications, help and the user trigger right. The trigger opens a UserMenu. */
 export interface TopBarProps {
   placeholder?: string;
-  /** Replaces the default bell + AI Assistant pair */
-  actions?: React.ReactNode;
   /** Receives the new search string */
   onSearch?: (value: string) => void;
+  /** Replaces the whole right-hand group */
+  actions?: React.ReactNode;
+  aiLabel?: string;
+  onAi?: () => void;
+  onNotifications?: () => void;
+  onHelp?: () => void;
+  notificationsLabel?: string;
+  helpLabel?: string;
+  /** Shows the user trigger (name + chevron); omit to hide it */
+  user?: { name: string; email?: string };
+  /** Content of the menu the trigger opens (default: a UserMenu with name and email) */
+  userMenu?: React.ReactNode;
   style?: React.CSSProperties;
 }
 export declare function TopBar(props: TopBarProps): JSX.Element;
+/** Account menu: 288px, avatar + name + email, an Appearance row (icon-only light / dark / system SegmentedControl), then ContextMenu rows. */
+export interface UserMenuProps {
+  name?: string;
+  email?: string;
+  /** Label of the selected theme option ("Light" | "Dark" | "System" by default). The Appearance row shows when theme or onThemeChange is set. Vue: v-model:theme. */
+  theme?: string;
+  onThemeChange?: (label: string) => void;
+  themeOptions?: { label: string; icon: string }[];
+  appearanceLabel?: string;
+  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
+  onSelect?: (label: string) => void;
+  style?: React.CSSProperties;
+}
+export declare function UserMenu(props: UserMenuProps): JSX.Element;
+export declare const THEME_OPTIONS: { label: string; icon: string }[];
 /** Editor toolbar: back, 14px/600 title, "• Editing", right actions. */
 export interface PageToolbarProps {
   title?: string;

package/components/navigation/TopBar.jsx

@@ -3,17 +3,64 @@ import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
 import { Button } from "../buttons/Button.jsx";
 import { SearchInput } from "../forms/SearchInput.jsx";
+import { Avatar } from "../display/Avatar.jsx";
+import { SegmentedControl } from "../tabs/SegmentedControl.jsx";
+import { ContextMenu } from "../feedback/ContextMenu.jsx";
 
-/** 56px top bar: bare search left, bell + dark AI Assistant button right. */
-export function TopBar({ placeholder = "Search documents, workflows, data...", actions, onSearch, style }) {
+const TXT = { fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)" };
+const ONE = { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
+export const THEME_OPTIONS = [{ label: "Light", icon: "sun" }, { label: "Dark", icon: "moon" }, { label: "System", icon: "monitor" }];
+
+/** Account menu (opened from the TopBar's user trigger): avatar + name + email, an Appearance row with a light / dark / system switch, then rows.
+ *  theme: "Light" | "Dark" | "System" (labels of themeOptions). items: [{ icon, label, danger?, divider? }] → onSelect(label). */
+export function UserMenu({ name, email, theme, onThemeChange, themeOptions = THEME_OPTIONS, appearanceLabel = "Appearance", items = [], onSelect, style }) {
+  return (
+    <div role="menu" style={{ width: 288, background: "var(--bg-raised)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-menu)", padding: 4, boxSizing: "border-box", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 12px" }}>
+        <Avatar name={name} size={32} />
+        <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+          <span style={{ ...TXT, ...ONE, fontWeight: "var(--weight-medium)", color: "var(--text-heading)" }}>{name}</span>
+          {email ? <span style={{ ...ONE, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-secondary)" }}>{email}</span> : null}
+        </div>
+      </div>
+      <div style={{ height: 1, background: "var(--border-subtle)", margin: "4px 0" }} />
+      {onThemeChange || theme ? <div style={{ height: 40, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "0 12px", boxSizing: "border-box" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}><span style={{ display: "inline-flex", color: "var(--text-body)" }}><Icon name="sliders" size={16} /></span><span style={{ ...TXT, ...ONE, color: "var(--text-heading)" }}>{appearanceLabel}</span></div>
+        <SegmentedControl iconOnly options={themeOptions} value={theme} onChange={onThemeChange} style={{ flexShrink: 0 }} />
+      </div> : null}
+      {items.length ? <ContextMenu items={items} onSelect={onSelect} style={{ display: "flex", border: "none", boxShadow: "none", padding: 0, minWidth: 0, background: "transparent" }} /> : null}
+    </div>
+  );
+}
+
+/** 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
+ *  The user trigger opens a UserMenu below it (closes on outside click). actions replaces the right-hand group entirely. */
+export function TopBar({ placeholder = "Search documents, workflows, data...", onSearch, actions, aiLabel = "AI Assistant", onAi, onNotifications, onHelp, notificationsLabel = "Notifications", helpLabel = "Help", user, userMenu, style }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const off = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    const esc = (e) => { if (e.key === "Escape") setOpen(false); };
+    document.addEventListener("mousedown", off); document.addEventListener("keydown", esc);
+    return () => { document.removeEventListener("mousedown", off); document.removeEventListener("keydown", esc); };
+  }, [open]);
+  const [hover, setHover] = React.useState(false);
   return (
-    <header style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 24px", boxSizing: "border-box", flexShrink: 0, ...style }}>
-      <SearchInput bare placeholder={placeholder} onChange={onSearch} style={{ width: 576, maxWidth: "48%" }} />
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+    <header style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "0 24px", boxSizing: "border-box", flexShrink: 0, minWidth: 0, position: "relative", ...style }}>
+      <SearchInput bare placeholder={placeholder} onChange={onSearch} style={{ flex: "0 1 576px", minWidth: 0 }} />
+      <div ref={ref} style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
         {actions || (<>
-          <IconButton icon="bell" size="lg" />
-          <Button variant="dark" icon="sparkles">AI Assistant</Button>
+          <Button variant="dark" icon="ai" onClick={onAi}>{aiLabel}</Button>
+          <IconButton icon="bell" label={notificationsLabel} title={notificationsLabel} onClick={onNotifications} />
+          <IconButton icon="circle-help" label={helpLabel} title={helpLabel} onClick={onHelp} />
+          {user ? <div role="button" tabIndex={0} aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(!open)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(!open); } }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+            style={{ height: 32, display: "flex", alignItems: "center", gap: 8, padding: "0 8px 0 10px", borderRadius: "var(--radius-md)", cursor: "pointer", userSelect: "none", background: open ? "var(--bg-active)" : hover ? "var(--bg-hover)" : "transparent", transition: "var(--t-hover)" }}>
+            <span style={{ ...TXT, fontWeight: "var(--weight-medium)", color: "var(--text-heading)", whiteSpace: "nowrap" }}>{user.name}</span>
+            <span style={{ display: "inline-flex", color: "var(--text-muted)" }}><Icon name="chevron-down" size={16} /></span>
+          </div> : null}
         </>)}
+        {open && user ? <div style={{ position: "absolute", right: 24, top: 52, zIndex: "var(--z-menu)" }}>{userMenu || <UserMenu name={user.name} email={user.email} />}</div> : null}
       </div>
     </header>
   );

package/components/navigation/TopBar.vue

@@ -1,19 +1,37 @@
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
 import Button from '../buttons/Button.vue'
 import SearchInput from '../forms/SearchInput.vue'
-// 56px top bar: bare search left, bell + dark AI Assistant button right.
-defineProps({ placeholder: { type: String, default: 'Search documents, workflows, data...' }, style: Object })
-const emit = defineEmits(['search'])
+import UserMenu from './UserMenu.vue'
+// 56px top bar: bare search on the left; AI Assistant (dark), notifications, help and the user trigger on the right.
+// The user trigger opens a UserMenu below it (closes on outside click / Escape); #user-menu slot replaces its content.
+// #actions slot replaces the whole right-hand group.
+const props = defineProps({ placeholder: { type: String, default: 'Search documents, workflows, data...' }, aiLabel: { type: String, default: 'AI Assistant' }, notificationsLabel: { type: String, default: 'Notifications' }, helpLabel: { type: String, default: 'Help' }, user: Object, style: Object })
+const emit = defineEmits(['search', 'ai', 'notifications', 'help'])
+const open = ref(false), hover = ref(false), root = ref(null)
+const off = (e) => { if (open.value && root.value && !root.value.contains(e.target)) open.value = false }
+const esc = (e) => { if (e.key === 'Escape') open.value = false }
+onMounted(() => { document.addEventListener('mousedown', off); document.addEventListener('keydown', esc) })
+onUnmounted(() => { document.removeEventListener('mousedown', off); document.removeEventListener('keydown', esc) })
+function key(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open.value = !open.value } }
 </script>
 <template>
-  <header :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px', boxSizing: 'border-box', flexShrink: 0, ...style }">
-    <SearchInput bare :placeholder="placeholder" @update:modelValue="v => emit('search', v)" style="width:576px;max-width:48%" />
-    <div style="display:flex;align-items:center;gap:8px">
+  <header :style="{ height: 'var(--topbar-h)', background: 'var(--bg-surface)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '0 24px', boxSizing: 'border-box', flexShrink: 0, minWidth: 0, position: 'relative', ...style }">
+    <SearchInput bare :placeholder="placeholder" @update:modelValue="v => emit('search', v)" style="flex:0 1 576px;min-width:0" />
+    <div ref="root" style="display:flex;align-items:center;gap:8px;flex-shrink:0">
       <slot name="actions">
-        <IconButton icon="bell" size="lg" />
-        <Button variant="dark" icon="sparkles">AI Assistant</Button>
+        <Button variant="dark" icon="ai" @click="emit('ai')">{{ aiLabel }}</Button>
+        <IconButton icon="bell" :label="notificationsLabel" :title="notificationsLabel" @click="emit('notifications')" />
+        <IconButton icon="circle-help" :label="helpLabel" :title="helpLabel" @click="emit('help')" />
+        <div v-if="user" role="button" tabindex="0" aria-haspopup="menu" :aria-expanded="open" @click="open = !open" @keydown="key" @mouseenter="hover = true" @mouseleave="hover = false"
+          :style="{ height: '32px', display: 'flex', alignItems: 'center', gap: '8px', padding: '0 8px 0 10px', borderRadius: 'var(--radius-md)', cursor: 'pointer', userSelect: 'none', background: open ? 'var(--bg-active)' : hover ? 'var(--bg-hover)' : 'transparent', transition: 'var(--t-hover)' }">
+          <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);font-weight:var(--weight-medium);color:var(--text-heading);white-space:nowrap">{{ user.name }}</span>
+          <span style="display:inline-flex;color:var(--text-muted)"><Icon name="chevron-down" :size="16" /></span>
+        </div>
       </slot>
+      <div v-if="open && user" style="position:absolute;right:24px;top:52px;z-index:var(--z-menu)"><slot name="user-menu"><UserMenu :name="user.name" :email="user.email" :show-appearance="false" /></slot></div>
     </div>
   </header>
 </template>

package/components/navigation/Tree.jsx

@@ -165,7 +165,7 @@ function Row({ item, state, cfg, api }) {
           <Highlight text={titleOf(node)} query={cfg.searchValue} />
         </span>
         {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
-        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
+        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
         {cfg.rowActions && !disabled ? <span style={{ marginLeft: node.count != null ? 6 : "auto", display: "flex", gap: 2, opacity: hover ? 1 : 0, transition: "var(--t-hover)" }} onClick={(e) => e.stopPropagation()}>{cfg.rowActions(node)}</span> : null}
       </div>
       {open && loading && !kids.length ? (

package/components/navigation/Tree.vue

@@ -9,6 +9,8 @@ const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', pu
 const INDENT = 18
 const props = defineProps({
   items: { type: Array, default: () => [] },
+  treeData: Array, // alias of items (same as Tree.jsx)
+  expandedKeys: Array, selectedKeys: Array, checkedKeys: Array, // controlled: the parent's value wins whenever it changes
   defaultExpanded: { type: Array, default: () => [] },
   defaultActive: String,
   defaultSelected: { type: Array, default: () => [] },
@@ -24,12 +26,15 @@ const props = defineProps({
 })
 const emit = defineEmits(['select', 'check', 'expand', 'drop'])
 
-const data = ref(JSON.parse(JSON.stringify(props.items)))
+const data = ref(JSON.parse(JSON.stringify(props.treeData || props.items)))
 // Compare by value: re-seeding on identity alone would wipe async-loaded children.
-watch(() => JSON.stringify(props.items), (next, prev) => { if (next !== prev) data.value = JSON.parse(next) })
+watch(() => JSON.stringify(props.treeData || props.items), (next, prev) => { if (next !== prev) data.value = JSON.parse(next) })
 const expanded = ref([...props.defaultExpanded])
 const selected = ref(props.defaultActive ? [props.defaultActive] : [...props.defaultSelected])
 const checked = ref([...props.defaultChecked])
+watch(() => props.expandedKeys, (v) => { if (v) expanded.value = [...v] }, { immediate: true })
+watch(() => props.selectedKeys, (v) => { if (v) selected.value = [...v] }, { immediate: true })
+watch(() => props.checkedKeys, (v) => { if (v) checked.value = [...v] }, { immediate: true })
 const loading = ref([]); const loaded = ref([]); const focus = ref(null)
 const dragKey = ref(null); const drop = ref(null)
 
@@ -245,14 +250,14 @@ const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
         <template v-for="(p, i) in parts(titleOf(row.n))" :key="i"><mark v-if="p.hit" style="background:var(--soft-bg);color:var(--info-fg);font-weight:var(--weight-medium);padding:0;border-radius:2px">{{ p.t }}</mark><template v-else>{{ p.t }}</template></template>
       </span>
       <span v-if="row.n.tag" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:1;padding:2px 5px;border-radius:var(--radius-sm);background:var(--bg-inset);color:var(--text-secondary);flex-shrink:0">{{ row.n.tag }}</span>
-      <span v-if="row.n.count != null" style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);padding-left:8px">{{ row.n.count }}</span>
+      <span v-if="row.n.count != null" style="margin-left:auto;font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted);padding-left:8px">{{ row.n.count }}</span>
     </div>
     <div v-if="!rows.length" style="padding:10px 8px;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-muted)">No matching items</div>
   </div>
 </template>
 <style scoped>
 .kb-tree-row:not(.is-disabled):hover{background:var(--bg-hover)}
-.kb-tree-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
+.kb-tree-row:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px}
 .kb-tree-spin{animation:kb-tree-spin 900ms linear infinite}
 @keyframes kb-tree-spin{to{transform:rotate(360deg)}}
 </style>

package/components/navigation/UserMenu.vue

@@ -0,0 +1,27 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+import Avatar from '../display/Avatar.vue'
+import SegmentedControl from '../tabs/SegmentedControl.vue'
+import ContextMenu from '../feedback/ContextMenu.vue'
+// Account menu (opened from the TopBar's user trigger): avatar + name + email, an Appearance row with a light / dark / system switch
+// (v-model:theme, labels of themeOptions), then rows (items → @select(label)).
+defineProps({ name: String, email: String, theme: String, themeOptions: { type: Array, default: () => [{ label: 'Light', icon: 'sun' }, { label: 'Dark', icon: 'moon' }, { label: 'System', icon: 'monitor' }] }, appearanceLabel: { type: String, default: 'Appearance' }, showAppearance: { type: Boolean, default: true }, items: { type: Array, default: () => [] }, style: Object })
+const emit = defineEmits(['update:theme', 'select'])
+</script>
+<template>
+  <div role="menu" :style="{ width: '288px', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '4px', boxSizing: 'border-box', ...style }">
+    <div style="display:flex;align-items:center;gap:10px;padding:8px 12px">
+      <Avatar :name="name" :size="32" />
+      <div style="display:flex;flex-direction:column;min-width:0">
+        <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);font-weight:var(--weight-medium);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ name }}</span>
+        <span v-if="email" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ email }}</span>
+      </div>
+    </div>
+    <div style="height:1px;background:var(--border-subtle);margin:4px 0"></div>
+    <div v-if="showAppearance" style="height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;box-sizing:border-box">
+      <div style="display:flex;align-items:center;gap:10px;min-width:0"><span style="display:inline-flex;color:var(--text-body)"><Icon name="sliders" :size="16" /></span><span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ appearanceLabel }}</span></div>
+      <SegmentedControl icon-only :options="themeOptions" :model-value="theme" @update:model-value="v => emit('update:theme', v)" style="flex-shrink:0" />
+    </div>
+    <ContextMenu v-if="items.length" :items="items" @select="l => emit('select', l)" :style="{ display: 'flex', border: 'none', boxShadow: 'none', padding: 0, minWidth: 0, background: 'transparent' }" />
+  </div>
+</template>