@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1648 @@
+import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, IconFullscreen16, Button, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, Modal, ModalTitle, ModalContent } from '@dhis2/ui';
+import { useFormStore, useFormStateContext } from '@nnkogift/dhis2-form-utils-hooks';
+import { createContext, memo, useState, useMemo, useEffect, useSyncExternalStore, useCallback, useContext } from 'react';
+import { selectProgramStage } from '@nnkogift/dhis2-form-utils-metadata';
+import i18n from '@dhis2/d2-i18n';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MarkerType, Handle, Position, getSmoothStepPath, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, useNodesState, useEdgesState, ReactFlow, Background, Controls, useReactFlow } from '@xyflow/react';
+
+// src/RulesPanel.tsx
+
+// 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]));
+  const ensureNode = (kind, id, label) => {
+    const key = nodeKey(kind, id);
+    if (!nodes.has(key)) {
+      nodes.set(key, { id: key, kind, label });
+    }
+    return key;
+  };
+  for (const fieldId of entry.changedFields) {
+    ensureNode("field", fieldId, labelLookup?.resolveFieldName(fieldId) ?? fieldId);
+  }
+  for (const ruleResult of entry.ruleResults) {
+    const ruleLabel = labelLookup?.resolveRuleName(ruleResult.ruleId) ?? ruleResult.ruleId;
+    const ruleNodeId = ensureNode("rule", ruleResult.ruleId, ruleLabel);
+    for (const fieldId of entry.changedFields) {
+      const fieldNodeId = ensureNode(
+        "field",
+        fieldId,
+        labelLookup?.resolveFieldName(fieldId) ?? fieldId
+      );
+      const id = edgeKey(fieldNodeId, ruleResult.ruleId, ruleNodeId, "read");
+      const existing = edges.get(id);
+      edges.set(id, {
+        id,
+        source: fieldNodeId,
+        target: ruleNodeId,
+        effectType: "read",
+        fireCount: (existing?.fireCount ?? 0) + 1
+      });
+    }
+    for (const effect of ruleResult.effects) {
+      const targetKind = effect.type === "HIDESECTION" ? "section" : effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR" ? "feedback" : "field";
+      const targetNodeId = ensureNode(
+        targetKind,
+        effect.targetId,
+        targetKind === "section" ? labelLookup?.resolveSectionName(effect.targetId) ?? effect.targetId : targetKind === "field" ? labelLookup?.resolveFieldName(effect.targetId) ?? effect.targetId : effect.targetId
+      );
+      const id = edgeKey(ruleNodeId, ruleResult.ruleId, targetNodeId, effect.type);
+      const existing = edges.get(id);
+      edges.set(id, {
+        id,
+        source: ruleNodeId,
+        target: targetNodeId,
+        effectType: effect.type,
+        fireCount: (existing?.fireCount ?? 0) + 1
+      });
+    }
+  }
+  return {
+    nodes: [...nodes.values()],
+    edges: [...edges.values()]
+  };
+}
+function buildGraphFromTrace(entries, labelLookup) {
+  return entries.reduce(
+    (graph, entry) => accumulateGraph(graph, entry, 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 = 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 EFFECT_ICONS = {
+  hide: IconViewOff16,
+  show: IconView16,
+  assign: IconEdit16,
+  mandatory: IconStarFilled16,
+  warning: IconWarningFilled16,
+  error: IconErrorFilled16,
+  feedback: IconMessages16,
+  message: IconMail16,
+  read: IconLink16,
+  default: IconInfo16
+};
+function getEffectVariant(type) {
+  return EFFECT_VARIANT[type] ?? "default";
+}
+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":
+      return { positive: true, className: TAG_LAYOUT_CLASS };
+    case "error":
+      return { negative: true, className: TAG_LAYOUT_CLASS };
+    case "assign":
+      return { neutral: true, className: TAG_LAYOUT_CLASS };
+    case "hide":
+    case "mandatory":
+    case "warning":
+    case "feedback":
+    case "message":
+    case "read":
+      return {
+        className: `${TAG_LAYOUT_CLASS} ${EFFECT_VISUALS[variant].tagClassName}`
+      };
+    default:
+      return {
+        className: `${TAG_LAYOUT_CLASS} ${EFFECT_VISUALS.default.tagClassName}`
+      };
+  }
+}
+function getEffectTagRenderProps(type) {
+  return tagPropsForVariant(getEffectVariant(type));
+}
+function getEffectTagRenderPropsForVariant(variant) {
+  return tagPropsForVariant(variant);
+}
+function getEffectEdgeStroke(type, highlighted = true) {
+  const { edgeStroke } = getEffectVisual(type);
+  if (highlighted) {
+    return edgeStroke;
+  }
+  return "#bdbdbd";
+}
+function getEffectShortLabel(type) {
+  return getEffectVisual(type).shortLabel;
+}
+function translate(message, variables) {
+  return String(i18n.t(message, variables));
+}
+function EffectBadge({ type, children, className = "" }) {
+  const variant = getEffectVariant(type);
+  const Icon = EFFECT_ICONS[variant];
+  const tagProps = getEffectTagRenderProps(type);
+  const label = children ?? type;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...tagProps,
+      icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+      className: [tagProps.className, className].filter(Boolean).join(" "),
+      maxWidth: "100%",
+      children: label
+    }
+  );
+}
+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__ */ 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 tagProps = getEffectTagRenderPropsForVariant(item.variant);
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ...tagProps,
+        icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+        maxWidth: "100%",
+        children: item.label
+      },
+      item.variant
+    );
+  }) });
+}
+
+// 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 });
+  }
+  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/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(
+      (rule) => toCatalogRule({
+        id: rule.id,
+        name: rule.name ?? rule.id,
+        condition: rule.condition,
+        priority: rule.priority,
+        programRuleActions: rule.programRuleActions,
+        programStageId: rule.programStage?.id ?? null
+      })
+    )
+  );
+}
+
+// src/constants.ts
+var DEFAULT_TRACE_MAX_ENTRIES = 200;
+
+// src/traceStore.ts
+function createRuleTraceStore(maxEntries = DEFAULT_TRACE_MAX_ENTRIES) {
+  let entries = [];
+  const listeners = /* @__PURE__ */ new Set();
+  let disposeTraceSubscription = null;
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  return {
+    record(entry) {
+      entries = [...entries, entry].slice(-maxEntries);
+      notify();
+    },
+    getSnapshot() {
+      return entries;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    dispose() {
+      disposeTraceSubscription?.();
+      disposeTraceSubscription = null;
+      listeners.clear();
+    },
+    bindTraceSubscription(unsubscribe) {
+      disposeTraceSubscription = unsubscribe;
+    }
+  };
+}
+
+// src/attach.ts
+function attachRuleDevtools(formStore, options) {
+  const store = createRuleTraceStore(
+    DEFAULT_TRACE_MAX_ENTRIES
+  );
+  store.bindTraceSubscription(formStore.subscribeTrace(store.record));
+  return store;
+}
+var RuleTraceContext = createContext(null);
+function RuleDevtoolsScope({ formStore, children }) {
+  const traceStore = useMemo(() => attachRuleDevtools(formStore), [formStore]);
+  useEffect(() => {
+    return () => {
+      traceStore.dispose();
+    };
+  }, [traceStore]);
+  return /* @__PURE__ */ jsx(RuleTraceContext.Provider, { value: traceStore, children });
+}
+function useRuleTraceStore() {
+  const store = useContext(RuleTraceContext);
+  if (!store) {
+    throw new Error("useRuleTraceStore must be used within RuleDevtoolsScope");
+  }
+  return store;
+}
+
+// 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 staggerOffset(indexInBucket) {
+  if (indexInBucket === 0) {
+    return 0;
+  }
+  const magnitude = Math.ceil(indexInBucket / 2) * STAGGER;
+  return indexInBucket % 2 === 1 ? magnitude : -magnitude;
+}
+function columnFor(node) {
+  if (node.role === "target" && node.kind === "feedback") {
+    return FEEDBACK_COLUMN;
+  }
+  return ROLE_COLUMNS[node.role];
+}
+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;
+}
+
+// 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"}`;
+}
+function getLegendSwatchClassName(kind) {
+  return `size-2.5 shrink-0 rounded-sm ${LEGEND_SWATCH_CLASSES[kind]}`;
+}
+
+// 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];
+  }
+  return entries[entries.length - 1];
+}
+function getActiveRuleIds(entries) {
+  const latest = resolveGraphTraceEntry(entries);
+  if (!latest) {
+    return /* @__PURE__ */ new Set();
+  }
+  return new Set(latest.ruleResults.map((result) => result.ruleId));
+}
+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: MarkerType.ArrowClosed,
+    color: getEffectEdgeStroke("default")
+  }
+};
+function RuleGraphNode({ data }) {
+  return /* @__PURE__ */ jsxs("div", { className: getGraphNodeClassName(data.kind, data.highlighted), children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "break-words font-semibold leading-[1.3]", children: data.label }),
+    data.value !== void 0 ? /* @__PURE__ */ 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__ */ jsx(Handle, { type: "source", position: Position.Right })
+  ] });
+}
+var nodeTypes = {
+  ruleGraphNode: memo(RuleGraphNode)
+};
+function RuleGraphEdge({
+  id,
+  sourceX,
+  sourceY,
+  sourcePosition,
+  targetX,
+  targetY,
+  targetPosition,
+  markerEnd,
+  style,
+  data
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    offset: data?.offset ?? 20
+  });
+  const showLabel = data ? data.showLabel || hovered : false;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, markerEnd, style }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 16,
+        onMouseEnter: () => {
+          setHovered(true);
+        },
+        onMouseLeave: () => {
+          setHovered(false);
+        }
+      }
+    ),
+    showLabel && data ? /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ 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
+  ] });
+}
+var edgeTypes = {
+  ruleGraphEdge: 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;
+}
+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: 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__ */ jsxs("div", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-dp8 px-dp12 py-dp8", children: [
+      /* @__PURE__ */ 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__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-dp8 text-xs text-dhis2-grey-800",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: getLegendSwatchClassName(item.kind) }),
+                item.label
+              ]
+            },
+            item.kind
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-dhis2-grey-600", children: translate("{{nodes}} nodes \xB7 {{edges}} edges", {
+          nodes: nodeCount,
+          edges: edgeCount
+        }) }),
+        headerActions
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(EffectLegend, { activeVariants: activeEffectVariants })
+  ] });
+}
+function FitViewOnChange({
+  layoutKey,
+  nodeCount,
+  edgeCount
+}) {
+  const { fitView } = useReactFlow();
+  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] = useNodesState(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutEdges);
+  useEffect(() => {
+    setNodes((current) => mergeNodePositions(layoutNodes, current));
+  }, [layoutNodes, setNodes]);
+  useEffect(() => {
+    setEdges(layoutEdges);
+  }, [layoutEdges, setEdges]);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          FitViewOnChange,
+          {
+            layoutKey,
+            nodeCount: nodes.length,
+            edgeCount: edges.length
+          }
+        ),
+        /* @__PURE__ */ jsx(Background, { gap: 16, size: 1 }),
+        /* @__PURE__ */ jsx(Controls, { showInteractive: false })
+      ]
+    }
+  );
+}
+function RuleGraphView({
+  entries,
+  fieldState,
+  formValues,
+  selectedEntryId,
+  highlightRuleId,
+  labelLookup,
+  className,
+  layoutKey,
+  headerActions,
+  minHeightClassName = "min-h-[360px]"
+}) {
+  const graphEntry = useMemo(
+    () => resolveGraphTraceEntry(entries, selectedEntryId),
+    [entries, selectedEntryId]
+  );
+  const graph = useMemo(
+    () => graphEntry ? buildGraphFromTrace([graphEntry], labelLookup) : { nodes: [], edges: [] },
+    [graphEntry, labelLookup]
+  );
+  const highlightedKeys = 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 } = useMemo(
+    () => toFlowGraph(graph, fieldState, formValues, highlightedKeys),
+    [graph, fieldState, formValues, highlightedKeys]
+  );
+  const activeEffectVariants = 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__ */ jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(
+          GraphToolbar,
+          {
+            nodeCount: graph.nodes.length,
+            edgeCount: graph.edges.length,
+            headerActions,
+            activeEffectVariants
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${minHeightClassName} flex-1 bg-white`,
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(RuleGraphCanvas, { nodes, edges, layoutKey }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function RuleGraphModal({
+  open,
+  onClose,
+  subtitle,
+  layoutKey,
+  ...graphProps
+}) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Modal, { large: true, fluid: true, onClose, children: [
+    /* @__PURE__ */ jsxs(ModalTitle, { children: [
+      translate("Rule dependency graph"),
+      subtitle ? /* @__PURE__ */ jsx("span", { className: "mt-dp4 block text-sm font-normal text-dhis2-grey-700", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx(ModalContent, { className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "h-[min(85vh,900px)] w-full min-w-[min(1200px,92vw)]", children: /* @__PURE__ */ jsx(
+      RuleGraphView,
+      {
+        ...graphProps,
+        layoutKey: layoutKey ?? "modal",
+        className: "h-full min-h-0 rounded-none border-0",
+        minHeightClassName: "min-h-0 h-full"
+      }
+    ) }) })
+  ] });
+}
+function resolveLabel(id, resolver) {
+  const label = resolver?.(id) ?? id;
+  return { label, showId: label !== id };
+}
+function resolveEffectTargetLabel(effect, labelLookup) {
+  if (effect.type === "HIDESECTION") {
+    return resolveLabel(
+      effect.targetId,
+      labelLookup ? (id) => labelLookup.resolveSectionName(id) : void 0
+    );
+  }
+  if (effect.type === "DISPLAYTEXT" || effect.type === "DISPLAYKEYVALUEPAIR") {
+    return { label: effect.targetId, showId: false };
+  }
+  return resolveLabel(
+    effect.targetId,
+    labelLookup ? (id) => labelLookup.resolveFieldName(id) : void 0
+  );
+}
+function TraceTimeline({
+  entries,
+  selectedEntryId,
+  highlightRuleId,
+  onSelectEntry,
+  onHighlightRule,
+  labelLookup
+}) {
+  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (!entries.length) {
+      setExpandedIds(/* @__PURE__ */ new Set());
+      return;
+    }
+    const newestId = entries[entries.length - 1]?.id;
+    if (!newestId) {
+      return;
+    }
+    setExpandedIds((current) => {
+      if (current.size > 0) {
+        return current;
+      }
+      return /* @__PURE__ */ new Set([newestId]);
+    });
+  }, [entries]);
+  if (!entries.length) {
+    return /* @__PURE__ */ jsx("div", { className: "p-dp8", children: /* @__PURE__ */ jsx(NoticeBox, { title: translate("No rules observed yet"), children: translate(
+      "Interact with the form to record rule evaluations. Only rules that have fired at least once appear here."
+    ) }) });
+  }
+  const reversed = [...entries].reverse();
+  const toggleExpanded = (entryId) => {
+    setExpandedIds((current) => {
+      const next = new Set(current);
+      if (next.has(entryId)) {
+        next.delete(entryId);
+      } else {
+        next.add(entryId);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-dp12 p-0", children: reversed.map((entry) => {
+    const isInitial = entry.changedFields.length === 0;
+    const ruleCount = entry.ruleResults.length;
+    const effectCount = entry.ruleResults.reduce(
+      (total, result) => total + result.effects.length,
+      0
+    );
+    const isExpanded = expandedIds.has(entry.id);
+    const isSelected = selectedEntryId === entry.id;
+    return /* @__PURE__ */ jsx("li", { className: "m-0", children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: `overflow-hidden rounded-md border border-dhis2-grey-300 bg-white shadow-[0_1px_2px_rgb(0_0_0/4%)] transition-[border-color,box-shadow] duration-150 ease-out ${isSelected ? "border-dhis2-teal-600 shadow-[0_0_0_1px_var(--color-dhis2-teal-600),0_2px_8px_rgb(0_137_123/12%)]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-dp4 bg-dhis2-grey-050 py-dp4 pe-dp8 ps-dp4", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex size-10 min-h-10 min-w-10 shrink-0 cursor-pointer items-center justify-center self-center rounded border-none bg-transparent text-dhis2-grey-700 hover:bg-dhis2-grey-200 focus-visible:outline-2 focus-visible:outline-dhis2-teal-600 focus-visible:outline-offset-1",
+                "aria-expanded": isExpanded,
+                "aria-label": isExpanded ? translate("Collapse evaluation details") : translate("Expand evaluation details"),
+                onClick: () => {
+                  toggleExpanded(entry.id);
+                },
+                children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown16, {}) : /* @__PURE__ */ jsx(IconChevronRight16, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex min-h-11 min-w-0 flex-1 cursor-pointer items-center justify-between gap-dp12 rounded border-none bg-transparent py-dp8 pe-dp8 ps-dp4 text-start font-[inherit] text-inherit hover:bg-white/80 focus-visible:outline-2 focus-visible:outline-dhis2-teal-600 focus-visible:outline-offset-1",
+                "aria-pressed": isSelected,
+                onClick: () => {
+                  onSelectEntry(entry.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start gap-0.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold leading-[1.3] text-dhis2-grey-900 tabular-nums", children: formatAgo(entry.timestamp) }),
+                    !isExpanded && effectCount > 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs leading-[1.3] text-dhis2-grey-600", children: translate("{{count}} effects", {
+                      count: effectCount
+                    }) }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      className: isInitial ? "shrink-0" : void 0,
+                      neutral: !isInitial,
+                      children: isInitial ? translate("Initial") : translate("{{count}} rules", { count: ruleCount })
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          isExpanded ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-dp16 border-t border-dhis2-grey-200 p-dp16", children: [
+            isInitial ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: ruleCount ? translate("{{count}} effects on load", {
+              count: effectCount
+            }) : translate("No rules fired") }) : /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-dp8", children: [
+              /* @__PURE__ */ jsx("h3", { className: "m-0 text-[0.6875rem] font-bold uppercase leading-[1.3] tracking-wider text-dhis2-grey-600", children: translate("Changed fields") }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-dp8", children: entry.changedFields.map((fieldId) => {
+                const { label, showId } = resolveLabel(
+                  fieldId,
+                  labelLookup ? (id) => labelLookup.resolveFieldName(id) : void 0
+                );
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex max-w-full flex-col gap-0.5",
+                    children: /* @__PURE__ */ jsx(
+                      Tag,
+                      {
+                        neutral: true,
+                        className: `max-w-full break-words text-xs ${showId ? "" : "font-mono break-all"}`,
+                        children: label
+                      }
+                    )
+                  },
+                  fieldId
+                );
+              }) })
+            ] }),
+            entry.ruleResults.length === 0 ? !isInitial ? /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("No rules fired") }) : null : /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-dp8", children: [
+              !isInitial ? /* @__PURE__ */ jsx("h3", { className: "m-0 text-[0.6875rem] font-bold uppercase leading-[1.3] tracking-wider text-dhis2-grey-600", children: translate("Rules fired") }) : null,
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-dp12", children: entry.ruleResults.map((result, index) => {
+                const { label: displayName } = resolveLabel(
+                  result.ruleId,
+                  labelLookup ? (id) => labelLookup.resolveRuleName(id) : void 0
+                );
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "rounded border border-dhis2-grey-200 bg-dhis2-grey-050 p-dp12",
+                    children: [
+                      index > 0 ? /* @__PURE__ */ jsx(Divider, { margin: "12px 0" }) : null,
+                      /* @__PURE__ */ jsx("div", { className: "mb-dp12 flex flex-col items-start gap-dp4", children: /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          selected: highlightRuleId === result.ruleId,
+                          onClick: (_, event) => {
+                            event.stopPropagation();
+                            onHighlightRule(
+                              highlightRuleId === result.ruleId ? null : result.ruleId
+                            );
+                          },
+                          children: displayName
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-dp12 p-0", children: result.effects.map((effect) => {
+                        const {
+                          label: targetLabel,
+                          showId: showTargetId
+                        } = resolveEffectTargetLabel(
+                          effect,
+                          labelLookup
+                        );
+                        return /* @__PURE__ */ jsxs(
+                          "li",
+                          {
+                            className: "flex flex-col gap-dp4",
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-dp8", children: [
+                                /* @__PURE__ */ jsx(
+                                  EffectBadge,
+                                  {
+                                    type: effect.type
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: `break-words text-[0.8125rem] leading-[1.45] text-dhis2-grey-800 ${showTargetId ? "" : "break-all font-mono"}`,
+                                    children: targetLabel
+                                  }
+                                )
+                              ] }),
+                              effect.data ? /* @__PURE__ */ jsx("p", { className: "m-0 ps-dp4 text-[0.8125rem] leading-[1.45] break-words text-dhis2-grey-600", children: effect.data }) : null
+                            ]
+                          },
+                          `${effect.type}-${effect.targetId}-${effect.data ?? ""}`
+                        );
+                      }) })
+                    ]
+                  },
+                  result.ruleId
+                );
+              }) })
+            ] })
+          ] }) : null
+        ]
+      }
+    ) }, entry.id);
+  }) });
+}
+function resolveScopeStageId(metadata) {
+  return metadata.formKind === "event" ? metadata.programStageId : null;
+}
+function isRuleInScope(rule, scopeStageId) {
+  return rule.programStageId === null || rule.programStageId === scopeStageId;
+}
+function resolveAccentClassName(inScope, firing, selected) {
+  if (selected) {
+    return "bg-dhis2-blue-600";
+  }
+  if (!inScope) {
+    return "bg-transparent";
+  }
+  return firing ? "bg-dhis2-teal-600" : "bg-dhis2-grey-400";
+}
+function resolveCardStatus(inScope, firing) {
+  if (!inScope) {
+    return { label: translate("Out of scope"), className: "text-dhis2-grey-500" };
+  }
+  return firing ? { label: translate("Firing"), className: "text-dhis2-teal-700" } : { label: translate("Idle"), className: "text-dhis2-grey-600" };
+}
+function formatActionLabel(action) {
+  if (action.targetLabel && action.detail) {
+    return `${action.type} \xB7 ${action.targetLabel} = ${action.detail}`;
+  }
+  if (action.targetLabel) {
+    return `${action.type} \xB7 ${action.targetLabel}`;
+  }
+  return action.type;
+}
+function countObservedRules(entries) {
+  const ruleIds = /* @__PURE__ */ new Set();
+  for (const entry of entries) {
+    for (const result of entry.ruleResults) {
+      ruleIds.add(result.ruleId);
+    }
+  }
+  return ruleIds.size;
+}
+var PANEL_TAB_KEYS = ["rules", "trace", "graph"];
+function resolveTabLabel(key) {
+  switch (key) {
+    case "rules":
+      return translate("Rules");
+    case "trace":
+      return translate("Trace");
+    case "graph":
+      return translate("Graph");
+  }
+}
+function RulesPanel({ metadata, showConditions = true }) {
+  const formStore = useFormStore();
+  const { form } = useFormStateContext();
+  const traceStore = useRuleTraceStore();
+  const [tab, setTab] = useState("rules");
+  const [selectedEntryId, setSelectedEntryId] = useState(null);
+  const [highlightRuleId, setHighlightRuleId] = useState(null);
+  const [graphModalOpen, setGraphModalOpen] = useState(false);
+  const labelLookup = useMemo(() => createLabelLookup(metadata), [metadata]);
+  const catalog = useMemo(() => resolveProgramRulesList(metadata), [metadata]);
+  const scopeStageId = useMemo(() => resolveScopeStageId(metadata), [metadata]);
+  const entries = useSyncExternalStore(
+    useCallback((listener) => traceStore.subscribe(listener), [traceStore]),
+    useCallback(() => traceStore.getSnapshot(), [traceStore]),
+    useCallback(() => traceStore.getSnapshot(), [traceStore])
+  );
+  const fieldState = useSyncExternalStore(
+    useCallback((listener) => formStore.fieldStore.subscribeAll(listener), [formStore]),
+    useCallback(() => formStore.fieldStore.getSnapshot(), [formStore]),
+    useCallback(() => formStore.fieldStore.getSnapshot(), [formStore])
+  );
+  const activeRuleIds = useMemo(() => getActiveRuleIds(entries), [entries]);
+  const scopedRules = useMemo(
+    () => catalog.filter((rule) => isRuleInScope(rule, scopeStageId)),
+    [catalog, scopeStageId]
+  );
+  const firingCount = useMemo(
+    () => scopedRules.filter((rule) => activeRuleIds.has(rule.id)).length,
+    [scopedRules, activeRuleIds]
+  );
+  const selectedEntry = useMemo(
+    () => entries.find((entry) => entry.id === selectedEntryId) ?? null,
+    [entries, selectedEntryId]
+  );
+  const observedRuleCount = useMemo(() => countObservedRules(entries), [entries]);
+  const highlightedRuleName = useMemo(() => {
+    if (!highlightRuleId) {
+      return null;
+    }
+    return labelLookup.resolveRuleName(highlightRuleId);
+  }, [highlightRuleId, labelLookup]);
+  const graphHasNodes = useMemo(() => {
+    const entry = resolveGraphTraceEntry(entries, selectedEntryId);
+    return entry ? buildGraphFromTrace([entry], labelLookup).nodes.length > 0 : false;
+  }, [entries, labelLookup, selectedEntryId]);
+  const graphSubtitle = useMemo(() => {
+    if (selectedEntry && highlightedRuleName) {
+      return translate("Highlighting evaluation {{time}} \xB7 Rule: {{name}}", {
+        time: formatAgo(selectedEntry.timestamp),
+        name: highlightedRuleName
+      });
+    }
+    if (selectedEntry) {
+      return translate("Highlighting evaluation {{time}}", {
+        time: formatAgo(selectedEntry.timestamp)
+      });
+    }
+    if (highlightedRuleName) {
+      return translate("Rule: {{name}}", { name: highlightedRuleName });
+    }
+    return null;
+  }, [highlightedRuleName, selectedEntry]);
+  const graphProps = {
+    entries,
+    fieldState,
+    formValues: form.getValues(),
+    selectedEntryId,
+    highlightRuleId,
+    labelLookup
+  };
+  const expandGraphButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex size-11 min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded border border-dhis2-grey-300 bg-white text-dhis2-grey-800 hover:bg-dhis2-grey-100 focus-visible:outline-2 focus-visible:outline-dhis2-teal-600 focus-visible:outline-offset-1",
+      "aria-label": translate("Open graph in full screen"),
+      onClick: () => {
+        setGraphModalOpen(true);
+      },
+      children: /* @__PURE__ */ jsx(IconFullscreen16, {})
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: "flex h-full w-[404px] min-w-[320px] max-w-[min(92vw,480px)] flex-col border-s border-dhis2-grey-400 bg-dhis2-grey-100",
+      "aria-label": translate("Rules"),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "shrink-0 border-b border-dhis2-grey-200 bg-white px-dp16 pt-dp12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-dp12 pb-[10px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-dp8", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "size-2 shrink-0 rounded-full bg-dhis2-teal-600",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("h2", { className: "m-0 text-base font-bold leading-[1.35] text-dhis2-grey-900", children: translate("Rules") })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-dhis2-grey-600", children: translate("{{scoped}} in scope \xB7 {{firing}} firing", {
+              scoped: scopedRules.length,
+              firing: firingCount
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex", children: PANEL_TAB_KEYS.map((key) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `cursor-pointer border-0 border-b-[3px] bg-transparent px-dp12 py-dp8 text-sm font-medium ${tab === key ? "border-b-dhis2-blue-600 text-dhis2-blue-600" : "border-b-transparent text-dhis2-grey-700"}`,
+              onClick: () => {
+                setTab(key);
+              },
+              children: resolveTabLabel(key)
+            },
+            key
+          )) })
+        ] }),
+        tab !== "rules" && (selectedEntry || highlightedRuleName) ? /* @__PURE__ */ jsxs("div", { className: "mx-dp16 mt-dp12 flex shrink-0 items-center justify-between gap-dp12 rounded border border-dhis2-teal-400 bg-dhis2-teal-050 p-dp12 text-[0.8125rem] leading-[1.45] text-dhis2-grey-900", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            selectedEntry ? translate("Highlighting evaluation {{time}}", {
+              time: formatAgo(selectedEntry.timestamp)
+            }) : null,
+            selectedEntry && highlightedRuleName ? " \xB7 " : null,
+            highlightedRuleName ? translate("Rule: {{name}}", { name: highlightedRuleName }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              small: true,
+              onClick: () => {
+                setSelectedEntryId(null);
+                setHighlightRuleId(null);
+              },
+              children: translate("Clear")
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-dp16", children: tab === "rules" ? /* @__PURE__ */ jsx(
+          RulesTab,
+          {
+            catalog,
+            scopeStageId,
+            activeRuleIds,
+            selectedRuleId: highlightRuleId,
+            showConditions,
+            labelLookup,
+            onSelectRule: (ruleId) => {
+              setHighlightRuleId(ruleId);
+              setTab("graph");
+            }
+          }
+        ) : tab === "trace" ? /* @__PURE__ */ jsx(
+          TraceTimeline,
+          {
+            entries,
+            selectedEntryId,
+            highlightRuleId,
+            onSelectEntry: (entryId) => {
+              setSelectedEntryId((current) => current === entryId ? null : entryId);
+            },
+            onHighlightRule: (ruleId) => {
+              setHighlightRuleId(ruleId);
+              if (ruleId) {
+                setTab("graph");
+              }
+            },
+            labelLookup
+          }
+        ) : /* @__PURE__ */ jsx(
+          RuleGraphView,
+          {
+            ...graphProps,
+            headerActions: graphHasNodes ? expandGraphButton : void 0
+          }
+        ) }),
+        entries.length > 0 && tab !== "rules" ? /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", children: translate("{{evaluations}} evaluations \xB7 {{rules}} rules observed", {
+          evaluations: entries.length,
+          rules: observedRuleCount
+        }) }) : null,
+        /* @__PURE__ */ jsx(
+          RuleGraphModal,
+          {
+            ...graphProps,
+            open: graphModalOpen,
+            onClose: () => {
+              setGraphModalOpen(false);
+            },
+            subtitle: graphSubtitle,
+            layoutKey: graphModalOpen ? "open" : "closed"
+          }
+        )
+      ]
+    }
+  );
+}
+function RulesTab({
+  catalog,
+  scopeStageId,
+  activeRuleIds,
+  selectedRuleId,
+  showConditions,
+  labelLookup,
+  onSelectRule
+}) {
+  if (!catalog.length) {
+    return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("This program has no rules.") });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-[10px] p-0", children: catalog.map((rule) => {
+    const inScope = isRuleInScope(rule, scopeStageId);
+    const firing = activeRuleIds.has(rule.id);
+    const isSelected = selectedRuleId === rule.id;
+    const status = resolveCardStatus(inScope, firing);
+    return /* @__PURE__ */ jsx("li", { className: "m-0 shrink-0", children: /* @__PURE__ */ jsxs(
+      "article",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: () => {
+          onSelectRule(rule.id);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onSelectRule(rule.id);
+          }
+        },
+        className: "relative flex cursor-pointer flex-col gap-dp8 rounded-[5px] border border-dhis2-grey-300 bg-white py-[11px] pe-[12px] ps-[14px] shadow-[0_1px_2px_rgb(0_0_0/4%)]",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `absolute inset-y-0 start-0 w-[3px] rounded-s-[5px] ${resolveAccentClassName(inScope, firing, isSelected)}`,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-dp8", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: `m-0 min-w-0 flex-1 text-sm font-semibold leading-[1.4] ${inScope ? "text-dhis2-grey-900" : "text-dhis2-grey-600"}`,
+                children: rule.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `shrink-0 text-[11px] font-semibold ${status.className}`,
+                children: status.label
+              }
+            )
+          ] }),
+          rule.programRuleActions.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-[6px]", children: rule.programRuleActions.map((action, index) => {
+            const summary = formatRuleActionSummary(
+              action,
+              labelLookup
+            );
+            return /* @__PURE__ */ jsx(
+              EffectBadge,
+              {
+                type: summary.type,
+                children: formatActionLabel(summary)
+              },
+              `${rule.id}-action-${String(index)}`
+            );
+          }) }) : null,
+          showConditions && rule.condition ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "m-0 break-words font-mono text-[11px] leading-[1.5] text-dhis2-grey-700",
+              title: rule.condition,
+              children: rule.condition
+            }
+          ) : null,
+          !inScope && rule.programStageId ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-dhis2-grey-600", children: translate("Applies to {{stage}}", {
+            stage: labelLookup.resolveStageName(rule.programStageId)
+          }) }) : null
+        ]
+      }
+    ) }, rule.id);
+  }) });
+}
+
+export { EFFECT_ICONS, RuleDevtoolsScope, RulesPanel, createLabelLookup, getEffectEdgeStroke, getEffectShortLabel, getEffectTagRenderProps, getEffectTagRenderPropsForVariant, getEffectVariant, getEffectVisual };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map