feat: expand ISAC content modeling

2026-08-03 01:23:20 -04:00
parent d9924a95b9
commit 57068b61cd
90 changed files with 9635 additions and 1270 deletions
@@ -9,6 +9,8 @@
 		blankConditionalMechanicDraft,
 		currentHealthPercentBandPredicate,
 		eventFieldComparisonPredicate,
+		mechanicTargetingForMode,
+		mechanicTargetingMode,
 		parseConditionalMechanicDraft,
 		readCurrentHealthPercentBand,
 		readEventFieldComparison,
@@ -21,6 +23,7 @@
 		type ConditionalMechanicPoolDraft,
 		type EditablePredicateScalar,
 		type EventFieldComparison,
+		type MechanicTargetingMode,
 		type PredicateComparisonOperator,
 		type StatePoolThresholdComparison
 	} from '$lib/calculations/mechanic-editor';
@@ -182,7 +185,9 @@
 	}

 	function eventPredicateOperatorOptions(clause: ConditionalMechanicClauseDraft) {
-		return selectedEventPredicateField(clause)?.type === 'number'
+		const field = selectedEventPredicateField(clause);
+		if (field?.path === 'values.aiming') return predicateOperatorOptions.filter((option) => option.value === 'eq');
+		return field?.type === 'number'
 			? predicateOperatorOptions
 			: predicateOperatorOptions.filter((option) => option.value === 'eq' || option.value === 'ne');
 	}
