@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/components/navigation/Sidebar.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Icon } from "../icons/Icon.jsx";
+import { KEYBRICKS_NAV } from "./nav-model.js";
 
 function NavItem({ icon, label, active, indent, collapsed, badge, onClick }) {
   const [hover, setHover] = React.useState(false);
@@ -30,7 +31,7 @@ export function Sidebar({ items = [], footerItems = [{ icon: "circle-help", labe
         {onToggleCollapse ? <NavItem icon="panel-left" label="Collapse" collapsed={collapsed} onClick={onToggleCollapse} /> : null}
         {items.map((it) => it.children ? (
           <div key={it.label}>
-            <div onClick={() => toggleSection(it.label)} style={{ height: "var(--h-subnav-item)", display: "flex", alignItems: "center", gap: 10, padding: collapsed ? "6px 10px" : "6px 10px", justifyContent: collapsed ? "center" : "flex-start", cursor: "pointer", color: "var(--text-body)", borderRadius: "var(--radius-md)", boxSizing: "border-box" }}>
+            <div role="button" tabIndex={0} data-wash="" onClick={() => toggleSection(it.label)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleSection(it.label); } }} style={{ background: "var(--wash, transparent)", transition: "var(--t-hover)", height: "var(--h-subnav-item)", display: "flex", alignItems: "center", gap: 10, padding: collapsed ? "6px 10px" : "6px 10px", justifyContent: collapsed ? "center" : "flex-start", cursor: "pointer", color: "var(--text-body)", borderRadius: "var(--radius-md)", boxSizing: "border-box" }}>
               <Icon name={it.icon} size={16} />
               {!collapsed ? <><span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)", flex: 1 }}>{it.label}</span><Icon name={openSections.includes(it.label) ? "chevron-up" : "chevron-down"} size={14} /></> : null}
             </div>
@@ -51,25 +52,5 @@ export function Sidebar({ items = [], footerItems = [{ icon: "circle-help", labe
   );
 }
 
-/** Default Keybricks nav model (Home dashboard). */
-export const KEYBRICKS_NAV = [
-  { icon: "house", label: "Home" },
-  { icon: "file-text", label: "Documents" },
-  { icon: "layout-grid", label: "Business Intelligence" },
-  { icon: "database", label: "Data Integration" },
-  { icon: "scale", label: "Reconciliation" },
-  { icon: "network", label: "Consolidation" },
-  {
-    icon: "folder-cog", label: "Management", children: [
-      { icon: "box", label: "Modeling" },
-      { icon: "workflow", label: "Workflow" },
-      { icon: "shield", label: "Security Management" },
-      { icon: "refresh-cw", label: "System Migration" },
-      { icon: "chart-column", label: "Business Logic" },
-      { icon: "list-todo", label: "Tasks Management" },
-      { icon: "circle-check", label: "Validation Rules" },
-      { icon: "settings-2", label: "Control Center" },
-      { icon: "network", label: "Reconciliation" },
-    ],
-  },
-];
+/** Default Keybricks nav model (Home dashboard) — defined in nav-model.js, shared with the Vue entry. */
+export { KEYBRICKS_NAV };

package/components/navigation/Sidebar.vue

@@ -16,11 +16,11 @@ const props = defineProps({
 const emit = defineEmits(['select', 'toggleCollapse'])
 const openSections = ref(props.items.filter(i => i.children && (i.open || i.children.some(c => c.label === props.active))).map(i => i.label))
 function toggleSection(l) { openSections.value = openSections.value.includes(l) ? openSections.value.filter(x => x !== l) : [...openSections.value, l] }
-function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-item)' : 'var(--h-nav-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: 10, padding: indent ? '6px 10px' : '8px 10px', boxSizing: 'border-box', cursor: 'pointer', background: active ? 'var(--bg-active)' : 'transparent', color: active ? 'var(--text-heading)' : 'var(--text-body)', transition: 'var(--t-hover)' } }
+function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-item)' : 'var(--h-nav-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '10px', padding: indent ? '6px 10px' : '8px 10px', boxSizing: 'border-box', cursor: 'pointer', background: active ? 'var(--bg-active)' : 'transparent', color: active ? 'var(--text-heading)' : 'var(--text-body)', transition: 'var(--t-hover)' } }
 </script>
 <template>
   <aside :style="{ width: collapsed ? 'var(--rail-w)' : 'var(--sidebar-w)', height, background: 'var(--bg-surface)', borderRight: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, transition: 'width .15s ease', ...style }">
-    <div :style="{ height: 'var(--topbar-h)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px', boxSizing: 'border-box', justifyContent: collapsed ? 'center' : 'flex-start', flexShrink: 0 }">
+    <div :style="{ height: 'var(--topbar-h)', borderBottom: '1px solid var(--border-card)', display: 'flex', alignItems: 'center', gap: '10px', padding: '0 16px', boxSizing: 'border-box', justifyContent: collapsed ? 'center' : 'flex-start', flexShrink: 0 }">
       <img :src="logo" alt="" style="width:24px;height:24px;object-fit:contain" />
       <span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:-.609px;color:var(--text-primary)">{{ brand }}</span>
     </div>
@@ -28,7 +28,7 @@ function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-i
       <div v-if="canCollapse" role="button" tabindex="0" @click="emit('toggleCollapse')" :style="itemStyle(false, false)"><Icon name="panel-left" :size="16" /><span v-if="!collapsed" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);white-space:nowrap;flex:1">Collapse</span></div>
       <template v-for="it in items" :key="it.label">
         <div v-if="it.children">
-          <div role="button" tabindex="0" @click="toggleSection(it.label)" :style="{ height: 'var(--h-subnav-item)', display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', justifyContent: collapsed ? 'center' : 'flex-start', cursor: 'pointer', color: 'var(--text-body)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box' }">
+          <div role="button" tabindex="0" data-wash="" @click="toggleSection(it.label)" @keydown.enter.prevent="toggleSection(it.label)" @keydown.space.prevent="toggleSection(it.label)" :style="{ background: 'var(--wash, transparent)', transition: 'var(--t-hover)', height: 'var(--h-subnav-item)', display: 'flex', alignItems: 'center', gap: '10px', padding: '6px 10px', justifyContent: collapsed ? 'center' : 'flex-start', cursor: 'pointer', color: 'var(--text-body)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box' }">
             <Icon :name="it.icon" :size="16" />
             <template v-if="!collapsed"><span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);letter-spacing:var(--tracking-base);flex:1">{{ it.label }}</span><Icon :name="openSections.includes(it.label) ? 'chevron-up' : 'chevron-down'" :size="14" /></template>
           </div>
@@ -45,10 +45,5 @@ function itemStyle(active, indent) { return { height: indent ? 'var(--h-subnav-i
   </aside>
 </template>
 
-<!-- KEYBRICKS_NAV — default Keybricks nav model (Home dashboard), same shape as Sidebar.jsx's export, for reference:
-export const KEYBRICKS_NAV = [
-  { icon: 'house', label: 'Home' }, { icon: 'file-text', label: 'Documents' },
-  { icon: 'layout-grid', label: 'Business Intelligence' }, { icon: 'database', label: 'Data Integration' },
-  { icon: 'scale', label: 'Reconciliation' }, { icon: 'network', label: 'Consolidation' },
-  { icon: 'folder-cog', label: 'Management', children: [ ... ] },
-] -->
+<!-- The product's nav model is KEYBRICKS_NAV in ./nav-model.js — also exported from the Vue entry:
+     import { Sidebar, KEYBRICKS_NAV } from '@keyfunc/keybricks-ds/vue' -->

package/components/navigation/ThemeToggle.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { px } from '../px.js'
 import { ref, computed, watch, onMounted } from 'vue'
 import Icon from '../icons/Icon.vue'
 const props = defineProps({ size: { type: Number, default: 34 }, dark: { type: Boolean, default: null }, style: Object })
@@ -12,7 +13,7 @@ function toggle() { if (props.dark != null) emit('update:dark', !dark.value); el
 </script>
 <template>
   <button type="button" :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'" @click="toggle" @mouseenter="hover = true" @mouseleave="hover = false"
-    :style="{ width: size, height: size, borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: hover ? 'var(--bg-hover)' : 'transparent', color: 'var(--text-body)', padding: 0, transition: 'var(--t-hover)', ...style }">
+    :style="{ width: px(size), height: px(size), borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: hover ? 'var(--bg-hover)' : 'transparent', color: 'var(--text-body)', padding: 0, transition: 'var(--t-hover)', ...style }">
     <Icon :name="dark ? 'sparkles' : 'moon'" :size="18" />
   </button>
 </template>

package/components/navigation/TopBar.d.ts

@@ -15,10 +15,12 @@ export interface PageToolbarProps {
   status?: string;
   actions?: React.ReactNode;
   onBack?: () => void;
+  /** Size tier for the toolbar's controls. Omit to inherit (the default). */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function PageToolbar(props: PageToolbarProps): JSX.Element;
-/** 15px/500 page title + muted subtitle. */
+/** Page title (--text-lg 20px/500) + muted subtitle. */
 export interface PageHeadingProps {
   title?: string;
   subtitle?: string;

package/components/navigation/TopBar.jsx

@@ -20,15 +20,15 @@ export function TopBar({ placeholder = "Search documents, workflows, data...", a
 }
 
 /** Editor toolbar: back chevron, 14px/600 title, "• Editing" status, right action slot. */
-export function PageToolbar({ title, status = "• Editing", actions, onBack, style }) {
+export function PageToolbar({ title, status = "• Editing", actions, onBack, size, style }) {
   return (
-    <div style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 16px", boxSizing: "border-box", flexShrink: 0, ...style }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        {onBack ? <IconButton icon="chevron-left" size="md" onClick={onBack} /> : null}
+    <div data-size={size} style={{ height: "var(--topbar-h)", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-card)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 var(--edge-pad)", boxSizing: "border-box", flexShrink: 0, ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "var(--control-gap)" }}>
+        {onBack ? <IconButton icon="chevron-left" onClick={onBack} label="Back" /> : null}
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
-        {status ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-muted)", marginLeft: 6 }}>{status}</span> : null}
+        {status ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-muted)", marginLeft: 6 }}>{status}</span> : null}
       </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>{actions}</div>
+      <div style={{ display: "flex", alignItems: "center", gap: "var(--control-gap)" }}>{actions}</div>
     </div>
   );
 }

package/components/navigation/Tree.jsx

@@ -153,7 +153,7 @@ function Row({ item, state, cfg, api }) {
         {chevron}
         {cfg.checkable && node.checkable !== false ? (
           <span onClick={(e) => e.stopPropagation()} style={{ display: "inline-flex", flexShrink: 0 }}>
-            <Checkbox size="sm" checked={checked} indeterminate={half} disabled={disabled || node.disableCheckbox} onChange={() => api.check(key)} />
+            <Checkbox checked={checked} indeterminate={half} disabled={disabled || node.disableCheckbox} onChange={() => api.check(key)} />
           </span>
         ) : null}
         {cfg.showIcon ? (
@@ -161,11 +161,11 @@ function Row({ item, state, cfg, api }) {
             <Icon name={node.icon || (branch ? (open ? "folder-open" : "folder") : "file-text")} size={15} />
           </span>
         ) : null}
-        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", fontWeight: selected ? "var(--weight-medium)" : "var(--weight-regular)", color: disabled ? "var(--text-muted)" : "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
           <Highlight text={titleOf(node)} query={cfg.searchValue} />
         </span>
-        {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
-        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
+        {node.tag ? <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: 1, padding: "2px 5px", borderRadius: "var(--radius-sm)", background: "var(--bg-inset)", color: "var(--text-secondary)", flexShrink: 0 }}>{node.tag}</span> : null}
+        {node.count != null ? <span style={{ marginLeft: "auto", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums", fontSize: "var(--text-xs)", color: "var(--text-muted)", paddingLeft: 8 }}>{node.count}</span> : null}
         {cfg.rowActions && !disabled ? <span style={{ marginLeft: node.count != null ? 6 : "auto", display: "flex", gap: 2, opacity: hover ? 1 : 0, transition: "var(--t-hover)" }} onClick={(e) => e.stopPropagation()}>{cfg.rowActions(node)}</span> : null}
       </div>
       {open && loading && !kids.length ? (
@@ -340,7 +340,7 @@ export function Tree({
     <div role="tree" aria-multiselectable={multiple || undefined} style={{ display: "flex", flexDirection: "column", gap: showLine ? 0 : 1, ...style }}>
       <style>{"@keyframes kb-tree-spin{to{transform:rotate(360deg)}}"}</style>
       {rows.length === 0 ? (
-        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-muted)" }}>No matching items</div>
+        <div style={{ padding: "10px 8px", fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", color: "var(--text-muted)" }}>No matching items</div>
       ) : rows.map((r) => <Row key={r.key} item={r} state={state} cfg={cfg} api={api} />)}
     </div>
   );

package/components/navigation/Tree.vue

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

package/components/navigation/nav-model.js

@@ -0,0 +1,23 @@
+// 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">.
+export const KEYBRICKS_NAV = [
+  { icon: 'house', label: 'Home' },
+  { icon: 'file-text', label: 'Documents' },
+  { icon: 'layout-grid', label: 'Business Intelligence' },
+  { icon: 'database', label: 'Data Integration' },
+  { icon: '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' },
+    ],
+  },
+];

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/pipeline/ConfigPanel.d.ts

@@ -13,6 +13,8 @@ export interface ConfigPanelProps {
   onPreview?: () => void;
   children?: React.ReactNode;
   height?: number | string;
+  /** Size tier for the panel's controls. Omit to inherit (→ md). */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function ConfigPanel(props: ConfigPanelProps): JSX.Element;

package/components/pipeline/ConfigPanel.jsx

@@ -3,24 +3,24 @@ import { Button } from "../buttons/Button.jsx";
 import { PanelTabs } from "../tabs/Tabs.jsx";
 import { NumberStepper } from "../forms/NumberStepper.jsx";
 
-/** Right node-config panel — 400px: title/subtitle + Save Settings, preview-rows row, PanelTabs, body slot. */
-export function ConfigPanel({ title, subtitle, tabs = ["Node Info", "Calc Rules", "Output Fields", "SQL Preview"], activeTab, onTab, previewRows = 100, onPreviewRows, onSave, onPreview, children, height = "100%", style }) {
+/** Right node-config panel — 400px: title/subtitle + Save Settings, preview-rows row, PanelTabs, body slot. A size region (default inherit → md): every control in the header shares one tier. */
+export function ConfigPanel({ title, subtitle, tabs = ["Node Info", "Calc Rules", "Output Fields", "SQL Preview"], activeTab, onTab, previewRows = 100, onPreviewRows, onSave, onPreview, children, height = "100%", size, style }) {
   const [tab, setTab] = React.useState(tabs[0]);
   const cur = activeTab != null ? activeTab : tab;
   return (
-    <div style={{ width: "var(--panel-w)", height, background: "var(--bg-surface)", borderLeft: "1px solid var(--border-card)", display: "flex", flexDirection: "column", boxSizing: "border-box", flexShrink: 0, ...style }}>
+    <div data-size={size} style={{ width: "var(--panel-w)", height, background: "var(--bg-surface)", borderLeft: "1px solid var(--border-card)", display: "flex", flexDirection: "column", boxSizing: "border-box", flexShrink: 0, ...style }}>
       <div style={{ padding: "12px 16px 0", borderBottom: "1px solid var(--border-card)", flexShrink: 0 }}>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
           <div style={{ display: "flex", flexDirection: "column" }}>
-            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "17.5px", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
-            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", paddingTop: 5 }}>{subtitle}</span>
+            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-md)", lineHeight: "var(--leading-md)", letterSpacing: "var(--tracking-md)", color: "var(--text-heading)" }}>{title}</span>
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", paddingTop: 2 }}>{subtitle}</span>
           </div>
-          <Button size="sm" onClick={onSave}>Save Settings</Button>
+          <Button onClick={onSave}>Save Settings</Button>
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0" }}>
-          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>Preview rows</span>
+        <div style={{ display: "flex", alignItems: "center", gap: "var(--control-gap)", padding: "12px 0" }}>
+          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: "var(--text-secondary)" }}>Preview rows</span>
           <NumberStepper value={previewRows} onChange={onPreviewRows} />
-          <Button variant="primary-soft" size="sm" icon="eye" style={{ height: 28, borderRadius: "var(--radius-sm)", padding: "4px 10px" }} onClick={onPreview}>Data Preview</Button>
+          <Button variant="primary-soft" icon="eye" onClick={onPreview}>Data Preview</Button>
         </div>
         <PanelTabs tabs={tabs} active={cur} onChange={(t) => { setTab(t); onTab && onTab(t); }} style={{ margin: "0 -16px", padding: "0 16px", borderBottom: "none" }} />
       </div>

package/components/pipeline/ConfigPanel.vue

@@ -3,27 +3,27 @@ import { ref, computed } from 'vue'
 import Button from '../buttons/Button.vue'
 import PanelTabs from '../tabs/Tabs.vue'
 import NumberStepper from '../forms/NumberStepper.vue'
-// Right node-config panel — 400px: title/subtitle + Save Settings, preview-rows row, PanelTabs, body slot.
-const props = defineProps({ title: String, subtitle: String, tabs: { type: Array, default: () => ['Node Info', 'Calc Rules', 'Output Fields', 'SQL Preview'] }, activeTab: String, previewRows: { type: Number, default: 100 }, height: { type: [String, Number], default: '100%' }, style: Object })
+// Right node-config panel — 400px: title/subtitle + Save Settings, preview-rows row, PanelTabs, body slot. A size region (default inherit → md): every control in the header shares one tier.
+const props = defineProps({ title: String, subtitle: String, tabs: { type: Array, default: () => ['Node Info', 'Calc Rules', 'Output Fields', 'SQL Preview'] }, activeTab: String, previewRows: { type: Number, default: 100 }, height: { type: [String, Number], default: '100%' }, size: String, style: Object })
 const emit = defineEmits(['tab', 'update:previewRows', 'save', 'preview'])
 const tabState = ref(props.tabs[0])
 const cur = computed(() => props.activeTab != null ? props.activeTab : tabState.value)
 function setTab(t) { tabState.value = t; emit('tab', t) }
 </script>
 <template>
-  <div :style="{ width: 'var(--panel-w)', height, background: 'var(--bg-surface)', borderLeft: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, ...style }">
+  <div :data-size="size" :style="{ width: 'var(--panel-w)', height, background: 'var(--bg-surface)', borderLeft: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, ...style }">
     <div style="padding:12px 16px 0;border-bottom:1px solid var(--border-card);flex-shrink:0">
       <div style="display:flex;justify-content:space-between;align-items:flex-start">
         <div style="display:flex;flex-direction:column">
-          <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:17.5px;letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
-          <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);padding-top:5px">{{ subtitle }}</span>
+          <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
+          <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);padding-top:2px">{{ subtitle }}</span>
         </div>
-        <Button size="sm" @click="emit('save')">Save Settings</Button>
+        <Button @click="emit('save')">Save Settings</Button>
       </div>
-      <div style="display:flex;align-items:center;gap:8px;padding:8px 0">
-        <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">Preview rows</span>
+      <div style="display:flex;align-items:center;gap:var(--control-gap);padding:12px 0">
+        <span style="font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking);color:var(--text-secondary)">Preview rows</span>
         <NumberStepper :model-value="previewRows" @update:modelValue="v => emit('update:previewRows', v)" />
-        <Button variant="primary-soft" size="sm" icon="eye" style="height:28px;border-radius:var(--radius-sm);padding:4px 10px" @click="emit('preview')">Data Preview</Button>
+        <Button variant="primary-soft" icon="eye" @click="emit('preview')">Data Preview</Button>
       </div>
       <PanelTabs :tabs="tabs" :active="cur" @change="setTab" style="margin:0 -16px;padding:0 16px;border-bottom:none" />
     </div>

package/components/pipeline/DataPreview.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { DataTableColumn } from "../data/DataTable";
+import { DataTableColumn } from "../data/Table";
 /** Bottom 250px data-preview drawer with Debug Mode checkbox and dense table. */
 export interface DataPreviewProps {
   title?: string;
@@ -9,6 +9,8 @@ export interface DataPreviewProps {
   onDebug?: (v: boolean) => void;
   collapsed?: boolean;
   onCollapse?: () => void;
+  /** Size tier of the drawer region. Defaults to "sm": 24px header controls, 32px table rows with 12px text. */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function DataPreview(props: DataPreviewProps): JSX.Element;

package/components/pipeline/DataPreview.jsx

@@ -2,21 +2,21 @@ import React from "react";
 import { Icon } from "../icons/Icon.jsx";
 import { IconButton } from "../buttons/IconButton.jsx";
 import { Checkbox } from "../forms/Checkbox.jsx";
-import { DataTable } from "../data/DataTable.jsx";
+import { Table } from "../data/Table.jsx";
 
-/** Bottom data-preview drawer — 250px: 40px header (title, Debug Mode, collapse) + dense table. */
-export function DataPreview({ title = "Data Preview", columns = [], rows = [], debug = false, onDebug, collapsed, onCollapse, style }) {
+/** Bottom data-preview drawer — 250px: 40px header (title, Debug Mode, collapse) + dense table. An sm size region: the header's controls are 24px and the table has 32px rows with 12px text. */
+export function DataPreview({ title = "Data Preview", columns = [], rows = [], debug = false, onDebug, collapsed, onCollapse, size = "sm", style }) {
   return (
-    <div style={{ background: "var(--bg-surface)", borderTop: "1px solid var(--border-card)", display: "flex", flexDirection: "column", height: collapsed ? 40 : "var(--drawer-h)", overflow: "hidden", boxSizing: "border-box", flexShrink: 0, transition: "height .15s ease", ...style }}>
-      <div style={{ height: 40, display: "flex", alignItems: "center", gap: 12, padding: "0 16px", boxSizing: "border-box", flexShrink: 0 }}>
+    <div data-size={size} style={{ background: "var(--bg-surface)", borderTop: "1px solid var(--border-card)", display: "flex", flexDirection: "column", height: collapsed ? "var(--bar-card-h)" : "var(--drawer-h)", overflow: "hidden", boxSizing: "border-box", flexShrink: 0, transition: "height .15s ease", ...style }}>
+      <div style={{ height: "var(--bar-card-h)", display: "flex", alignItems: "center", gap: "var(--group-gap)", padding: "0 var(--edge-pad)", boxSizing: "border-box", flexShrink: 0 }}>
         <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
         <span style={{ flex: 1 }} />
         <Checkbox label="Debug Mode" checked={debug} onChange={onDebug} />
-        <IconButton icon={collapsed ? "chevron-up" : "chevron-down"} size="xs" muted onClick={onCollapse} />
+        <IconButton icon={collapsed ? "chevron-up" : "chevron-down"} muted onClick={onCollapse} label={collapsed ? "Expand" : "Collapse"} />
       </div>
       {!collapsed ? (
         <div style={{ overflowY: "auto", borderTop: "1px solid var(--border-subtle)" }}>
-          <DataTable dense columns={columns} rows={rows} headerBorder={false} />
+          <Table resizable columns={columns} rows={rows} headerBorder={false} />
         </div>
       ) : null}
     </div>

package/components/pipeline/DataPreview.vue

@@ -1,21 +1,21 @@
 <script setup>
 import IconButton from '../buttons/IconButton.vue'
 import Checkbox from '../forms/Checkbox.vue'
-import DataTable from '../data/DataTable.vue'
-// Bottom data-preview drawer — 250px: 40px header (title, Debug Mode, collapse) + dense table.
-defineProps({ title: { type: String, default: 'Data Preview' }, columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, debug: Boolean, collapsed: Boolean, style: Object })
+import Table from '../data/Table.vue'
+// Bottom data-preview drawer — 250px: 40px header (title, Debug Mode, collapse) + dense table. An sm size region: the header's controls are 24px and the table has 32px rows with 12px text.
+defineProps({ title: { type: String, default: 'Data Preview' }, columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, debug: Boolean, collapsed: Boolean, size: { type: String, default: 'sm' }, style: Object })
 const emit = defineEmits(['update:debug', 'toggleCollapse'])
 </script>
 <template>
-  <div :style="{ background: 'var(--bg-surface)', borderTop: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', height: collapsed ? 40 : 'var(--drawer-h)', overflow: 'hidden', boxSizing: 'border-box', flexShrink: 0, transition: 'height .15s ease', ...style }">
-    <div style="height:40px;display:flex;align-items:center;gap:12px;padding:0 16px;box-sizing:border-box;flex-shrink:0">
+  <div :data-size="size" :style="{ background: 'var(--bg-surface)', borderTop: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', height: collapsed ? 'var(--bar-card-h)' : 'var(--drawer-h)', overflow: 'hidden', boxSizing: 'border-box', flexShrink: 0, transition: 'height .15s ease', ...style }">
+    <div style="height:var(--bar-card-h);display:flex;align-items:center;gap:var(--group-gap);padding:0 var(--edge-pad);box-sizing:border-box;flex-shrink:0">
       <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
       <span style="flex:1" />
       <Checkbox label="Debug Mode" :checked="debug" @change="v => emit('update:debug', v)" />
-      <IconButton :icon="collapsed ? 'chevron-up' : 'chevron-down'" size="xs" muted @click="emit('toggleCollapse')" />
+      <IconButton :icon="collapsed ? 'chevron-up' : 'chevron-down'" muted :label="collapsed ? 'Expand' : 'Collapse'" @click="emit('toggleCollapse')" />
     </div>
     <div v-if="!collapsed" style="overflow-y:auto;border-top:1px solid var(--border-subtle)">
-      <DataTable dense :columns="columns" :rows="rows" :header-border="false" />
+      <Table resizable :columns="columns" :rows="rows" :header-border="false" />
     </div>
   </div>
 </template>

package/components/pipeline/NodeCard.jsx

@@ -60,12 +60,12 @@ export function NodeCard({ title, subtitle, icon = "table", subtitleIcon, hue =
           {badge === "clock" ? <StatusBadge tone="pending" icon="clock" size={20} style={{ position: "absolute", top: -6, right: -6 }} /> : null}
         </span>
         <div style={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1, paddingRight: 18 }}>
-          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-base)", lineHeight: "17.875px", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</span>
+          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-semibold)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{title}</span>
           <span style={{ display: "flex", alignItems: "flex-start", gap: 4, paddingTop: 4, minWidth: 0 }}>
-            {subtitleIcon !== false ? <span style={{ color: "var(--text-muted)", display: "inline-flex", flexShrink: 0, paddingTop: 1 }}><Icon name={subtitleIcon || "info"} size={13} /></span> : null}
+            {subtitleIcon !== false ? <span style={{ color: "var(--text-muted)", display: "inline-flex", alignItems: "center", flexShrink: 0, height: "var(--leading-xs)", transform: "translateY(-0.5px)" }}><Icon name={subtitleIcon || "info"} size={12} /></span> : null}
             {/* Node types run long ("Field Value Calculation"), so the subtitle wraps to a
                 second line and only then clamps — the card size never changes. */}
-            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "13.75px", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", minWidth: 0, overflow: "hidden", display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 2, overflowWrap: "break-word" }}>{subtitle}</span>
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-muted)", minWidth: 0, overflow: "hidden", display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: 2, overflowWrap: "break-word" }}>{subtitle}</span>
           </span>
         </div>
       </div>

package/components/pipeline/NodeCard.vue

@@ -38,11 +38,11 @@ const tone = i => props.inputTones[i] || 'default'
         <StatusBadge v-if="badge === 'clock'" tone="pending" icon="clock" :size="20" style="position:absolute;top:-6px;right:-6px" />
       </span>
       <div style="display:flex;flex-direction:column;min-width:0;flex:1;padding-right:18px">
-        <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-base);line-height:17.875px;letter-spacing:var(--tracking-base);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ title }}</span>
+        <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ title }}</span>
         <span style="display:flex;align-items:flex-start;gap:4px;padding-top:4px;min-width:0">
-          <span v-if="subtitleIcon !== false" style="color:var(--text-muted);display:inline-flex;flex-shrink:0;padding-top:1px"><Icon :name="subtitleIcon || 'info'" :size="13" /></span>
+          <span v-if="subtitleIcon !== false" style="color:var(--text-muted);display:inline-flex;align-items:center;flex-shrink:0;height:var(--leading-xs);transform:translateY(-0.5px)"><Icon :name="subtitleIcon || 'info'" :size="12" /></span>
           <!-- Node types run long ("Field Value Calculation"): wrap to a second line, then clamp. -->
-          <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:13.75px;letter-spacing:var(--tracking-xs);color:var(--text-muted);min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word">{{ subtitle }}</span>
+          <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-muted);min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word">{{ subtitle }}</span>
         </span>
       </div>
     </div>

package/components/pipeline/PaletteItem.vue

@@ -8,8 +8,8 @@ const hover = ref(false)
 </script>
 <template>
   <div role="button" tabindex="0" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false"
-    :style="{ width: 67.664, borderRadius: 'var(--radius-lg)', padding: 8, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', cursor: 'grab', boxSizing: 'border-box', background: hover ? 'var(--bg-hover)' : 'transparent', transition: 'background .12s ease', ...style }">
+    :style="{ width: '67.664px', borderRadius: 'var(--radius-lg)', padding: '8px', display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', cursor: 'grab', boxSizing: 'border-box', background: hover ? 'var(--bg-hover)' : 'transparent', transition: 'background .12s ease', ...style }">
     <IconTile :icon="icon" :hue="hue" kind="palette" />
-    <span style="font-family:var(--font-sans);font-size:var(--text-2xs);line-height:var(--leading-2xs);letter-spacing:var(--tracking-2xs);color:var(--text-body);text-align:center">{{ label }}</span>
+    <span style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);color:var(--text-body);text-align:center">{{ label }}</span>
   </div>
 </template>

package/components/pipeline/PaletteListItem.vue

@@ -8,7 +8,7 @@ const hover = ref(false)
 </script>
 <template>
   <div role="button" tabindex="0" @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false"
-    :style="{ height: 'var(--h-subnav-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', boxSizing: 'border-box', cursor: 'grab', background: hover ? 'var(--bg-hover)' : 'transparent', ...style }">
+    :style="{ height: 'var(--h-subnav-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 8px', boxSizing: 'border-box', cursor: 'grab', background: hover ? 'var(--bg-hover)' : 'transparent', ...style }">
     <span :style="{ color: `var(--cat-${hue})`, display: 'inline-flex' }"><Icon :name="icon" :size="14" /></span>
     <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-body);white-space:nowrap">{{ label }}</span>
   </div>

package/components/pipeline/PalettePanel.jsx

@@ -11,7 +11,7 @@ export function PaletteItem({ icon, hue, label, onClick, style }) {
     <div role="button" tabIndex={0} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{ width: 67.664, borderRadius: "var(--radius-lg)", padding: 8, display: "flex", flexDirection: "column", gap: 6, alignItems: "center", cursor: "grab", boxSizing: "border-box", background: hover ? "var(--bg-hover)" : "transparent", transition: "background .12s ease", ...style }}>
       <IconTile icon={icon} hue={hue} kind="palette" />
-      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", lineHeight: "var(--leading-2xs)", letterSpacing: "var(--tracking-2xs)", color: "var(--text-body)", textAlign: "center" }}>{label}</span>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-body)", textAlign: "center" }}>{label}</span>
     </div>
   );
 }
@@ -44,7 +44,7 @@ export function PalettePanel({ catalog = PIPELINE_CATALOG, height = "100%", onPi
       <div style={{ flex: 1, overflowY: "auto", padding: 8 }}>
         {catalog.map((cat) => (
           <div key={cat.label}>
-            <div onClick={() => toggle(cat.label)} style={{ height: "var(--h-subnav-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", boxSizing: "border-box", cursor: "pointer" }}>
+            <div onClick={() => toggle(cat.label)} data-wash="" style={{ height: "var(--h-subnav-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", boxSizing: "border-box", cursor: "pointer", background: "var(--wash, transparent)", transition: "var(--t-hover)" }}>
               <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: closed.includes(cat.label) ? "rotate(-90deg)" : "none", transition: "transform .15s ease" }}><Icon name="chevron-down" size={14} /></span>
               <span style={{ color: `var(--cat-${cat.hue})`, display: "inline-flex" }}><Icon name={cat.icon} size={14} /></span>
               <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-strong)" }}>{cat.label}</span>

package/components/pipeline/PalettePanel.vue

@@ -21,7 +21,7 @@ function toggle(l) { closed.value = closed.value.includes(l) ? closed.value.filt
     </div>
     <div style="flex:1;overflow-y:auto;padding:8px">
       <div v-for="cat in catalog" :key="cat.label">
-        <div @click="toggle(cat.label)" style="height:var(--h-subnav-item);border-radius:var(--radius-md);display:flex;align-items:center;gap:8px;padding:6px 8px;box-sizing:border-box;cursor:pointer">
+        <div @click="toggle(cat.label)" data-wash="" style="height:var(--h-subnav-item);border-radius:var(--radius-md);display:flex;align-items:center;gap:8px;padding:6px 8px;box-sizing:border-box;cursor:pointer;background:var(--wash, transparent);transition:var(--t-hover)">
           <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: closed.includes(cat.label) ? 'rotate(-90deg)' : 'none', transition: 'transform .15s ease' }"><Icon name="chevron-down" :size="14" /></span>
           <span :style="{ color: `var(--cat-${cat.hue})`, display: 'inline-flex' }"><Icon :name="cat.icon" :size="14" /></span>
           <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-strong)">{{ cat.label }}</span>

package/components/pipeline/Port.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { portSkin } from './port-skin.js'
+// Round output/input port — 22px. tone: "default" | "active" (dragging from it) | "target" (drop here).
+// interactive lights it on hover and shows a grab cursor. Native listeners (@mousedown, @mouseup…) fall through to the span.
+defineProps({ tone: { type: String, default: 'default' }, interactive: Boolean, style: Object })
+const hover = ref(false)
+</script>
+<template>
+  <span @mouseenter="hover = true" @mouseleave="hover = false"
+    :style="{ width: '22px', height: '22px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', ...portSkin(tone, hover, interactive), ...style }">
+    <Icon :name="tone === 'target' ? 'plus' : 'arrow-right'" :size="12" :stroke-width="2.2" />
+  </span>
+</template>

package/components/pipeline/PortLabel.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { portSkin } from './port-skin.js'
+// Labeled input port pill ("A >", "B >") — 28×22, same three tones as Port.
+defineProps({ label: { type: String, default: 'A' }, tone: { type: String, default: 'default' }, interactive: Boolean, style: Object })
+const hover = ref(false)
+</script>
+<template>
+  <span @mouseenter="hover = true" @mouseleave="hover = false"
+    :style="{ width: '28px', height: '22px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '2px', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-xs)', lineHeight: 1, ...portSkin(tone, hover, interactive), ...style }">
+    <Icon v-if="tone === 'target'" name="plus" :size="12" :stroke-width="2.2" />
+    <template v-else>{{ label }}<Icon name="chevron-right" :size="9" :stroke-width="2.5" /></template>
+  </span>
+</template>