@keyfunc/keybricks-ds 1.0.4 → 2.1.1

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>

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>

package/components/pipeline/ZoomControls.vue

@@ -5,7 +5,7 @@ const props = defineProps({ modelValue: { type: Number, default: 100 }, style: O
 const emit = defineEmits(['update:modelValue', 'fit'])
 </script>
 <template>
-  <div :style="{ display: 'inline-flex', alignItems: 'center', gap: 2, background: 'var(--bg-surface)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)', padding: 3, boxSizing: 'border-box', ...style }">
+  <div :style="{ display: 'inline-flex', alignItems: 'center', gap: '2px', background: 'var(--bg-surface)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)', padding: '3px', boxSizing: 'border-box', ...style }">
     <IconButton icon="minus" size="sm" label="Zoom out" @click="emit('update:modelValue', Math.max(25, modelValue - 10))" />
     <span style="min-width:40px;text-align:center;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ modelValue }}%</span>
     <IconButton icon="plus" size="sm" label="Zoom in" @click="emit('update:modelValue', Math.min(200, modelValue + 10))" />

package/components/pipeline/port-skin.js

@@ -0,0 +1,13 @@
+// Shared port skin for Port.vue / PortLabel.vue / NodeCard.vue — mirrors portSkin() in NodeCard.jsx.
+// tone: "default" | "active" (a wire is being dragged from it) | "target" (valid drop here).
+export function portSkin(tone, hover, interactive) {
+  const hot = tone === 'active' || tone === 'target' || (interactive && hover)
+  return {
+    background: tone === 'target' ? 'var(--soft-bg)' : 'var(--bg-surface)',
+    border: `2px solid ${hot ? 'var(--action-primary)' : 'var(--port-border)'}`,
+    boxShadow: tone === 'active' || tone === 'target' ? '0 0 0 3px var(--focus-ring)' : 'none',
+    color: hot ? 'var(--action-primary)' : 'var(--text-muted)',
+    cursor: interactive ? (tone === 'active' ? 'grabbing' : 'grab') : 'default',
+    transition: 'var(--t-hover)'
+  }
+}

package/components/px.js

@@ -0,0 +1,4 @@
+// Vue's :style binding does not append "px" to numbers the way React does —
+// { height: 30 } is silently dropped by the browser. Wrap any numeric length in px().
+// Strings ('100%', 'var(--radius-md)', '12px') pass through untouched.
+export const px = (v) => (typeof v === 'number' ? v + 'px' : v)

package/components/tabs/PanelTabs.vue

@@ -1,10 +1,11 @@
 <script setup>
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+// Panel tabs (Node Info · Calc Rules · …): a lighter underline tab bar at the region's bar height with regular-weight control text. Put the panel in an sm region for the compact 32px/12px look.
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>
 <template>
-  <div :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 12px', marginBottom: -1, borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--action-primary)' : 'var(--text-secondary)' }">{{ t }}</button>
+  <div role="tablist" :data-size="size" :style="{ display: 'flex', borderBottom: '1px solid var(--border-subtle)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" @click="emit('change', t)"
+      :style="{ background: 'transparent', border: 'none', cursor: 'pointer', height: 'var(--bar-h)', boxSizing: 'border-box', padding: '0 var(--control-px)', marginBottom: '-1px', borderBottom: t === active ? '2px solid var(--action-primary)' : '2px solid transparent', fontFamily: 'var(--font-sans)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--action-primary)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
   </div>
 </template>

package/components/tabs/PillTabs.vue

@@ -1,10 +1,11 @@
 <script setup>
-defineProps({ tabs: { type: Array, default: () => [] }, active: String, style: Object })
+// Text pill filter tabs. Active = tinted pill. Pills are control-height (sm 24 · md 32 · lg 36); omit `size` to inherit.
+defineProps({ tabs: { type: Array, default: () => [] }, active: String, size: String, style: Object })
 const emit = defineEmits(['change'])
 </script>
 <template>
-  <div :style="{ display: 'flex', gap: 8, ...style }">
-    <button v-for="t in tabs" :key="t" type="button" @click="emit('change', t)"
-      :style="{ background: t === active ? 'var(--bg-active)' : 'transparent', border: 'none', cursor: 'pointer', height: 28, padding: '0 11px', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-sm)', color: t === active ? 'var(--text-heading)' : 'var(--text-secondary)' }">{{ t }}</button>
+  <div role="tablist" :data-size="size" :style="{ display: 'flex', gap: 'var(--control-gap)', ...style }">
+    <button v-for="t in tabs" :key="t" type="button" role="tab" :aria-selected="t === active" :data-ink="t === active ? undefined : ''" :data-wash="t === active ? undefined : ''" @click="emit('change', t)"
+      :style="{ background: t === active ? 'var(--bg-active)' : 'var(--wash, transparent)', border: 'none', cursor: 'pointer', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', color: t === active ? 'var(--text-heading)' : 'var(--ink, var(--text-secondary))', whiteSpace: 'nowrap' }">{{ t }}</button>
   </div>
 </template>

package/components/tabs/SegmentedControl.d.ts

@@ -5,8 +5,8 @@ export interface SegmentedControlProps {
   options?: (string | { label: string; icon?: string; disabled?: boolean })[];
   value?: string;
   onChange?: (value: string) => void;
-  /** md 32px (default) · sm 26px */
-  size?: "sm" | "md";
+  /** Size tier: sm 24 · md 32 · lg 36. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   /** Hide labels; each label becomes the segment's aria-label and tooltip */
   iconOnly?: boolean;
   /** Greys the whole control */

package/components/tabs/SegmentedControl.jsx

@@ -4,12 +4,12 @@ import { Icon } from "../icons/Icon.jsx";
 /**
  * Segmented control — inset track, raised active segment. Switches views of the same data, applies instantly.
  * options: string[] | { label, icon?, disabled? }[]   value/onChange by label
- * size "md" (32) | "sm" (26) · iconOnly hides labels (label becomes aria-label / title)
+ * size sm 24 | md 32 | lg 36 — omit it to inherit the region's tier · iconOnly hides labels (label becomes aria-label / title)
  * disabled greys the whole control · fullWidth stretches segments evenly
  * Keyboard: ← → move between enabled segments.
  */
-export function SegmentedControl({ options = [], value, onChange, size = "md", iconOnly, disabled, fullWidth, style }) {
-  const h = size === "sm" ? 26 : 32;
+const tierIcon = { width: "var(--control-icon)", height: "var(--control-icon)" };
+export function SegmentedControl({ options = [], value, onChange, size, iconOnly, disabled, fullWidth, style }) {
   const opts = options.map((o) => (typeof o === "string" ? { label: o } : o));
   const enabled = opts.filter((o) => !o.disabled);
   const onKey = (e) => {
@@ -20,14 +20,14 @@ export function SegmentedControl({ options = [], value, onChange, size = "md", i
     onChange && onChange(n.label);
   };
   return (
-    <div role="tablist" aria-disabled={disabled || undefined} onKeyDown={onKey} style={{ display: fullWidth ? "flex" : "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
+    <div role="tablist" data-size={size} aria-disabled={disabled || undefined} onKeyDown={onKey} style={{ display: fullWidth ? "flex" : "inline-flex", height: "var(--control-h)", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", opacity: disabled ? .5 : 1, ...style }}>
       {opts.map((o) => {
         const is = value === o.label, off = disabled || o.disabled;
         return (
-          <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1}
+          <button key={o.label} type="button" role="tab" aria-selected={is} aria-label={iconOnly ? o.label : undefined} title={iconOnly ? o.label : undefined} disabled={off} tabIndex={is ? 0 : -1} data-ink={is || off ? undefined : ""}
             onClick={() => !off && onChange && onChange(o.label)}
-            style={{ height: h - 6, padding: iconOnly ? "0 8px" : "0 10px", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: size === "sm" ? "var(--text-xs)" : "var(--text-sm)", color: is ? "var(--text-heading)" : "var(--text-secondary)", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
-            {o.icon ? <Icon name={o.icon} size={13} /> : null}{iconOnly ? null : o.label}
+            style={{ height: "calc(var(--control-h) - 6px)", padding: iconOnly ? "0 calc(var(--control-px) - 4px)" : "0 calc(var(--control-px) - 2px)", flex: fullWidth ? 1 : "none", justifyContent: "center", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: off ? "not-allowed" : "pointer", background: is ? "var(--bg-surface)" : "transparent", boxShadow: is ? "0 1px 2px rgba(0,0,0,.08)" : "none", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", color: is ? "var(--text-heading)" : "var(--ink, var(--text-secondary))", opacity: o.disabled && !disabled ? .45 : 1, whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
+            {o.icon ? <Icon name={o.icon} size={16} style={tierIcon} /> : null}{iconOnly ? null : o.label}
           </button>
         );
       })}

package/components/tabs/SegmentedControl.vue

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

package/components/tabs/Tabs.d.ts

@@ -1,13 +1,15 @@
 import * as React from "react";
-/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. */
+/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. The bar is the region's bar height (sm 32 · md 40 · lg 44). */
 export interface TabsProps {
   tabs?: string[];
   active?: string;
   onChange?: (tab: string) => void;
+  /** Size tier. Omit to inherit the enclosing region's tier (the default). */
+  size?: "sm" | "md" | "lg";
   style?: React.CSSProperties;
 }
 export declare function Tabs(props: TabsProps): JSX.Element;
-/** 12px compact underline tabs for panels (Node Info / Calc Rules / ...). */
+/** Lighter underline tabs for panels (Node Info / Calc Rules / ...), regular weight; an sm region gives the compact 32px/12px look. */
 export declare function PanelTabs(props: TabsProps): JSX.Element;
-/** Text pill filter tabs; active gets a #f5f5f5 pill. */
+/** Text pill filter tabs at control height; active gets a tinted pill. */
 export declare function PillTabs(props: TabsProps): JSX.Element;