@keyfunc/keybricks-ds 2.1.1 → 2.4.0

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

@@ -0,0 +1,26 @@
+// 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', 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: '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/navigation/theme-store.js

@@ -0,0 +1,9 @@
+// Theme persistence shared by ThemeToggle (React and Vue). Framework-neutral.
+// applyStoredTheme(): reads localStorage("kb-theme") and sets <html data-theme> before first paint —
+// call once at app start (main.jsx / main.js).
+export function applyStoredTheme() {
+  if (typeof document === 'undefined') return;
+  let t = 'light';
+  try { t = localStorage.getItem('kb-theme') || 'light'; } catch (e) {}
+  document.documentElement.dataset.theme = t;
+}

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>
-// Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit.
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
+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.
+// 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,11 +1,11 @@
 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 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  /** Size tier: sm 28 · md 32 · lg 40. Omit to inherit the enclosing region's tier (the default). */
   size?: "sm" | "md" | "lg";
   /** Hide labels; each label becomes the segment's aria-label and tooltip */
   iconOnly?: boolean;
@@ -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
- * size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
+ * 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 24 | md 32 | lg 36 — 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 24 · md 32 · lg 36); 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/ViewToggle.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-/** list/grid icon toggle — two IconButtons at the region's tier (sm 24 · md 32 · lg 36), active gets the tinted wash. */
+/** list/grid icon toggle — two IconButtons at the region's tier (sm 28 · md 32 · lg 40), active gets the tinted wash. */
 export interface ViewToggleProps {
   value?: "list" | "grid";
   /** Size tier. Omit to inherit the enclosing region's tier (the default). */

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.1.1",
-  "description": "Keybricks design system — 352 design tokens, three size tiers and 117 UI components in React and Vue 3, source-only.",
+  "version": "2.4.0",
+  "description": "Keybricks design system — design tokens, three size tiers and 120 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [

package/readme.md

@@ -11,7 +11,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - **Voice**: terse, technical, verb-first. Buttons are imperative: "Run Test", "Submit", "Save Settings", "Continue to Confirmation", "Mark as New", "Skip Selected".
 - **Casing**: Title Case for nav, headings, buttons, table headers ("Import History", "Custom Parameters"); sentence case for helper copy ("Import and manage configuration migrations across systems", "Click to upload or drag and drop", "JSON files only").
 - **Person**: no "I/we/you" — labels are objective and system-centric. Personal touch is limited to the dashboard greeting "Good evening, Felix" + full date "Monday, April 21, 2026".
-- **Terminology**: domain-precise EPM/ETL vocabulary — Detail Sheet, Dimension, Model, Association Match, Multi-Condition Judge, Group Calculation, Concat Merge, Reconciliation, Consolidation. Config codes render in mono ALL_CAPS_SNAKE ("FIN_CURRENCY_DEFAULT").
+- **Terminology**: domain-precise EPM/ETL vocabulary — Detail Sheet, Dimension, Model, Association Match, Multi-Condition Judge, Group Calculation, Concat Merge, Reconciliation, Consolidation. Config codes are ALL_CAPS_SNAKE ("FIN_CURRENCY_DEFAULT") and render as code chips — Menlo 12px on a light inset fill.
 - **Numbers & meta**: counts as "1 document", "2 items", relative time "2 hours ago", log lines "[14:30] Task started: Import".
 - **Status language**: "• Editing" dot-prefixed state chip; steps named as nouns ("Upload & Parse", "Comparison", "Confirmation", "Execution", "Results").
 - **Emoji**: never. Icons carry all decoration.
@@ -25,21 +25,23 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
   3. **Component** — `--cat-*`, `--tooltip-bg`, `--dropzone-border-hover`: one part of one component, added only when no tier-2 role fits.
 
   Rules that don't bend: step 400 and lighter never carry body text on white (they are surfaces, borders, disabled glyphs); `--on-accent` (#FFFFFF) is the only foreground allowed on a saturated fill, in **both** themes; label hues are mechanical (light = 100-step bg + 700-step text, dark = 950-step bg + 300-step text) so a new category needs no judgement; hue means *category*, the four feedback roles mean *severity*. Contrast targets: 4.5:1 body text, 3:1 for 18px+/bold and for UI boundaries. Three Colors cards carry the values: Palette (every ramp), Schemes (sets that work together), Transparency (the alpha scale).
-- **Type**: Inter only (300 stat numerals, 400 body, 500 UI-medium, 600 titles and table headers) on the 14px scale — 12 captions · 14 body and controls · 16 section titles · 20 page titles; 24px only for the greeting + stat numbers (weight 300); 11px for chart ticks and nothing else. Negative tracking from 14px up (-.15 to -.54px), 0 at 12px. Menlo for data/code/logs at the row's own size with tabular figures. Chinese, Japanese and Korean (`lang="zh|ja|ko"`): same sizes, weight 500 → 600, tracking 0, never caps.
+- **Type**: Inter only (300 stat numerals, 400 body, 500 UI-medium, 600 titles and table headers) on the 14px scale — 12 captions · 14 body and controls · 16 section titles · 20 page titles; 24px only for the greeting + stat numbers (weight 300); 11px for chart text and nothing else. Negative tracking from 14px up (-.15 to -.54px), 0 at 12px. Menlo for data/code/logs at the row's own size with tabular figures. Chinese (Simplified and Traditional), Japanese and Korean (`lang="zh|ja|ko"`) follow one rule: below 14px they are one step larger than Latin (12 → 13, 11 → 12, so no CJK text is under 12px), weights 500 and 600 both → 500 (CJK glyphs read heavier at the same number; medium 400 in sm regions, where bold strokes merge), tracking 0, never caps.
 - **Spacing**: 4-px family in practice (2/4/6/8/10/12/16/24/32); page padding 24×32; card padding 21 (dense 17); section gap 24. Inside a bar the gaps come from the size tier: 8 inside a group, 12/16/24 between groups, 12/16 from a card edge to the first control.
-- **Size tiers**: one tier per region — `data-size="sm" | "md" | "lg"` gives 24 / 32 / 36px controls, 12 / 14 / 14px control text and 32 / 40 / 44px rows; every control inside inherits, nothing interactive is below 24px, and heights or text sizes are never mixed in one row. md is the app default; dialogs are lg; dense grids are sm.
+- **Size tiers**: one tier per region — `data-size="sm" | "md" | "lg"` gives 28 / 32 / 40px controls, 12 / 14 / 14px control text (13 / 14 / 14 in CJK) and 36 / 40 / 48px rows; every control inside inherits, nothing interactive is below 24px, and heights or text sizes are never mixed in one row. md is the app default; dialogs are lg; dense grids are sm.
 - **Radii**: 4 small controls · 8 buttons/inputs/nav/chips · 10 cards/search/dropzone · 14 palette tiles · 16 canvas nodes · full circles for ports/steps/pills.
 - **Borders**: hairline everywhere — cards rgba(229,229,229,.6); controls #e5e5e5; row separators #f5f5f5; checkbox #d1d5db 1.5px; ports #d4d4d4 2px; dropzone dashed #d4d4d4 2px.
 - **Shadows**: nearly flat. Canvas nodes only: `0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)`; selection = blue-400 border + 2px blue-100 ring; badges get a 2px white ring. Everything else relies on borders.
 - **Backgrounds & imagery**: no photography, no illustration. The pipeline canvas is #fafafa with a subtle dot/curve grid; chart areas use soft blue gradient fills. Only bitmap: the cube logo.
 - **States**: every interactive element carries five states beyond rest. **Hover** moves the fill one step (`--bg-hover` wash on ghost items, `--action-primary-hover` on solid buttons, `--soft-hover` on tinted ones); controls whose colours are inline get it from the hover hooks in `tokens/hover.css`. **Press** moves it a second step: Button and IconButton use explicit tokens (`--action-primary-active`, `--action-dark-active`, `--bg-press`, `--soft-active`, `--danger-active`, `--danger-soft-active`) and opt out of the global layer with `data-press="own"`; every other control — nav rows, tree items, menu items, chips, tabs, list rows, option rows, palette tiles — gets press from the one global rule in `tokens/interaction.css` (`filter: var(--press-filter)` on `:active`, which multiplies whatever wash hover is already showing, and brightens rather than darkens in dark mode). No scale transforms, no shadow shifts; text-only buttons drop to 70% opacity instead. **Keyboard focus** is also global: a 2px `--focus-border` outline at 2px offset on `:focus-visible` only, so a mouse click never draws it. **Selected/active** is persistent, not transient: active nav = `--bg-active` pill + heading-weight text; selected node = blue border + ring. **Disabled** is 55% opacity (50% on icon buttons) with the default cursor.
 - **Motion**: kept minimal by design (see Motion below) — 120–160ms ease-out on hover/selection, nothing bouncy or far-traveling.
-- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left, bell + black "AI Assistant" pill right), optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
+- **Layout chrome**: left sidebar 240px (collapsible to a 64px icon rail), 56px top bar (search left; black "AI Assistant" pill, bell, help and the user menu right), sidebar tones recessed (grey, default) · flush · contrast · custom, optional 240px secondary panel (Documents tree, pipeline palette), 400px right config panel, 250px bottom data-preview drawer.
 - **Cards**: white, radius 10, hairline border, 21px padding, 14px/500 title — never elevated.
