@keyfunc/keybricks-ds 1.0.0

package/components/pipeline/NodeCard.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { IconTile, StatusBadge } from '../display/Badge.vue'
+/**
+ * Canvas node card — 220×90, r16, soft shadow. Selected = blue border + blue-100 ring.
+ * badge: "error" | "warning" | "clock" overlay on the icon tile.
+ * Ports light up on hover, stay lit while a wire is dragged out (outputTone="active"),
+ * and show a crosshair when they are a valid drop target (inputTones[i]="target").
+ */
+const props = defineProps({ title: String, subtitle: String, icon: { type: String, default: 'table' }, subtitleIcon: { type: [String, Boolean], default: 'info' }, hue: { type: String, default: 'source' }, selected: Boolean, badge: String, inputs: { type: Array, default: () => [] }, output: { type: Boolean, default: true }, showMenu: { type: Boolean, default: true }, live: Boolean, outputTone: { type: String, default: 'default' }, inputTones: { type: Array, default: () => [] }, style: Object })
+const emit = defineEmits(['click', 'menu', 'outputDown', 'inputUp', 'inputEnter', 'inputLeave'])
+const hoverOut = ref(false)
+const hoverIn = ref(-1)
+function skin(tone, hover) {
+  const hot = tone === 'active' || tone === 'target' || (props.live && 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: props.live ? (tone === 'active' ? 'grabbing' : 'grab') : 'default',
+    transition: 'var(--t-hover)',
+  }
+}
+const portBase = { width: '22px', height: '22px', borderRadius: 'var(--radius-full)', boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }
+const pillBase = { 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 }
+const tone = i => props.inputTones[i] || 'default'
+</script>
+<template>
+  <div @click="emit('click')" :style="{ position: 'relative', width: '220px', height: '90px', 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;align-items:center;gap:12px;padding:16px;height:100%;box-sizing:border-box">
+      <span style="position:relative;flex-shrink:0">
+        <IconTile :icon="icon" :hue="hue" kind="node" />
+        <StatusBadge v-if="badge === 'error'" tone="danger" icon="bug" :size="20" style="position:absolute;top:-6px;right:-6px" />
+        <StatusBadge v-if="badge === 'warning'" tone="warning" icon="triangle-alert" :size="20" style="position:absolute;top:-6px;right:-6px" />
+        <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="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>
+          <!-- 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>
+      </div>
+    </div>
+    <button v-if="showMenu" type="button" @click.stop="emit('menu', $event)" class="kb-node-menu" style="position:absolute;top:10px;right:12px;width:23px;height:23px;border-radius:var(--radius-md);border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);padding:0">
+      <Icon name="ellipsis" :size="15" />
+    </button>
+    <template v-if="inputs.length">
+      <span v-if="inputs.length === 1 && !inputs[0]"
+        @mouseenter="hoverIn = 0; emit('inputEnter', 0)" @mouseleave="hoverIn = -1; emit('inputLeave', 0)"
+        @pointerup="emit('inputUp', 0, $event)"
+        :style="{ ...portBase, ...skin(tone(0), hoverIn === 0), position: 'absolute', left: '-11px', top: '33px' }">
+        <Icon :name="tone(0) === 'target' ? 'plus' : 'arrow-right'" :size="12" :stroke-width="2.2" />
+      </span>
+      <span v-else v-for="(l, i) in inputs" :key="i"
+        @mouseenter="hoverIn = i; emit('inputEnter', i)" @mouseleave="hoverIn = -1; emit('inputLeave', i)"
+        @pointerup="emit('inputUp', i, $event)"
+        :style="{ ...pillBase, ...skin(tone(i), hoverIn === i), position: 'absolute', left: '-14px', top: (inputs.length === 1 ? 33 : 12 + i * 38) + 'px' }">
+        <Icon v-if="tone(i) === 'target'" name="plus" :size="12" :stroke-width="2.2" />
+        <template v-else>{{ l }}<Icon name="chevron-right" :size="9" :stroke-width="2.5" /></template>
+      </span>
+    </template>
+    <span v-if="output" @mouseenter="hoverOut = true" @mouseleave="hoverOut = false"
+      @pointerdown.stop="emit('outputDown', $event)" @click.stop
+      :style="{ ...portBase, ...skin(outputTone, hoverOut), position: 'absolute', right: '-11px', top: '33px' }">
+      <Icon name="arrow-right" :size="12" :stroke-width="2.2" />
+    </span>
+  </div>
+</template>
+<style scoped>
+.kb-node-menu:hover{background:var(--bg-hover)}
+</style>

