@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/index.cjs

@@ -1,23 +1,34 @@
 'use strict';
 
 var ui = require('@dhis2/ui');
-var dhis2FormUtilsHooks = require('@nnkogift/dhis2-form-utils-hooks');
-var react = require('react');
-var dhis2FormUtilsMetadata = require('@nnkogift/dhis2-form-utils-metadata');
 var i18n = require('@dhis2/d2-i18n');
 var jsxRuntime = require('react/jsx-runtime');
-var appRuntime = require('@dhis2/app-runtime');
+var react = require('react');
 var react$1 = require('@xyflow/react');
+var dhis2FormUtilsHooks = require('@nnkogift/dhis2-form-utils-hooks');
+var dhis2FormUtilsMetadata = require('@nnkogift/dhis2-form-utils-metadata');
+var appRuntime = require('@dhis2/app-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 
-// src/RulesPanel.tsx
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 
 // src/buildGraph.ts
-var nodeKey = (kind, id) => `${kind}:${id}`;
-var edgeKey = (source, ruleId, target, effectType) => `${source}|${ruleId}|${target}|${effectType ?? ""}`;
 function accumulateGraph(previous, entry, labelLookup) {
   const nodes = new Map(previous.nodes.map((node) => [node.id, node]));
   const edges = new Map(previous.edges.map((edge) => [edge.id, edge]));
@@ -79,167 +90,13 @@ function buildGraphFromTrace(entries, labelLookup) {
     { nodes: [], edges: [] }
   );
 }
-var createLookup = (rules, fields, sections, stages) => ({
-  resolveRuleName: (id) => rules.get(id) ?? id,
-  resolveFieldName: (id) => fields.get(id) ?? id,
-  resolveSectionName: (id) => sections.get(id) ?? id,
-  resolveStageName: (id) => stages.get(id) ?? id
-});
-function buildEventLookup(source) {
-  const rules = /* @__PURE__ */ new Map();
-  const fields = /* @__PURE__ */ new Map();
-  const sections = /* @__PURE__ */ new Map();
-  const stages = /* @__PURE__ */ new Map();
-  for (const rule of source.metadata.programRules) {
-    if (!rule.id) {
-      continue;
-    }
-    rules.set(rule.id, rule.displayName ?? rule.id);
-  }
-  const stage = dhis2FormUtilsMetadata.selectProgramStage(
-    source.metadata,
-    source.programStageId
-  ) ?? {
-    id: source.programStageId,
-    programStageDataElements: [],
-    programStageSections: []
-  };
-  for (const psde of stage.programStageDataElements ?? []) {
-    const de = psde.dataElement;
-    if (!de?.id) {
-      continue;
-    }
-    fields.set(de.id, de.displayFormName ?? de.displayName ?? de.id);
-  }
-  for (const section of stage.programStageSections ?? []) {
-    sections.set(section.id, section.displayName ?? section.id);
-  }
-  for (const programStage of source.metadata.programStages) {
-    if (!programStage.id) {
-      continue;
-    }
-    stages.set(programStage.id, programStage.displayName ?? programStage.id);
-  }
-  return createLookup(rules, fields, sections, stages);
-}
-function buildTrackerLookup(source) {
-  const rules = /* @__PURE__ */ new Map();
-  const fields = /* @__PURE__ */ new Map();
-  const sections = /* @__PURE__ */ new Map();
-  const stages = /* @__PURE__ */ new Map();
-  for (const rule of source.metadata.programRules) {
-    if (!rule.id) {
-      continue;
-    }
-    rules.set(rule.id, rule.name ?? rule.id);
-  }
-  for (const ptea of source.metadata.programTrackedEntityAttributes) {
-    const tea = ptea.trackedEntityAttribute;
-    if (!tea.id) {
-      continue;
-    }
-    fields.set(tea.id, tea.formName ?? tea.displayName ?? tea.id);
-  }
-  for (const section of source.metadata.programSections ?? []) {
-    sections.set(section.id, section.displayName ?? section.id);
-  }
-  for (const programStage of source.programStages ?? []) {
-    if (!programStage.id) {
-      continue;
-    }
-    stages.set(programStage.id, programStage.displayName ?? programStage.id);
-  }
-  return createLookup(rules, fields, sections, stages);
-}
-function createLabelLookup(source) {
-  return source.formKind === "event" ? buildEventLookup(source) : buildTrackerLookup(source);
-}
-var EFFECT_VARIANT = {
-  HIDEFIELD: "hide",
-  HIDEOPTION: "hide",
-  HIDEOPTIONGROUP: "hide",
-  HIDESECTION: "hide",
-  HIDEPROGRAMSTAGE: "hide",
-  SHOWFIELD: "show",
-  SHOWOPTION: "show",
-  SHOWOPTIONGROUP: "show",
-  ASSIGN: "assign",
-  SETMANDATORYFIELD: "mandatory",
-  UNSETMANDATORYFIELD: "mandatory",
-  SHOWWARNING: "warning",
-  WARNINGONCOMPLETE: "warning",
-  SHOWERROR: "error",
-  ERRORONCOMPLETE: "error",
-  DISPLAYTEXT: "feedback",
-  DISPLAYKEYVALUEPAIR: "feedback",
-  SENDMESSAGE: "message",
-  SCHEDULEMESSAGE: "message",
-  read: "read"
-};
-var EFFECT_VISUALS = {
-  hide: {
-    tagClassName: "bg-dhis2-grey-200 text-dhis2-grey-900",
-    edgeStroke: "#494949",
-    shortLabel: "hide"
-  },
-  show: {
-    tagClassName: "bg-dhis2-green-100 text-dhis2-green-900",
-    edgeStroke: "#388e3c",
-    shortLabel: "show"
-  },
-  assign: {
-    tagClassName: "bg-dhis2-blue-100 text-dhis2-blue-900",
-    edgeStroke: "#1565c0",
-    shortLabel: "assign"
-  },
-  mandatory: {
-    tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
-    edgeStroke: "#e56408",
-    shortLabel: "required"
-  },
-  warning: {
-    tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
-    edgeStroke: "#ff8302",
-    shortLabel: "warn"
-  },
-  error: {
-    tagClassName: "bg-dhis2-red-100 text-dhis2-red-900",
-    edgeStroke: "#c62828",
-    shortLabel: "error"
-  },
-  feedback: {
-    tagClassName: "bg-dhis2-purple-100 text-dhis2-purple-900",
-    edgeStroke: "#9c27b0",
-    shortLabel: "feedback"
-  },
-  message: {
-    tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
-    edgeStroke: "#00796b",
-    shortLabel: "message"
-  },
-  read: {
-    tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
-    edgeStroke: "#00796b",
-    shortLabel: "read"
-  },
-  default: {
-    tagClassName: "bg-dhis2-grey-100 text-dhis2-grey-800",
-    edgeStroke: "#494949",
-    shortLabel: "effect"
+var nodeKey, edgeKey;
+var init_buildGraph = __esm({
+  "src/buildGraph.ts"() {
+    nodeKey = (kind, id) => `${kind}:${id}`;
+    edgeKey = (source, ruleId, target, effectType) => `${source}|${ruleId}|${target}|${effectType ?? ""}`;
   }
-};
-var EFFECT_ICONS = {
-  hide: ui.IconViewOff16,
-  show: ui.IconView16,
-  assign: ui.IconEdit16,
-  mandatory: ui.IconStarFilled16,
-  warning: ui.IconWarningFilled16,
-  error: ui.IconErrorFilled16,
-  feedback: ui.IconMessages16,
-  message: ui.IconMail16,
-  read: ui.IconLink16,
-  default: ui.IconInfo16
-};
+});
 function getEffectVariant(type) {
   return EFFECT_VARIANT[type] ?? "default";
 }
@@ -247,7 +104,6 @@ function getEffectVisual(type) {
   const variant = getEffectVariant(type);
   return { variant, ...EFFECT_VISUALS[variant] };
 }
-var TAG_LAYOUT_CLASS = "max-w-full break-words";
 function tagPropsForVariant(variant) {
   switch (variant) {
     case "show":
@@ -287,12 +143,108 @@ function getEffectEdgeStroke(type, highlighted = true) {
 function getEffectShortLabel(type) {
   return getEffectVisual(type).shortLabel;
 }
+var EFFECT_VARIANT, EFFECT_VISUALS; exports.EFFECT_ICONS = void 0; var TAG_LAYOUT_CLASS;
+var init_effectStyles = __esm({
+  "src/effectStyles.ts"() {
+    EFFECT_VARIANT = {
+      HIDEFIELD: "hide",
+      HIDEOPTION: "hide",
+      HIDEOPTIONGROUP: "hide",
+      HIDESECTION: "hide",
+      HIDEPROGRAMSTAGE: "hide",
+      SHOWFIELD: "show",
+      SHOWOPTION: "show",
+      SHOWOPTIONGROUP: "show",
+      ASSIGN: "assign",
+      SETMANDATORYFIELD: "mandatory",
+      UNSETMANDATORYFIELD: "mandatory",
+      SHOWWARNING: "warning",
+      WARNINGONCOMPLETE: "warning",
+      SHOWERROR: "error",
+      ERRORONCOMPLETE: "error",
+      DISPLAYTEXT: "feedback",
+      DISPLAYKEYVALUEPAIR: "feedback",
+      SENDMESSAGE: "message",
+      SCHEDULEMESSAGE: "message",
+      read: "read"
+    };
+    EFFECT_VISUALS = {
+      hide: {
+        tagClassName: "bg-dhis2-grey-200 text-dhis2-grey-900",
+        edgeStroke: "#494949",
+        shortLabel: "hide"
+      },
+      show: {
+        tagClassName: "bg-dhis2-green-100 text-dhis2-green-900",
+        edgeStroke: "#388e3c",
+        shortLabel: "show"
+      },
+      assign: {
+        tagClassName: "bg-dhis2-blue-100 text-dhis2-blue-900",
+        edgeStroke: "#1565c0",
+        shortLabel: "assign"
+      },
+      mandatory: {
+        tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
+        edgeStroke: "#e56408",
+        shortLabel: "required"
+      },
+      warning: {
+        tagClassName: "bg-dhis2-yellow-100 text-dhis2-yellow-900",
+        edgeStroke: "#ff8302",
+        shortLabel: "warn"
+      },
+      error: {
+        tagClassName: "bg-dhis2-red-100 text-dhis2-red-900",
+        edgeStroke: "#c62828",
+        shortLabel: "error"
+      },
+      feedback: {
+        tagClassName: "bg-dhis2-purple-100 text-dhis2-purple-900",
+        edgeStroke: "#9c27b0",
+        shortLabel: "feedback"
+      },
+      message: {
+        tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
+        edgeStroke: "#00796b",
+        shortLabel: "message"
+      },
+      read: {
+        tagClassName: "bg-dhis2-teal-100 text-dhis2-teal-900",
+        edgeStroke: "#00796b",
+        shortLabel: "read"
+      },
+      default: {
+        tagClassName: "bg-dhis2-grey-100 text-dhis2-grey-800",
+        edgeStroke: "#494949",
+        shortLabel: "effect"
+      }
+    };
+    exports.EFFECT_ICONS = {
+      hide: ui.IconViewOff16,
+      show: ui.IconView16,
+      assign: ui.IconEdit16,
+      mandatory: ui.IconStarFilled16,
+      warning: ui.IconWarningFilled16,
+      error: ui.IconErrorFilled16,
+      feedback: ui.IconMessages16,
+      message: ui.IconMail16,
+      read: ui.IconLink16,
+      default: ui.IconInfo16
+    };
+    TAG_LAYOUT_CLASS = "max-w-full break-words";
+  }
+});
 function translate(message, variables) {
   return String(i18n__default.default.t(message, variables));
 }
+var init_i18n = __esm({
+  "src/i18n.ts"() {
+  }
+});
 function EffectBadge({ type, children, className = "" }) {
   const variant = getEffectVariant(type);
-  const Icon = EFFECT_ICONS[variant];
+  const Icon = exports.EFFECT_ICONS[variant];
   const tagProps = getEffectTagRenderProps(type);
   const label = children ?? type;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -306,23 +258,13 @@ function EffectBadge({ type, children, className = "" }) {
     }
   );
 }
-var LEGEND_VARIANTS = [
-  { variant: "read", label: translate("Read") },
-  { variant: "hide", label: translate("Hide") },
-  { variant: "show", label: translate("Show") },
-  { variant: "assign", label: translate("Assign") },
-  { variant: "mandatory", label: translate("Required") },
-  { variant: "warning", label: translate("Warning") },
-  { variant: "error", label: translate("Error") },
-  { variant: "feedback", label: translate("Feedback") }
-];
 function EffectLegend({ activeVariants }) {
   const items = LEGEND_VARIANTS.filter((item) => activeVariants.has(item.variant));
   if (!items.length) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-dp8 border-t border-dhis2-grey-200 px-dp12 py-dp8", children: items.map((item) => {
-    const Icon = EFFECT_ICONS[item.variant];
+    const Icon = exports.EFFECT_ICONS[item.variant];
     const tagProps = getEffectTagRenderPropsForVariant(item.variant);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Tag,
@@ -336,115 +278,846 @@ function EffectLegend({ activeVariants }) {
     );
   }) });
 }