-- **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; mono cells at the row's size.
+- **Density**: high; table rows 32 (sm) · 40 (md) · 44 (lg); header cells the same size as body cells in weight 600, sentence case; amount cells at the row's size with tabular figures; config codes as 12px code chips.
 
 ## Iconography
 - The product's icons are the **Lucide** stroke set (16/14px at 1.33px effective stroke, `currentColor`). We ship `components/icons/Icon.jsx`, embedding the exact Lucide path data for every glyph the product uses. Usage: `<Icon name="search" size={16}/>`.
+- **Keybricks glyphs**: thirteen icons drawn for Keybricks itself sit in the core set beside the Lucide glyphs — AI (`ai`, `ai-sparkles`), modules (`reconciliation`, `consolidation`, `journal`, `event`, `view-tree`) and actions (`drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`, `time-restatement`). Search the Icon Gallery before drawing a new one: *hierarchy* turned out to be `layers`, and *change* is `repeat`.
+- **Drawing rules** (every core glyph, and any glyph added later): 24×24 grid; paths stay inside 2–22, which leaves 1px of padding once the stroke is drawn; stroke 2, round caps and joins, no fill, `currentColor`; integer coordinates; at least 2px of clear space between separate elements; rect corners rx 2, or rx 1 at 8px and smaller. Check a new glyph at 14 and 16px before adding it.
 - Icon color follows text color (#525252 default chrome, #a1a1a1 muted, category hue inside tinted tiles).
 - Tinted icon tiles are a signature motif: 40×40 r14 (palette), 48×48 r16 (nodes), 32×32 r8 hairline-bordered (list rows) — 100-tint bg + 600-hue glyph.
 - Emoji or unicode-as-icon: never.
@@ -67,7 +69,7 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 
 **For developers integrating this system**
 - `DESIGN.md` — the rules file for AI coding agents: absolute token values, interaction states, an explicit "do not" list, and voice. Point Claude Code / Cursor / Copilot at this before they generate UI.
-- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 117-component index with import paths, token reference, dark mode, interaction states, versioning.
+- `INTEGRATION.md` — the integration guide: three steps to first paint, the full 120-component index with import paths, token reference, dark mode, interaction states, versioning.
 - `DEPLOY.md` — running the system on GitLab: what ships in the package and what stays on Pages, the entry points, the release flow, and the bundler config each consumer needs.
 - `index.html` · `gallery.html` — the documentation site: the browsable system and the filterable thumbnail grid, both deployed to GitLab Pages by CI.
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` — makes the system an installable package: a version tag publishes to the GitLab Package Registry, the default branch redeploys the docs site, and `npm run check` fails the pipeline if the generated tokens or barrels drift from source.
@@ -76,18 +78,17 @@ One product: the Keybricks web app (desktop, 1512×~860 design size). Key surfac
 - `styles.css` — global CSS entry (imports all token files); `keybricks.css` — the package's stylesheet entry (tokens + hover hooks).
 - `assets/` — keybricks-logo.png and the icon keyword indexes.
 - `guidelines/` — foundation showcase cards (Design System tab).
-- `ui_kits/keybricks-app/` — interactive product recreation: Home, Documents, Pipeline editor, System Migration.
 - `SKILL.md` — agent skill entry file.
 
 ## Components
-- `components/icons/` — Icon (+ ICON_PATHS glyph data + feather-paths.js, the full Feather fallback), Unicon (Unicons CDN webfont).
+- `components/icons/` — Icon (+ ICON_PATHS glyph data + feather-paths.js, the full Feather fallback), DataSourceLogo (+ DATA_SOURCE_LOGOS), Unicon (Unicons CDN webfont).
 - `components/buttons/` — Button, IconButton, ActionChip.
 - `components/forms/` — Field, Input, Textarea, Select, SearchInput, Checkbox, NumberStepper, Dropzone, Switch, Radio, RadioGroup, Combobox, MultiSelect, DatePicker, Slider.
 - `components/tabs/` — Tabs, PanelTabs, PillTabs, ViewToggle, SegmentedControl.
 - `components/display/` — Card, StatCard, Badge, StatusBadge, IconTile, ProgressBar, Donut, AreaChart, MiniBars, Avatar, AvatarGroup, Tag, Divider, Kbd.
 - `components/feedback/` — Stepper, ContextMenu, ActivityItem, DotActivity, LogViewer, Tooltip, Modal, Toast, ToastStack, Alert, EmptyState, Skeleton, Spinner, Menu, Accordion, Banner, Drawer, Timeline.
 - `components/data/` — Table, ListRow, Pagination, KeyValue, KeyValueList, DiffValue, CodeBlock, Spreadsheet, SmartTable, FilterBar.
-- `components/navigation/` — Sidebar (+ KEYBRICKS_NAV), TopBar, PageToolbar, PageHeading, DocTree, Breadcrumb, Tree, ThemeToggle (+ applyStoredTheme).
+- `components/navigation/` — Sidebar (+ KEYBRICKS_NAV, KEYBRICKS_NAV_FOOTER, KEYBRICKS_MGMT, SIDEBAR_COLORS), SidePanel, TopBar, UserMenu, PageToolbar, PageHeading, DocTree, Breadcrumb, Tree, ThemeToggle (+ applyStoredTheme).
 - `components/pipeline/` — NodeCard, Port, PortLabel, PaletteItem, PaletteListItem, PalettePanel (+ PIPELINE_CATALOG), PipelineCanvas, DataPreview, ConfigPanel, ZoomControls.
 - `components/charts/` — 27 chart types: Sparkline, LineChart, BarChart, BarList, DonutChart, ScatterChart, HeatmapChart, WaterfallChart, BulletChart, GaugeChart, FunnelChart, TreemapChart, RadarChart, Histogram, BoxPlot, ParetoChart, CandlestickChart, SankeyChart, ChordChart, SunburstChart, WorldMap, GanttChart, and the 3D set Surface3D, Scatter3D, Bar3D, Pie3D, Ribbon3D (SVG painter's-algorithm rendering, drag to rotate; + ChartKit shared legend/tooltip, `tokens/charts.css` series colors and plot furniture). Three scales: micro inside stat tiles, interactive mid-size inside cards, full-page analysis; every chart keeps its hover read-out at every scale. WorldMap uses real Natural Earth geography and needs the page to load pinned d3 and topojson.
 

package/readme.zh-CN.md

@@ -13,7 +13,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - **语气**：简洁、技术化、动词开头。按钮用祈使句："Run Test"、"Submit"、"Save Settings"、"Continue to Confirmation"、"Mark as New"、"Skip Selected"。
 - **大小写**：导航、标题、按钮、表头用词首大写（Title Case），如 "Import History"、"Custom Parameters"；辅助说明文字用句首大写（sentence case），如 "Import and manage configuration migrations across systems"、"Click to upload or drag and drop"、"JSON files only"。
 - **人称**：不使用"我 / 我们 / 你"——文案客观、以系统为中心。唯一的人性化表达是仪表盘问候语 "Good evening, Felix" 加完整日期 "Monday, April 21, 2026"。
-- **术语**：精确的 EPM/ETL 领域词汇——Detail Sheet、Dimension、Model、Association Match、Multi-Condition Judge、Group Calculation、Concat Merge、Reconciliation、Consolidation。配置代码用等宽字体、全大写下划线格式（"FIN_CURRENCY_DEFAULT"）。
+- **术语**：精确的 EPM/ETL 领域词汇——Detail Sheet、Dimension、Model、Association Match、Multi-Condition Judge、Group Calculation、Concat Merge、Reconciliation、Consolidation。配置代码写作全大写下划线（"FIN_CURRENCY_DEFAULT"），显示为代码标签：Menlo 12px、浅灰底。配置代码用等宽字体、全大写下划线格式（"FIN_CURRENCY_DEFAULT"）。
 - **数字与元信息**：计数写作 "1 document"、"2 items"；相对时间写作 "2 hours ago"；日志行写作 "[14:30] Task started: Import"。
 - **状态文案**：状态标签带圆点前缀，如 "• Editing"；步骤用名词命名（"Upload & Parse"、"Comparison"、"Confirmation"、"Execution"、"Results"）。
 - **Emoji**：从不使用。所有装饰性表达交给图标。
@@ -27,9 +27,9 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
   3. **组件层** —— `--cat-*`、`--tooltip-bg`、`--dropzone-border-hover`：只属于某个组件的某个部位，仅在第二层确实没有合适角色时才新增。
 
   不可打破的规则：400 及更浅的档位不得在白底上承载正文（它们是表面色、边框色、禁用态图标色）；饱和填充之上的前景色只能用 `--on-accent`（#FFFFFF），**两套主题都是**；标签色相按机械规则取值（浅色 = 100 档底 + 700 档字，深色 = 950 档底 + 300 档字），新增分类无需主观判断；色相表达*分类*，四组反馈色表达*严重程度*。对比度目标：正文 4.5:1，18px 以上或加粗文字及界面边界 3:1。Colors 分组下三张卡片给出全部色值：Palette（完整色阶）、Schemes（可搭配使用的配色组合）、Transparency（透明度阶）。
-- **字体**：只用 Inter（300 用于统计数字，400 正文，500 界面中等字重，600 标题与表头），采用 14px 字号阶梯——12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；24px 只用于问候语和统计数字（字重 300）；11px 只用于图表刻度。14px 起使用负字距（-.15 到 -.54px），12px 字距为 0。数据 / 代码 / 日志用 Menlo，与所在行同字号，使用等宽数字。中文、日文、韩文（`lang="zh|ja|ko"`）：字号不变，500 字重改为 600，字距为 0，不做大写转换。
+- **字体**：只用 Inter（300 用于统计数字，400 正文，500 界面中等字重，600 标题与表头），采用 14px 字号阶梯——12 说明文字 · 14 正文与控件 · 16 区块标题 · 20 页面标题；24px 只用于问候语和统计数字（字重 300）；11px 只用于图表文字。14px 起使用负字距（-.15 到 -.54px），12px 字距为 0。数据 / 代码 / 日志用 Menlo，与所在行同字号，使用等宽数字。中文（简体与繁体）、日文、韩文（`lang="zh|ja|ko"`）统一一条规则：14px 以下比西文大一号（12 → 13，11 → 12，任何 CJK 文字都不小于 12px）；500 和 600 字重都改为 500（同样的数字，中日韩文字看起来比字母粗；sm 区域内中等字重改为 400，因为小字号加粗会让笔画粘连）；字距为 0，不做大写转换。
 - **间距**：实际采用 4px 体系（2/4/6/8/10/12/16/24/32）；页面内边距 24×32；卡片内边距 21（紧凑型 17）；区块间距 24。工具栏内的间距由尺寸层级决定：组内 8，组间 12/16/24，卡片边缘到第一个控件 12/16。
-- **尺寸层级**：每个区域只用一档——`data-size="sm" | "md" | "lg"` 对应 24 / 32 / 36px 控件、12 / 14 / 14px 控件文字、32 / 40 / 44px 行高；区域内所有控件自动继承，可交互元素不小于 24px，同一行内绝不混用高度或字号。md 是应用默认，对话框为 lg，密集表格为 sm。
+- **尺寸层级**：每个区域只用一档——`data-size="sm" | "md" | "lg"` 对应 28 / 32 / 40px 控件、12 / 14 / 14px 控件文字（CJK 为 13 / 14 / 14）、36 / 40 / 48px 行高；区域内所有控件自动继承，可交互元素不小于 24px，同一行内绝不混用高度或字号。md 是应用默认，对话框为 lg，密集表格为 sm。
 - **圆角**：4 小型控件 · 8 按钮 / 输入框 / 导航 / 标签 · 10 卡片 / 搜索框 / 上传区 · 14 组件面板图标块 · 16 画布节点 · 端口 / 步骤圆点 / 胶囊用全圆角。
 - **边框**：全局使用发丝级细边框——卡片 rgba(229,229,229,.6)；控件 #e5e5e5；行分隔线 #f5f5f5；复选框 #d1d5db 1.5px；端口 #d4d4d4 2px；上传区虚线 #d4d4d4 2px。
 - **阴影**：几乎全平面。只有画布节点有阴影：`0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)`；选中态 = blue-400 边框 + 2px blue-100 光环；徽标带 2px 白色描边。其余一律靠边框区分层次。
@@ -38,10 +38,12 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - **动效**：刻意克制（见下方"动效"一节）——悬停 / 选中 120–160ms 缓出，不弹跳，不大幅位移。
 - **布局框架**：左侧边栏 240px（可收起为 64px 图标栏）；顶栏 56px（左侧搜索，右侧铃铛 + 黑色 "AI Assistant" 胶囊）；可选的 240px 二级面板（文档树、管道组件面板）；右侧配置面板 400px；底部数据预览抽屉 250px。
 - **卡片**：白底、10px 圆角、细边框、21px 内边距、14px / 500 字重标题——从不使用投影抬高。
-- **密度**：高密度；表格行高 32（sm）· 40（md）· 44（lg）；表头与单元格同字号、字重 600、句首大写；等宽单元格与所在行同字号。
+- **密度**：高密度；表格行高 32（sm）· 40（md）· 44（lg）；表头与单元格同字号、字重 600、句首大写；金额单元格与所在行同字号、同字体，只加等宽数字（tabular figures）；配置代码用 12px 代码标签。等宽字体只用于代码。
 
 ## 图标系统
 - 产品图标是 **Lucide** 线性图标集（16/14px，实际描边约 1.33px，颜色为 `currentColor`）。我们提供 `components/icons/Icon.jsx`，内嵌产品用到的每个图形的 Lucide 原始路径数据。用法：`<Icon name="search" size={16}/>`。
+- **Keybricks 自绘图标**：为 Keybricks 自行绘制的 13 个图标与 Lucide 图标一起放在核心集中——AI 类（`ai`、`ai-sparkles`）、模块类（`reconciliation`、`consolidation`、`journal`、`event`、`view-tree`）和操作类（`drilldown`、`add-below`、`copy-data`、`task-execution`、`time-future`、`time-restatement`）。新画图标之前，先在图标库里搜索：*hierarchy* 其实就是 `layers`，*change* 就是 `repeat`。
+- **绘制规范**（所有核心图标，以及今后新增的图标）：24×24 网格；路径限制在 2–22 范围内，描边后四周留 1px 边距；描边 2，圆头圆角，无填充，`currentColor`；坐标取整数；相互独立的元素之间至少留 2px 空隙；矩形圆角 rx 2，8px 及以下的小矩形用 rx 1。新增图标前，先在 14px 和 16px 下检查。
 - 图标颜色跟随文字颜色（默认框架色 #525252，弱化态 #a1a1a1，彩色图标块内为对应分类色）。
 - 彩色图标块是标志性元素：40×40 圆角 14（组件面板）、48×48 圆角 16（节点）、32×32 圆角 8 带细边框（列表行）——100 档浅色底 + 600 档分类色图标。
 - 从不用 emoji 或 unicode 字符充当图标。
@@ -69,7 +71,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 
 **开发团队接入入口**
 - `DESIGN.md` —— 给 AI 编程代理读的规则文件：绝对数值、交互状态、明确的"禁止"清单、文案语气。让 Claude Code / Cursor / Copilot 在生成界面前先读它。
-- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 117 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
+- `INTEGRATION.md` —— 接入指南：三步跑通首屏、全部 120 个组件的清单与引入路径、token 速查、深色模式、交互状态、版本策略。
 - `DEPLOY.md` —— 在 GitLab 上运行本系统：包里发布什么、什么留在 Pages 上、入口点、发布流程、各消费方需要的构建配置。
 - `index.html` · `gallery.html` —— 文档站：可浏览的系统主页与可筛选的缩略图网格，均由 CI 部署到 GitLab Pages。
 - `package.json` · `.gitlab-ci.yml` · `_scripts/` —— 让本系统成为可安装的包：打版本 tag 即发布到 GitLab Package Registry，默认分支更新即重新部署文档站，生成的 token 或入口文件与源码不一致时 `npm run check` 会让流水线失败。
@@ -78,7 +80,6 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - `styles.css` —— 全局 CSS 入口（引入所有 token 文件）；`keybricks.css` —— 包的样式入口（token + 悬停钩子）。
 - `assets/` —— keybricks-logo.png 与图标关键词索引。
 - `guidelines/` —— 基础规范展示卡片（Design System 标签页）。
-- `ui_kits/keybricks-app/` —— 可交互的产品复刻：首页、文档、管道编辑器、系统迁移。
 - `SKILL.md` —— Agent 技能入口文件。
 
 ## 组件清单
@@ -89,7 +90,7 @@ Keybricks 是面向财务团队的企业绩效管理（EPM）平台：文档与
 - `components/display/` —— Card、StatCard、Badge、StatusBadge、IconTile、ProgressBar、Donut、AreaChart、MiniBars、Avatar、AvatarGroup、Tag、Divider、Kbd。
 - `components/feedback/` —— Stepper、ContextMenu、ActivityItem、DotActivity、LogViewer、Tooltip、Modal、Toast、ToastStack、Alert、EmptyState、Skeleton、Spinner、Menu、Accordion、Banner、Drawer、Timeline。
 - `components/data/` —— Table、ListRow、Pagination、KeyValue、KeyValueList、DiffValue、CodeBlock、Spreadsheet、SmartTable、FilterBar。
-- `components/navigation/` —— Sidebar（+ KEYBRICKS_NAV）、TopBar、PageToolbar、PageHeading、DocTree、Breadcrumb、Tree、ThemeToggle（+ applyStoredTheme）。
+- `components/navigation/` —— Sidebar（+ KEYBRICKS_NAV）、SidePanel、TopBar、UserMenu、PageToolbar、PageHeading、DocTree、Breadcrumb、Tree、ThemeToggle（+ applyStoredTheme）。
 - `components/pipeline/` —— NodeCard、Port、PortLabel、PaletteItem、PaletteListItem、PalettePanel（+ PIPELINE_CATALOG）、PipelineCanvas、DataPreview、ConfigPanel、ZoomControls。
 - `components/charts/` —— 27 种图表：Sparkline、LineChart、BarChart、BarList、DonutChart、ScatterChart、HeatmapChart、WaterfallChart、BulletChart、GaugeChart、FunnelChart、TreemapChart、RadarChart、Histogram、BoxPlot、ParetoChart、CandlestickChart、SankeyChart、ChordChart、SunburstChart、WorldMap、GanttChart，以及 3D 系列 Surface3D、Scatter3D、Bar3D、Pie3D、Ribbon3D（SVG 画家算法渲染，拖拽旋转；+ ChartKit 共享图例 / 提示框，`tokens/charts.css` 提供序列色与绘图配件）。三种尺寸：统计卡内的微型、卡片内可交互的中型、整页分析的大型；每种图表在任何尺寸都保留悬停读数。WorldMap 使用真实的 Natural Earth 地理数据，需要页面加载固定版本的 d3 与 topojson。
 

package/tokens/alpha.css

@@ -15,9 +15,11 @@
 --neutral-alpha-2:rgba(10,10,10,.02);--neutral-alpha-4:rgba(10,10,10,.04);--neutral-alpha-8:rgba(10,10,10,.08);--neutral-alpha-12:rgba(10,10,10,.12);--neutral-alpha-16:rgba(10,10,10,.16);--neutral-alpha-24:rgba(10,10,10,.24);--neutral-alpha-32:rgba(10,10,10,.32);--neutral-alpha-48:rgba(10,10,10,.48);--neutral-alpha-64:rgba(10,10,10,.64);--neutral-alpha-80:rgba(10,10,10,.8);
 --brand-alpha-8:rgba(21,93,252,.08);--brand-alpha-12:rgba(21,93,252,.12);--brand-alpha-16:rgba(21,93,252,.16);--brand-alpha-24:rgba(21,93,252,.24);--brand-alpha-32:rgba(21,93,252,.32);
 /* Semantic overlays built from the ramps above */
---overlay-hover:var(--neutral-alpha-4);--overlay-press:var(--neutral-alpha-8);--overlay-selected:var(--brand-alpha-8);--overlay-drag:var(--brand-alpha-12);
+--overlay-hover:var(--neutral-alpha-4);--overlay-press:var(--neutral-alpha-12); /* on white these equal --bg-hover / --bg-press; on any other surface they darken it by the same step */
+--overlay-selected:var(--brand-alpha-8);--overlay-drag:var(--brand-alpha-12);
 }
 [data-theme="dark"]{
 --neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
 --brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
+--overlay-hover:var(--neutral-alpha-8);--overlay-press:var(--neutral-alpha-16); /* dark: matches the --bg-hover / --bg-press steps on --bg-surface */
 }

package/tokens/colors.css

@@ -25,7 +25,7 @@
 --on-accent:#ffffff;
 /* Foreground on the neutral "dark pill" (AI Assistant), which inverts in dark */
 --action-dark-fg:#ffffff;
---border-card:rgba(229,229,229,.6);--border-control:var(--neutral-200);--border-subtle:var(--neutral-100);--border-strong:var(--neutral-300);
+--border-card:rgba(229,229,229,.6);--border-control:var(--neutral-200);--border-split:var(--neutral-300);--border-subtle:var(--neutral-100);--border-strong:var(--neutral-300);
 --action-primary:var(--blue-600);--action-primary-hover:var(--blue-700);--action-primary-active:#1039c4;--action-dark:var(--neutral-900);--action-dark-hover:var(--neutral-800);--action-dark-active:var(--neutral-950);
 /* Press (active) fills — one step past the hover value in each family */
 --bg-press:var(--neutral-200);--soft-active:var(--blue-200);--danger-active:var(--red-800);--danger-soft-hover:var(--red-100);--danger-soft-active:var(--red-200);