@keyfunc/keybricks-ds 1.0.0

package/components/navigation/Tree.vue

@@ -0,0 +1,258 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import Icon from '../icons/Icon.vue'
+import Checkbox from '../forms/Checkbox.vue'
+// Nested tree view: expand/collapse, single or multiple selection, cascading checkboxes with
+// indeterminate parents (checkStrictly opts out), disabled nodes, connector lines, async
+// loadData, search highlight, drag to move, keyboard navigation.
+const docHues = { orange: 'var(--cat-transform)', green: 'var(--cat-source)', purple: 'var(--cat-merge)', blue: 'var(--info-fg)', teal: 'var(--cat-output)', gray: 'var(--text-muted)' }
+const INDENT = 18
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  defaultExpanded: { type: Array, default: () => [] },
+  defaultActive: String,
+  defaultSelected: { type: Array, default: () => [] },
+  defaultChecked: { type: Array, default: () => [] },
+  checkable: Boolean, checkStrictly: Boolean, multiple: Boolean,
+  selectable: { type: Boolean, default: true },
+  showIcon: { type: Boolean, default: true },
+  showLine: Boolean, draggable: Boolean,
+  searchValue: { type: String, default: '' },
+  autoExpandOnSearch: { type: Boolean, default: true },
+  reorder: Boolean,
+  loadData: Function, rowActions: Function, style: Object,
+})
+const emit = defineEmits(['select', 'check', 'expand', 'drop'])
+
+const data = ref(JSON.parse(JSON.stringify(props.items)))
+// Compare by value: re-seeding on identity alone would wipe async-loaded children.
+watch(() => JSON.stringify(props.items), (next, prev) => { if (next !== prev) data.value = JSON.parse(next) })
+const expanded = ref([...props.defaultExpanded])
+const selected = ref(props.defaultActive ? [props.defaultActive] : [...props.defaultSelected])
+const checked = ref([...props.defaultChecked])
+const loading = ref([]); const loaded = ref([]); const focus = ref(null)
+const dragKey = ref(null); const drop = ref(null)
+
+const keyOf = n => (n.key != null ? n.key : n.label)
+const titleOf = n => (n.title != null ? n.title : n.label)
+const kidsOf = n => n.children || []
+const isBranch = n => kidsOf(n).length > 0 || n.isLeaf === false
+function descendants(n, out = []) { for (const c of kidsOf(n)) { out.push(c); descendants(c, out) } return out }
+/** Is `key` the dragged node itself, or anywhere inside its subtree? */
+function inSubtree(rootKey, key) {
+  const root = index(data.value).byKey[rootKey]
+  if (!root) return false
+  return rootKey === key || descendants(root).some(d => keyOf(d) === key)
+}
+function index(nodes, parent = null, acc = { byKey: {}, parent: {} }) {
+  for (const n of nodes) { acc.byKey[keyOf(n)] = n; acc.parent[keyOf(n)] = parent; index(kidsOf(n), keyOf(n), acc) }
+  return acc
+}
+function ancestorsOfMatches(nodes, test, trail = [], hit = []) {
+  for (const n of nodes) {
+    if (test(n)) hit.push(...trail)
+    ancestorsOfMatches(kidsOf(n), test, [...trail, keyOf(n)], hit)
+  }
+  return [...new Set(hit)]
+}
+const searchExpanded = computed(() => props.searchValue && props.autoExpandOnSearch
+  ? ancestorsOfMatches(data.value, n => String(titleOf(n)).toLowerCase().includes(props.searchValue.toLowerCase()))
+  : [])
+const openKeys = computed(() => [...new Set([...expanded.value, ...searchExpanded.value])])
+
+const view = computed(() => {
+  const full = new Set(checked.value); const half = new Set()
+  if (!props.checkable || props.checkStrictly) return { full, half }
+  const visit = n => {
+    kidsOf(n).forEach(visit)
+    if (!kidsOf(n).length) return
+    const ds = descendants(n).filter(d => !d.disabled && !d.disableCheckbox)
+    if (!ds.length) return
+    const on = ds.filter(d => full.has(keyOf(d))).length
+    if (on === ds.length) full.add(keyOf(n))
+    else { full.delete(keyOf(n)); if (on > 0) half.add(keyOf(n)) }
+  }
+  data.value.forEach(visit)
+  return { full, half }
+})
+
+const rows = computed(() => {
+  const out = []
+  const push = (nodes, depth, trail) => {
+    nodes.forEach((n, i) => {
+      const isLast = i === nodes.length - 1
+      out.push({ n, key: keyOf(n), depth, trail, isLast })
+      if (kidsOf(n).length && openKeys.value.includes(keyOf(n))) push(kidsOf(n), depth + 1, [...trail, !isLast])
+    })
+  }
+  push(data.value, 0, [])
+  return out
+})
+
+function toggle(k) {
+  const open = openKeys.value.includes(k)
+  const { byKey } = index(data.value)
+  if (!open && props.loadData && !loaded.value.includes(k) && !kidsOf(byKey[k]).length) {
+    loading.value = [...loading.value, k]
+    expanded.value = [...expanded.value, k]
+    Promise.resolve(props.loadData(byKey[k])).then(kids => {
+      const clone = JSON.parse(JSON.stringify(data.value))
+      const t = index(clone).byKey[k]
+      if (t) t.children = kids || []
+      data.value = clone
+      loaded.value = [...loaded.value, k]
+      loading.value = loading.value.filter(x => x !== k)
+    })
+    return
+  }
+  expanded.value = open ? expanded.value.filter(x => x !== k) : [...expanded.value, k]
+  emit('expand', expanded.value)
+}
+function select(k) {
+  selected.value = props.multiple
+    ? (selected.value.includes(k) ? selected.value.filter(x => x !== k) : [...selected.value, k])
+    : [k]
+  emit('select', props.multiple ? selected.value : k, selected.value)
+}
+function check(k) {
+  const set = new Set(view.value.full)
+  const on = set.has(k)
+  on ? set.delete(k) : set.add(k)
+  if (!props.checkStrictly) {
+    const { byKey, parent } = index(data.value)
+    descendants(byKey[k]).forEach(d => {
+      if (d.disabled || d.disableCheckbox) return
+      on ? set.delete(keyOf(d)) : set.add(keyOf(d))
+    })
+    let p = parent[k]
+    while (p != null) {
+      const kids = kidsOf(byKey[p]).filter(c => !c.disabled && !c.disableCheckbox)
+      const hit = kids.filter(c => set.has(keyOf(c)))
+      hit.length && hit.length === kids.length ? set.add(p) : set.delete(p)
+      p = parent[p]
+    }
+  }
+  checked.value = [...set]
+  emit('check', checked.value, { key: k, checked: !on, half: [...view.value.half] })
+}
+function rowClick(n) {
+  if (n.disabled) return
+  focus.value = keyOf(n)
+  if (props.selectable && n.selectable !== false) select(keyOf(n))
+  if (isBranch(n)) toggle(keyOf(n))
+}
+function onDragOver(e, k) {
+  if (!props.draggable) return
+  e.preventDefault()
+  if (!dragKey.value) return
+  const n = index(data.value).byKey[k]
+  // Only folders are drop targets: hovering a file shows nothing, since it can't contain anything.
+  if (!n || n.disabled || !isBranch(n) || inSubtree(dragKey.value, k)) { drop.value = null; return }
+  const r = e.currentTarget.getBoundingClientRect()
+  const y = (e.clientY - r.top) / r.height
+  drop.value = { key: k, pos: props.reorder ? (y < 0.2 ? 'before' : y > 0.8 ? 'after' : 'inside') : 'inside' }
+}
+function onDrop(k) {
+  const info = drop.value && drop.value.key === k ? drop.value : null
+  drop.value = null
+  if (!dragKey.value || !info || inSubtree(dragKey.value, k)) { dragKey.value = null; return }
+  const clone = JSON.parse(JSON.stringify(data.value))
+  let moved = null
+  const prune = nodes => nodes.filter(n => {
+    if (keyOf(n) === dragKey.value) { moved = n; return false }
+    if (n.children) n.children = prune(n.children)
+    return true
+  })
+  const pruned = prune(clone)
+  if (!moved) { dragKey.value = null; return }
+  const insert = nodes => {
+    const out = []
+    for (const n of nodes) {
+      if (keyOf(n) === k && info.pos === 'before') out.push(moved)
+      if (keyOf(n) === k && info.pos === 'inside') n.children = [...(n.children || []), moved]
+      else if (n.children) n.children = insert(n.children)
+      out.push(n)
+      if (keyOf(n) === k && info.pos === 'after') out.push(moved)
+    }
+    return out
+  }
+  data.value = insert(pruned)
+  if (info.pos === 'inside' && !expanded.value.includes(k)) expanded.value = [...expanded.value, k]
+  emit('drop', { dragKey: dragKey.value, dropKey: k, position: info.pos, treeData: data.value })
+  dragKey.value = null
+}
+function keyDown(e, row) {
+  const i = rows.value.findIndex(r => r.key === row.key)
+  const go = n => { const t = rows.value[n]; if (t) focus.value = t.key }
+  if (e.key === 'ArrowDown') { e.preventDefault(); go(i + 1) }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); go(i - 1) }
+  else if (e.key === 'ArrowRight') { e.preventDefault(); isBranch(row.n) && !openKeys.value.includes(row.key) ? toggle(row.key) : go(i + 1) }
+  else if (e.key === 'ArrowLeft') { e.preventDefault(); if (isBranch(row.n) && openKeys.value.includes(row.key)) toggle(row.key) }
+  else if (e.key === 'Enter') { e.preventDefault(); rowClick(row.n) }
+  else if (e.key === ' ') { e.preventDefault(); if (props.checkable && !row.n.disabled && row.n.checkable !== false && !row.n.disableCheckbox) check(row.key) }
+}
+function parts(text) {
+  const q = props.searchValue
+  const s = String(text)
+  if (!q) return [{ t: s, hit: false }]
+  const i = s.toLowerCase().indexOf(q.toLowerCase())
+  if (i < 0) return [{ t: s, hit: false }]
+  return [{ t: s.slice(0, i), hit: false }, { t: s.slice(i, i + q.length), hit: true }, { t: s.slice(i + q.length), hit: false }]
+}
+const dropAt = k => (drop.value && drop.value.key === k ? drop.value.pos : null)
+</script>
+<template>
+  <div role="tree" :style="{ display: 'flex', flexDirection: 'column', gap: showLine ? 0 : '1px', ...style }">
+    <div v-for="row in rows" :key="row.key" role="treeitem" class="kb-tree-row"
+      :tabindex="focus === row.key || (!focus && row === rows[0]) ? 0 : -1"
+      :aria-expanded="isBranch(row.n) ? openKeys.includes(row.key) : undefined"
+      :aria-selected="selected.includes(row.key)" :aria-disabled="row.n.disabled || undefined"
+      :draggable="draggable && !row.n.disabled"
+      @dragstart="dragKey = row.key" @dragover="onDragOver($event, row.key)" @dragleave="drop = null"
+      @drop.prevent="onDrop(row.key)" @dragend="dragKey = null; drop = null"
+      @click="rowClick(row.n)" @keydown="keyDown($event, row)"
+      :class="{ 'is-disabled': row.n.disabled }"
+      :style="{
+        minHeight: 'var(--h-tree-item)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', gap: '6px',
+        padding: showLine ? '0 8px 0 2px' : '5px 8px', paddingLeft: showLine ? '2px' : (8 + row.depth * INDENT) + 'px', boxSizing: 'border-box',
+        cursor: row.n.disabled ? 'not-allowed' : 'pointer', opacity: row.n.disabled ? 0.45 : 1,
+        background: dropAt(row.key) === 'inside' ? 'var(--soft-bg)' : selected.includes(row.key) ? 'var(--bg-active)' : 'transparent',
+        outline: dropAt(row.key) === 'inside' ? '2px solid var(--action-primary)' : 'none',
+        outlineOffset: '-2px',
+        boxShadow: dropAt(row.key) === 'before' ? 'inset 0 2px 0 var(--action-primary)' : dropAt(row.key) === 'after' ? 'inset 0 -2px 0 var(--action-primary)' : 'none',
+        transition: 'var(--t-hover)' }">
+      <template v-if="showLine">
+        <span v-for="(hasNext, i) in row.trail" :key="i"
+          :style="{ width: INDENT + 'px', alignSelf: 'stretch', flexShrink: 0, marginLeft: i === 0 ? '6px' : 0, borderLeft: hasNext ? '1px solid var(--border-subtle)' : '1px solid transparent' }" />
+        <span :style="{ width: INDENT + 'px', alignSelf: 'stretch', flexShrink: 0, position: 'relative', marginLeft: row.trail.length ? 0 : '6px' }">
+          <span :style="{ position: 'absolute', left: 0, top: 0, height: row.isLast ? '50%' : '100%', borderLeft: '1px solid var(--border-subtle)' }" />
+          <span :style="{ position: 'absolute', left: 0, top: '50%', width: (isBranch(row.n) ? 6 : INDENT - 4) + 'px', borderTop: '1px solid var(--border-subtle)' }" />
+        </span>
+      </template>
+      <span v-if="isBranch(row.n)" @click.stop="toggle(row.key)"
+        :style="{ width: '14px', height: '14px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', flexShrink: 0, cursor: 'pointer', transform: openKeys.includes(row.key) ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }">
+        <Icon :name="loading.includes(row.key) ? 'loader' : 'chevron-right'" :size="13" :class="loading.includes(row.key) ? 'kb-tree-spin' : ''" />
+      </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)"
+          :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' }">
+        <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>
+    </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>
+</template>
+<style scoped>
+.kb-tree-row:not(.is-disabled):hover{background:var(--bg-hover)}
+.kb-tree-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
+.kb-tree-spin{animation:kb-tree-spin 900ms linear infinite}
+@keyframes kb-tree-spin{to{transform:rotate(360deg)}}
+</style>