-
-// src/formatAgo.ts
-function formatAgo(timestamp, now = Date.now()) {
-  const diffMs = Math.max(0, now - timestamp);
-  if (diffMs < 5e3) {
-    return translate("just now");
-  }
-  const seconds = Math.floor(diffMs / 1e3);
-  if (seconds < 60) {
-    return translate("{{seconds}}s ago", { seconds });
+var LEGEND_VARIANTS;
+var init_EffectBadge = __esm({
+  "src/EffectBadge.tsx"() {
+    init_effectStyles();
+    init_i18n();
+    LEGEND_VARIANTS = [
+      { variant: "read", label: translate("Read") },
+      { variant: "hide", label: translate("Hide") },
+      { variant: "show", label: translate("Show") },
+      { variant: "assign", label: translate("Assign") },
+      { variant: "mandatory", label: translate("Required") },
+      { variant: "warning", label: translate("Warning") },
+      { variant: "error", label: translate("Error") },
+      { variant: "feedback", label: translate("Feedback") }
+    ];
   }
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) {
-    return translate("{{minutes}}m ago", { minutes });
+});
+
+// src/traceEntry.ts
+function resolveGraphTraceEntry(entries, selectedEntryId) {
+  if (!entries.length) {
+    return null;
   }
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) {
-    return translate("{{hours}}h ago", { hours });
+  if (selectedEntryId) {
+    return entries.find((entry) => entry.id === selectedEntryId) ?? entries[entries.length - 1];
   }
-  return new Date(timestamp).toLocaleString();
+  return entries[entries.length - 1];
 }
-
-// src/formatRuleActionSummary.ts
-function resolveFieldLabel(id, displayName, labelLookup) {
-  if (labelLookup) {
-    const resolved = labelLookup.resolveFieldName(id);
-    if (resolved !== id) {
-      return resolved;
-    }
+function getActiveRuleIds(entries) {
+  const latest = resolveGraphTraceEntry(entries);
+  if (!latest) {
+    return /* @__PURE__ */ new Set();
   }
-  return displayName ?? id;
+  return new Set(latest.ruleResults.map((result) => result.ruleId));
 }
-function resolveSectionLabel(id, displayName, labelLookup) {
-  if (labelLookup) {
-    const resolved = labelLookup.resolveSectionName(id);
-    if (resolved !== id) {
-      return resolved;
-    }
+var init_traceEntry = __esm({
+  "src/traceEntry.ts"() {
   }
-  return displayName ?? id;
+});
+
+// src/graphLayout.ts
+function median(values) {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
 }
-function formatRuleActionSummary(action, labelLookup) {
-  const type = action.programRuleActionType ?? "UNKNOWN";
-  let targetLabel = "";
-  if (action.dataElement?.id) {
-    targetLabel = resolveFieldLabel(
-      action.dataElement.id,
-      action.dataElement.displayName,
-      labelLookup
-    );
-  } else if (action.trackedEntityAttribute?.id) {
-    targetLabel = resolveFieldLabel(
-      action.trackedEntityAttribute.id,
-      action.trackedEntityAttribute.displayName,
-      labelLookup
-    );
-  } else if (action.programStageSection?.id) {
-    targetLabel = resolveSectionLabel(
-      action.programStageSection.id,
-      action.programStageSection.displayName,
-      labelLookup
-    );
-  } else if (action.programSection?.id) {
-    targetLabel = resolveSectionLabel(
-      action.programSection.id,
-      action.programSection.displayName,
-      labelLookup
-    );
-  } else if (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR") {
-    targetLabel = action.location ?? "feedback";
-  }
-  let detail;
-  if (action.data) {
-    detail = action.data;
-  }
-  if (action.content && (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR")) {
-    detail = action.content;
+function staggerOffset(indexInBucket) {
+  if (indexInBucket === 0) {
+    return 0;
   }
-  return { type, targetLabel, detail };
-}
-
-// src/resolveProgramRulesList.ts
-function sortByPriority(rules) {
-  return [...rules].sort((left, right) => (left.priority ?? 0) - (right.priority ?? 0));
+  const magnitude = Math.ceil(indexInBucket / 2) * STAGGER;
+  return indexInBucket % 2 === 1 ? magnitude : -magnitude;
 }
-function toCatalogRule(rule) {
-  return {
-    id: rule.id,
-    name: rule.name,
-    condition: rule.condition,
-    priority: rule.priority,
-    programRuleActions: [...rule.programRuleActions ?? []],
-    programStageId: rule.programStageId
-  };
+function columnFor(node) {
+  if (node.role === "target" && node.kind === "feedback") {
+    return FEEDBACK_COLUMN;
+  }
+  return ROLE_COLUMNS[node.role];
 }
-function resolveProgramRulesList(metadata) {
-  if (metadata.formKind === "event") {
-    return sortByPriority(
-      metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
-        (rule) => toCatalogRule({
-          id: rule.id,
-          name: rule.displayName ?? rule.id,
-          condition: rule.condition,
-          priority: rule.priority,
-          programRuleActions: rule.programRuleActions,
-          programStageId: rule.programStage?.id ?? null
-        })
-      )
-    );
+function prepareFlowGraph(graph) {
+  const readSources = /* @__PURE__ */ new Set();
+  const effectTargets = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    if (edge.effectType === "read") {
+      readSources.add(edge.source);
+    } else {
+      effectTargets.add(edge.target);
+    }
+  }
+  const flowNodes = [];
+  const endpointByGraphId = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (node.kind === "rule") {
+      flowNodes.push({
+        id: node.id,
+        graphNodeId: node.id,
+        kind: node.kind,
+        label: node.label,
+        role: "rule"
+      });
+      continue;
+    }
+    const isSource = readSources.has(node.id);
+    const isTarget = effectTargets.has(node.id);
+    const endpoints = {};
+    if (isSource) {
+      const flowId = isTarget ? `${node.id}@src` : node.id;
+      endpoints.source = flowId;
+      flowNodes.push({
+        id: flowId,
+        graphNodeId: node.id,
+        kind: node.kind,
+        label: node.label,
+        role: "source"
+      });
+    }
+    if (isTarget) {
+      const flowId = isSource ? `${node.id}@tgt` : node.id;
+      endpoints.target = flowId;
+      flowNodes.push({
+        id: flowId,
+        graphNodeId: node.id,
+        kind: node.kind,
+        label: node.label,
+        role: "target"
+      });
+    }
+    endpointByGraphId.set(node.id, endpoints);
+  }
+  const flowEdges = graph.edges.map((edge) => {
+    if (edge.effectType === "read") {
+      const endpoints2 = endpointByGraphId.get(edge.source);
+      return { ...edge, source: endpoints2?.source ?? edge.source };
+    }
+    const endpoints = endpointByGraphId.get(edge.target);
+    return { ...edge, target: endpoints?.target ?? edge.target };
+  });
+  return { nodes: flowNodes, edges: flowEdges };
+}
+function computeGraphLayout(flowNodes, flowEdges) {
+  const positions = /* @__PURE__ */ new Map();
+  const ruleLane = /* @__PURE__ */ new Map();
+  flowNodes.filter((node) => node.role === "rule").forEach((node, index) => {
+    ruleLane.set(node.id, index);
+    positions.set(node.id, { x: ROLE_COLUMNS.rule, y: index * LANE_HEIGHT });
+  });
+  const connectedRuleLanes = /* @__PURE__ */ new Map();
+  const addLane = (nodeId, lane) => {
+    const lanes = connectedRuleLanes.get(nodeId) ?? /* @__PURE__ */ new Set();
+    lanes.add(lane);
+    connectedRuleLanes.set(nodeId, lanes);
+  };
+  for (const edge of flowEdges) {
+    const sourceLane = ruleLane.get(edge.source);
+    const targetLane = ruleLane.get(edge.target);
+    if (targetLane !== void 0 && sourceLane === void 0) {
+      addLane(edge.source, targetLane);
+    }
+    if (sourceLane !== void 0 && targetLane === void 0) {
+      addLane(edge.target, sourceLane);
+    }
+  }
+  const bucketCounts = /* @__PURE__ */ new Map();
+  for (const node of flowNodes) {
+    if (node.role === "rule") {
+      continue;
+    }
+    const lanes = connectedRuleLanes.get(node.id);
+    const lane = lanes && lanes.size > 0 ? median([...lanes]) : 0;
+    const column = columnFor(node);
+    const bucketKey = `${String(column)}:${String(lane)}`;
+    const indexInBucket = bucketCounts.get(bucketKey) ?? 0;
+    bucketCounts.set(bucketKey, indexInBucket + 1);
+    positions.set(node.id, {
+      x: column,
+      y: lane * LANE_HEIGHT + staggerOffset(indexInBucket)
+    });
+  }
+  return positions;
+}
+var ROLE_COLUMNS, FEEDBACK_COLUMN, LANE_HEIGHT, STAGGER;
+var init_graphLayout = __esm({
+  "src/graphLayout.ts"() {
+    ROLE_COLUMNS = {
+      source: 0,
+      rule: 280,
+      target: 560
+    };
+    FEEDBACK_COLUMN = 720;
+    LANE_HEIGHT = 104;
+    STAGGER = 24;
+    ({
+      field: ROLE_COLUMNS.source,
+      rule: ROLE_COLUMNS.rule,
+      section: ROLE_COLUMNS.target,
+      feedback: FEEDBACK_COLUMN
+    });
+  }
+});
+
+// src/graphNodeStyles.ts
+function getGraphNodeClassName(kind, highlighted) {
+  return `p-dp8 rounded border bg-white min-w-28 max-w-[180px] text-xs shadow-[0_1px_2px_rgb(0_0_0/6%)] transition-opacity duration-150 ease-out cursor-grab active:cursor-grabbing ${GRAPH_NODE_CLASSES[kind]} ${highlighted ? "" : "opacity-35"}`;
+}
+function getLegendSwatchClassName(kind) {
+  return `size-2.5 shrink-0 rounded-sm ${LEGEND_SWATCH_CLASSES[kind]}`;
+}
+var GRAPH_NODE_CLASSES, LEGEND_SWATCH_CLASSES;
+var init_graphNodeStyles = __esm({
+  "src/graphNodeStyles.ts"() {
+    GRAPH_NODE_CLASSES = {
+      field: "border-dhis2-blue-500",
+      rule: "border-dhis2-teal-600 bg-dhis2-teal-050",
+      section: "border-dhis2-grey-600",
+      feedback: "border-dhis2-purple-500"
+    };
+    LEGEND_SWATCH_CLASSES = {
+      field: "bg-dhis2-blue-500",
+      rule: "bg-dhis2-teal-600",
+      section: "bg-dhis2-grey-600",
+      feedback: "bg-dhis2-purple-500"
+    };
+  }
+});
+
+// src/RuleGraphView.tsx
+var RuleGraphView_exports = {};
+__export(RuleGraphView_exports, {
+  RuleGraphView: () => RuleGraphView,
+  toFlowGraph: () => toFlowGraph
+});
+function RuleGraphNode({ data }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getGraphNodeClassName(data.kind, data.highlighted), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-dp4 block text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-dhis2-grey-600", children: KIND_LABELS[data.kind] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words font-semibold leading-[1.3]", children: data.label }),
+    data.value !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-dp4 border-t border-dhis2-grey-200 pt-dp4 font-mono text-[0.6875rem] break-all text-dhis2-grey-700", children: data.value }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right })
+  ] });
+}
+function RuleGraphEdge({
+  id,
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+  markerEnd,
+  style,
+  data
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  const [edgePath, labelX, labelY] = react$1.getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    offset: data?.offset ?? 20
+  });
+  const showLabel = data ? data.showLabel || hovered : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.BaseEdge, { id, path: edgePath, markerEnd, style }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 16,
+        onMouseEnter: () => {
+          setHovered(true);
+        },
+        onMouseLeave: () => {
+          setHovered(false);
+        }
+      }
+    ),
+    showLabel && data ? /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "nodrag nopan absolute rounded-sm px-dp4 text-[10px] font-semibold",
+        style: {
+          transform: `translate(-50%, -50%) translate(${String(labelX)}px, ${String(labelY)}px)`,
+          background: "rgba(255,255,255,0.92)",
+          color: data.stroke,
+          pointerEvents: "all"
+        },
+        onMouseEnter: () => {
+          setHovered(true);
+        },
+        onMouseLeave: () => {
+          setHovered(false);
+        },
+        children: data.label
+      }
+    ) }) : null
+  ] });
+}
+function effectNodeKey(effect) {
+  const kind = effect.type === "HIDESECTION" ? "section" : effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR" ? "feedback" : "field";
+  return `${kind}:${effect.targetId}`;
+}
+function entryGraphKeys(entry) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const fieldId of entry.changedFields) {
+    keys.add(`field:${fieldId}`);
+  }
+  for (const result of entry.ruleResults) {
+    keys.add(`rule:${result.ruleId}`);
+    for (const effect of result.effects) {
+      keys.add(effectNodeKey(effect));
+    }
+  }
+  return keys;
+}
+function ruleGraphKeys(entry, ruleId) {
+  const keys = /* @__PURE__ */ new Set([`rule:${ruleId}`]);
+  for (const result of entry.ruleResults) {
+    if (result.ruleId !== ruleId) {
+      continue;
+    }
+    for (const effect of result.effects) {
+      keys.add(effectNodeKey(effect));
+    }
+  }
+  return keys;
+}
+function toFlowGraph(graph, fieldState, formValues, highlightedKeys) {
+  const { nodes: flowNodes, edges: flowEdges } = prepareFlowGraph(graph);
+  const positions = computeGraphLayout(flowNodes, flowEdges);
+  const graphNodeIdByFlowId = new Map(flowNodes.map((node) => [node.id, node.graphNodeId]));
+  const nodes = flowNodes.map((node) => {
+    const position = positions.get(node.id) ?? { x: 0, y: 0 };
+    const rawFieldId = node.kind === "field" ? node.graphNodeId.slice("field:".length) : void 0;
+    const assignedValue = rawFieldId && rawFieldId in fieldState ? fieldState[rawFieldId].assignedValue : void 0;
+    const formValue = rawFieldId ? formValues[rawFieldId] : void 0;
+    const displayValue = formatDisplayValue(assignedValue) ?? formatDisplayValue(formValue);
+    return {
+      id: node.id,
+      type: "ruleGraphNode",
+      position,
+      data: {
+        label: node.label,
+        kind: node.kind,
+        graphNodeId: node.graphNodeId,
+        value: displayValue,
+        highlighted: highlightedKeys ? highlightedKeys.has(node.graphNodeId) : true
+      }
+    };
+  });
+  const dense = flowEdges.length > READ_LABEL_EDGE_THRESHOLD;
+  const sourceFanOut = /* @__PURE__ */ new Map();
+  const edges = flowEdges.map((edge) => {
+    const sourceGraphId = graphNodeIdByFlowId.get(edge.source) ?? edge.source;
+    const targetGraphId = graphNodeIdByFlowId.get(edge.target) ?? edge.target;
+    const isHighlighted = highlightedKeys ? highlightedKeys.has(sourceGraphId) && highlightedKeys.has(targetGraphId) : true;
+    const effectType = edge.effectType ?? "default";
+    const isRead = effectType === "read";
+    const stroke = getEffectEdgeStroke(effectType, isHighlighted);
+    const label = getEffectShortLabel(effectType);
+    const showLabel = !(isRead && dense);
+    const fanIndex = sourceFanOut.get(edge.source) ?? 0;
+    sourceFanOut.set(edge.source, fanIndex + 1);
+    const offset = 20 + fanIndex * 14;
+    return {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: "ruleGraphEdge",
+      animated: isHighlighted && !isRead,
+      zIndex: isHighlighted ? 1 : 0,
+      style: {
+        stroke,
+        strokeWidth: isRead ? 1 : Math.min(1 + edge.fireCount, 4),
+        opacity: isHighlighted ? isRead ? 0.5 : 1 : 0.35
+      },
+      markerEnd: {
+        type: react$1.MarkerType.ArrowClosed,
+        color: stroke
+      },
+      data: {
+        label,
+        stroke,
+        showLabel,
+        offset
+      }
+    };
+  });
+  return { nodes, edges };
+}
+function GraphToolbar({
+  nodeCount,
+  edgeCount,
+  headerActions,
+  activeEffectVariants
+}) {
+  const items = [
+    { kind: "field", label: translate("Field") },
+    { kind: "rule", label: translate("Rule") },
+    { kind: "section", label: translate("Section") },
+    { kind: "feedback", label: translate("Feedback") }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8",
+          "aria-hidden": "true",
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: getLegendSwatchClassName(item.kind) }),
+                item.label
+              ]
+            },
+            item.kind
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
+          nodes: nodeCount,
+          edges: edgeCount
+        }) }),
+        headerActions
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(EffectLegend, { activeVariants: activeEffectVariants })
+  ] });
+}
+function FitViewOnChange({
+  layoutKey,
+  nodeCount,
+  edgeCount
+}) {
+  const { fitView } = react$1.useReactFlow();
+  react.useEffect(() => {
+    const frameId = requestAnimationFrame(() => {
+      void fitView({ padding: 0.2, duration: 150 });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [edgeCount, fitView, layoutKey, nodeCount]);
+  return null;
+}
+function mergeNodePositions(next, current) {
+  const currentById = new Map(current.map((node) => [node.id, node]));
+  return next.map((node) => {
+    const existing = currentById.get(node.id);
+    if (existing) {
+      return { ...node, position: existing.position };
+    }
+    return node;
+  });
+}
+function RuleGraphCanvas({
+  nodes: layoutNodes,
+  edges: layoutEdges,
+  layoutKey
+}) {
+  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(layoutEdges);
+  react.useEffect(() => {
+    setNodes((current) => mergeNodePositions(layoutNodes, current));
+  }, [layoutNodes, setNodes]);
+  react.useEffect(() => {
+    setEdges(layoutEdges);
+  }, [layoutEdges, setEdges]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      onNodesChange,
+      onEdgesChange,
+      nodesDraggable: true,
+      defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+      elevateEdgesOnSelect: true,
+      fitView: true,
+      proOptions: { hideAttribution: true },
+      className: "h-full w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FitViewOnChange,
+          {
+            layoutKey,
+            nodeCount: nodes.length,
+            edgeCount: edges.length
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 16, size: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false })
+      ]
+    }
+  );
+}
+function RuleGraphView({
+  entries,
+  fieldState,
+  formValues,
+  selectedEntryId,
+  highlightRuleId,
+  labelLookup,
+  className,
+  layoutKey,
+  headerActions,
+  minHeightClassName = "min-h-[360px]"
+}) {
+  const graphEntry = react.useMemo(
+    () => resolveGraphTraceEntry(entries, selectedEntryId),
+    [entries, selectedEntryId]
+  );
+  const graph = react.useMemo(
+    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
+    [graphEntry, labelLookup]
+  );
+  const highlightedKeys = react.useMemo(() => {
+    if (!graphEntry || !selectedEntryId && !highlightRuleId) {
+      return null;
+    }
+    const keys = /* @__PURE__ */ new Set();
+    if (selectedEntryId) {
+      for (const key of entryGraphKeys(graphEntry)) {
+        keys.add(key);
+      }
+    }
+    if (highlightRuleId) {
+      for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {
+        keys.add(key);
+      }
+    }
+    return keys;
+  }, [graphEntry, highlightRuleId, selectedEntryId]);
+  const { nodes, edges } = react.useMemo(
+    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
+    [graph, fieldState, formValues, highlightedKeys]
+  );
+  const activeEffectVariants = react.useMemo(() => {
+    const variants = /* @__PURE__ */ new Set();
+    for (const edge of graph.edges) {
+      if (edge.effectType) {
+        variants.add(getEffectVariant(edge.effectType));
+      }
+    }
+    return variants;
+  }, [graph.edges]);
+  if (!graph.nodes.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.NoticeBox, { title: translate("No rule relationships yet"), children: translate(
+      "Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field \u2192 Rule \u2192 Target (read / effect)."
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GraphToolbar,
+          {
+            nodeCount: graph.nodes.length,
+            edgeCount: graph.edges.length,
+            headerActions,
+            activeEffectVariants
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${minHeightClassName} flex-1 bg-white`,
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var KIND_LABELS, READ_LABEL_EDGE_THRESHOLD, DEFAULT_EDGE_OPTIONS, nodeTypes, edgeTypes, formatDisplayValue;
+var init_RuleGraphView = __esm({
+  "src/RuleGraphView.tsx"() {
+    init_buildGraph();
+    init_graphLayout();
+    init_EffectBadge();
+    init_effectStyles();
+    init_graphNodeStyles();
+    init_i18n();
+    init_traceEntry();
+    KIND_LABELS = {
+      field: "Field",
+      rule: "Rule",
+      section: "Section",
+      feedback: "Feedback"
+    };
+    READ_LABEL_EDGE_THRESHOLD = 4;
+    DEFAULT_EDGE_OPTIONS = {
+      type: "ruleGraphEdge",
+      style: { stroke: getEffectEdgeStroke("default") },
+      markerEnd: {
+        type: react$1.MarkerType.ArrowClosed,
+        color: getEffectEdgeStroke("default")
+      }
+    };
+    nodeTypes = {
+      ruleGraphNode: react.memo(RuleGraphNode)
+    };
+    edgeTypes = {
+      ruleGraphEdge: react.memo(RuleGraphEdge)
+    };
+    formatDisplayValue = (value) => {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+      }
+      return JSON.stringify(value);
+    };
+  }
+});
+
+// src/RuleGraphModal.tsx
+var RuleGraphModal_exports = {};
+__export(RuleGraphModal_exports, {
+  RuleGraphModal: () => RuleGraphModal
+});
+function RuleGraphModal({
+  open,
+  onClose,
+  subtitle,
+  layoutKey,
+  ...graphProps
+}) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { large: true, fluid: true, onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.ModalTitle, { children: [
+      translate("Rule dependency graph"),
+      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RuleGraphView,
+      {
+        ...graphProps,
+        layoutKey: layoutKey ?? "modal",
+        className: "h-full min-h-0 rounded-none border-0",
+        minHeightClassName: "min-h-0 h-full"
+      }
+    ) }) })
+  ] });
+}
+var init_RuleGraphModal = __esm({
+  "src/RuleGraphModal.tsx"() {
+    init_i18n();
+    init_RuleGraphView();
+  }
+});
+
+// src/RulesPanel.tsx
+init_buildGraph();
+var createLookup = (rules, fields, sections, stages) => ({
+  resolveRuleName: (id) => rules.get(id) ?? id,
+  resolveFieldName: (id) => fields.get(id) ?? id,
+  resolveSectionName: (id) => sections.get(id) ?? id,
+  resolveStageName: (id) => stages.get(id) ?? id
+});
+function buildEventLookup(source) {
+  const rules = /* @__PURE__ */ new Map();
+  const fields = /* @__PURE__ */ new Map();
+  const sections = /* @__PURE__ */ new Map();
+  const stages = /* @__PURE__ */ new Map();
+  for (const rule of source.metadata.programRules) {
+    if (!rule.id) {
+      continue;
+    }
+    rules.set(rule.id, rule.displayName ?? rule.id);
+  }
+  const stage = dhis2FormUtilsMetadata.selectProgramStage(
+    source.metadata,
+    source.programStageId
+  ) ?? {
+    id: source.programStageId,
+    programStageDataElements: [],
+    programStageSections: []
+  };
+  for (const psde of stage.programStageDataElements ?? []) {
+    const de = psde.dataElement;
+    if (!de?.id) {
+      continue;
+    }
+    fields.set(de.id, de.displayFormName ?? de.displayName ?? de.id);
+  }
+  for (const section of stage.programStageSections ?? []) {
+    sections.set(section.id, section.displayName ?? section.id);
+  }
+  for (const programStage of source.metadata.programStages) {
+    if (!programStage.id) {
+      continue;
+    }
+    stages.set(programStage.id, programStage.displayName ?? programStage.id);
+  }
+  return createLookup(rules, fields, sections, stages);
+}
+function buildTrackerLookup(source) {
+  const rules = /* @__PURE__ */ new Map();
+  const fields = /* @__PURE__ */ new Map();
+  const sections = /* @__PURE__ */ new Map();
+  const stages = /* @__PURE__ */ new Map();
+  for (const rule of source.metadata.programRules) {
+    if (!rule.id) {
+      continue;
+    }
+    rules.set(rule.id, rule.name ?? rule.id);
+  }
+  for (const ptea of source.metadata.programTrackedEntityAttributes) {
+    const tea = ptea.trackedEntityAttribute;
+    if (!tea.id) {
+      continue;
+    }
+    fields.set(tea.id, tea.formName ?? tea.displayName ?? tea.id);
+  }
+  for (const section of source.metadata.programSections ?? []) {
+    sections.set(section.id, section.displayName ?? section.id);
+  }
+  for (const programStage of source.programStages ?? []) {
+    if (!programStage.id) {
+      continue;
+    }
+    stages.set(programStage.id, programStage.displayName ?? programStage.id);
+  }
+  return createLookup(rules, fields, sections, stages);
+}
+function createLabelLookup(source) {
+  return source.formKind === "event" ? buildEventLookup(source) : buildTrackerLookup(source);
+}
+
+// src/RulesPanel.tsx
+init_EffectBadge();
+
+// src/formatAgo.ts
+init_i18n();
+function formatAgo(timestamp, now = Date.now()) {
+  const diffMs = Math.max(0, now - timestamp);
+  if (diffMs < 5e3) {
+    return translate("just now");
+  }
+  const seconds = Math.floor(diffMs / 1e3);
+  if (seconds < 60) {
+    return translate("{{seconds}}s ago", { seconds });
+  }
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return translate("{{minutes}}m ago", { minutes });
+  }
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return translate("{{hours}}h ago", { hours });
+  }
+  return new Date(timestamp).toLocaleString();
+}
+
+// src/formatRuleActionSummary.ts
+function resolveFieldLabel(id, displayName, labelLookup) {
+  if (labelLookup) {
+    const resolved = labelLookup.resolveFieldName(id);
+    if (resolved !== id) {
+      return resolved;
+    }
+  }
+  return displayName ?? id;
+}
+function resolveSectionLabel(id, displayName, labelLookup) {
+  if (labelLookup) {
+    const resolved = labelLookup.resolveSectionName(id);
+    if (resolved !== id) {
+      return resolved;
+    }
+  }
+  return displayName ?? id;
+}
+function formatRuleActionSummary(action, labelLookup) {
+  const type = action.programRuleActionType ?? "UNKNOWN";
+  let targetLabel = "";
+  if (action.dataElement?.id) {
+    targetLabel = resolveFieldLabel(
+      action.dataElement.id,
+      action.dataElement.displayName,
+      labelLookup
+    );
+  } else if (action.trackedEntityAttribute?.id) {
+    targetLabel = resolveFieldLabel(
+      action.trackedEntityAttribute.id,
+      action.trackedEntityAttribute.displayName,
+      labelLookup
+    );
+  } else if (action.programStageSection?.id) {
+    targetLabel = resolveSectionLabel(
+      action.programStageSection.id,
+      action.programStageSection.displayName,
+      labelLookup
+    );
+  } else if (action.programSection?.id) {
+    targetLabel = resolveSectionLabel(
+      action.programSection.id,
+      action.programSection.displayName,
+      labelLookup
+    );
+  } else if (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR") {
+    targetLabel = action.location ?? "feedback";
+  }
+  let detail;
+  if (action.data) {
+    detail = action.data;
+  }
+  if (action.content && (type === "DISPLAYTEXT" || type === "DISPLAYKEYVALUEPAIR")) {
+    detail = action.content;
+  }
+  return { type, targetLabel, detail };
+}
+
+// src/RulesPanel.tsx
+init_i18n();
+
+// src/resolveProgramRulesList.ts
+function sortByPriority(rules) {
+  return [...rules].sort((left, right) => (left.priority ?? 0) - (right.priority ?? 0));
+}
+function toCatalogRule(rule) {
+  return {
+    id: rule.id,
+    name: rule.name,
+    condition: rule.condition,
+    priority: rule.priority,
+    programRuleActions: [...rule.programRuleActions ?? []],
+    programStageId: rule.programStageId
+  };
+}
+function resolveProgramRulesList(metadata) {
+  if (metadata.formKind === "event") {
+    return sortByPriority(
+      metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
+        (rule) => toCatalogRule({
+          id: rule.id,
+          name: rule.displayName ?? rule.id,
+          condition: rule.condition,
+          priority: rule.priority,
+          programRuleActions: rule.programRuleActions,
+          programStageId: rule.programStage?.id ?? null
+        })
+      )
+    );
   }
   return sortByPriority(
     metadata.metadata.programRules.filter((rule) => Boolean(rule.id)).map(
@@ -524,6 +1197,10 @@ function useRuleTraceStore() {
   return store;
 }
 
+// src/RuleDetailsModal.tsx
+init_effectStyles();
+init_i18n();
+
 // src/programRuleDetailQuery.ts
 var PROGRAM_RULE_ACTION_DETAIL_FIELDS = [
   "id",
@@ -704,860 +1381,300 @@ function BasicDetailCell({ label, value, mono }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-xs text-dhis2-grey-600", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: `m-0 mt-[2px] text-sm text-dhis2-grey-900 ${mono ? "font-mono" : ""}`, children: value })
-  ] });
-}
-var FEEDBACK_ACTION_TYPES = /* @__PURE__ */ new Set(["DISPLAYTEXT", "DISPLAYKEYVALUEPAIR"]);
-function resolveDataRow(action) {
-  return action.data ? { label: translate("Data (expression)"), value: action.data, mono: true } : null;
-}
-function resolveContentRow(action) {
-  const showContent = Boolean(action.content) && FEEDBACK_ACTION_TYPES.has(action.programRuleActionType);
-  return showContent ? { label: translate("Content (static text)"), value: action.content ?? "" } : null;
-}
-function resolveLocationRow(action) {
-  return action.location ? { label: translate("Location"), value: action.location, mono: true } : null;
-}
-function resolveActionRows(action) {
-  const rows = [
-    resolveActionTarget(action),
-    resolveDataRow(action),
-    resolveContentRow(action),
-    resolveLocationRow(action)
-  ];
-  return rows.filter((row) => row !== null);
-}
-function ActionCard({ action, index }) {
-  const type = action.programRuleActionType;
-  const visual = getEffectVisual(type);
-  const Icon = EFFECT_ICONS[visual.variant];
-  const rows = resolveActionRows(action);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "relative rounded-[3px] border border-dhis2-grey-300 bg-white py-dp12 pe-dp16 ps-dp16 shadow-[0_1px_2px_rgb(0_0_0/4%)]",
-      style: { borderInlineStartWidth: 3, borderInlineStartColor: visual.edgeStroke },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-dp12 flex items-center justify-between gap-dp8", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: `inline-flex items-center gap-[4px] rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${visual.tagClassName}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
-                type
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-wide text-dhis2-grey-600", children: translate("Action {{n}}", { n: index + 1 }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp10", children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[172px_minmax(0,1fr)] gap-dp10", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-dhis2-grey-600", children: row.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: `min-w-0 break-words text-sm ${row.mono ? "font-mono text-[12px]" : ""}`,
-              children: row.value
-            }
-          )
-        ] }, row.label)) })
-      ]
-    }
-  );
-}
-function orDash(value) {
-  return value ?? EM_DASH;
-}
-function resolveDetailDisplayName(rule) {
-  return rule?.displayName;
-}
-function resolveDetailName(rule) {
-  return rule?.name;
-}
-function resolveRuleDisplayName(rule, fallback) {
-  const displayName = resolveDetailDisplayName(rule) ?? resolveDetailName(rule);
-  return displayName ?? fallback;
-}
-function resolveRuleStageName(rule) {
-  return rule?.programStage?.displayName;
-}
-function resolveStageName(rule, programStageName) {
-  if (programStageName === null) {
-    return translate("All stages (registration)");
-  }
-  return orDash(resolveRuleStageName(rule) ?? programStageName);
-}
-function resolveLastUpdatedByName(rule) {
-  return rule?.lastUpdatedBy?.displayName;
-}
-function resolveLastUpdatedValue(rule) {
-  const label = formatTimestamp(rule?.lastUpdated);
-  if (!label) {
-    return EM_DASH;
-  }
-  const by = resolveLastUpdatedByName(rule);
-  return by ? `${label} \xB7 ${by}` : label;
-}
-function resolvePriorityCellValue(rule) {
-  return rule?.priority != null ? String(rule.priority) : EM_DASH;
-}
-function resolveActionsCellValue(rule) {
-  return translate("{{n}} action(s)", { n: rule?.programRuleActions?.length ?? 0 });
-}
-function resolveBasicDetailCells(rule, ruleName, programStageName) {
-  return [
-    { label: translate("Name"), value: resolveRuleDisplayName(rule, ruleName) },
-    { label: translate("Code"), value: orDash(rule?.code), mono: true },
-    { label: translate("Identifier"), value: orDash(rule?.id), mono: true },
-    { label: translate("Program"), value: orDash(rule?.program?.displayName) },
-    { label: translate("Program stage"), value: resolveStageName(rule, programStageName) },
-    { label: translate("Priority"), value: resolvePriorityCellValue(rule) },
-    { label: translate("Actions"), value: resolveActionsCellValue(rule) },
-    { label: translate("Last updated"), value: resolveLastUpdatedValue(rule) }
-  ];
-}
-function BasicDetails({
-  rule,
-  ruleName,
-  programStageName
-}) {
-  const cells = resolveBasicDetailCells(rule, ruleName, programStageName);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-dp24 gap-y-dp12 rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-050 p-dp16", children: cells.map((cell) => /* @__PURE__ */ jsxRuntime.jsx(BasicDetailCell, { ...cell }, cell.label)) });
-}
-var SECTION_HEADING_CLASS = "m-0 mb-dp8 text-[13px] font-bold uppercase tracking-wide text-dhis2-grey-700";
-function RuleDetailsHeader({
-  title,
-  chip,
-  description
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-dp24 -mt-dp24 mb-0 border-b border-dhis2-grey-300 px-dp24 pb-dp16 pe-[44px] pt-[20px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[11px] font-bold uppercase tracking-[.09em] text-dhis2-grey-600", children: translate("Program rule") }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[6px] flex flex-wrap items-center gap-dp8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-medium leading-[1.3] text-dhis2-grey-900", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: `rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${chip.className}`,
-          children: chip.label
-        }
-      )
-    ] }),
-    description ? /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: "m-0 mt-[6px] text-sm text-dhis2-grey-700",
-        style: { textWrap: "pretty" },
-        children: description
-      }
-    ) : null
-  ] });
-}
-function ConditionSection({
-  condition,
-  variables
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Condition") }),
-    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap break-words rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-200 px-dp16 py-[14px] font-mono text-[13px] leading-[1.6] text-dhis2-grey-900", children: condition ?? EM_DASH }),
-    variables.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-dp12", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-dp8 text-xs text-dhis2-grey-600", children: translate("Variables referenced") }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-dp8", children: variables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: `inline-flex items-center gap-[4px] rounded-full px-dp8 py-[2px] text-xs ${variable.className}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", children: variable.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: translate(variable.kind) })
-          ]
-        },
-        variable.token
-      )) })
-    ] }) : null
-  ] });
-}
-function ActionsSection({ actions }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Actions") }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp12", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionCard, { action, index }, action.id)) })
-  ] });
-}
-function RuleDetailsContent({
-  detail,
-  ruleName,
-  programStageName,
-  variables
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-dp24 pt-dp16", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Basic details") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BasicDetails,
-        {
-          rule: detail,
-          ruleName,
-          programStageName
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ConditionSection, { condition: detail.condition, variables }),
-    /* @__PURE__ */ jsxRuntime.jsx(ActionsSection, { actions: detail.programRuleActions ?? [] })
-  ] });
-}
-function RuleDetailsBody({
-  detail,
-  loading,
-  error,
-  ruleName,
-  programStageName,
-  variables
-}) {
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[280px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-red-700", children: translate("Could not load this rule: {{message}}", { message: error.message }) });
-  }
-  if (!detail) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RuleDetailsContent,
-    {
-      detail,
-      ruleName,
-      programStageName,
-      variables
-    }
-  );
+  ] });
 }
