@pipelex/mthds-ui 0.6.4 → 0.6.5

package/dist/{chunk-FHRUYFGV.js → chunk-ILX53OYM.js}

@@ -5,6 +5,19 @@ import {
 } from "./chunk-2NMEKWO5.js";
 
 // src/graph/types.ts
+var PIPE_TYPE_PRESENCE = {
+  PipeLLM: true,
+  PipeExtract: true,
+  PipeCompose: true,
+  PipeImgGen: true,
+  PipeSearch: true,
+  PipeFunc: true,
+  PipeSequence: true,
+  PipeParallel: true,
+  PipeCondition: true,
+  PipeBatch: true
+};
+var KNOWN_PIPE_TYPES = new Set(Object.keys(PIPE_TYPE_PRESENCE));
 var NODE_TYPE_PIPE_CARD = "pipeCard";
 var NODE_TYPE_STUFF = "default";
 var NODE_TYPE_CONTROLLER = "controllerGroup";
@@ -39,6 +52,10 @@ var FOLD_MODE = {
   /** Renderer decides — reserved for future heuristics; currently behaves like EXPANDED. */
   AUTO: "auto"
 };
+var GRAPH_THEME = {
+  DARK: "dark",
+  LIGHT: "light"
+};
 var CONTROLLER_PADDING_X = 40;
 var CONTROLLER_PADDING_TOP = 48;
 var CONTROLLER_PADDING_BOTTOM = 20;
@@ -60,6 +77,161 @@ function nodeHeight(n) {
   return ((_b = n.data) == null ? void 0 : _b.isStuff) ? 60 : 70;
 }
 
