@burdenoff/fluidgrids-fe-sdk 2026.1102.2 → 2026.1103.1

package/dist/index.js

@@ -2,8 +2,8 @@ export { Label } from './chunk-VTQVPNUQ.js';
 import { useRunners, useRunnerActions, RunnerStatusPill, runnerInstallCommand } from './chunk-OR7KZZ2D.js';
 export { RUNNER_INSTALL_SCRIPT_URL, RunOnSection, RunnerStatusPill, runnerInstallCommand, useRunnerActions, useRunners } from './chunk-OR7KZZ2D.js';
 export { Popover, PopoverContent, PopoverTrigger } from './chunk-GTEBQQ7J.js';
-export { WorkflowBuilder, WorkflowBuilderCore, WorkflowSearchRedirect } from './chunk-OZCJHPMH.js';
-export { GuidedTourStarter, WorkflowBuilder as WorkflowBuilderPage } from './chunk-37BKVPO7.js';
+export { WorkflowBuilder, WorkflowBuilderCore, WorkflowSearchRedirect } from './chunk-SA474Y5U.js';
+export { GuidedTourStarter, WorkflowBuilder as WorkflowBuilderPage } from './chunk-DQLSF6GB.js';
 export { FirstWorkflowChecklist, FirstWorkflowChecklistView, WorkflowsList, useCreateWorkflowFirst } from './chunk-7SY2SL5Y.js';
 import { CreateWorkflowRefusalDialog } from './chunk-JCHE4V55.js';
 export { CreateWorkflowRefusalDialog, GUIDED_FIRST_WORKFLOW_NAV, GUIDED_FIRST_WORKFLOW_STATE, GUIDED_TOUR_STATE, firstWorkflowProgress, isGuidedTourIntent, pickGuidedTour } from './chunk-JCHE4V55.js';
@@ -24,10 +24,10 @@ import './chunk-A7QPQ6MO.js';
 import './chunk-DLKGWGRN.js';
 export { useDataSinkData, useDataSinks, useInsightsData, useLogStreamDestinationActions, useLogStreamDestinations, useRunReplayActions } from './chunk-CXNJKM4D.js';
 import './chunk-5ERAJC2I.js';
-import { ThemeProvider, extractTemplateGraph } from './chunk-YVOHCC7J.js';
-export { TemplatePreview, TemplatesPage } from './chunk-YVOHCC7J.js';
-import { useAiWorkflowTemplates, AI_DRAFT_MAX_PROMPT_LENGTH, FlowBuilderPage, FluidGridsMark, draftToCanvas, enrichDraftNodes } from './chunk-MY752OLT.js';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, RunsUsageMeter, RunsUsageMeterView, readRunsQuota, runsQuotaLevel, summarizeRunsQuota, useRunsQuota } from './chunk-MY752OLT.js';
+import { ThemeProvider, extractTemplateGraph } from './chunk-4XV2DAVO.js';
+export { TemplatePreview, TemplatesPage } from './chunk-4XV2DAVO.js';
+import { useAiWorkflowTemplates, AI_DRAFT_MAX_PROMPT_LENGTH, FlowBuilderPage, FluidGridsMark, draftToCanvas, enrichDraftNodes } from './chunk-6O2B5NAK.js';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, RunsUsageMeter, RunsUsageMeterView, readRunsQuota, runsQuotaLevel, summarizeRunsQuota, useRunsQuota } from './chunk-6O2B5NAK.js';
 import './chunk-GEMNVFPK.js';
 import './chunk-B6CCE2RW.js';
 export { Input } from './chunk-IEVSFCFS.js';
@@ -68,12 +68,12 @@ export { ENGLISH_FALLBACK_TRANSLATOR, FluidGridsTranslationProvider, useTr } fro
 import { getFluidGridsClient, createFluidGridsClient } from './chunk-NTWG3CJX.js';
 export { createFluidGridsClient, getFluidGridsClient, getFluidGridsClientSafe, isFluidGridsClientReady, resetFluidGridsClient, setFluidGridsClient, waitForFluidGridsClient } from './chunk-NTWG3CJX.js';
 import * as React3 from 'react';