-function RuleDetailsFooter({ onClose }) {
+var FEEDBACK_ACTION_TYPES = /* @__PURE__ */ new Set(["DISPLAYTEXT", "DISPLAYKEYVALUEPAIR"]);
+function resolveDataRow(action) {
+  return action.data ? { label: translate("Data (expression)"), value: action.data, mono: true } : null;
+}
+function resolveContentRow(action) {
+  const showContent = Boolean(action.content) && FEEDBACK_ACTION_TYPES.has(action.programRuleActionType);
+  return showContent ? { label: translate("Content (static text)"), value: action.content ?? "" } : null;
+}
+function resolveLocationRow(action) {
+  return action.location ? { label: translate("Location"), value: action.location, mono: true } : null;
+}
+function resolveActionRows(action) {
+  const rows = [
+    resolveActionTarget(action),
+    resolveDataRow(action),
+    resolveContentRow(action),
+    resolveLocationRow(action)
+  ];
+  return rows.filter((row) => row !== null);
+}
+function ActionCard({ action, index }) {
+  const type = action.programRuleActionType;
+  const visual = getEffectVisual(type);
+  const Icon = exports.EFFECT_ICONS[visual.variant];
+  const rows = resolveActionRows(action);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      style: { order: 3 },
-      className: "-mx-dp24 -mb-dp24 mt-dp16 flex items-center justify-between gap-dp12 border-t border-dhis2-grey-300 bg-dhis2-grey-050 px-dp24 py-[14px]",
+      className: "relative rounded-[3px] border border-dhis2-grey-300 bg-white py-dp12 pe-dp16 ps-dp16 shadow-[0_1px_2px_rgb(0_0_0/4%)]",
+      style: { borderInlineStartWidth: 3, borderInlineStartColor: visual.edgeStroke },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-grey-600", children: translate("Read-only view. Edit rules in the Maintenance app.") }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.ButtonStrip, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { secondary: true, onClick: onClose, children: translate("Close") }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-dp12 flex items-center justify-between gap-dp8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: `inline-flex items-center gap-[4px] rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${visual.tagClassName}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+                type
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-wide text-dhis2-grey-600", children: translate("Action {{n}}", { n: index + 1 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp10", children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[172px_minmax(0,1fr)] gap-dp10", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-dhis2-grey-600", children: row.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `min-w-0 break-words text-sm ${row.mono ? "font-mono text-[12px]" : ""}`,
+              children: row.value
+            }
+          )
+        ] }, row.label)) })
       ]
     }
   );
 }
