@keyfunc/keybricks-ds 1.0.3 → 2.1.1

package/components/navigation/Breadcrumb.vue

@@ -24,10 +24,10 @@ function pickHidden(it) { open.value = false; emit('select', it) }
 function onDoc(e) { if (root.value && !root.value.contains(e.target)) open.value = false }
 watch(open, (v) => { if (v) document.addEventListener('mousedown', onDoc); else document.removeEventListener('mousedown', onDoc) })
 onUnmounted(() => document.removeEventListener('mousedown', onDoc))
-const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: isLast(it) || on(i, it) ? 'var(--text-heading)' : 'var(--text-secondary)', fontWeight: isLast(it) ? 'var(--weight-medium)' : 'var(--weight-regular)', cursor: isLast(it) ? 'default' : 'pointer', borderRadius: 'var(--radius-sm)', transition: 'var(--t-hover)' })
+const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: isLast(it) || on(i, it) ? 'var(--text-heading)' : 'var(--text-secondary)', fontWeight: isLast(it) ? 'var(--weight-medium)' : 'var(--weight-regular)', cursor: isLast(it) ? 'default' : 'pointer', borderRadius: 'var(--radius-sm)', transition: 'var(--t-hover)' })
 </script>
 <template>
-  <nav :style="{ display: 'flex', alignItems: 'center', gap: 4, ...style }">
+  <nav :style="{ display: 'flex', alignItems: 'center', gap: '4px', ...style }">
     <template v-for="(it, i) in head" :key="it">
       <span v-if="i > 0" style="color:var(--text-muted);display:inline-flex"><Icon name="chevron-right" :size="13" /></span>
       <span :role="isLast(it) ? undefined : 'button'" :tabindex="isLast(it) ? undefined : 0"
@@ -40,14 +40,14 @@ const crumbStyle = (i, it) => ({ fontFamily: 'var(--font-sans)', fontSize: 'var(
         <span role="button" tabindex="0" :aria-label="`Show ${hidden.length} hidden levels`" :aria-expanded="open"
           @click="open = !open" @keydown.enter.prevent="open = !open" @keydown.space.prevent="open = !open" @keydown.esc="open = false"
           @mouseenter="ovHover = true" @mouseleave="ovHover = false"
-          :style="{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '20px', height: '18px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: open || ovHover ? 'var(--text-heading)' : 'var(--text-muted)', background: open ? 'var(--bg-active)' : ovHover ? 'var(--bg-hover)' : 'transparent', transition: 'var(--t-hover)' }">
+          :style="{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '24px', height: '24px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', color: open || ovHover ? 'var(--text-heading)' : 'var(--text-muted)', background: open ? 'var(--bg-active)' : ovHover ? 'var(--bg-hover)' : 'transparent', transition: 'var(--t-hover)' }">
           <Icon name="ellipsis" :size="14" />
         </span>
         <span v-if="open" style="position:absolute;top:calc(100% + 5px);left:0;z-index:var(--z-menu);min-width:168px;max-width:260px;background:var(--bg-surface);border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;display:flex;flex-direction:column">
           <span v-for="(h, hi) in hidden" :key="h" role="menuitem" tabindex="0"
             @click="pickHidden(h)" @keydown.enter.prevent="pickHidden(h)" @keydown.space.prevent="pickHidden(h)"
             @mouseenter="menuHover = hi" @mouseleave="menuHover = -1"
-            :style="{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 9px', paddingLeft: (9 + hi * 12) + 'px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: menuHover === hi ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', transition: 'var(--t-hover)' }">
+            :style="{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 9px', paddingLeft: (9 + hi * 12) + 'px', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: menuHover === hi ? 'var(--bg-hover)' : 'transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: 'var(--text-heading)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', transition: 'var(--t-hover)' }">
             <span v-if="hi > 0" style="color:var(--text-muted);display:inline-flex;flex-shrink:0"><Icon name="chevron-right" :size="11" /></span>{{ h }}
           </span>
         </span>

package/components/navigation/DocTree.jsx

@@ -20,14 +20,14 @@ export function DocTree({ title = "Documents", items = [], active, onSelect, sty
         {items.map((it) => {
           const is = active === it.label;
           return (
-            <div key={it.label} role="treeitem" tabIndex={0} onClick={() => onSelect && onSelect(it.label)}
-              style={{ height: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", boxSizing: "border-box", cursor: "pointer", background: is ? "var(--bg-active)" : "transparent" }}
+            <div key={it.label} role="treeitem" tabIndex={0} data-wash={is ? undefined : ""} onClick={() => onSelect && onSelect(it.label)}
+              style={{ height: "var(--h-tree-item)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", gap: 8, padding: "6px 8px", boxSizing: "border-box", cursor: "pointer", background: is ? "var(--bg-active)" : "var(--wash, transparent)", transition: "var(--t-hover)" }}
               onMouseEnter={(e) => { if (!is) e.currentTarget.style.background = "var(--bg-hover)"; }}
               onMouseLeave={(e) => { if (!is) e.currentTarget.style.background = "transparent"; }}>
               <span style={{ color: it.kind === "folder" ? "var(--text-muted)" : docHues[it.hue || "gray"], display: "inline-flex" }}>
                 <Icon name={it.icon || (it.kind === "folder" ? "folder" : "file-text")} size={16} />
               </span>
-              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.label}</span>
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", color: "var(--text-heading)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.label}</span>
             </div>
           );
         })}

package/components/navigation/DocTree.vue

@@ -15,10 +15,10 @@ const emit = defineEmits(['select'])
     </div>
     <div style="padding:12px 16px 8px;border-bottom:1px solid var(--border-subtle)"><SearchInput bare placeholder="Search..." style="gap:8px" /></div>
     <div style="padding:8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto">
-      <div v-for="it in items" :key="it.label" @click="emit('select', it.label)"
-        :style="{ height: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', boxSizing: 'border-box', cursor: 'pointer', background: active === it.label ? 'var(--bg-active)' : 'transparent' }">
+      <div v-for="it in items" :key="it.label" role="treeitem" tabindex="0" @click="emit('select', it.label)" @keydown.enter="emit('select', it.label)"
+        :style="{ height: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 8px', boxSizing: 'border-box', cursor: 'pointer', background: active === it.label ? 'var(--bg-active)' : 'var(--wash, transparent)', transition: 'var(--t-hover)' }" :data-wash="active === it.label ? undefined : ''">
         <span :style="{ color: it.kind === 'folder' ? 'var(--text-muted)' : docHues[it.hue || 'gray'], display: 'inline-flex' }"><Icon :name="it.icon || (it.kind === 'folder' ? 'folder' : 'file-text')" :size="16" /></span>
-        <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ it.label }}</span>
+        <span style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ it.label }}</span>
       </div>
     </div>
   </div>