-import { lazy, Suspense, useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { Routes, Route, Navigate, useNavigate } from 'react-router';
+import { lazy, memo, Suspense, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Routes, Route, Navigate, useNavigate, useParams } from 'react-router';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { v4 } from 'uuid';
 import { toast } from 'sonner';
-import { ChevronRight, Check, Circle, Sparkles, Loader2, Square, Lightbulb, MessageCircleQuestion, RefreshCw, TriangleAlert, CheckCircle2, Pencil, Database, ArrowLeft, Plus, Table2, Search, ChevronDown, ChevronUp, Trash2, ArrowUpFromLine, ArrowDownToLine, ChevronLeft } from 'lucide-react';
+import { ChevronRight, Check, Circle, Flag, Search, Calculator, ListTree, GitBranch, Play, Sparkles, Loader2, Square, Lightbulb, MessageCircleQuestion, RefreshCw, TriangleAlert, CheckCircle2, Pencil, Database, ArrowLeft, Plus, Table2, Scale, Trash2, ChevronDown, ChevronUp, ArrowUpFromLine, ArrowDownToLine, ChevronLeft, AlertTriangle, Save, FlaskConical, CircleSlash, XCircle } from 'lucide-react';
 import { Badge, Card, CardHeader, CardContent, Label, Textarea, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button, Input, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, PagePurpose, NextSteps, CardTitle, IllustratedEmptyState, Switch, CardDescription } from '@burdenoff/fe-libs/ui';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
@@ -81,6 +81,8 @@ import { Icon } from '@iconify/react';
 import { Button as Button$1 } from '@burdenoff/fe-libs/button';
 import { gql } from '@apollo/client';
 import { TagBadge } from '@burdenoff/fe-libs/tag';
+import { MarkerType, Handle, Position, ReactFlowProvider, useReactFlow, useNodesState, useEdgesState, addEdge, ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
+import { useTheme } from '@burdenoff/fe-libs/shared/hooks/shell';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -95,7 +97,7 @@ var WorkflowsList2 = lazy(
   () => import('./WorkflowsList-NYSQEZWU.js').then((m) => ({ default: m.WorkflowsList }))
 );
 var WorkflowBuilder3 = lazy(
-  () => import('./WorkflowBuilder-ZIXEU7DQ.js').then((m) => ({
+  () => import('./WorkflowBuilder-E5MFEECZ.js').then((m) => ({
     default: m.WorkflowBuilder
   }))
 );
@@ -5021,6 +5023,2580 @@ function DataTablesPage() {
     ] })
   );
 }
+var ISSUE_FIELDS = gql`
+  fragment RuleIssueFields on RuleIssue {
+    severity
+    code
+    message
+    nodeId
+  }
+`;
+var RULE_SET_FIELDS = gql`
+  ${ISSUE_FIELDS}
+  fragment RuleSetFields on RuleSet {
+    id
+    workspaceId
+    name
+    description
+    definition
+    sampleInput
+    nodeCount
+    version
+    issues {
+      ...RuleIssueFields
+    }
+    createdAt
+    updatedAt
+    createdBy
+    updatedBy
+  }
+`;
+var GET_RULE_SETS = gql`
+  ${RULE_SET_FIELDS}
+  query GetRuleSets($search: String, $limit: Int, $offset: Int) {
+    ruleSets(search: $search, limit: $limit, offset: $offset) {
+      ruleSets {
+        ...RuleSetFields
+      }
+      total
+    }
+  }
+`;
+var GET_RULE_SET = gql`
+  ${RULE_SET_FIELDS}
+  query GetRuleSet($id: ID!) {
+    ruleSet(id: $id) {
+      ...RuleSetFields
+    }
+  }
+`;
+var GET_RULE_SET_TEMPLATES = gql`
+  query GetRuleSetTemplates {
+    ruleSetTemplates {
+      id
+      name
+      description
+      definition
+      sampleInput
+    }
+  }
+`;
+var CREATE_RULE_SET = gql`
+  ${RULE_SET_FIELDS}
+  mutation CreateRuleSet($input: CreateRuleSetInput!) {
+    createRuleSet(input: $input) {
+      ...RuleSetFields
+    }
+  }
+`;
+var UPDATE_RULE_SET = gql`
+  ${RULE_SET_FIELDS}
+  mutation UpdateRuleSet($id: ID!, $input: UpdateRuleSetInput!) {
+    updateRuleSet(id: $id, input: $input) {
+      ...RuleSetFields
+    }
+  }
+`;
+var DELETE_RULE_SET = gql`
+  mutation DeleteRuleSet($id: ID!) {
+    deleteRuleSet(id: $id)
+  }
+`;
+var TEST_RULE_SET = gql`
+  ${ISSUE_FIELDS}
+  mutation TestRuleSet($input: TestRuleSetInput!) {
+    testRuleSet(input: $input) {
+      status
+      decision
+      output
+      variables
+      path
+      durationMs
+      issues {
+        ...RuleIssueFields
+      }
+      trace {
+        index
+        nodeId
+        nodeType
+        label
+        outcome
+        detail
+        variables
+        conditions {
+          field
+          operator
+          expected
+          actual
+          passed
+        }
+      }
+    }
+  }
+`;
+function operationError2(error, fallback) {
+  return new Error(describeOperationError(error, fallback));
+}
+var RULE_SET_LIST_LIMIT = 200;
+function useRuleSets(search) {
+  const [ruleSets, setRuleSets] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const latestRequest = useRef(0);
+  const fetchRuleSets = useCallback(async () => {
+    latestRequest.current += 1;
+    const request = latestRequest.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().query({
+          query: GET_RULE_SETS,
+          variables: {
+            search: search?.trim() || void 0,
+            limit: RULE_SET_LIST_LIMIT
+          },
+          fetchPolicy: "network-only"
+        })
+      );
+      if (request !== latestRequest.current) return;
+      setRuleSets(result.data?.ruleSets.ruleSets ?? []);
+      setTotal(result.data?.ruleSets.total ?? 0);
+    } catch (err) {
+      if (request !== latestRequest.current) return;
+      setError(operationError2(err, "Failed to load rule sets"));
+    } finally {
+      setLoading(
+        (current) => request === latestRequest.current ? false : current
+      );
+    }
+  }, [search]);
+  useEffect(() => {
+    void fetchRuleSets();
+  }, [fetchRuleSets]);
+  return { ruleSets, total, loading, error, refetch: fetchRuleSets };
+}
+function useRuleSet(id) {
+  const [ruleSet, setRuleSet] = useState(null);
+  const [loading, setLoading] = useState(Boolean(id));
+  const [error, setError] = useState(null);
+  const fetchRuleSet = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().query({
+          query: GET_RULE_SET,
+          variables: { id },
+          fetchPolicy: "network-only"
+        })
+      );
+      setRuleSet(result.data?.ruleSet ?? null);
+    } catch (err) {
+      setError(operationError2(err, "Failed to load the rule set"));
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+  useEffect(() => {
+    void fetchRuleSet();
+  }, [fetchRuleSet]);
+  return { ruleSet, setRuleSet, loading, error, refetch: fetchRuleSet };
+}
+function useRuleSetTemplates() {
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let active = true;
+    getFluidGridsClient().query({
+      query: GET_RULE_SET_TEMPLATES,
+      fetchPolicy: "cache-first"
+    }).then((result) => {
+      if (active) setTemplates(result.data?.ruleSetTemplates ?? []);
+    }).catch(() => {
+      if (active) setTemplates([]);
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return { templates, loading };
+}
+function useRuleSetMutations() {
+  const createRuleSet = useCallback(async (input) => {
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().mutate({
+          mutation: CREATE_RULE_SET,
+          variables: { input }
+        })
+      );
+      const created = result.data?.createRuleSet;
+      if (!created) throw new Error("Failed to create the rule set");
+      return created;
+    } catch (err) {
+      throw operationError2(err, "Failed to create the rule set");
+    }
+  }, []);
+  const updateRuleSet = useCallback(
+    async (id, input) => {
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({
+            mutation: UPDATE_RULE_SET,
+            variables: { id, input }
+          })
+        );
+        const updated = result.data?.updateRuleSet;
+        if (!updated) throw new Error("Failed to save the rule set");
+        return updated;
+      } catch (err) {
+        throw operationError2(err, "Failed to save the rule set");
+      }
+    },
+    []
+  );
+  const deleteRuleSet = useCallback(async (id) => {
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().mutate({
+          mutation: DELETE_RULE_SET,
+          variables: { id }
+        })
+      );
+      return result.data?.deleteRuleSet === true;
+    } catch (err) {
+      throw operationError2(err, "Failed to delete the rule set");
+    }
+  }, []);
+  const testRuleSet = useCallback(
+    async (input) => {
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({
+            mutation: TEST_RULE_SET,
+            variables: { input }
+          })
+        );
+        const evaluation = result.data?.testRuleSet;
+        if (!evaluation) throw new Error("Failed to test the rule set");
+        return evaluation;
+      } catch (err) {
+        throw operationError2(err, "Failed to test the rule set");
+      }
+    },
+    []
+  );
+  return { createRuleSet, updateRuleSet, deleteRuleSet, testRuleSet };
+}
+function CreateRuleSetDialog({
+  open,
+  onOpenChange,
+  onCreated
+}) {
+  const tr = useTr();
+  const { templates } = useRuleSetTemplates();
+  const { createRuleSet } = useRuleSetMutations();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [templateId, setTemplateId] = useState("loan-approval");
+  const [saving, setSaving] = useState(false);
+  const submit = async (event) => {
+    event.preventDefault();
+    const template = templates.find((item) => item.id === templateId);
+    const finalName = name.trim() || template?.name || "";
+    if (!finalName) {
+      toast.error(
+        tr("fluidgrids.rules.nameRequired", "Give the rule set a name")
+      );
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await createRuleSet({
+        name: finalName,
+        description: description.trim() || template?.description || void 0,
+        ...templateId ? { templateId } : {}
+      });
+      onCreated(created);
+      setName("");
+      setDescription("");
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : tr(
+          "fluidgrids.rules.createFailed",
+          "Failed to create the rule set"
+        )
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: tr("fluidgrids.rules.newRuleSet", "New rule set") }) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col gap-4",
+        onSubmit: (event) => void submit(event),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.rules.startFrom", "Start from") }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+              templates.map((template) => /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: `flex cursor-pointer gap-3 rounded-md border p-3 ${templateId === template.id ? "border-primary bg-primary/5" : "border-border-secondary"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "rule-template",
+                        value: template.id,
+                        checked: templateId === template.id,
+                        onChange: () => setTemplateId(template.id),
+                        className: "mt-1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: template.name }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-text-secondary", children: template.description })
+                    ] })
+                  ]
+                },
+                template.id
+              )),
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: `flex cursor-pointer gap-3 rounded-md border p-3 ${templateId === "" ? "border-primary bg-primary/5" : "border-border-secondary"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: "rule-template",
+                        value: "",
+                        checked: templateId === "",
+                        onChange: () => setTemplateId(""),
+                        className: "mt-1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: tr("fluidgrids.rules.emptyRuleSet", "Empty canvas") }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-text-secondary", children: tr(
+                        "fluidgrids.rules.emptyRuleSetHint",
+                        "No blocks; build the decision tree from scratch."
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "rule-set-name", children: tr("fluidgrids.rules.name", "Name") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "rule-set-name",
+                value: name,
+                maxLength: 200,
+                placeholder: templates.find((item) => item.id === templateId)?.name ?? tr("fluidgrids.rules.namePlaceholder", "Loan approval decision"),
+                onChange: (event) => setName(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "rule-set-description", children: tr("fluidgrids.rules.description", "Description") }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "rule-set-description",
+                rows: 2,
+                maxLength: 2e3,
+                value: description,
+                onChange: (event) => setDescription(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => onOpenChange(false),
+                children: tr("fluidgrids.rules.cancel", "Cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(Button$1, { type: "submit", disabled: saving, children: saving ? tr("fluidgrids.rules.creating", "Creating\u2026") : tr("fluidgrids.rules.create", "Create and open") })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function RuleSetsPage() {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+  const { ruleSets, total, loading, error, refetch } = useRuleSets(search);
+  const { deleteRuleSet } = useRuleSetMutations();
+  const [createOpen, setCreateOpen] = useState(false);
+  const open = (ruleSet) => navigate(ruleSet.id);
+  const remove = async (ruleSet) => {
+    if (!window.confirm(
+      tr(
+        "fluidgrids.rules.confirmDelete",
+        'Delete the rule set "{{name}}"?',
+        {
+          name: ruleSet.name
+        }
+      )
+    )) {
+      return;
+    }
+    try {
+      await deleteRuleSet(ruleSet.id);
+      toast.success(tr("fluidgrids.rules.deleted", "Rule set deleted"));
+      void refetch();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : tr(
+          "fluidgrids.rules.deleteFailed",
+          "Failed to delete the rule set"
+        )
+      );
+    }
+  };
+  const newButton = /* @__PURE__ */ jsx(
+    SdkPermissionButton,
+    {
+      permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_CREATE,
+      deniedTooltip: tr(
+        "fluidgrids.rules.createDenied",
+        "You don't have permission to create rule sets"
+      ),
+      children: /* @__PURE__ */ jsxs(Button$1, { onClick: () => setCreateOpen(true), "data-testid": "rule-set-new", children: [
+        /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+        tr("fluidgrids.rules.newRuleSet", "New rule set")
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background-primary p-4 pb-24 sm:p-6 sm:pb-24", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-[1200px] flex-col gap-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-sm text-text-secondary", children: [
+            /* @__PURE__ */ jsx(Scale, { className: "size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.rules.eyebrow", "Decision logic")
+          ] }),
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-text-primary sm:text-3xl", children: tr("fluidgrids.rules.pageTitle", "Rule Builder") }),
+          /* @__PURE__ */ jsx(PagePurpose, { icon: /* @__PURE__ */ jsx(Scale, { className: "size-4", "aria-hidden": "true" }), children: tr(
+            "fluidgrids.rules.pageSubtitle",
+            "Author decision trees visually from conditions, scoring rules, lookups and decisions, then test them against sample input and see every step of the evaluation."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs(Button$1, { variant: "outline", onClick: () => navigate("../list"), children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.rules.backToWorkflows", "Back to Workflows")
+          ] }),
+          newButton
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex max-w-md gap-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            setSearch(searchInput);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: "pointer-events-none absolute left-2.5 top-2.5 size-4 text-text-secondary",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: "pl-8",
+                  value: searchInput,
+                  onChange: (event) => setSearchInput(event.target.value),
+                  placeholder: tr("fluidgrids.rules.search", "Search rule sets"),
+                  "aria-label": tr("fluidgrids.rules.search", "Search rule sets")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Button$1, { type: "submit", variant: "outline", children: tr("fluidgrids.rules.searchAction", "Search") })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error", role: "alert", children: error.message }),
+      loading && ruleSets.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: tr("fluidgrids.rules.loading", "Loading rule sets\u2026") }),
+      !loading && !error && ruleSets.length === 0 && /* @__PURE__ */ jsx(
+        IllustratedEmptyState,
+        {
+          className: "py-10",
+          illustration: "onboarding",
+          title: search ? tr(
+            "fluidgrids.rules.noMatches",
+            "No rule sets match your search"
+          ) : tr("fluidgrids.rules.empty", "Build your first rule set"),
+          description: tr(
+            "fluidgrids.rules.emptyHint",
+            "Start from the loan approval example or an empty canvas."
+          ),
+          action: search ? void 0 : newButton
+        }
+      ),
+      ruleSets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-text-secondary", children: tr("fluidgrids.rules.count", "{{count}} rule sets", {
+          count: total
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-3 md:grid-cols-2", children: ruleSets.map((ruleSet) => {
+          const errors = ruleSet.issues.filter(
+            (issue) => issue.severity === "ERROR"
+          ).length;
+          return /* @__PURE__ */ jsx(
+            Card,
+            {
+              className: "border-border-secondary transition-colors hover:border-primary/50",
+              "data-testid": "rule-set-card",
+              children: /* @__PURE__ */ jsxs(CardContent, { className: "flex items-start gap-3 p-4", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex min-w-0 flex-1 flex-col text-left",
+                    onClick: () => open(ruleSet),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-text-primary", children: ruleSet.name }),
+                      ruleSet.description && /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm text-text-secondary", children: ruleSet.description }),
+                      /* @__PURE__ */ jsxs("span", { className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-secondary", children: [
+                        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: tr(
+                          "fluidgrids.rules.blockCount",
+                          "{{count}} blocks",
+                          {
+                            count: ruleSet.nodeCount
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          "v",
+                          ruleSet.version
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { children: tr(
+                          "fluidgrids.rules.updatedAt",
+                          "Updated {{date}}",
+                          {
+                            date: new Date(
+                              ruleSet.updatedAt
+                            ).toLocaleString()
+                          }
+                        ) }),
+                        errors > 0 && /* @__PURE__ */ jsx("span", { className: "text-status-error", children: tr(
+                          "fluidgrids.rules.needsAttention",
+                          "Needs attention"
+                        ) })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SdkPermissionButton,
+                  {
+                    permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_DELETE,
+                    deniedTooltip: tr(
+                      "fluidgrids.rules.deleteDenied",
+                      "You don't have permission to delete rule sets"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      Button$1,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        "aria-label": tr("fluidgrids.rules.delete", "Delete"),
+                        onClick: () => void remove(ruleSet),
+                        children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+                      }
+                    )
+                  }
+                )
+              ] })
+            },
+            ruleSet.id
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CreateRuleSetDialog,
+      {
+        open: createOpen,
+        onOpenChange: setCreateOpen,
+        onCreated: (ruleSet) => {
+          setCreateOpen(false);
+          toast.success(tr("fluidgrids.rules.created", "Rule set created"));
+          open(ruleSet);
+        }
+      }
+    )
+  ] });
+}
+var RULE_BLOCK_STYLES = {
+  CONDITION: {
+    icon: GitBranch,
+    accent: "border-status-info",
+    chip: "bg-status-info/10 text-status-info"
+  },
+  COMPLEX: {
+    icon: ListTree,
+    accent: "border-primary",
+    chip: "bg-primary/10 text-primary"
+  },
+  SCORING: {
+    icon: Calculator,
+    accent: "border-status-warning",
+    chip: "bg-status-warning/10 text-status-warning"
+  },
+  LOOKUP: {
+    icon: Search,
+    accent: "border-accent",
+    chip: "bg-accent/10 text-accent"
+  },
+  DECISION: {
+    icon: Flag,
+    accent: "border-status-success",
+    chip: "bg-status-success/10 text-status-success"
+  }
+};
+var RULE_BLOCK_DRAG_MIME = "application/x-fluidgrids-rule-block";
+function ruleIssueKey(issue) {
+  return `${issue.severity}:${issue.code}:${issue.nodeId ?? ""}:${issue.message}`;
+}
+
+// src/modules/rule-builder/lib/rule-graph.ts
+var RULE_NODE_TYPES = [
+  "CONDITION",
+  "COMPLEX",
+  "SCORING",
+  "LOOKUP",
+  "DECISION"
+];
+var RULE_OPERATORS = [
+  "EQ",
+  "NEQ",
+  "GT",
+  "GTE",
+  "LT",
+  "LTE",
+  "BETWEEN",
+  "IN",
+  "NOT_IN",
+  "CONTAINS",
+  "NOT_CONTAINS",
+  "STARTS_WITH",
+  "ENDS_WITH",
+  "EXISTS",
+  "NOT_EXISTS",
+  "IS_TRUE",
+  "IS_FALSE"
+];
+var UNARY_OPERATORS = /* @__PURE__ */ new Set([
+  "EXISTS",
+  "NOT_EXISTS",
+  "IS_TRUE",
+  "IS_FALSE"
+]);
+function configOf(_type, config2) {
+  return config2;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isBranching(type) {
+  return type === "CONDITION" || type === "COMPLEX";
+}
+function branchesOf(type) {
+  if (type === "DECISION") return [];
+  return isBranching(type) ? ["TRUE", "FALSE"] : ["NEXT"];
+}
+function defaultConfig(type) {
+  switch (type) {
+    case "CONDITION":
+      return { condition: { field: "", operator: "EQ", value: "" } };
+    case "COMPLEX":
+      return {
+        combinator: "ALL",
+        conditions: [{ field: "", operator: "EQ", value: "" }]
+      };
+    case "SCORING":
+      return { variable: "score", base: 0, rules: [] };
+    case "LOOKUP":
+      return {
+        key: "",
+        variable: "result",
+        source: { kind: "INLINE", entries: [] },
+        defaultValue: null
+      };
+    case "DECISION":
+      return { outcome: "APPROVED", output: {} };
+  }
+}
+var DEFAULT_LABELS = {
+  CONDITION: "Condition",
+  COMPLEX: "Complex logic",
+  SCORING: "Scoring rule",
+  LOOKUP: "Lookup",
+  DECISION: "Decision"
+};
+function nextNodeId(type, existing) {
+  const taken = new Set(existing);
+  const prefix = type.toLowerCase();
+  for (let index = 1; ; index++) {
+    const id = `${prefix}-${index}`;
+    if (!taken.has(id)) return id;
+  }
+}
+function createRuleNode(type, position, existingIds, label = DEFAULT_LABELS[type]) {
+  return {
+    id: nextNodeId(type, existingIds),
+    type,
+    label,
+    position,
+    config: defaultConfig(type)
+  };
+}
+function readNode(value) {
+  if (!isPlainObject(value)) return null;
+  const type = value["type"];
+  const id = value["id"];
+  if (typeof id !== "string" || typeof type !== "string" || !RULE_NODE_TYPES.includes(type)) {
+    return null;
+  }
+  const ruleType = type;
+  const position = isPlainObject(value["position"]) ? value["position"] : {};
+  const x = Number(position["x"]);
+  const y = Number(position["y"]);
+  const config2 = isPlainObject(value["config"]) ? {
+    ...defaultConfig(ruleType),
+    ...value["config"]
+  } : defaultConfig(ruleType);
+  return {
+    id,
+    type: ruleType,
+    label: typeof value["label"] === "string" ? value["label"] : "",
+    position: { x: Number.isFinite(x) ? x : 0, y: Number.isFinite(y) ? y : 0 },
+    config: config2
+  };
+}
+function readDefinition(value) {
+  if (!isPlainObject(value)) return { startNodeId: null, nodes: [], edges: [] };
+  const nodes = (Array.isArray(value["nodes"]) ? value["nodes"] : []).map(readNode).filter((node) => node !== null);
+  const ids = new Set(nodes.map((node) => node.id));
+  const edges = (Array.isArray(value["edges"]) ? value["edges"] : []).filter(isPlainObject).map((edge, index) => ({
+    id: typeof edge["id"] === "string" ? edge["id"] : `edge-${index + 1}`,
+    source: String(edge["source"] ?? ""),
+    target: String(edge["target"] ?? ""),
+    branch: branchFromHandle(
+      typeof edge["branch"] === "string" ? edge["branch"] : null
+    )
+  })).filter((edge) => ids.has(edge.source) && ids.has(edge.target));
+  const start = value["startNodeId"];
+  return {
+    startNodeId: typeof start === "string" && ids.has(start) ? start : null,
+    nodes,
+    edges
+  };
+}
+function resolveStartNodeId(definition) {
+  if (definition.startNodeId) return definition.startNodeId;
+  const targets = new Set(definition.edges.map((edge) => edge.target));
+  const roots = definition.nodes.filter((node) => !targets.has(node.id));
+  return roots.length === 1 ? roots[0]?.id ?? null : null;
+}
+function toFlow(definition) {
+  const start = resolveStartNodeId(definition);
+  return {
+    nodes: definition.nodes.map((node) => ({
+      id: node.id,
+      type: "rule",
+      position: node.position,
+      data: {
+        ruleType: node.type,
+        label: node.label,
+        config: node.config,
+        isStart: node.id === start
+      }
+    })),
+    edges: definition.edges.map((edge) => toFlowEdge(edge))
+  };
+}
+function toFlowEdge(edge) {
+  return {
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    sourceHandle: edge.branch,
+    label: edge.branch === "NEXT" ? void 0 : edge.branch,
+    data: { branch: edge.branch }
+  };
+}
+function fromFlow(nodes, edges, startNodeId) {
+  const ids = new Set(nodes.map((node) => node.id));
+  return {
+    startNodeId: startNodeId && ids.has(startNodeId) ? startNodeId : null,
+    nodes: nodes.map((node) => ({
+      id: node.id,
+      type: node.data.ruleType,
+      label: node.data.label,
+      position: {
+        x: Math.round(node.position.x),
+        y: Math.round(node.position.y)
+      },
+      config: node.data.config
+    })),
+    edges: edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target)).map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      branch: edge.data?.branch ?? branchFromHandle(edge.sourceHandle)
+    }))
+  };
+}
+function branchFromHandle(handle) {
+  return handle === "TRUE" || handle === "FALSE" ? handle : "NEXT";
+}
+function canConnect(edges, source, target, handle) {
+  if (!source || !target || source === target) return false;
+  const branch = branchFromHandle(handle);
+  return !edges.some(
+    (edge) => edge.source === source && (edge.data?.branch ?? branchFromHandle(edge.sourceHandle)) === branch
+  );
+}
+function nextEdgeId(edges) {
+  const taken = new Set(edges.map((edge) => edge.id));
+  for (let index = edges.length + 1; ; index++) {
+    const id = `edge-${index}`;
+    if (!taken.has(id)) return id;
+  }
+}
+function parseValueText(text) {
+  const trimmed = text.trim();
+  if (trimmed === "") return "";
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return text;
+  }
+}
+function formatValueText(value) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "string") {
+    return parseValueText(value) === value ? value : JSON.stringify(value);
+  }
+  return JSON.stringify(value);
+}
+function parseJsonText(text) {
+  try {
+    return { ok: true, value: JSON.parse(text) };
+  } catch (error) {
+    return {
+      ok: false,
+      error: error instanceof Error ? error.message : "Invalid JSON"
+    };
+  }
+}
+
+// src/modules/rule-builder/lib/rule-labels.ts
+function ruleBlockTypeLabel(tr, type) {
+  switch (type) {
+    case "CONDITION":
+      return tr("fluidgrids.rules.blockType.CONDITION", "Condition");
+    case "COMPLEX":
+      return tr("fluidgrids.rules.blockType.COMPLEX", "Complex logic");
+    case "SCORING":
+      return tr("fluidgrids.rules.blockType.SCORING", "Scoring rule");
+    case "LOOKUP":
+      return tr("fluidgrids.rules.blockType.LOOKUP", "Lookup");
+    case "DECISION":
+      return tr("fluidgrids.rules.blockType.DECISION", "Decision");
+  }
+}
+function operatorLabel(tr, operator) {
+  switch (operator) {
+    case "EQ":
+      return "=";
+    case "NEQ":
+      return "\u2260";
+    case "GT":
+      return ">";
+    case "GTE":
+      return "\u2265";
+    case "LT":
+      return "<";
+    case "LTE":
+      return "\u2264";
+    case "BETWEEN":
+      return tr("fluidgrids.rules.operator.BETWEEN", "between");
+    case "IN":
+      return tr("fluidgrids.rules.operator.IN", "in");
+    case "NOT_IN":
+      return tr("fluidgrids.rules.operator.NOT_IN", "not in");
+    case "CONTAINS":
+      return tr("fluidgrids.rules.operator.CONTAINS", "contains");
+    case "NOT_CONTAINS":
+      return tr("fluidgrids.rules.operator.NOT_CONTAINS", "does not contain");
+    case "STARTS_WITH":
+      return tr("fluidgrids.rules.operator.STARTS_WITH", "starts with");
+    case "ENDS_WITH":
+      return tr("fluidgrids.rules.operator.ENDS_WITH", "ends with");
+    case "EXISTS":
+      return tr("fluidgrids.rules.operator.EXISTS", "exists");
+    case "NOT_EXISTS":
+      return tr("fluidgrids.rules.operator.NOT_EXISTS", "is missing");
+    case "IS_TRUE":
+      return tr("fluidgrids.rules.operator.IS_TRUE", "is true");
+    case "IS_FALSE":
+      return tr("fluidgrids.rules.operator.IS_FALSE", "is false");
+    default:
+      return operator;
+  }
+}
+function describeCondition(tr, condition) {
+  const field = condition.field || "\u2026";
+  const operator = operatorLabel(tr, condition.operator);
+  if (UNARY_OPERATORS.has(condition.operator)) return `${field} ${operator}`;
+  const value = isPlainObject(condition.value) ? typeof condition.value["$ref"] === "string" ? condition.value["$ref"] : JSON.stringify(condition.value) : formatValueText(condition.value) || "\u2026";
+  return `${field} ${operator} ${value}`;
+}
+function summarizeNode(tr, type, config2) {
+  switch (type) {
+    case "CONDITION":
+      return describeCondition(tr, configOf("CONDITION", config2).condition);
+    case "COMPLEX": {
+      const complex = configOf("COMPLEX", config2);
+      const count = complex.conditions.length;
+      if (complex.combinator === "ALL") {
+        return count === 1 ? tr("fluidgrids.rules.summaryAllOne", "All of 1 condition") : tr("fluidgrids.rules.summaryAll", "All of {{count}} conditions", {
+          count
+        });
+      }
+      return count === 1 ? tr("fluidgrids.rules.summaryAnyOne", "Any of 1 condition") : tr("fluidgrids.rules.summaryAny", "Any of {{count}} conditions", {
+        count
+      });
+    }
+    case "SCORING": {
+      const scoring = configOf("SCORING", config2);
+      return scoring.rules.length === 1 ? tr(
+        "fluidgrids.rules.summaryScoringOne",
+        "1 scoring rule \u2192 {{variable}}",
+        { variable: scoring.variable }
+      ) : tr(
+        "fluidgrids.rules.summaryScoring",
+        "{{count}} scoring rules \u2192 {{variable}}",
+        { count: scoring.rules.length, variable: scoring.variable }
+      );
+    }
+    case "LOOKUP": {
+      const lookup = configOf("LOOKUP", config2);
+      const key = lookup.key || "\u2026";
+      return lookup.source.kind === "DATA_TABLE" ? tr(
+        "fluidgrids.rules.summaryLookupTable",
+        "{{key}} \u2192 {{variable}} (data table)",
+        { key, variable: lookup.variable }
+      ) : lookup.source.entries.length === 1 ? tr(
+        "fluidgrids.rules.summaryLookupInlineOne",
+        "{{key}} \u2192 {{variable}} (1 entry)",
+        { key, variable: lookup.variable }
+      ) : tr(
+        "fluidgrids.rules.summaryLookupInline",
+        "{{key}} \u2192 {{variable}} ({{count}} entries)",
+        {
+          key,
+          variable: lookup.variable,
+          count: lookup.source.entries.length
+        }
+      );
+    }
+    case "DECISION":
+      return configOf("DECISION", config2).outcome || "\u2026";
+  }
+}
+function RuleBuilderHeader({
+  version: version2,
+  name,
+  dirty,
+  saving,
+  canEdit,
+  issues,
+  onBack,
+  onNameChange,
+  onSave
+}) {
+  const tr = useTr();
+  const errorCount = issues.filter(
+    (issue) => issue.severity === "ERROR"
+  ).length;
+  const warningCount = issues.length - errorCount;
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-3 border-b border-border-secondary px-4 py-3", children: [
+    /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onBack,
+        "aria-label": tr("fluidgrids.rules.backToRuleSets", "Back to rule sets"),
+        children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-text-secondary", children: [
+        /* @__PURE__ */ jsx(Scale, { className: "size-3.5", "aria-hidden": "true" }),
+        tr("fluidgrids.rules.ruleSet", "Rule set"),
+        " \xB7 v",
+        version2,
+        dirty && /* @__PURE__ */ jsxs("span", { className: "text-status-warning", children: [
+          "\xB7 ",
+          tr("fluidgrids.rules.unsaved", "Unsaved changes")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: name,
+          maxLength: 200,
+          disabled: !canEdit,
+          "aria-label": tr("fluidgrids.rules.name", "Name"),
+          className: "h-8 max-w-md border-transparent px-1 text-lg font-semibold text-text-primary hover:border-input",
+          onChange: (event) => onNameChange(event.target.value)
+        }
+      )
+    ] }),
+    (errorCount > 0 || warningCount > 0) && /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: "outline",
+        className: errorCount > 0 ? "text-status-error" : "text-status-warning",
+        title: issues.map((issue) => issue.message).join("\n"),
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "mr-1 size-3.5", "aria-hidden": "true" }),
+          errorCount > 0 ? tr("fluidgrids.rules.errorCount", "{{count}} errors", {
+            count: errorCount
+          }) : tr("fluidgrids.rules.warningCount", "{{count}} warnings", {
+            count: warningCount
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SdkPermissionButton,
+      {
+        permission: FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE,
+        deniedTooltip: tr(
+          "fluidgrids.rules.saveDenied",
+          "You don't have permission to edit rule sets"
+        ),
+        children: /* @__PURE__ */ jsxs(Button$1, { onClick: onSave, disabled: saving || !dirty, children: [
+          /* @__PURE__ */ jsx(Save, { className: "mr-2 size-4", "aria-hidden": "true" }),
+          saving ? tr("fluidgrids.rules.saving", "Saving\u2026") : tr("fluidgrids.rules.save", "Save")
+        ] })
+      }
+    )
+  ] });
+}
+function RulePalette({
+  canEdit,
+  onAdd
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: "flex shrink-0 gap-2 overflow-x-auto border-b border-border-secondary p-3 lg:w-52 lg:flex-col lg:border-b-0 lg:border-r",
+      "aria-label": tr("fluidgrids.rules.palette", "Blocks"),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden text-xs font-medium uppercase tracking-wide text-text-secondary lg:block", children: tr("fluidgrids.rules.palette", "Blocks") }),
+        RULE_NODE_TYPES.map((type) => {
+          const style = RULE_BLOCK_STYLES[type];
+          const Icon6 = style.icon;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              draggable: canEdit,
+              disabled: !canEdit,
+              onDragStart: (event) => {
+                event.dataTransfer.setData(RULE_BLOCK_DRAG_MIME, type);
+                event.dataTransfer.effectAllowed = "move";
+              },
+              onClick: () => onAdd(type),
+              className: "flex shrink-0 items-center gap-2 rounded-md border border-border-secondary px-2 py-2 text-left text-sm text-text-primary hover:bg-muted/40 disabled:opacity-50",
+              "data-testid": `rule-palette-${type.toLowerCase()}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `flex size-6 items-center justify-center rounded ${style.chip}`,
+                    children: /* @__PURE__ */ jsx(Icon6, { className: "size-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                ruleBlockTypeLabel(tr, type)
+              ]
+            },
+            type
+          );
+        }),
+        /* @__PURE__ */ jsx("p", { className: "hidden text-xs text-text-secondary lg:block", children: tr(
+          "fluidgrids.rules.paletteHint",
+          "Click or drag a block onto the canvas, then connect its outputs. Condition blocks have a TRUE and a FALSE output."
+        ) })
+      ]
+    }
+  );
+}
+function RuleIssueList({
+  issues,
+  onFocusNode
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 text-sm text-text-secondary", children: [
+    /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.rules.selectBlock", "Select a block to edit it.") }),
+    issues.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: issues.map((issue) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `text-left text-xs ${issue.severity === "ERROR" ? "text-status-error" : "text-status-warning"}`,
+        onClick: () => issue.nodeId && onFocusNode(issue.nodeId),
+        children: issue.message
+      }
+    ) }, ruleIssueKey(issue))) })
+  ] });
+}
+var HANDLE_OFFSETS = {
+  TRUE: "30%",
+  FALSE: "70%",
+  NEXT: "50%"
+};
+function RuleNodeCardComponent({ data, selected }) {
+  const tr = useTr();
+  const style = RULE_BLOCK_STYLES[data.ruleType];
+  const Icon6 = style.icon;
+  const typeLabel = ruleBlockTypeLabel(tr, data.ruleType);
+  const highlight = data.onPath ? "ring-2 ring-status-success" : selected ? "ring-2 ring-primary" : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `w-60 rounded-lg border-l-4 border border-border-secondary bg-background-primary shadow-sm ${style.accent} ${highlight}`,
+      "data-testid": `rule-node-${data.ruleType.toLowerCase()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Top,
+            className: "!size-3 !border-2 !border-background-primary !bg-text-secondary"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md ${style.chip}`,
+              children: /* @__PURE__ */ jsx(Icon6, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-text-secondary", children: [
+              typeLabel,
+              data.isStart && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-0.5 rounded bg-primary/10 px-1 text-primary normal-case", children: [
+                /* @__PURE__ */ jsx(Play, { className: "size-3", "aria-hidden": "true" }),
+                tr("fluidgrids.rules.start", "Start")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-text-primary", children: data.label || typeLabel }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-text-secondary", children: summarizeNode(tr, data.ruleType, data.config) }),
+            data.stepOutcome && /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] font-medium text-status-success", children: tr("fluidgrids.rules.stepResult", "Result: {{outcome}}", {
+              outcome: data.stepOutcome
+            }) })
+          ] })
+        ] }),
+        branchesOf(data.ruleType).map((branch) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: branch,
+            type: "source",
+            position: Position.Bottom,
+            style: { left: HANDLE_OFFSETS[branch] },
+            className: `!size-3 !border-2 !border-background-primary ${branch === "FALSE" ? "!bg-status-error" : branch === "TRUE" ? "!bg-status-success" : "!bg-text-secondary"}`,
+            title: branch
+          },
+          branch
+        )),
+        branchesOf(data.ruleType).length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between px-[22%] pb-1 text-[10px] font-semibold text-text-secondary", children: [
+          /* @__PURE__ */ jsx("span", { children: tr("fluidgrids.rules.branchTrue", "TRUE") }),
+          /* @__PURE__ */ jsx("span", { children: tr("fluidgrids.rules.branchFalse", "FALSE") })
+        ] })
+      ]
+    }
+  );
+}
+var RuleNodeCard = memo(RuleNodeCardComponent);
+var sequence = 0;
+function newRowKey() {
+  sequence += 1;
+  return `row-${sequence}`;
+}
+function useRowKeys(count) {
+  const [keys, setKeys] = useState(
+    () => Array.from({ length: count }, newRowKey)
+  );
+  let aligned = keys;
+  if (keys.length !== count) {
+    aligned = keys.length < count ? [...keys, ...Array.from({ length: count - keys.length }, newRowKey)] : keys.slice(0, count);
+    setKeys(aligned);
+  }
+  const append = useCallback(
+    () => setKeys((current) => [...current, newRowKey()]),
+    []
+  );
+  const remove = useCallback(
+    (position) => setKeys((current) => current.filter((_, i) => i !== position)),
+    []
+  );
+  return { keys: aligned, append, remove };
+}
+var SELECT_CLASS = "flex h-9 w-full rounded-md border border-input bg-background px-2 text-sm text-text-primary";
+function ValueInput({
+  value,
+  onChange,
+  ariaLabel,
+  placeholder
+}) {
+  const [text, setText] = useState(() => formatValueText(value));
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value: text,
+      "aria-label": ariaLabel,
+      placeholder,
+      onChange: (event) => {
+        setText(event.target.value);
+        onChange(parseValueText(event.target.value));
+      }
+    }
+  );
+}
+function ConditionRow({
+  condition,
+  onChange,
+  onRemove
+}) {
+  const tr = useTr();
+  const unary = UNARY_OPERATORS.has(condition.operator);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-border-secondary p-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: condition.field,
+          "aria-label": tr("fluidgrids.rules.field", "Field"),
+          placeholder: tr(
+            "fluidgrids.rules.fieldPlaceholder",
+            "applicant.creditScore"
+          ),
+          onChange: (event) => onChange({ ...condition, field: event.target.value })
+        }
+      ),
+      onRemove && /* @__PURE__ */ jsx(
+        Button$1,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: onRemove,
+          "aria-label": tr(
+            "fluidgrids.rules.removeCondition",
+            "Remove condition"
+          ),
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[8.5rem_minmax(0,1fr)] gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: SELECT_CLASS,
+          value: condition.operator,
+          "aria-label": tr("fluidgrids.rules.operator", "Operator"),
+          onChange: (event) => {
+            const operator = event.target.value;
+            onChange(
+              UNARY_OPERATORS.has(operator) ? { field: condition.field, operator } : { ...condition, operator, value: condition.value ?? "" }
+            );
+          },
+          children: RULE_OPERATORS.map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: operatorLabel(tr, operator) }, operator))
+        }
+      ),
+      !unary && /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          value: condition.value,
+          ariaLabel: tr("fluidgrids.rules.value", "Value"),
+          placeholder: condition.operator === "BETWEEN" ? "[650, 749]" : condition.operator === "IN" || condition.operator === "NOT_IN" ? '["A", "B"]' : "750",
+          onChange: (value) => onChange({ ...condition, value })
+        }
+      )
+    ] })
+  ] });
+}
+function isPlainObject2(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function JsonField({
+  label,
+  value,
+  onChange,
+  rows = 4,
+  validate
+}) {
+  const [text, setText] = useState(() => JSON.stringify(value ?? {}, null, 2));
+  const [error, setError] = useState(null);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows,
+        className: "font-mono text-xs",
+        value: text,
+        "aria-label": label,
+        onChange: (event) => {
+          setText(event.target.value);
+          const parsed = parseJsonText(event.target.value);
+          if (parsed.ok) {
+            const invalid = validate?.(parsed.value) ?? null;
+            setError(invalid);
+            if (invalid === null) onChange(parsed.value);
+          } else {
+            setError(parsed.error);
+          }
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error", children: error })
+  ] });
+}
+function RuleInspector({
+  node,
+  isStart,
+  readOnly,
+  dataTables,
+  onChange,
+  onDelete,
+  onMakeStart
+}) {
+  const tr = useTr();
+  const { ruleType, config: config2 } = node.data;
+  const setConfig = (next) => onChange({ config: next });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: "flex flex-col gap-3",
+      disabled: readOnly,
+      "aria-label": tr("fluidgrids.rules.blockSettings", "Block settings"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium uppercase tracking-wide text-text-secondary", children: [
+            ruleBlockTypeLabel(tr, ruleType),
+            " \xB7 ",
+            node.id
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onDelete,
+              "aria-label": tr("fluidgrids.rules.deleteBlock", "Delete block"),
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "rule-block-label", children: tr("fluidgrids.rules.label", "Label") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "rule-block-label",
+              value: node.data.label,
+              maxLength: 120,
+              onChange: (event) => onChange({ label: event.target.value })
+            }
+          )
+        ] }),
+        !isStart && /* @__PURE__ */ jsxs(Button$1, { variant: "outline", size: "sm", onClick: onMakeStart, children: [
+          /* @__PURE__ */ jsx(Play, { className: "mr-2 size-4", "aria-hidden": "true" }),
+          tr("fluidgrids.rules.makeStart", "Start evaluation here")
+        ] }),
+        ruleType === "CONDITION" && /* @__PURE__ */ jsx(
+          ConditionRow,
+          {
+            condition: configOf("CONDITION", config2).condition,
+            onChange: (condition) => setConfig({ condition })
+          }
+        ),
+        ruleType === "COMPLEX" && /* @__PURE__ */ jsx(
+          ComplexEditor,
+          {
+            config: configOf("COMPLEX", config2),
+            onChange: setConfig
+          }
+        ),
+        ruleType === "SCORING" && /* @__PURE__ */ jsx(
+          ScoringEditor,
+          {
+            config: configOf("SCORING", config2),
+            onChange: setConfig
+          }
+        ),
+        ruleType === "LOOKUP" && /* @__PURE__ */ jsx(
+          LookupEditor,
+          {
+            config: configOf("LOOKUP", config2),
+            dataTables,
+            onChange: setConfig
+          }
+        ),
+        ruleType === "DECISION" && /* @__PURE__ */ jsx(
+          DecisionEditor,
+          {
+            config: configOf("DECISION", config2),
+            onChange: setConfig
+          },
+          node.id
+        )
+      ]
+    }
+  );
+}
+function ComplexEditor({
+  config: config2,
+  onChange
+}) {
+  const tr = useTr();
+  const rows = useRowKeys(config2.conditions.length);
+  const update = (index, condition) => onChange({
+    ...config2,
+    conditions: config2.conditions.map(
+      (item, i) => i === index ? condition : item
+    )
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "rule-combinator", children: tr("fluidgrids.rules.combinator", "Match") }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: "rule-combinator",
+        className: SELECT_CLASS,
+        value: config2.combinator,
+        onChange: (event) => onChange({
+          ...config2,
+          combinator: event.target.value === "ANY" ? "ANY" : "ALL"
+        }),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "ALL", children: tr("fluidgrids.rules.combinatorAll", "All conditions (AND)") }),
+          /* @__PURE__ */ jsx("option", { value: "ANY", children: tr("fluidgrids.rules.combinatorAny", "Any condition (OR)") })
+        ]
+      }
+    ),
+    config2.conditions.map((condition, position) => /* @__PURE__ */ jsx(
+      ConditionRow,
+      {
+        condition,
+        onChange: (next) => update(position, next),
+        onRemove: () => {
+          rows.remove(position);
+          onChange({
+            ...config2,
+            conditions: config2.conditions.filter((_, i) => i !== position)
+          });
+        }
+      },
+      rows.keys[position]
+    )),
+    /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => {
+          rows.append();
+          onChange({
+            ...config2,
+            conditions: [
+              ...config2.conditions,
+              { field: "", operator: "EQ", value: "" }
+            ]
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+          tr("fluidgrids.rules.addCondition", "Add condition")
+        ]
+      }
+    )
+  ] });
+}
+function ScoringEditor({
+  config: config2,
+  onChange
+}) {
+  const tr = useTr();
+  const rows = useRowKeys(config2.rules.length);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "rule-score-variable", children: tr("fluidgrids.rules.variable", "Variable") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "rule-score-variable",
+            value: config2.variable,
+            onChange: (event) => onChange({ ...config2, variable: event.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "rule-score-base", children: tr("fluidgrids.rules.basePoints", "Base points") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "rule-score-base",
+            type: "number",
+            value: String(config2.base),
+            onChange: (event) => onChange({ ...config2, base: Number(event.target.value) || 0 })
+          }
+        )
+      ] })
+    ] }),
+    config2.rules.map((rule, position) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(
+        ConditionRow,
+        {
+          condition: rule.condition,
+          onChange: (condition) => onChange({
+            ...config2,
+            rules: config2.rules.map(
+              (item, i) => i === position ? { ...item, condition } : item
+            )
+          }),
+          onRemove: () => {
+            rows.remove(position);
+            onChange({
+              ...config2,
+              rules: config2.rules.filter((_, i) => i !== position)
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-2", children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            className: "text-xs",
+            htmlFor: `rule-points-${rows.keys[position]}`,
+            children: tr("fluidgrids.rules.points", "Points")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `rule-points-${rows.keys[position]}`,
+            type: "number",
+            className: "h-8 w-24",
+            value: String(rule.points),
+            onChange: (event) => onChange({
+              ...config2,
+              rules: config2.rules.map(
+                (item, i) => i === position ? { ...item, points: Number(event.target.value) || 0 } : item
+              )
+            })
+          }
+        )
+      ] })
+    ] }, rows.keys[position])),
+    /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => {
+          rows.append();
+          onChange({
+            ...config2,
+            rules: [
+              ...config2.rules,
+              {
+                condition: { field: "", operator: "GTE", value: 0 },
+                points: 10
+              }
+            ]
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+          tr("fluidgrids.rules.addScoringRule", "Add scoring rule")
+        ]
+      }
+    )
+  ] });
+}
+function LookupEditor({
+  config: config2,
+  dataTables,
+  onChange
+}) {
+  const tr = useTr();
+  const source = config2.source;
+  const rows = useRowKeys(source.kind === "INLINE" ? source.entries.length : 0);
+  const selectedTable = source.kind === "DATA_TABLE" ? dataTables.find((table) => table.id === source.tableId) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "rule-lookup-key", children: tr("fluidgrids.rules.lookupKey", "Key field") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "rule-lookup-key",
+          value: config2.key,
+          placeholder: "applicant.employmentType",
+          onChange: (event) => onChange({ ...config2, key: event.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "rule-lookup-variable", children: tr("fluidgrids.rules.variable", "Variable") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "rule-lookup-variable",
+            value: config2.variable,
+            onChange: (event) => onChange({ ...config2, variable: event.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "rule-lookup-default", children: tr("fluidgrids.rules.defaultValue", "Default") }),
+        /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            value: config2.defaultValue,
+            ariaLabel: tr("fluidgrids.rules.defaultValue", "Default"),
+            onChange: (defaultValue) => onChange({ ...config2, defaultValue })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Label, { htmlFor: "rule-lookup-source", children: tr("fluidgrids.rules.lookupSource", "Source") }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: "rule-lookup-source",
+        className: SELECT_CLASS,
+        value: source.kind,
+        onChange: (event) => onChange({
+          ...config2,
+          source: event.target.value === "DATA_TABLE" ? {
+            kind: "DATA_TABLE",
+            tableId: dataTables[0]?.id ?? "",
+            keyColumn: dataTables[0]?.columns[0]?.key ?? "",
+            valueColumn: dataTables[0]?.columns[1]?.key ?? ""
+          } : { kind: "INLINE", entries: [] }
+        }),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "INLINE", children: tr("fluidgrids.rules.sourceInline", "Entries in this block") }),
+          /* @__PURE__ */ jsx("option", { value: "DATA_TABLE", children: tr("fluidgrids.rules.sourceDataTable", "A data table") })
+        ]
+      }
+    ),
+    source.kind === "INLINE" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      source.entries.map((entry, position) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid grid-cols-[1fr_1fr_auto] gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: entry.key,
+                "aria-label": tr("fluidgrids.rules.entryKey", "Key"),
+                onChange: (event) => onChange({
+                  ...config2,
+                  source: {
+                    kind: "INLINE",
+                    entries: source.entries.map(
+                      (item, i) => i === position ? { ...item, key: event.target.value } : item
+                    )
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ValueInput,
+              {
+                value: entry.value,
+                ariaLabel: tr("fluidgrids.rules.entryValue", "Value"),
+                onChange: (value) => onChange({
+                  ...config2,
+                  source: {
+                    kind: "INLINE",
+                    entries: source.entries.map(
+                      (item, i) => i === position ? { ...item, value } : item
+                    )
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button$1,
+              {
+                variant: "ghost",
+                size: "sm",
+                "aria-label": tr("fluidgrids.rules.removeEntry", "Remove entry"),
+                onClick: () => {
+                  rows.remove(position);
+                  onChange({
+                    ...config2,
+                    source: {
+                      kind: "INLINE",
+                      entries: source.entries.filter((_, i) => i !== position)
+                    }
+                  });
+                },
+                children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ]
+        },
+        rows.keys[position]
+      )),
+      /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => {
+            rows.append();
+            onChange({
+              ...config2,
+              source: {
+                kind: "INLINE",
+                entries: [...source.entries, { key: "", value: "" }]
+              }
+            });
+          },
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.rules.addEntry", "Add entry")
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      dataTables.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr(
+        "fluidgrids.rules.noDataTables",
+        "This workspace has no data tables yet. Create one under Data Tables."
+      ) }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: SELECT_CLASS,
+          "aria-label": tr("fluidgrids.rules.dataTable", "Data table"),
+          value: source.tableId,
+          onChange: (event) => {
+            const table = dataTables.find(
+              (item) => item.id === event.target.value
+            );
+            onChange({
+              ...config2,
+              source: {
+                kind: "DATA_TABLE",
+                tableId: event.target.value,
+                keyColumn: table?.columns[0]?.key ?? "",
+                valueColumn: table?.columns[1]?.key ?? ""
+              }
+            });
+          },
+          children: dataTables.map((table) => /* @__PURE__ */ jsx("option", { value: table.id, children: table.name }, table.id))
+        }
+      ),
+      ["keyColumn", "valueColumn"].map((column) => /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: SELECT_CLASS,
+          "aria-label": column === "keyColumn" ? tr("fluidgrids.rules.keyColumn", "Key column") : tr("fluidgrids.rules.valueColumn", "Value column"),
+          value: source[column],
+          onChange: (event) => onChange({
+            ...config2,
+            source: { ...source, [column]: event.target.value }
+          }),
+          children: (selectedTable?.columns ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item.key, children: column === "keyColumn" ? tr("fluidgrids.rules.keyColumnOption", "Key: {{label}}", {
+            label: item.label
+          }) : tr(
+            "fluidgrids.rules.valueColumnOption",
+            "Value: {{label}}",
+            { label: item.label }
+          ) }, item.key))
+        },
+        column
+      ))
+    ] })
+  ] });
+}
+function DecisionEditor({
+  config: config2,
+  onChange
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "rule-outcome", children: tr("fluidgrids.rules.outcome", "Outcome") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "rule-outcome",
+          value: config2.outcome,
+          maxLength: 80,
+          onChange: (event) => onChange({ ...config2, outcome: event.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      JsonField,
+      {
+        label: tr("fluidgrids.rules.output", "Output (JSON object)"),
+        value: config2.output,
+        validate: (output) => isPlainObject2(output) ? null : tr(
+          "fluidgrids.rules.outputMustBeObject",
+          'The output must be a JSON object, for example {"approved": true}.'
+        ),
+        onChange: (output) => {
+          if (isPlainObject2(output)) onChange({ ...config2, output });
+        }
+      }
+    )
+  ] });
+}
+
+// src/modules/rule-builder/lib/content-keys.ts
+function contentKeys(items, keyOf) {
+  const seen = /* @__PURE__ */ new Map();
+  return items.map((item) => {
+    const base = keyOf(item);
+    const count = seen.get(base) ?? 0;
+    seen.set(base, count + 1);
+    return count === 0 ? base : `${base}#${count}`;
+  });
+}
+function formatJson(value) {
+  return value === void 0 ? "null" : JSON.stringify(value);
+}
+function issueKey(issue) {
+  return `${issue.code}:${issue.nodeId ?? ""}:${issue.message}`;
+}
+function conditionKey(condition) {
+  return `${condition.field}:${condition.operator}:${formatJson(condition.expected)}`;
+}
+function TraceConditionList({
+  conditions
+}) {
+  const tr = useTr();
+  const keys = contentKeys(conditions, conditionKey);
+  return /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col gap-0.5", children: conditions.map((condition, position) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-1 text-[11px] text-text-secondary",
+      children: [
+        condition.passed ? /* @__PURE__ */ jsx(
+          CheckCircle2,
+          {
+            className: "size-3 text-status-success",
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsx(XCircle, { className: "size-3 text-status-error", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+          condition.field,
+          " ",
+          operatorLabel(tr, condition.operator),
+          " ",
+          formatJson(condition.expected),
+          " (",
+          formatJson(condition.actual),
+          ")"
+        ] })
+      ]
+    },
+    keys[position]
+  )) });
+}
+function RuleTestPanel({
+  inputText,
+  onInputTextChange,
+  onRun,
+  running,
+  result,
+  onSelectStep
+}) {
+  const tr = useTr();
+  const [error, setError] = useState(null);
+  const issueKeys = contentKeys(result?.issues ?? [], issueKey);
+  const run = () => {
+    const parsed = parseJsonText(inputText);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return;
+    }
+    setError(null);
+    onRun(parsed.value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-testid": "rule-test-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "rule-test-input", children: tr("fluidgrids.rules.sampleInput", "Sample input (JSON)") }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "rule-test-input",
+          rows: 10,
+          className: "font-mono text-xs",
+          value: inputText,
+          onChange: (event) => onInputTextChange(event.target.value)
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs(Button$1, { onClick: run, disabled: running, children: [
+      /* @__PURE__ */ jsx(FlaskConical, { className: "mr-2 size-4", "aria-hidden": "true" }),
+      running ? tr("fluidgrids.rules.testing", "Testing\u2026") : tr("fluidgrids.rules.runTest", "Test rule")
+    ] }),
+    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-testid": "rule-test-result", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border-secondary p-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-text-secondary", children: tr("fluidgrids.rules.decision", "Decision") }),
+        result.status === "DECIDED" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            CheckCircle2,
+            {
+              className: "size-5 text-status-success",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-lg font-semibold text-text-primary",
+              "data-testid": "rule-test-decision",
+              children: result.decision
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-status-warning", children: [
+          /* @__PURE__ */ jsx(CircleSlash, { className: "size-5", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "rule-test-decision", children: result.status === "INVALID" ? tr(
+            "fluidgrids.rules.resultInvalid",
+            "Not evaluated: fix the errors below"
+          ) : tr(
+            "fluidgrids.rules.resultNoDecision",
+            "No decision reached"
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-text-secondary", children: tr(
+          "fluidgrids.rules.evaluatedIn",
+          "{{steps}} steps in {{ms}} ms",
+          { steps: result.trace.length, ms: result.durationMs }
+        ) }),
+        result.output !== null && result.output !== void 0 && /* @__PURE__ */ jsx("pre", { className: "mt-2 overflow-x-auto rounded bg-muted/40 p-2 text-xs text-text-primary", children: JSON.stringify(result.output, null, 2) })
+      ] }),
+      result.issues.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: result.issues.map((issue, position) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: `text-xs ${issue.severity === "ERROR" ? "text-status-error" : "text-status-warning"}`,
+          children: issue.message
+        },
+        issueKeys[position]
+      )) }),
+      result.trace.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-text-secondary", children: tr("fluidgrids.rules.trace", "Evaluation trace") }),
+        /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children: result.trace.map((step) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelectStep(step.nodeId),
+            className: "w-full rounded-md border border-border-secondary p-2 text-left hover:bg-muted/40",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "truncate text-sm font-medium text-text-primary", children: [
+                  step.index + 1,
+                  ". ",
+                  step.label || step.nodeId
+                ] }),
+                /* @__PURE__ */ jsx(Badge, { variant: "outline", children: step.outcome })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-text-secondary", children: ruleBlockTypeLabel(tr, step.nodeType) }),
+              /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-text-secondary", children: step.detail }),
+              step.conditions.length > 1 && /* @__PURE__ */ jsx(TraceConditionList, { conditions: step.conditions })
+            ]
+          }
+        ) }, `${step.index}-${step.nodeId}`)) })
+      ] })
+    ] })
+  ] });
+}
+function RuleSidePanel({
+  panel,
+  onPanelChange,
+  selectedNode,
+  effectiveStart,
+  canEdit,
+  dataTables,
+  onChangeSelected,
+  onDeleteSelected,
+  onMakeStart,
+  issues,
+  onFocusNode,
+  inputText,
+  onInputTextChange,
+  onRunTest,
+  testing,
+  result
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs("aside", { className: "flex max-h-[50vh] shrink-0 flex-col border-t border-border-secondary lg:max-h-none lg:w-96 lg:border-l lg:border-t-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex border-b border-border-secondary", role: "tablist", children: ["block", "test"].map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": panel === tab,
+        onClick: () => onPanelChange(tab),
+        className: `flex-1 px-3 py-2 text-sm font-medium ${panel === tab ? "border-b-2 border-primary text-text-primary" : "text-text-secondary"}`,
+        "data-testid": `rule-tab-${tab}`,
+        children: tab === "block" ? tr("fluidgrids.rules.tabBlock", "Block") : tr("fluidgrids.rules.tabTest", "Test rule")
+      },
+      tab
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children: [
+      panel === "block" && (selectedNode ? /* @__PURE__ */ jsx(
+        RuleInspector,
+        {
+          node: selectedNode,
+          isStart: selectedNode.id === effectiveStart,
+          readOnly: !canEdit,
+          dataTables,
+          onChange: onChangeSelected,
+          onDelete: onDeleteSelected,
+          onMakeStart: () => onMakeStart(selectedNode.id)
+        },
+        selectedNode.id
+      ) : /* @__PURE__ */ jsx(RuleIssueList, { issues, onFocusNode })),
+      panel === "test" && /* @__PURE__ */ jsx(
+        RuleTestPanel,
+        {
+          inputText,
+          onInputTextChange,
+          onRun: onRunTest,
+          running: testing,
+          result,
+          onSelectStep: onFocusNode
+        }
+      )
+    ] })
+  ] });
+}
+var NODE_TYPES = { rule: RuleNodeCard };
+var DEFAULT_EDGE_OPTIONS = {
+  markerEnd: { type: MarkerType.ArrowClosed }
+};
+function useDecoratedGraph(nodes, edges, startNodeId, result) {
+  const effectiveStart = useMemo(
+    () => resolveStartNodeId(fromFlow(nodes, edges, startNodeId)),
+    [nodes, edges, startNodeId]
+  );
+  const displayNodes = useMemo(() => {
+    const steps = /* @__PURE__ */ new Map();
+    for (const step of result?.trace ?? [])
+      steps.set(step.nodeId, step.outcome);
+    return nodes.map((node) => {
+      const isStart = node.id === effectiveStart;
+      const stepOutcome = steps.get(node.id);
+      if (node.data.isStart === isStart && node.data.stepOutcome === stepOutcome)
+        return node;
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          isStart,
+          onPath: stepOutcome !== void 0,
+          stepOutcome
+        }
+      };
+    });
+  }, [nodes, effectiveStart, result]);
+  const displayEdges = useMemo(() => {
+    const path = result?.path ?? [];
+    const onPath = new Set(
+      path.slice(1).map((target, index) => `${path[index]}->${target}`)
+    );
+    const taken = /* @__PURE__ */ new Map();
+    for (const step of result?.trace ?? [])
+      taken.set(step.nodeId, step.outcome);
+    return edges.map((edge) => {
+      const branch = edge.data?.branch ?? branchFromHandle(edge.sourceHandle);
+      const active = onPath.has(`${edge.source}->${edge.target}`) && taken.get(edge.source) === branch;
+      return active === Boolean(edge.animated) ? edge : { ...edge, animated: active };
+    });
+  }, [edges, result]);
+  return { effectiveStart, displayNodes, displayEdges };
+}
+function RuleCanvas({
+  nodes,
+  edges,
+  isEmpty,
+  canEdit,
+  colorMode,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  onDrop,
+  onNodeClick,
+  onNodesDelete,
+  onPaneClick
+}) {
+  const tr = useTr();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative min-h-[360px] flex-1",
+      onDragOver: (event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+      },
+      onDrop,
+      "data-testid": "rule-canvas",
+      children: [
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes: NODE_TYPES,
+            defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+            colorMode,
+            onNodesChange,
+            onEdgesChange,
+            onConnect,
+            onNodeClick: (_event, node) => onNodeClick(node.id),
+            onNodesDelete: (deleted) => onNodesDelete(deleted.map((node) => node.id)),
+            onPaneClick,
+            nodesDraggable: canEdit,
+            nodesConnectable: canEdit,
+            elementsSelectable: true,
+            deleteKeyCode: canEdit ? ["Backspace", "Delete"] : null,
+            fitView: true,
+            fitViewOptions: { padding: 0.2 },
+            proOptions: { hideAttribution: true },
+            children: [
+              /* @__PURE__ */ jsx(Background, { gap: 20 }),
+              /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
+              /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, className: "!hidden md:!block" })
+            ]
+          }
+        ),
+        isEmpty && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-text-secondary", children: tr(
+          "fluidgrids.rules.emptyCanvas",
+          "Add a block from the palette to start building this rule set."
+        ) })
+      ]
+    }
+  );
+}
+function useRuleTestRunner() {
+  const tr = useTr();
+  const { testRuleSet } = useRuleSetMutations();
+  const revision = useRef(0);
+  const [testing, setTesting] = useState(false);
+  const [result, setResult] = useState(null);
+  const invalidate = useCallback(() => {
+    revision.current += 1;
+    setResult(null);
+  }, []);
+  const runTest = useCallback(
+    async (definition, input) => {
+      const submitted = revision.current;
+      setTesting(true);
+      try {
+        const evaluation = await testRuleSet({ definition, input });
+        if (revision.current === submitted) setResult(evaluation);
+      } catch (err) {
+        if (revision.current === submitted) setResult(null);
+        toast.error(
+          err instanceof Error ? err.message : tr("fluidgrids.rules.testFailed", "Failed to test the rule set")
+        );
+      } finally {
+        setTesting(false);
+      }
+    },
+    [testRuleSet, tr]
+  );
+  return { testing, result, invalidate, runTest };
+}
+function useRuleSetSave(initial, onInvalidSample) {
+  const tr = useTr();
+  const { updateRuleSet } = useRuleSetMutations();
+  const editRevision = useRef(0);
+  const [saved, setSaved] = useState({
+    version: initial.version,
+    name: initial.name
+  });
+  const [issues, setIssues] = useState(initial.issues);
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const markDirty = useCallback(() => {
+    editRevision.current += 1;
+    setDirty(true);
+  }, []);
+  const save = useCallback(
+    async (draft) => {
+      const submitted = editRevision.current;
+      if (!draft.name.trim()) {
+        toast.error(
+          tr(
+            "fluidgrids.rules.nameRequired",
+            "Give the rule set a name before saving."
+          )
+        );
+        return;
+      }
+      const sample = parseJsonText(draft.inputText);
+      if (!sample.ok) {
+        onInvalidSample();
+        toast.error(
+          tr(
+            "fluidgrids.rules.sampleInvalid",
+            "Fix the sample input before saving: {{error}}",
+            { error: sample.error }
+          )
+        );
+        return;
+      }
+      setSaving(true);
+      try {
+        const next = await updateRuleSet(initial.id, {
+          name: draft.name.trim(),
+          definition: draft.definition,
+          sampleInput: sample.value,
+          expectedVersion: saved.version
+        });
+        setSaved({ version: next.version, name: next.name });
+        setIssues(next.issues);
+        if (editRevision.current === submitted) setDirty(false);
+        toast.success(tr("fluidgrids.rules.saved", "Rule set saved"));
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : tr("fluidgrids.rules.saveFailed", "Failed to save the rule set")
+        );
+      } finally {
+        setSaving(false);
+      }
+    },
+    [initial.id, onInvalidSample, saved, tr, updateRuleSet]
+  );
+  return { saved, issues, dirty, saving, markDirty, save };
+}
+function RuleEditor({ initial }) {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const { resolvedTheme = "light" } = useTheme();
+  const { screenToFlowPosition, setCenter, getNode } = useReactFlow();
+  const { testing, result, invalidate, runTest } = useRuleTestRunner();
+  const { tables: dataTables } = useDataTables();
+  const { allowed: canEdit } = useFluidGridsPermission(
+    FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE
+  );
+  const [seed] = useState(() => {
+    const definition = readDefinition(initial.definition);
+    return { definition, flow: toFlow(definition) };
+  });
+  const [nodes, setNodes, onNodesChange] = useNodesState(
+    seed.flow.nodes
+  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState(
+    seed.flow.edges
+  );
+  const [startNodeId, setStartNodeId] = useState(
+    seed.definition.startNodeId
+  );
+  const [name, setName] = useState(initial.name);
+  const [inputText, setInputText] = useState(
+    () => JSON.stringify(initial.sampleInput ?? {}, null, 2)
+  );
+  const [selectedId, setSelectedId] = useState(null);
+  const [panel, setPanel] = useState("block");
+  const { saved, issues, dirty, saving, markDirty, save } = useRuleSetSave(
+    initial,
+    () => setPanel("test")
+  );
+  const { effectiveStart, displayNodes, displayEdges } = useDecoratedGraph(
+    nodes,
+    edges,
+    startNodeId,
+    result
+  );
+  const markTestInputDirty = useCallback(() => {
+    markDirty();
+    invalidate();
+  }, [markDirty, invalidate]);
+  const onConnect = useCallback(
+    (connection) => {
+      if (!canConnect(
+        edges,
+        connection.source,
+        connection.target,
+        connection.sourceHandle
+      )) {
+        toast.error(
+          tr(
+            "fluidgrids.rules.connectRefused",
+            "That output is already connected. Remove its connection first."
+          )
+        );
+        return;
+      }
+      const branch = branchFromHandle(connection.sourceHandle);
+      setEdges(
+        (current) => addEdge(
+          toFlowEdge({
+            id: nextEdgeId(current),
+            source: connection.source,
+            target: connection.target,
+            branch
+          }),
+          current
+        )
+      );
+      markTestInputDirty();
+    },
+    [edges, setEdges, markTestInputDirty, tr]
+  );
+  const addBlock = useCallback(
+    (type, position) => {
+      const lowest = nodes.reduce(
+        (max, node) => Math.max(max, node.position.y),
+        -160
+      );
+      const block = createRuleNode(
+        type,
+        position ?? { x: 0, y: lowest + 160 },
+        nodes.map((node) => node.id),
+        ruleBlockTypeLabel(tr, type)
+      );
+      const flowNode = toFlow({ startNodeId: null, nodes: [block], edges: [] }).nodes[0];
+      setNodes((current) => [...current, flowNode]);
+      setSelectedId(block.id);
+      setPanel("block");
+      markTestInputDirty();
+    },
+    [nodes, setNodes, markTestInputDirty, tr]
+  );
+  const onDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      const type = event.dataTransfer.getData(RULE_BLOCK_DRAG_MIME);
+      if (!RULE_NODE_TYPES.includes(type)) return;
+      addBlock(
+        type,
+        screenToFlowPosition({ x: event.clientX, y: event.clientY })
+      );
+    },
+    [addBlock, screenToFlowPosition]
+  );
+  const handleNodesChange = useCallback(
+    (changes) => {
+      onNodesChange(changes);
+      if (changes.some(
+        (change) => change.type !== "select" && change.type !== "dimensions"
+      )) {
+        markTestInputDirty();
+      }
+    },
+    [onNodesChange, markTestInputDirty]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      onEdgesChange(changes);
+      if (changes.some((change) => change.type === "remove"))
+        markTestInputDirty();
+    },
+    [onEdgesChange, markTestInputDirty]
+  );
+  const selectedNode = nodes.find((node) => node.id === selectedId) ?? null;
+  const updateSelected = useCallback(
+    (patch) => {
+      if (!selectedId) return;
+      setNodes(
+        (current) => current.map(
+          (node) => node.id === selectedId ? { ...node, data: { ...node.data, ...patch } } : node
+        )
+      );
+      markTestInputDirty();
+    },
+    [selectedId, setNodes, markTestInputDirty]
+  );
+  const deleteSelected = useCallback(() => {
+    if (!selectedId) return;
+    setNodes((current) => current.filter((node) => node.id !== selectedId));
+    setEdges(
+      (current) => current.filter(
+        (edge) => edge.source !== selectedId && edge.target !== selectedId
+      )
+    );
+    if (startNodeId === selectedId) setStartNodeId(null);
+    setSelectedId(null);
+    markTestInputDirty();
+  }, [selectedId, startNodeId, setNodes, setEdges, markTestInputDirty]);
+  const focusNode = useCallback(
+    (nodeId) => {
+      setSelectedId(nodeId);
+      const node = getNode(nodeId);
+      if (node) {
+        void setCenter(node.position.x + 120, node.position.y + 50, {
+          zoom: 1,
+          duration: 300
+        });
+      }
+    },
+    [getNode, setCenter]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-4rem)] min-h-[560px] flex-col bg-background-primary", children: [
+    /* @__PURE__ */ jsx(
+      RuleBuilderHeader,
+      {
+        version: saved.version,
+        name,
+        dirty,
+        saving,
+        canEdit,
+        issues,
+        onBack: () => navigate("..", { relative: "path" }),
+        onNameChange: (value) => {
+          setName(value);
+          markDirty();
+        },
+        onSave: () => void save({
+          name,
+          definition: fromFlow(nodes, edges, startNodeId),
+          inputText
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [
+      /* @__PURE__ */ jsx(RulePalette, { canEdit, onAdd: (type) => addBlock(type) }),
+      /* @__PURE__ */ jsx(
+        RuleCanvas,
+        {
+          nodes: displayNodes,
+          edges: displayEdges,
+          isEmpty: nodes.length === 0,
+          canEdit,
+          colorMode: resolvedTheme === "dark" ? "dark" : "light",
+          onNodesChange: handleNodesChange,
+          onEdgesChange: handleEdgesChange,
+          onConnect,
+          onDrop,
+          onNodeClick: (nodeId) => {
+            setSelectedId(nodeId);
+            setPanel("block");
+          },
+          onNodesDelete: (deletedIds) => {
+            if (startNodeId && deletedIds.includes(startNodeId)) {
+              setStartNodeId(null);
+            }
+            setSelectedId(null);
+          },
+          onPaneClick: () => setSelectedId(null)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RuleSidePanel,
+        {
+          panel,
+          onPanelChange: setPanel,
+          selectedNode,
+          effectiveStart,
+          canEdit,
+          dataTables,
+          onChangeSelected: updateSelected,
+          onDeleteSelected: deleteSelected,
+          onMakeStart: (nodeId) => {
+            setStartNodeId(nodeId);
+            markTestInputDirty();
+          },
+          issues,
+          onFocusNode: focusNode,
+          inputText,
+          onInputTextChange: (text) => {
+            setInputText(text);
+            markTestInputDirty();
+          },
+          onRunTest: (input) => void runTest(fromFlow(nodes, edges, startNodeId), input),
+          testing,
+          result
+        }
+      )
+    ] })
+  ] });
+}
+function RuleBuilderLoader({ ruleSetId }) {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const { ruleSet, loading, error } = useRuleSet(ruleSetId);
+  if (loading && !ruleSet) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[60vh] items-center justify-center text-text-secondary", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-5 animate-spin", "aria-hidden": "true" }),
+      tr("fluidgrids.rules.loadingRuleSet", "Loading rule set\u2026")
+    ] });
+  }
+  if (!ruleSet) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[60vh] flex-col items-center justify-center gap-3 text-text-secondary", children: [
+      /* @__PURE__ */ jsx("p", { children: error?.message ?? tr("fluidgrids.rules.notFound", "This rule set was not found.") }),
+      /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          variant: "outline",
+          onClick: () => navigate("..", { relative: "path" }),
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.rules.backToRuleSets", "Back to rule sets")
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(RuleEditor, { initial: ruleSet }, ruleSet.id);
+}
+function RuleBuilderPage() {
+  const { ruleSetId } = useParams();
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(RuleBuilderLoader, { ruleSetId: ruleSetId ?? "" }, ruleSetId) });
+}
 
 // src/graphql/client-helpers.ts
 function createFluidGridsClients(config2) {
@@ -5104,7 +7680,7 @@ var NODE_STATUS_CONFIG = {
     bgColor: "bg-bg-sunken"
   }
 };