-function resolveActiveRuleId(open, ruleId) {
-  return open ? ruleId : null;
-}
-function shouldRenderModal(open, ruleId) {
-  return open && ruleId != null;
-}
-function RuleDetailsModal({
-  open,
-  onClose,
-  ruleId,
-  ruleName,
-  status,
-  programStageName,
-  programRuleVariables
-}) {
-  const { detail, loading, error } = useProgramRuleDetail(resolveActiveRuleId(open, ruleId));
-  if (!shouldRenderModal(open, ruleId)) {
-    return null;
-  }
-  const chip = resolveStatusChip(status);
-  const variables = parseConditionVariables(detail?.condition, programRuleVariables);
-  const title = resolveRuleDisplayName(detail, ruleName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { position: "middle", onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsHeader, { title, chip, description: detail?.description }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      RuleDetailsBody,
-      {
-        detail,
-        loading,
-        error,
-        ruleName,
-        programStageName,
-        variables
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsFooter, { onClose })
-  ] });
+function orDash(value) {
+  return value ?? EM_DASH;
 }
-
-// src/graphLayout.ts
-var ROLE_COLUMNS = {
-  source: 0,
-  rule: 280,
-  target: 560
-};
-var FEEDBACK_COLUMN = 720;
-var LANE_HEIGHT = 104;
-var STAGGER = 24;
-function median(values) {
-  const sorted = [...values].sort((a, b) => a - b);
-  const mid = Math.floor(sorted.length / 2);
-  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+function resolveDetailDisplayName(rule) {
+  return rule?.displayName;
 }
-function staggerOffset(indexInBucket) {
-  if (indexInBucket === 0) {
-    return 0;
-  }
-  const magnitude = Math.ceil(indexInBucket / 2) * STAGGER;
-  return indexInBucket % 2 === 1 ? magnitude : -magnitude;
+function resolveDetailName(rule) {
+  return rule?.name;
 }
-function columnFor(node) {
-  if (node.role === "target" && node.kind === "feedback") {
-    return FEEDBACK_COLUMN;
-  }
-  return ROLE_COLUMNS[node.role];
+function resolveRuleDisplayName(rule, fallback) {
+  const displayName = resolveDetailDisplayName(rule) ?? resolveDetailName(rule);
+  return displayName ?? fallback;
 }
-function prepareFlowGraph(graph) {
-  const readSources = /* @__PURE__ */ new Set();
-  const effectTargets = /* @__PURE__ */ new Set();
-  for (const edge of graph.edges) {
-    if (edge.effectType === "read") {
-      readSources.add(edge.source);
-    } else {
-      effectTargets.add(edge.target);
-    }
-  }
-  const flowNodes = [];
-  const endpointByGraphId = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    if (node.kind === "rule") {
-      flowNodes.push({
-        id: node.id,
-        graphNodeId: node.id,
-        kind: node.kind,
-        label: node.label,
-        role: "rule"
-      });
-      continue;
-    }
-    const isSource = readSources.has(node.id);
-    const isTarget = effectTargets.has(node.id);
-    const endpoints = {};
-    if (isSource) {
-      const flowId = isTarget ? `${node.id}@src` : node.id;
-      endpoints.source = flowId;
-      flowNodes.push({
-        id: flowId,
-        graphNodeId: node.id,
-        kind: node.kind,
-        label: node.label,
-        role: "source"
-      });
-    }
-    if (isTarget) {
-      const flowId = isSource ? `${node.id}@tgt` : node.id;
-      endpoints.target = flowId;
-      flowNodes.push({
-        id: flowId,
-        graphNodeId: node.id,
-        kind: node.kind,
-        label: node.label,
-        role: "target"
-      });
-    }
-    endpointByGraphId.set(node.id, endpoints);
-  }
-  const flowEdges = graph.edges.map((edge) => {
-    if (edge.effectType === "read") {
-      const endpoints2 = endpointByGraphId.get(edge.source);
-      return { ...edge, source: endpoints2?.source ?? edge.source };
-    }
-    const endpoints = endpointByGraphId.get(edge.target);
-    return { ...edge, target: endpoints?.target ?? edge.target };
-  });
-  return { nodes: flowNodes, edges: flowEdges };
+function resolveRuleStageName(rule) {
+  return rule?.programStage?.displayName;
 }
-function computeGraphLayout(flowNodes, flowEdges) {
-  const positions = /* @__PURE__ */ new Map();
-  const ruleLane = /* @__PURE__ */ new Map();
-  flowNodes.filter((node) => node.role === "rule").forEach((node, index) => {
-    ruleLane.set(node.id, index);
-    positions.set(node.id, { x: ROLE_COLUMNS.rule, y: index * LANE_HEIGHT });
-  });
-  const connectedRuleLanes = /* @__PURE__ */ new Map();
-  const addLane = (nodeId, lane) => {
-    const lanes = connectedRuleLanes.get(nodeId) ?? /* @__PURE__ */ new Set();
-    lanes.add(lane);
-    connectedRuleLanes.set(nodeId, lanes);
-  };
-  for (const edge of flowEdges) {
-    const sourceLane = ruleLane.get(edge.source);
-    const targetLane = ruleLane.get(edge.target);
-    if (targetLane !== void 0 && sourceLane === void 0) {
-      addLane(edge.source, targetLane);
-    }
-    if (sourceLane !== void 0 && targetLane === void 0) {
-      addLane(edge.target, sourceLane);
-    }
-  }
-  const bucketCounts = /* @__PURE__ */ new Map();
-  for (const node of flowNodes) {
-    if (node.role === "rule") {
-      continue;
-    }
-    const lanes = connectedRuleLanes.get(node.id);
-    const lane = lanes && lanes.size > 0 ? median([...lanes]) : 0;
-    const column = columnFor(node);
-    const bucketKey = `${String(column)}:${String(lane)}`;
-    const indexInBucket = bucketCounts.get(bucketKey) ?? 0;
-    bucketCounts.set(bucketKey, indexInBucket + 1);
-    positions.set(node.id, {
-      x: column,
-      y: lane * LANE_HEIGHT + staggerOffset(indexInBucket)
-    });
+function resolveStageName(rule, programStageName) {
+  if (programStageName === null) {
+    return translate("All stages (registration)");
   }
-  return positions;
-}
-
-// src/graphNodeStyles.ts
-var GRAPH_NODE_CLASSES = {
-  field: "border-dhis2-blue-500",
-  rule: "border-dhis2-teal-600 bg-dhis2-teal-050",
-  section: "border-dhis2-grey-600",
-  feedback: "border-dhis2-purple-500"
-};
-var LEGEND_SWATCH_CLASSES = {
-  field: "bg-dhis2-blue-500",
-  rule: "bg-dhis2-teal-600",
-  section: "bg-dhis2-grey-600",
-  feedback: "bg-dhis2-purple-500"
-};
-function getGraphNodeClassName(kind, highlighted) {
-  return `p-dp8 rounded border bg-white min-w-28 max-w-[180px] text-xs shadow-[0_1px_2px_rgb(0_0_0/6%)] transition-opacity duration-150 ease-out cursor-grab active:cursor-grabbing ${GRAPH_NODE_CLASSES[kind]} ${highlighted ? "" : "opacity-35"}`;
+  return orDash(resolveRuleStageName(rule) ?? programStageName);
 }
-function getLegendSwatchClassName(kind) {
-  return `size-2.5 shrink-0 rounded-sm ${LEGEND_SWATCH_CLASSES[kind]}`;
+function resolveLastUpdatedByName(rule) {
+  return rule?.lastUpdatedBy?.displayName;
 }
-
-// src/traceEntry.ts
-function resolveGraphTraceEntry(entries, selectedEntryId) {
-  if (!entries.length) {
-    return null;
-  }
-  if (selectedEntryId) {
-    return entries.find((entry) => entry.id === selectedEntryId) ?? entries[entries.length - 1];
+function resolveLastUpdatedValue(rule) {
+  const label = formatTimestamp(rule?.lastUpdated);
+  if (!label) {
+    return EM_DASH;
   }
-  return entries[entries.length - 1];
+  const by = resolveLastUpdatedByName(rule);
+  return by ? `${label} \xB7 ${by}` : label;
 }
-function getActiveRuleIds(entries) {
-  const latest = resolveGraphTraceEntry(entries);
-  if (!latest) {
-    return /* @__PURE__ */ new Set();
-  }
-  return new Set(latest.ruleResults.map((result) => result.ruleId));
+function resolvePriorityCellValue(rule) {
+  return rule?.priority != null ? String(rule.priority) : EM_DASH;
 }
-var KIND_LABELS = {
-  field: "Field",
-  rule: "Rule",
-  section: "Section",
-  feedback: "Feedback"
-};
-var READ_LABEL_EDGE_THRESHOLD = 4;
-var DEFAULT_EDGE_OPTIONS = {
-  type: "ruleGraphEdge",
-  style: { stroke: getEffectEdgeStroke("default") },
-  markerEnd: {
-    type: react$1.MarkerType.ArrowClosed,
-    color: getEffectEdgeStroke("default")
-  }
-};
-function RuleGraphNode({ data }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getGraphNodeClassName(data.kind, data.highlighted), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-dp4 block text-[0.625rem] font-semibold uppercase leading-none tracking-wide text-dhis2-grey-600", children: KIND_LABELS[data.kind] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words font-semibold leading-[1.3]", children: data.label }),
-    data.value !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-dp4 border-t border-dhis2-grey-200 pt-dp4 font-mono text-[0.6875rem] break-all text-dhis2-grey-700", children: data.value }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right })
-  ] });
+function resolveActionsCellValue(rule) {
+  return translate("{{n}} action(s)", { n: rule?.programRuleActions?.length ?? 0 });
 }
-var nodeTypes = {
-  ruleGraphNode: react.memo(RuleGraphNode)
-};
-function RuleGraphEdge({
-  id,
-  sourceX,
-  sourceY,
-  sourcePosition,
-  targetX,
-  targetY,
-  targetPosition,
-  markerEnd,
-  style,
-  data
+function resolveBasicDetailCells(rule, ruleName, programStageName) {
+  return [
+    { label: translate("Name"), value: resolveRuleDisplayName(rule, ruleName) },
+    { label: translate("Code"), value: orDash(rule?.code), mono: true },
+    { label: translate("Identifier"), value: orDash(rule?.id), mono: true },
+    { label: translate("Program"), value: orDash(rule?.program?.displayName) },
+    { label: translate("Program stage"), value: resolveStageName(rule, programStageName) },
+    { label: translate("Priority"), value: resolvePriorityCellValue(rule) },
+    { label: translate("Actions"), value: resolveActionsCellValue(rule) },
+    { label: translate("Last updated"), value: resolveLastUpdatedValue(rule) }
+  ];
+}
+function BasicDetails({
+  rule,
+  ruleName,
+  programStageName
 }) {
-  const [hovered, setHovered] = react.useState(false);
-  const [edgePath, labelX, labelY] = react$1.getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    offset: data?.offset ?? 20
-  });
-  const showLabel = data ? data.showLabel || hovered : false;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react$1.BaseEdge, { id, path: edgePath, markerEnd, style }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: edgePath,
-        fill: "none",
-        stroke: "transparent",
-        strokeWidth: 16,
-        onMouseEnter: () => {
-          setHovered(true);
-        },
-        onMouseLeave: () => {
-          setHovered(false);
+  const cells = resolveBasicDetailCells(rule, ruleName, programStageName);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-dp24 gap-y-dp12 rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-050 p-dp16", children: cells.map((cell) => /* @__PURE__ */ jsxRuntime.jsx(BasicDetailCell, { ...cell }, cell.label)) });
+}
+var SECTION_HEADING_CLASS = "m-0 mb-dp8 text-[13px] font-bold uppercase tracking-wide text-dhis2-grey-700";
+function RuleDetailsHeader({
+  title,
+  chip,
+  description
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-dp24 -mt-dp24 mb-0 border-b border-dhis2-grey-300 px-dp24 pb-dp16 pe-[44px] pt-[20px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[11px] font-bold uppercase tracking-[.09em] text-dhis2-grey-600", children: translate("Program rule") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-[6px] flex flex-wrap items-center gap-dp8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-medium leading-[1.3] text-dhis2-grey-900", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${chip.className}`,
+          children: chip.label
         }
-      }
-    ),
-    showLabel && data ? /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      )
+    ] }),
+    description ? /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
       {
-        className: "nodrag nopan absolute rounded-sm px-dp4 text-[10px] font-semibold",
-        style: {
-          transform: `translate(-50%, -50%) translate(${String(labelX)}px, ${String(labelY)}px)`,
-          background: "rgba(255,255,255,0.92)",
-          color: data.stroke,
-          pointerEvents: "all"
-        },
-        onMouseEnter: () => {
-          setHovered(true);
-        },
-        onMouseLeave: () => {
-          setHovered(false);
-        },
-        children: data.label
+        className: "m-0 mt-[6px] text-sm text-dhis2-grey-700",
+        style: { textWrap: "pretty" },
+        children: description
       }
-    ) }) : null
+    ) : null
   ] });
 }
-var edgeTypes = {
-  ruleGraphEdge: react.memo(RuleGraphEdge)
-};
-function effectNodeKey(effect) {
-  const kind = effect.type === "HIDESECTION" ? "section" : effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR" ? "feedback" : "field";
-  return `${kind}:${effect.targetId}`;
-}
-function entryGraphKeys(entry) {
-  const keys = /* @__PURE__ */ new Set();
-  for (const fieldId of entry.changedFields) {
-    keys.add(`field:${fieldId}`);
-  }
-  for (const result of entry.ruleResults) {
-    keys.add(`rule:${result.ruleId}`);
-    for (const effect of result.effects) {
-      keys.add(effectNodeKey(effect));
-    }
-  }
-  return keys;
-}
-function ruleGraphKeys(entry, ruleId) {
-  const keys = /* @__PURE__ */ new Set([`rule:${ruleId}`]);
-  for (const result of entry.ruleResults) {
-    if (result.ruleId !== ruleId) {
-      continue;
-    }
-    for (const effect of result.effects) {
-      keys.add(effectNodeKey(effect));
-    }
-  }
-  return keys;
+function ConditionSection({
+  condition,
+  variables
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Condition") }),
+    /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap break-words rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-200 px-dp16 py-[14px] font-mono text-[13px] leading-[1.6] text-dhis2-grey-900", children: condition ?? EM_DASH }),
+    variables.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-dp12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 mb-dp8 text-xs text-dhis2-grey-600", children: translate("Variables referenced") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-dp8", children: variables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: `inline-flex items-center gap-[4px] rounded-full px-dp8 py-[2px] text-xs ${variable.className}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", children: variable.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: translate(variable.kind) })
+          ]
+        },
+        variable.token
+      )) })
+    ] }) : null
+  ] });
 }