package/components/navigation/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x70" name="Navigation dir" subtitle="Full card: Components → App Chrome" -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
+<body><div id="root"></div>
+<script type="text/babel">
+const { Breadcrumb } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<Breadcrumb items={["Management","System Migration","Import"]}/>);
+</script></body></html>

package/components/navigation/navigation.prompt.md

@@ -0,0 +1,22 @@
+App chrome: `Sidebar` (+`KEYBRICKS_NAV` model), `TopBar`, `PageToolbar` (editor header), `PageHeading`, `DocTree` (secondary panel).
+
+```jsx
+<Sidebar items={KEYBRICKS_NAV} active="Home" collapsed={false} onToggleCollapse={...} logo="../../assets/keybricks-logo.png"/>
+<TopBar/>
+<PageToolbar title="Oracle Adapter" onBack={...} actions={<>
+  <Button variant="ghost" icon="settings-2">Custom Parameters</Button>
+  <Button variant="ghost" icon="play">Run Test</Button>
+  <Button icon="send">Submit</Button></>}/>
+<DocTree items={[{label:"Q1 2026",kind:"folder"},{label:"财务分析",hue:"orange"},{label:"Revenue Analysis",hue:"green"}]}/>
+```
+
+Set `logo` to the correct relative path to `assets/keybricks-logo.png`.
+
+`Breadcrumb` and `ThemeToggle` (additions):
+
+```jsx
+<Breadcrumb items={["Management","System Migration","Import"]}/>
+<ThemeToggle/>                        // uncontrolled: writes html[data-theme] + localStorage
+<ThemeToggle dark={dark} onToggle={setDark}/>  // controlled
+applyStoredTheme();                   // call once at app start
+```