-var Textarea4 = React3.forwardRef(
+var Textarea7 = React3.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -5119,7 +7695,7 @@ var Textarea4 = React3.forwardRef(
     );
   }
 );
-Textarea4.displayName = "Textarea";
+Textarea7.displayName = "Textarea";
 function Tabs2({
   className,
   ...props
@@ -6125,4 +8701,4 @@ function createFluidGridsAgentTools(deps) {
   ];
 }
 
-export { AiStudioPage, ApprovalInboxPage, Checkbox, DataTablesPage, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, RUN_STATUS_CONFIG, RunnersPage, ScrollArea, ScrollBar, Select3 as Select, SelectContent3 as SelectContent, SelectGroup, SelectItem3 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger3 as SelectTrigger, SelectValue3 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea4 as Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsAgentTools, createFluidGridsClients, csvToRows, parseCsv, pickTriggerNode, rowsToCsv, triggerNodesOf, useCreateDataTable, useCreateVariable, useDataTableRows, useDataTables, useDecideToolApproval, useDeleteDataTable, useDeleteDataTableRows, useDeleteVariable, useInsertDataTableRow, usePendingToolApprovals, useRevealVariableValue, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateDataTable, useUpdateDataTableRow, useUpdateVariable, useVariables };
+export { AiStudioPage, ApprovalInboxPage, Checkbox, DataTablesPage, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, RUN_STATUS_CONFIG, RuleBuilderPage, RuleSetsPage, RunnersPage, ScrollArea, ScrollBar, Select3 as Select, SelectContent3 as SelectContent, SelectGroup, SelectItem3 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger3 as SelectTrigger, SelectValue3 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea7 as Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsAgentTools, createFluidGridsClients, csvToRows, parseCsv, pickTriggerNode, rowsToCsv, triggerNodesOf, useCreateDataTable, useCreateVariable, useDataTableRows, useDataTables, useDecideToolApproval, useDeleteDataTable, useDeleteDataTableRows, useDeleteVariable, useInsertDataTableRow, usePendingToolApprovals, useRevealVariableValue, useRuleSet, useRuleSetMutations, useRuleSetTemplates, useRuleSets, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateDataTable, useUpdateDataTableRow, useUpdateVariable, useVariables };