-var formatDisplayValue = (value) => {
-  if (value === void 0 || value === null || value === "") {
-    return void 0;
-  }
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return JSON.stringify(value);
-};
-function toFlowGraph(graph, fieldState, formValues, highlightedKeys) {
-  const { nodes: flowNodes, edges: flowEdges } = prepareFlowGraph(graph);
-  const positions = computeGraphLayout(flowNodes, flowEdges);
-  const graphNodeIdByFlowId = new Map(flowNodes.map((node) => [node.id, node.graphNodeId]));
-  const nodes = flowNodes.map((node) => {
-    const position = positions.get(node.id) ?? { x: 0, y: 0 };
-    const rawFieldId = node.kind === "field" ? node.graphNodeId.slice("field:".length) : void 0;
-    const assignedValue = rawFieldId && rawFieldId in fieldState ? fieldState[rawFieldId].assignedValue : void 0;
-    const formValue = rawFieldId ? formValues[rawFieldId] : void 0;
-    const displayValue = formatDisplayValue(assignedValue) ?? formatDisplayValue(formValue);
-    return {
-      id: node.id,
-      type: "ruleGraphNode",
-      position,
-      data: {
-        label: node.label,
-        kind: node.kind,
-        graphNodeId: node.graphNodeId,
-        value: displayValue,
-        highlighted: highlightedKeys ? highlightedKeys.has(node.graphNodeId) : true
-      }
-    };
-  });
-  const dense = flowEdges.length > READ_LABEL_EDGE_THRESHOLD;
-  const sourceFanOut = /* @__PURE__ */ new Map();
-  const edges = flowEdges.map((edge) => {
-    const sourceGraphId = graphNodeIdByFlowId.get(edge.source) ?? edge.source;
-    const targetGraphId = graphNodeIdByFlowId.get(edge.target) ?? edge.target;
-    const isHighlighted = highlightedKeys ? highlightedKeys.has(sourceGraphId) && highlightedKeys.has(targetGraphId) : true;
-    const effectType = edge.effectType ?? "default";
-    const isRead = effectType === "read";
-    const stroke = getEffectEdgeStroke(effectType, isHighlighted);
-    const label = getEffectShortLabel(effectType);
-    const showLabel = !(isRead && dense);
-    const fanIndex = sourceFanOut.get(edge.source) ?? 0;
-    sourceFanOut.set(edge.source, fanIndex + 1);
-    const offset = 20 + fanIndex * 14;
-    return {
-      id: edge.id,
-      source: edge.source,
-      target: edge.target,
-      type: "ruleGraphEdge",
-      animated: isHighlighted && !isRead,
-      zIndex: isHighlighted ? 1 : 0,
-      style: {
-        stroke,
-        strokeWidth: isRead ? 1 : Math.min(1 + edge.fireCount, 4),
-        opacity: isHighlighted ? isRead ? 0.5 : 1 : 0.35
-      },
-      markerEnd: {
-        type: react$1.MarkerType.ArrowClosed,
-        color: stroke
-      },
-      data: {
-        label,
-        stroke,
-        showLabel,
-        offset
-      }
-    };
-  });
-  return { nodes, edges };
+function ActionsSection({ actions }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Actions") }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-dp12", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionCard, { action, index }, action.id)) })
+  ] });
 }
