@keyfunc/keybricks-ds 2.3.1 → 2.4.0

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/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>

package/components/navigation/chrome-tones.js

@@ -0,0 +1,22 @@
+// App chrome tones — framework-neutral, shared by Sidebar and SidePanel in React and Vue.
+// recessed (default): grey rail, the active item is a white tile with a hairline ring.
+// flush: white rail, neutral selected fill. contrast: the rail is scoped to the dark theme.
+// custom: dark scope on a solid colour (SIDEBAR_COLORS or any hex); washes are white at 10 / 16 %.
+// chromeTone() returns the data-theme for the rail and the CSS custom properties it sets on itself:
+// --sb-* drive the rail's own surfaces; --bg-hover / --bg-active / … are remapped so components inside
+// (SearchInput, SegmentedControl, Tree) sit correctly on the rail colour.
+export const SIDEBAR_COLORS = { slate: '#1e293b', navy: '#14305c', indigo: '#312e81', violet: '#4c1d95', plum: '#701a75', wine: '#7f1d1d', forest: '#14532d', teal: '#134e4a', umber: '#78350f', charcoal: '#262626' }
+const wash = (p) => 'color-mix(in srgb, var(--on-accent) ' + p + '%, transparent)'
+const BASE = { '--sb-border': 'var(--border-card)', '--sb-text': 'var(--text-body)', '--sb-brand': 'var(--text-primary)', '--sb-active-text': 'var(--text-heading)', '--sb-muted': 'var(--text-muted)' }
+const GREY = { ...BASE, '--sb-bg': 'var(--bg-table-header)', '--sb-active': 'var(--bg-surface)', '--sb-hover': 'var(--bg-press)', '--sb-shadow': '0 0 0 1px var(--border-card)', '--bg-hover': 'var(--bg-press)', '--bg-active': 'var(--bg-surface)', '--bg-inset': 'var(--overlay-hover)' }
+const WHITE = { ...BASE, '--sb-bg': 'var(--bg-surface)', '--sb-active': 'var(--bg-active)', '--sb-hover': 'var(--bg-hover)', '--sb-shadow': 'none' }
+export function chromeTone(tone, color) {
+  const t = tone || 'recessed'
+  if (t === 'flush') return { theme: undefined, vars: WHITE }
+  if (t === 'contrast') return { theme: 'dark', vars: GREY }
+  if (t === 'custom') {
+    const bg = SIDEBAR_COLORS[color] || color || SIDEBAR_COLORS.slate
+    return { theme: 'dark', vars: { ...GREY, '--sb-bg': bg, '--sb-border': wash(12), '--sb-active': wash(16), '--sb-hover': wash(10), '--sb-shadow': 'none', '--bg-hover': wash(10), '--bg-press': wash(16), '--bg-active': wash(16), '--bg-inset': wash(10), '--border-control': wash(16) } }
+  }
+  return { theme: undefined, vars: GREY }
+}

package/components/navigation/nav-model.js

@@ -1,23 +1,26 @@
-// The product's real nav model (Home dashboard). Framework-neutral: imported by Sidebar.jsx (re-exported
-// as KEYBRICKS_NAV from the React entry) and exported from the Vue entry for <Sidebar :items="KEYBRICKS_NAV">.
+// The product's nav model. Framework-neutral: re-exported by the React entry and exported from the Vue entry.
+// KEYBRICKS_NAV — the main rail; trailing: true marks an item that opens a side panel (chevron on the right).
+// KEYBRICKS_NAV_FOOTER — pinned at the bottom of the rail. KEYBRICKS_MGMT — the Management side panel's groups.
 export const KEYBRICKS_NAV = [
   { icon: 'house', label: 'Home' },
-  { icon: 'file-text', label: 'Documents' },
-  { icon: 'layout-grid', label: 'Business Intelligence' },
+  { icon: 'file-text', label: 'Documents', trailing: true },
+  { icon: 'journal', label: 'Voucher' },
+  { icon: 'credit-card', label: 'Fund Payment Plan' },
   { icon: 'database', label: 'Data Integration' },
+  { icon: 'git-branch', label: 'Data Flow' },
   { icon: 'reconciliation', label: 'Reconciliation' },
   { icon: 'consolidation', 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: 'reconciliation', label: 'Reconciliation' },
-    ],
-  },
-];
+  { icon: 'task-execution', label: 'Task Execution' },
+]
+export const KEYBRICKS_NAV_FOOTER = [
+  { icon: 'settings', label: 'Management', trailing: true },
+  { icon: 'book-open', label: 'Knowledge Base' },
+]
+export const KEYBRICKS_MGMT = [
+  { icon: 'box', label: 'Modeling', children: ['Dimension', 'Model', 'Environment', 'Journal Template', 'Detail Template', 'Relationship'] },
+  { icon: 'repeat', label: 'Workflow', children: ['Workflow', 'Requests', 'Task Tracker'] },
+  { icon: 'shield', label: 'Security Management', children: ['Users', 'Roles', 'Permissions'] },
+  { icon: 'refresh-cw', label: 'System Migration' },
+  { icon: 'circle-check', label: 'Validation Rules' },
+  { icon: 'settings-2', label: 'Control Center' },
+]