package/components/pipeline/ConfigPanel.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/** 400px right node-configuration panel (header, preview-rows controls, tabs, scrolling body). */
+export interface ConfigPanelProps {
+  title?: string;
+  /** "Data Source · Detail Sheet" */
+  subtitle?: string;
+  tabs?: string[];
+  activeTab?: string;
+  onTab?: (tab: string) => void;
+  previewRows?: number;
+  onPreviewRows?: (n: number) => void;
+  onSave?: () => void;
+  onPreview?: () => void;
+  children?: React.ReactNode;
+  height?: number | string;
+  style?: React.CSSProperties;
+}
+export declare function ConfigPanel(props: ConfigPanelProps): JSX.Element;

package/components/pipeline/ConfigPanel.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+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 }) {
+  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 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>
+          </div>
+          <Button size="sm" 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>
+          <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>
+        </div>
+        <PanelTabs tabs={tabs} active={cur} onChange={(t) => { setTab(t); onTab && onTab(t); }} style={{ margin: "0 -16px", padding: "0 16px", borderBottom: "none" }} />
+      </div>
+      <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>{children}</div>
+    </div>
+  );
+}

package/components/pipeline/ConfigPanel.vue

@@ -0,0 +1,32 @@
+<script setup>
+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 })
+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 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>
+        </div>
+        <Button size="sm" @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>
+        <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>
+      </div>
+      <PanelTabs :tabs="tabs" :active="cur" @change="setTab" style="margin:0 -16px;padding:0 16px;border-bottom:none" />
+    </div>
+    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px"><slot /></div>
+  </div>
+</template>