-function GraphToolbar({
-  nodeCount,
-  edgeCount,
-  headerActions,
-  activeEffectVariants
+function RuleDetailsContent({
+  detail,
+  ruleName,
+  programStageName,
+  variables
 }) {
-  const items = [
-    { kind: "field", label: translate("Field") },
-    { kind: "rule", label: translate("Rule") },
-    { kind: "section", label: translate("Section") },
-    { kind: "feedback", label: translate("Feedback") }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-dp24 pt-dp16", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Basic details") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        BasicDetails,
         {
-          className: "flex min-w-0 flex-wrap items-center gap-x-dp12 gap-y-dp8",
-          "aria-hidden": "true",
-          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: getLegendSwatchClassName(item.kind) }),
-                item.label
-              ]
-            },
-            item.kind
-          ))
+          rule: detail,
+          ruleName,
+          programStageName
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
-          nodes: nodeCount,
-          edges: edgeCount
-        }) }),
-        headerActions
-      ] })
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(EffectLegend, { activeVariants: activeEffectVariants })
+    /* @__PURE__ */ jsxRuntime.jsx(ConditionSection, { condition: detail.condition, variables }),
+    /* @__PURE__ */ jsxRuntime.jsx(ActionsSection, { actions: detail.programRuleActions ?? [] })
   ] });
 }
