Merge pull request 'Give MultiSelect chips accessible names and start creation fields empty.' (#85) from adilallo/fix/CR-220-CR-209-chip-names-creation-modal into main

Reviewed-on: #85

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

@@ -35,6 +35,10 @@ import {
   conflictManagementPresetFor,
   coreValuePresetFor,
   decisionApproachPresetFor,
+  emptyCommunicationDetails,
+  emptyConflictManagementDetails,
+  emptyDecisionApproachTextFields,
+  emptyMembershipDetails,
   membershipPresetFor,
 } from "../../../../lib/create/finalReviewChipPresets";
 import { isCustomMethodCardId } from "../../../../lib/create/isCustomMethodCardId";
@@ -1129,6 +1133,7 @@ export function FinalReviewChipEditModal({
             <CoreValueEditFields
               value={draft.value}
               onChange={(value) => setDraft({ groupKey: "coreValues", value })}
+              generateDraft={coreValuePresetFor(target.overrideKey)}
             />
           ))}
         {draft?.groupKey === "communication" &&
@@ -1156,6 +1161,7 @@ export function FinalReviewChipEditModal({
               onChange={(value) =>
                 setDraft({ groupKey: "communication", value })
               }
+              generateDraft={communicationPresetFor(target.overrideKey)}
             />
           ))}
         {draft?.groupKey === "membership" &&
@@ -1183,6 +1189,7 @@ export function FinalReviewChipEditModal({
               onChange={(value) =>
                 setDraft({ groupKey: "membership", value })
               }
+              generateDraft={membershipPresetFor(target.overrideKey)}
             />
           ))}
         {draft?.groupKey === "decisionApproaches" &&
@@ -1210,6 +1217,7 @@ export function FinalReviewChipEditModal({
               onChange={(value) =>
                 setDraft({ groupKey: "decisionApproaches", value })
               }
+              generateDraft={decisionApproachPresetFor(target.overrideKey)}
             />
           ))}
         {draft?.groupKey === "conflictManagement" &&
@@ -1237,6 +1245,7 @@ export function FinalReviewChipEditModal({
               onChange={(value) =>
                 setDraft({ groupKey: "conflictManagement", value })
               }
+              generateDraft={conflictManagementPresetFor(target.overrideKey)}
             />
           ))}
       </div>
