Update conflict management modal

app/(app)/create/components/ApplicableScopeField.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 /**
- * Shared "Applicable Scope" field used by the `decision-approaches` and
- * `conflict-management` create flow modals. Pairs an `InputLabel` with a
- * horizontally-wrapping list of toggle-chips plus an inline "+ Add" affordance
- * that reveals a pill text input for creating new scope values.
+ * Shared "Applicable Scope" field used by the `decision-approaches` create-flow
+ * modal. Pairs an `InputLabel` with a horizontally-wrapping list of
+ * toggle-chips plus an inline "+ Add" affordance that reveals a pill text input
+ * for creating new scope values. Conflict management uses
+ * `ModalTextAreaField` instead (Figma `20874:172292`).
  */
 
 import { memo, useState } from "react";

app/(app)/create/components/methodEditFields/ConflictManagementEditFields.tsx

@@ -7,11 +7,33 @@
  */
 
 import { memo, useCallback } from "react";
+import { formatConflictApplicableScopeForTextarea } from "../../../../../lib/create/ruleSectionsFromMethodSelections";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import ModalTextAreaField from "../ModalTextAreaField";
-import ApplicableScopeField from "../ApplicableScopeField";
 import type { ConflictManagementDetailEntry } from "../../types";
 
+function conflictScopeTextareaValue(value: ConflictManagementDetailEntry): string {
+  return formatConflictApplicableScopeForTextarea(
+    value.selectedApplicableScope,
+    value.applicableScope,
+  );
+}
+
+function conflictDetailWithScopeTextarea(
+  value: ConflictManagementDetailEntry,
+  text: string,
+): ConflictManagementDetailEntry {
+  const lines = text
+    .split("\n")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+  return {
+    ...value,
+    applicableScope: lines,
+    selectedApplicableScope: [...lines],
+  };
+}
+
 export interface ConflictManagementEditFieldsProps {
   value: ConflictManagementDetailEntry;
   onChange: (_next: ConflictManagementDetailEntry) => void;
@@ -41,22 +63,12 @@ function ConflictManagementEditFieldsComponent({
         value={value.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
       />
-      <ApplicableScopeField
+      <ModalTextAreaField
         label={t.sectionHeadings.applicableScope}
-        addLabel={t.scopeAddButtonLabel}
-        scopes={value.applicableScope}
-        selectedScopes={value.selectedApplicableScope}
-        onToggleScope={(scope) =>
-          patch(
-            "selectedApplicableScope",
-            value.selectedApplicableScope.includes(scope)
-              ? value.selectedApplicableScope.filter((s) => s !== scope)
-              : [...value.selectedApplicableScope, scope],
-          )
-        }
-        onAddScope={(scope) =>
-          patch("applicableScope", [...value.applicableScope, scope])
-        }
+        value={conflictScopeTextareaValue(value)}
+        placeholder={t.applicableScopePlaceholder}
+        onChange={(v) => onChange(conflictDetailWithScopeTextarea(value, v))}
+        rows={4}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.processProtocol}

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -6,7 +6,7 @@
  *
  * Card click opens the Figma "Add Approach" create modal (node `20874-172292`)
  * with four controls rendered by {@link ConflictManagementEditFields}: Core
- * Principle, Applicable Scope (capsules), Process Protocol, and Restoration
+ * Principle, Applicable Scope (text area), Process Protocol, and Restoration
  * & Fallbacks. The same field set is reused on `/create/final-review` — see
  * `FinalReviewChipEditModal`. Confirm persists both the chip selection and
  * any user edits as a `conflictManagementDetailsById[id]` override.