@startsimpli/funnels 0.1.2

package/dist/components/index.cjs

@@ -0,0 +1,3243 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@xyflow/react');
+require('@xyflow/react/dist/style.css');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+
+// src/components/FunnelPreview/FunnelPreview.tsx
+
+// src/core/engine.ts
+function evaluateRule(_entity, _rule) {
+  throw new Error("Not implemented - BEAD: fund-your-startup-a0b8. evaluateRule must import from rule evaluator.");
+}
+var FunnelEngine = class {
+  /**
+   * Execute a funnel on a set of entities
+   *
+   * @param funnel - The funnel definition to execute
+   * @param entities - Input entities to process
+   * @returns ExecutionResult with matched/excluded entities and stats
+   */
+  execute(funnel, entities) {
+    const startTime = Date.now();
+    const results = entities.map((entity) => ({
+      entity,
+      matched: true,
+      // Start as matched, exclude as needed
+      accumulated_tags: [],
+      context: {},
+      stage_results: []
+    }));
+    const stageStats = {};
+    const errors = [];
+    const sortedStages = [...funnel.stages].sort((a, b) => a.order - b.order);
+    for (const stage of sortedStages) {
+      const stageStartTime = Date.now();
+      const inputEntities = results.filter((r) => r.matched && !r.excluded_at_stage);
+      const stats = {
+        stage_id: stage.id,
+        stage_name: stage.name,
+        input_count: inputEntities.length,
+        matched_count: 0,
+        not_matched_count: 0,
+        excluded_count: 0,
+        tagged_count: 0,
+        continued_count: 0,
+        error_count: 0
+      };
+      for (const result of inputEntities) {
+        try {
+          const stageResult = this.processStage(stage, result.entity);
+          result.stage_results.push(stageResult);
+          if (stageResult.matched) {
+            stats.matched_count++;
+          } else {
+            stats.not_matched_count++;
+          }
+          if (stageResult.tags_added && stageResult.tags_added.length > 0) {
+            result.accumulated_tags.push(...stageResult.tags_added);
+            stats.tagged_count++;
+          }
+          if (stageResult.context_added) {
+            result.context = { ...result.context, ...stageResult.context_added };
+          }
+          if (stageResult.excluded) {
+            result.matched = false;
+            result.excluded_at_stage = stage.id;
+            stats.excluded_count++;
+          } else if (stageResult.continued) {
+            stats.continued_count++;
+          }
+        } catch (error) {
+          stats.error_count++;
+          errors.push(`Stage ${stage.name}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+      }
+      stats.duration_ms = Date.now() - stageStartTime;
+      stageStats[stage.id] = stats;
+    }
+    if (funnel.completion_tags && funnel.completion_tags.length > 0) {
+      for (const result of results) {
+        if (result.matched) {
+          result.accumulated_tags.push(...funnel.completion_tags);
+        }
+      }
+    }
+    const matched = results.filter((r) => r.matched);
+    const excluded = results.filter((r) => !r.matched);
+    const totalTagged = results.filter((r) => r.accumulated_tags.length > 0).length;
+    return {
+      matched,
+      excluded,
+      total_input: entities.length,
+      total_matched: matched.length,
+      total_excluded: excluded.length,
+      total_tagged: totalTagged,
+      stage_stats: stageStats,
+      duration_ms: Date.now() - startTime,
+      errors: errors.length > 0 ? errors : void 0
+    };
+  }
+  /**
+   * Process a single entity through a stage
+   *
+   * @param stage - The stage to process
+   * @param entity - The entity to evaluate
+   * @returns StageResult with match status and actions taken
+   */
+  processStage(stage, entity) {
+    const ruleResults = [];
+    let matched = false;
+    if (stage.custom_evaluator) {
+      try {
+        matched = stage.custom_evaluator(entity);
+      } catch (error) {
+        matched = false;
+      }
+    } else if (stage.rules.length === 0) {
+      matched = true;
+    } else {
+      for (const rule of stage.rules) {
+        const ruleResult = evaluateRule();
+        ruleResults.push(ruleResult);
+      }
+      if (stage.filter_logic === "AND") {
+        matched = ruleResults.every((r) => r.matched);
+      } else {
+        matched = ruleResults.some((r) => r.matched);
+      }
+    }
+    let action;
+    let tagsAdded = [];
+    let contextAdded;
+    let excluded = false;
+    let continued = false;
+    if (matched) {
+      action = stage.match_action;
+      if (stage.match_tags && stage.match_tags.length > 0) {
+        tagsAdded = [...stage.match_tags];
+      }
+      if (stage.match_context) {
+        contextAdded = stage.match_context;
+      }
+      switch (stage.match_action) {
+        case "continue":
+          continued = true;
+          break;
+        case "tag":
+          excluded = true;
+          break;
+        case "tag_continue":
+          continued = true;
+          break;
+        case "output":
+          continued = false;
+          break;
+      }
+    } else {
+      action = stage.no_match_action;
+      if (stage.no_match_tags && stage.no_match_tags.length > 0) {
+        tagsAdded = [...stage.no_match_tags];
+      }
+      switch (stage.no_match_action) {
+        case "continue":
+          continued = true;
+          break;
+        case "exclude":
+          excluded = true;
+          break;
+        case "tag_exclude":
+          excluded = true;
+          break;
+      }
+    }
+    return {
+      stage_id: stage.id,
+      stage_name: stage.name,
+      matched,
+      rule_results: ruleResults.length > 0 ? ruleResults : void 0,
+      action,
+      tags_added: tagsAdded.length > 0 ? tagsAdded : void 0,
+      context_added: contextAdded,
+      excluded,
+      continued
+    };
+  }
+};
+function useDebouncedValue(value, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = react.useState(value);
+  react.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+function PreviewStats({
+  totalMatched,
+  totalExcluded,
+  matchPercentage,
+  className = ""
+}) {
+  const total = totalMatched + totalExcluded;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-8 bg-gray-200 rounded-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 left-0 bg-gradient-to-r from-green-500 to-green-600 transition-all duration-300 flex items-center justify-center",
+          style: { width: `${matchPercentage}%` },
+          role: "progressbar",
+          "aria-valuenow": matchPercentage,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": `${totalMatched} of ${total} matched (${matchPercentage}%)`,
+          children: matchPercentage > 15 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-white", children: [
+            totalMatched.toLocaleString(),
+            "/",
+            total.toLocaleString(),
+            " (",
+            matchPercentage,
+            "%)"
+          ] })
+        }
+      ),
+      matchPercentage <= 15 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-gray-600", children: [
+        totalMatched.toLocaleString(),
+        "/",
+        total.toLocaleString(),
+        " (",
+        matchPercentage,
+        "%)"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-sm bg-green-500" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-700", children: [
+          totalMatched.toLocaleString(),
+          " Matched"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-sm bg-gray-300" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-700", children: [
+          totalExcluded.toLocaleString(),
+          " Excluded"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function StageBreakdown({
+  stageStats,
+  stages,
+  className = ""
+}) {
+  const sortedStages = [...stages].sort((a, b) => a.order - b.order);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Stage Breakdown" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "space-y-2", children: sortedStages.map((stage, index) => {
+      const stats = stageStats[stage.id];
+      if (!stats) return null;
+      const isLast = index === sortedStages.length - 1;
+      const excludedCount = stats.excluded_count;
+      const remainingCount = stats.remaining_count;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: "flex items-center justify-between py-2 px-3 bg-gray-50 rounded-lg",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-700 rounded-full text-xs font-bold", children: index + 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 truncate", children: stage.name })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+              excludedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-red-600 font-medium", children: [
+                "-",
+                excludedCount.toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: `font-semibold ${isLast ? "text-green-600" : "text-gray-700"}`,
+                  children: [
+                    remainingCount.toLocaleString(),
+                    " ",
+                    isLast ? "final" : "left"
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        stage.id
+      );
+    }) })
+  ] });
+}
+function defaultEntityRenderer(entity) {
+  if (entity.name) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: entity.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mt-1", children: Object.keys(entity).filter((key) => key !== "name").slice(0, 3).map((key) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2", children: [
+        key,
+        ": ",
+        String(entity[key]).slice(0, 20)
+      ] }, key)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-700 font-mono", children: /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: "whitespace-pre-wrap break-all", children: [
+    JSON.stringify(entity, null, 2).slice(0, 150),
+    JSON.stringify(entity, null, 2).length > 150 ? "..." : ""
+  ] }) });
+}
+function EntityCard({
+  entity,
+  renderEntity = defaultEntityRenderer,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      className: `p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:border-gray-300 transition-colors ${className}`,
+      children: renderEntity(entity)
+    }
+  );
+}
+function LoadingPreview() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading preview..." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded-lg" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-32 bg-gray-200 rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-32 bg-gray-200 rounded" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-40 bg-gray-200 rounded mb-3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "h-12 bg-gray-100 rounded-lg flex items-center px-3 gap-3",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 bg-gray-200 rounded-full" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded flex-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-16 bg-gray-200 rounded" })
+          ]
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-48 bg-gray-200 rounded mb-3" }),
+      [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-20 bg-gray-100 border border-gray-200 rounded-lg p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4 mb-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-gray-200 rounded w-1/2" })
+      ] }, i))
+    ] })
+  ] });
+}
+function convertToPreviewResult(execResult, maxEntities = 10) {
+  const { matched, total_matched, total_excluded, stage_stats } = execResult;
+  const total = total_matched + total_excluded;
+  const matchPercentage = total > 0 ? Math.round(total_matched / total * 100) : 0;
+  const previewEntities = matched.slice(0, maxEntities).map((r) => r.entity);
+  const previewStageStats = {};
+  Object.entries(stage_stats).forEach(([stageId, stats]) => {
+    previewStageStats[stageId] = {
+      stage_id: stats.stage_id,
+      stage_name: stats.stage_name,
+      input_count: stats.input_count,
+      excluded_count: stats.excluded_count,
+      remaining_count: stats.input_count - stats.excluded_count
+    };
+  });
+  return {
+    totalMatched: total_matched,
+    totalExcluded: total_excluded,
+    matchPercentage,
+    previewEntities,
+    stageStats: previewStageStats
+  };
+}
+function FunnelPreview({
+  funnel,
+  sampleEntities,
+  onPreview,
+  renderEntity,
+  maxPreviewEntities = 10,
+  className = ""
+}) {
+  const [result, setResult] = react.useState(null);
+  const [isComputing, setIsComputing] = react.useState(false);
+  const debouncedFunnel = useDebouncedValue(funnel, 300);
+  react.useEffect(() => {
+    async function compute() {
+      setIsComputing(true);
+      try {
+        const engine = new FunnelEngine();
+        const execResult = engine.execute(debouncedFunnel, sampleEntities);
+        const previewResult = convertToPreviewResult(
+          execResult,
+          maxPreviewEntities
+        );
+        setResult(previewResult);
+        if (onPreview) {
+          onPreview(previewResult);
+        }
+      } catch (error) {
+        console.error("Preview computation failed:", error);
+        setResult({
+          totalMatched: 0,
+          totalExcluded: sampleEntities.length,
+          matchPercentage: 0,
+          previewEntities: [],
+          stageStats: {}
+        });
+      } finally {
+        setIsComputing(false);
+      }
+    }
+    compute();
+  }, [debouncedFunnel, sampleEntities, maxPreviewEntities, onPreview]);
+  if (isComputing && !result) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingPreview, {}) });
+  }
+  if (!result) {
+    return null;
+  }
+  const { totalMatched, totalExcluded, matchPercentage, previewEntities, stageStats } = result;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, role: "region", "aria-label": "Funnel preview", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Preview Results" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PreviewStats,
+      {
+        totalMatched,
+        totalExcluded,
+        matchPercentage,
+        className: "mb-6"
+      }
+    ),
+    funnel.stages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      StageBreakdown,
+      {
+        stageStats,
+        stages: funnel.stages,
+        className: "mb-6"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-semibold text-gray-700 mb-3", children: [
+        "Sample Matches (",
+        Math.min(previewEntities.length, maxPreviewEntities),
+        " of",
+        " ",
+        totalMatched.toLocaleString(),
+        ")"
+      ] }),
+      previewEntities.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 text-center bg-gray-50 rounded-lg border-2 border-dashed border-gray-300", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "No entities matched this funnel" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Try adjusting your filter rules" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        previewEntities.map((entity, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          EntityCard,
+          {
+            entity,
+            renderEntity
+          },
+          index
+        )),
+        totalMatched > maxPreviewEntities && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-2 text-sm text-gray-500", children: [
+          "+ ",
+          (totalMatched - maxPreviewEntities).toLocaleString(),
+          " more..."
+        ] })
+      ] })
+    ] }),
+    isComputing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Updating preview..." })
+    ] }) })
+  ] });
+}
+var statusConfig = {
+  active: {
+    color: "text-green-800",
+    bgColor: "bg-green-100",
+    label: "ACTIVE"
+  },
+  draft: {
+    color: "text-yellow-800",
+    bgColor: "bg-yellow-100",
+    label: "DRAFT"
+  },
+  paused: {
+    color: "text-gray-800",
+    bgColor: "bg-gray-100",
+    label: "PAUSED"
+  },
+  archived: {
+    color: "text-red-800",
+    bgColor: "bg-red-100",
+    label: "ARCHIVED"
+  }
+};
+function StatusBadge({ status, className = "" }) {
+  const config = statusConfig[status];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.bgColor} ${config.color} ${className}`,
+      children: config.label
+    }
+  );
+}
+function StageIndicator({
+  order,
+  name,
+  ruleCount,
+  isLast = false,
+  className = ""
+}) {
+  const circledNumber = order < 20 ? String.fromCharCode(9312 + order) : `(${order + 1})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center text-sm font-medium", children: circledNumber }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0.5 h-6 bg-gray-200 mt-1" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pt-0.5 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900 truncate", children: name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 whitespace-nowrap", children: [
+        ruleCount,
+        " ",
+        ruleCount === 1 ? "rule" : "rules"
+      ] })
+    ] }) })
+  ] });
+}
+function MatchBar({ matched, total, className = "" }) {
+  const percentage = total > 0 ? Math.round(matched / total * 100) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-6 bg-gray-200 rounded-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 left-0 bg-gradient-to-r from-green-500 to-green-600 transition-all duration-300",
+        style: { width: `${percentage}%` },
+        role: "progressbar",
+        "aria-valuenow": percentage,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": `${matched} of ${total} matched`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
+      matched.toLocaleString(),
+      " matched"
+    ] }) })
+  ] });
+}
+function FunnelStats({
+  input,
+  matched,
+  excluded,
+  className = ""
+}) {
+  const stats = [
+    {
+      label: "INPUT",
+      value: input,
+      color: "text-blue-600",
+      bgColor: "bg-blue-50"
+    },
+    {
+      label: "MATCHED",
+      value: matched,
+      color: "text-green-600",
+      bgColor: "bg-green-50"
+    },
+    {
+      label: "EXCLUDED",
+      value: excluded,
+      color: "text-red-600",
+      bgColor: "bg-red-50"
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: `grid grid-cols-3 gap-2 ${className}`, children: stats.map(({ label, value, color, bgColor }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${bgColor} rounded-lg px-3 py-2.5 text-center`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-xs font-medium text-gray-600 mb-1", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { className: `text-lg font-bold ${color}`, children: value.toLocaleString() })
+      ]
+    },
+    label
+  )) });
+}
+function FunnelCard({
+  funnel,
+  latestRun,
+  onViewFlow,
+  onEdit,
+  className = ""
+}) {
+  const stats = latestRun ? {
+    input: latestRun.total_input,
+    matched: latestRun.total_matched,
+    excluded: latestRun.total_excluded
+  } : {
+    input: 0,
+    matched: 0,
+    excluded: 0
+  };
+  const handleViewFlow = () => {
+    if (onViewFlow) {
+      onViewFlow(funnel);
+    }
+  };
+  const hasRun = latestRun && latestRun.status === "completed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: `bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 ${className}`,
+      "aria-label": `Funnel: ${funnel.name}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "px-6 pt-5 pb-3 border-b border-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 flex-1 min-w-0", children: funnel.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: funnel.status })
+          ] }),
+          funnel.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 line-clamp-2", children: funnel.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            className: "px-6 py-4 space-y-0",
+            "aria-label": "Funnel stages",
+            children: funnel.stages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 italic py-4 text-center", children: "No stages defined" }) : funnel.stages.map((stage, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              StageIndicator,
+              {
+                order: index,
+                name: stage.name,
+                ruleCount: stage.rules.length,
+                isLast: index === funnel.stages.length - 1
+              },
+              stage.id
+            ))
+          }
+        ),
+        hasRun && /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            className: "px-6 py-4 border-t border-gray-100",
+            "aria-label": "Match results",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              MatchBar,
+              {
+                matched: stats.matched,
+                total: stats.input
+              }
+            )
+          }
+        ),
+        hasRun && /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            className: "px-6 py-4 border-t border-gray-100",
+            "aria-label": "Funnel statistics",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              FunnelStats,
+              {
+                input: stats.input,
+                matched: stats.matched,
+                excluded: stats.excluded
+              }
+            )
+          }
+        ),
+        !hasRun && /* @__PURE__ */ jsxRuntime.jsx(
+          "section",
+          {
+            className: "px-6 py-4 border-t border-gray-100 text-center",
+            "aria-label": "Funnel status",
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: latestRun?.status === "failed" ? "Last run failed" : latestRun?.status === "running" ? "Running..." : "No runs yet" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "px-6 py-4 border-t border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleViewFlow,
+            className: "w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gray-50 hover:bg-gray-100 text-gray-900 text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+            "aria-label": `View flow details for ${funnel.name}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "View Flow" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 transition-transform group-hover:translate-x-0.5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function getStageColor(stage) {
+  const matchAction = stage.match_action;
+  const noMatchAction = stage.no_match_action;
+  if (matchAction === "output") {
+    return "#22c55e";
+  }
+  if (noMatchAction === "exclude" || noMatchAction === "tag_exclude") {
+    return "#ef4444";
+  }
+  if (matchAction === "tag" || matchAction === "tag_continue") {
+    return "#eab308";
+  }
+  return "#3b82f6";
+}
+function getActionLabel(stage) {
+  const matchAction = stage.match_action;
+  const noMatchAction = stage.no_match_action;
+  if (matchAction === "output") return "Output";
+  if (noMatchAction === "exclude") return "Exclude Non-Matches";
+  if (noMatchAction === "tag_exclude") return "Tag & Exclude";
+  if (matchAction === "tag") return "Tag Matches";
+  if (matchAction === "tag_continue") return "Tag & Continue";
+  return "Continue";
+}
+function StageNode({ data }) {
+  const { stage, stats, onStageClick } = data;
+  const color = getStageColor(stage);
+  const actionLabel = getActionLabel(stage);
+  const handleClick = () => {
+    if (onStageClick) {
+      onStageClick(stage);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.Handle,
+      {
+        type: "target",
+        position: react$1.Position.Top,
+        style: { background: color, opacity: 0 },
+        isConnectable: false
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "stage-node",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Stage ${stage.order + 1}: ${stage.name}`,
+        style: {
+          borderColor: color,
+          borderWidth: "2px",
+          borderStyle: "solid"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-number", style: { color }, children: getCircledNumber(stage.order + 1) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-name", title: stage.name, children: stage.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-rules", children: [
+            stage.rules.length,
+            " ",
+            stage.rules.length === 1 ? "rule" : "rules"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-action", style: { color }, children: actionLabel }),
+          stats && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-stats", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stat-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-label", children: "Input:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-value", children: stats.input_count })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stat-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-label", children: "Matched:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-value text-green-600", children: stats.matched_count })
+            ] }),
+            stats.excluded_count > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stat-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-label", children: "Excluded:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stat-value text-red-600", children: stats.excluded_count })
+            ] })
+          ] }),
+          stage.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-description", title: stage.description, children: stage.description.length > 50 ? `${stage.description.substring(0, 50)}...` : stage.description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.Handle,
+      {
+        type: "source",
+        position: react$1.Position.Bottom,
+        style: { background: color, opacity: 0 },
+        isConnectable: false
+      }
+    )
+  ] });
+}
+function FlowLegend() {
+  const [isExpanded, setIsExpanded] = react.useState(true);
+  const legendItems = [
+    { color: "#3b82f6", label: "Continue" },
+    { color: "#ef4444", label: "Exclude" },
+    { color: "#eab308", label: "Tag" },
+    { color: "#22c55e", label: "Output" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Panel, { position: "bottom-right", className: "flow-legend-panel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flow-legend", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: "legend-toggle",
+        onClick: () => setIsExpanded(!isExpanded),
+        "aria-label": isExpanded ? "Collapse legend" : "Expand legend",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-title", children: "Legend" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: `legend-chevron ${isExpanded ? "expanded" : ""}`,
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M3 4.5L6 7.5L9 4.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "legend-items", children: legendItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "legend-item", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "legend-color",
+          style: {
+            backgroundColor: item.color,
+            border: `2px solid ${item.color}`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "legend-label", children: item.label })
+    ] }, item.label)) })
+  ] }) });
+}
+function getExcludedCount(runData, fromStageId, toStageId) {
+  const fromStats = runData.stage_stats[fromStageId];
+  const toStats = runData.stage_stats[toStageId];
+  if (!fromStats || !toStats) return 0;
+  return fromStats.continued_count - toStats.input_count;
+}
+function getCircledNumber(num) {
+  const circledNumbers = ["\u2460", "\u2461", "\u2462", "\u2463", "\u2464", "\u2465", "\u2466", "\u2467", "\u2468", "\u2469"];
+  return num <= 10 ? circledNumbers[num - 1] : `${num}`;
+}
+var VERTICAL_SPACING = 180;
+var HORIZONTAL_CENTER = 250;
+function FunnelVisualFlow({
+  funnel,
+  runData,
+  onStageClick,
+  onEdgeClick,
+  className = "",
+  height = 600
+}) {
+  const nodeTypes = react.useMemo(
+    () => ({
+      stageNode: StageNode
+    }),
+    []
+  );
+  const initialNodes = react.useMemo(() => {
+    return funnel.stages.map((stage, index) => {
+      const stats = runData?.stage_stats?.[stage.id];
+      return {
+        id: stage.id,
+        type: "stageNode",
+        position: { x: HORIZONTAL_CENTER, y: index * VERTICAL_SPACING },
+        data: {
+          stage,
+          stats,
+          onStageClick
+        }
+      };
+    });
+  }, [funnel.stages, runData, onStageClick]);
+  const initialEdges = react.useMemo(() => {
+    if (funnel.stages.length < 2) return [];
+    return funnel.stages.slice(0, -1).map((stage, index) => {
+      const nextStage = funnel.stages[index + 1];
+      const excludedCount = runData ? getExcludedCount(runData, stage.id, nextStage.id) : void 0;
+      return {
+        id: `${stage.id}-${nextStage.id}`,
+        source: stage.id,
+        target: nextStage.id,
+        label: excludedCount !== void 0 ? `-${excludedCount}` : "",
+        animated: true,
+        style: { stroke: "#94a3b8", strokeWidth: 2 },
+        labelStyle: { fill: "#ef4444", fontWeight: 600 },
+        labelBgStyle: { fill: "#fef2f2", fillOpacity: 0.9 }
+      };
+    });
+  }, [funnel.stages, runData]);
+  const [nodes, , onNodesChange] = react$1.useNodesState(initialNodes);
+  const [edges, , onEdgesChange] = react$1.useEdgesState(initialEdges);
+  const handleEdgeClick = react.useCallback(
+    (event, edge) => {
+      if (onEdgeClick) {
+        onEdgeClick(edge.source, edge.target);
+      }
+    },
+    [onEdgeClick]
+  );
+  if (funnel.stages.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `funnel-visual-flow-empty ${className}`,
+        style: { height },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-sm", children: "No stages to visualize" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-xs mt-1", children: "Add stages to see the funnel flow" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `funnel-visual-flow ${className}`, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onEdgeClick: handleEdgeClick,
+      nodeTypes,
+      fitView: true,
+      fitViewOptions: {
+        padding: 0.2,
+        includeHiddenNodes: false
+      },
+      minZoom: 0.5,
+      maxZoom: 1.5,
+      defaultViewport: { x: 0, y: 0, zoom: 1 },
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { variant: react$1.BackgroundVariant.Dots, gap: 16, size: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false }),
+        /* @__PURE__ */ jsxRuntime.jsx(FlowLegend, {})
+      ]
+    }
+  ) });
+}
+function LogicToggle({ logic, onChange, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700", children: "Logic:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "radio",
+          name: "filter-logic",
+          value: "AND",
+          checked: logic === "AND",
+          onChange: (e) => onChange(e.target.value),
+          className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-700", children: [
+        "AND ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: "(all must match)" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "radio",
+          name: "filter-logic",
+          value: "OR",
+          checked: logic === "OR",
+          onChange: (e) => onChange(e.target.value),
+          className: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-700", children: [
+        "OR ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: "(any can match)" })
+      ] })
+    ] })
+  ] });
+}
+function FieldSelector({
+  fields,
+  value,
+  onChange,
+  error,
+  className = ""
+}) {
+  const grouped = fields.reduce((acc, field) => {
+    const category = field.category || "Other";
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(field);
+    return acc;
+  }, {});
+  const categories = Object.keys(grouped).sort();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "field-selector", className: "text-xs font-medium text-gray-700", children: "Field" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        id: "field-selector",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a field..." }),
+          categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label: category, children: grouped[category].map((field) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: field.name, children: field.label }, field.name)) }, category))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+
+// src/components/FilterRuleEditor/constants.ts
+var OPERATOR_LABELS = {
+  // Equality
+  eq: "equals",
+  ne: "not equals",
+  // Comparison
+  gt: "greater than",
+  lt: "less than",
+  gte: "greater or equal",
+  lte: "less or equal",
+  // String operations
+  contains: "contains",
+  not_contains: "does not contain",
+  startswith: "starts with",
+  endswith: "ends with",
+  matches: "matches regex",
+  // Array/Set operations
+  in: "is one of",
+  not_in: "is not one of",
+  has_any: "has any of",
+  has_all: "has all of",
+  // Null checks
+  isnull: "is empty",
+  isnotnull: "is not empty",
+  // Tag operations
+  has_tag: "has tag",
+  not_has_tag: "does not have tag",
+  // Boolean
+  is_true: "is true",
+  is_false: "is false"
+};
+var NULL_VALUE_OPERATORS = [
+  "isnull",
+  "isnotnull",
+  "is_true",
+  "is_false"
+];
+var MULTI_VALUE_OPERATORS = [
+  "in",
+  "not_in",
+  "has_any",
+  "has_all"
+];
+function OperatorSelector({
+  operators,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "operator-selector", className: "text-xs font-medium text-gray-700", children: "Operator" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        id: "operator-selector",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          disabled:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-500
+          ${error ? "border-red-500" : "border-gray-300"}
+        `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select operator..." }),
+          operators.map((op) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: op, children: OPERATOR_LABELS[op] }, op))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function TextValueInput({
+  value,
+  onChange,
+  placeholder = "Enter text...",
+  error,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "text-value", className: "text-xs font-medium text-gray-700", children: "Value" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: "text-value",
+        type: "text",
+        value: value || "",
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function NumberValueInput({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder = "Enter number...",
+  error,
+  className = ""
+}) {
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (val === "") {
+      onChange(null);
+    } else {
+      const num = parseFloat(val);
+      if (!isNaN(num)) {
+        onChange(num);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "number-value", className: "text-xs font-medium text-gray-700", children: "Value" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: "number-value",
+        type: "number",
+        value: value ?? "",
+        onChange: handleChange,
+        min,
+        max,
+        placeholder,
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function DateValueInput({
+  value,
+  onChange,
+  min,
+  max,
+  placeholder = "Select date...",
+  error,
+  className = ""
+}) {
+  const handleChange = (e) => {
+    const val = e.target.value;
+    onChange(val || null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "date-value", className: "text-xs font-medium text-gray-700", children: "Value" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: "date-value",
+        type: "date",
+        value: value || "",
+        onChange: handleChange,
+        min,
+        max,
+        placeholder,
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function BooleanValueInput({
+  value,
+  onChange,
+  label = "True",
+  error,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-700", children: "Value" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value,
+          onChange: (e) => onChange(e.target.checked),
+          className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: label })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function ChoiceValueInput({
+  value,
+  onChange,
+  choices,
+  placeholder = "Select option...",
+  error,
+  className = ""
+}) {
+  const getChoiceValue = (choice) => {
+    if (typeof choice === "string") return choice;
+    return choice.value || choice;
+  };
+  const getChoiceLabel = (choice) => {
+    if (typeof choice === "string") return choice;
+    return choice.label || choice.value || String(choice);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "choice-value", className: "text-xs font-medium text-gray-700", children: "Value" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        id: "choice-value",
+        value: value || "",
+        onChange: (e) => onChange(e.target.value),
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          choices.map((choice, index) => {
+            const val = getChoiceValue(choice);
+            const label = getChoiceLabel(choice);
+            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: val, children: label }, `${val}-${index}`);
+          })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function MultiChoiceValueInput({
+  value = [],
+  onChange,
+  choices,
+  placeholder = "Select options...",
+  error,
+  className = ""
+}) {
+  const getChoiceValue = (choice) => {
+    if (typeof choice === "string") return choice;
+    return choice.value || choice;
+  };
+  const getChoiceLabel = (choice) => {
+    if (typeof choice === "string") return choice;
+    return choice.label || choice.value || String(choice);
+  };
+  const handleAdd = (newValue) => {
+    if (newValue && !value.includes(newValue)) {
+      onChange([...value, newValue]);
+    }
+  };
+  const handleRemove = (removeValue) => {
+    onChange(value.filter((v) => v !== removeValue));
+  };
+  const getValueLabel = (val) => {
+    const choice = choices.find((c) => getChoiceValue(c) === val);
+    return choice ? getChoiceLabel(choice) : val;
+  };
+  const availableChoices = choices.filter(
+    (choice) => !value.includes(getChoiceValue(choice))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "multi-choice-value", className: "text-xs font-medium text-gray-700", children: "Values" }),
+    value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: value.map((val) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded",
+        children: [
+          getValueLabel(val),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemove(val),
+              className: "hover:text-blue-900 focus:outline-none",
+              "aria-label": `Remove ${getValueLabel(val)}`,
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      val
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        id: "multi-choice-value",
+        value: "",
+        onChange: (e) => handleAdd(e.target.value),
+        className: `
+          w-full px-3 py-2 text-sm border rounded-md
+          bg-white
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+          ${error ? "border-red-500" : "border-gray-300"}
+        `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          availableChoices.map((choice, index) => {
+            const val = getChoiceValue(choice);
+            const label = getChoiceLabel(choice);
+            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: val, children: label }, `${val}-${index}`);
+          })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600", children: error })
+  ] });
+}
+function RuleRow({
+  rule,
+  onChange,
+  onRemove,
+  fieldRegistry,
+  className = ""
+}) {
+  const selectedField = fieldRegistry.find((f) => f.name === rule.field_path);
+  const availableOperators = selectedField?.operators || [];
+  const needsValue = rule.operator && !NULL_VALUE_OPERATORS.includes(rule.operator);
+  const needsMultiValue = rule.operator && MULTI_VALUE_OPERATORS.includes(rule.operator);
+  const handleFieldChange = (fieldName) => {
+    const field = fieldRegistry.find((f) => f.name === fieldName);
+    onChange({
+      ...rule,
+      field_path: fieldName,
+      operator: field?.operators[0] || "",
+      value: null
+    });
+  };
+  const handleOperatorChange = (operator) => {
+    onChange({
+      ...rule,
+      operator,
+      value: MULTI_VALUE_OPERATORS.includes(operator) ? [] : null
+    });
+  };
+  const handleValueChange = (value) => {
+    onChange({
+      ...rule,
+      value
+    });
+  };
+  const renderValueInput = () => {
+    if (!needsValue) return null;
+    if (!selectedField) return null;
+    const { type, constraints } = selectedField;
+    if (needsMultiValue) {
+      if (constraints?.choices) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MultiChoiceValueInput,
+          {
+            value: Array.isArray(rule.value) ? rule.value : [],
+            onChange: handleValueChange,
+            choices: constraints.choices
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TextValueInput,
+        {
+          value: Array.isArray(rule.value) ? rule.value.join(", ") : "",
+          onChange: (val) => handleValueChange(val.split(",").map((v) => v.trim())),
+          placeholder: "Enter values, comma-separated..."
+        }
+      );
+    }
+    switch (type) {
+      case "string":
+        if (constraints?.choices && rule.operator === "eq") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ChoiceValueInput,
+            {
+              value: rule.value || "",
+              onChange: handleValueChange,
+              choices: constraints.choices
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TextValueInput,
+          {
+            value: rule.value || "",
+            onChange: handleValueChange
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          NumberValueInput,
+          {
+            value: rule.value,
+            onChange: handleValueChange,
+            min: constraints?.min_value,
+            max: constraints?.max_value
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DateValueInput,
+          {
+            value: rule.value || null,
+            onChange: handleValueChange,
+            min: constraints?.min_value,
+            max: constraints?.max_value
+          }
+        );
+      case "boolean":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          BooleanValueInput,
+          {
+            value: rule.value || false,
+            onChange: handleValueChange
+          }
+        );
+      case "tag":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TextValueInput,
+          {
+            value: rule.value || "",
+            onChange: handleValueChange,
+            placeholder: "Enter tag name..."
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TextValueInput,
+          {
+            value: rule.value || "",
+            onChange: handleValueChange
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `
+        relative group
+        border border-gray-200 rounded-lg p-4
+        bg-white hover:shadow-sm transition-shadow
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: "\n          absolute top-2 right-2\n          w-6 h-6 flex items-center justify-center\n          text-gray-400 hover:text-red-600 hover:bg-red-50\n          rounded transition-colors\n          focus:outline-none focus:ring-2 focus:ring-red-500\n        ",
+            "aria-label": "Remove rule",
+            children: "\xD7"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 pr-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldSelector,
+            {
+              fields: fieldRegistry,
+              value: rule.field_path,
+              onChange: handleFieldChange
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OperatorSelector,
+            {
+              operators: availableOperators,
+              value: rule.operator || "",
+              onChange: handleOperatorChange,
+              disabled: !rule.field_path
+            }
+          ),
+          needsValue && renderValueInput()
+        ] })
+      ]
+    }
+  );
+}
+
+// src/types/index.ts
+function validateFilterRule(rule) {
+  const errors = [];
+  if (!rule.field_path) {
+    errors.push("field_path is required");
+  }
+  if (!rule.operator) {
+    errors.push("operator is required");
+  }
+  const nullOps = ["isnull", "isnotnull", "is_true", "is_false"];
+  if (!nullOps.includes(rule.operator) && rule.value === void 0) {
+    errors.push(`value is required for operator '${rule.operator}'`);
+  }
+  return errors;
+}
+function FilterRuleEditor({
+  rules,
+  onChange,
+  fieldRegistry,
+  logic = "AND",
+  onLogicChange,
+  className = ""
+}) {
+  const handleAddRule = () => {
+    const newRule = {
+      field_path: "",
+      operator: "eq",
+      value: null
+    };
+    onChange([...rules, newRule]);
+  };
+  const handleUpdateRule = (index, updatedRule) => {
+    const newRules = [...rules];
+    newRules[index] = updatedRule;
+    onChange(newRules);
+  };
+  const handleRemoveRule = (index) => {
+    const newRules = rules.filter((_, i) => i !== index);
+    onChange(newRules);
+  };
+  const ruleErrors = rules.map((rule) => validateFilterRule(rule));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-4 ${className}`, children: [
+    onLogicChange && /* @__PURE__ */ jsxRuntime.jsx(LogicToggle, { logic, onChange: onLogicChange }),
+    rules.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "w-12 h-12 text-gray-400 mb-3",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: "No filter rules yet" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddRule,
+          className: "\n              inline-flex items-center gap-2\n              px-4 py-2\n              text-sm font-medium text-white\n              bg-blue-600 hover:bg-blue-700\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n              transition-colors\n            ",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "+" }),
+            "Add First Rule"
+          ]
+        }
+      )
+    ] }),
+    rules.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: rules.map((rule, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RuleRow,
+        {
+          rule,
+          onChange: (updatedRule) => handleUpdateRule(index, updatedRule),
+          onRemove: () => handleRemoveRule(index),
+          fieldRegistry
+        }
+      ),
+      index < rules.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-1 text-xs font-semibold text-gray-700 bg-gray-100 border border-gray-300 rounded-full", children: logic }) }),
+      ruleErrors[index].length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 px-4 py-2 bg-red-50 border border-red-200 rounded text-sm text-red-700", children: ruleErrors[index].map((error, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error }, i)) })
+    ] }, index)) }),
+    rules.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleAddRule,
+        className: "\n            w-full\n            flex items-center justify-center gap-2\n            px-4 py-3\n            text-sm font-medium text-blue-600\n            bg-white hover:bg-blue-50\n            border-2 border-dashed border-blue-300 hover:border-blue-400\n            rounded-lg\n            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n            transition-colors\n          ",
+        "aria-label": `Add rule ${rules.length + 1}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl", children: "+" }),
+          "Add Rule"
+        ]
+      }
+    ),
+    rules.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        rules.length,
+        " ",
+        rules.length === 1 ? "rule" : "rules"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: logic === "AND" ? "All rules must match" : "Any rule can match" })
+    ] })
+  ] });
+}
+var MATCH_ACTIONS = [
+  {
+    value: "continue",
+    label: "Continue",
+    description: "Continue to next stage without tagging"
+  },
+  {
+    value: "tag",
+    label: "Tag & Stop",
+    description: "Add tags and stop processing"
+  },
+  {
+    value: "tag_continue",
+    label: "Tag & Continue",
+    description: "Add tags and continue to next stage"
+  },
+  {
+    value: "output",
+    label: "Output",
+    description: "Add to output and stop processing"
+  }
+];
+var NO_MATCH_ACTIONS = [
+  {
+    value: "continue",
+    label: "Continue",
+    description: "Continue to next stage"
+  },
+  {
+    value: "exclude",
+    label: "Exclude",
+    description: "Exclude from output and stop processing"
+  },
+  {
+    value: "tag_exclude",
+    label: "Tag & Exclude",
+    description: "Add tags, exclude from output, and stop"
+  }
+];
+function StageActions({
+  stage,
+  onMatchActionChange,
+  onNoMatchActionChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `match-action-${stage.id}`, className: "form-label", children: "Action on Match" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          id: `match-action-${stage.id}`,
+          value: stage.match_action,
+          onChange: (e) => onMatchActionChange(e.target.value),
+          className: "form-select",
+          children: MATCH_ACTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-hint", children: MATCH_ACTIONS.find((a) => a.value === stage.match_action)?.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `no-match-action-${stage.id}`, className: "form-label", children: "Action on No Match" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          id: `no-match-action-${stage.id}`,
+          value: stage.no_match_action,
+          onChange: (e) => onNoMatchActionChange(e.target.value),
+          className: "form-select",
+          children: NO_MATCH_ACTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-hint", children: NO_MATCH_ACTIONS.find((a) => a.value === stage.no_match_action)?.description })
+    ] })
+  ] });
+}
+function TagInput({
+  tags,
+  onChange,
+  placeholder = "Add tag...",
+  className = ""
+}) {
+  const [inputValue, setInputValue] = react.useState("");
+  const addTag = react.useCallback((tag) => {
+    const trimmed = tag.trim().toLowerCase();
+    if (!trimmed) {
+      return;
+    }
+    if (tags.includes(trimmed)) {
+      return;
+    }
+    onChange([...tags, trimmed]);
+    setInputValue("");
+  }, [tags, onChange]);
+  const removeTag = react.useCallback((index) => {
+    onChange(tags.filter((_, i) => i !== index));
+  }, [tags, onChange]);
+  const handleKeyDown = react.useCallback((e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  }, [inputValue, tags, addTag, removeTag]);
+  const handleBlur = react.useCallback(() => {
+    if (inputValue) {
+      addTag(inputValue);
+    }
+  }, [inputValue, addTag]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `tag-input ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tag-input-container", children: [
+      tags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tag-chip", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tag-text", children: tag }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeTag(index),
+            className: "tag-remove",
+            "aria-label": `Remove tag ${tag}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M4 4l6 6M10 4l-6 6",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] }, index)),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          placeholder: tags.length === 0 ? placeholder : "",
+          className: "tag-input-field"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tag-input-hint", children: "Press Enter or comma to add tags" })
+  ] });
+}
+function useDebounce(callback, delay) {
+  const [timeoutId, setTimeoutId] = react.useState(null);
+  return react.useCallback(
+    ((...args) => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      const newTimeoutId = setTimeout(() => {
+        callback(...args);
+      }, delay);
+      setTimeoutId(newTimeoutId);
+    }),
+    [callback, delay, timeoutId]
+  );
+}
+function StageForm({
+  stage,
+  onUpdate,
+  fieldRegistry
+}) {
+  const [name, setName] = react.useState(stage.name);
+  const [description, setDescription] = react.useState(stage.description || "");
+  const debouncedUpdateName = useDebounce((value) => {
+    onUpdate({ ...stage, name: value });
+  }, 300);
+  const debouncedUpdateDescription = useDebounce((value) => {
+    onUpdate({ ...stage, description: value });
+  }, 500);
+  const handleNameChange = react.useCallback((e) => {
+    const value = e.target.value;
+    setName(value);
+    debouncedUpdateName(value);
+  }, [debouncedUpdateName]);
+  const handleDescriptionChange = react.useCallback((e) => {
+    const value = e.target.value;
+    setDescription(value);
+    debouncedUpdateDescription(value);
+  }, [debouncedUpdateDescription]);
+  const handleFilterLogicChange = react.useCallback((logic) => {
+    onUpdate({ ...stage, filter_logic: logic });
+  }, [stage, onUpdate]);
+  const handleMatchActionChange = react.useCallback((action) => {
+    onUpdate({ ...stage, match_action: action });
+  }, [stage, onUpdate]);
+  const handleNoMatchActionChange = react.useCallback((action) => {
+    onUpdate({ ...stage, no_match_action: action });
+  }, [stage, onUpdate]);
+  const handleMatchTagsChange = react.useCallback((tags) => {
+    onUpdate({ ...stage, match_tags: tags });
+  }, [stage, onUpdate]);
+  const handleNoMatchTagsChange = react.useCallback((tags) => {
+    onUpdate({ ...stage, no_match_tags: tags });
+  }, [stage, onUpdate]);
+  const handleRulesChange = react.useCallback((rules) => {
+    onUpdate({ ...stage, rules });
+  }, [stage, onUpdate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-form", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `stage-name-${stage.id}`, className: "form-label", children: "Stage Name" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `stage-name-${stage.id}`,
+          type: "text",
+          value: name,
+          onChange: handleNameChange,
+          className: "form-input",
+          placeholder: "e.g., High ICP Score",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `stage-desc-${stage.id}`, className: "form-label", children: "Description" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          id: `stage-desc-${stage.id}`,
+          value: description,
+          onChange: handleDescriptionChange,
+          className: "form-textarea",
+          placeholder: "Describe the purpose of this stage...",
+          rows: 3
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "form-label", children: "Filter Logic" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-logic-toggle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFilterLogicChange("AND"),
+            className: `toggle-button ${stage.filter_logic === "AND" ? "active" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: `filter-logic-${stage.id}`,
+                  value: "AND",
+                  checked: stage.filter_logic === "AND",
+                  onChange: () => handleFilterLogicChange("AND"),
+                  className: "sr-only"
+                }
+              ),
+              "AND"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFilterLogicChange("OR"),
+            className: `toggle-button ${stage.filter_logic === "OR" ? "active" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: `filter-logic-${stage.id}`,
+                  value: "OR",
+                  checked: stage.filter_logic === "OR",
+                  onChange: () => handleFilterLogicChange("OR"),
+                  className: "sr-only"
+                }
+              ),
+              "OR"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-hint", children: stage.filter_logic === "AND" ? "All rules must match for this stage to pass" : "At least one rule must match for this stage to pass" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StageActions,
+      {
+        stage,
+        onMatchActionChange: handleMatchActionChange,
+        onNoMatchActionChange: handleNoMatchActionChange
+      }
+    ),
+    (stage.match_action === "tag" || stage.match_action === "tag_continue") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "form-label", children: "Tags on Match" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TagInput,
+        {
+          tags: stage.match_tags || [],
+          onChange: handleMatchTagsChange,
+          placeholder: "Add tag..."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-hint", children: "Tags to add when rules match" })
+    ] }),
+    stage.no_match_action === "tag_exclude" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "form-label", children: "Tags on No Match" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TagInput,
+        {
+          tags: stage.no_match_tags || [],
+          onChange: handleNoMatchTagsChange,
+          placeholder: "Add tag..."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "form-hint", children: "Tags to add when rules don't match" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "form-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rules-header", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "form-label", children: [
+        "Filter Rules (",
+        stage.rules.length,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FilterRuleEditor,
+        {
+          rules: stage.rules,
+          onChange: handleRulesChange,
+          fieldRegistry
+        }
+      )
+    ] })
+  ] });
+}
+function StageCard({
+  stage,
+  expanded,
+  onToggleExpanded,
+  onUpdate,
+  onRemove,
+  fieldRegistry,
+  error,
+  showWarnings = false
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: stage.id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: `stage-card ${isDragging ? "dragging" : ""} ${error ? "error" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ...attributes,
+              ...listeners,
+              className: "drag-handle",
+              "aria-label": "Drag to reorder",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M7 4h6M7 10h6M7 16h6",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: onToggleExpanded,
+              className: "stage-title-button",
+              "aria-expanded": expanded,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "stage-number", children: [
+                  "Stage ",
+                  stage.order + 1,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "stage-name", children: stage.name || "Untitled Stage" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    className: `expand-icon ${expanded ? "expanded" : ""}`,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M6 8l4 4 4-4",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onRemove,
+              className: "delete-button",
+              "aria-label": "Delete stage",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M6 6l8 8M14 6l-8 8",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              ) })
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "error-message", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M8 1l7 13H1L8 1z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6v3M8 11h.01", stroke: "currentColor", strokeWidth: "2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+        ] }),
+        showWarnings && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "warning-message", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v3M8 10h.01", stroke: "currentColor", strokeWidth: "2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Stage has no filter rules" })
+        ] }),
+        !expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-summary", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "summary-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-label", children: "Rules:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-value", children: stage.rules.length })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "summary-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-label", children: "Logic:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-value", children: stage.filter_logic })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "summary-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-label", children: "On Match:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-value", children: stage.match_action })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "summary-item", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-label", children: "On No Match:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "summary-value", children: stage.no_match_action })
+          ] })
+        ] }),
+        expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-form-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+          StageForm,
+          {
+            stage,
+            onUpdate,
+            fieldRegistry
+          }
+        ) })
+      ]
+    }
+  );
+}
+function AddStageButton({
+  onClick,
+  position,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `add-stage-button ${position} ${className}`,
+      "aria-label": `Add stage ${position === "top" ? "at top" : position === "bottom" ? "at bottom" : "below"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 5v10M5 10h10",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          position === "top" && "Add Stage",
+          position === "bottom" && "Add Stage Below",
+          position === "inline" && "Add Stage"
+        ] })
+      ]
+    }
+  );
+}
+function generateStageId() {
+  return `stage-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function createEmptyStage(order) {
+  return {
+    id: generateStageId(),
+    order,
+    name: `Stage ${order + 1}`,
+    description: "",
+    filter_logic: "AND",
+    rules: [],
+    match_action: "continue",
+    no_match_action: "continue",
+    match_tags: [],
+    no_match_tags: []
+  };
+}
+function validateStageName(name, stages, currentStageId) {
+  const trimmedName = name.trim();
+  if (!trimmedName) {
+    return "Stage name is required";
+  }
+  const duplicate = stages.find(
+    (s) => s.id !== currentStageId && s.name.trim().toLowerCase() === trimmedName.toLowerCase()
+  );
+  if (duplicate) {
+    return "Stage name must be unique";
+  }
+  return null;
+}
+function FunnelStageBuilder({
+  funnel,
+  onUpdate,
+  fieldRegistry,
+  className = ""
+}) {
+  const [expandedStages, setExpandedStages] = react.useState(
+    new Set(funnel.stages.map((s) => s.id))
+  );
+  const [errors, setErrors] = react.useState(/* @__PURE__ */ new Map());
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const toggleExpanded = react.useCallback((stageId) => {
+    setExpandedStages((prev) => {
+      const next = new Set(prev);
+      if (next.has(stageId)) {
+        next.delete(stageId);
+      } else {
+        next.add(stageId);
+      }
+      return next;
+    });
+  }, []);
+  const handleAddStage = react.useCallback((insertAfterIndex) => {
+    const newOrder = insertAfterIndex !== void 0 ? insertAfterIndex + 1 : funnel.stages.length;
+    const newStage = createEmptyStage(newOrder);
+    const updatedStages = funnel.stages.map((stage) => {
+      if (stage.order >= newOrder) {
+        return { ...stage, order: stage.order + 1 };
+      }
+      return stage;
+    });
+    updatedStages.splice(newOrder, 0, newStage);
+    setExpandedStages((prev) => new Set(prev).add(newStage.id));
+    onUpdate({
+      ...funnel,
+      stages: updatedStages
+    });
+  }, [funnel, onUpdate]);
+  const handleRemoveStage = react.useCallback((stageId) => {
+    const stageIndex = funnel.stages.findIndex((s) => s.id === stageId);
+    if (stageIndex === -1) return;
+    const updatedStages = funnel.stages.filter((s) => s.id !== stageId);
+    updatedStages.forEach((stage, index) => {
+      stage.order = index;
+    });
+    setExpandedStages((prev) => {
+      const next = new Set(prev);
+      next.delete(stageId);
+      return next;
+    });
+    setErrors((prev) => {
+      const next = new Map(prev);
+      next.delete(stageId);
+      return next;
+    });
+    onUpdate({
+      ...funnel,
+      stages: updatedStages
+    });
+  }, [funnel, onUpdate]);
+  const handleUpdateStage = react.useCallback((updatedStage) => {
+    const nameError = validateStageName(updatedStage.name, funnel.stages, updatedStage.id);
+    setErrors((prev) => {
+      const next = new Map(prev);
+      if (nameError) {
+        next.set(updatedStage.id, nameError);
+      } else {
+        next.delete(updatedStage.id);
+      }
+      return next;
+    });
+    const updatedStages = funnel.stages.map(
+      (stage) => stage.id === updatedStage.id ? updatedStage : stage
+    );
+    onUpdate({
+      ...funnel,
+      stages: updatedStages
+    });
+  }, [funnel, onUpdate]);
+  const handleDragEnd = react.useCallback((event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const oldIndex = funnel.stages.findIndex((s) => s.id === active.id);
+    const newIndex = funnel.stages.findIndex((s) => s.id === over.id);
+    if (oldIndex === -1 || newIndex === -1) {
+      return;
+    }
+    const reorderedStages = sortable.arrayMove(funnel.stages, oldIndex, newIndex);
+    reorderedStages.forEach((stage, index) => {
+      stage.order = index;
+    });
+    onUpdate({
+      ...funnel,
+      stages: reorderedStages
+    });
+  }, [funnel, onUpdate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `funnel-stage-builder ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(AddStageButton, { onClick: () => handleAddStage(), position: "top" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.DndContext,
+      {
+        sensors,
+        collisionDetection: core.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: funnel.stages.map((s) => s.id),
+            strategy: sortable.verticalListSortingStrategy,
+            children: funnel.stages.map((stage, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "stage-wrapper", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                StageCard,
+                {
+                  stage,
+                  expanded: expandedStages.has(stage.id),
+                  onToggleExpanded: () => toggleExpanded(stage.id),
+                  onUpdate: handleUpdateStage,
+                  onRemove: () => handleRemoveStage(stage.id),
+                  fieldRegistry,
+                  error: errors.get(stage.id),
+                  showWarnings: stage.rules.length === 0
+                }
+              ),
+              index < funnel.stages.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "stage-arrow", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M12 5v14m0 0l-4-4m4 4l4-4",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) }) })
+            ] }, stage.id))
+          }
+        )
+      }
+    ),
+    funnel.stages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AddStageButton,
+      {
+        onClick: () => handleAddStage(funnel.stages.length - 1),
+        position: "bottom"
+      }
+    ) }),
+    funnel.stages.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-center py-8", children: "No stages yet. Add your first stage to get started." }) })
+  ] });
+}
+function RunFilters({
+  filters,
+  onFiltersChange,
+  className = ""
+}) {
+  const updateFilter = (key, value) => {
+    onFiltersChange({ ...filters, [key]: value });
+  };
+  const clearFilters = () => {
+    onFiltersChange({
+      status: "all",
+      trigger_type: "all",
+      date_range: "month"
+    });
+  };
+  const hasActiveFilters = filters.status !== "all" || filters.trigger_type !== "all" || filters.date_range !== "month";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex items-center gap-3 p-3 bg-gray-50 border-b border-gray-200 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "status-filter", className: "text-sm font-medium text-gray-700", children: "Status:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: "status-filter",
+              value: filters.status || "all",
+              onChange: (e) => updateFilter("status", e.target.value),
+              className: "px-2 py-1 text-sm border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "completed", children: "Complete" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "running", children: "Running" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "failed", children: "Failed" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "Pending" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "cancelled", children: "Cancelled" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "trigger-filter", className: "text-sm font-medium text-gray-700", children: "Trigger:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: "trigger-filter",
+              value: filters.trigger_type || "all",
+              onChange: (e) => updateFilter("trigger_type", e.target.value),
+              className: "px-2 py-1 text-sm border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "manual", children: "Manual" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "scheduled", children: "Scheduled" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "webhook", children: "Webhook" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "api", children: "API" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "date-filter", className: "text-sm font-medium text-gray-700", children: "Date:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: "date-filter",
+              value: filters.date_range || "month",
+              onChange: (e) => updateFilter("date_range", e.target.value),
+              className: "px-2 py-1 text-sm border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All time" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "today", children: "Today" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "week", children: "Last 7 days" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "month", children: "Last 30 days" })
+              ]
+            }
+          )
+        ] }),
+        hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: clearFilters,
+            className: "ml-auto px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500",
+            children: "Clear filters"
+          }
+        )
+      ]
+    }
+  );
+}
+var statusConfig2 = {
+  completed: {
+    icon: "\u2713",
+    label: "Complete",
+    color: "text-green-800",
+    bgColor: "bg-green-100"
+  },
+  running: {
+    icon: "\u23F8",
+    label: "Running",
+    color: "text-blue-800",
+    bgColor: "bg-blue-100",
+    spinning: true
+  },
+  failed: {
+    icon: "\u2717",
+    label: "Failed",
+    color: "text-red-800",
+    bgColor: "bg-red-100"
+  },
+  pending: {
+    icon: "\u25CB",
+    label: "Pending",
+    color: "text-yellow-800",
+    bgColor: "bg-yellow-100"
+  },
+  cancelled: {
+    icon: "\xD7",
+    label: "Cancelled",
+    color: "text-gray-800",
+    bgColor: "bg-gray-100"
+  }
+};
+function RunStatusBadge({ status, className = "" }) {
+  const config = statusConfig2[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${config.bgColor} ${config.color} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: config.spinning ? "animate-spin" : "", "aria-hidden": "true", children: config.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.label })
+      ]
+    }
+  );
+}
+function RunActions({
+  run,
+  onViewDetails,
+  onViewResults,
+  onReRun,
+  onCancel,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const dropdownRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+  const canCancel = run.status === "pending" || run.status === "running";
+  const canViewResults = run.status === "completed";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+        "aria-label": "Run actions",
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-5 h-5",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+              }
+            )
+          }
+        )
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-10",
+        role: "menu",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                onViewDetails(run);
+                setIsOpen(false);
+              },
+              className: "w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2",
+              role: "menuitem",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u{1F441}" }),
+                "View Details"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                onViewResults(run);
+                setIsOpen(false);
+              },
+              disabled: !canViewResults,
+              className: "w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white",
+              role: "menuitem",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u{1F4CA}" }),
+                "View Results"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                onReRun(run);
+                setIsOpen(false);
+              },
+              className: "w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2",
+              role: "menuitem",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u21BB" }),
+                "Re-run"
+              ]
+            }
+          ),
+          canCancel && onCancel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 my-1" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => {
+                  if (confirm("Are you sure you want to cancel this run?")) {
+                    onCancel(run);
+                    setIsOpen(false);
+                  }
+                },
+                className: "w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center gap-2",
+                role: "menuitem",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xD7" }),
+                  "Cancel Run"
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/FunnelRunHistory/utils.ts
+function formatDuration(ms) {
+  if (ms === void 0 || ms === null) return "-";
+  if (ms === 0) return "0ms";
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60;
+    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+  }
+  if (minutes > 0) {
+    const remainingSeconds = seconds % 60;
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+  }
+  if (seconds > 0) {
+    return `${seconds}s`;
+  }
+  return `${ms}ms`;
+}
+function formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSeconds = Math.floor(diffMs / 1e3);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays > 0) {
+    return `${diffDays}d ago`;
+  }
+  if (diffHours > 0) {
+    return `${diffHours}h ago`;
+  }
+  if (diffMinutes > 0) {
+    return `${diffMinutes}m ago`;
+  }
+  return "Just now";
+}
+function calculateMatchRate(matched, total) {
+  if (total === 0) return 0;
+  return Math.round(matched / total * 100);
+}
+function formatNumber(num) {
+  return num.toLocaleString();
+}
+function formatFullTimestamp(date) {
+  const d = new Date(date);
+  return d.toLocaleString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function RunRow({
+  run,
+  onViewDetails,
+  onViewResults,
+  onReRun,
+  onCancel
+}) {
+  const matchRate = run.status === "completed" ? calculateMatchRate(run.total_matched, run.total_input) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      onClick: () => onViewDetails(run),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          onViewDetails(run);
+        }
+      },
+      tabIndex: 0,
+      className: "border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-sm text-gray-900",
+            title: formatFullTimestamp(run.started_at),
+            children: formatRelativeTime(run.started_at)
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(RunStatusBadge, { status: run.status }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700 capitalize", children: run.trigger_type }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-900", children: formatDuration(run.duration_ms) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: formatNumber(run.total_input) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-600", children: run.status === "completed" ? formatNumber(run.total_matched) : "-" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: matchRate !== null ? `${matchRate}%` : "-" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+          RunActions,
+          {
+            run,
+            onViewDetails,
+            onViewResults,
+            onReRun,
+            onCancel
+          }
+        ) })
+      ]
+    }
+  );
+}
+function StageBreakdownList({
+  stages,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-3 ${className}`, children: stages.map((stage, index) => {
+    const delta = stage.matched_count - stage.input_count;
+    const matchRate = stage.input_count > 0 ? Math.round(stage.matched_count / stage.input_count * 100) : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "p-3 bg-gray-50 rounded-lg border border-gray-200",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-blue-600 rounded-full", children: index + 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-gray-900", children: stage.stage_name })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Input" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-blue-600", children: formatNumber(stage.input_count) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Matched" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-green-600", children: formatNumber(stage.matched_count) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Rate" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg font-bold text-gray-700", children: [
+                matchRate,
+                "%"
+              ] })
+            ] })
+          ] }),
+          delta !== 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: `font-medium ${delta > 0 ? "text-green-600" : "text-red-600"}`,
+                children: [
+                  delta > 0 ? "\u25B2" : "\u25BC",
+                  " ",
+                  formatNumber(Math.abs(delta))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: delta > 0 ? "added" : "excluded" })
+          ] }) }),
+          stage.error_count && stage.error_count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-red-600 text-center", children: [
+            "\u26A0 ",
+            formatNumber(stage.error_count),
+            " errors"
+          ] }) })
+        ]
+      },
+      stage.stage_id
+    );
+  }) });
+}
+function RunDetailsModal({
+  run,
+  onClose,
+  onViewResults,
+  onReRun
+}) {
+  const modalRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    if (run) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.removeEventListener("keydown", handleEscape);
+        document.body.style.overflow = "unset";
+      };
+    }
+  }, [run, onClose]);
+  react.useEffect(() => {
+    if (run && modalRef.current) {
+      const focusableElements = modalRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      firstElement?.focus();
+      const handleTab = (e) => {
+        if (e.key !== "Tab") return;
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      };
+      document.addEventListener("keydown", handleTab);
+      return () => document.removeEventListener("keydown", handleTab);
+    }
+  }, [run]);
+  if (!run) return null;
+  const stageStatsArray = Object.values(run.stage_stats);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "modal-title",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: modalRef,
+          onClick: (e) => e.stopPropagation(),
+          className: "bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "modal-title", className: "text-lg font-semibold text-gray-900", children: "Run Details" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-1 text-gray-400 hover:text-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 overflow-y-auto flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 mb-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Status" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(RunStatusBadge, { status: run.status })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Duration" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900", children: formatDuration(run.duration_ms) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Started" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900", children: /* @__PURE__ */ jsxRuntime.jsx("span", { title: formatFullTimestamp(run.started_at), children: formatRelativeTime(run.started_at) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 mb-1", children: "Triggered by" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-900", children: [
+                      run.triggered_by || "System",
+                      " (",
+                      run.trigger_type,
+                      ")"
+                    ] })
+                  ] })
+                ] }),
+                run.status === "failed" && run.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-red-800 mb-1", children: "Error" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-red-700", children: run.error })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Stage Breakdown" }),
+                stageStatsArray.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(StageBreakdownList, { stages: stageStatsArray }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 text-center py-4", children: "No stage data available" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 border-t border-gray-200 flex items-center justify-end gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  children: "Close"
+                }
+              ),
+              onReRun && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    onReRun(run);
+                    onClose();
+                  },
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  children: "\u21BB Re-run"
+                }
+              ),
+              onViewResults && run.status === "completed" && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    onViewResults(run);
+                    onClose();
+                  },
+                  className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500",
+                  children: "View Results"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function FunnelRunHistory({
+  funnelId,
+  apiClient,
+  onViewResults,
+  className = ""
+}) {
+  const [runs, setRuns] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [selectedRun, setSelectedRun] = react.useState(null);
+  const [filters, setFilters] = react.useState({
+    status: "all",
+    trigger_type: "all",
+    date_range: "month"
+  });
+  const [pagination, setPagination] = react.useState({
+    page: 1,
+    page_size: 10,
+    total: 0
+  });
+  const [isRefreshing, setIsRefreshing] = react.useState(false);
+  const loadRuns = react.useCallback(async () => {
+    try {
+      setError(null);
+      const params = {
+        page: pagination.page,
+        page_size: pagination.page_size,
+        ordering: "-started_at"
+        // Most recent first
+      };
+      if (filters.status && filters.status !== "all") {
+        params.status = filters.status;
+      }
+      if (filters.trigger_type && filters.trigger_type !== "all") {
+        params.trigger_type = filters.trigger_type;
+      }
+      const response = await apiClient.getFunnelRuns(funnelId, params);
+      setRuns(response.results);
+      setPagination((prev) => ({
+        ...prev,
+        total: response.count
+      }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load runs");
+      console.error("Failed to load funnel runs:", err);
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, [funnelId, apiClient, pagination.page, pagination.page_size, filters]);
+  react.useEffect(() => {
+    loadRuns();
+  }, [loadRuns]);
+  react.useEffect(() => {
+    const hasActiveRuns = runs.some(
+      (r) => r.status === "pending" || r.status === "running"
+    );
+    if (hasActiveRuns) {
+      const interval = setInterval(() => {
+        setIsRefreshing(true);
+        loadRuns();
+      }, 5e3);
+      return () => clearInterval(interval);
+    }
+  }, [runs, loadRuns]);
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    loadRuns();
+  };
+  const handleReRun = async (run) => {
+    try {
+      await apiClient.runFunnel(funnelId, {
+        trigger_type: "manual",
+        metadata: { re_run_of: run.id }
+      });
+      loadRuns();
+    } catch (err) {
+      console.error("Failed to re-run funnel:", err);
+      alert("Failed to re-run funnel. Please try again.");
+    }
+  };
+  const handleCancel = async (run) => {
+    try {
+      await apiClient.cancelFunnelRun(run.id);
+      loadRuns();
+    } catch (err) {
+      console.error("Failed to cancel run:", err);
+      alert("Failed to cancel run. Please try again.");
+    }
+  };
+  const handleViewResults = (run) => {
+    if (onViewResults) {
+      onViewResults(run);
+    } else {
+      setSelectedRun(run);
+    }
+  };
+  const totalPages = Math.ceil(pagination.total / pagination.page_size);
+  const canGoBack = pagination.page > 1;
+  const canGoForward = pagination.page < totalPages;
+  const handlePreviousPage = () => {
+    if (canGoBack) {
+      setPagination((prev) => ({ ...prev, page: prev.page - 1 }));
+    }
+  };
+  const handleNextPage = () => {
+    if (canGoForward) {
+      setPagination((prev) => ({ ...prev, page: prev.page + 1 }));
+    }
+  };
+  const startIndex = (pagination.page - 1) * pagination.page_size + 1;
+  const endIndex = Math.min(
+    pagination.page * pagination.page_size,
+    pagination.total
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-white rounded-lg border border-gray-200 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Funnel Run History" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleRefresh,
+          disabled: isRefreshing,
+          className: "px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500",
+          "aria-label": "Refresh run history",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: isRefreshing ? "animate-spin inline-block" : "", children: "\u21BB" }),
+            " ",
+            "Refresh"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(RunFilters, { filters, onFiltersChange: setFilters }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Date" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Trigger" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Duration" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Input" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider", children: "Matched" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider", children: "%" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-right text-xs font-medium text-gray-600 uppercase tracking-wider", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: isLoading && runs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 8, className: "px-4 py-12 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: "Loading runs..." }) }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: 8, className: "px-4 py-12 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-600", children: [
+          "Error: ",
+          error
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: loadRuns,
+            className: "mt-2 text-sm text-blue-600 hover:text-blue-700 underline",
+            children: "Try again"
+          }
+        )
+      ] }) }) : runs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 8, className: "px-4 py-12 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: "No runs found. Run this funnel to see history." }) }) }) : runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
+        RunRow,
+        {
+          run,
+          onViewDetails: setSelectedRun,
+          onViewResults: handleViewResults,
+          onReRun: handleReRun,
+          onCancel: handleCancel
+        },
+        run.id
+      )) })
+    ] }) }),
+    runs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-3 border-t border-gray-200 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600", children: [
+        "Showing ",
+        startIndex,
+        "-",
+        endIndex,
+        " of ",
+        pagination.total
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handlePreviousPage,
+            disabled: !canGoBack,
+            className: "px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500",
+            "aria-label": "Previous page",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600", children: [
+          "Page ",
+          pagination.page,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleNextPage,
+            disabled: !canGoForward,
+            className: "px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500",
+            "aria-label": "Next page",
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RunDetailsModal,
+      {
+        run: selectedRun,
+        onClose: () => setSelectedRun(null),
+        onViewResults,
+        onReRun: handleReRun
+      }
+    )
+  ] });
+}
+
+exports.AddStageButton = AddStageButton;
+exports.BooleanValueInput = BooleanValueInput;
+exports.ChoiceValueInput = ChoiceValueInput;
+exports.DateValueInput = DateValueInput;
+exports.EntityCard = EntityCard;
+exports.FieldSelector = FieldSelector;
+exports.FilterRuleEditor = FilterRuleEditor;
+exports.FlowLegend = FlowLegend;
+exports.FunnelCard = FunnelCard;
+exports.FunnelPreview = FunnelPreview;
+exports.FunnelRunHistory = FunnelRunHistory;
+exports.FunnelStageBuilder = FunnelStageBuilder;
+exports.FunnelStats = FunnelStats;
+exports.FunnelVisualFlow = FunnelVisualFlow;
+exports.LoadingPreview = LoadingPreview;
+exports.LogicToggle = LogicToggle;
+exports.MULTI_VALUE_OPERATORS = MULTI_VALUE_OPERATORS;
+exports.MatchBar = MatchBar;
+exports.MultiChoiceValueInput = MultiChoiceValueInput;
+exports.NULL_VALUE_OPERATORS = NULL_VALUE_OPERATORS;
+exports.NumberValueInput = NumberValueInput;
+exports.OPERATOR_LABELS = OPERATOR_LABELS;
+exports.OperatorSelector = OperatorSelector;
+exports.PreviewStats = PreviewStats;
+exports.RuleRow = RuleRow;
+exports.RunActions = RunActions;
+exports.RunDetailsModal = RunDetailsModal;
+exports.RunFilters = RunFilters;
+exports.RunRow = RunRow;
+exports.RunStatusBadge = RunStatusBadge;
+exports.StageActions = StageActions;
+exports.StageBreakdown = StageBreakdown;
+exports.StageBreakdownList = StageBreakdownList;
+exports.StageCard = StageCard;
+exports.StageForm = StageForm;
+exports.StageIndicator = StageIndicator;
+exports.StageNode = StageNode;
+exports.StatusBadge = StatusBadge;
+exports.TagInput = TagInput;
+exports.TextValueInput = TextValueInput;
+exports.calculateMatchRate = calculateMatchRate;
+exports.formatDuration = formatDuration;
+exports.formatFullTimestamp = formatFullTimestamp;
+exports.formatNumber = formatNumber;
+exports.formatRelativeTime = formatRelativeTime;
+exports.getCircledNumber = getCircledNumber;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map