@@ -1324,52 +1333,63 @@ function seedDraftForTarget(
   switch (target.groupKey) {
     case "coreValues": {
       const saved = state.coreValueDetailsByChipId?.[target.overrideKey];
-      const preset = coreValuePresetFor(target.overrideKey);
+      if (saved) {
+        return {
+          groupKey: "coreValues",
+          value: {
+            meaning: saved.meaning,
+            signals: saved.signals,
+            ...(saved.supportText ? { supportText: saved.supportText } : {}),
+          },
+        };
+      }
       return {
         groupKey: "coreValues",
-        value: {
+        value: { meaning: "", signals: "" },
-          meaning: saved?.meaning ?? preset.meaning,
-          signals: saved?.signals ?? preset.signals,
-          ...(saved?.supportText ? { supportText: saved.supportText } : {}),
-        },
       };
     }
     case "communication": {
-      const saved =
+      const saved = state.communicationMethodDetailsById?.[target.overrideKey];
-        state.communicationMethodDetailsById?.[target.overrideKey] ??
+      return {
-        communicationPresetFor(target.overrideKey);
+        groupKey: "communication",
-      return { groupKey: "communication", value: { ...saved } };
+        value: { ...(saved ?? emptyCommunicationDetails()) },
+      };
     }
     case "membership": {
-      const saved =
+      const saved = state.membershipMethodDetailsById?.[target.overrideKey];
-        state.membershipMethodDetailsById?.[target.overrideKey] ??
+      return {
-        membershipPresetFor(target.overrideKey);
+        groupKey: "membership",
-      return { groupKey: "membership", value: { ...saved } };
+        value: { ...(saved ?? emptyMembershipDetails()) },
+      };
     }
     case "decisionApproaches": {
-      const saved =
+      const saved = state.decisionApproachDetailsById?.[target.overrideKey];
-        state.decisionApproachDetailsById?.[target.overrideKey] ??
+      const value = saved
-        decisionApproachPresetFor(target.overrideKey);
+        ? {
+            ...saved,
+            applicableScope: [...saved.applicableScope],
+            selectedApplicableScope: [...saved.selectedApplicableScope],
+          }
+        : emptyDecisionApproachTextFields(
+            decisionApproachPresetFor(target.overrideKey),
+          );
       return {
         groupKey: "decisionApproaches",
-        value: {
+        value,
-          ...saved,
-          applicableScope: [...saved.applicableScope],
-          selectedApplicableScope: [...saved.selectedApplicableScope],
-        },
       };
     }
     case "conflictManagement": {
-      const saved =
+      const saved = state.conflictManagementDetailsById?.[target.overrideKey];
-        state.conflictManagementDetailsById?.[target.overrideKey] ??
+      const value = saved
-        conflictManagementPresetFor(target.overrideKey);
+        ? {
+            ...saved,
+            applicableScope: [...saved.applicableScope],
+            selectedApplicableScope: [...saved.selectedApplicableScope],
+          }
+        : emptyConflictManagementDetails();
       return {
         groupKey: "conflictManagement",
-        value: {
+        value,
-          ...saved,
-          applicableScope: [...saved.applicableScope],
-          selectedApplicableScope: [...saved.selectedApplicableScope],
-        },
       };
     }
   }

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

@@ -1,10 +1,10 @@
 "use client";
 
 /**
- * Shared "labelled text area" field used by every create flow modal section.
+ * Shared labelled text area for create-flow modal sections.
- * Pairs an `InputLabel` with a `TextArea` set to the embedded appearance —
+ * Figma: "Step Modal" Text Area Section (23746:49780) when `generateDraftText`
- * matching the Figma "Control / Text Area" pattern. Section help marks stay
+ * is set — tall compose field + Generate draft control. Otherwise the
- * off until tooltip behavior ships.
+ * embedded Control / Text Area pattern.
  */
 
 import { memo, useId } from "react";
@@ -26,9 +26,40 @@ export interface ModalTextAreaFieldProps {
   placeholder?: string;
   /** Disable the field. */
   disabled?: boolean;
+  /**
+   * Catalog/preset copy inserted by Generate draft. When a non-empty string
+   * is passed, the Figma compose field + ghost control are shown.
+   */
+  generateDraftText?: string;
+  /** Visible label for the Generate draft control. */
+  generateDraftLabel?: string;
+  /** Hint beside Generate draft. */
+  generateDraftHint?: string;
   className?: string;
 }
 
+function PlusGlyph() {
+  return (
+    <svg
+      aria-hidden
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="shrink-0 text-[var(--color-content-default-brand-primary,#fefcc9)]"
+    >
+      <path
+        d="M7 3V11M3 7H11"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function ModalTextAreaFieldComponent({
   label,
   helpIcon = false,
@@ -37,12 +68,21 @@ function ModalTextAreaFieldComponent({
   rows = 4,
   placeholder,
   disabled = false,
+  generateDraftText,
+  generateDraftLabel,
+  generateDraftHint,
   className = "",
 }: ModalTextAreaFieldProps) {
   const labelId = useId();
+  const draftSource = generateDraftText?.trim() ?? "";
+  const showGenerateDraft =
+    draftSource.length > 0 && Boolean(generateDraftLabel);
+  const compose = showGenerateDraft;
 
   return (
-    <div className={`flex flex-col gap-2 ${className}`.trim()}>
+    <div
+      className={`flex flex-col ${compose ? "gap-[12px]" : "gap-2"} ${className}`.trim()}
+    >
       <div id={labelId}>
         <InputLabel
           label={label}
@@ -56,12 +96,29 @@ function ModalTextAreaFieldComponent({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         size="large"
-        rows={rows}
+        rows={compose ? 12 : rows}
-        appearance="embedded"
+        appearance={compose ? "compose" : "embedded"}
         placeholder={placeholder}
         disabled={disabled}
         aria-labelledby={labelId}
       />
+      {showGenerateDraft && !disabled ? (
+        <div className="flex items-center">
+          <button
+            type="button"
+            onClick={() => onChange(draftSource)}
+            className="flex shrink-0 items-center justify-center gap-[var(--measures-spacing-050,2px)] overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+          >
+            <PlusGlyph />
+            {generateDraftLabel}
+          </button>
+          {generateDraftHint ? (
+            <p className="text-[length:var(--sizing-300,12px)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
+              {generateDraftHint}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }

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

@@ -17,6 +17,8 @@ export interface CommunicationMethodEditFieldsProps {
   onChange: (_next: CommunicationMethodDetailEntry) => void;
   /** When true, fields are not editable (view mode). */
   readOnly?: boolean;
+  /** Catalog copy inserted by Generate draft. */
+  generateDraft?: CommunicationMethodDetailEntry;
 }
 
 const FIELDS: ReadonlyArray<keyof CommunicationMethodDetailEntry> = [
@@ -29,9 +31,11 @@ function CommunicationMethodEditFieldsComponent({
   value,
   onChange,
   readOnly = false,
+  generateDraft,
 }: CommunicationMethodEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.communication;
+  const draftField = m.create.draftField;
 
   const patch = useCallback(
     <K extends keyof CommunicationMethodDetailEntry>(
@@ -53,6 +57,10 @@ function CommunicationMethodEditFieldsComponent({
           value={value[field]}
           onChange={(v) => patch(field, v)}
           disabled={readOnly}
+          placeholder={draftField.placeholder}
+          generateDraftText={generateDraft?.[field]}
+          generateDraftLabel={draftField.generateDraft}
+          generateDraftHint={draftField.generateDraftHint}
         />
       ))}
     </div>

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

@@ -38,15 +38,19 @@ export interface ConflictManagementEditFieldsProps {
   value: ConflictManagementDetailEntry;
   onChange: (_next: ConflictManagementDetailEntry) => void;
   readOnly?: boolean;
+  /** Catalog copy inserted by Generate draft. */
+  generateDraft?: ConflictManagementDetailEntry;
 }
 
 function ConflictManagementEditFieldsComponent({
   value,
   onChange,
   readOnly = false,
+  generateDraft,
 }: ConflictManagementEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.conflictManagement;
+  const draftField = m.create.draftField;
 
   const patch = useCallback(
     <K extends keyof ConflictManagementDetailEntry>(
@@ -65,6 +69,10 @@ function ConflictManagementEditFieldsComponent({
         value={value.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.corePrinciple}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.applicableScope}
@@ -73,18 +81,35 @@ function ConflictManagementEditFieldsComponent({
         onChange={(v) => onChange(conflictDetailWithScopeTextarea(value, v))}
         rows={4}
         disabled={readOnly}
+        generateDraftText={
+          generateDraft && generateDraft.applicableScope.length > 0
+            ? generateDraft.applicableScope.join("\n")
+            : generateDraft
+              ? conflictScopeTextareaValue(generateDraft)
+              : undefined
+        }
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.processProtocol}
         value={value.processProtocol}
         onChange={(v) => patch("processProtocol", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.processProtocol}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       <ModalTextAreaField
         label={t.sectionHeadings.restorationFallbacks}
         value={value.restorationFallbacks}
         onChange={(v) => patch("restorationFallbacks", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.restorationFallbacks}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
     </div>
   );

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

@@ -17,15 +17,19 @@ export interface CoreValueEditFieldsProps {
   onChange: (_next: CoreValueDetailEntry) => void;
   /** Disable meaning/signals. Facet and final-review callers omit this so fields stay editable on open. */
   readOnly?: boolean;
+  /** Catalog copy inserted by Generate draft. */
+  generateDraft?: CoreValueDetailEntry;
 }
 
 function CoreValueEditFieldsComponent({
   value,
   onChange,
   readOnly = false,
+  generateDraft,
 }: CoreValueEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.coreValues.detailModal;
+  const draftField = m.create.draftField;
 
   const patch = useCallback(
     <K extends keyof CoreValueDetailEntry>(
@@ -45,6 +49,10 @@ function CoreValueEditFieldsComponent({
         onChange={(v) => patch("meaning", v)}
         rows={4}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.meaning}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       <ModalTextAreaField
         label={t.signalsLabel}
@@ -52,6 +60,10 @@ function CoreValueEditFieldsComponent({
         onChange={(v) => patch("signals", v)}
         rows={4}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.signals}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
     </div>
   );

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

@@ -19,6 +19,8 @@ export interface DecisionApproachEditFieldsProps {
   value: DecisionApproachDetailEntry;
   onChange: (_next: DecisionApproachDetailEntry) => void;
   readOnly?: boolean;
+  /** Catalog copy inserted by Generate draft on text fields. */
+  generateDraft?: DecisionApproachDetailEntry;
 }
 
 const CONSENSUS_LEVEL_MIN = 0;
@@ -29,9 +31,11 @@ function DecisionApproachEditFieldsComponent({
   value,
   onChange,
   readOnly = false,
+  generateDraft,
 }: DecisionApproachEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.decisionApproaches;
+  const draftField = m.create.draftField;
 
   const scopes = useMemo(
     () => withDecisionApproachKeyResourceScopes(value.applicableScope),
@@ -55,6 +59,10 @@ function DecisionApproachEditFieldsComponent({
         value={value.corePrinciple}
         onChange={(v) => patch("corePrinciple", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.corePrinciple}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       <ApplicableScopeField
         label={t.sectionHeadings.applicableScope}
@@ -79,6 +87,10 @@ function DecisionApproachEditFieldsComponent({
         value={value.stepByStepInstructions}
         onChange={(v) => patch("stepByStepInstructions", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.stepByStepInstructions}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
       {value.consensusLevel !== undefined ? (
         <IncrementerBlock
@@ -100,6 +112,10 @@ function DecisionApproachEditFieldsComponent({
         value={value.objectionsDeadlocks}
         onChange={(v) => patch("objectionsDeadlocks", v)}
         disabled={readOnly}
+        placeholder={draftField.placeholder}
+        generateDraftText={generateDraft?.objectionsDeadlocks}
+        generateDraftLabel={draftField.generateDraft}
+        generateDraftHint={draftField.generateDraftHint}
       />
     </div>
   );

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

@@ -16,6 +16,8 @@ export interface MembershipMethodEditFieldsProps {
   value: MembershipMethodDetailEntry;
   onChange: (_next: MembershipMethodDetailEntry) => void;
   readOnly?: boolean;
+  /** Catalog copy inserted by Generate draft. */
+  generateDraft?: MembershipMethodDetailEntry;
 }
 
 const FIELDS: ReadonlyArray<keyof MembershipMethodDetailEntry> = [
@@ -28,9 +30,11 @@ function MembershipMethodEditFieldsComponent({
   value,
   onChange,
   readOnly = false,
+  generateDraft,
 }: MembershipMethodEditFieldsProps) {
   const m = useMessages();
   const t = m.create.customRule.membership;
+  const draftField = m.create.draftField;
 
   const patch = useCallback(
     <K extends keyof MembershipMethodDetailEntry>(
@@ -52,6 +56,10 @@ function MembershipMethodEditFieldsComponent({
           value={value[field]}
           onChange={(v) => patch(field, v)}
           disabled={readOnly}
+          placeholder={draftField.placeholder}
+          generateDraftText={generateDraft?.[field]}
+          generateDraftLabel={draftField.generateDraft}
+          generateDraftHint={draftField.generateDraftHint}
         />
       ))}
     </div>

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

@@ -29,7 +29,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CommunicationMethodEditFields } from "../../components/methodEditFields";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
-import { communicationPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import { communicationPresetFor, emptyCommunicationDetails } from "../../../../../lib/create/finalReviewChipPresets";
 import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
 import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
 import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -146,7 +146,7 @@ export function CommunicationMethodsScreen() {
       if (saved) {
         return { ...saved };
       }
-      return communicationPresetFor(id);
+      return emptyCommunicationDetails();
     },
     [state.communicationMethodDetailsById],
   );
@@ -756,6 +756,7 @@ export function CommunicationMethodsScreen() {
             <CommunicationMethodEditFields
               value={pendingDraft}
               onChange={handleDraftChange}
+              generateDraft={communicationPresetFor(pendingCardId)}
             />
           )
         ) : null}

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

@@ -26,7 +26,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { ConflictManagementEditFields } from "../../components/methodEditFields";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
-import { conflictManagementPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import { conflictManagementPresetFor, emptyConflictManagementDetails } from "../../../../../lib/create/finalReviewChipPresets";
 import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
 import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
 import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -147,7 +147,7 @@ export function ConflictManagementScreen() {
           selectedApplicableScope: [...saved.selectedApplicableScope],
         };
       }
-      return conflictManagementPresetFor(id);
+      return emptyConflictManagementDetails();
     },
     [state.conflictManagementDetailsById],
   );
@@ -757,6 +757,7 @@ export function ConflictManagementScreen() {
             <ConflictManagementEditFields
               value={pendingDraft}
               onChange={handleDraftChange}
+              generateDraft={conflictManagementPresetFor(pendingCardId)}
             />
           )
         ) : null}

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

@@ -27,7 +27,7 @@ import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { MembershipMethodEditFields } from "../../components/methodEditFields";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
-import { membershipPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import { membershipPresetFor, emptyMembershipDetails } from "../../../../../lib/create/finalReviewChipPresets";
 import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
 import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
 import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -144,7 +144,7 @@ export function MembershipMethodsScreen() {
       if (saved) {
         return { ...saved };
       }
-      return membershipPresetFor(id);
+      return emptyMembershipDetails();
     },
     [state.membershipMethodDetailsById],
   );
@@ -750,6 +750,7 @@ export function MembershipMethodsScreen() {
             <MembershipMethodEditFields
               value={pendingDraft}
               onChange={handleDraftChange}
+              generateDraft={membershipPresetFor(pendingCardId)}
             />
           )
         ) : null}

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -33,7 +33,7 @@ import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoCo
 import { DecisionApproachEditFields } from "../../components/methodEditFields";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
-import { decisionApproachPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import { decisionApproachPresetFor, emptyDecisionApproachTextFields } from "../../../../../lib/create/finalReviewChipPresets";
 import {
   applyDecisionApproachKeyResources,
   decisionApproachKeyResourceCheckboxIds,
@@ -186,7 +186,7 @@ export function DecisionApproachesScreen() {
       if (saved) {
         return structuredClone(saved);
       }
-      return decisionApproachPresetFor(id);
+      return emptyDecisionApproachTextFields(decisionApproachPresetFor(id));
     },
     [state.decisionApproachDetailsById],
   );
@@ -840,6 +840,7 @@ export function DecisionApproachesScreen() {
             <DecisionApproachEditFields
               value={pendingDraft}
               onChange={handleDraftChange}
+              generateDraft={decisionApproachPresetFor(pendingCardId)}
             />
           )
         ) : null}

app/(app)/create/screens/select/CoreValuesSelectScreen.tsx

@@ -183,16 +183,16 @@ export function CoreValuesSelectScreen() {
   );
 
   const getInitialTexts = useCallback(
-    (chipId: string, valueLabel: string): CoreValueDetailEntry => {
+    (chipId: string, _valueLabel: string): CoreValueDetailEntry => {
       const saved = state.coreValueDetailsByChipId?.[chipId];
-      const preset = getPresetTexts(valueLabel);
+      if (!saved) return EMPTY_DETAIL;
       return {
-        meaning: saved?.meaning ?? preset.meaning,
+        meaning: saved.meaning,
-        signals: saved?.signals ?? preset.signals,
+        signals: saved.signals,
-        ...(saved?.supportText ? { supportText: saved.supportText } : {}),
+        ...(saved.supportText ? { supportText: saved.supportText } : {}),
       };
     },
-    [state.coreValueDetailsByChipId, getPresetTexts],
+    [state.coreValueDetailsByChipId],
   );
 
   const openModal = useCallback(
@@ -799,6 +799,7 @@ export function CoreValuesSelectScreen() {
             <CoreValueEditFields
               value={draft}
               onChange={handleDraftChange}
+              generateDraft={getPresetTexts(modalChipLabel)}
             />
           )}
         </Create>

app/components/controls/Chip/Chip.container.tsx

@@ -93,7 +93,7 @@ const ChipContainer = memo<ChipProps>(
         onInputChange={isCustom ? setInputValue : undefined}
         onInputKeyDown={isCustom ? handleKeyDown : undefined}
         inputRef={isCustom ? inputRef : undefined}
-        ariaLabel={ariaLabel}
+        ariaLabel={ariaLabel ?? (isCustom ? undefined : label)}
         confirmAriaLabel={t("chipConfirm")}
         typeToAddPlaceholder={t("chipTypeToAdd")}
         closeAriaLabel={t("chipClose")}

app/components/controls/Chip/Chip.view.tsx

@@ -156,7 +156,7 @@ function ChipView({
   };
 
   const sharedA11y = {
-    "aria-label": ariaLabel,
+    ...(ariaLabel ? { "aria-label": ariaLabel } : {}),
     ...(isToggle ? { "aria-pressed": isSelected } : {}),
   };
 

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -46,6 +46,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
         addButtonAriaLabel={
           addButtonText || t("multiSelectAddFallback")
         }
+        chipSelectAriaLabel={t("chipSelect")}
+        chipDeselectAriaLabel={t("chipDeselect")}
         formHeader={formHeader}
         onCustomChipConfirm={onCustomChipConfirm}
         onCustomChipClose={onCustomChipClose}

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -85,6 +85,8 @@ export interface MultiSelectViewProps {
   addButton: boolean;
   addButtonText?: string;
   addButtonAriaLabel: string;
+  chipSelectAriaLabel: string;
+  chipDeselectAriaLabel: string;
   formHeader: boolean;
   onCustomChipConfirm?: (chipId: string, value: string) => void;
   onCustomChipClose?: (chipId: string) => void;

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -16,6 +16,8 @@ function MultiSelectView({
   addButton,
   addButtonText,
   addButtonAriaLabel,
+  chipSelectAriaLabel,
+  chipDeselectAriaLabel,
   formHeader = true,
   onCustomChipConfirm,
   onCustomChipClose,
@@ -88,6 +90,14 @@ function MultiSelectView({
               palette={palette}
               size={chipSize}
               disabled={chipDisabled}
+              ariaLabel={
+                isCustom || !option.label
+                  ? undefined
+                  : (isSelected
+                      ? chipDeselectAriaLabel
+                      : chipSelectAriaLabel
+                    ).replace("{label}", option.label)
+              }
               onClick={() => {
                 if (!isCustom && !chipDisabled && onChipClick) {
                   onChipClick(option.id);

app/components/controls/TextArea/TextArea.container.tsx

@@ -86,6 +86,21 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       textarea: string;
       label: string;
     } => {
+      if (appearance === "compose") {
+        if (disabled) {
+          return {
+            textarea:
+              "border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-tertiary,#b4b4b4)] cursor-not-allowed opacity-60 min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)]",
+            label: "text-[var(--color-content-default-secondary)]",
+          };
+        }
+        return {
+          textarea:
+            "border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)] focus:outline-none focus:ring-0",
+          label: "text-[var(--color-content-default-secondary)]",
+        };
+      }
+
       if (appearance === "embedded") {
         if (disabled) {
           return {
@@ -161,8 +176,8 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     const textareaClasses = `
        scrollbar-design w-full transition-all duration-200 ease-in-out resize-none
-       ${appearance === "embedded" ? "rounded-[var(--radius-300,12px)]" : "border"}
+       ${appearance === "embedded" || appearance === "compose" ? "rounded-[var(--radius-300,12px)]" : "border"}
-       ${currentSize.textarea}
+       ${appearance === "compose" ? "text-medium-paragraph" : currentSize.textarea}
        ${stateStyles.textarea}
        ${className}
      `.trim();

app/components/controls/TextArea/TextArea.types.ts

@@ -1,9 +1,12 @@
-import type { InputStateValue } from "../../../../lib/propNormalization";
+import type {
+  InputStateValue,
+  TextAreaAppearanceValue,
+} from "../../../../lib/propNormalization";
 
 export type TextAreaSizeValue = "small" | "medium" | "large";
 export type TextAreaLabelVariantValue = "default" | "horizontal";
 
-export type TextAreaAppearanceValue = "default" | "embedded";
+export type { TextAreaAppearanceValue };
 
 export interface TextAreaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -49,7 +52,8 @@ export interface TextAreaProps extends Omit<
   /**
    * Visual appearance. "embedded" matches Create modal sections (Figma 20736-12668):
    * borderless, darker grey background, tertiary text in default (primary on
-   * focus). "default" is the standard bordered input.
+   * focus). "compose" is the tall empty creation field (Figma 23746:49780).
+   * "default" is the standard bordered input.
    * @default "default"
    */
   appearance?: TextAreaAppearanceValue;
@@ -79,7 +83,7 @@ export interface TextAreaViewProps {
   textHint?: boolean | string;
   formHeader?: boolean;
   showHelpIcon?: boolean;
-  appearance?: "default" | "embedded";
+  appearance?: TextAreaAppearanceValue;
   helpIconAlt: string;
   hintDefault: string;
 }

lib/create/finalReviewChipPresets.ts

@@ -14,11 +14,10 @@ import type {
 } from "../../app/(app)/create/types";
 
 /**
- * Per-method preset defaults shipped in `messages/en/create/customRule/*.json`.
+ * Catalog copy for method/value sections. Generate draft inserts these into
- * Used to seed the final-review edit modal when the user has no saved
+ * empty creation-modal fields. Publish still merges them onto saved overrides
- * override yet, and to merge onto overrides when emitting the published rule
+ * so every method carries a complete section payload when the author only
- * document so every method carries a complete section payload even if the
+ * edited a subset of fields.
- * author only edited a subset of fields.
  */
 type CustomRuleMethodRow = {
   id: string;
@@ -96,6 +95,10 @@ export function communicationPresetFor(
   };
 }
 
+export function emptyCommunicationDetails(): CommunicationMethodDetailEntry {
+  return { corePrinciple: "", logisticsAdmin: "", codeOfConduct: "" };
+}
+
 export function membershipPresetFor(id: string): MembershipMethodDetailEntry {
   const method = findMethod(membershipMessages, id);
   const s = method?.sections ?? {};
@@ -106,6 +109,10 @@ export function membershipPresetFor(id: string): MembershipMethodDetailEntry {
   };
 }
 
+export function emptyMembershipDetails(): MembershipMethodDetailEntry {
+  return { eligibility: "", joiningProcess: "", expectations: "" };
+}
+
 /** Default consensus level used when a **catalog** preset omits a value. */
 export const DECISION_CONSENSUS_LEVEL_DEFAULT = 75;
 
@@ -132,6 +139,20 @@ export function decisionApproachPresetFor(
   return entry;
 }
 
+/** Catalog scopes/consensus kept; text fields start empty for Generate draft. */
+export function emptyDecisionApproachTextFields(
+  preset: DecisionApproachDetailEntry,
+): DecisionApproachDetailEntry {
+  return {
+    ...preset,
+    corePrinciple: "",
+    stepByStepInstructions: "",
+    objectionsDeadlocks: "",
+    applicableScope: [...preset.applicableScope],
+    selectedApplicableScope: [...preset.selectedApplicableScope],
+  };
+}
+
 export function conflictManagementPresetFor(
   id: string,
 ): ConflictManagementDetailEntry {
@@ -146,11 +167,19 @@ export function conflictManagementPresetFor(
   };
 }
 
+export function emptyConflictManagementDetails(): ConflictManagementDetailEntry {
+  return {
+    corePrinciple: "",
+    applicableScope: [],
+    selectedApplicableScope: [],
+    processProtocol: "",
+    restorationFallbacks: "",
+  };
+}
+
 /**
- * Preset meaning/signals for a core value chip. Mirrors `CoreValuesSelectScreen`'s
+ * Preset meaning/signals for a core value chip. Used by Generate draft and
- * `getInitialTexts` so the final-review edit modal opens with the same
+ * by publish/display merge when the author has not saved an override.
- * preset copy the select screen would have shown — without requiring the
- * user to have opened the select-screen modal first.
  *
  * Lookup order:
  * 1. Numeric chip id → 1-based index into `coreValues.json` `values[]`

lib/create/methodCardWizardPrefill.ts

@@ -89,46 +89,6 @@ function clampPercent(n: number): number {
   return Math.min(100, Math.max(1, Math.round(n)));
 }
 
-function facetPrefillHasContent(prefill: MethodCardWizardFacetPrefill): boolean {
-  switch (prefill.group) {
-    case "communication":
-      return (
-        hasTrimmedText(prefill.draft.corePrinciple) ||
-        hasTrimmedText(prefill.draft.logisticsAdmin) ||
-        hasTrimmedText(prefill.draft.codeOfConduct)
-      );
-    case "membership":
-      return (
-        hasTrimmedText(prefill.draft.eligibility) ||
-        hasTrimmedText(prefill.draft.joiningProcess) ||
-        hasTrimmedText(prefill.draft.expectations)
-      );
-    case "decisionApproaches":
-      return (
-        hasTrimmedText(prefill.draft.corePrinciple) ||
-        hasTrimmedText(prefill.draft.stepByStepInstructions) ||
-        hasTrimmedText(prefill.draft.objectionsDeadlocks) ||
-        prefill.draft.applicableScope.length > 0 ||
-        prefill.draft.selectedApplicableScope.length > 0
-      );
-    case "conflictManagement":
-      return (
-        hasTrimmedText(prefill.draft.corePrinciple) ||
-        hasTrimmedText(prefill.draft.processProtocol) ||
-        hasTrimmedText(prefill.draft.restorationFallbacks) ||
-        formatConflictApplicableScopeForTextarea(
-          prefill.draft.selectedApplicableScope,
-          prefill.draft.applicableScope,
-        ).trim().length > 0
-      );
-    case "coreValues":
-      return (
-        hasTrimmedText(prefill.draft.meaning) ||
-        hasTrimmedText(prefill.draft.signals)
-      );
-  }
-}
-
 function mapFacetPrefillToWizardFieldBlocks(
   prefill: MethodCardWizardFacetPrefill,
 ): CustomMethodCardFieldBlock[] {
@@ -198,7 +158,11 @@ function mapFacetPrefillToWizardFieldBlocks(
       );
       if (
         typeof prefill.draft.consensusLevel === "number" &&
-        facetPrefillHasContent(prefill)
+        (hasTrimmedText(prefill.draft.corePrinciple) ||
+          hasTrimmedText(prefill.draft.stepByStepInstructions) ||
+          hasTrimmedText(prefill.draft.objectionsDeadlocks) ||
+          prefill.draft.applicableScope.length > 0 ||
+          prefill.draft.selectedApplicableScope.length > 0)
       ) {
         blocks.push({
           kind: "proportion",
@@ -260,14 +224,12 @@ function mapFacetPrefillToWizardFieldBlocks(
 
 /**
  * Map a method card's facet editors onto wizard field blocks so Customize
- * can show and edit the same sections on step 3.
+ * can show and edit the same sections on step 3. Empty copy still yields
+ * the catalog headings so authors can fill them in the wizard.
  */
 export function facetDetailsToWizardFieldBlocks(
   prefill: MethodCardWizardFacetPrefill,
 ): CustomMethodCardFieldBlock[] {
-  if (!facetPrefillHasContent(prefill)) {
-    return [];
-  }
   return mapFacetPrefillToWizardFieldBlocks(prefill);
 }
 

lib/propNormalization.ts

@@ -178,7 +178,11 @@ export type ToggleGroupPositionValue =
 export const LABEL_VARIANT_OPTIONS = ["default", "horizontal"] as const;
 export type LabelVariantValue = (typeof LABEL_VARIANT_OPTIONS)[number];
 
-export const TEXT_AREA_APPEARANCE_OPTIONS = ["default", "embedded"] as const;
+export const TEXT_AREA_APPEARANCE_OPTIONS = [
+  "default",
+  "embedded",
+  "compose",
+] as const;
 export type TextAreaAppearanceValue =
   (typeof TEXT_AREA_APPEARANCE_OPTIONS)[number];
 

messages/en/components/controlsChrome.json

@@ -5,6 +5,8 @@
   "chipConfirm": "Confirm",
   "chipTypeToAdd": "Type to add",
   "chipClose": "Close",
+  "chipSelect": "Select {label}",
+  "chipDeselect": "Deselect {label}",
   "selectPlaceholder": "Choose an option",
   "selectAriaLabel": "Select an option",
   "multiSelectAddDefault": "Add organization type",

messages/en/create/draftField.json

@@ -0,0 +1,6 @@
+{
+  "_comment": "Generate-draft control on creation-modal text fields (Figma Step Modal 23746:49780).",
+  "generateDraft": "Generate draft",
+  "generateDraftHint": "Get a first draft for this section",
+  "placeholder": "Describe how this method should work"
+}

messages/en/index.ts

@@ -69,6 +69,7 @@ import createTopNav from "./create/topNav.json";
 import createDraftHydration from "./create/draftHydration.json";
 import createTemplateReview from "./create/templateReview.json";
 import createUpload from "./create/upload.json";
+import createDraftField from "./create/draftField.json";
 
 export default {
   common,
@@ -138,6 +139,7 @@ export default {
     draftHydration: createDraftHydration,
     templateReview: createTemplateReview,
     upload: createUpload,
+    draftField: createDraftField,
   },
   navigation,
   metadata,

stories/create-flow/ModalTextAreaField.stories.js

@@ -9,7 +9,7 @@ export default {
     docs: {
       description: {
         component:
-          "Shared 'labelled text area' field used by every create-flow modal section. Pairs `InputLabel` with a `TextArea` set to the `embedded` appearance. Section help marks stay off until tooltip behavior ships.",
+          "Shared labelled text area for create-flow modal sections. With `generateDraftText`, matches Figma Step Modal (23746:49780): tall compose field plus Generate draft.",
       },
     },
   },
@@ -58,6 +58,25 @@ export const WithValue = {
   },
 };
 
+export const GenerateDraft = {
+  render: () => {
+    const [value, setValue] = React.useState("");
+    return (
+      <div className="w-[520px]">
+        <ModalTextAreaField
+          label="What does this value mean to your group?"
+          value={value}
+          onChange={setValue}
+          placeholder="Describe how this method should work"
+          generateDraftText="We design spaces and tools that everyone can use regardless of ability or background."
+          generateDraftLabel="Generate draft"
+          generateDraftHint="Get a first draft for this section"
+        />
+      </div>
+    );
+  },
+};
+
 export const Disabled = {
   render: () => (
     <div className="w-[520px]">

tests/components/Chip.test.tsx

@@ -34,6 +34,13 @@ const config: ComponentTestSuiteConfig<Props> = {
 describe("Chip", () => {
   componentTestSuite<Props>(config);
 
+  it("uses the visible label as the accessible name when ariaLabel is omitted", () => {
+    render(<Chip label="Worker cooperative" state="unselected" />);
+    expect(
+      screen.getByRole("button", { name: "Worker cooperative" }),
+    ).toHaveAttribute("aria-label", "Worker cooperative");
+  });
+
   it("exposes aria-pressed false when unselected", () => {
     render(<Chip label="Worker cooperative" state="unselected" />);
     const chip = screen.getByRole("button", { name: "Worker cooperative" });

tests/components/CommunicationMethodsScreenPersistence.test.tsx

@@ -63,7 +63,7 @@ function ScreenWithStateProbe({
  * and `buildPublishPayload` for the read side.
  */
 describe("CommunicationMethodsScreen — Add Platform persistence", () => {
-  it("seeds the modal from preset and persists edits + selection on Confirm", async () => {
+  it("starts empty and Generate draft inserts the catalog preset", async () => {
     let latest: CreateFlowState = {};
     render(
       <ScreenWithStateProbe
@@ -82,9 +82,16 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
     const textboxes = within(dialog).getAllByRole("textbox");
     expect(textboxes.length).toBe(3);
     const corePrincipleField = textboxes[0] as HTMLTextAreaElement;
-    // Preset corePrinciple must seed into the first body textarea so the user
+    expect(corePrincipleField.value).toBe("");
-    // edits a real starting point rather than an empty field.
+
-    expect(corePrincipleField.value.length).toBeGreaterThan(0);
+    const generateButtons = within(dialog).getAllByRole("button", {
+      name: "Generate draft",
+    });
+    expect(generateButtons.length).toBe(3);
+    fireEvent.click(generateButtons[0]);
+    expect(corePrincipleField.value).toBe(
+      communicationPresetFor("signal").corePrinciple,
+    );
 
     fireEvent.change(corePrincipleField, { target: { value: "Custom principle" } });
     fireEvent.click(
@@ -466,6 +473,11 @@ describe("CommunicationMethodsScreen — Add Platform persistence", () => {
       screen.getAllByRole("button", { name: /Signal: Encrypted messaging/ })[0],
     );
     const dialog = await screen.findByRole("dialog");
+    for (const button of within(dialog).getAllByRole("button", {
+      name: "Generate draft",
+    })) {
+      fireEvent.click(button);
+    }
     fireEvent.click(within(dialog).getByRole("button", { name: "More options" }));
     fireEvent.click(screen.getByRole("menuitem", { name: "Customize" }));
 

tests/components/CommunityStructureSelectScreen.test.tsx

@@ -16,4 +16,18 @@ describe("CommunityStructureSelectScreen", () => {
     ).toBeInTheDocument();
     expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
   });
+
+  it("gives structure chips Select/Deselect accessible names", () => {
+    renderWithProviders(<CommunityStructureSelectScreen />);
+
+    expect(
+      screen.getByRole("button", { name: "Select Worker cooperative" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Select Local" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Select Early stage" }),
+    ).toBeInTheDocument();
+  });
 });

tests/components/CoreValuesSelectScreen.test.tsx

@@ -41,6 +41,26 @@ describe("CoreValuesSelectScreen", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("gives value chips Select/Deselect accessible names", () => {
+    renderWithProviders(<CoreValuesSelectScreen />);
+    expect(
+      screen.getByRole("button", { name: "Select Accessibility" }),
+    ).toBeInTheDocument();
+  });
+
+  it("starts the value modal empty and Generate draft inserts catalog copy", async () => {
+    renderWithProviders(<CoreValuesSelectScreen />);
+    fireEvent.click(screen.getByRole("button", { name: "Select Accessibility" }));
+    const dialog = await screen.findByRole("dialog");
+    const fields = within(dialog).getAllByRole("textbox") as HTMLTextAreaElement[];
+    expect(fields[0].value).toBe("");
+    expect(fields[1].value).toBe("");
+    fireEvent.click(
+      within(dialog).getAllByRole("button", { name: "Generate draft" })[0],
+    );
+    expect(fields[0].value).toMatch(/everyone can use/i);
+  });
+
   it("closes a pending value without confirm when fields are unchanged", async () => {
     renderWithProviders(<CoreValuesSelectScreen />);
     fireEvent.click(screen.getByText("Accessibility"));
@@ -289,12 +309,10 @@ describe("CoreValuesSelectScreen", () => {
      */
     function countCustomChips(label: string) {
       return screen
-        .queryAllByRole("button", { name: label })
+        .queryAllByRole("button", {
-        .filter(
+          name: new RegExp(`^(Select|Deselect) ${label}$`),
-          (el) =>
+        })
-            !el.closest('[role="dialog"]') &&
+        .filter((el) => !el.closest('[role="dialog"]')).length;
-            (el.getAttribute("aria-label") ?? "") !== `Remove ${label}`,
-        ).length;
     }
 
     async function completeAddValueWizard(label: string) {
@@ -417,7 +435,7 @@ describe("CoreValuesSelectScreen", () => {
         ),
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Anti-oppression" }),
+        screen.getByRole("button", { name: "Select Anti-oppression" }),
       ).toBeDisabled();
       expect(screen.getByRole("button", { name: "Add value" })).toBeDisabled();
       expect(screen.getByRole("button", { name: /^add$/i })).toBeDisabled();

tests/components/FinalReviewPage.test.tsx

@@ -12,6 +12,10 @@ import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalRe
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
 import type { CreateFlowState } from "../../app/(app)/create/types";
 
+function catalogChipName(label: string) {
+  return new RegExp(`^(Select|Deselect) ${label}$`);
+}
+
 async function confirmDiscardCustomizeEdits() {
   fireEvent.click(
     await screen.findByRole("button", { name: "Discard" }),
@@ -232,7 +236,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
   it("opens the chip modal when a chip is clicked, matching the preset copy", async () => {
     render(<FinalReviewWithCustomizeSelections />);
 
-    const signalChip = await screen.findByRole("button", { name: "Signal" });
+    const signalChip = await screen.findByRole("button", { name: catalogChipName("Signal") });
     fireEvent.click(signalChip);
 
     // Modal subtitle is the `supportText` from communication.json for the
@@ -273,7 +277,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Video Meetings" }),
+      await screen.findByRole("button", { name: catalogChipName("Video Meetings") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(within(dialog).getAllByRole("textbox")).toHaveLength(3);
@@ -287,7 +291,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
 
   it("method chip modal kebab offers Customize but not Duplicate", async () => {
     render(<FinalReviewWithCustomizeSelections />);
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -317,7 +321,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
@@ -348,7 +352,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
@@ -366,7 +370,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
   it("opens method chip modal editable, with Save disabled until a field changes", async () => {
     render(<FinalReviewWithCustomizeSelections />);
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
 
     const saveButton = within(dialog).getByRole("button", { name: "Save" });
@@ -400,7 +404,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     }
     render(<CoreValuesHarness />);
 
-    const chip = await screen.findByRole("button", { name: "Accessibility" });
+    const chip = await screen.findByRole("button", { name: catalogChipName("Accessibility") });
     fireEvent.click(chip);
 
     await waitFor(() => {
@@ -430,7 +434,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     render(<CoreValuesHarness />);
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -468,7 +472,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     render(<UseWithoutChangesHarness />);
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -514,7 +518,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Accessibility" }),
+      await screen.findByRole("button", { name: catalogChipName("Accessibility") }),
     );
     const valuesDialog = await screen.findByRole("dialog");
     expect(within(valuesDialog).getAllByRole("textbox").length).toBeGreaterThan(
@@ -542,7 +546,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const methodDialog = await screen.findByRole("dialog");
     expect(within(methodDialog).getAllByRole("textbox").length).toBeGreaterThan(
       0,
@@ -567,7 +571,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     expect(
       within(dialog).getByRole("button", { name: "Remove" }),
@@ -595,7 +599,7 @@ describe("FinalReviewScreen — chip detail modal", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
     await waitFor(() => {
@@ -633,7 +637,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
     void latest;
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const saveButton = within(dialog).getByRole("button", { name: "Save" });
     expect(saveButton).toBeDisabled();
@@ -663,7 +667,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const principleField = within(dialog).getByRole("textbox", {
       name: /core principle/i,
@@ -691,7 +695,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     const principleField = within(dialog).getByRole("textbox", {
       name: /core principle/i,
@@ -719,7 +723,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     expect(dispatchBeforeUnload()).toBe(false);
     const principleField = within(dialog).getByRole("textbox", {
@@ -750,7 +754,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -784,9 +788,9 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     expect(
-      await screen.findByRole("button", { name: "Garden IRC" }),
+      await screen.findByRole("button", { name: catalogChipName("Garden IRC") }),
     ).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Signal" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: catalogChipName("Signal") })).toBeInTheDocument();
   });
 
   it("shows editable field blocks for user-authored communication chips when configured", async () => {
@@ -818,7 +822,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     expect(
@@ -861,7 +865,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
     );
 
     fireEvent.click(
-      await screen.findByRole("button", { name: "Custom Comm" }),
+      await screen.findByRole("button", { name: catalogChipName("Custom Comm") }),
     );
     const dialog = await screen.findByRole("dialog");
     const notesField = within(dialog).getByRole("textbox", { name: /notes/i });
@@ -887,7 +891,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -921,7 +925,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),
@@ -957,7 +961,7 @@ describe("FinalReviewScreen — chip edit modal save semantics", () => {
       />,
     );
 
-    fireEvent.click(await screen.findByRole("button", { name: "Signal" }));
+    fireEvent.click(await screen.findByRole("button", { name: catalogChipName("Signal") }));
     const dialog = await screen.findByRole("dialog");
     fireEvent.click(
       within(dialog).getByRole("button", { name: /more options/i }),

tests/components/ModalTextAreaField.test.tsx

@@ -110,4 +110,44 @@ describe("ModalTextAreaField behavior", () => {
 
     expect(screen.getByAltText("Help")).toBeInTheDocument();
   });
+
+  it("starts empty and Generate draft inserts the provided catalog copy", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        value=""
+        onChange={onChange}
+        generateDraftText="Catalog first draft"
+        generateDraftLabel="Generate draft"
+        generateDraftHint="Get a first draft for this section"
+      />,
+    );
+
+    expect(screen.getByRole("textbox", { name: /Core principle/i })).toHaveValue(
+      "",
+    );
+    expect(
+      screen.getByText("Get a first draft for this section"),
+    ).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Generate draft" }));
+    expect(onChange).toHaveBeenCalledWith("Catalog first draft");
+  });
+
+  it("hides Generate draft when there is no catalog copy", () => {
+    renderWithProviders(
+      <ModalTextAreaField
+        label="Core principle"
+        value=""
+        onChange={() => {}}
+        generateDraftText=""
+        generateDraftLabel="Generate draft"
+      />,
+    );
+
+    expect(
+      screen.queryByRole("button", { name: "Generate draft" }),
+    ).not.toBeInTheDocument();
+  });
 });

tests/components/MultiSelect.test.tsx

@@ -62,6 +62,16 @@ describe("MultiSelect – behaviour specifics", () => {
     expect(screen.getByText("Option 2")).toBeInTheDocument();
   });
 
+  it("names toggle chips Select/Deselect so they are not unnamed buttons", () => {
+    render(<MultiSelect options={defaultChipOptions} />);
+    expect(
+      screen.getByRole("button", { name: "Select Option 1" }),
+    ).toHaveAttribute("aria-pressed", "false");
+    expect(
+      screen.getByRole("button", { name: "Deselect Option 2" }),
+    ).toHaveAttribute("aria-pressed", "true");
+  });
+
   it("calls onChipClick when a chip is clicked", async () => {
     const handleChipClick = vi.fn();
     render(
@@ -151,11 +161,11 @@ describe("MultiSelect – behaviour specifics", () => {
 
     expect(screen.getByText("2 of 2")).toBeInTheDocument();
     expect(screen.getByText("Limit reached")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "One" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Deselect One" })).toBeEnabled();
-    expect(screen.getByRole("button", { name: "Three" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Select Three" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Add option" })).toBeDisabled();
 
-    await userEvent.click(screen.getByRole("button", { name: "Three" }));
+    await userEvent.click(screen.getByRole("button", { name: "Select Three" }));
     await userEvent.click(screen.getByRole("button", { name: "Add option" }));
     expect(handleChipClick).not.toHaveBeenCalled();
     expect(handleAddClick).not.toHaveBeenCalled();

tests/components/SelectPage.test.tsx

@@ -18,4 +18,14 @@ describe("CommunitySizeSelectScreen", () => {
     expect(screen.getByText("1 member")).toBeInTheDocument();
     expect(screen.getByText("2-5 members")).toBeInTheDocument();
   });
+
+  it("gives size chips Select/Deselect accessible names", () => {
+    render(<CommunitySizeSelectScreen />);
+    expect(
+      screen.getByRole("button", { name: "Select 1 member" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Select 2-5 members" }),
+    ).toBeInTheDocument();
+  });
 });

tests/unit/methodCardWizardPrefill.test.ts

@@ -177,7 +177,7 @@ describe("buildMethodCardWizardInitialValues", () => {
 });
 
 describe("facetDetailsToWizardFieldBlocks", () => {
-  it("returns no blocks when facet copy is empty", () => {
+  it("keeps catalog field headings when facet copy is empty", () => {
     expect(
       facetDetailsToWizardFieldBlocks({
         group: "communication",
@@ -188,7 +188,26 @@ describe("facetDetailsToWizardFieldBlocks", () => {
         },
         headings: commHeadings,
       }),
-    ).toEqual([]);
+    ).toEqual([
+      {
+        kind: "text",
+        id: "facet-corePrinciple",
+        blockTitle: "Core Principle & Scope",
+        placeholderText: "  ",
+      },
+      {
+        kind: "text",
+        id: "facet-logisticsAdmin",
+        blockTitle: "Logistics, Admin & Norms",
+        placeholderText: "",
+      },
+      {
+        kind: "text",
+        id: "facet-codeOfConduct",
+        blockTitle: "Code of Conduct",
+        placeholderText: "",
+      },
+    ]);
   });
 
   it("maps decision scope chips to a badge block", () => {