@vaultgradient/pipequery-lang 1.2.2

package/dist/react/index.js

@@ -0,0 +1,1374 @@
+// src/react/PipeQueryBuilder.tsx
+import { useState as useState3, useCallback, useMemo, useEffect, useRef } from "react";
+import { Box as Box6 } from "@mui/material";
+
+// src/react/SourceNode.tsx
+import {
+  Paper,
+  Stack,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Chip,
+  alpha
+} from "@mui/material";
+import StorageIcon from "@mui/icons-material/Storage";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SourceNode({
+  source,
+  onSourceChange,
+  availableSources,
+  rowCount,
+  orientation,
+  compact
+}) {
+  const isH = orientation === "horizontal";
+  const iconSz = compact ? 16 : 20;
+  const chipFontSz = compact ? "0.6rem" : "0.7rem";
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      variant: "outlined",
+      sx: {
+        p: compact ? 0.75 : 1.5,
+        ...isH ? {
+          borderLeft: "3px solid",
+          borderLeftColor: "primary.main",
+          width: compact ? 140 : 180,
+          flexShrink: 0,
+          alignSelf: "stretch",
+          display: "flex",
+          alignItems: "center"
+        } : {
+          borderTop: "3px solid",
+          borderTopColor: "primary.main"
+        },
+        background: (t) => `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.06)} 0%, transparent 60%)`
+      },
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: isH && compact ? "column" : "row",
+          spacing: compact ? 0.5 : 1,
+          sx: { alignItems: isH && compact ? "flex-start" : "center", width: "100%" },
+          children: [
+            /* @__PURE__ */ jsx(StorageIcon, { sx: { color: "primary.main", fontSize: iconSz } }),
+            /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: { flex: 1, minWidth: 0 }, children: [
+              !compact && /* @__PURE__ */ jsx(InputLabel, { children: "Source" }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: source,
+                  label: compact ? void 0 : "Source",
+                  onChange: (e) => onSourceChange(e.target.value),
+                  MenuProps: { style: { zIndex: 1400 } },
+                  sx: {
+                    fontSize: compact ? "0.72rem" : "0.85rem",
+                    "& .MuiSelect-select": compact ? { py: 0.5, px: 0.75 } : {}
+                  },
+                  children: availableSources.map((s) => /* @__PURE__ */ jsx(MenuItem, { value: s, sx: { fontSize: compact ? "0.72rem" : "0.85rem" }, children: s }, s))
+                }
+              )
+            ] }),
+            rowCount != null && /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: `${rowCount.toLocaleString()}`,
+                size: "small",
+                variant: "outlined",
+                sx: {
+                  fontFamily: '"JetBrains Mono", monospace',
+                  fontSize: chipFontSz,
+                  height: compact ? 18 : 24,
+                  borderColor: (t) => alpha(t.palette.primary.main, 0.3)
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/react/ResultNode.tsx
+import { Paper as Paper2, Stack as Stack2, Typography, Box, alpha as alpha2 } from "@mui/material";
+import CodeIcon from "@mui/icons-material/Code";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ResultNode({
+  query,
+  orientation,
+  compact
+}) {
+  const isH = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs2(
+    Paper2,
+    {
+      variant: "outlined",
+      sx: {
+        p: compact ? 0.75 : 1.5,
+        ...isH ? {
+          borderRight: "3px solid",
+          borderRightColor: "success.main",
+          width: compact ? 160 : 220,
+          flexShrink: 0,
+          alignSelf: "stretch",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center"
+        } : {
+          borderBottom: "3px solid",
+          borderBottomColor: "success.main"
+        },
+        background: (t) => `linear-gradient(135deg, ${alpha2(t.palette.success.main, 0.04)} 0%, transparent 60%)`
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", spacing: 0.5, sx: { alignItems: "center", mb: compact ? 0.25 : 0.75 }, children: [
+          /* @__PURE__ */ jsx2(CodeIcon, { sx: { fontSize: compact ? 14 : 18, color: "success.main" } }),
+          /* @__PURE__ */ jsx2(Typography, { sx: { fontWeight: 600, fontSize: compact ? "0.65rem" : "0.8rem" }, children: "Query" })
+        ] }),
+        /* @__PURE__ */ jsx2(Box, { sx: {
+          p: compact ? 0.5 : 1,
+          bgcolor: "background.default",
+          borderRadius: 0.5,
+          fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+          fontSize: compact ? "0.62rem" : "0.72rem",
+          color: "text.primary",
+          minHeight: compact ? 20 : 32,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all",
+          lineHeight: 1.5,
+          overflow: "hidden",
+          maxHeight: isH ? 80 : "none"
+        }, children: query || "\u2014" })
+      ]
+    }
+  );
+}
+
+// src/react/PipelineConnector.tsx
+import { useState as useState2 } from "react";
+import { Box as Box3, IconButton, alpha as alpha4 } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+
+// src/react/StepPicker.tsx
+import { useState } from "react";
+import {
+  Box as Box2,
+  Typography as Typography2,
+  Chip as Chip2,
+  Stack as Stack3,
+  Popover,
+  Select as Select2,
+  MenuItem as MenuItem2,
+  ListSubheader,
+  alpha as alpha3
+} from "@mui/material";
+
+// src/react/icons.tsx
+import FilterListIcon from "@mui/icons-material/FilterList";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+import WorkspacesIcon from "@mui/icons-material/Workspaces";
+import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
+import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
+import MergeTypeIcon from "@mui/icons-material/MergeType";
+import TransformIcon from "@mui/icons-material/Transform";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import CompressIcon from "@mui/icons-material/Compress";
+import DeblurIcon from "@mui/icons-material/Deblur";
+import PivotTableChartIcon from "@mui/icons-material/PivotTableChart";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ICON_MAP = {
+  where: FilterListIcon,
+  distinct: DeblurIcon,
+  select: ViewColumnIcon,
+  map: TransformIcon,
+  flatten: UnfoldLessIcon,
+  transpose: SwapHorizIcon,
+  sort: SwapVertIcon,
+  groupBy: WorkspacesIcon,
+  reduce: CompressIcon,
+  rollup: BarChartIcon,
+  pivot: PivotTableChartIcon,
+  first: VerticalAlignTopIcon,
+  last: VerticalAlignBottomIcon,
+  join: MergeTypeIcon
+};
+function OperationIcon({ type, size = 16 }) {
+  const Icon = ICON_MAP[type];
+  return /* @__PURE__ */ jsx3(Icon, { sx: { fontSize: size } });
+}
+
+// src/react/types.ts
+var CATEGORY_COLORS = {
+  filter: "#42a5f5",
+  transform: "#66bb6a",
+  sort: "#ffa726",
+  aggregate: "#ab47bc",
+  limit: "#26a69a",
+  join: "#ff7043"
+};
+var OPERATION_META = {
+  where: { label: "Filter (where)", shortLabel: "where", category: "filter", color: CATEGORY_COLORS.filter },
+  distinct: { label: "Distinct", shortLabel: "distinct", category: "filter", color: CATEGORY_COLORS.filter },
+  select: { label: "Select fields", shortLabel: "select", category: "transform", color: CATEGORY_COLORS.transform },
+  map: { label: "Map (add fields)", shortLabel: "map", category: "transform", color: CATEGORY_COLORS.transform },
+  flatten: { label: "Flatten", shortLabel: "flatten", category: "transform", color: CATEGORY_COLORS.transform },
+  transpose: { label: "Transpose", shortLabel: "transpose", category: "transform", color: CATEGORY_COLORS.transform },
+  sort: { label: "Sort", shortLabel: "sort", category: "sort", color: CATEGORY_COLORS.sort },
+  groupBy: { label: "Group By", shortLabel: "groupBy", category: "aggregate", color: CATEGORY_COLORS.aggregate },
+  reduce: { label: "Reduce", shortLabel: "reduce", category: "aggregate", color: CATEGORY_COLORS.aggregate },
+  rollup: { label: "Rollup", shortLabel: "rollup", category: "aggregate", color: CATEGORY_COLORS.aggregate },
+  pivot: { label: "Pivot", shortLabel: "pivot", category: "aggregate", color: CATEGORY_COLORS.aggregate },
+  first: { label: "First N", shortLabel: "first", category: "limit", color: CATEGORY_COLORS.limit },
+  last: { label: "Last N", shortLabel: "last", category: "limit", color: CATEGORY_COLORS.limit },
+  join: { label: "Join", shortLabel: "join", category: "join", color: CATEGORY_COLORS.join }
+};
+var CATEGORIES_ORDERED = [
+  { key: "filter", label: "Filter", ops: ["where", "distinct"] },
+  { key: "transform", label: "Transform", ops: ["select", "map", "flatten", "transpose"] },
+  { key: "sort", label: "Sort", ops: ["sort"] },
+  { key: "aggregate", label: "Aggregate", ops: ["groupBy", "reduce", "rollup", "pivot"] },
+  { key: "limit", label: "Limit", ops: ["first", "last"] },
+  { key: "join", label: "Join", ops: ["join"] }
+];
+function createDefaultConfig(type) {
+  switch (type) {
+    case "where":
+      return { type, config: { condition: "" } };
+    case "select":
+      return { type, config: { fields: [], expressions: [] } };
+    case "sort":
+      return { type, config: { criteria: [{ field: "", direction: "asc" }] } };
+    case "groupBy":
+      return { type, config: { fields: [] } };
+    case "join":
+      return { type, config: { rightSource: "", condition: "" } };
+    case "first":
+      return { type, config: { count: 10 } };
+    case "last":
+      return { type, config: { count: 10 } };
+    case "distinct":
+      return { type, config: { fields: [] } };
+    case "map":
+      return { type, config: { expressions: [""] } };
+    case "reduce":
+      return { type, config: { initial: "0", accumulator: "" } };
+    case "rollup":
+      return { type, config: { keys: [], aggregates: [""] } };
+    case "pivot":
+      return { type, config: { pivotField: "", aggregates: [""] } };
+    case "flatten":
+      return { type, config: { field: "" } };
+    case "transpose":
+      return { type, config: { headerField: "" } };
+  }
+}
+function getStepSummary(step) {
+  switch (step.type) {
+    case "where":
+      return step.config.condition || "(no condition)";
+    case "select": {
+      const all = [...step.config.fields, ...step.config.expressions.filter(Boolean)];
+      return all.length > 0 ? all.join(", ") : "(no fields)";
+    }
+    case "sort": {
+      const parts = step.config.criteria.filter((c) => c.field).map(
+        (c) => c.direction === "desc" ? `${c.field} \u2193` : `${c.field} \u2191`
+      );
+      return parts.length > 0 ? parts.join(", ") : "(no criteria)";
+    }
+    case "groupBy":
+      return step.config.fields.length > 0 ? step.config.fields.join(", ") : "(no fields)";
+    case "join":
+      return step.config.rightSource ? `${step.config.rightSource} on ${step.config.condition || "..."}` : "(not configured)";
+    case "first":
+    case "last":
+      return `${step.config.count} rows`;
+    case "distinct":
+      return step.config.fields.length > 0 ? step.config.fields.join(", ") : "all fields";
+    case "map": {
+      const exprs = step.config.expressions.filter(Boolean);
+      return exprs.length > 0 ? exprs.join(", ") : "(no expressions)";
+    }
+    case "reduce":
+      return step.config.accumulator || "(no accumulator)";
+    case "rollup": {
+      const parts = [...step.config.keys, ...step.config.aggregates.filter(Boolean)];
+      return parts.length > 0 ? parts.join(", ") : "(not configured)";
+    }
+    case "pivot":
+      return step.config.pivotField || "(no pivot field)";
+    case "flatten":
+      return step.config.field || "all";
+    case "transpose":
+      return step.config.headerField || "auto";
+  }
+}
+function generateQuery(source, steps) {
+  if (!source) return "";
+  const parts = [source];
+  for (const { step } of steps) {
+    const dsl = stepToDsl(step);
+    if (dsl) parts.push(dsl);
+  }
+  return parts.join(" | ");
+}
+function stepToDsl(step) {
+  switch (step.type) {
+    case "where":
+      return step.config.condition ? `where(${step.config.condition})` : null;
+    case "select": {
+      const all = [...step.config.fields, ...step.config.expressions.filter(Boolean)];
+      return all.length > 0 ? `select(${all.join(", ")})` : null;
+    }
+    case "sort": {
+      const parts = step.config.criteria.filter((c) => c.field).map((c) => c.direction === "desc" ? `${c.field} desc` : c.field);
+      return parts.length > 0 ? `sort(${parts.join(", ")})` : null;
+    }
+    case "groupBy":
+      return step.config.fields.length > 0 ? `groupBy(${step.config.fields.join(", ")})` : null;
+    case "join":
+      return step.config.rightSource && step.config.condition ? `join(${step.config.rightSource}, ${step.config.condition})` : null;
+    case "first":
+      return `first(${step.config.count})`;
+    case "last":
+      return `last(${step.config.count})`;
+    case "distinct":
+      return step.config.fields.length > 0 ? `distinct(${step.config.fields.join(", ")})` : "distinct()";
+    case "map": {
+      const exprs = step.config.expressions.filter(Boolean);
+      return exprs.length > 0 ? `map(${exprs.join(", ")})` : null;
+    }
+    case "reduce":
+      return step.config.initial && step.config.accumulator ? `reduce(${step.config.initial}, ${step.config.accumulator})` : null;
+    case "rollup": {
+      const parts = [...step.config.keys, ...step.config.aggregates.filter(Boolean)];
+      return parts.length > 0 ? `rollup(${parts.join(", ")})` : null;
+    }
+    case "pivot": {
+      const aggs = step.config.aggregates.filter(Boolean);
+      return step.config.pivotField && aggs.length > 0 ? `pivot(${step.config.pivotField}, ${aggs.join(", ")})` : null;
+    }
+    case "flatten":
+      return step.config.field ? `flatten(${step.config.field})` : "flatten()";
+    case "transpose":
+      return step.config.headerField ? `transpose(${step.config.headerField})` : "transpose()";
+  }
+}
+
+// src/react/StepPicker.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PopoverPicker({ anchorEl, onClose, onSelect, orientation }) {
+  const isH = orientation === "horizontal";
+  return /* @__PURE__ */ jsx4(
+    Popover,
+    {
+      open: Boolean(anchorEl),
+      anchorEl,
+      onClose,
+      anchorOrigin: isH ? { vertical: "bottom", horizontal: "center" } : { vertical: "center", horizontal: "right" },
+      transformOrigin: isH ? { vertical: "top", horizontal: "center" } : { vertical: "center", horizontal: "left" },
+      slotProps: { paper: { sx: { p: 1.5, minWidth: 240, maxWidth: 320 } } },
+      children: CATEGORIES_ORDERED.map(({ key, label, ops }) => /* @__PURE__ */ jsxs3(Box2, { sx: { mb: 1.25, "&:last-child": { mb: 0 } }, children: [
+        /* @__PURE__ */ jsx4(
+          Typography2,
+          {
+            variant: "caption",
+            sx: {
+              color: CATEGORY_COLORS[key],
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              fontSize: "0.58rem",
+              mb: 0.4,
+              display: "block"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx4(Stack3, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 }, children: ops.map((op) => /* @__PURE__ */ jsx4(
+          Chip2,
+          {
+            label: OPERATION_META[op].shortLabel,
+            size: "small",
+            icon: /* @__PURE__ */ jsx4(OperationIcon, { type: op, size: 14 }),
+            onClick: () => onSelect(op),
+            variant: "outlined",
+            sx: {
+              cursor: "pointer",
+              height: 24,
+              fontSize: "0.68rem",
+              borderColor: alpha3(CATEGORY_COLORS[key], 0.35),
+              color: CATEGORY_COLORS[key],
+              "& .MuiChip-icon": { color: CATEGORY_COLORS[key] },
+              "&:hover": {
+                bgcolor: alpha3(CATEGORY_COLORS[key], 0.12),
+                borderColor: CATEGORY_COLORS[key]
+              }
+            }
+          },
+          op
+        )) })
+      ] }, key))
+    }
+  );
+}
+function CompactPicker({ onSelect }) {
+  const [value, setValue] = useState("");
+  return /* @__PURE__ */ jsx4(
+    Select2,
+    {
+      size: "small",
+      value,
+      displayEmpty: true,
+      onChange: (e) => {
+        const v = e.target.value;
+        if (v) {
+          onSelect(v);
+          setValue("");
+        }
+      },
+      renderValue: () => /* @__PURE__ */ jsx4(Typography2, { sx: { fontSize: "0.65rem", color: "text.secondary" }, children: "+ step" }),
+      MenuProps: { style: { zIndex: 1400 } },
+      sx: {
+        minWidth: 70,
+        height: 22,
+        "& .MuiSelect-select": { py: 0.25, px: 0.75 },
+        fontSize: "0.7rem"
+      },
+      children: CATEGORIES_ORDERED.map(({ key, label, ops }) => [
+        /* @__PURE__ */ jsx4(
+          ListSubheader,
+          {
+            sx: {
+              fontSize: "0.58rem",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              color: CATEGORY_COLORS[key],
+              lineHeight: "24px",
+              bgcolor: "background.paper"
+            },
+            children: label
+          },
+          `h-${key}`
+        ),
+        ...ops.map((op) => /* @__PURE__ */ jsxs3(
+          MenuItem2,
+          {
+            value: op,
+            sx: {
+              fontSize: "0.7rem",
+              py: 0.25,
+              minHeight: "auto",
+              gap: 0.75,
+              color: CATEGORY_COLORS[key]
+            },
+            children: [
+              /* @__PURE__ */ jsx4(OperationIcon, { type: op, size: 13 }),
+              OPERATION_META[op].shortLabel
+            ]
+          },
+          op
+        ))
+      ]).flat()
+    }
+  );
+}
+function StepPicker({
+  anchorEl,
+  onClose,
+  onSelect,
+  compact,
+  orientation
+}) {
+  if (compact) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(
+    PopoverPicker,
+    {
+      anchorEl,
+      onClose,
+      onSelect,
+      orientation
+    }
+  );
+}
+
+// src/react/PipelineConnector.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function PipelineConnector({
+  orientation,
+  compact,
+  onInsert
+}) {
+  const [anchorEl, setAnchorEl] = useState2(null);
+  const isH = orientation === "horizontal";
+  const lineLen = compact ? 6 : 10;
+  const btnSize = compact ? 20 : 26;
+  const iconSize = compact ? 12 : 14;
+  if (compact) {
+    return /* @__PURE__ */ jsxs4(Box3, { sx: {
+      display: "flex",
+      flexDirection: isH ? "row" : "column",
+      alignItems: "center",
+      ...isH ? { py: 0 } : { px: 0 }
+    }, children: [
+      /* @__PURE__ */ jsx5(Box3, { sx: {
+        ...isH ? { height: 2, width: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.15) } : { width: 2, height: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.15) }
+      } }),
+      /* @__PURE__ */ jsx5(CompactPicker, { onSelect: onInsert }),
+      /* @__PURE__ */ jsx5(Box3, { sx: {
+        ...isH ? { height: 2, width: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.15) } : { width: 2, height: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.15) }
+      } })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Box3, { sx: {
+    display: "flex",
+    flexDirection: isH ? "row" : "column",
+    alignItems: "center",
+    ...isH ? { py: 0 } : { py: 0.25 }
+  }, children: [
+    /* @__PURE__ */ jsx5(Box3, { sx: {
+      ...isH ? { height: 2, width: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.2) } : { width: 2, height: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.2) }
+    } }),
+    /* @__PURE__ */ jsx5(
+      IconButton,
+      {
+        size: "small",
+        onClick: (e) => setAnchorEl(e.currentTarget),
+        sx: {
+          width: btnSize,
+          height: btnSize,
+          border: "2px dashed",
+          borderColor: (t) => alpha4(t.palette.text.secondary, 0.25),
+          color: "text.secondary",
+          transition: "all 0.2s",
+          "&:hover": {
+            borderColor: "primary.main",
+            borderStyle: "solid",
+            color: "primary.main",
+            bgcolor: (t) => alpha4(t.palette.primary.main, 0.08),
+            transform: "scale(1.15)"
+          }
+        },
+        children: /* @__PURE__ */ jsx5(AddIcon, { sx: { fontSize: iconSize } })
+      }
+    ),
+    /* @__PURE__ */ jsx5(Box3, { sx: {
+      ...isH ? { height: 2, width: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.2) } : { width: 2, height: lineLen, bgcolor: (t) => alpha4(t.palette.text.secondary, 0.2) }
+    } }),
+    /* @__PURE__ */ jsx5(
+      StepPicker,
+      {
+        anchorEl,
+        onClose: () => setAnchorEl(null),
+        onSelect: (type) => {
+          onInsert(type);
+          setAnchorEl(null);
+        },
+        compact: false,
+        orientation
+      }
+    )
+  ] });
+}
+
+// src/react/StepCard.tsx
+import {
+  Paper as Paper3,
+  Stack as Stack5,
+  Typography as Typography4,
+  Box as Box5,
+  IconButton as IconButton3,
+  Collapse,
+  alpha as alpha6
+} from "@mui/material";
+import DeleteOutlineIcon2 from "@mui/icons-material/DeleteOutlined";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+// src/react/StepConfigForm.tsx
+import {
+  TextField,
+  Stack as Stack4,
+  Autocomplete,
+  ToggleButton,
+  ToggleButtonGroup,
+  Button,
+  IconButton as IconButton2,
+  FormControl as FormControl2,
+  InputLabel as InputLabel2,
+  Select as Select3,
+  MenuItem as MenuItem3,
+  Typography as Typography3,
+  Box as Box4,
+  alpha as alpha5
+} from "@mui/material";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createElement } from "react";
+var MONO = '"JetBrains Mono", "Fira Code", monospace';
+var POPPER_PROPS = { style: { zIndex: 1400 } };
+var AGG_CATALOG = [
+  { group: "Basic", name: "count", hint: "Row count" },
+  { group: "Basic", name: "sum", hint: "Total" },
+  { group: "Basic", name: "avg", hint: "Arithmetic mean" },
+  { group: "Basic", name: "min", hint: "Minimum" },
+  { group: "Basic", name: "max", hint: "Maximum" },
+  { group: "Statistical", name: "median", hint: "50th percentile" },
+  { group: "Statistical", name: "stddev", hint: "Std deviation" },
+  { group: "Statistical", name: "var", hint: "Variance" },
+  { group: "Statistical", name: "percentile", hint: "p-th percentile (2-arg)" },
+  { group: "Distribution", name: "skew", hint: "Skewness" },
+  { group: "Distribution", name: "kurt", hint: "Excess kurtosis" },
+  { group: "Finance", name: "vwap", hint: "Vol-weighted avg price (2-arg)" },
+  { group: "Finance", name: "wavg", hint: "Weighted average (2-arg)" },
+  { group: "Finance", name: "drawdown", hint: "Max peak-to-trough decline" },
+  { group: "Ratios", name: "pct", hint: "Group % of total" },
+  { group: "Ratios", name: "sharpe", hint: "mean / stddev" },
+  { group: "Ratios", name: "calmar", hint: "mean / |max drawdown|" },
+  { group: "Ratios", name: "sortino", hint: "mean / downside dev" },
+  { group: "Ratios", name: "info_ratio", hint: "Information ratio (2-arg)" },
+  { group: "Counting", name: "distinct_count", hint: "Unique values" },
+  { group: "Counting", name: "sum_abs", hint: "Sum of |values|" },
+  { group: "Counting", name: "abs_sum", hint: "|Sum of values|" },
+  { group: "Counting", name: "first_value", hint: "First in group" },
+  { group: "Counting", name: "last_value", hint: "Last in group" }
+];
+var AGG_NAMES_SET = new Set(AGG_CATALOG.map((a) => a.name));
+var TWO_ARG_FNS = /* @__PURE__ */ new Set(["percentile", "vwap", "wavg", "info_ratio"]);
+var AGG_RE = /^(\w+)\(\s*([^,)]*?)\s*(?:,\s*([^)]*?)\s*)?\)(?:\s+as\s+(\w+))?$/;
+function parseAggExpr(expr) {
+  if (!expr.trim()) return { fn: "", field: "", field2: "", alias: "" };
+  const m = expr.trim().match(AGG_RE);
+  if (!m) return null;
+  const [, fn, field = "", field2 = "", alias = ""] = m;
+  if (!AGG_NAMES_SET.has(fn)) return null;
+  return { fn, field: field.trim(), field2: field2.trim(), alias: alias.trim() };
+}
+function serializeAgg(p) {
+  if (!p.fn) return "";
+  const args = p.field2 ? `${p.field}, ${p.field2}` : p.field;
+  const base = `${p.fn}(${args})`;
+  return p.alias ? `${base} as ${p.alias}` : base;
+}
+function AggregateExprRow({
+  value,
+  availableFields,
+  compact,
+  onChangeValue,
+  onDelete,
+  canDelete
+}) {
+  const mono = { fontFamily: MONO, fontSize: compact ? "0.72rem" : "0.8rem" };
+  const parsed = parseAggExpr(value);
+  if (parsed === null) {
+    return /* @__PURE__ */ jsxs5(Stack4, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx6(
+        TextField,
+        {
+          size: "small",
+          fullWidth: true,
+          placeholder: "e.g. sum(revenue) as total",
+          value,
+          onChange: (e) => onChangeValue(e.target.value),
+          slotProps: { input: { sx: mono } }
+        }
+      ),
+      canDelete && /* @__PURE__ */ jsx6(IconButton2, { size: "small", sx: { p: 0.25 }, onClick: onDelete, children: /* @__PURE__ */ jsx6(DeleteOutlineIcon, { sx: { fontSize: compact ? 12 : 14 } }) })
+    ] });
+  }
+  const isTwoArg = TWO_ARG_FNS.has(parsed.fn);
+  const update = (patch) => {
+    const next = { ...parsed, ...patch };
+    if (patch.fn !== void 0 && !TWO_ARG_FNS.has(patch.fn)) {
+      next.field2 = "";
+    }
+    onChangeValue(serializeAgg(next));
+  };
+  return /* @__PURE__ */ jsxs5(Stack4, { direction: "row", spacing: 0.5, sx: { alignItems: "center", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsx6(
+      Autocomplete,
+      {
+        size: "small",
+        options: AGG_CATALOG,
+        groupBy: (opt) => opt.group,
+        getOptionLabel: (opt) => typeof opt === "string" ? opt : opt.name,
+        isOptionEqualToValue: (opt, val) => opt.name === (typeof val === "string" ? val : val.name),
+        value: AGG_CATALOG.find((a) => a.name === parsed.fn) ?? null,
+        onChange: (_, v) => update({ fn: v?.name ?? "" }),
+        slotProps: { popper: POPPER_PROPS },
+        renderOption: (props, opt) => /* @__PURE__ */ createElement(Box4, { component: "li", ...props, key: opt.name, sx: { display: "flex", gap: 1, alignItems: "center" } }, /* @__PURE__ */ jsx6(Typography3, { sx: { fontFamily: MONO, fontSize: "0.78rem", fontWeight: 600, color: "#82aaff", minWidth: 90 }, children: opt.name }), /* @__PURE__ */ jsx6(Typography3, { sx: { fontSize: "0.72rem", color: alpha5("#fff", 0.45) }, children: opt.hint })),
+        sx: { minWidth: compact ? 100 : 130, flex: "0 1 auto" },
+        renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "fn", sx: { "& input": { ...mono, minWidth: "60px !important" } } })
+      }
+    ),
+    parsed.fn !== "" && parsed.fn !== "count" && /* @__PURE__ */ jsx6(
+      Autocomplete,
+      {
+        size: "small",
+        freeSolo: true,
+        options: availableFields,
+        value: parsed.field,
+        onInputChange: (_, v) => update({ field: v }),
+        sx: { minWidth: compact ? 80 : 100, flex: 1 },
+        slotProps: { popper: POPPER_PROPS },
+        renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "field", sx: { "& input": mono } })
+      }
+    ),
+    isTwoArg && /* @__PURE__ */ jsx6(
+      Autocomplete,
+      {
+        size: "small",
+        freeSolo: true,
+        options: availableFields,
+        value: parsed.field2,
+        onInputChange: (_, v) => update({ field2: v }),
+        sx: { minWidth: compact ? 80 : 100, flex: 1 },
+        slotProps: { popper: POPPER_PROPS },
+        renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "arg2", sx: { "& input": mono } })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      TextField,
+      {
+        size: "small",
+        placeholder: "as",
+        value: parsed.alias,
+        onChange: (e) => update({ alias: e.target.value }),
+        sx: { width: compact ? 60 : 80 },
+        slotProps: { input: { sx: { ...mono, px: 0.5 } } }
+      }
+    ),
+    canDelete && /* @__PURE__ */ jsx6(IconButton2, { size: "small", sx: { p: 0.25 }, onClick: onDelete, children: /* @__PURE__ */ jsx6(DeleteOutlineIcon, { sx: { fontSize: compact ? 12 : 14 } }) })
+  ] });
+}
+function AggregateList({
+  aggregates,
+  availableFields,
+  compact,
+  btnSz,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    aggregates.map((agg, i) => /* @__PURE__ */ jsx6(
+      AggregateExprRow,
+      {
+        value: agg,
+        availableFields,
+        compact,
+        canDelete: aggregates.length > 1,
+        onChangeValue: (v) => {
+          const next = [...aggregates];
+          next[i] = v;
+          onChange(next);
+        },
+        onDelete: () => onChange(aggregates.filter((_, j) => j !== i))
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        size: "small",
+        sx: { fontSize: btnSz, py: 0.25, alignSelf: "flex-start" },
+        onClick: () => onChange([...aggregates, ""]),
+        children: "+ agg"
+      }
+    )
+  ] });
+}
+function StepConfigForm({
+  step,
+  availableFields,
+  joinSources,
+  compact,
+  onChange
+}) {
+  const sp = compact ? 0.5 : 1;
+  const mono = { fontFamily: MONO, fontSize: compact ? "0.72rem" : "0.8rem" };
+  const btnSz = compact ? "0.65rem" : "0.75rem";
+  switch (step.type) {
+    case "where":
+      return /* @__PURE__ */ jsx6(
+        TextField,
+        {
+          size: "small",
+          fullWidth: true,
+          placeholder: "e.g. price > 100",
+          value: step.config.condition,
+          onChange: (e) => onChange({ ...step, config: { condition: e.target.value } }),
+          slotProps: { input: { sx: mono } }
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        /* @__PURE__ */ jsx6(
+          Autocomplete,
+          {
+            multiple: true,
+            size: "small",
+            freeSolo: true,
+            options: availableFields,
+            value: step.config.fields,
+            onChange: (_, v) => onChange({ ...step, config: { ...step.config, fields: v } }),
+            slotProps: { popper: POPPER_PROPS },
+            renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Fields...", sx: { "& input": mono } })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          AggregateList,
+          {
+            aggregates: step.config.expressions,
+            availableFields,
+            compact,
+            btnSz,
+            onChange: (expressions) => onChange({ ...step, config: { ...step.config, expressions } })
+          }
+        )
+      ] });
+    case "sort":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        step.config.criteria.map((c, i) => /* @__PURE__ */ jsxs5(Stack4, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx6(
+            Autocomplete,
+            {
+              size: "small",
+              freeSolo: true,
+              options: availableFields,
+              sx: { flex: 1 },
+              value: c.field,
+              slotProps: { popper: POPPER_PROPS },
+              onInputChange: (_, v) => {
+                const criteria = [...step.config.criteria];
+                criteria[i] = { ...criteria[i], field: v };
+                onChange({ ...step, config: { criteria } });
+              },
+              renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Field", sx: { "& input": mono } })
+            }
+          ),
+          /* @__PURE__ */ jsxs5(
+            ToggleButtonGroup,
+            {
+              size: "small",
+              exclusive: true,
+              value: c.direction,
+              onChange: (_, v) => {
+                if (!v) return;
+                const criteria = [...step.config.criteria];
+                criteria[i] = { ...criteria[i], direction: v };
+                onChange({ ...step, config: { criteria } });
+              },
+              children: [
+                /* @__PURE__ */ jsx6(ToggleButton, { value: "asc", sx: { px: 0.75, fontSize: compact ? "0.6rem" : "0.7rem" }, children: "ASC" }),
+                /* @__PURE__ */ jsx6(ToggleButton, { value: "desc", sx: { px: 0.75, fontSize: compact ? "0.6rem" : "0.7rem" }, children: "DESC" })
+              ]
+            }
+          ),
+          step.config.criteria.length > 1 && /* @__PURE__ */ jsx6(IconButton2, { size: "small", sx: { p: 0.25 }, onClick: () => {
+            const criteria = step.config.criteria.filter((_, j) => j !== i);
+            onChange({ ...step, config: { criteria } });
+          }, children: /* @__PURE__ */ jsx6(DeleteOutlineIcon, { sx: { fontSize: compact ? 12 : 14 } }) })
+        ] }, i)),
+        /* @__PURE__ */ jsx6(
+          Button,
+          {
+            size: "small",
+            sx: { fontSize: btnSz, py: 0.25, alignSelf: "flex-start" },
+            onClick: () => onChange({ ...step, config: { criteria: [...step.config.criteria, { field: "", direction: "asc" }] } }),
+            children: "+ criterion"
+          }
+        )
+      ] });
+    case "groupBy":
+      return /* @__PURE__ */ jsx6(
+        Autocomplete,
+        {
+          multiple: true,
+          size: "small",
+          freeSolo: true,
+          options: availableFields,
+          value: step.config.fields,
+          onChange: (_, v) => onChange({ ...step, config: { fields: v } }),
+          slotProps: { popper: POPPER_PROPS },
+          renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Fields to group by...", sx: { "& input": mono } })
+        }
+      );
+    case "join":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        /* @__PURE__ */ jsxs5(FormControl2, { size: "small", fullWidth: true, children: [
+          /* @__PURE__ */ jsx6(InputLabel2, { children: "Right source" }),
+          /* @__PURE__ */ jsx6(
+            Select3,
+            {
+              value: step.config.rightSource,
+              label: "Right source",
+              onChange: (e) => onChange({ ...step, config: { ...step.config, rightSource: e.target.value } }),
+              MenuProps: { style: { zIndex: 1400 } },
+              children: joinSources.map((s) => /* @__PURE__ */ jsx6(MenuItem3, { value: s, children: s }, s))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            placeholder: "e.g. customerId == id",
+            value: step.config.condition,
+            onChange: (e) => onChange({ ...step, config: { ...step.config, condition: e.target.value } }),
+            slotProps: { input: { sx: mono } }
+          }
+        )
+      ] });
+    case "first":
+    case "last":
+      return /* @__PURE__ */ jsx6(
+        TextField,
+        {
+          size: "small",
+          type: "number",
+          fullWidth: true,
+          value: step.config.count,
+          onChange: (e) => onChange({ ...step, config: { count: Number(e.target.value) || 1 } }),
+          slotProps: { input: { sx: mono } }
+        }
+      );
+    case "distinct":
+      return /* @__PURE__ */ jsx6(
+        Autocomplete,
+        {
+          multiple: true,
+          size: "small",
+          freeSolo: true,
+          options: availableFields,
+          value: step.config.fields,
+          onChange: (_, v) => onChange({ ...step, config: { fields: v } }),
+          slotProps: { popper: POPPER_PROPS },
+          renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Fields (empty = all)...", sx: { "& input": mono } })
+        }
+      );
+    case "map":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        step.config.expressions.map((expr, i) => /* @__PURE__ */ jsx6(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            placeholder: "e.g. price * 1.1 as priceWithTax",
+            value: expr,
+            onChange: (e) => {
+              const expressions = [...step.config.expressions];
+              expressions[i] = e.target.value;
+              onChange({ ...step, config: { expressions } });
+            },
+            slotProps: { input: { sx: mono } }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx6(
+          Button,
+          {
+            size: "small",
+            sx: { fontSize: btnSz, py: 0.25, alignSelf: "flex-start" },
+            onClick: () => onChange({ ...step, config: { expressions: [...step.config.expressions, ""] } }),
+            children: "+ expr"
+          }
+        )
+      ] });
+    case "reduce":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        /* @__PURE__ */ jsx6(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            label: "Initial",
+            placeholder: "e.g. 0",
+            value: step.config.initial,
+            onChange: (e) => onChange({ ...step, config: { ...step.config, initial: e.target.value } }),
+            slotProps: { input: { sx: mono } }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            label: "Accumulator",
+            placeholder: "e.g. _acc + price",
+            value: step.config.accumulator,
+            onChange: (e) => onChange({ ...step, config: { ...step.config, accumulator: e.target.value } }),
+            slotProps: { input: { sx: mono } }
+          }
+        )
+      ] });
+    case "rollup":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        /* @__PURE__ */ jsx6(
+          Autocomplete,
+          {
+            multiple: true,
+            size: "small",
+            freeSolo: true,
+            options: availableFields,
+            value: step.config.keys,
+            onChange: (_, v) => onChange({ ...step, config: { ...step.config, keys: v } }),
+            slotProps: { popper: POPPER_PROPS },
+            renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Group keys...", sx: { "& input": mono } })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          AggregateList,
+          {
+            aggregates: step.config.aggregates,
+            availableFields,
+            compact,
+            btnSz,
+            onChange: (aggregates) => onChange({ ...step, config: { ...step.config, aggregates } })
+          }
+        )
+      ] });
+    case "pivot":
+      return /* @__PURE__ */ jsxs5(Stack4, { spacing: sp, children: [
+        /* @__PURE__ */ jsx6(
+          Autocomplete,
+          {
+            size: "small",
+            freeSolo: true,
+            options: availableFields,
+            value: step.config.pivotField,
+            onInputChange: (_, v) => onChange({ ...step, config: { ...step.config, pivotField: v } }),
+            slotProps: { popper: POPPER_PROPS },
+            renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Pivot field...", sx: { "& input": mono } })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          AggregateList,
+          {
+            aggregates: step.config.aggregates,
+            availableFields,
+            compact,
+            btnSz,
+            onChange: (aggregates) => onChange({ ...step, config: { ...step.config, aggregates } })
+          }
+        )
+      ] });
+    case "flatten":
+      return /* @__PURE__ */ jsx6(
+        Autocomplete,
+        {
+          size: "small",
+          freeSolo: true,
+          options: availableFields,
+          value: step.config.field,
+          onInputChange: (_, v) => onChange({ ...step, config: { field: v } }),
+          slotProps: { popper: POPPER_PROPS },
+          renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Field (optional)...", sx: { "& input": mono } })
+        }
+      );
+    case "transpose":
+      return /* @__PURE__ */ jsx6(
+        Autocomplete,
+        {
+          size: "small",
+          freeSolo: true,
+          options: availableFields,
+          value: step.config.headerField,
+          onInputChange: (_, v) => onChange({ ...step, config: { headerField: v } }),
+          slotProps: { popper: POPPER_PROPS },
+          renderInput: (p) => /* @__PURE__ */ jsx6(TextField, { ...p, placeholder: "Header field...", sx: { "& input": mono } })
+        }
+      );
+  }
+}
+
+// src/react/StepCard.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function StepCard({
+  step,
+  isFirst,
+  isLast,
+  expanded,
+  onToggleExpand,
+  availableFields,
+  joinSources,
+  onUpdate,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  orientation,
+  compact
+}) {
+  const meta = OPERATION_META[step.step.type];
+  const summary = getStepSummary(step.step);
+  const isH = orientation === "horizontal";
+  const iconSz = compact ? 14 : 16;
+  const actionIconSz = compact ? 12 : 14;
+  const PrevIcon = isH ? ArrowBackIcon : ArrowUpwardIcon;
+  const NextIcon = isH ? ArrowForwardIcon : ArrowDownwardIcon;
+  return /* @__PURE__ */ jsxs6(
+    Paper3,
+    {
+      variant: "outlined",
+      sx: {
+        overflow: "hidden",
+        ...isH ? {
+          borderTop: "3px solid",
+          borderTopColor: meta.color,
+          borderRadius: "8px 8px 4px 4px",
+          width: compact ? expanded ? 240 : 140 : expanded ? 280 : 200,
+          flexShrink: 0,
+          alignSelf: "stretch",
+          transition: "box-shadow 0.2s, width 0.25s ease"
+        } : {
+          borderLeft: "4px solid",
+          borderLeftColor: meta.color,
+          borderRadius: "4px 8px 8px 4px",
+          transition: "box-shadow 0.2s"
+        },
+        "&:hover": {
+          boxShadow: `0 0 0 1px ${alpha6(meta.color, 0.25)}`
+        },
+        "& .step-actions": {
+          opacity: 0,
+          transition: "opacity 0.15s"
+        },
+        "&:hover .step-actions": {
+          opacity: 1
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          Stack5,
+          {
+            direction: "row",
+            spacing: 0.5,
+            onClick: onToggleExpand,
+            sx: {
+              alignItems: "center",
+              px: compact ? 0.75 : 1.25,
+              py: compact ? 0.375 : 0.75,
+              cursor: "pointer",
+              "&:hover": { bgcolor: alpha6(meta.color, 0.04) }
+            },
+            children: [
+              /* @__PURE__ */ jsx7(Box5, { sx: { color: meta.color, display: "flex", alignItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx7(OperationIcon, { type: step.step.type, size: iconSz }) }),
+              !compact && /* @__PURE__ */ jsx7(Typography4, { sx: {
+                fontWeight: 600,
+                fontSize: "0.75rem",
+                whiteSpace: "nowrap"
+              }, children: meta.shortLabel }),
+              !expanded && /* @__PURE__ */ jsx7(
+                Typography4,
+                {
+                  sx: {
+                    color: "text.secondary",
+                    fontFamily: '"JetBrains Mono", monospace',
+                    fontSize: compact ? "0.62rem" : "0.68rem",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    flex: 1,
+                    minWidth: 0
+                  },
+                  children: compact ? `${meta.shortLabel}: ${summary}` : summary
+                }
+              ),
+              expanded && /* @__PURE__ */ jsx7(Box5, { sx: { flex: 1 } }),
+              /* @__PURE__ */ jsxs6(
+                Stack5,
+                {
+                  direction: "row",
+                  spacing: 0,
+                  className: "step-actions",
+                  onClick: (e) => e.stopPropagation(),
+                  sx: { flexShrink: 0 },
+                  children: [
+                    /* @__PURE__ */ jsx7(IconButton3, { size: "small", onClick: onMoveUp, disabled: isFirst, sx: { p: compact ? 0.25 : 0.375 }, children: /* @__PURE__ */ jsx7(PrevIcon, { sx: { fontSize: actionIconSz } }) }),
+                    /* @__PURE__ */ jsx7(IconButton3, { size: "small", onClick: onMoveDown, disabled: isLast, sx: { p: compact ? 0.25 : 0.375 }, children: /* @__PURE__ */ jsx7(NextIcon, { sx: { fontSize: actionIconSz } }) }),
+                    /* @__PURE__ */ jsx7(IconButton3, { size: "small", onClick: onRemove, sx: { p: compact ? 0.25 : 0.375, color: "error.main" }, children: /* @__PURE__ */ jsx7(DeleteOutlineIcon2, { sx: { fontSize: actionIconSz } }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx7(ExpandMoreIcon, { sx: {
+                fontSize: compact ? 14 : 18,
+                color: "text.secondary",
+                transition: "transform 0.2s",
+                transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                flexShrink: 0
+              } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(Collapse, { in: expanded, timeout: 200, children: /* @__PURE__ */ jsx7(Box5, { sx: { px: compact ? 0.75 : 1.25, pb: compact ? 0.75 : 1.25 }, children: /* @__PURE__ */ jsx7(
+          StepConfigForm,
+          {
+            step: step.step,
+            availableFields,
+            joinSources,
+            compact,
+            onChange: onUpdate
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/react/PipeQueryBuilder.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function PipeQueryBuilder({
+  orientation,
+  source,
+  onSourceChange,
+  availableSources,
+  availableFields,
+  onQueryChange,
+  compact = false,
+  maxSteps,
+  initialSteps,
+  showResult = true,
+  joinSources = [],
+  rowCount
+}) {
+  const [steps, setSteps] = useState3(() => initialSteps ?? []);
+  const [expandedId, setExpandedId] = useState3(null);
+  const nextId = useRef(1);
+  const isH = orientation === "horizontal";
+  const generatedQuery = useMemo(
+    () => generateQuery(source, steps),
+    [source, steps]
+  );
+  useEffect(() => {
+    onQueryChange(generatedQuery);
+  }, [generatedQuery, onQueryChange]);
+  const insertStepAt = useCallback((index, type) => {
+    if (maxSteps != null && steps.length >= maxSteps) return;
+    const newId = `pq_${nextId.current++}`;
+    setSteps((prev) => {
+      const next = [...prev];
+      next.splice(index, 0, { id: newId, step: createDefaultConfig(type) });
+      return next;
+    });
+    setExpandedId(newId);
+  }, [maxSteps, steps.length]);
+  const removeStep = useCallback((id) => {
+    setSteps((prev) => prev.filter((s) => s.id !== id));
+    setExpandedId((prev) => prev === id ? null : prev);
+  }, []);
+  const moveStep = useCallback((id, direction) => {
+    setSteps((prev) => {
+      const idx = prev.findIndex((s) => s.id === id);
+      if (idx < 0) return prev;
+      const newIdx = direction === "prev" ? idx - 1 : idx + 1;
+      if (newIdx < 0 || newIdx >= prev.length) return prev;
+      const next = [...prev];
+      [next[idx], next[newIdx]] = [next[newIdx], next[idx]];
+      return next;
+    });
+  }, []);
+  const updateStep = useCallback((id, newStep) => {
+    setSteps((prev) => prev.map((s) => s.id === id ? { ...s, step: newStep } : s));
+  }, []);
+  return /* @__PURE__ */ jsx8(Box6, { sx: {
+    display: "flex",
+    flexDirection: isH ? "row" : "column",
+    alignItems: isH ? "stretch" : "center",
+    overflowX: isH ? "auto" : "visible",
+    overflowY: isH ? "visible" : "auto",
+    flex: 1,
+    py: compact ? 0.5 : 1,
+    gap: 0,
+    "&::-webkit-scrollbar": { height: 4 },
+    "&::-webkit-scrollbar-thumb": { bgcolor: "rgba(255,255,255,0.15)", borderRadius: 2 }
+  }, children: /* @__PURE__ */ jsxs7(Box6, { sx: {
+    display: "flex",
+    flexDirection: isH ? "row" : "column",
+    alignItems: isH ? "stretch" : "stretch",
+    ...isH ? {} : { width: "100%", maxWidth: compact ? 360 : 520 }
+  }, children: [
+    /* @__PURE__ */ jsx8(
+      SourceNode,
+      {
+        source,
+        onSourceChange,
+        availableSources,
+        rowCount,
+        orientation,
+        compact
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      PipelineConnector,
+      {
+        orientation,
+        compact,
+        onInsert: (type) => insertStepAt(0, type)
+      }
+    ),
+    steps.map((step, idx) => /* @__PURE__ */ jsxs7(
+      Box6,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: isH ? "row" : "column",
+          alignItems: isH ? "stretch" : "stretch"
+        },
+        children: [
+          /* @__PURE__ */ jsx8(
+            StepCard,
+            {
+              step,
+              isFirst: idx === 0,
+              isLast: idx === steps.length - 1,
+              expanded: expandedId === step.id,
+              onToggleExpand: () => setExpandedId(expandedId === step.id ? null : step.id),
+              availableFields,
+              joinSources,
+              onUpdate: (newStep) => updateStep(step.id, newStep),
+              onRemove: () => removeStep(step.id),
+              onMoveUp: () => moveStep(step.id, "prev"),
+              onMoveDown: () => moveStep(step.id, "next"),
+              orientation,
+              compact
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            PipelineConnector,
+            {
+              orientation,
+              compact,
+              onInsert: (type) => insertStepAt(idx + 1, type)
+            }
+          )
+        ]
+      },
+      step.id
+    )),
+    showResult && /* @__PURE__ */ jsx8(
+      ResultNode,
+      {
+        query: generatedQuery,
+        orientation,
+        compact
+      }
+    )
+  ] }) });
+}
+export {
+  PipeQueryBuilder,
+  createDefaultConfig,
+  generateQuery,
+  getStepSummary
+};