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

package/dist/index.js

@@ -1,2242 +1,7 @@
-import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, Modal, ModalContent, IconFullscreen16, SegmentedControl, Button, CircularLoader, ButtonStrip, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, ModalTitle } from '@dhis2/ui';
-import { useFormStore, useFormStateContext } from '@nnkogift/dhis2-form-utils-hooks';
-import { createContext, memo, useState, useMemo, useEffect, useSyncExternalStore, useCallback, useRef, useContext, useLayoutEffect } 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 { useDataQuery } from '@dhis2/app-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/programRuleDetailQuery.ts
-var PROGRAM_RULE_ACTION_DETAIL_FIELDS = [
-  "id",
-  "programRuleActionType",
-  "priority",
-  "content",
-  "data",
-  "location",
-  "dataElement[id,displayName]",
-  "trackedEntityAttribute[id,displayName]",
-  "option[id,displayName]",
-  "optionGroup[id,displayName]",
-  "programStageSection[id,displayName]",
-  "programStage[id,displayName]",
-  "programSection[id,displayName]"
-].join(",");
-var PROGRAM_RULE_DETAIL_FIELDS = [
-  "id",
-  "name",
-  "displayName",
-  "code",
-  "description",
-  "condition",
-  "priority",
-  "lastUpdated",
-  "lastUpdatedBy[displayName]",
-  "program[id,displayName]",
-  "programStage[id,displayName]",
-  `programRuleActions[${PROGRAM_RULE_ACTION_DETAIL_FIELDS}]`
-].join(",");
-var programRuleDetailQuery = {
-  programRule: {
-    resource: "programRules",
-    id: (variables) => variables.ruleId,
-    params: {
-      fields: PROGRAM_RULE_DETAIL_FIELDS
-    }
-  }
-};
-
-// src/useProgramRuleDetail.ts
-function isCurrentDetail(ruleId, detail) {
-  return ruleId != null && detail?.id === ruleId;
-}
-function resolveDetailState(ruleId, detail, hasError) {
-  const isCurrent = isCurrentDetail(ruleId, detail);
-  return {
-    detail: isCurrent ? detail : void 0,
-    loading: ruleId != null && !isCurrent && !hasError
-  };
-}
-function useProgramRuleDetail(ruleId) {
-  const { data, error, refetch } = useDataQuery(
-    programRuleDetailQuery,
-    { lazy: true }
-  );
-  useEffect(() => {
-    if (ruleId) {
-      void refetch({ ruleId });
-    }
-  }, [ruleId, refetch]);
-  return { ...resolveDetailState(ruleId, data?.programRule, Boolean(error)), error };
-}
-var EM_DASH = "\u2014";
-function formatTimestamp(value) {
-  if (!value) {
-    return null;
-  }
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return null;
-  }
-  const day = String(date.getDate());
-  const month = date.toLocaleString("en-GB", { month: "short" });
-  const year = String(date.getFullYear());
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  return `${day} ${month} ${year} ${hours}:${minutes}`;
-}
-function resolveStatusChip(status) {
-  switch (status) {
-    case "firing":
-      return {
-        label: translate("Firing"),
-        className: "bg-dhis2-teal-100 text-dhis2-teal-900"
-      };
-    case "idle":
-      return { label: translate("Idle"), className: "bg-dhis2-grey-200 text-dhis2-grey-700" };
-    case "out-of-scope":
-      return {
-        label: translate("Out of scope"),
-        className: "bg-dhis2-grey-200 text-dhis2-grey-600"
-      };
-  }
-}
-var VARIABLE_PATTERNS = [
-  {
-    pattern: /#\{[^}]*\}/g,
-    kind: "Data element",
-    className: "bg-dhis2-blue-100 text-dhis2-blue-900"
-  },
-  {
-    pattern: /A\{[^}]*\}/g,
-    kind: "Tracked entity attribute",
-    className: "bg-dhis2-teal-100 text-dhis2-teal-900"
-  },
-  {
-    pattern: /V\{[^}]*\}/g,
-    kind: "Environment variable",
-    className: "bg-dhis2-grey-200 text-dhis2-grey-900"
-  },
-  {
-    pattern: /d2:\w+(?=\()/g,
-    kind: "Function",
-    className: "bg-dhis2-yellow-100 text-dhis2-yellow-900"
-  }
-];
-var RESOLVABLE_VARIABLE_KINDS = /* @__PURE__ */ new Set([
-  "Data element",
-  "Tracked entity attribute"
-]);
-function resolveVariableDisplayName(name, programRuleVariables) {
-  const variable = programRuleVariables.find((candidate) => candidate.name === name);
-  return variable?.dataElement?.displayName ?? variable?.trackedEntityAttribute?.displayName;
-}
-function resolveVariableToken(token, kind, programRuleVariables) {
-  if (kind === "Function") {
-    return `${token}()`;
-  }
-  if (!RESOLVABLE_VARIABLE_KINDS.has(kind)) {
-    return token;
-  }
-  return resolveVariableDisplayName(token.slice(2, -1), programRuleVariables) ?? token;
-}
-function matchDistinctTokens(condition, pattern, seen) {
-  const matches = condition.match(pattern) ?? [];
-  const distinct = matches.filter((token) => !seen.has(token));
-  for (const token of distinct) {
-    seen.add(token);
-  }
-  return distinct;
-}
-function parseConditionVariables(condition, programRuleVariables) {
-  if (!condition) {
-    return [];
-  }
-  const seen = /* @__PURE__ */ new Set();
-  return VARIABLE_PATTERNS.flatMap(
-    ({ pattern, kind, className }) => matchDistinctTokens(condition, pattern, seen).map((token) => ({
-      token,
-      kind,
-      label: resolveVariableToken(token, kind, programRuleVariables),
-      className
-    }))
-  );
-}
-var ACTION_TARGET_RESOLVERS = [
-  { label: "Data element", getRef: (action) => action.dataElement },
-  { label: "Tracked entity attribute", getRef: (action) => action.trackedEntityAttribute },
-  { label: "Program stage section", getRef: (action) => action.programStageSection },
-  { label: "Program stage", getRef: (action) => action.programStage },
-  { label: "Option", getRef: (action) => action.option },
-  { label: "Option group", getRef: (action) => action.optionGroup }
-];
-function formatActionTargetValue(ref) {
-  return `${ref.displayName ?? ref.id} \xB7 ${ref.id}`;
-}
-function resolveActionTarget(action) {
-  for (const { label, getRef } of ACTION_TARGET_RESOLVERS) {
-    const ref = getRef(action);
-    if (ref?.id) {
-      return { label: translate(label), value: formatActionTargetValue(ref) };
-    }
-  }
-  return null;
-}
-function BasicDetailCell({ label, value, mono }) {
-  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsx("p", { className: "m-0 text-xs text-dhis2-grey-600", children: label }),
-    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "mb-dp12 flex items-center justify-between gap-dp8", children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: `inline-flex items-center gap-[4px] rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${visual.tagClassName}`,
-              children: [
-                /* @__PURE__ */ jsx(Icon, {}),
-                type
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-dhis2-grey-600", children: translate("Action {{n}}", { n: index + 1 }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-dp10", children: rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[172px_minmax(0,1fr)] gap-dp10", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-dhis2-grey-600", children: row.label }),
-          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("p", { className: "m-0 text-[11px] font-bold uppercase tracking-[.09em] text-dhis2-grey-600", children: translate("Program rule") }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-[6px] flex flex-wrap items-center gap-dp8", children: [
-      /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-medium leading-[1.3] text-dhis2-grey-900", children: title }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${chip.className}`,
-          children: chip.label
-        }
-      )
-    ] }),
-    description ? /* @__PURE__ */ 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__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Condition") }),
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "mt-dp12", children: [
-      /* @__PURE__ */ jsx("p", { className: "m-0 mb-dp8 text-xs text-dhis2-grey-600", children: translate("Variables referenced") }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-dp8", children: variables.map((variable) => /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: `inline-flex items-center gap-[4px] rounded-full px-dp8 py-[2px] text-xs ${variable.className}`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: variable.label }),
-            /* @__PURE__ */ jsx("span", { className: "opacity-70", children: translate(variable.kind) })
-          ]
-        },
-        variable.token
-      )) })
-    ] }) : null
-  ] });
-}
-function ActionsSection({ actions }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Actions") }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-dp12", children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionCard, { action, index }, action.id)) })
-  ] });
-}
-function RuleDetailsContent({
-  detail,
-  ruleName,
-  programStageName,
-  variables
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-dp24 pt-dp16", children: [
-    /* @__PURE__ */ jsxs("section", { children: [
-      /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Basic details") }),
-      /* @__PURE__ */ jsx(
-        BasicDetails,
-        {
-          rule: detail,
-          ruleName,
-          programStageName
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(ConditionSection, { condition: detail.condition, variables }),
-    /* @__PURE__ */ jsx(ActionsSection, { actions: detail.programRuleActions ?? [] })
-  ] });
-}
-function RuleDetailsBody({
-  detail,
-  loading,
-  error,
-  ruleName,
-  programStageName,
-  variables
-}) {
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex min-h-[280px] items-center justify-center", children: /* @__PURE__ */ jsx(CircularLoader, { small: true }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ 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__ */ jsx(
-    RuleDetailsContent,
-    {
-      detail,
-      ruleName,
-      programStageName,
-      variables
-    }
-  );
-}
-function RuleDetailsFooter({ onClose }) {
-  return /* @__PURE__ */ 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]",
-      children: [
-        /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-dhis2-grey-600", children: translate("Read-only view. Edit rules in the Maintenance app.") }),
-        /* @__PURE__ */ jsx(ButtonStrip, { children: /* @__PURE__ */ jsx(Button, { secondary: true, onClick: onClose, children: translate("Close") }) })
-      ]
-    }
-  );
-}
-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__ */ jsxs(Modal, { position: "middle", onClose, children: [
-    /* @__PURE__ */ jsx(RuleDetailsHeader, { title, chip, description: detail?.description }),
-    /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(
-      RuleDetailsBody,
-      {
-        detail,
-        loading,
-        error,
-        ruleName,
-        programStageName,
-        variables
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RuleDetailsFooter, { onClose })
-  ] });
-}
-
-// 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);
-  }) });
-}
-var REORDER_DURATION_MS = 220;
-var REORDER_EASING = "ease-out";
-function prefersReducedMotion() {
-  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function useFlipReorder(orderedIds, containerRef) {
-  const positionsRef = useRef(/* @__PURE__ */ new Map());
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    const previousPositions = positionsRef.current;
-    const items = container.querySelectorAll("[data-rule-id]");
-    if (!prefersReducedMotion()) {
-      items.forEach((item) => {
-        const id = item.dataset.ruleId;
-        if (!id) {
-          return;
-        }
-        const previousRect = previousPositions.get(id);
-        if (!previousRect) {
-          return;
-        }
-        const currentRect = item.getBoundingClientRect();
-        const deltaY = previousRect.top - currentRect.top;
-        if (deltaY === 0) {
-          return;
-        }
-        item.style.transition = "none";
-        item.style.transform = `translateY(${String(deltaY)}px)`;
-        item.getBoundingClientRect();
-        item.style.transition = `transform ${String(REORDER_DURATION_MS)}ms ${REORDER_EASING}`;
-        item.style.transform = "";
-      });
-    }
-    const nextPositions = /* @__PURE__ */ new Map();
-    items.forEach((item) => {
-      const id = item.dataset.ruleId;
-      if (id) {
-        nextPositions.set(id, item.getBoundingClientRect());
-      }
-    });
-    positionsRef.current = nextPositions;
-  }, [orderedIds.join("|")]);
-}
-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 resolveDetailsStatus(inScope, firing) {
-  if (!inScope) {
-    return "out-of-scope";
-  }
-  return firing ? "firing" : "idle";
-}
-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"];
-var SCOPE_FILTER_OPTIONS = [
-  { label: translate("In scope"), value: "scoped" },
-  { label: translate("All"), value: "all" }
-];
-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 [scopeFilter, setScopeFilter] = useState("scoped");
-  const [detailsRuleId, setDetailsRuleId] = useState(null);
-  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 detailsRule = useMemo(
-    () => catalog.find((rule) => rule.id === detailsRuleId) ?? null,
-    [catalog, detailsRuleId]
-  );
-  const detailsStatus = detailsRule ? resolveDetailsStatus(
-    isRuleInScope(detailsRule, scopeStageId),
-    activeRuleIds.has(detailsRule.id)
-  ) : "idle";
-  const detailsProgramStageName = detailsRule ? detailsRule.programStageId === null ? null : labelLookup.resolveStageName(detailsRule.programStageId) : void 0;
-  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__ */ jsxs("div", { className: "flex shrink-0 items-center gap-dp8", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-dhis2-grey-600", children: translate("{{scoped}} in scope \xB7 {{firing}} firing", {
-                scoped: scopedRules.length,
-                firing: firingCount
-              }) }),
-              /* @__PURE__ */ jsx(
-                SegmentedControl,
-                {
-                  options: SCOPE_FILTER_OPTIONS,
-                  selected: scopeFilter,
-                  onChange: ({ value }) => {
-                    setScopeFilter(value);
-                  }
-                }
-              )
-            ] })
-          ] }),
-          /* @__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,
-            scopeFilter,
-            activeRuleIds,
-            selectedRuleId: highlightRuleId,
-            showConditions,
-            labelLookup,
-            onSelectRule: (ruleId) => {
-              setHighlightRuleId(ruleId);
-              setTab("graph");
-            },
-            onOpenDetails: (ruleId) => {
-              setDetailsRuleId(ruleId);
-            }
-          }
-        ) : 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"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          RuleDetailsModal,
-          {
-            open: detailsRuleId != null,
-            onClose: () => {
-              setDetailsRuleId(null);
-            },
-            ruleId: detailsRuleId,
-            ruleName: detailsRule?.name ?? "",
-            status: detailsStatus,
-            programStageName: detailsProgramStageName,
-            programRuleVariables: metadata.metadata.programRuleVariables
-          }
-        )
-      ]
-    }
-  );
-}
-function sortRulesFiringFirst(visibleRules, activeRuleIds) {
-  const firing = [];
-  const idle = [];
-  for (const rule of visibleRules) {
-    (activeRuleIds.has(rule.id) ? firing : idle).push(rule);
-  }
-  return [...firing, ...idle];
-}
-function RulesTab({
-  catalog,
-  scopeStageId,
-  scopeFilter,
-  activeRuleIds,
-  selectedRuleId,
-  showConditions,
-  labelLookup,
-  onSelectRule,
-  onOpenDetails
-}) {
-  const listRef = useRef(null);
-  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
-  const sortedRules = useMemo(
-    () => sortRulesFiringFirst(visibleRules, activeRuleIds),
-    [visibleRules, activeRuleIds]
-  );
-  useFlipReorder(
-    useMemo(() => sortedRules.map((rule) => rule.id), [sortedRules]),
-    listRef
-  );
-  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.") });
-  }
-  if (!sortedRules.length) {
-    return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("No rules are in scope for this stage.") });
-  }
-  return /* @__PURE__ */ jsx("ul", { ref: listRef, className: "m-0 flex list-none flex-col gap-[10px] p-0", children: sortedRules.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", { "data-rule-id": rule.id, 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__ */ jsxs("span", { className: "flex shrink-0 items-center gap-[6px]", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `text-[11px] font-semibold ${status.className}`,
-                  children: status.label
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  title: translate("Program rule details"),
-                  "aria-label": translate("Program rule details"),
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    onOpenDetails(rule.id);
-                  },
-                  className: "inline-flex size-[22px] shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-transparent text-dhis2-grey-600 hover:bg-dhis2-grey-200 hover:text-dhis2-blue-600",
-                  children: /* @__PURE__ */ jsx(IconInfo16, {})
-                }
-              )
-            ] })
-          ] }),
-          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, RuleDetailsModal, RuleDevtoolsScope, RulesPanel, createLabelLookup, getEffectEdgeStroke, getEffectShortLabel, getEffectTagRenderProps, getEffectTagRenderPropsForVariant, getEffectVariant, getEffectVisual };
+export { RulesPanel } from './RulesPanel.js';
+export { RuleDetailsModal } from './RuleDetailsModal.js';
+export { RuleDevtoolsScope } from './RuleDevtoolsScope.js';
+export { EFFECT_ICONS, getEffectEdgeStroke, getEffectShortLabel, getEffectTagRenderProps, getEffectTagRenderPropsForVariant, getEffectVariant, getEffectVisual } from './effectStyles.js';
+export { createLabelLookup } from './createLabelLookup.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map