package/components/pipeline/PaletteItem.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+import { IconTile } from '../display/Badge.vue'
+// Palette grid tile — 40px tinted icon + 10px two-line label.
+defineProps({ icon: String, hue: String, label: String, style: Object })
+defineEmits(['click'])
+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 }">
+    <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>
+  </div>
+</template>

package/components/pipeline/PaletteListItem.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Palette list row — 14px hued glyph + 13px label, indented under its category.
+defineProps({ icon: String, hue: String, label: String, style: Object })
+defineEmits(['click'])
+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 }">
+    <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>
+</template>

package/components/pipeline/PalettePanel.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface PaletteEntry { label: string; icon: string; }
+export interface PaletteCategory { label: string; icon: string; hue: string; items: PaletteEntry[]; }
+/** The file's complete node inventory: Source / Join / Transformation / Merge / Output. */
+export declare const PIPELINE_CATALOG: PaletteCategory[];
+/** Grid tile (40px tinted icon + 10px label). */
+export declare function PaletteItem(props: { icon: string; hue: string; label: string; onClick?: () => void; style?: React.CSSProperties }): JSX.Element;
+/** List row flavor. */
+export declare function PaletteListItem(props: { icon: string; hue: string; label: string; onClick?: () => void; style?: React.CSSProperties }): JSX.Element;
+/**
+ * 240px "Components" palette with list/grid toggle + collapsible categories.
+ * @startingPoint section="Pipeline" subtitle="Node palette panel (grid + list views)" viewport="240x600"
+ */
+export interface PalettePanelProps {
+  catalog?: PaletteCategory[];
+  height?: number | string;
+  onPick?: (category: string, item: string) => void;
+  style?: React.CSSProperties;
+}
+export declare function PalettePanel(props: PalettePanelProps): JSX.Element;