package/components/pipeline/DataPreview.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { DataTableColumn } from "../data/DataTable";
+/** Bottom 250px data-preview drawer with Debug Mode checkbox and dense table. */
+export interface DataPreviewProps {
+  title?: string;
+  columns?: DataTableColumn[];
+  rows?: Record<string, any>[];
+  debug?: boolean;
+  onDebug?: (v: boolean) => void;
+  collapsed?: boolean;
+  onCollapse?: () => void;
+  style?: React.CSSProperties;
+}
+export declare function DataPreview(props: DataPreviewProps): JSX.Element;

package/components/pipeline/DataPreview.jsx

@@ -0,0 +1,24 @@
+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";
+
+/** 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 }) {
+  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 }}>
+        <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} />
+      </div>
+      {!collapsed ? (
+        <div style={{ overflowY: "auto", borderTop: "1px solid var(--border-subtle)" }}>
+          <DataTable dense columns={columns} rows={rows} headerBorder={false} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/pipeline/DataPreview.vue

@@ -0,0 +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 })
+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">
+      <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')" />
+    </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" />
+    </div>
+  </div>
+</template>

package/components/pipeline/NodeCard.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+/**
+ * Canvas pipeline node — 220×90 r16 with tinted 48px icon tile, ports, status badges.
+ */
+export interface NodeCardProps {
+  title?: string;
+  /** e.g. "Detail Sheet", "Association Match" */
+  subtitle?: string;
+  icon?: string;
+  /** 13px glyph before the subtitle (default "info"); false hides it */
+  subtitleIcon?: string | false;
+  hue?: "source" | "join" | "transform" | "merge" | "output";
+  selected?: boolean;
+  /** Icon-tile overlay dot */
+  badge?: "error" | "warning" | "clock";
+  /** [] no input · [null] plain port · ["A","B"] labeled pills */
+  inputs?: (string | null)[];
+  output?: boolean;
+  showMenu?: boolean;
+  onClick?: () => void;
+  onMenu?: (e: React.MouseEvent) => void;
+  /** Pointer-down on the output port — the canvas uses this to start a wire */
+  onOutputDown?: (e: React.PointerEvent) => void;
+  /** Pointer-up on input port `i` */
+  onInputUp?: (i: number, e: React.PointerEvent) => void;
+  onInputEnter?: (i: number) => void;
+  onInputLeave?: (i: number) => void;
+  /** "active" while a wire is being dragged out of this node */
+  outputTone?: PortTone;
+  /** Per-input tone; "target" marks the port under the cursor mid-drag */
+  inputTones?: PortTone[];
+  style?: React.CSSProperties;
+}
+export declare function NodeCard(props: NodeCardProps): JSX.Element;
+
+/** default = grey · active = dragging from it · target = valid drop, shows a crosshair */
+export type PortTone = "default" | "active" | "target";
+export interface PortProps {
+  tone?: PortTone;
+  /** Enables hover lighting and the grab cursor */
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+/** 22px round port. */
+export declare function Port(props: PortProps): JSX.Element;
+/** 28×22 "A >" input pill. */
+export declare function PortLabel(props: PortProps & { label?: string }): JSX.Element;

package/components/pipeline/NodeCard.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconTile, StatusBadge } from "../display/Badge.jsx";
+
+/* Ports are the connection handles: they light up on hover, stay lit while a wire is
+   being dragged out of them, and show a crosshair when they're a valid drop target. */
+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)",
+  };
+}
+
+/** Round output/input port — 22px. tone: "default" | "active" (dragging from it) | "target" (drop here). */
+export function Port({ tone = "default", interactive = false, style, onMouseEnter, onMouseLeave, ...rest }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <span {...rest}
+      onMouseEnter={(e) => { setHover(true); onMouseEnter && onMouseEnter(e); }}
+      onMouseLeave={(e) => { setHover(false); onMouseLeave && onMouseLeave(e); }}
+      style={{ width: 22, height: 22, 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} strokeWidth={2.2} />
+    </span>
+  );
+}
+
+/** Labeled input port pill ("A >", "B >") — 28×22, same three tones as Port. */
+export function PortLabel({ label = "A", tone = "default", interactive = false, style, onMouseEnter, onMouseLeave, ...rest }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <span {...rest}
+      onMouseEnter={(e) => { setHover(true); onMouseEnter && onMouseEnter(e); }}
+      onMouseLeave={(e) => { setHover(false); onMouseLeave && onMouseLeave(e); }}
+      style={{ width: 28, height: 22, borderRadius: "var(--radius-full)", boxSizing: "border-box", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 2, fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", lineHeight: 1, ...portSkin(tone, hover, interactive), ...style }}>
+      {tone === "target" ? <Icon name="plus" size={12} strokeWidth={2.2} /> : <>{label}<Icon name="chevron-right" size={9} strokeWidth={2.5} /></>}
+    </span>
+  );
+}
+
+/**
+ * Canvas node card — 220×90, r16, soft shadow. Selected = blue border + blue-100 ring.
+ * badge: "error" | "warning" | "clock" overlay on the icon tile.
+ * Port interaction is driven by the canvas: onOutputDown starts a wire, onInputUp lands it,
+ * and outputTone / inputTones light the handles.
+ */
+export function NodeCard({ title, subtitle, icon = "table", subtitleIcon, hue = "source", selected, badge, inputs = [], output = true, showMenu = true, onClick, onMenu, onOutputDown, onInputUp, onInputEnter, onInputLeave, outputTone = "default", inputTones = [], style }) {
+  const live = !!(onOutputDown || onInputUp);
+  return (
+    <div onClick={onClick} style={{ position: "relative", width: 220, height: 90, borderRadius: "var(--radius-node)", background: "var(--bg-surface)", border: `1px solid ${selected ? "var(--selected-border)" : "var(--border-control)"}`, boxShadow: selected ? "var(--shadow-selected)" : "var(--shadow-node)", boxSizing: "border-box", cursor: "pointer", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: 16, height: "100%", boxSizing: "border-box" }}>
+        <span style={{ position: "relative", flexShrink: 0 }}>
+          <IconTile icon={icon} hue={hue} kind="node" />
+          {badge === "error" ? <StatusBadge tone="danger" icon="bug" size={20} style={{ position: "absolute", top: -6, right: -6 }} /> : null}
+          {badge === "warning" ? <StatusBadge tone="warning" icon="triangle-alert" size={20} style={{ position: "absolute", top: -6, right: -6 }} /> : null}
+          {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={{ 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}
+            {/* 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>
+        </div>
+      </div>
+      {showMenu ? (
+        <button type="button" onClick={(e) => { e.stopPropagation(); onMenu && onMenu(e); }} style={{ position: "absolute", top: 10, right: 12, width: 23, height: 23, borderRadius: "var(--radius-md)", border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", padding: 0 }}
+          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
+          <Icon name="ellipsis" size={15} />
+        </button>
+      ) : null}
+      {inputs.length === 0 ? null : inputs.length === 1 && !inputs[0] ? (
+        <Port tone={inputTones[0] || "default"} interactive={live}
+          onMouseEnter={onInputEnter ? () => onInputEnter(0) : undefined} onMouseLeave={onInputLeave ? () => onInputLeave(0) : undefined}
+          onPointerUp={onInputUp ? (e) => onInputUp(0, e) : undefined}
+          style={{ position: "absolute", left: -11, top: 33 }} />
+      ) : inputs.map((l, i) => (
+        <PortLabel key={i} label={l} tone={inputTones[i] || "default"} interactive={live}
+          onMouseEnter={onInputEnter ? () => onInputEnter(i) : undefined} onMouseLeave={onInputLeave ? () => onInputLeave(i) : undefined}
+          onPointerUp={onInputUp ? (e) => onInputUp(i, e) : undefined}
+          style={{ position: "absolute", left: -14, top: inputs.length === 1 ? 33 : 12 + i * 38 }} />
+      ))}
+      {output ? (
+        <Port tone={outputTone} interactive={live}
+          onPointerDown={onOutputDown ? (e) => { e.stopPropagation(); onOutputDown(e); } : undefined}
+          onClick={onOutputDown ? (e) => e.stopPropagation() : undefined}
+          style={{ position: "absolute", right: -11, top: 33 }} />
+      ) : null}
+    </div>
+  );
+}