-function FitViewOnChange({
-  layoutKey,
-  nodeCount,
-  edgeCount
-}) {
-  const { fitView } = react$1.useReactFlow();
-  react.useEffect(() => {
-    const frameId = requestAnimationFrame(() => {
-      void fitView({ padding: 0.2, duration: 150 });
-    });
-    return () => {
-      cancelAnimationFrame(frameId);
-    };
-  }, [edgeCount, fitView, layoutKey, nodeCount]);
-  return null;
-}
-function mergeNodePositions(next, current) {
-  const currentById = new Map(current.map((node) => [node.id, node]));
-  return next.map((node) => {
-    const existing = currentById.get(node.id);
-    if (existing) {
-      return { ...node, position: existing.position };
-    }
-    return node;
-  });
-}
-function RuleGraphCanvas({
-  nodes: layoutNodes,
-  edges: layoutEdges,
-  layoutKey
+function RuleDetailsBody({
+  detail,
+  loading,
+  error,
+  ruleName,
+  programStageName,
+  variables
 }) {
-  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(layoutNodes);
-  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(layoutEdges);
-  react.useEffect(() => {
-    setNodes((current) => mergeNodePositions(layoutNodes, current));
-  }, [layoutNodes, setNodes]);
-  react.useEffect(() => {
-    setEdges(layoutEdges);
-  }, [layoutEdges, setEdges]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.ReactFlow,
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[280px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-red-700", children: translate("Could not load this rule: {{message}}", { message: error.message }) });
+  }
+  if (!detail) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RuleDetailsContent,
     {
-      nodes,
-      edges,
-      nodeTypes,
-      edgeTypes,
-      onNodesChange,
-      onEdgesChange,
-      nodesDraggable: true,
-      defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
-      elevateEdgesOnSelect: true,
-      fitView: true,
-      proOptions: { hideAttribution: true },
-      className: "h-full w-full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FitViewOnChange,
-          {
-            layoutKey,
-            nodeCount: nodes.length,
-            edgeCount: edges.length
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 16, size: 1 }),
-        /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false })
-      ]
+      detail,
+      ruleName,
+      programStageName,
+      variables
     }
   );
 }