package/components/pipeline/PalettePanel.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconTile } from "../display/Badge.jsx";
+import { ViewToggle } from "../tabs/ViewToggle.jsx";
+
+/** Palette grid tile — 40px tinted icon + 10px two-line label. */
+export function PaletteItem({ icon, hue, label, onClick, style }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <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>
+    </div>
+  );
+}
+
+/** Palette list row — 14px hued glyph + 13px label, indented under its category. */
+export function PaletteListItem({ icon, hue, label, onClick, style }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <div role="button" tabIndex={0} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(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 }}>
+      <span style={{ color: `var(--cat-${hue})`, display: "inline-flex" }}><Icon name={icon} size={14} /></span>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-body)", whiteSpace: "nowrap" }}>{label}</span>
+    </div>
+  );
+}
+
+/** The full component set of the pipeline editor, verbatim from the file. */
+export const PIPELINE_CATALOG = [
+  { label: "Data Source", icon: "table", hue: "source", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
+  { label: "Data Join", icon: "text-search", hue: "join", items: [{ label: "Lookup Data", icon: "text-search" }, { label: "Association Match", icon: "shuffle" }] },
+  { label: "Data Transformation", icon: "sliders-horizontal", hue: "transform", items: [{ label: "Field Value Calculation", icon: "sliders-horizontal" }, { label: "Field Split", icon: "split" }, { label: "Row to Column", icon: "arrow-right-left" }, { label: "Column to Row", icon: "menu" }, { label: "Multi-Condition Judge", icon: "funnel" }, { label: "Regional Calculation", icon: "chart-no-axes-column" }, { label: "Advanced Transformation", icon: "trending-up" }, { label: "JS Enhanced Processing", icon: "code" }] },
+  { label: "Data Merge", icon: "database", hue: "merge", items: [{ label: "Group Calculation", icon: "database" }, { label: "Concat Merge", icon: "merge" }] },
+  { label: "Data Output", icon: "table", hue: "output", items: [{ label: "Detail Sheet", icon: "table" }, { label: "Model", icon: "layers" }, { label: "Dimension", icon: "grid-3x3" }] },
+];
+
+/** 240px "Components" palette panel with list/grid toggle and collapsible hued categories. */
+export function PalettePanel({ catalog = PIPELINE_CATALOG, height = "100%", onPick, style }) {
+  const [view, setView] = React.useState("grid");
+  const [closed, setClosed] = React.useState([]);
+  const toggle = (l) => setClosed(closed.includes(l) ? closed.filter((x) => x !== l) : [...closed, l]);
+  return (
+    <div style={{ width: "var(--sidebar-w)", height, background: "var(--bg-surface)", borderRight: "1px solid var(--border-card)", display: "flex", flexDirection: "column", boxSizing: "border-box", flexShrink: 0, ...style }}>
+      <div style={{ height: 43, borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 12px", boxSizing: "border-box", flexShrink: 0 }}>
+        <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-body)" }}>Components</span>
+        <ViewToggle value={view} onChange={setView} />
+      </div>
+      <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" }}>
+              <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>
+            </div>
+            {!closed.includes(cat.label) ? (
+              view === "grid" ? (
+                <div style={{ display: "flex", flexWrap: "wrap", padding: "8px 0 8px 4px" }}>
+                  {cat.items.map((it) => <PaletteItem key={it.label} icon={it.icon} hue={cat.hue} label={it.label} onClick={() => onPick && onPick(cat.label, it.label)} />)}
+                </div>
+              ) : (
+                <div style={{ padding: "2px 0 6px 20px", display: "flex", flexDirection: "column" }}>
+                  {cat.items.map((it) => <PaletteListItem key={it.label} icon={it.icon} hue={cat.hue} label={it.label} onClick={() => onPick && onPick(cat.label, it.label)} />)}
+                </div>
+              )
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/pipeline/PalettePanel.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { IconTile } from '../display/Badge.vue'
+import ViewToggle from '../tabs/ViewToggle.vue'
+import PaletteItem from './PaletteItem.vue'
+import PaletteListItem from './PaletteListItem.vue'
+
+export const PIPELINE_CATALOG = [
+  { label: 'Data Source', icon: 'table', hue: 'source', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+  { label: 'Data Join', icon: 'text-search', hue: 'join', items: [{ label: 'Lookup Data', icon: 'text-search' }, { label: 'Association Match', icon: 'shuffle' }] },
+  { label: 'Data Transformation', icon: 'sliders-horizontal', hue: 'transform', items: [{ label: 'Field Value Calculation', icon: 'sliders-horizontal' }, { label: 'Field Split', icon: 'split' }, { label: 'Row to Column', icon: 'arrow-right-left' }, { label: 'Column to Row', icon: 'menu' }, { label: 'Multi-Condition Judge', icon: 'funnel' }, { label: 'Regional Calculation', icon: 'chart-no-axes-column' }, { label: 'Advanced Transformation', icon: 'trending-up' }, { label: 'JS Enhanced Processing', icon: 'code' }] },
+  { label: 'Data Merge', icon: 'database', hue: 'merge', items: [{ label: 'Group Calculation', icon: 'database' }, { label: 'Concat Merge', icon: 'merge' }] },
+  { label: 'Data Output', icon: 'table', hue: 'output', items: [{ label: 'Detail Sheet', icon: 'table' }, { label: 'Model', icon: 'layers' }, { label: 'Dimension', icon: 'grid-3x3' }] },
+]
+// 240px "Components" palette panel with list/grid toggle and collapsible hued categories.
+const props = defineProps({ catalog: { type: Array, default: () => PIPELINE_CATALOG }, height: { type: [String, Number], default: '100%' }, style: Object })
+const emit = defineEmits(['pick'])
+const view = ref('grid')
+const closed = ref([])
+function toggle(l) { closed.value = closed.value.includes(l) ? closed.value.filter(x => x !== l) : [...closed.value, l] }
+</script>
+<template>
+  <div :style="{ width: 'var(--sidebar-w)', height, background: 'var(--bg-surface)', borderRight: '1px solid var(--border-card)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', flexShrink: 0, ...style }">
+    <div style="height:43px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:8px 12px;box-sizing:border-box;flex-shrink:0">
+      <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)">Components</span>
+      <ViewToggle v-model="view" />
+    </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">
+          <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>
+        </div>
+        <div v-if="!closed.includes(cat.label) && view === 'grid'" style="display:flex;flex-wrap:wrap;padding:8px 0 8px 4px">
+          <PaletteItem v-for="it in cat.items" :key="it.label" :icon="it.icon" :hue="cat.hue" :label="it.label" @click="emit('pick', cat.label, it.label)" />
+        </div>
+        <div v-else-if="!closed.includes(cat.label)" style="padding:2px 0 6px 20px;display:flex;flex-direction:column">
+          <PaletteListItem v-for="it in cat.items" :key="it.label" :icon="it.icon" :hue="cat.hue" :label="it.label" @click="emit('pick', cat.label, it.label)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/pipeline/PipelineCanvas.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { NodeCardProps } from "./NodeCard";
+export interface PipelineNode extends NodeCardProps { id: string; x: number; y: number; }
+export interface PipelineEdge { from: string; to: string; /** input index for A/B ports */ toPort?: number; }
+/**
+ * #fafafa canvas with slate-300 bezier edges and positioned NodeCards.
+ * @startingPoint section="Pipeline" subtitle="Node canvas with edges" viewport="700x420"
+ */
+export interface PipelineCanvasProps {
+  nodes?: PipelineNode[];
+  edges?: PipelineEdge[];
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  onMenu?: (id: string, e: React.MouseEvent) => void;
+  /** Enables wire dragging: hold an output port, drop on an input port */
+  onConnect?: (edge: { from: string; to: string; toPort: number }) => void;
+  /** Pointer distance (canvas px) at which a wire snaps to an input port. Default 30 */
+  snapRadius?: number;
+  /** Current zoom factor, so pointer coordinates map back to canvas space */
+  scale?: number;
+  width?: number | string;
+  height?: number | string;
+  style?: React.CSSProperties;
+}
+export declare function PipelineCanvas(props: PipelineCanvasProps): JSX.Element;

package/components/pipeline/PipelineCanvas.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { NodeCard } from "./NodeCard.jsx";
+
+const NODE_W = 220;
+const outPt = (n) => ({ x: n.x + NODE_W, y: n.y + 44 });
+const inPt = (n, portIdx = 0) => {
+  const multi = (n.inputs || []).filter(Boolean).length > 1;
+  return { x: n.x, y: multi ? n.y + 23 + portIdx * 38 : n.y + 44 };
+};
+/** Horizontal cubic bezier; the control offset keeps a backward link bowed out of the cards. */
+const curve = (p1, p2) => {
+  const dx = Math.max(40, (p2.x - p1.x) / 2);
+  return `M ${p1.x} ${p1.y} C ${p1.x + dx} ${p1.y}, ${p2.x - dx} ${p2.y}, ${p2.x} ${p2.y}`;
+};
+
+/**
+ * Pipeline canvas: #fafafa surface, slate bezier edges, absolutely-placed NodeCards.
+ * nodes: [{id,x,y,...NodeCardProps}]; edges: [{from,to,toPort}] (toPort index for A/B inputs).
+ * With onConnect, holding an output port drags a dashed wire; input ports light up as drop
+ * targets and the drop reports {from,to,toPort}. scale tells the canvas its zoom factor so
+ * pointer coordinates stay in canvas space.
+ */
+export function PipelineCanvas({ nodes = [], edges = [], selectedId, onSelect, onMenu, onConnect, snapRadius = 30, scale = 1, width = "100%", height = "100%", style }) {
+  const byId = Object.fromEntries(nodes.map((n) => [n.id, n]));
+  const ref = React.useRef(null);
+  const [drag, setDrag] = React.useState(null); // {from, x, y, over:{id,port}}
+
+  /* The drop target is hit-tested from the pointer position rather than port hover:
+     during a drag the cursor is often over the wire layer, not the 22px handle. */
+  const hitTest = React.useCallback((x, y, fromId) => {
+    let best = null;
+    nodes.forEach((n) => {
+      if (n.id === fromId) return;
+      const ports = n.inputs || [];
+      if (!ports.length) return;
+      ports.forEach((_, i) => {
+        const p = inPt(n, i);
+        const d = Math.hypot(p.x - x, p.y - y);
+        if (d <= snapRadius && (!best || d < best.d)) best = { id: n.id, port: i, d };
+      });
+    });
+    return best ? { id: best.id, port: best.port } : null;
+  }, [nodes, snapRadius]);
+
+  React.useEffect(() => {
+    if (!drag) return;
+    const move = (e) => {
+      const r = ref.current.getBoundingClientRect();
+      const x = (e.clientX - r.left) / scale, y = (e.clientY - r.top) / scale;
+      setDrag((d) => d && { ...d, x, y, over: hitTest(x, y, d.from) });
+    };
+    const up = () => setDrag((d) => {
+      if (d && d.over && onConnect) onConnect({ from: d.from, to: d.over.id, toPort: d.over.port });
+      return null;
+    });
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
+  }, [drag, scale, onConnect, hitTest]);
+
+  const start = (id, e) => {
+    const r = ref.current.getBoundingClientRect();
+    setDrag({ from: id, x: (e.clientX - r.left) / scale, y: (e.clientY - r.top) / scale, over: null });
+  };
+
+  const path = (e) => {
+    const a = byId[e.from], b = byId[e.to];
+    return a && b ? curve(outPt(a), inPt(b, e.toPort || 0)) : "";
+  };
+  const dragPath = () => {
+    const a = byId[drag.from];
+    if (!a) return "";
+    const end = drag.over && byId[drag.over.id] ? inPt(byId[drag.over.id], drag.over.port) : { x: drag.x, y: drag.y };
+    return curve(outPt(a), end);
+  };
+
+  return (
+    <div ref={ref} style={{ position: "relative", width, height, background: "var(--bg-app)", overflow: "hidden", cursor: drag ? "grabbing" : "default", ...style }}>
+      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" }}>
+        {edges.map((e, i) => <path key={i} d={path(e)} fill="none" stroke="var(--edge)" strokeWidth="1.5" />)}
+        {drag ? <path d={dragPath()} fill="none" stroke="var(--action-primary)" strokeWidth="1.5" strokeDasharray="5 4" /> : null}
+      </svg>
+      {nodes.map(({ id, x, y, ...props }) => (
+        <NodeCard key={id} {...props} selected={selectedId === id}
+          onClick={() => !drag && onSelect && onSelect(id)} onMenu={(e) => onMenu && onMenu(id, e)}
+          onOutputDown={onConnect ? (e) => start(id, e) : undefined}
+          onInputUp={onConnect ? () => {} : undefined}
+          outputTone={drag && drag.from === id ? "active" : "default"}
+          inputTones={drag && drag.over && drag.over.id === id ? Object.assign([], { [drag.over.port]: "target" }) : []}
+          style={{ position: "absolute", left: x, top: y }} />
+      ))}
+    </div>
+  );
+}

package/components/pipeline/PipelineCanvas.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, ref, onUnmounted } from 'vue'
+import NodeCard from './NodeCard.vue'
+/**
+ * Pipeline canvas: #fafafa surface, slate bezier edges, absolutely-placed NodeCards.
+ * nodes: [{id,x,y,...NodeCardProps}]; edges: [{from,to,toPort}] (toPort index for A/B inputs).
+ * With connectable, holding an output port drags a dashed wire; input ports light up as drop
+ * targets and the drop emits connect {from,to,toPort}. scale tells the canvas its zoom factor.
+ */
+const props = defineProps({ nodes: { type: Array, default: () => [] }, edges: { type: Array, default: () => [] }, selectedId: [String, Number], connectable: Boolean, snapRadius: { type: Number, default: 30 }, scale: { type: Number, default: 1 }, width: { type: [String, Number], default: '100%' }, height: { type: [String, Number], default: '100%' }, style: Object })
+const emit = defineEmits(['select', 'menu', 'connect'])
+const NODE_W = 220
+const root = ref(null)
+const drag = ref(null)
+const byId = computed(() => Object.fromEntries(props.nodes.map(n => [n.id, n])))
+function outPt(n) { return { x: n.x + NODE_W, y: n.y + 44 } }
+function inPt(n, portIdx = 0) { const multi = (n.inputs || []).filter(Boolean).length > 1; return { x: n.x, y: multi ? n.y + 23 + portIdx * 38 : n.y + 44 } }
+function curve(p1, p2) { const dx = Math.max(40, (p2.x - p1.x) / 2); return `M ${p1.x} ${p1.y} C ${p1.x + dx} ${p1.y}, ${p2.x - dx} ${p2.y}, ${p2.x} ${p2.y}` }
+function path(e) { const a = byId.value[e.from], b = byId.value[e.to]; return a && b ? curve(outPt(a), inPt(b, e.toPort || 0)) : '' }
+const dragPath = computed(() => {
+  const d = drag.value; if (!d) return ''
+  const a = byId.value[d.from]; if (!a) return ''
+  const end = d.over && byId.value[d.over.id] ? inPt(byId.value[d.over.id], d.over.port) : { x: d.x, y: d.y }
+  return curve(outPt(a), end)
+})
+function at(e) { const r = root.value.getBoundingClientRect(); return { x: (e.clientX - r.left) / props.scale, y: (e.clientY - r.top) / props.scale } }
+/* The drop target is hit-tested from the pointer position rather than port hover:
+   during a drag the cursor is often over the wire layer, not the 22px handle. */
+function hitTest(x, y, fromId) {
+  let best = null
+  for (const n of props.nodes) {
+    if (n.id === fromId) continue
+    const ports = n.inputs || []
+    for (let i = 0; i < ports.length; i++) {
+      const p = inPt(n, i)
+      const d = Math.hypot(p.x - x, p.y - y)
+      if (d <= props.snapRadius && (!best || d < best.d)) best = { id: n.id, port: i, d }
+    }
+  }
+  return best ? { id: best.id, port: best.port } : null
+}
+function move(e) {
+  if (!drag.value) return
+  const p = at(e)
+  drag.value = { ...drag.value, ...p, over: hitTest(p.x, p.y, drag.value.from) }
+}
+function up() {
+  const d = drag.value
+  if (d && d.over) emit('connect', { from: d.from, to: d.over.id, toPort: d.over.port })
+  drag.value = null
+  window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up)
+}
+function start(id, e) {
+  if (!props.connectable) return
+  drag.value = { from: id, ...at(e), over: null }
+  window.addEventListener('pointermove', move); window.addEventListener('pointerup', up)
+}
+const inputTones = id => (drag.value && drag.value.over && drag.value.over.id === id ? Object.assign([], { [drag.value.over.port]: 'target' }) : [])
+onUnmounted(() => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) })
+</script>
+<template>
+  <div ref="root" :style="{ position: 'relative', width, height, background: 'var(--bg-app)', overflow: 'hidden', cursor: drag ? 'grabbing' : 'default', ...style }">
+    <svg style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible">
+      <path v-for="(e, i) in edges" :key="i" :d="path(e)" fill="none" stroke="var(--edge)" stroke-width="1.5" />
+      <path v-if="drag" :d="dragPath" fill="none" stroke="var(--action-primary)" stroke-width="1.5" stroke-dasharray="5 4" />
+    </svg>
+    <NodeCard v-for="n in nodes" :key="n.id" v-bind="n" :selected="selectedId === n.id" :live="connectable"
+      :output-tone="drag && drag.from === n.id ? 'active' : 'default'" :input-tones="inputTones(n.id)"
+      @click="!drag && emit('select', n.id)" @menu="emit('menu', n.id)"
+      @output-down="start(n.id, $event)"
+      :style="{ position: 'absolute', left: n.x + 'px', top: n.y + 'px' }" />
+  </div>
+</template>

package/components/pipeline/ZoomControls.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/** Floating canvas zoom control. Addition — the pipeline canvas implies pan/zoom but the source frames never draw its control. */
+export interface ZoomControlsProps {
+  value?: number;
+  onChange?: (next: number) => void;
+  onFit?: () => void;
+  style?: React.CSSProperties;
+}
+export declare function ZoomControls(props: ZoomControlsProps): JSX.Element;

package/components/pipeline/ZoomControls.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconButton } from "../buttons/IconButton.jsx";
+
+/** Floating canvas zoom control (− / percentage / + / fit-to-view). */
+export function ZoomControls({ value = 100, onChange, onFit, style }) {
+  return (
+    <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 }}>
+      <IconButton icon="minus" size="sm" onClick={() => onChange && onChange(Math.max(25, value - 10))} label="Zoom out" />
+      <span style={{ minWidth: 40, textAlign: "center", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{value}%</span>
+      <IconButton icon="plus" size="sm" onClick={() => onChange && onChange(Math.min(200, value + 10))} label="Zoom in" />
+      <span style={{ width: 1, alignSelf: "stretch", background: "var(--border-subtle)", margin: "0 2px" }} />
+      <IconButton icon="target" size="sm" onClick={onFit} label="Fit to view" />
+    </div>
+  );
+}

package/components/pipeline/ZoomControls.vue

@@ -0,0 +1,15 @@
+<script setup>
+import IconButton from '../buttons/IconButton.vue'
+// Floating canvas zoom control (− / percentage / + / fit-to-view).
+const props = defineProps({ modelValue: { type: Number, default: 100 }, style: Object })
+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 }">
+    <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))" />
+    <span style="width:1px;align-self:stretch;background:var(--border-subtle);margin:0 2px" />
+    <IconButton icon="target" size="sm" label="Fit to view" @click="emit('fit')" />
+  </div>
+</template>

