@keyfunc/keybricks-ds 2.3.1 → 2.4.0

package/components/_shared/view-source.js

@@ -76,7 +76,7 @@ function mount(rootSelector, files){
   var btn = document.createElement('button');
   btn.type = 'button';
   btn.innerHTML = iconSvg() + '<span style="margin-left:6px">View Code</span>';
-  btn.style.cssText = 'display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--border-control,#e5e5e5);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:12px;font-family:var(--font-sans,sans-serif);cursor:pointer;';
+  btn.style.cssText = 'display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);border:1px solid var(--border-control,#e5e5e5);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;';
   var panel = document.createElement('div');
   panel.style.cssText = 'display:none;margin-top:10px;border:1px solid var(--border-control,#e5e5e5);border-radius:8px;overflow:hidden;background:var(--bg-inset,#fafafa);';
   var headRow = document.createElement('div');
@@ -84,19 +84,19 @@ function mount(rootSelector, files){
   var tabBar = document.createElement('div');
   tabBar.style.cssText = 'display:flex;overflow-x:auto;flex:1;';
   var fwBar = document.createElement('div');
-  fwBar.style.cssText = 'display:flex;gap:2px;padding:6px 8px;flex-shrink:0;';
+  fwBar.style.cssText = 'display:flex;align-items:center;flex-shrink:0;height:28px;box-sizing:border-box;gap:2px;padding:2px;margin:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-inset,#fafafa);border:1px solid var(--border-control,#e5e5e5);';
   var framework = 'react';
   ['React','Vue 3'].forEach(function(fw){
     var fb = document.createElement('button');
     fb.type = 'button'; fb.textContent = fw;
-    fb.style.cssText = 'font-size:12px;font-family:var(--font-sans,sans-serif);padding:4px 9px;border-radius:6px;border:1px solid var(--border-control,#e5e5e5);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);cursor:pointer;';
+    fb.style.cssText = 'display:inline-flex;align-items:center;height:22px;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-weight:var(--weight-medium,500);font-family:var(--font-sans,sans-serif);padding:0 6px;border-radius:var(--radius-sm,4px);border:none;background:transparent;color:var(--text-secondary,#737373);cursor:pointer;white-space:nowrap;';
     fb.onclick = function(){
       framework = fw === 'Vue 3' ? 'vue' : 'react';
       Array.prototype.forEach.call(fwBar.children, function(el){
         var on = el.textContent === fw;
-        el.style.background = on ? 'var(--action-primary,#155dfc)' : 'var(--bg-surface,#fff)';
-        el.style.color = on ? 'var(--on-accent,#fff)' : 'var(--text-secondary,#737373)';
-        el.style.borderColor = on ? 'var(--action-primary,#155dfc)' : 'var(--border-control,#e5e5e5)';
+        el.style.background = on ? 'var(--bg-surface,#fff)' : 'transparent'; el.style.boxShadow = on ? '0 1px 2px rgba(0,0,0,.08)' : 'none';
+        el.style.color = on ? 'var(--text-heading,#0a0a0a)' : 'var(--text-secondary,#737373)';
+        
       });
       Array.prototype.forEach.call(tabBar.children, function(el, i){
         if (tabs[i].html) return;
@@ -108,9 +108,9 @@ function mount(rootSelector, files){
     };
     fwBar.appendChild(fb);
   });
-  fwBar.firstChild.style.background = 'var(--action-primary,#155dfc)';
-  fwBar.firstChild.style.color = 'var(--on-accent,#fff)';
-  fwBar.firstChild.style.borderColor = 'var(--action-primary,#155dfc)';
+  fwBar.firstChild.style.background = 'var(--bg-surface,#fff)'; fwBar.firstChild.style.boxShadow = '0 1px 2px rgba(0,0,0,.08)';
+  fwBar.firstChild.style.color = 'var(--text-heading,#0a0a0a)';
+  
   headRow.appendChild(tabBar); headRow.appendChild(fwBar);
   var body = document.createElement('div');
   var tabs = files.slice();
@@ -119,11 +119,11 @@ function mount(rootSelector, files){
     var box = document.createElement('div');
     box.style.position = 'relative';
     var pre = document.createElement('pre');
-    pre.style.cssText = 'margin:0;padding:14px 44px 14px 16px;overflow:auto;max-height:380px;font-family:var(--font-mono,monospace);font-size:12px;line-height:16.5px;color:var(--text-body,#525252);white-space:pre;';
+    pre.style.cssText = 'margin:0;padding:14px 70px 14px 16px;overflow:auto;max-height:380px;font-family:var(--font-mono,monospace);font-size:var(--text-code,12px);line-height:var(--leading-code,18px);color:var(--text-body,#525252);white-space:pre;';
     var copyBtn = document.createElement('button');
     copyBtn.type = 'button';
     copyBtn.innerHTML = copySvg() + '<span style="margin-left:4px">Copy</span>';
-    copyBtn.style.cssText = 'position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:12px;font-family:var(--font-sans,sans-serif);cursor:pointer;border:1px solid var(--border-control,#e5e5e5);';
+    copyBtn.style.cssText = 'position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;height:28px;box-sizing:border-box;padding:0 8px;border-radius:var(--radius-md,8px);background:var(--bg-surface,#fff);color:var(--text-secondary,#737373);font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;border:1px solid var(--border-control,#e5e5e5);';
     function setText(text){
       pre.textContent = text;
       copyBtn.onclick = function(){
@@ -169,7 +169,7 @@ function mount(rootSelector, files){
     tb.type = 'button';
     tb.textContent = t.name;
     if (t.vueOnly) tb.style.display = 'none';
-    tb.style.cssText = 'padding:8px 12px;border:none;background:transparent;font-size:12px;font-family:var(--font-sans,sans-serif);cursor:pointer;white-space:nowrap;margin-bottom:-1px;border-bottom:2px solid transparent;';
+    tb.style.cssText = 'padding:8px 12px;border:none;background:transparent;font-size:var(--text-xs,12px);line-height:var(--leading-xs,16px);font-family:var(--font-sans,sans-serif);cursor:pointer;white-space:nowrap;margin-bottom:-1px;border-bottom:2px solid transparent;';
     tb.onclick = function(){ selectTab(i); };
     tabBar.appendChild(tb);
   });

package/components/_vue/index.mjs

@@ -114,10 +114,12 @@ export { default as Breadcrumb } from "../navigation/Breadcrumb.vue";
 export { default as DocTree } from "../navigation/DocTree.vue";
 export { default as PageHeading } from "../navigation/PageHeading.vue";
 export { default as PageToolbar } from "../navigation/PageToolbar.vue";
+export { default as SidePanel } from "../navigation/SidePanel.vue";
 export { default as Sidebar } from "../navigation/Sidebar.vue";
 export { default as ThemeToggle } from "../navigation/ThemeToggle.vue";
 export { default as TopBar } from "../navigation/TopBar.vue";
 export { default as Tree } from "../navigation/Tree.vue";
+export { default as UserMenu } from "../navigation/UserMenu.vue";
 
 /* pipeline/ */
 export { default as ConfigPanel } from "../pipeline/ConfigPanel.vue";
@@ -132,6 +134,7 @@ export { default as PortLabel } from "../pipeline/PortLabel.vue";
 export { default as ZoomControls } from "../pipeline/ZoomControls.vue";
 
 /* tabs/ */
+export { default as CountBadge } from "../tabs/CountBadge.vue";
 export { default as PanelTabs } from "../tabs/PanelTabs.vue";
 export { default as PillTabs } from "../tabs/PillTabs.vue";
 export { default as SegmentedControl } from "../tabs/SegmentedControl.vue";
@@ -139,7 +142,7 @@ export { default as Tabs } from "../tabs/Tabs.vue";
 export { default as ViewToggle } from "../tabs/ViewToggle.vue";
 
 /* shared values */
-export { KEYBRICKS_NAV } from "../navigation/nav-model.js";
+export { KEYBRICKS_MGMT, KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER } from "../navigation/nav-model.js";
 export { applyStoredTheme } from "../navigation/theme-store.js";
 export { PIPELINE_CATALOG } from "../pipeline/pipeline-catalog.js";
 export { VUE_ICON_PATHS } from "../icons/icon-paths.js";

package/components/feedback/ContextMenu.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-/** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row. */
+/** Floating context menu — r10, soft shadow, control-height rows at the region's tier (32px / 14px at md), red danger row.
+ *  Action menus keep rows flush; a single-choice menu (any item `selected`) spaces rows 2px apart. Dividers keep 4px above and below. */
 export interface ContextMenuProps {
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
+  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
   /** Size tier of the rows. Omit to inherit the tier of the control that opened the menu (the default). */
   size?: "sm" | "md" | "lg";

package/components/feedback/ContextMenu.jsx

@@ -1,15 +1,19 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 
-/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides. */
+/** Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+ *  selected: true marks the current choice of a single-choice menu (section switcher, language picker): --bg-hover fill, --weight-medium
+ *  --text-heading, no checkmark. A menu with any selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree) so a hovered
+ *  fill never touches the selected one; an action menu (nothing selected) keeps its rows flush. Dividers keep 4px above and below. */
 export function ContextMenu({ items = [], onSelect, size, style }) {
   const [hover, setHover] = React.useState(-1);
+  const choice = items.some((it) => it && it.selected);
   return (
-    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", ...style }}>
-      {items.map((it, i) => it.divider ? <div key={i} style={{ height: 1, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
+    <div role="menu" data-size={size} style={{ background: "var(--bg-surface)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-card)", boxShadow: "var(--shadow-menu)", padding: 4, minWidth: 148, display: "inline-flex", flexDirection: "column", gap: choice ? 2 : 0, ...style }}>
+      {items.map((it, i) => it.divider ? <div key={i} role="separator" style={{ height: 1, flexShrink: 0, background: "var(--border-subtle)", margin: "4px 0" }} /> : (
         <button key={i} type="button" onClick={() => onSelect && onSelect(it.label)}
           onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
-          role="menuitem" style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
+          role={choice ? "menuitemradio" : "menuitem"} aria-checked={choice ? !!it.selected : undefined} style={{ display: "flex", alignItems: "center", gap: 10, height: "var(--control-h)", flexShrink: 0, padding: "0 10px", boxSizing: "border-box", borderRadius: "var(--radius-md)", border: "none", cursor: "pointer", background: it.selected || hover === i ? "var(--bg-hover)" : "transparent", fontFamily: "var(--font-sans)", fontWeight: it.selected ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: it.danger ? "var(--danger)" : "var(--text-heading)", textAlign: "left", whiteSpace: "nowrap" }}>
           {it.icon ? <Icon name={it.icon} size={16} style={{ width: "var(--control-icon)", height: "var(--control-icon)" }} /> : null}{it.label}
         </button>
       ))}

package/components/feedback/ContextMenu.vue

@@ -1,17 +1,20 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Icon from '../icons/Icon.vue'
-// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
-defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
+// Right-click context menu (Preview / Duplicate / Delete). items: [{label, icon, danger, divider, selected}]. Rows are control-height at the region's tier (a menu inherits the tier of the control that opened it); `size` overrides.
+// selected: true marks the current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. A menu with any
+// selected item spaces its rows 2px apart (like Sidebar / Tree / DocTree); an action menu keeps its rows flush. Dividers keep 4px above and below.
+const props = defineProps({ items: { type: Array, default: () => [] }, size: String, style: Object })
+const choice = computed(() => props.items.some(it => it && it.selected))
 const emit = defineEmits(['select'])
 const hover = ref(-1)
 </script>
 <template>
-  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', ...style }">
+  <div role="menu" :data-size="size" :style="{ background: 'var(--bg-surface)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-card)', boxShadow: 'var(--shadow-menu)', padding: '4px', minWidth: '148px', display: 'inline-flex', flexDirection: 'column', gap: choice ? '2px' : 0, ...style }">
     <template v-for="(it, i) in items" :key="i">
-      <div v-if="it.divider" style="height:1px;background:var(--border-subtle);margin:4px 0" />
+      <div v-if="it.divider" role="separator" :style="{ height: '1px', flexShrink: 0, background: 'var(--border-subtle)', margin: '4px 0' }" />
       <button v-else type="button" @click="emit('select', it.label)" @mouseenter="hover = i" @mouseleave="hover = -1"
-        role="menuitem" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
+        :role="choice ? 'menuitemradio' : 'menuitem'" :aria-checked="choice ? !!it.selected : undefined" :style="{ display: 'flex', alignItems: 'center', gap: '10px', height: 'var(--control-h)', flexShrink: 0, padding: '0 10px', boxSizing: 'border-box', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', background: it.selected || hover === i ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontWeight: it.selected ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: it.danger ? 'var(--danger)' : 'var(--text-heading)', textAlign: 'left', whiteSpace: 'nowrap' }">
         <Icon v-if="it.icon" :name="it.icon" :size="16" :style="{ width: 'var(--control-icon)', height: 'var(--control-icon)' }" />{{ it.label }}
       </button>
     </template>

package/components/feedback/Menu.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 /** Trigger-anchored dropdown menu (reuses ContextMenu's look). Addition — for "Show ⌄"-style buttons and user menus. */
 export interface MenuProps {
   trigger: React.ReactNode;
-  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean }[];
+  items?: { label?: string; icon?: string; danger?: boolean; divider?: boolean; /** Current choice of a single-choice menu: --bg-hover fill, --weight-medium --text-heading, no checkmark. Any selected item spaces the rows 2px apart. */ selected?: boolean }[];
   onSelect?: (label: string) => void;
   align?: "start" | "end";
   style?: React.CSSProperties;

package/components/feedback/feedback.prompt.md

@@ -1,4 +1,4 @@
-Feedback & flow: `Stepper` (wizard circles), `ContextMenu`, `ActivityItem`/`DotActivity` (feeds), `LogViewer` (mono logs).
+Feedback & flow: `Stepper` (wizard circles), `ContextMenu` / `Menu` (action menus flush; `selected: true` on one item makes a single-choice menu with 2px row gaps, no checkmark), `ActivityItem`/`DotActivity` (feeds), `LogViewer` (mono logs).
 
 ```jsx
 <Stepper current={1} steps={[{label:"Upload & Parse",icon:"upload"},{label:"Comparison",icon:"file-text"},{label:"Confirmation",icon:"check"},{label:"Execution",icon:"play"},{label:"Results",icon:"eye"}]}/>

package/components/index.d.ts

@@ -73,6 +73,7 @@ export * from "./icons/Icon";
 export * from "./icons/Unicon";
 export * from "./navigation/Breadcrumb";
 export * from "./navigation/DocTree";
+export * from "./navigation/SidePanel";
 export * from "./navigation/Sidebar";
 export * from "./navigation/TopBar";
 export * from "./navigation/Tree";

package/components/index.js

@@ -92,8 +92,9 @@ export { Unicon } from "./icons/Unicon.jsx";
 /* navigation/ */
 export { Breadcrumb, ThemeToggle, applyStoredTheme } from "./navigation/Breadcrumb.jsx";
 export { DocTree } from "./navigation/DocTree.jsx";
-export { KEYBRICKS_NAV, Sidebar } from "./navigation/Sidebar.jsx";
-export { PageHeading, PageToolbar, TopBar } from "./navigation/TopBar.jsx";
+export { SidePanel } from "./navigation/SidePanel.jsx";
+export { KEYBRICKS_MGMT, KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, SIDEBAR_COLORS, Sidebar } from "./navigation/Sidebar.jsx";
+export { PageHeading, PageToolbar, THEME_OPTIONS, TopBar, UserMenu } from "./navigation/TopBar.jsx";
 export { Tree } from "./navigation/Tree.jsx";
 
 /* pipeline/ */
@@ -106,5 +107,5 @@ export { ZoomControls } from "./pipeline/ZoomControls.jsx";
 
 /* tabs/ */
 export { SegmentedControl } from "./tabs/SegmentedControl.jsx";
-export { PanelTabs, PillTabs, Tabs } from "./tabs/Tabs.jsx";
+export { CountBadge, PanelTabs, PillTabs, Tabs } from "./tabs/Tabs.jsx";
 export { ViewToggle } from "./tabs/ViewToggle.jsx";

package/components/navigation/SidePanel.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/** Side panel docked beside the Sidebar (Documents, Management): 240px, same tone as the rail, grows open from 0 and fades its content in.
+ *  56px header: title + actions + close. The body scrolls. Vue: #actions slot, @close. */
+export interface SidePanelProps {
+  open?: boolean;
+  title?: React.ReactNode;
+  /** Extra header buttons left of close (e.g. a muted IconButton "maximize-2" to open the full page) */
+  actions?: React.ReactNode;
+  /** Shows the close button. Vue: @close (hide it with :closable="false"). */
+  onClose?: () => void;
+  closeLabel?: string;
+  closeIcon?: string;
+  /** Same values as Sidebar — keep the two in step */
+  tone?: "recessed" | "flush" | "contrast" | "custom";
+  color?: string;
+  width?: number;
+  /** Size tier of the panel body ("sm" for compact document lists) */
+  size?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function SidePanel(props: SidePanelProps): JSX.Element;

package/components/navigation/SidePanel.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { IconButton } from "../buttons/IconButton.jsx";
+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
+ * (--dur-slow, --ease-out) while its content fades in from 12px left. 56px header: title + actions + close.
+ * Body scrolls; put a SegmentedControl, SearchInput, Tree or rows inside. size="sm" makes its controls compact.
+ */
+export function SidePanel({ open = true, title, actions, onClose, closeLabel = "Close", closeIcon = "x", tone = "recessed", color, width = 240, size, children, style }) {
+  const t = chromeTone(tone, color);
+  return (
+    <div aria-hidden={open ? undefined : "true"} style={{ width: open ? width : 0, 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, 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", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "0 8px 0 16px", boxSizing: "border-box", flexShrink: 0 }}>
+          <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", fontWeight: "var(--weight-medium)", color: "var(--text-heading)" }}>{title}</span>
+          <div data-size="md" style={{ display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }}>{actions}{onClose ? <IconButton icon={closeIcon} muted label={closeLabel} title={closeLabel} onClick={onClose} /> : null}</div>
+        </div>
+        <div style={{ flex: 1, minHeight: 0, overflow: "auto", display: "flex", flexDirection: "column" }}>{children}</div>
+      </div>
+    </div>
+  );
+}

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,56 +1,57 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
-import { KEYBRICKS_NAV } from "./nav-model.js";
+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) — defined in nav-model.js, shared with the Vue entry. */
-export { KEYBRICKS_NAV };
+/** 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,49 +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>
-
-<!-- The product's nav model is KEYBRICKS_NAV in ./nav-model.js — also exported from the Vue entry:
-     import { Sidebar, KEYBRICKS_NAV } from '@keyfunc/keybricks-ds/vue' -->