@@ -190,15 +195,21 @@
 	function setClauseEvent(clauseIndex: number, event: string) {
 		const nextEvent = event as ConditionalMechanicClauseDraft['event'];
 		const clause = rule.clauses[clauseIndex];
+		const outcomes = nextEvent === 'weapon_hit'
+			? clause.outcomes
+			: clause.outcomes.map((outcome) => outcome.targeting?.kind === 'event_target_area'
+				? { ...outcome, targeting: undefined }
+				: outcome);
 		const fields = registeredEventFields(nextEvent);
 		const comparison = readEventFieldComparison(clause.if);
 		if (!comparison || !fields.length) {
-			updateClause(clauseIndex, { event: nextEvent });
+			updateClause(clauseIndex, { event: nextEvent, outcomes });
 			return;
 		}
 		const field = fields[0];
 		updateClause(clauseIndex, {
 			event: nextEvent,
+			outcomes,
 			if: eventFieldComparisonPredicate({
 				path: field.path,
 				operator: 'eq',
@@ -403,6 +414,69 @@
 		updateClause(clauseIndex, { outcomes });
 	}

+	function targetingOptions(clause: ConditionalMechanicClauseDraft, outcome: ConditionalMechanicOutcomeDraft) {
+		if (outcome.scope === 'allies' || outcome.scope === 'self_and_allies') {
+			return [
+				{ value: 'none', label: 'NONE' },
+				{ value: 'allies_within_radius', label: 'ALLIES IN RADIUS' }
+			];
+		}
+		if (outcome.scope === 'target') {
+			return [
+				{ value: 'none', label: 'NONE' },
+				{ value: 'enemies_within_radius', label: 'ENEMIES IN RADIUS · LEGACY' },
+				...(outcome.kind === 'direct_damage' && clause.event === 'weapon_hit'
+					? [{ value: 'event_target_explosion', label: 'HIT-TARGET EXPLOSION' }]
+					: [])
+			];
+		}
+		return [{ value: 'none', label: 'NONE' }];
+	}
+
+	function setOutcomeScope(clauseIndex: number, outcomeIndex: number, scope: MechanicOutcomeScope) {
+		const outcome = rule.clauses[clauseIndex].outcomes[outcomeIndex];
+		const targeting = outcome.targeting;
+		const compatible = !targeting
+			|| (targeting.kind === 'event_target_area' && scope === 'target' && outcome.kind === 'direct_damage')
+			|| (targeting.kind === 'within_radius' && targeting.population === 'enemies' && scope === 'target')
+			|| (targeting.kind === 'within_radius' && targeting.population === 'allies' && (scope === 'allies' || scope === 'self_and_allies'));
+		updateOutcome(clauseIndex, outcomeIndex, { scope, targeting: compatible ? targeting : undefined });
+	}
+
+	function setOutcomeKind(clauseIndex: number, outcomeIndex: number, kind: ConditionalMechanicOutcomeDraft['kind']) {
+		const outcome = rule.clauses[clauseIndex].outcomes[outcomeIndex];
+		updateOutcome(clauseIndex, outcomeIndex, {
+			kind,
+			resource: kind === 'restoration' || kind === 'resource_cost' ? outcome.resource ?? 'health' : undefined,
+			attributeId: kind === 'attribute_modifier' ? outcome.attributeId ?? '' : undefined,
+			delivery: kind === 'restoration' ? outcome.delivery : undefined,
+			durationSeconds: kind === 'restoration' ? outcome.durationSeconds : undefined,
+			targeting: outcome.targeting?.kind === 'event_target_area' && kind !== 'direct_damage'
+				? undefined
+				: outcome.targeting
+		});
+	}
+
+	function setOutcomeTargeting(clauseIndex: number, outcomeIndex: number, mode: MechanicTargetingMode) {
+		const outcome = rule.clauses[clauseIndex].outcomes[outcomeIndex];
+		updateOutcome(clauseIndex, outcomeIndex, {
+			targeting: mechanicTargetingForMode(mode, outcome.targeting),
+			phase: mode === 'event_target_explosion' && outcome.phase !== 'on_event' && outcome.phase !== 'after_event'
+				? 'after_event'
+				: outcome.phase
+		});
+	}
+
+	function phaseOptions(outcome: ConditionalMechanicOutcomeDraft) {
+		return [
+			{ value: 'on_event', label: 'ON EVENT' },
+			{ value: 'after_event', label: 'AFTER EVENT' },
+			{ value: 'while_active', label: 'WHILE ACTIVE', disabled: outcome.targeting?.kind === 'event_target_area' },
+			{ value: 'on_enter', label: 'ON ENTER', disabled: outcome.targeting?.kind === 'event_target_area' },
+			{ value: 'on_exit', label: 'ON EXIT', disabled: outcome.targeting?.kind === 'event_target_area' }
+		];
+	}
+
 	function updateVariant(clauseIndex: number, outcomeIndex: number, variant: string, raw: string) {
 		const outcome = rule.clauses[clauseIndex].outcomes[outcomeIndex];
 		const value = Number(raw);
@@ -684,6 +758,50 @@
 		});
 	}

+	function addAbilityDurationExtension(clauseIndex: number) {
+		updateClause(clauseIndex, {
+			mutations: [
+				...rule.clauses[clauseIndex].mutations,
+				{ kind: 'extend_duration', target: 'assigned_ability', seconds: 0.3 }
+			]
+		});
+	}
+
+	function addCooldownOnMax(clauseIndex: number) {
+		const stackPool = rule.pools.find((pool) => pool.max && pool.max > 0)?.key;
+		const cooldownPool = rule.pools.find((pool) => pool.scope === 'agent' && pool.expiresAfterSeconds)?.key;
+		if (!stackPool || !cooldownPool || stackPool === cooldownPool) return;
+		updateClause(clauseIndex, {
+			mutations: [
+				...rule.clauses[clauseIndex].mutations,
+				{ kind: 'start_cooldown_on_max', stackPool, cooldownPool }
+			]
+		});
+	}
+
+	function updateAbilityDurationExtension(clauseIndex: number, mutationIndex: number, raw: string) {
+		const mutations = [...rule.clauses[clauseIndex].mutations];
+		const seconds = Number(raw);
+		mutations[mutationIndex] = {
+			kind: 'extend_duration',
+			target: 'assigned_ability',
+			seconds: Number.isFinite(seconds) ? seconds : 0
+		};
+		updateClause(clauseIndex, { mutations });
+	}
+
+	function updateCooldownOnMax(
+		clauseIndex: number,
+		mutationIndex: number,
+		patch: { stackPool?: string; cooldownPool?: string }
+	) {
+		const mutations = [...rule.clauses[clauseIndex].mutations];
+		const current = mutations[mutationIndex];
+		if (current.kind !== 'start_cooldown_on_max') return;
+		mutations[mutationIndex] = { ...current, ...patch };
+		updateClause(clauseIndex, { mutations });
+	}
+
 	function updateMutation(clauseIndex: number, mutationIndex: number, kind: 'add' | 'set' | 'consume' | 'clear', pool?: string, value?: number) {
 		const mutations = [...rule.clauses[clauseIndex].mutations];
 		const current = mutations[mutationIndex];
@@ -981,6 +1099,20 @@
 					{:else if conditionModel(clause) === 'advanced'}
 						<p class="advanced-condition-note">This saved condition remains active and is preserved unchanged. Use the generated mechanic preview to inspect it.</p>
 					{/if}
+					{#if allowAssignedAbility}
+						<div class="ability-proc-controls">
+							<SegmentedChoice
+								legend="ASSIGNED ABILITY"
+								name={`${idPrefix}-assigned-ability-${clauseIndex}`}
+								options={[{value:'false',label:'ANY STATE'},{value:'true',label:'MUST BE ACTIVE'}]}
+								value={String(clause.requiresAssignedAbilityActive ?? false)}
+								onchange={(values) => updateClause(clauseIndex,{requiresAssignedAbilityActive:values[0] === 'true' ? true : undefined})}
+							/>
+							<label class="field">PROC CHANCE · %<input type="number" min="0" max="100" step="any" value={clause.procChancePercent ?? ''} oninput={(event) => updateClause(clauseIndex,{procChancePercent:event.currentTarget.value ? Number(event.currentTarget.value) : undefined})}/><small>Rolls after conditions and cooldown checks, before mutations.</small></label>
+						</div>
+					{:else}
+						<label class="field proc-chance-field">PROC CHANCE · %<input type="number" min="0" max="100" step="any" value={clause.procChancePercent ?? ''} oninput={(event) => updateClause(clauseIndex,{procChancePercent:event.currentTarget.value ? Number(event.currentTarget.value) : undefined})}/><small>Rolls after conditions and cooldown checks, before mutations.</small></label>
+					{/if}
 				</div>
 				<div class="reducer-controls">
 					<SegmentedChoice
@@ -1007,38 +1139,53 @@
 				</div>

 				<div class="mutation-panel">
-					<div class="outcome-heading"><div><span>STATE CHANGES</span><strong>{clause.mutations.length}</strong></div><button type="button" class="secondary compact-action" onclick={() => addMutation(clauseIndex)} disabled={!rule.pools.length}>ADD STATE CHANGE ＋</button></div>
+					<div class="outcome-heading"><div><span>STATE CHANGES</span><strong>{clause.mutations.length}</strong></div><div class="mutation-actions"><button type="button" class="secondary compact-action" onclick={() => addMutation(clauseIndex)} disabled={!rule.pools.length}>ADD STATE CHANGE ＋</button>{#if allowAssignedAbility}<button type="button" class="secondary compact-action" onclick={() => addAbilityDurationExtension(clauseIndex)}>EXTEND ABILITY ＋</button>{/if}<button type="button" class="secondary compact-action" onclick={() => addCooldownOnMax(clauseIndex)} disabled={rule.pools.filter((pool) => pool.max && pool.max > 0).length < 2}>ADD MAX COOLDOWN ＋</button></div></div>
 					{#each clause.mutations as mutation, mutationIndex}
-						<div class="mutation-row">
-							<SegmentedChoice
-								legend="OPERATION"
-								name={`${idPrefix}-mutation-kind-${clauseIndex}-${mutationIndex}`}
-								options={[{value:'add',label:'ADD'},{value:'set',label:'SET'},{value:'consume',label:'CONSUME'},{value:'clear',label:'CLEAR'}]}
-								value={mutation.kind === 'none' || mutation.kind === 'derive' || mutation.kind === 'transfer' ? 'add' : mutation.kind}
-								onchange={(values) => updateMutation(clauseIndex,mutationIndex,values[0] as 'add'|'set'|'consume'|'clear')}
-							/>
-							<SegmentedChoice
-								legend="STATE POOL"
-								name={`${idPrefix}-mutation-pool-${clauseIndex}-${mutationIndex}`}
-								options={rule.pools.map((pool) => ({value:pool.key,label:pool.label.toUpperCase()}))}
-								value={'pool' in mutation ? mutation.pool : rule.pools[0]?.key ?? ''}
-								columns={Math.min(4,Math.max(1,rule.pools.length))}
-								onchange={(values) => updateMutation(clauseIndex,mutationIndex,mutation.kind === 'clear' ? 'clear' : mutation.kind === 'set' || mutation.kind === 'consume' ? mutation.kind : 'add',values[0])}
-							/>
-							{#if mutation.kind !== 'clear'}
-								<label class="field">VALUE<input type="number" step="any" value={'value' in mutation && typeof mutation.value === 'number' ? mutation.value : 1} oninput={(event) => updateMutation(clauseIndex,mutationIndex,mutation.kind === 'set' || mutation.kind === 'consume' ? mutation.kind : 'add',undefined,Number(event.currentTarget.value))}/></label>
-							{/if}
-							{#if 'pool' in mutation && rule.pools.find((pool) => pool.key === mutation.pool)?.scope === 'target'}
+						{#if mutation.kind === 'extend_duration'}
+							<div class="mutation-row ability-mutation-row">
+								<div class="branch-readout"><span>OPERATION</span><strong>EXTEND ASSIGNED ABILITY</strong></div>
+								<label class="field">SECONDS<input type="number" min="0" step="any" value={typeof mutation.seconds === 'number' ? mutation.seconds : 0} oninput={(event) => updateAbilityDurationExtension(clauseIndex,mutationIndex,event.currentTarget.value)}/><small>Applies only while the assigned ability remains active.</small></label>
+								<button type="button" class="remove" onclick={() => updateClause(clauseIndex,{mutations:clause.mutations.filter((_,index) => index !== mutationIndex)})}>REMOVE</button>
+							</div>
+						{:else if mutation.kind === 'start_cooldown_on_max'}
+							<div class="mutation-row cooldown-mutation-row">
+								<div class="branch-readout"><span>OPERATION</span><strong>START COOLDOWN ON MAX</strong></div>
+								<SegmentedChoice legend="STACK POOL" name={`${idPrefix}-cooldown-stack-${clauseIndex}-${mutationIndex}`} options={rule.pools.filter((pool) => pool.max && pool.max > 0).map((pool) => ({value:pool.key,label:pool.label.toUpperCase()}))} value={mutation.stackPool} onchange={(values) => updateCooldownOnMax(clauseIndex,mutationIndex,{stackPool:values[0]})}/>
+								<SegmentedChoice legend="COOLDOWN POOL" name={`${idPrefix}-cooldown-pool-${clauseIndex}-${mutationIndex}`} options={rule.pools.filter((pool) => pool.scope === 'agent' && pool.expiresAfterSeconds && pool.key !== mutation.stackPool).map((pool) => ({value:pool.key,label:pool.label.toUpperCase()}))} value={mutation.cooldownPool} onchange={(values) => updateCooldownOnMax(clauseIndex,mutationIndex,{cooldownPool:values[0]})}/>
+								<button type="button" class="remove" onclick={() => updateClause(clauseIndex,{mutations:clause.mutations.filter((_,index) => index !== mutationIndex)})}>REMOVE</button>
+							</div>
+						{:else}
+							<div class="mutation-row">
 								<SegmentedChoice
-									legend="STATE OWNER"
-									name={`${idPrefix}-mutation-entity-${clauseIndex}-${mutationIndex}`}
-									options={[{value:'event_target',label:'EVENT TARGET'},{value:'event_actor',label:'EVENT ACTOR'}]}
-									value={'entity' in mutation && mutation.entity?.kind === 'event_actor' ? 'event_actor' : 'event_target'}
-									onchange={(values) => updateMutationEntity(clauseIndex,mutationIndex,values[0] as 'event_target'|'event_actor')}
+									legend="OPERATION"
+									name={`${idPrefix}-mutation-kind-${clauseIndex}-${mutationIndex}`}
+									options={[{value:'add',label:'ADD'},{value:'set',label:'SET'},{value:'consume',label:'CONSUME'},{value:'clear',label:'CLEAR'}]}
+									value={mutation.kind === 'none' || mutation.kind === 'derive' || mutation.kind === 'transfer' ? 'add' : mutation.kind}
+									onchange={(values) => updateMutation(clauseIndex,mutationIndex,values[0] as 'add'|'set'|'consume'|'clear')}
 								/>
-							{/if}
-							<button type="button" class="remove" onclick={() => updateClause(clauseIndex,{mutations:clause.mutations.filter((_,index) => index !== mutationIndex)})}>REMOVE</button>
-						</div>
+								<SegmentedChoice
+									legend="STATE POOL"
+									name={`${idPrefix}-mutation-pool-${clauseIndex}-${mutationIndex}`}
+									options={rule.pools.map((pool) => ({value:pool.key,label:pool.label.toUpperCase()}))}
+									value={'pool' in mutation ? mutation.pool : rule.pools[0]?.key ?? ''}
+									columns={Math.min(4,Math.max(1,rule.pools.length))}
+									onchange={(values) => updateMutation(clauseIndex,mutationIndex,mutation.kind === 'clear' ? 'clear' : mutation.kind === 'set' || mutation.kind === 'consume' ? mutation.kind : 'add',values[0])}
+								/>
+								{#if mutation.kind !== 'clear'}
+									<label class="field">VALUE<input type="number" step="any" value={'value' in mutation && typeof mutation.value === 'number' ? mutation.value : 1} oninput={(event) => updateMutation(clauseIndex,mutationIndex,mutation.kind === 'set' || mutation.kind === 'consume' ? mutation.kind : 'add',undefined,Number(event.currentTarget.value))}/></label>
+								{/if}
+								{#if 'pool' in mutation && rule.pools.find((pool) => pool.key === mutation.pool)?.scope === 'target'}
+									<SegmentedChoice
+										legend="STATE OWNER"
+										name={`${idPrefix}-mutation-entity-${clauseIndex}-${mutationIndex}`}
+										options={[{value:'event_target',label:'EVENT TARGET'},{value:'event_actor',label:'EVENT ACTOR'}]}
+										value={'entity' in mutation && mutation.entity?.kind === 'event_actor' ? 'event_actor' : 'event_target'}
+										onchange={(values) => updateMutationEntity(clauseIndex,mutationIndex,values[0] as 'event_target'|'event_actor')}
+									/>
+								{/if}
+								<button type="button" class="remove" onclick={() => updateClause(clauseIndex,{mutations:clause.mutations.filter((_,index) => index !== mutationIndex)})}>REMOVE</button>
+							</div>
+						{/if}
 					{:else}
 						<p class="empty-state">This branch emits outcomes without changing shared state.</p>
 					{/each}
@@ -1049,25 +1196,24 @@
 					<div class="outcome-card">
 						<div class="outcome-grid">
 							<label class="field">LABEL<input value={outcome.label} oninput={(event) => updateOutcome(clauseIndex,outcomeIndex,{label:event.currentTarget.value,key:slug(event.currentTarget.value)})}/></label>
-							<SegmentedChoice legend="KIND" name={`${idPrefix}-kind-${clauseIndex}-${outcomeIndex}`} options={outcomeKinds} value={outcome.kind} onchange={(values) => updateOutcome(clauseIndex,outcomeIndex,{kind:values[0] as ConditionalMechanicOutcomeDraft['kind'],resource:values[0] === 'restoration' || values[0] === 'resource_cost' ? outcome.resource ?? 'health' : undefined,attributeId:values[0] === 'attribute_modifier' ? outcome.attributeId ?? '' : undefined,delivery:values[0] === 'restoration' ? outcome.delivery : undefined,durationSeconds:values[0] === 'restoration' ? outcome.durationSeconds : undefined})}/>
+							<SegmentedChoice legend="KIND" name={`${idPrefix}-kind-${clauseIndex}-${outcomeIndex}`} options={outcomeKinds} value={outcome.kind} onchange={(values) => setOutcomeKind(clauseIndex,outcomeIndex,values[0] as ConditionalMechanicOutcomeDraft['kind'])}/>
 							<label class="field">DESCRIPTION SLOT<input type="number" min="1" step="1" value={outcome.descriptionSlot ?? ''} oninput={(event) => updateOutcome(clauseIndex,outcomeIndex,{descriptionSlot:event.currentTarget.value ? Number(event.currentTarget.value) : undefined})}/></label>
 						</div>
-						<SegmentedChoice legend="TARGET SCOPE" name={`${idPrefix}-scope-${clauseIndex}-${outcomeIndex}`} options={scopeOptions} value={outcome.scope} columns={scopeOptions.length > 4 ? 4 : scopeOptions.length} onchange={(values) => updateOutcome(clauseIndex,outcomeIndex,{scope:values[0] as MechanicOutcomeScope})}/>
+						<SegmentedChoice legend="TARGET SCOPE" name={`${idPrefix}-scope-${clauseIndex}-${outcomeIndex}`} options={scopeOptions} value={outcome.scope} columns={scopeOptions.length > 4 ? 4 : scopeOptions.length} onchange={(values) => setOutcomeScope(clauseIndex,outcomeIndex,values[0] as MechanicOutcomeScope)}/>
 						{#if outcome.scope === 'allies' || outcome.scope === 'self_and_allies' || outcome.scope === 'target'}
 							<div class="delivery-controls">
 								<SegmentedChoice
 									legend="AREA TARGETING"
 									name={`${idPrefix}-targeting-${clauseIndex}-${outcomeIndex}`}
-									options={[{value:'none',label:'NONE'},{value:'allies',label:'ALLIES IN RADIUS'},{value:'enemies',label:'ENEMIES IN RADIUS'}]}
-									value={outcome.targeting?.population ?? 'none'}
-									onchange={(values) => updateOutcome(clauseIndex,outcomeIndex,{
-										targeting: values[0] === 'none'
-											? undefined
-											: {kind:'within_radius',population:values[0] as 'allies'|'enemies',radiusMeters:outcome.targeting?.radiusMeters ?? 20}
-									})}
+									options={targetingOptions(clause,outcome)}
+									value={mechanicTargetingMode(outcome.targeting)}
+									onchange={(values) => setOutcomeTargeting(clauseIndex,outcomeIndex,values[0] as MechanicTargetingMode)}
 								/>
 								{#if outcome.targeting}
 									<label class="field">RADIUS (METERS)<input type="number" min="0.01" step="any" value={outcome.targeting.radiusMeters} oninput={(event) => updateOutcome(clauseIndex,outcomeIndex,{targeting:{...outcome.targeting!,radiusMeters:Number(event.currentTarget.value)}})}/></label>
+									{#if outcome.targeting.kind === 'event_target_area'}
+										<p class="area-targeting-note"><strong>EVENT TARGET CENTER</strong><span>Damages each valid enemy at or inside the radius once. Runtime events must supply the authoritative target sample.</span></p>
+									{/if}
 								{/if}
 							</div>
 						{/if}
@@ -1154,8 +1300,9 @@
 								<label class="field">{column.label} VALUE<input type="number" step="any" value={outcome.variants[column.variantKey]?.value ?? 0} oninput={(event) => updateVariant(clauseIndex,outcomeIndex,column.variantKey,event.currentTarget.value)}/></label>
 							{/each}
 						</div>
+						<label class="field probability-field">OUTCOME CHANCE · %<input type="number" min="0" max="100" step="any" value={outcome.probabilityPercent ?? ''} oninput={(event) => updateOutcome(clauseIndex,outcomeIndex,{probabilityPercent:event.currentTarget.value ? Number(event.currentTarget.value) : undefined})}/><small>Each eligible outcome rolls independently. Maximum Potential resolves each nonzero chance as successful.</small></label>
 						<div class="outcome-footer">
-							<SegmentedChoice legend="PHASE" name={`${idPrefix}-phase-${clauseIndex}-${outcomeIndex}`} options={[{value:'on_event',label:'ON EVENT'},{value:'after_event',label:'AFTER EVENT'},{value:'while_active',label:'WHILE ACTIVE'},{value:'on_enter',label:'ON ENTER'},{value:'on_exit',label:'ON EXIT'}]} value={outcome.phase} onchange={(values) => updateOutcome(clauseIndex,outcomeIndex,{phase:values[0] as OutcomePhase})}/>
+							<SegmentedChoice legend="PHASE" name={`${idPrefix}-phase-${clauseIndex}-${outcomeIndex}`} options={phaseOptions(outcome)} value={outcome.phase} onchange={(values) => updateOutcome(clauseIndex,outcomeIndex,{phase:values[0] as OutcomePhase})}/>
 							<button type="button" class="remove" onclick={() => updateClause(clauseIndex,{outcomes:clause.outcomes.filter((_,index) => index !== outcomeIndex)})}>REMOVE OUTCOME</button>
 						</div>
 					</div>
@@ -1198,6 +1345,8 @@
 	.branch>header>div{display:flex;align-items:end;gap:9px}.branch>header>div>span{align-self:center;color:var(--shd-orange);font:900 var(--shd-type-telemetry)/1 var(--shd-font-mono)}.branch>header .field{min-width:min(360px,55vw);margin:0}
 	.branch-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr)) minmax(160px,.45fr);align-items:end;gap:var(--shd-gap-sm);padding:var(--shd-gap-sm)}
 	.condition-controls{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(320px,1.3fr);align-items:end;gap:var(--shd-gap-sm);padding:0 var(--shd-gap-sm) var(--shd-gap-sm)}
+	.ability-proc-controls{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(180px,.4fr);align-items:end;gap:var(--shd-gap-sm)}
+	.ability-proc-controls .field small,.proc-chance-field small,.probability-field small,.ability-mutation-row .field small{display:block;margin-top:4px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);line-height:1.3}
 	.health-boundaries{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:var(--shd-gap-sm)}
 	.health-boundaries .field small{display:block;margin-top:4px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);line-height:1.3}
 	.predicate-fields{display:grid;grid-template-columns:minmax(170px,1fr) minmax(190px,.8fr);align-items:end;gap:var(--shd-gap-sm)}
@@ -1207,12 +1356,15 @@
 	.branch-readout{display:grid;align-content:center;gap:3px;min-height:44px;padding:7px 9px;border:1px solid var(--shd-border);background:var(--shd-surface-raised)}.branch-readout span{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.branch-readout strong{font-size:var(--shd-type-supporting)}
 	.reducer-controls{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(130px,.25fr));align-items:end;gap:var(--shd-gap-sm);padding:0 var(--shd-gap-sm) var(--shd-gap-sm)}
 	.mutation-panel{margin:0 var(--shd-gap-sm) var(--shd-gap-sm);border:1px solid var(--shd-border-soft)}
+	.mutation-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
 	.mutation-row{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,1fr) minmax(110px,.35fr) minmax(240px,1fr) auto;align-items:end;gap:8px;padding:8px;border-bottom:1px solid var(--shd-border-soft)}
+	.ability-mutation-row{grid-template-columns:minmax(240px,1fr) minmax(180px,.5fr) auto}.cooldown-mutation-row{grid-template-columns:minmax(210px,.8fr) minmax(220px,1fr) minmax(220px,1fr) auto}.probability-field{max-width:260px}
 	.outcome-card{display:grid;gap:8px;margin:var(--shd-gap-sm);padding:9px;border:1px solid var(--shd-border);border-left:2px solid var(--shd-info);background:var(--shd-surface-raised)}
 	.outcome-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(360px,1.4fr) minmax(120px,.3fr);align-items:end;gap:8px}
 	.variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
 	.state-scaling{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr) repeat(2,minmax(110px,.3fr));align-items:end;gap:8px}
 	.delivery-controls{display:grid;grid-template-columns:minmax(260px,1fr) minmax(150px,.35fr);align-items:end;gap:8px}.delivery-controls>.field{margin:0}
+	.area-targeting-note{grid-column:1/-1;display:grid;gap:2px;margin:0;padding:7px 9px;border-left:2px solid var(--shd-info);background:var(--shd-model-surface);color:var(--shd-text-muted);font-size:var(--shd-type-supporting);line-height:1.4}.area-targeting-note strong{color:var(--shd-info);font-size:var(--shd-type-telemetry);letter-spacing:.7px}
 	.outcome-footer{display:flex;align-items:end;justify-content:space-between;gap:8px}
 	.remove,.danger-quiet{min-height:38px;padding:0 10px;border:1px solid var(--shd-danger);background:transparent;color:var(--shd-danger);font-size:var(--shd-type-telemetry);font-weight:900;cursor:pointer}
 	.remove:hover,.remove:focus-visible,.danger-quiet:hover,.danger-quiet:focus-visible{background:var(--shd-danger);color:var(--shd-surface)}