package/components/pipeline/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x110" name="Pipeline dir" subtitle="Full card: Components → Pipeline Editor" -->
+<!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 { NodeCard } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<NodeCard title="Sales Orders" subtitle="Detail Sheet" icon="table" hue="source"/>);
+</script></body></html>

package/components/pipeline/pipeline.prompt.md

@@ -0,0 +1,22 @@
+Pipeline editor parts, each with its own card: `NodeCard` (+`Port`/`PortLabel`), `PalettePanel` (+`PIPELINE_CATALOG`, `PaletteItem`, `PaletteListItem`), `PipelineCanvas`, `ConfigPanel`, `ZoomControls`. `DataPreview` is the bottom drawer that wraps the shared dense `DataTable` — reach for `DataTable` directly unless you need the drawer chrome (Debug Mode + collapse).
+
+```jsx
+<PipelineCanvas selectedId={sel} onSelect={setSel}
+  nodes={[
+    {id:"a",x:90,y:90,title:"Sales Orders",subtitle:"Detail Sheet",icon:"table",hue:"source",inputs:[]},
+    {id:"j",x:420,y:150,title:"Sales × Product Join",subtitle:"Association Match",icon:"shuffle",hue:"join",badge:"error",inputs:["A","B"]},
+  ]}
+  edges={[{from:"a",to:"j",toPort:0}]}/>
+<ConfigPanel title="Sales Orders" subtitle="Data Source · Detail Sheet">…Fields…</ConfigPanel>
+<DataPreview columns={[{key:"id",label:"ID",mono:true}]} rows={[{id:"528563"}]}/>
+```
+
+Hues follow PIPELINE_CATALOG: source/join/transform/merge/output. Node subtitles show the node type.
+
+Ports carry three tones: grey at rest, `--action-primary` on hover and while dragging (`outputTone="active"`), and a crosshair drop target (`inputTones[i]="target"`). Pass `onConnect` to `PipelineCanvas` to enable wire dragging — it hit-tests the pointer against input-port geometry within `snapRadius` (30px) and reports `{from,to,toPort}`.
+
+`ZoomControls` (addition) — the pipeline canvas implies pan/zoom but the source frames never draw its control:
+
+```jsx
+<ZoomControls value={zoom} onChange={setZoom} onFit={()=>setZoom(100)}/>
+```