package/components/navigation/navigation.prompt.md

@@ -20,3 +20,5 @@ Set `logo` to the correct relative path to `assets/keybricks-logo.png`.
 <ThemeToggle dark={dark} onToggle={setDark}/>  // controlled
 applyStoredTheme();                   // call once at app start
 ```
+
+App chrome: `<Sidebar tone="recessed" version="Version 2.4.0" onSelect={…}/>` (items default to `KEYBRICKS_NAV`, footer to `KEYBRICKS_NAV_FOOTER`; `trailing: true` items open a `<SidePanel title="Documents" onClose={…}>` docked beside the rail — same `tone`) and `<TopBar user={{ name, email }} userMenu={<UserMenu … theme={t} onThemeChange={setT}/>}/>`.

package/components/tabs/CountBadge.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { computed } from 'vue'
+// Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures
+// (digits are Latin, so not bumped in CJK). Fill: the alpha wash --neutral-alpha-8, so it darkens any surface by the same step (white tab,
+// #f5f5f5 active pill, dark theme); text tells selected from unselected: --text-heading vs --text-body (a lighter grey fails 4.5:1 at 12px).
+// Hidden for 0 or a missing count unless showZero, which draws a muted 0.
+const props = defineProps({ count: Number, selected: Boolean, showZero: Boolean, style: Object })
+const zero = computed(() => props.count === 0 || props.count == null)
+</script>
+<template>
+  <span v-if="!zero || showZero" aria-hidden="true" :style="{ display: 'inline-flex', alignItems: 'center', height: 'var(--count-h)', padding: '0 6px', borderRadius: 'var(--radius-full)', background: 'var(--neutral-alpha-8)', color: zero ? 'var(--text-muted)' : selected ? 'var(--text-heading)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: '12px', lineHeight: 'var(--count-h)', fontWeight: 'var(--weight-medium)', letterSpacing: 0, fontVariantNumeric: 'tabular-nums', flexShrink: 0, ...style }">{{ zero ? 0 : count }}</span>
+</template>

package/components/tabs/PanelTabs.vue

@@ -1,11 +1,15 @@
 <script setup>
+import { computed } from 'vue'
+import CountBadge from './CountBadge.vue'
 // Panel tabs (Node Info · Calc Rules · …): a lighter underline tab bar at the region's bar height with regular-weight control text. Put the panel in an sm region for the compact 32px/12px look.
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
+// tabs: string[] | { label, count?, showZero? }[] — a count renders as a CountBadge 6px right of the label; active is matched by label.
+const props = defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, showZero: Boolean, style: Object })
 const emit = defineEmits(['change'])
+const items = computed(() => props.tabs.map(t => typeof t === 'string' ? { label: t } : t))
 </script>
 <template>
   <div role="tablist" :data-size="size" :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--action-primary)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
+    <button v-for="t in items" :key="t.label" type="button" role="tab" :aria-selected="t.label === active" :data-ink="t.label === active ? undefined : ''" @click="emit('change', t.label)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t.label === active ? '2px solid var(--action-primary)' : '2px solid transparent', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t.label === active ? 'var(--action-primary)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t.label }}<CountBadge :count="t.count" :selected="t.label === active" :show-zero="t.showZero ?? showZero" /></button>
   </div>
 </template>

package/components/tabs/PillTabs.vue

@@ -1,11 +1,15 @@
 <script setup>
+import { computed } from 'vue'
+import CountBadge from './CountBadge.vue'
 // Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 28 · md 32 · lg 40); omit `size` to inherit.
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
+// tabs: string[] | { label, count?, showZero? }[] — a count draws a CountBadge 6px right of the label; active is matched by label.
+const props = defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, showZero: Boolean, style: Object })
 const emit = defineEmits(['change'])
+const items = computed(() => props.tabs.map(t => typeof t === 'string' ? { label: t } : t))
 </script>
 <template>
   <div role="tablist" :data-size="size" :style="{ display: 'flex', gap: 'var(--control-gap)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" :data-wash="t === active ? undefined : ''" @click="emit('change', t)"
-      :style="{ background: t === active ? 'var(--bg-active)' : 'var(--wash, transparent)', border: 'none', cursor: 'pointer', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
+    <button v-for="t in items" :key="t.label" type="button" role="tab" :aria-selected="t.label === active" :data-ink="t.label === active ? undefined : ''" :data-wash="t.label === active ? undefined : ''" @click="emit('change', t.label)"
+      :style="{ background: t.label === active ? 'var(--bg-active)' : 'var(--wash, transparent)', border: 'none', cursor: 'pointer', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t.label === active ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t.label }}<CountBadge :count="t.count" :selected="t.label === active" :show-zero="t.showZero ?? showZero" /></button>
   </div>
 </template>

package/components/tabs/SegmentedControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 /** Inset segmented control with a raised active segment — switches views of the same data, applies instantly. ← → move between enabled segments. */
 export interface SegmentedControlProps {
-  /** Plain labels, or { label, icon?, disabled? } entries. Value is matched by label. */
-  options?: (string | { label: string; icon?: string; disabled?: boolean })[];
+  /** Plain labels, or { label, icon?, disabled?, count?, showZero? } entries. Value is matched by label; count renders as a CountBadge 6px right of the label (hidden in iconOnly). */
+  options?: (string | { label: string; icon?: string; disabled?: boolean; count?: number; showZero?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
   /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
@@ -13,6 +13,8 @@ export interface SegmentedControlProps {
   disabled?: boolean;
   /** Stretch to the container, segments share the width evenly */
   fullWidth?: boolean;
+  /** Show a muted 0 badge for zero counts on every option (an option's own showZero wins). */
+  showZero?: boolean;
   style?: React.CSSProperties;
 }
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/components/tabs/SegmentedControl.jsx

@@ -1,15 +1,17 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { CountBadge } from "./Tabs.jsx";
 
 /**
  * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
- * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
+ * options: string[] | { label, icon?, disabled?, count?, showZero? }[]   value/onChange by label
+ * count draws a CountBadge 6px right of the label (hidden for 0 unless showZero — per option or on the control); the match stays by label.
  * size sm 28 | md 32 | lg 40 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
  * disabled greys the whole control · fullWidth stretches segments evenly
  * Keyboard: ← → move between enabled segments.
  */
 const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
-export function SegmentedControl({ options = [], value, onChange, size, iconOnly, disabled, fullWidth, style }) {
+export function SegmentedControl({ options = [], value, onChange, size, iconOnly, disabled, fullWidth, showZero, style }) {
   const opts = options.map((o) => (typeof o === "string" ? { label: o } : o));
   const enabled = opts.filter((o) => !o.disabled);
   const onKey = (e) => {
@@ -27,7 +29,7 @@ export function SegmentedControl({ options = [], value, onChange, size, iconOnly
           <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1} data-ink={is || off ? undefined : ""}
             onClick={() => !off && onChange && onChange(o.label)}
             style={{ height: "calc(var(--control-h) - 6px)", padding: iconOnly ? "0 calc(var(--control-px) - 4px)" : "0 calc(var(--control-px) - 2px)", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
-            {o.icon ? <Icon name={o.icon} size={16} style={tierIcon} /> : null}{iconOnly ? null : o.label}
+            {o.icon ? <Icon name={o.icon} size={16} style={tierIcon} /> : null}{iconOnly ? null : o.label}{iconOnly ? null : <CountBadge count={o.count} selected={is} showZero={o.showZero ?? showZero} />}
           </button>
         );
       })}

package/components/tabs/SegmentedControl.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
+import CountBadge from './CountBadge.vue'
 // Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
-// options: string[] | { label, icon?, disabled? }[] · v-model by label · size sm 28 | md 32 | lg 40 — omit it to inherit the region's tier
+// options: string[] | { label, icon?, disabled?, count?, showZero? }[] · v-model by label · count draws a CountBadge 6px right of the label (hidden for 0 unless showZero) · size sm 28 | md 32 | lg 40 — omit it to inherit the region's tier
 // iconOnly hides labels (label → aria-label/title) · disabled greys the control · fullWidth stretches segments · ← → keyboard.
 const tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }
-const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: String, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, style: Object })
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: String, iconOnly: Boolean, disabled: Boolean, fullWidth: Boolean, showZero: Boolean, style: Object })
 const emit = defineEmits(['update:modelValue'])
 const opts = computed(() => props.options.map(o => typeof o === 'string' ? { label: o } : o))
 const enabled = computed(() => opts.value.filter(o => !o.disabled))
@@ -21,7 +22,7 @@ function onKey(e) {
   <div role="tablist" :data-size="size" :aria-disabled="disabled || undefined" @keydown="onKey" :style="{ display: fullWidth ? 'flex' : 'inline-flex', height: 'var(--control-h)', padding: '2px', gap: '2px', background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', opacity: disabled ? .5 : 1, ...style }">
     <button v-for="o in opts" :key="o.label" type="button" role="tab" :aria-selected="modelValue === o.label" :aria-label="iconOnly ? o.label : undefined" :title="iconOnly ? o.label : undefined" :disabled="disabled || o.disabled" :tabindex="modelValue === o.label ? 0 : -1" :data-ink="modelValue === o.label || disabled || o.disabled ? undefined : ''" @click="pick(o)"
       :style="{ height: 'calc(var(--control-h) - 6px)', padding: iconOnly ? '0 calc(var(--control-px) - 4px)' : '0 calc(var(--control-px) - 2px)', flex: fullWidth ? 1 : 'none', justifyContent: 'center', display: 'inline-flex', alignItems: 'center', gap: '6px', borderRadius: 'var(--radius-sm)', border: 'none', cursor: (disabled || o.disabled) ? 'not-allowed' : 'pointer', background: modelValue === o.label ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === o.label ? '0 1px 2px rgba(0,0,0,.08)' : 'none', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: modelValue === o.label ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
-      <Icon v-if="o.icon" :name="o.icon" :size="16" :style="tierIcon" /><template v-if="!iconOnly">{{ o.label }}</template>
+      <Icon v-if="o.icon" :name="o.icon" :size="16" :style="tierIcon" /><template v-if="!iconOnly">{{ o.label }}<CountBadge :count="o.count" :selected="modelValue === o.label" :show-zero="o.showZero ?? showZero" /></template>
     </button>
   </div>
 </template>

package/components/tabs/Tabs.d.ts

@@ -1,7 +1,11 @@
 import * as React from "react";
-/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. The bar is the region's bar height (sm 32 · md 40 · lg 44). */
+/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. The bar is the region's bar height (sm 32 · md 40 · lg 44). A tab's count renders as a neutral CountBadge right of the label. */
+export interface TabItem { label: string; /** Count badge 6px right of the label; hidden when 0 or missing unless showZero. */ count?: number; showZero?: boolean; }
 export interface TabsProps {
-  tabs?: string[];
+  /** Plain labels or { label, count?, showZero? }. Active is matched by label. */
+  tabs?: (string | TabItem)[];
+  /** Show a muted 0 badge for zero counts on every tab (a tab's own showZero wins). */
+  showZero?: boolean;
   active?: string;
   onChange?: (tab: string) => void;
   /** Size tier. Omit to inherit the enclosing region's tier (the default). */
@@ -11,5 +15,11 @@ export interface TabsProps {
 export declare function Tabs(props: TabsProps): JSX.Element;
 /** Lighter underline tabs for panels (Node Info / Calc Rules / ...), regular weight; an sm region gives the compact 32px/12px look. */
 export declare function PanelTabs(props: TabsProps): JSX.Element;
-/** Text pill filter tabs at control height; active gets a tinted pill. */
-export declare function PillTabs(props: TabsProps): JSX.Element;
+/** @deprecated use TabItem */
+export type PillTab = TabItem;
+export type PillTabsProps = TabsProps;
+/** Text pill filter tabs at control height; active gets a tinted pill. A tab's count renders as a CountBadge 6px right of the label. */
+export declare function PillTabs(props: PillTabsProps): JSX.Element;
+/** Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures. Fill --neutral-alpha-8 on any surface; text --text-body, --text-heading when selected. Renders nothing for 0 or undefined unless showZero (muted 0). */
+export interface CountBadgeProps { count?: number; selected?: boolean; showZero?: boolean; style?: React.CSSProperties; }
+export declare function CountBadge(props: CountBadgeProps): JSX.Element | null;

package/components/tabs/Tabs.jsx

@@ -1,15 +1,19 @@
 import React from "react";
 
-/** Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. The bar is the region's bar height (sm 32 · md 40 · lg 44) with the tier's control text; omit `size` to inherit. */
-export function Tabs({ tabs = [], active, onChange, size, style }) {
+/* tabs: string[] | { label, count?, showZero? }[] — shared by Tabs, PanelTabs and PillTabs; active is matched by label. */
+const norm = (tabs) => tabs.map((t) => (typeof t === "string" ? { label: t } : t));
+
+/** Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. The bar is the region's bar height (sm 32 · md 40 · lg 44) with the tier's control text; omit `size` to inherit.
+ *  A tab's count renders as a CountBadge 6px right of the label (the badge stays neutral under the blue active tab). */
+export function Tabs({ tabs = [], active, onChange, size, showZero, style }) {
   return (
     <div role="tablist" data-size={size} style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--border-control)", ...style }}>
-      {tabs.map((t) => {
-        const is = t === active;
+      {norm(tabs).map((t) => {
+        const is = t.label === active;
         return (
-          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t)}
-            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-body))", whiteSpace: "nowrap" }}>
-            {t}
+          <button key={t.label} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t.label)}
+            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-body))", whiteSpace: "nowrap" }}>
+            {t.label}<CountBadge count={t.count} selected={is} showZero={t.showZero ?? showZero} />
           </button>
         );
       })}
@@ -18,15 +22,15 @@ export function Tabs({ tabs = [], active, onChange, size, style }) {
 }
 
 /** Panel tabs (Node Info · Calc Rules · Output Fields · SQL Preview): a lighter underline tab bar at the region's bar height with regular-weight control text. Put the panel in an sm region for the compact 32px/12px look. */
-export function PanelTabs({ tabs = [], active, onChange, size, style }) {
+export function PanelTabs({ tabs = [], active, onChange, size, showZero, style }) {
   return (
     <div role="tablist" data-size={size} style={{ display: "flex", borderBottom: "1px solid var(--border-subtle)", ...style }}>
-      {tabs.map((t) => {
-        const is = t === active;
+      {norm(tabs).map((t) => {
+        const is = t.label === active;
         return (
-          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t)}
-            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
-            {t}
+          <button key={t.label} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} onClick={() => onChange && onChange(t.label)}
+            style={{ background: "transparent", border: "none", cursor: "pointer", height: "var(--bar-h)", boxSizing: "border-box", padding: "0 var(--control-px)", marginBottom: -1, borderBottom: is ? "2px solid var(--action-primary)" : "2px solid transparent", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--action-primary)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
+            {t.label}<CountBadge count={t.count} selected={is} showZero={t.showZero ?? showZero} />
           </button>
         );
       })}
@@ -34,16 +38,27 @@ export function PanelTabs({ tabs = [], active, onChange, size, style }) {
   );
 }
 
-/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = tinted pill. Pills are control-height (sm 28 · md 32 · lg 40); omit `size` to inherit. */
-export function PillTabs({ tabs = [], active, onChange, size, style }) {
+
+/* Count badge beside a segment / pill label: --count-h tall (sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures
+   (digits are Latin, so the size is not bumped in CJK). The fill is the alpha wash --neutral-alpha-8, so it darkens whatever it sits on by the
+   same step (white tab, #f5f5f5 active pill, dark theme); the text tells selected from unselected: --text-heading vs --text-body
+   (a lighter grey fails 4.5:1 on a grey fill at 12px). Hidden for 0 or a missing count unless showZero, which draws a muted 0. */
+export function CountBadge({ count, selected, showZero, style }) {
+  const zero = count === 0 || count == null;
+  if (zero && !showZero) return null;
+  return <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", height: "var(--count-h)", padding: "0 6px", borderRadius: "var(--radius-full)", background: "var(--neutral-alpha-8)", color: zero ? "var(--text-muted)" : selected ? "var(--text-heading)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 12, lineHeight: "var(--count-h)", fontWeight: "var(--weight-medium)", letterSpacing: 0, fontVariantNumeric: "tabular-nums", flexShrink: 0, ...style }}>{zero ? 0 : count}</span>;
+}
+/** Text pill filter tabs (For Review · To be Submitted · For Approval). Active = tinted pill. Pills are control-height (sm 28 · md 32 · lg 40); omit `size` to inherit.
+ *  tabs: string[] | { label, count?, showZero? }[] — a count draws a CountBadge 6px right of the label; active is matched by label. */
+export function PillTabs({ tabs = [], active, onChange, size, showZero, style }) {
   return (
     <div role="tablist" data-size={size} style={{ display: "flex", gap: "var(--control-gap)", ...style }}>
-      {tabs.map((t) => {
-        const is = t === active;
+      {norm(tabs).map((t) => {
+        const is = t.label === active;
         return (
-          <button key={t} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} data-wash={is ? undefined : ""} onClick={() => onChange && onChange(t)}
-            style={{ background: is ? "var(--bg-active)" : "var(--wash, transparent)", border: "none", cursor: "pointer", height: "var(--control-h)", padding: "0 var(--control-px)", borderRadius: "var(--radius-md)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
-            {t}
+          <button key={t.label} type="button" role="tab" aria-selected={is} data-ink={is ? undefined : ""} data-wash={is ? undefined : ""} onClick={() => onChange && onChange(t.label)}
+            style={{ background: is ? "var(--bg-active)" : "var(--wash, transparent)", border: "none", cursor: "pointer", height: "var(--control-h)", padding: "0 var(--control-px)", borderRadius: "var(--radius-md)", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", whiteSpace: "nowrap" }}>
+            {t.label}<CountBadge count={t.count} selected={is} showZero={t.showZero ?? showZero} />
           </button>
         );
       })}

package/components/tabs/Tabs.vue

@@ -1,11 +1,15 @@
 <script setup>
+import { computed } from 'vue'
+import CountBadge from './CountBadge.vue'
 // Underline tabs on a hairline baseline (Import/Export). Active = blue text + 2px blue underline. The bar is the region's bar height (sm 32 · md 40 · lg 44) with the tier's control text; omit `size` to inherit.
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
+// tabs: string[] | { label, count?, showZero? }[] — a count renders as a CountBadge 6px right of the label (neutral under the blue active tab); active is matched by label.
+const props = defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, showZero: Boolean, style: Object })
 const emit = defineEmits(['change'])
+const items = computed(() => props.tabs.map(t => typeof t === 'string' ? { label: t } : t))
 </script>
 <template>
   <div role="tablist" :data-size="size" :style="{ display: 'flex', gap: '4px', borderBottom: '1px solid var(--border-control)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--action-primary)' : 'var(--ink, var(--text-body))', whiteSpace: 'nowrap' }">{{ t }}</button>
+    <button v-for="t in items" :key="t.label" type="button" role="tab" :aria-selected="t.label === active" :data-ink="t.label === active ? undefined : ''" @click="emit('change', t.label)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t.label === active ? '2px solid var(--action-primary)' : '2px solid transparent', display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t.label === active ? 'var(--action-primary)' : 'var(--ink, var(--text-body))', whiteSpace: 'nowrap' }">{{ t.label }}<CountBadge :count="t.count" :selected="t.label === active" :show-zero="t.showZero ?? showZero" /></button>
   </div>
 </template>

package/components/tabs/tabs.prompt.md

@@ -1,9 +1,9 @@
 Tab systems: `Tabs` (underline — page level), `PanelTabs` (lighter underline — config panel, put the panel in an sm region), `PillTabs` (pill filters), `ViewToggle` (list/grid icons). All read the region's size tier: bars are 32 / 40 / 44px, pills 24 / 32 / 36px.
 
 ```jsx
-<Tabs tabs={["Import","Export"]} active={tab} onChange={setTab}/>
+<Tabs tabs={[{label:"Import",count:3},"Export"]} active={tab} onChange={setTab}/>  // any tab kind takes { label, count }
 <PanelTabs tabs={["Node Info","Calc Rules","Output Fields","SQL Preview"]} active={t} onChange={setT}/>
-<PillTabs tabs={["For Review","To be Submitted","For Approval"]} active={p} onChange={setP}/>
+<PillTabs tabs={[{label:"For Review",count:8},{label:"To be Submitted",count:3},"For Approval"]} active={p} onChange={setP}/>  // count → badge right of the label; 0 hidden unless showZero
 <ViewToggle value={view} onChange={setView}/>
 ```