@startsimpli/funnels 0.1.3 → 0.1.5

package/dist/components/index.cjs

@@ -1,3243 +0,0 @@
-'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