package/components/tabs/SegmentedControl.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+/** Inset segmented control with a raised active segment. Addition — not in the source file. */
+export interface SegmentedControlProps {
+  /** Plain labels, or {label, icon} entries */
+  options?: (string | { label: string; icon?: string })[];
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: "sm" | "md";
+  style?: React.CSSProperties;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;

package/components/tabs/SegmentedControl.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Segmented control — inset track, raised active segment. options: string[] or [{label,icon}]. */
+export function SegmentedControl({ options = [], value, onChange, size = "md", style }) {
+  const h = size === "sm" ? 26 : 32;
+  return (
+    <div style={{ display: "inline-flex", padding: 2, gap: 2, background: "var(--bg-inset)", border: "1px solid var(--border-control)", borderRadius: "var(--radius-md)", boxSizing: "border-box", ...style }}>
+      {options.map((o) => {
+        const label = typeof o === "string" ? o : o.label;
+        const is = value === label;
+        return (
+          <button key={label} type="button" onClick={() => onChange && onChange(label)}
+            style={{ height: h - 6, padding: "0 10px", display: "inline-flex", alignItems: "center", gap: 6, borderRadius: "var(--radius-sm)", border: "none", cursor: "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)", whiteSpace: "nowrap", transition: "var(--t-hover)" }}>
+            {typeof o === "object" && o.icon ? <Icon name={o.icon} size={13} /> : null}{label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/tabs/SegmentedControl.vue

@@ -0,0 +1,15 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+// Segmented control — inset track, raised active segment. options: string[] or [{label,icon}].
+const props = defineProps({ options: { type: Array, default: () => [] }, modelValue: String, size: { type: String, default: 'md' }, style: Object })
+const emit = defineEmits(['update:modelValue'])
+function label(o) { return typeof o === 'string' ? o : o.label }
+</script>
+<template>
+  <div :style="{ display: 'inline-flex', padding: 2, gap: 2, background: 'var(--bg-inset)', border: '1px solid var(--border-control)', borderRadius: 'var(--radius-md)', boxSizing: 'border-box', ...style }">
+    <button v-for="o in options" :key="label(o)" type="button" @click="emit('update:modelValue', label(o))"
+      :style="{ height: (size === 'sm' ? 26 : 32) - 6, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 'var(--radius-sm)', border: 'none', cursor: 'pointer', background: modelValue === label(o) ? 'var(--bg-surface)' : 'transparent', boxShadow: modelValue === label(o) ? '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 === label(o) ? 'var(--text-heading)' : 'var(--text-secondary)', whiteSpace: 'nowrap', transition: 'var(--t-hover)' }">
+      <Icon v-if="typeof o === 'object' && o.icon" :name="o.icon" :size="13" />{{ label(o) }}
+    </button>
+  </div>
+</template>

package/components/tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Underline tabs (Import/Export). Active: blue text + 2px blue underline on hairline baseline. */
+export interface TabsProps {
+  tabs?: string[];
+  active?: string;
+  onChange?: (tab: string) => void;
+  style?: React.CSSProperties;
+}
+export declare function Tabs(props: TabsProps): JSX.Element;
+/** 12px compact underline tabs for panels (Node Info / Calc Rules / ...). */
+export declare function PanelTabs(props: TabsProps): JSX.Element;
+/** Text pill filter tabs; active gets a #f5f5f5 pill. */
+export declare function PillTabs(props: TabsProps): JSX.Element;