-function RuleGraphView({
-  entries,
-  fieldState,
-  formValues,
-  selectedEntryId,
-  highlightRuleId,
-  labelLookup,
-  className,
-  layoutKey,
-  headerActions,
-  minHeightClassName = "min-h-[360px]"
-}) {
-  const graphEntry = react.useMemo(
-    () => resolveGraphTraceEntry(entries, selectedEntryId),
-    [entries, selectedEntryId]
-  );
-  const graph = react.useMemo(
-    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
-    [graphEntry, labelLookup]
-  );
-  const highlightedKeys = react.useMemo(() => {
-    if (!graphEntry || !selectedEntryId && !highlightRuleId) {
-      return null;
-    }
-    const keys = /* @__PURE__ */ new Set();
-    if (selectedEntryId) {
-      for (const key of entryGraphKeys(graphEntry)) {
-        keys.add(key);
-      }
-    }
-    if (highlightRuleId) {
-      for (const key of ruleGraphKeys(graphEntry, highlightRuleId)) {
-        keys.add(key);
-      }
-    }
-    return keys;
-  }, [graphEntry, highlightRuleId, selectedEntryId]);
-  const { nodes, edges } = react.useMemo(
-    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
-    [graph, fieldState, formValues, highlightedKeys]
-  );
-  const activeEffectVariants = react.useMemo(() => {
-    const variants = /* @__PURE__ */ new Set();
-    for (const edge of graph.edges) {
-      if (edge.effectType) {
-        variants.add(getEffectVariant(edge.effectType));
-      }
-    }
-    return variants;
-  }, [graph.edges]);
-  if (!graph.nodes.length) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.NoticeBox, { title: translate("No rule relationships yet"), children: translate(
-      "Interact with the form to build the dependency graph. Only rules active in the latest evaluation are shown. Select a trace entry to inspect a past evaluation. Connections flow Field \u2192 Rule \u2192 Target (read / effect)."
-    ) }) });
-  }
+function RuleDetailsFooter({ onClose }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `flex h-full min-h-[480px] flex-1 flex-col overflow-hidden rounded-md border border-dhis2-grey-200 bg-white ${className ?? ""}`,
+      style: { order: 3 },
+      className: "-mx-dp24 -mb-dp24 mt-dp16 flex items-center justify-between gap-dp12 border-t border-dhis2-grey-300 bg-dhis2-grey-050 px-dp24 py-[14px]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GraphToolbar,
-          {
-            nodeCount: graph.nodes.length,
-            edgeCount: graph.edges.length,
-            headerActions,
-            activeEffectVariants
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${minHeightClassName} flex-1 bg-white`,
-            style: { width: "100%", height: "100%" },
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-sm text-dhis2-grey-600", children: translate("Read-only view. Edit rules in the Maintenance app.") }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.ButtonStrip, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { secondary: true, onClick: onClose, children: translate("Close") }) })
       ]
     }
   );
 }
-function RuleGraphModal({
+function resolveActiveRuleId(open, ruleId) {
+  return open ? ruleId : null;
+}
+function shouldRenderModal(open, ruleId) {
+  return open && ruleId != null;
+}
+function RuleDetailsModal({
   open,
   onClose,
-  subtitle,
-  layoutKey,
-  ...graphProps
+  ruleId,
+  ruleName,
+  status,
+  programStageName,
+  programRuleVariables
 }) {
-  if (!open) {
+  const { detail, loading, error } = useProgramRuleDetail(resolveActiveRuleId(open, ruleId));
+  if (!shouldRenderModal(open, ruleId)) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { large: true, fluid: true, onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.ModalTitle, { children: [
-      translate("Rule dependency graph"),
-      subtitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-      RuleGraphView,
+  const chip = resolveStatusChip(status);
+  const variables = parseConditionVariables(detail?.condition, programRuleVariables);
+  const title = resolveRuleDisplayName(detail, ruleName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { position: "middle", onClose, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsHeader, { title, chip, description: detail?.description }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      RuleDetailsBody,
       {
-        ...graphProps,
-        layoutKey: layoutKey ?? "modal",
-        className: "h-full min-h-0 rounded-none border-0",
-        minHeightClassName: "min-h-0 h-full"
+        detail,
+        loading,
+        error,
+        ruleName,
+        programStageName,
+        variables
       }
-    ) }) })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RuleDetailsFooter, { onClose })
   ] });
 }
+
+// src/RulesPanelGraphFallback.tsx
+init_i18n();
+function RulesPanelGraphFallback() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "flex min-h-[200px] items-center justify-center",
+      role: "status",
+      "aria-label": translate("Loading graph"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularLoader, { small: true })
+    }
+  );
+}
+
+// src/TraceTimeline.tsx
+init_EffectBadge();
+init_i18n();
 function resolveLabel(id, resolver) {
   const label = resolver?.(id) ?? id;
   return { label, showId: label !== id };
@@ -1774,6 +1891,9 @@ function TraceTimeline({
     ) }, entry.id);
   }) });
 }
+
+// src/RulesPanel.tsx
+init_traceEntry();
 var REORDER_DURATION_MS = 220;
 var REORDER_EASING = "ease-out";
 function prefersReducedMotion() {
@@ -1820,11 +1940,20 @@ function useFlipReorder(orderedIds, containerRef) {
     positionsRef.current = nextPositions;
   }, [orderedIds.join("|")]);
 }
-function resolveScopeStageId(metadata) {
+var LazyRuleGraphView = react.lazy(
+  () => Promise.resolve().then(() => (init_RuleGraphView(), RuleGraphView_exports)).then((module) => ({ default: module.RuleGraphView }))
+);
+var LazyRuleGraphModal = react.lazy(
+  () => Promise.resolve().then(() => (init_RuleGraphModal(), RuleGraphModal_exports)).then((module) => ({ default: module.RuleGraphModal }))
+);
+function resolveScopeStageId(metadata, activeProgramStageId) {
+  if (activeProgramStageId !== void 0) {
+    return activeProgramStageId;
+  }
   return metadata.formKind === "event" ? metadata.programStageId : null;
 }
 function isRuleInScope(rule, scopeStageId) {
-  return rule.programStageId === null || rule.programStageId === scopeStageId;
+  return rule.programStageId === scopeStageId;
 }
 function resolveAccentClassName(inScope, firing, selected) {
   if (selected) {
@@ -1847,6 +1976,11 @@ function resolveDetailsStatus(inScope, firing) {
   }
   return firing ? "firing" : "idle";
 }
+function resolveAppliesToCaption(rule, labelLookup) {
+  return rule.programStageId === null ? translate("Applies to registration") : translate("Applies to {{stage}}", {
+    stage: labelLookup.resolveStageName(rule.programStageId)
+  });
+}
 function formatActionLabel(action) {
   if (action.targetLabel && action.detail) {
     return `${action.type} \xB7 ${action.targetLabel} = ${action.detail}`;
@@ -1880,7 +2014,11 @@ function resolveTabLabel(key) {
       return translate("Graph");
   }
 }
-function RulesPanel({ metadata, showConditions = true }) {
+function RulesPanel({
+  metadata,
+  showConditions = true,
+  activeProgramStageId
+}) {
   const formStore = dhis2FormUtilsHooks.useFormStore();
   const { form } = dhis2FormUtilsHooks.useFormStateContext();
   const traceStore = useRuleTraceStore();
@@ -1892,7 +2030,10 @@ function RulesPanel({ metadata, showConditions = true }) {
   const [detailsRuleId, setDetailsRuleId] = react.useState(null);
   const labelLookup = react.useMemo(() => createLabelLookup(metadata), [metadata]);
   const catalog = react.useMemo(() => resolveProgramRulesList(metadata), [metadata]);
-  const scopeStageId = react.useMemo(() => resolveScopeStageId(metadata), [metadata]);
+  const scopeStageId = react.useMemo(
+    () => resolveScopeStageId(metadata, activeProgramStageId),
+    [metadata, activeProgramStageId]
+  );
   const entries = react.useSyncExternalStore(
     react.useCallback((listener) => traceStore.subscribe(listener), [traceStore]),
     react.useCallback(() => traceStore.getSnapshot(), [traceStore]),
@@ -2076,19 +2217,19 @@ function RulesPanel({ metadata, showConditions = true }) {
             },
             labelLookup
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          RuleGraphView,
+        ) : /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(RulesPanelGraphFallback, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyRuleGraphView,
           {
             ...graphProps,
             headerActions: graphHasNodes ? expandGraphButton : void 0
           }
-        ) }),
+        ) }) }),
         entries.length > 0 && tab !== "rules" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sr-only", "aria-live": "polite", children: translate("{{evaluations}} evaluations \xB7 {{rules}} rules observed", {
           evaluations: entries.length,
           rules: observedRuleCount
         }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          RuleGraphModal,
+        graphModalOpen ? /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyRuleGraphModal,
           {
             ...graphProps,
             open: graphModalOpen,
@@ -2096,9 +2237,9 @@ function RulesPanel({ metadata, showConditions = true }) {
               setGraphModalOpen(false);
             },
             subtitle: graphSubtitle,
-            layoutKey: graphModalOpen ? "open" : "closed"
+            layoutKey: "open"
           }
-        ),
+        ) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           RuleDetailsModal,
           {
@@ -2234,16 +2375,16 @@ function RulesTab({
               children: rule.condition
             }
           ) : null,
-          !inScope && rule.programStageId ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-dhis2-grey-600", children: translate("Applies to {{stage}}", {
-            stage: labelLookup.resolveStageName(rule.programStageId)
-          }) }) : null
+          !inScope ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-dhis2-grey-600", children: resolveAppliesToCaption(rule, labelLookup) }) : null
         ]
       }
     ) }, rule.id);
   }) });
 }
 
-exports.EFFECT_ICONS = EFFECT_ICONS;
+// src/index.ts
+init_effectStyles();
+
 exports.RuleDetailsModal = RuleDetailsModal;
 exports.RuleDevtoolsScope = RuleDevtoolsScope;
 exports.RulesPanel = RulesPanel;