package/components/navigation/PageHeading.vue

@@ -2,7 +2,7 @@
 defineProps({ title: String, subtitle: String, style: Object })
 </script>
 <template>
-  <div :style="{ display: 'flex', flexDirection: 'column', gap: 4, ...style }">
+  <div :style="{ display: 'flex', flexDirection: 'column', gap: '4px', ...style }">
     <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:var(--tracking-lg);color:var(--text-primary)">{{ title }}</span>
     <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-secondary)">{{ subtitle }}</span>
   </div>

package/components/navigation/PageToolbar.vue

@@ -1,15 +1,16 @@
 <script setup>
 import IconButton from '../buttons/IconButton.vue'
-defineProps({ title: String, status: { type: String, default: '• Editing' }, showBack: Boolean, style: Object })
+// Page toolbar under the top bar: back · title · status, actions on the right. A size region (default inherit → md).
+defineProps({ title: String, status: { type: String, default: '• Editing' }, showBack: Boolean, size: String, style: Object })
 const emit = defineEmits(['back'])
 </script>
 <template>
-  <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;align-items:center;gap:8px">
-      <IconButton v-if="showBack" icon="chevron-left" size="md" @click="emit('back')" />
+  <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;align-items:center;gap:var(--control-gap)">
+      <IconButton v-if="showBack" icon="chevron-left" label="Back" @click="emit('back')" />
       <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 v-if="status" style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-muted);margin-left:6px">{{ status }}</span>
+      <span v-if="status" style="font-family:var(--font-sans);font-size:var(--control-text);line-height:var(--control-leading);letter-spacing:var(--control-tracking);color:var(--text-muted);margin-left:6px">{{ status }}</span>
     </div>
-    <div style="display:flex;align-items:center;gap:8px"><slot name="actions" /></div>
+    <div style="display:flex;align-items:center;gap:var(--control-gap)"><slot name="actions" /></div>
   </div>
 </template>

package/components/navigation/Sidebar.jsx

@@ -30,7 +30,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>

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>

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-mono)", 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

@@ -235,19 +235,19 @@ 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-mono);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>

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>