+// src/graph/validateGraphSpec.ts
+var GraphSpecValidationError = class extends Error {
+  constructor(path, detail) {
+    const location = path === "" ? "<root>" : path;
+    super(`GraphSpec validation failed at ${location}: ${detail}`);
+    this.name = "GraphSpecValidationError";
+    this.path = path;
+  }
+};
+var PIPE_STATUSES = /* @__PURE__ */ new Set([
+  "succeeded",
+  "failed",
+  "running",
+  "scheduled",
+  "skipped",
+  "canceled"
+]);
+var EDGE_KINDS = /* @__PURE__ */ new Set([
+  "contains",
+  "data",
+  "control",
+  "selected_outcome",
+  "batch_item",
+  "batch_aggregate",
+  "parallel_combine"
+]);
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function describe(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (Array.isArray(value)) return "an array";
+  return `a ${typeof value}`;
+}
+function fail(path, detail) {
+  throw new GraphSpecValidationError(path, detail);
+}
+function requireNonEmptyString(value, path) {
+  if (typeof value !== "string" || value.length === 0) {
+    fail(path, `expected a non-empty string, got ${describe(value)}`);
+  }
+  return value;
+}
+function validateIoItem(item, path) {
+  if (!isPlainObject(item)) {
+    fail(path, `expected an object, got ${describe(item)}`);
+  }
+  requireNonEmptyString(item.name, `${path}.name`);
+}
+function validateNode(node, path) {
+  if (!isPlainObject(node)) {
+    fail(path, `expected an object, got ${describe(node)}`);
+  }
+  requireNonEmptyString(node.id, `${path}.id`);
+  if (node.kind !== "controller" && node.kind !== "operator") {
+    fail(
+      `${path}.kind`,
+      `expected "controller" or "operator" \u2014 a real pipelex run emits only pipe-call nodes, got ${JSON.stringify(node.kind)}`
+    );
+  }
+  if (typeof node.status !== "string" || !PIPE_STATUSES.has(node.status)) {
+    fail(
+      `${path}.status`,
+      `expected one of ${[...PIPE_STATUSES].join(", ")}, got ${JSON.stringify(node.status)}`
+    );
+  }
+  requireNonEmptyString(node.pipe_code, `${path}.pipe_code`);
+  const pipeType = requireNonEmptyString(node.pipe_type, `${path}.pipe_type`);
+  if (!KNOWN_PIPE_TYPES.has(pipeType)) {
+    fail(
+      `${path}.pipe_type`,
+      `unrecognized pipe class "${pipeType}" \u2014 add it to PipeOperatorType or PipeControllerType in types.ts`
+    );
+  }
+  requireNonEmptyString(node.description, `${path}.description`);
+  requireNonEmptyString(node.domain_code, `${path}.domain_code`);
+  let io = node.io;
+  if (io === void 0) {
+    io = { inputs: [], outputs: [] };
+    node.io = io;
+  }
+  if (!isPlainObject(io)) {
+    fail(`${path}.io`, `expected an object, got ${describe(io)}`);
+  }
+  if (io.inputs === void 0) {
+    io.inputs = [];
+  } else if (!Array.isArray(io.inputs)) {
+    fail(`${path}.io.inputs`, `expected an array, got ${describe(io.inputs)}`);
+  }
+  if (io.outputs === void 0) {
+    io.outputs = [];
+  } else if (!Array.isArray(io.outputs)) {
+    fail(`${path}.io.outputs`, `expected an array, got ${describe(io.outputs)}`);
+  }
+  io.inputs.forEach((item, j) => validateIoItem(item, `${path}.io.inputs[${j}]`));
+  io.outputs.forEach((item, j) => validateIoItem(item, `${path}.io.outputs[${j}]`));
+}
+function validateEdge(edge, path) {
+  if (!isPlainObject(edge)) {
+    fail(path, `expected an object, got ${describe(edge)}`);
+  }
+  requireNonEmptyString(edge.id, `${path}.id`);
+  requireNonEmptyString(edge.source, `${path}.source`);
+  requireNonEmptyString(edge.target, `${path}.target`);
+  if (typeof edge.kind !== "string" || !EDGE_KINDS.has(edge.kind)) {
+    fail(
+      `${path}.kind`,
+      `expected one of ${[...EDGE_KINDS].join(", ")}, got ${JSON.stringify(edge.kind)}`
+    );
+  }
+}
+function validateGraphSpec(raw) {
+  if (!isPlainObject(raw)) {
+    fail("", `expected a GraphSpec object, got ${describe(raw)}`);
+  }
+  if (!Array.isArray(raw.nodes)) {
+    fail("nodes", `expected an array, got ${describe(raw.nodes)}`);
+  }
+  if (!Array.isArray(raw.edges)) {
+    fail("edges", `expected an array, got ${describe(raw.edges)}`);
+  }
+  if (!isPlainObject(raw.meta)) {
+    fail("meta", `expected an object, got ${describe(raw.meta)}`);
+  }
+  if (raw.meta.format !== "mthds") {
+    fail(
+      "meta.format",
+      `expected "mthds" (this does not look like pipelex GraphSpec JSON), got ${JSON.stringify(raw.meta.format)}`
+    );
+  }
+  if (raw.pipe_registry !== void 0 && !isPlainObject(raw.pipe_registry)) {
+    fail("pipe_registry", `expected an object when present, got ${describe(raw.pipe_registry)}`);
+  }
+  if (raw.concept_registry !== void 0 && !isPlainObject(raw.concept_registry)) {
+    fail(
+      "concept_registry",
+      `expected an object when present, got ${describe(raw.concept_registry)}`
+    );
+  }
+  raw.nodes.forEach((node, i) => validateNode(node, `nodes[${i}]`));
+  raw.edges.forEach((edge, i) => validateEdge(edge, `edges[${i}]`));
+  return raw;
+}
+function asPipeCallNode(node, path = "node") {
+  if (node.kind !== "controller" && node.kind !== "operator") {
+    fail(
+      `${path}.kind`,
+      `expected a pipe-call node ("controller" or "operator"), got ${JSON.stringify(node.kind)}`
+    );
+  }
+  requireNonEmptyString(node.pipe_code, `${path}.pipe_code`);
+  return node;
+}
+
 // src/graph/graphAnalysis.ts
 function buildDataflowAnalysis(graphspec) {
   if (!graphspec) return null;
@@ -77,9 +249,9 @@ function buildDataflowAnalysis(graphspec) {
   }
   const controllerNodeIds = new Set(Object.keys(containmentTree));
   for (const node of graphspec.nodes) {
-    const nodeIo = node.io || {};
+    const nodeIo = node.io;
     const isController = controllerNodeIds.has(node.id);
-    for (const output of nodeIo.outputs || []) {
+    for (const output of nodeIo.outputs) {
       if (output.digest && !stuffRegistry[output.digest]) {
         stuffRegistry[output.digest] = {
           name: output.name,
@@ -91,7 +263,7 @@ function buildDataflowAnalysis(graphspec) {
         stuffProducers[output.digest] = node.id;
       }
     }
-    for (const input of nodeIo.inputs || []) {
+    for (const input of nodeIo.inputs) {
       if (input.digest && !stuffRegistry[input.digest]) {
         stuffRegistry[input.digest] = {
           name: input.name,
@@ -115,7 +287,6 @@ function buildDataflowAnalysis(graphspec) {
   };
 }
 function buildChildToControllerMap(graphspec, analysis) {
-  var _a;
   const childToController = {};
   for (const [ctrlId, children] of Object.entries(analysis.containmentTree)) {
     for (const childId of children) {
@@ -133,7 +304,7 @@ function buildChildToControllerMap(graphspec, analysis) {
     if (!analysis.controllerNodeIds.has(node.id)) continue;
     const parentCtrlId = childToController[node.id];
     if (!parentCtrlId) continue;
-    for (const output of ((_a = node.io) == null ? void 0 : _a.outputs) || []) {
+    for (const output of node.io.outputs) {
       if (!output.digest) continue;
       const stuffId = "stuff_" + output.digest;
       if (!childToController[stuffId]) {
@@ -214,55 +385,20 @@ function resolveConceptRef(spec, codeOrRef) {
 }
 
 // src/graph/pipeCardPayload.ts
-function defaultDescription(pipeType, pipeCode) {
-  const code = pipeCode || "this step";
-  const verb = {
-    PipeLLM: "Analyze and generate output using",
-    PipeExtract: "Extract content from",
-    PipeCompose: "Compose output using",
-    PipeImgGen: "Generate image for",
-    PipeSearch: "Search the web for",
-    PipeFunc: "Process data in"
-  };
-  return `${verb[pipeType] || "Execute"} ${code.replace(/_/g, " ")}`;
-}
-function buildPipeCardPayload(node, graphspec, analysis) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const pipeType = node.pipe_type;
-  const pipeCode = node.pipe_code || node.id;
-  const isController = analysis.controllerNodeIds.has(node.id);
-  const inputs = ((_b = (_a = node.io) == null ? void 0 : _a.inputs) != null ? _b : []).map((i) => {
-    var _a2, _b2;
-    return {
-      name: (_a2 = i.name) != null ? _a2 : "",
-      concept: (_b2 = i.concept) != null ? _b2 : ""
-    };
-  });
-  const outputs = ((_d = (_c = node.io) == null ? void 0 : _c.outputs) != null ? _d : []).map((o) => {
-    var _a2, _b2;
-    return {
-      name: (_a2 = o.name) != null ? _a2 : "",
-      concept: (_b2 = o.concept) != null ? _b2 : ""
-    };
-  });
-  const registryDescription = node.pipe_code ? (_f = (_e = graphspec.pipe_registry) == null ? void 0 : _e[node.pipe_code]) == null ? void 0 : _f.description : void 0;
-  let description;
-  if (node.description) {
-    description = node.description;
-  } else if (registryDescription) {
-    description = registryDescription;
-  } else if (isController) {
-    description = void 0;
-  } else {
-    description = defaultDescription(pipeType, node.pipe_code);
-  }
+function buildPipeCardPayload(node) {
   return {
-    pipeCode,
-    pipeType,
-    description,
-    status: (_g = node.status) != null ? _g : "scheduled",
-    inputs,
-    outputs
+    pipeCode: node.pipe_code,
+    pipeType: node.pipe_type,
+    description: node.description,
+    status: node.status,
+    inputs: node.io.inputs.map((i) => {
+      var _a;
+      return { name: i.name, concept: (_a = i.concept) != null ? _a : "" };
+    }),
+    outputs: node.io.outputs.map((o) => {
+      var _a;
+      return { name: o.name, concept: (_a = o.concept) != null ? _a : "" };
+    })
   };
 }
 
@@ -285,20 +421,21 @@ function buildDataflowGraph(graphspec, analysis, edgeType) {
   }
   for (const node of graphspec.nodes) {
     if (!participatingPipes.has(node.id)) continue;
-    const isFailed = node.status === "failed";
-    const label = node.pipe_code || node.id.split(":").pop() || node.id;
-    const pipeCardData = buildPipeCardPayload(node, graphspec, analysis);
+    const pipeNode = asPipeCallNode(node, `nodes[${node.id}]`);
+    const isFailed = pipeNode.status === "failed";
+    const label = pipeNode.pipe_code;
+    const pipeCardData = buildPipeCardPayload(pipeNode);
     nodes.push({
-      id: node.id,
+      id: pipeNode.id,
       type: NODE_TYPE_PIPE_CARD,
       data: {
         labelDescriptor: { kind: "pipe", label, isFailed },
-        nodeData: node,
+        nodeData: pipeNode,
         isPipe: true,
         isStuff: false,
         labelText: label,
         pipeCode: pipeCardData.pipeCode,
-        pipeType: node.pipe_type,
+        pipeType: pipeNode.pipe_type,
         pipeCardData
       },
       position: { x: 0, y: 0 }
@@ -306,7 +443,7 @@ function buildDataflowGraph(graphspec, analysis, edgeType) {
   }
   for (const [digest, stuffInfo] of Object.entries(analysis.stuffRegistry)) {
     const stuffId = stuffNodeId(digest);
-    const label = stuffInfo.name || "data";
+    const label = stuffInfo.name;
     const concept = stuffInfo.concept || "";
     const textWidth = Math.max(label.length, concept.length) * STUFF_CHAR_WIDTH_PX + STUFF_LABEL_PADDING;
     const stuffWidth = Math.max(MIN_STUFF_WIDTH, textWidth);
@@ -377,7 +514,7 @@ function buildDataflowGraph(graphspec, analysis, edgeType) {
     const sourceId = stuffNodeId(edge.source_stuff_digest);
     const targetId = stuffNodeId(edge.target_stuff_digest);
     edges.push({
-      id: edge.id || "edge_" + edgeId++,
+      id: edge.id,
       source: sourceId,
       target: targetId,
       type: "smoothstep",
@@ -402,7 +539,7 @@ function buildDataflowGraph(graphspec, analysis, edgeType) {
     const targetId = stuffNodeId(edge.target_stuff_digest);
     const isBatchItem = edge.kind === "batch_item";
     edges.push({
-      id: edge.id || "edge_" + edgeId++,
+      id: edge.id,
       source: sourceId,
       target: targetId,
       type: edgeType,
@@ -548,7 +685,7 @@ function applyFolds(graphData, analysis, graphspec, foldedSet, onToggleFold) {
     if (outermostFoldedAncestor(folded, childToCtrl, foldedSet)) continue;
     const specNode = findSpecNode(graphspec, folded);
     if (!specNode) continue;
-    const payload = buildPipeCardPayload(specNode, graphspec, analysis);
+    const payload = buildPipeCardPayload(asPipeCallNode(specNode, folded));
     if (onToggleFold) {
       payload.onExpand = (options) => onToggleFold(folded, options);
     }
@@ -1096,7 +1233,7 @@ function buildControllerNodes(graphspec, analysis, layoutedNodes, controllerPosi
   const controllerInfo = {};
   for (const node of graphspec.nodes) {
     if (analysis.controllerNodeIds.has(node.id)) {
-      controllerInfo[node.id] = node;
+      controllerInfo[node.id] = asPipeCallNode(node, `nodes[${node.id}]`);
     }
   }
   const depthCache = {};
@@ -1168,8 +1305,14 @@ function buildControllerNodes(graphspec, analysis, layoutedNodes, controllerPosi
       groupW = maxX - minX + 2 * padX;
       groupH = maxY - minY + padTop + padBottom;
     }
-    const info = controllerInfo[controllerId] || {};
-    const pipeCode = info.pipe_code || controllerId.split(":").pop() || controllerId;
+    const info = controllerInfo[controllerId];
+    if (!info) {
+      throw new GraphSpecValidationError(
+        `nodes[${controllerId}]`,
+        `controller "${controllerId}" is referenced by a "contains" edge but has no corresponding node in graphspec.nodes`
+      );
+    }
+    const pipeCode = info.pipe_code;
     const groupNode = {
       id: controllerId,
       type: NODE_TYPE_CONTROLLER,
@@ -1319,50 +1462,176 @@ function applyControllers(layoutedNodes, layoutedEdges, graphspec, analysis, sho
 }
 
 // src/graph/graphConfig.ts
+var FONT_TOKENS = {
+  "--font-sans": '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  "--font-mono": '"JetBrains Mono", "Monaco", "Menlo", monospace'
+};
+var DARK_PALETTE_COLORS = __spreadProps(__spreadValues({}, FONT_TOKENS), {
+  // Surfaces
+  "--surface-page": "#0a0a0a",
+  "--surface-panel": "#111118",
+  "--surface-overlay": "rgba(17, 17, 24, 0.8)",
+  "--surface-overlay-hover": "rgba(30, 30, 40, 0.9)",
+  "--surface-overlay-disabled": "rgba(17, 17, 24, 0.6)",
+  "--surface-elevated": "rgba(255, 255, 255, 0.06)",
+  "--surface-elevated-hover": "rgba(255, 255, 255, 0.1)",
+  "--surface-sunken": "rgba(255, 255, 255, 0.03)",
+  "--surface-pill": "rgba(255, 255, 255, 0.06)",
+  "--surface-pill-border": "rgba(255, 255, 255, 0.08)",
+  // Borders
+  "--border-subtle": "rgba(255, 255, 255, 0.06)",
+  "--border-default": "rgba(255, 255, 255, 0.1)",
+  "--border-strong": "rgba(255, 255, 255, 0.18)",
+  "--border-dashed": "rgba(255, 255, 255, 0.15)",
+  // Text
+  "--text-primary": "#f8fafc",
+  "--text-default": "#e2e8f0",
+  "--text-secondary": "#cbd5e1",
+  "--text-muted": "#94a3b8",
+  "--text-dim": "#64748b",
+  "--text-on-accent": "#0e0e0e",
+  // Effects
+  "--shadow-sm": "0 2px 8px rgba(0, 0, 0, 0.4)",
+  "--shadow-md": "0 4px 16px rgba(0, 0, 0, 0.6)",
+  "--shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.5)",
+  "--focus-ring": "rgba(59, 130, 246, 0.6)",
+  // Domain-semantic colors (graph nodes/edges)
+  "--color-pipe": "#ff6b6b",
+  "--color-pipe-bg": "rgba(224,108,117,0.18)",
+  "--color-pipe-text": "#ffffff",
+  "--color-stuff": "#4ECDC4",
+  "--color-stuff-bg": "rgba(78,205,196,0.12)",
+  "--color-stuff-border": "#9ddcfd",
+  "--color-stuff-text": "#98FB98",
+  "--color-stuff-text-dim": "#9ddcfd",
+  "--color-edge": "#FFFACD",
+  "--color-batch-item": "#bd93f9",
+  "--color-batch-aggregate": "#50fa7b",
+  "--color-parallel-combine": "#d6a4ff",
+  "--color-success": "#50FA7B",
+  "--color-success-bg": "rgba(80,250,123,0.15)",
+  "--color-error": "#FF5555",
+  "--color-error-bg": "rgba(255,85,85,0.15)",
+  "--color-error-border": "rgba(255,85,85,0.2)",
+  "--color-accent": "#8BE9FD",
+  "--color-accent-strong": "#3b82f6",
+  "--color-warning": "#FFB86C",
+  // Controller-group palette (tinted borders/backgrounds per controller type)
+  "--ctrl-sequence-border": "rgba(148, 163, 184, 0.25)",
+  "--ctrl-sequence-bg": "rgba(148, 163, 184, 0.03)",
+  "--ctrl-sequence-text": "#94a3b8",
+  "--ctrl-parallel-border": "rgba(139, 233, 253, 0.35)",
+  "--ctrl-parallel-bg": "rgba(139, 233, 253, 0.03)",
+  "--ctrl-parallel-text": "#8be9fd",
+  "--ctrl-condition-border": "rgba(251, 191, 36, 0.35)",
+  "--ctrl-condition-bg": "rgba(251, 191, 36, 0.03)",
+  "--ctrl-condition-text": "#fbbf24",
+  "--ctrl-batch-border": "rgba(167, 139, 250, 0.35)",
+  "--ctrl-batch-bg": "rgba(167, 139, 250, 0.03)",
+  "--ctrl-batch-text": "#a78bfa",
+  "--ctrl-folded-bg": "rgba(148, 163, 184, 0.25)",
+  "--ctrl-folded-border": "rgba(148, 163, 184, 0.4)",
+  // Legacy aliases — kept so existing inline styles in graph builders keep
+  // working until they're migrated. New code should use the semantic tokens.
+  "--color-bg": "#0a0a0a",
+  "--color-bg-dots": "rgba(255, 255, 255, 0.35)",
+  "--color-text-muted": "#94a3b8",
+  "--color-controller-text": "#94a3b8"
+});
+var LIGHT_PALETTE_COLORS = __spreadProps(__spreadValues({}, FONT_TOKENS), {
+  // Surfaces — chart stays a soft off-white, panels slightly cooler
+  "--surface-page": "#f8fafc",
+  "--surface-panel": "#ffffff",
+  "--surface-overlay": "rgba(255, 255, 255, 0.92)",
+  "--surface-overlay-hover": "rgba(241, 245, 249, 0.96)",
+  "--surface-overlay-disabled": "rgba(255, 255, 255, 0.7)",
+  "--surface-elevated": "rgba(15, 23, 42, 0.05)",
+  "--surface-elevated-hover": "rgba(15, 23, 42, 0.09)",
+  "--surface-sunken": "rgba(15, 23, 42, 0.03)",
+  "--surface-pill": "rgba(15, 23, 42, 0.05)",
+  "--surface-pill-border": "rgba(15, 23, 42, 0.1)",
+  // Borders
+  "--border-subtle": "rgba(15, 23, 42, 0.08)",
+  "--border-default": "rgba(15, 23, 42, 0.12)",
+  "--border-strong": "rgba(15, 23, 42, 0.22)",
+  "--border-dashed": "rgba(15, 23, 42, 0.18)",
+  // Text
+  "--text-primary": "#020617",
+  "--text-default": "#0f172a",
+  "--text-secondary": "#1e293b",
+  "--text-muted": "#475569",
+  "--text-dim": "#64748b",
+  "--text-on-accent": "#ffffff",
+  // Effects
+  "--shadow-sm": "0 2px 8px rgba(15, 23, 42, 0.08)",
+  "--shadow-md": "0 4px 16px rgba(15, 23, 42, 0.14)",
+  "--shadow-lg": "0 8px 24px rgba(15, 23, 42, 0.15)",
+  "--focus-ring": "rgba(2, 132, 199, 0.5)",
+  // Domain-semantic colors — darker for contrast on light backgrounds
+  "--color-pipe": "#dc2626",
+  "--color-pipe-bg": "rgba(220, 38, 38, 0.1)",
+  "--color-pipe-text": "#ffffff",
+  "--color-stuff": "#0891b2",
+  "--color-stuff-bg": "rgba(8, 145, 178, 0.08)",
+  "--color-stuff-border": "#0e7490",
+  "--color-stuff-text": "#0f172a",
+  "--color-stuff-text-dim": "#475569",
+  "--color-edge": "#64748b",
+  "--color-batch-item": "#7c3aed",
+  "--color-batch-aggregate": "#15803d",
+  "--color-parallel-combine": "#6d28d9",
+  "--color-success": "#15803d",
+  "--color-success-bg": "rgba(21, 128, 61, 0.12)",
+  "--color-error": "#dc2626",
+  "--color-error-bg": "rgba(220, 38, 38, 0.1)",
+  "--color-error-border": "rgba(220, 38, 38, 0.25)",
+  "--color-accent": "#0284c7",
+  "--color-accent-strong": "#0284c7",
+  "--color-warning": "#d97706",
+  // Controller-group palette
+  "--ctrl-sequence-border": "rgba(71, 85, 105, 0.3)",
+  "--ctrl-sequence-bg": "rgba(71, 85, 105, 0.04)",
+  "--ctrl-sequence-text": "#475569",
+  "--ctrl-parallel-border": "rgba(8, 145, 178, 0.4)",
+  "--ctrl-parallel-bg": "rgba(8, 145, 178, 0.05)",
+  "--ctrl-parallel-text": "#0e7490",
+  "--ctrl-condition-border": "rgba(217, 119, 6, 0.4)",
+  "--ctrl-condition-bg": "rgba(217, 119, 6, 0.05)",
+  "--ctrl-condition-text": "#b45309",
+  "--ctrl-batch-border": "rgba(124, 58, 237, 0.4)",
+  "--ctrl-batch-bg": "rgba(124, 58, 237, 0.05)",
+  "--ctrl-batch-text": "#6d28d9",
+  "--ctrl-folded-bg": "rgba(71, 85, 105, 0.18)",
+  "--ctrl-folded-border": "rgba(71, 85, 105, 0.35)",
+  // Legacy aliases
+  "--color-bg": "#f8fafc",
+  "--color-bg-dots": "rgba(15, 23, 42, 0.18)",
+  "--color-text-muted": "#475569",
+  "--color-controller-text": "#475569"
+});
+function getPaletteForTheme(theme) {
+  return theme === GRAPH_THEME.LIGHT ? LIGHT_PALETTE_COLORS : DARK_PALETTE_COLORS;
+}
 var DEFAULT_GRAPH_CONFIG = {
   direction: "LR",
   showControllers: false,
   foldMode: FOLD_MODE.EXPANDED,
+  theme: GRAPH_THEME.DARK,
   nodesep: 50,
   ranksep: 100,
   edgeType: EDGE_TYPE.DEFAULT,
   initialZoom: null,
-  panToTop: true,
-  paletteColors: {
-    // Graph node/edge colors
-    "--color-pipe": "#ff6b6b",
-    "--color-pipe-bg": "rgba(224,108,117,0.18)",
-    "--color-pipe-text": "#ffffff",
-    "--color-stuff": "#4ECDC4",
-    "--color-stuff-bg": "rgba(78,205,196,0.12)",
-    "--color-stuff-border": "#9ddcfd",
-    "--color-stuff-text": "#98FB98",
-    "--color-stuff-text-dim": "#9ddcfd",
-    "--color-edge": "#FFFACD",
-    "--color-batch-item": "#bd93f9",
-    "--color-batch-aggregate": "#50fa7b",
-    "--color-parallel-combine": "#d6a4ff",
-    "--color-success": "#50FA7B",
-    "--color-success-bg": "rgba(80,250,123,0.15)",
-    "--color-error": "#FF5555",
-    "--color-error-bg": "rgba(255,85,85,0.15)",
-    "--color-accent": "#8BE9FD",
-    "--color-warning": "#FFB86C",
-    // Base theme vars used by graph-core.css
-    "--color-bg": "#0a0a0a",
-    "--color-bg-dots": "rgba(255, 255, 255, 0.35)",
-    "--color-text-muted": "#94a3b8",
-    "--color-controller-text": "#94a3b8",
-    "--font-sans": '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--font-mono": '"JetBrains Mono", "Monaco", "Menlo", monospace',
-    "--shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.5)"
-  }
+  panToTop: true
+  // `paletteColors` intentionally omitted from the default. The viewer derives
+  // the palette from the active `theme`. Consumers only set `paletteColors` to
+  // override specific tokens (sparse merge on top of the theme palette).
 };
 function getPaletteColors() {
-  return DEFAULT_GRAPH_CONFIG.paletteColors || {};
+  return DARK_PALETTE_COLORS;
 }
 
 export {
+  KNOWN_PIPE_TYPES,
   NODE_TYPE_PIPE_CARD,
   NODE_TYPE_STUFF,
   NODE_TYPE_CONTROLLER,
@@ -1373,12 +1642,16 @@ export {
   GRAPH_DIRECTION,
   EDGE_TYPE,
   FOLD_MODE,
+  GRAPH_THEME,
   CONTROLLER_PADDING_X,
   CONTROLLER_PADDING_TOP,
   CONTROLLER_PADDING_BOTTOM,
   ARROW_CLOSED_MARKER,
   nodeWidth,
   nodeHeight,
+  GraphSpecValidationError,
+  validateGraphSpec,
+  asPipeCallNode,
   buildDataflowAnalysis,
   buildChildToControllerMap,
   getPipeBlueprint,
@@ -1400,7 +1673,10 @@ export {
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   buildControllerNodes,
   applyControllers,
+  DARK_PALETTE_COLORS,
+  LIGHT_PALETTE_COLORS,
+  getPaletteForTheme,
   DEFAULT_GRAPH_CONFIG,
   getPaletteColors
 };
-//# sourceMappingURL=chunk-FHRUYFGV.js.map
+//# sourceMappingURL=chunk-ILX53OYM.js.map