feat: expand ISAC content modeling

src/lib/components/ArticleContent.svelte

@@ -24,6 +24,16 @@
 	function link(mark: ArticleMark) {
 		return mark.type === 'link' ? mark.attrs?.href ?? '#' : '#';
 	}
+
+	function orderedListStart(node: ArticleNode) {
+		const start = Number(node.attrs?.start ?? 1);
+		return Number.isInteger(start) && start > 1 ? start : undefined;
+	}
+
+	function orderedListType(node: ArticleNode): 'a' | 'A' | 'i' | 'I' | undefined {
+		const type = node.attrs?.type;
+		return ['a', 'A', 'i', 'I'].includes(String(type)) ? type as 'a' | 'A' | 'i' | 'I' : undefined;
+	}
 </script>
 
 {#snippet renderText(text: string, marks: ArticleMark[], index = 0)}
@@ -32,7 +42,7 @@
 		{#if mark.type === 'bold'}<strong>{@render renderText(text, marks, index + 1)}</strong>
 		{:else if mark.type === 'italic'}<em>{@render renderText(text, marks, index + 1)}</em>
 		{:else if mark.type === 'code'}<code>{@render renderText(text, marks, index + 1)}</code>
-		{:else}<a href={link(mark)} rel="nofollow ugc noopener noreferrer">{@render renderText(text, marks, index + 1)}</a>{/if}
+		{:else}<a href={link(mark)} title={mark.attrs?.title} rel="nofollow ugc noopener noreferrer">{@render renderText(text, marks, index + 1)}</a>{/if}
 	{/if}
 {/snippet}
 
@@ -46,7 +56,7 @@
 	{:else if node.type === 'heading' && Number(node.attrs?.level) === 2}<h2>{@render children(node)}</h2>
 	{:else if node.type === 'heading'}<h3>{@render children(node)}</h3>
 	{:else if node.type === 'bulletList'}<ul>{@render children(node)}</ul>
-	{:else if node.type === 'orderedList'}<ol>{@render children(node)}</ol>
+	{:else if node.type === 'orderedList'}<ol start={orderedListStart(node)} type={orderedListType(node)}>{@render children(node)}</ol>
 	{:else if node.type === 'listItem'}<li>{@render children(node)}</li>
 	{:else if node.type === 'blockquote'}<blockquote>{@render children(node)}</blockquote>
 	{:else if node.type === 'horizontalRule'}<hr/>

src/lib/components/ArticlePage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import AgentIdentityLink from '$lib/components/AgentIdentityLink.svelte';
 	import ArticleContent from '$lib/components/ArticleContent.svelte';
 	import ArticleDiscussion from '$lib/components/ArticleDiscussion.svelte';
-	import AgentIdentityLink from '$lib/components/AgentIdentityLink.svelte';
 	import PendingForm from '$lib/components/PendingForm.svelte';
 	import { untrack } from 'svelte';
 	let { data, form = null } = $props();
@@ -25,7 +25,7 @@
 	<header class="article-reader-head">
 		<div class="article-reader-channel"><span>{data.article.channel ?? (data.article.kind === 'guide' ? 'COMMUNITY GUIDE' : 'NEWS')}</span>{#if data.article.featured}<b>FEATURED</b>{/if}{#if data.article.recommended}<b>RECOMMENDED</b>{/if}</div>
 		<h1>{data.article.title}</h1><p>{data.article.deck}</p>
-		<div class="article-reader-byline">{#if data.article.source}<div class="article-source-identity"><strong>{data.article.source.name}</strong><span>{publicationMeta}</span></div>{:else}<AgentIdentityLink size="compact" linked={Boolean(data.article.authorPublicSlug)} agent={{id:data.article.ownerId,displayName:data.article.author,publicSlug:data.article.authorPublicSlug,avatarUrl:`/avatars/user/${data.article.ownerId}`}} meta={publicationMeta}/>{/if}<div>{#if data.article.kind === 'guide' && data.article.owner}<a class="secondary" href={`/guides/${encodeURIComponent(data.article.slug)}/edit`}>EDIT GUIDE</a>{:else if data.article.kind === 'news' && data.canManageNews && !data.article.source}<a class="secondary" href={`/news/${encodeURIComponent(data.article.slug)}/edit`}>OPEN NEWSROOM</a>{/if}</div></div>
+		<div class="article-reader-byline">{#if data.article.source}<div class="article-source-identity"><strong>{data.article.source.name}</strong><span>{publicationMeta}</span></div>{:else}<AgentIdentityLink size="compact" linked={Boolean(data.article.authorPublicSlug)} agent={{id:data.article.ownerId,displayName:data.article.author,publicSlug:data.article.authorPublicSlug,avatarUrl:`/avatars/user/${data.article.ownerId}`}} meta={publicationMeta}/>{/if}<div>{#if data.article.kind === 'guide' && data.article.owner}<a class="secondary" href={`/guides/${encodeURIComponent(data.article.slug)}/edit`}>EDIT GUIDE</a>{:else if data.article.kind === 'news' && data.canManageNews && !data.article.source}<a class="secondary" href={`/news/${encodeURIComponent(data.article.slug)}/edit`}>Edit Article</a>{/if}</div></div>
 		{#if data.article.source}<aside class="article-source-notice"><div><span>OFFICIAL SOURCE</span><strong>Originally published by {data.article.source.name}</strong></div><a href={data.article.source.url} target="_blank" rel="noopener noreferrer">READ ON UBISOFT</a></aside>{/if}
 		{#if data.tags.length}<nav class="article-reader-tags" aria-label="Article tags">{#each data.tags as tag}<a href={`/${path}?tag=${encodeURIComponent(tag.slug)}`}>{tag.name}</a>{/each}</nav>{/if}
 	</header>

src/lib/components/DatabaseItemCard.svelte

@@ -6,6 +6,7 @@
 	import type { GameIconName } from '$lib/game-icons';
 	import type { DatabaseItem } from '$lib/database/items';
 	import MarkdownContent from './MarkdownContent.svelte';
+	import WeaponModSlotIcon from './WeaponModSlotIcon.svelte';
 
 	let {
 		item,
@@ -16,9 +17,21 @@
 		hideDiscussionUtility?: boolean;
 		anchor?: boolean;
 	} = $props();
+	let protocolLevel = $state(1);
+	let talentUpgrades = $state(0);
+
+	const number = (value: number) => Number.isInteger(value) ? String(value) : value.toFixed(2).replace(/\.?0+$/, '');
+	const valueWithUnit = (value: number, unit: string) => `${number(value)}${unit ? (unit === '%' ? '%' : ` ${unit}`) : ''}`;
+	const protocolPrimaryValue = () => item.protocolPreview
+		? item.protocolPreview.primaryBaseValue * (1 + (protocolLevel - 1) / 49)
+		: 0;
+	const talentDescription = () => item.protocolPreview?.talentDescription?.replace(/\{(\d+)\}/g, (placeholder, raw) => {
+		const effect = item.protocolPreview?.talentEffects[Number(raw) - 1];
+		return effect ? valueWithUnit(effect.baseValue * (1 + talentUpgrades / 5), effect.unit) : placeholder;
+	});
 </script>
 
-<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'}>
+<article id={anchor ? `database-item-${item.id}` : undefined} class="database-item-card" class:talent-card={item.variant === 'talent'} class:protocol-quality-standard={item.topBorderTone === 'standard'} class:protocol-quality-specialized={item.topBorderTone === 'specialized'} class:protocol-quality-superior={item.topBorderTone === 'superior'} class:protocol-quality-highend={item.topBorderTone === 'highend'}>
 	<header>
 		{#if item.renderUrl}<img class="database-item-render" src={item.renderUrl} alt="" loading="lazy"/>{/if}
 		<div class="database-item-icon">
@@ -31,13 +44,38 @@
 		{#if item.headerBadges?.length || item.headerBadge || item.headerMetaIcon}
 			<div class="database-header-status">
 				{#if item.headerMetaIcon}<GameIcon name={item.headerMetaIcon}/>{/if}
-				{#each item.headerBadges ?? [] as badge}<span class="database-header-badge">{badge}</span>{/each}
-				{#if item.headerBadge}<span class="database-header-badge">{item.headerBadge}</span>{/if}
+				{#each item.headerBadges ?? [] as badge}<span class="database-header-badge" class:exotic={badge === 'EXOTIC'}>{badge}</span>{/each}
+				{#if item.headerBadge}<span class="database-header-badge" class:protocol-badge-standard={item.headerBadgeTone === 'standard'} class:protocol-badge-specialized={item.headerBadgeTone === 'specialized'} class:protocol-badge-superior={item.headerBadgeTone === 'superior'} class:protocol-badge-highend={item.headerBadgeTone === 'highend'}>{item.headerBadge}</span>{/if}
 			</div>
 		{/if}
 	</header>
 	{#if item.badges?.length}<div class="database-item-badges">{#each item.badges as badge}<span class={badge.tone ?? ''}>{badge.label}</span>{/each}</div>{/if}
-	<DatabaseFacts facts={item.facts} layout={item.factLayout}/>
+	{#if item.protocolPreview}
+		<section class="database-protocol-preview">
+			<div class="database-protocol-primary"><span>{item.protocolPreview.primaryStat}</span><b>{Number.isFinite(protocolPrimaryValue()) ? valueWithUnit(protocolPrimaryValue(), item.protocolPreview.primaryUnit) : 'NOT CONFIGURED'}</b></div>
+			{#if item.protocolPreview.talentDescription}
+				<div class="database-protocol-talent"><p>{talentDescription()}</p></div>
+			{/if}
+			<div class="database-protocol-controls"><label class="database-protocol-level"><span>LVL {protocolLevel}</span><input type="range" min="1" max="50" step="1" bind:value={protocolLevel} aria-label={`${item.name} level`}/></label>{#if item.protocolPreview.talentDescription}<div class="database-protocol-diamonds" role="group" aria-label={`${item.name} talent upgrades`}>{#each [1, 2, 3, 4, 5] as upgrade}<button type="button" class:active={talentUpgrades >= upgrade} aria-label={`Set talent upgrades to ${upgrade}`} aria-pressed={talentUpgrades === upgrade} onclick={() => talentUpgrades = talentUpgrades === upgrade ? 0 : upgrade}>◆</button>{/each}</div>{/if}</div>
+		</section>
+	{:else}
+		<DatabaseFacts facts={item.facts} layout={item.factLayout}/>
+	{/if}
+	{#if item.weaponModSlots}
+		<div class="database-weapon-mod-slots">
+			<div><span>MOD SLOTS</span></div>
+			{#if item.weaponModSlots.length}
+				<ul aria-label={`${item.name} Weapon Mod slots`}>
+					{#each item.weaponModSlots as modSlot}
+						<li class:upgrade-slot={modSlot.unlockedAtTierOne} class:has-slot-icon={Boolean(modSlot.iconUrl)} title={`${modSlot.slot}${modSlot.unlockedAtTierOne ? ' - Unlocked when this weapon upgrades to Tier 1' : ''}`}>
+							{#if modSlot.iconUrl}<WeaponModSlotIcon slot={modSlot.slot} iconUrl={modSlot.iconUrl}/><span class="sr-only">{modSlot.slot}</span>{:else}<span>{modSlot.slot}</span>{/if}
+							{#if modSlot.unlockedAtTierOne}<small>T1+</small>{/if}
+						</li>
+					{/each}
+				</ul>
+			{:else}<p>MOD SLOT DATA NOT CONFIGURED</p>{/if}
+		</div>
+	{/if}
 	{#if item.lines?.length}
 		<div class="database-item-lines">{#each item.lines as line}<div><span>{line.label}</span><b>{line.value}</b></div>{/each}</div>
 	{/if}
@@ -53,7 +91,7 @@
 			<section><span>TIER I</span><p>{item.description ?? 'Description is not available.'}</p></section>
 			<section><span>TIER II</span><p>{item.secondaryDescription ?? 'Description is not available.'}</p></section>
 		</div>
-	{:else}
+	{:else if !item.protocolPreview}
 		{#if item.description}<p class:data-description={item.descriptionStyle === 'data'}>{item.description}</p>{/if}
 		{#if item.secondaryDescription}<p class="secondary-description" class:data-description={item.descriptionStyle === 'data'}>{item.secondaryDescription}</p>{/if}
 	{/if}

src/lib/components/ModSecondaryPoolEditor.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import PendingForm from '$lib/components/PendingForm.svelte';
+  import SearchableAssignment from '$lib/components/SearchableAssignment.svelte';
+  import {
+    MOD_QUALITIES,
+    MOD_SECONDARY_CAPACITY,
+    MOD_SECONDARY_QUALITIES,
+    type ModSecondaryRange
+  } from '$lib/mods/secondary-pool';
+
+  let {
+    kind,
+    pool,
+    stats,
+    error,
+    saved = false,
+    resultToken = ''
+  }: {
+    kind: 'Weapon Mod' | 'Gear Mod';
+    pool: ModSecondaryRange[];
+    stats: Array<{ id: string; name: string; unit: string }>;
+    error?: string;
+    saved?: boolean;
+    resultToken?: string;
+  } = $props();
+
+  const poolId = $derived(kind === 'Weapon Mod' ? 'weapon-mod-secondary-pool' : 'gear-mod-secondary-pool');
+  const action = '?/saveSecondaryPool';
+  const qualityClass = (quality: string) => `quality-${quality.toLowerCase().replace('-', '')}`;
+  const blankSecondary = (): ModSecondaryRange => ({
+    statId: '',
+    values: Object.fromEntries(
+      MOD_SECONDARY_QUALITIES.map((quality) => [quality, {
+        level1Min: 0,
+        level1Max: 0,
+        level20Min: 0,
+        level20Max: 0
+      }])
+    ) as ModSecondaryRange['values']
+  });
+  let editing = $state(false);
+  let draft = $state<ModSecondaryRange[]>([]);
+  let handledResultToken = $state('');
+
+  function openEditor() {
+    draft = pool.length ? structuredClone(pool) : [blankSecondary(), blankSecondary()];
+    editing = true;
+  }
+
+  function addSecondary() {
+    if (draft.length < 50) draft = [...draft, blankSecondary()];
+  }
+
+  function removeSecondary(index: number) {
+    if (draft.length > 2) draft = draft.filter((_, itemIndex) => itemIndex !== index);
+  }
+
+  $effect(() => {
+    if (saved && resultToken && resultToken !== handledResultToken) {
+      handledResultToken = resultToken;
+      editing = false;
+    }
+  });
+</script>
+
+<section class="mod-secondary-pool-registry">
+  <div class="selection-head">
+    <div>
+      <span>SHARED {kind.toUpperCase()} SECONDARY POOL</span>
+      <small>ONE CANONICAL POOL FOR EVERY REGULAR {kind.toUpperCase()}</small>
+    </div>
+    <button type="button" class="row-action" onclick={openEditor}>EDIT SHARED POOL →</button>
+  </div>
+  <div class="mod-secondary-capacity">
+    {#each MOD_QUALITIES as quality}
+      <span><b class={qualityClass(quality)}>{quality.toUpperCase()}</b><strong>{MOD_SECONDARY_CAPACITY[quality]}</strong><small>SECONDARY {MOD_SECONDARY_CAPACITY[quality] === 1 ? 'ROLL' : 'ROLLS'}</small></span>
+    {/each}
+    <span class="pool-total"><b>ATTRIBUTE POOL</b><strong>{pool.length}</strong><small>SHARED OPTIONS</small></span>
+  </div>
+</section>
+
+{#if editing}
+  <div class="dashboard-editor mod-secondary-pool-editor">
+    <div class="editor-title">
+      <div><p class="eyebrow">SHARED CONFIGURATION</p><h3>{kind.toUpperCase()} SECONDARY ATTRIBUTES</h3></div>
+      <button aria-label={`Close ${kind} secondary pool editor`} onclick={() => editing = false}>×</button>
+    </div>
+    <PendingForm {action}>
+      <input type="hidden" name="id" value={poolId}/>
+      <input type="hidden" name="name" value={`Shared ${kind} Secondary Pool`}/>
+      <input type="hidden" name="secondaryRanges" value={JSON.stringify(draft)}/>
+      <p class="console-note">Standard quality has no secondary roll. Specialized selects one option; Superior and High-end select two distinct options. Ranges scale linearly from Level 1 to Level 20.</p>
+      <div class="selection-head pool-editor-head">
+        <div><span>AVAILABLE ATTRIBUTES</span><small>SPECIALIZED · SUPERIOR · HIGH-END LEVEL ENDPOINTS</small></div>
+        <button type="button" class="row-action" onclick={addSecondary} disabled={draft.length >= 50}>ADD ATTRIBUTE ＋</button>
+      </div>
+      <div class="mod-secondary-pool-options">
+        {#each draft as range, index}
+          <div class="mod-secondary-pool-option">
+            <strong>{String(index + 1).padStart(2, '0')}</strong>
+            <SearchableAssignment
+              items={stats}
+              mode="single"
+              compact
+              subjectLabel="POSSIBLE ATTRIBUTE"
+              searchPlaceholder="Search attributes…"
+              excludedIds={draft.filter((_, itemIndex) => itemIndex !== index).map((item) => item.statId)}
+              bind:value={range.statId}
+            />
+            {#each MOD_SECONDARY_QUALITIES as quality}
+              <div class="mod-secondary-quality-range">
+                <b class={qualityClass(quality)}>{quality.toUpperCase()}</b>
+                <label><span>LEVEL 1</span><div><input type="number" step="any" bind:value={range.values[quality].level1Min} aria-label={`${quality} ${stats.find((item) => item.id === range.statId)?.name ?? 'attribute'} Level 1 minimum`} required/><i>–</i><input type="number" step="any" bind:value={range.values[quality].level1Max} aria-label={`${quality} ${stats.find((item) => item.id === range.statId)?.name ?? 'attribute'} Level 1 maximum`} required/></div></label>
+                <label><span>LEVEL 20</span><div><input type="number" step="any" bind:value={range.values[quality].level20Min} aria-label={`${quality} ${stats.find((item) => item.id === range.statId)?.name ?? 'attribute'} Level 20 minimum`} required/><i>–</i><input type="number" step="any" bind:value={range.values[quality].level20Max} aria-label={`${quality} ${stats.find((item) => item.id === range.statId)?.name ?? 'attribute'} Level 20 maximum`} required/></div></label>
+              </div>
+            {/each}
+            <button type="button" aria-label={`Remove shared secondary attribute option ${index + 1}`} onclick={() => removeSecondary(index)} disabled={draft.length <= 2}>×</button>
+          </div>
+        {/each}
+      </div>
+      {#if error}<p class="error">{error}</p>{/if}
+      <div class="form-actions"><button type="button" class="secondary" onclick={() => editing = false}>CANCEL</button><button class="primary">SAVE SHARED POOL →</button></div>
+    </PendingForm>
+  </div>
+{/if}

src/lib/components/ProposalChangePreview.svelte

@@ -29,8 +29,6 @@
 			gear_max: 'gearMax',
 			weapon_min: 'weaponMin',
 			weapon_max: 'weaponMax',
-			skill_chip_min: 'chipMin',
-			skill_chip_max: 'chipMax',
 			cap_value: 'capValue'
 		};
 		return proposed[names[key] ?? key];
@@ -46,6 +44,8 @@
 	);
 	const specializationRecord = $derived((currentSnapshot?.record ?? null) as Record<string, unknown> | null);
 	const skillChipRecord = $derived((currentSnapshot?.record ?? null) as Record<string, unknown> | null);
+	const currentSharedSkillChipProfiles = $derived((Array.isArray(currentSnapshot) ? currentSnapshot : []) as any[]);
+	const proposedSharedSkillChipProfiles = $derived((jsonValue(proposed.profiles) ?? []) as any[]);
 	const skillChipFields = $derived([
 		{ label: 'NAME', current: skillChipRecord?.name, proposed: proposed.name },
 		{ label: 'SPECIALIZATION ABILITY', current: skillChipRecord?.specialization_ability_id, proposed: proposed.abilityId },
@@ -256,7 +256,7 @@
 						{#each [['type','TYPE'],['category','CATEGORY'],['calculation_type','CALCULATION'],['unit','UNIT']] as field}
 							<div class="preview-field"><span>{field[1]}</span><strong>{shown(attributeValue('current', field[0]))}</strong></div>
 						{/each}
-						{#each [['gear','GEAR'],['weapon','WEAPON'],['skill_chip','SKILL CHIP']] as source}
+						{#each [['gear','GEAR'],['weapon','WEAPON']] as source}
 							<div class="preview-field range"><span>{source[1]} RANGE · OPTIONAL</span><div><strong>{shown(attributeValue('current', `${source[0]}_min`))}</strong><i>TO</i><strong>{shown(attributeValue('current', `${source[0]}_max`))}</strong></div></div>
 						{/each}
 						<div class="preview-field"><span>OPTIONAL CAP</span><strong>{shown(attributeValue('current', 'cap_value'))}</strong></div>
@@ -273,13 +273,24 @@
 					{#each [['type','TYPE'],['category','CATEGORY'],['calculation_type','CALCULATION'],['unit','UNIT']] as field}
 						<div class="preview-field"><span>{field[1]}</span><strong>{shown(attributeValue('proposed', field[0]))}</strong></div>
 					{/each}
-					{#each [['gear','GEAR'],['weapon','WEAPON'],['skill_chip','SKILL CHIP']] as source}
+					{#each [['gear','GEAR'],['weapon','WEAPON']] as source}
 						<div class="preview-field range"><span>{source[1]} RANGE · OPTIONAL</span><div><strong>{shown(attributeValue('proposed', `${source[0]}_min`))}</strong><i>TO</i><strong>{shown(attributeValue('proposed', `${source[0]}_max`))}</strong></div></div>
 					{/each}
 					<div class="preview-field"><span>OPTIONAL CAP</span><strong>{shown(attributeValue('proposed', 'cap_value'))}</strong></div>
 				</div>
 			</article>
 		</div>
+	{:else if module === 'skillchips' && ['savePrimaryProfile','saveSecondaryPool'].includes(action)}
+		<div class="proposal-compare-grid">
+			<article class="proposal-editor-preview before">
+				<header><span>CURRENT LIVE · SHARED {action === 'savePrimaryProfile' ? 'PRIMARY PROFILE' : 'SECONDARY POOL'}</span><b>BEFORE</b></header>
+				<div class="proposal-structured-list">{#each currentSharedSkillChipProfiles as profile}<p>{profile.statId} · {Object.entries(profile.values ?? {}).map(([quality, range]: [string, any]) => `${quality.toUpperCase()} ${shown(range.min)}–${shown(range.max)}`).join(' · ')}</p>{:else}<p>SHARED PROFILE NOT CONFIGURED</p>{/each}</div>
+			</article>
+			<article class="proposal-editor-preview after">
+				<header><span>PROPOSED · SHARED {action === 'savePrimaryProfile' ? 'PRIMARY PROFILE' : 'SECONDARY POOL'}</span><b>AFTER</b></header>
+				<div class="proposal-structured-list">{#each proposedSharedSkillChipProfiles as profile}<p>{profile.statId} · {Object.entries(profile.values ?? {}).map(([quality, range]: [string, any]) => `${quality.toUpperCase()} ${shown(range.min)}–${shown(range.max)}`).join(' · ')}</p>{/each}</div>
+			</article>
+		</div>
 	{:else if module === 'skillchips' && action === 'save'}
 		<div class="proposal-compare-grid">
 			<article class="proposal-editor-preview before">
@@ -287,7 +298,7 @@
 				{#if skillChipRecord}
 					<div class="proposal-field-summary">
 						{#each skillChipFields as field}<div><span>{field.label}</span><strong>{shown(field.current)}</strong></div>{/each}
-						<div><span>ROLL POOLS</span><strong>{(currentSnapshot?.primaryOptions as any[])?.length ?? 0} PRIMARY · {(currentSnapshot?.secondaryOptions as any[])?.length ?? 0} SECONDARY</strong></div>
+						<div><span>3-PIECE TALENT</span><strong>{currentSnapshot?.talent ? 'ASSIGNED' : 'NOT ASSIGNED'}</strong></div>
 					</div>
 					<div class="proposal-structured-list">
 						<header><span>3-PIECE CONDITIONAL MECHANIC</span><b>TYPED RULE</b></header>
@@ -301,7 +312,7 @@
 				<header><span>PROPOSED · SKILL CHIP</span><b>AFTER</b></header>
 				<div class="proposal-field-summary">
 					{#each skillChipFields as field}<div><span>{field.label}</span><strong>{shown(field.proposed)}</strong></div>{/each}
-					<div><span>ROLL POOLS</span><strong>{Array.isArray(proposed.primaryStatIds) ? proposed.primaryStatIds.length : Number(Boolean(proposed.primaryStatIds))} PRIMARY · {Array.isArray(proposed.secondaryStatIds) ? proposed.secondaryStatIds.length : Number(Boolean(proposed.secondaryStatIds))} SECONDARY</strong></div>
+					<div><span>3-PIECE TALENT</span><strong>{proposed.hasTalent === '1' ? 'ASSIGNED' : 'NOT ASSIGNED'}</strong></div>
 				</div>
 				<div class="proposal-structured-list">
 					<header><span>3-PIECE CONDITIONAL MECHANIC</span><b>TYPED RULE</b></header>

src/lib/components/SkillChipSharedProfiles.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import PendingForm from '$lib/components/PendingForm.svelte';
+  import SearchableAssignment from '$lib/components/SearchableAssignment.svelte';
+  import {
+    SKILL_CHIP_QUALITIES,
+    SKILL_CHIP_SECONDARY_CAPACITY,
+    SKILL_CHIP_SECONDARY_QUALITIES,
+    type SkillChipProfile
+  } from '$lib/skill-chips/profiles';
+
+  let {
+    primaryProfiles,
+    primaryProfileBase,
+    secondaryPool,
+    stats,
+    primaryError,
+    secondaryError,
+    primarySaved = false,
+    secondarySaved = false,
+    resultToken = ''
+  }: {
+    primaryProfiles: SkillChipProfile[];
+    primaryProfileBase: SkillChipProfile[];
+    secondaryPool: SkillChipProfile[];
+    stats: Array<{ id: string; name: string; unit: string }>;
+    primaryError?: string;
+    secondaryError?: string;
+    primarySaved?: boolean;
+    secondarySaved?: boolean;
+    resultToken?: string;
+  } = $props();
+
+  const qualityClass = (quality: string) => `quality-${quality.toLowerCase().replace('-', '')}`;
+  const blankValues = (qualities: readonly string[]) => Object.fromEntries(
+    qualities.map((quality) => [quality, { min: '', max: '' }])
+  );
+  const hydrated = (profile: SkillChipProfile, qualities: readonly string[]) => ({
+    statId: profile.statId,
+    values: Object.fromEntries(qualities.map((quality) => [quality, {
+      min: profile.values[quality]?.min ?? '',
+      max: profile.values[quality]?.max ?? ''
+    }]))
+  });
+  const blankSecondary = () => ({ statId: '', values: blankValues(SKILL_CHIP_SECONDARY_QUALITIES) });
+  let primaryEditing = $state(false);
+  let secondaryEditing = $state(false);
+  let primaryDraft = $state<any[]>([]);
+  let secondaryDraft = $state<any[]>([]);
+  let handledPrimaryToken = $state('');
+  let handledSecondaryToken = $state('');
+
+  function openPrimary() {
+    primaryDraft = primaryProfiles.map((profile) => hydrated(profile, SKILL_CHIP_QUALITIES));
+    secondaryEditing = false;
+    primaryEditing = true;
+  }
+  function openSecondary() {
+    const loaded: any[] = secondaryPool.map((profile) =>
+      hydrated(profile, SKILL_CHIP_SECONDARY_QUALITIES)
+    );
+    while (loaded.length < 2) loaded.push(blankSecondary());
+    secondaryDraft = loaded;
+    primaryEditing = false;
+    secondaryEditing = true;
+  }
+  $effect(() => {
+    if (primarySaved && resultToken && resultToken !== handledPrimaryToken) {
+      handledPrimaryToken = resultToken;
+      primaryEditing = false;
+    }
+    if (secondarySaved && resultToken && resultToken !== handledSecondaryToken) {
+      handledSecondaryToken = resultToken;
+      secondaryEditing = false;
+    }
+  });
+</script>
+
+<div class="skill-chip-shared-config">
+  <section class="mod-secondary-pool-registry">
+    <div class="selection-head"><div><span>SHARED PRIMARY PROFILE</span><small>FOUR ABILITY-SCOPED STATS · ONE RANGE PER QUALITY</small></div><button type="button" class="row-action" onclick={openPrimary}>EDIT PRIMARY RANGES →</button></div>
+    <div class="mod-secondary-capacity">
+      {#each SKILL_CHIP_QUALITIES as quality}<span><b class={qualityClass(quality)}>{quality.toUpperCase()}</b><strong>{primaryProfiles.filter((profile) => profile.values[quality]).length}</strong><small>OF 4 CONFIGURED</small></span>{/each}
+      <span class="pool-total"><b>CALCULATION</b><strong>—</strong><small>NOT YET DEFINED</small></span>
+    </div>
+  </section>
+  <section class="mod-secondary-pool-registry">
+    <div class="selection-head"><div><span>SHARED SECONDARY POOL</span><small>ONE CANONICAL ATTRIBUTE POOL FOR EVERY SKILL CHIP</small></div><button type="button" class="row-action" onclick={openSecondary}>EDIT SHARED POOL →</button></div>
+    <div class="mod-secondary-capacity">
+      {#each SKILL_CHIP_QUALITIES as quality}<span><b class={qualityClass(quality)}>{quality.toUpperCase()}</b><strong>{SKILL_CHIP_SECONDARY_CAPACITY[quality]}</strong><small>SECONDARY {SKILL_CHIP_SECONDARY_CAPACITY[quality] === 1 ? 'ROLL' : 'ROLLS'}</small></span>{/each}
+      <span class="pool-total"><b>ATTRIBUTE POOL</b><strong>{secondaryPool.length}</strong><small>SHARED OPTIONS</small></span>
+    </div>
+  </section>
+</div>
+
+{#if primaryEditing}
+  <div class="dashboard-editor skill-chip-profile-editor">
+    <div class="editor-title"><div><p class="eyebrow">SHARED CONFIGURATION</p><h3>SKILL CHIP PRIMARY RANGES</h3></div><button aria-label="Close primary profile editor" onclick={() => primaryEditing = false}>×</button></div>
+    <PendingForm action="?/savePrimaryProfile">
+      <input type="hidden" name="id" value="skill-chip-primary-profile"/><input type="hidden" name="name" value="Shared Skill Chip Primary Profile"/><input type="hidden" name="baseProfiles" value={JSON.stringify(primaryProfileBase)}/><input type="hidden" name="profiles" value={JSON.stringify(primaryDraft)}/>
+      <p class="console-note">Every Skill Chip rolls one of these four ability-scoped primary stats. Configure the direct minimum and maximum for each quality. Current combat calculations do not apply these values.</p>
+      <div class="skill-chip-profile-options fixed">
+        {#each primaryDraft as profile}
+          <div class="skill-chip-profile-option"><div><strong>{stats.find((item) => item.id === profile.statId)?.name ?? 'UNKNOWN ATTRIBUTE'}</strong><small>{stats.find((item) => item.id === profile.statId)?.unit || 'FLAT'} · ABILITY SCOPED</small></div>{#each SKILL_CHIP_QUALITIES as quality}<label><b class={qualityClass(quality)}>{quality.toUpperCase()}</b><span><input type="number" min="0" step="any" bind:value={profile.values[quality].min} aria-label={`${quality} ${stats.find((item) => item.id === profile.statId)?.name ?? 'attribute'} minimum`} required/><i>–</i><input type="number" min="0" step="any" bind:value={profile.values[quality].max} aria-label={`${quality} ${stats.find((item) => item.id === profile.statId)?.name ?? 'attribute'} maximum`} required/></span></label>{/each}</div>
+        {/each}
+      </div>
+      {#if primaryError}<p class="error">{primaryError}</p>{/if}
+      <div class="form-actions"><button type="button" class="secondary" onclick={() => primaryEditing = false}>CANCEL</button><button class="primary">SAVE PRIMARY PROFILE →</button></div>
+    </PendingForm>
+  </div>
+{/if}
+
+{#if secondaryEditing}
+  <div class="dashboard-editor skill-chip-profile-editor">
+    <div class="editor-title"><div><p class="eyebrow">SHARED CONFIGURATION</p><h3>SKILL CHIP SECONDARY POOL</h3></div><button aria-label="Close secondary pool editor" onclick={() => secondaryEditing = false}>×</button></div>
+    <PendingForm action="?/saveSecondaryPool">
+      <input type="hidden" name="id" value="skill-chip-secondary-pool"/><input type="hidden" name="name" value="Shared Skill Chip Secondary Pool"/><input type="hidden" name="baseProfiles" value={JSON.stringify(secondaryPool)}/><input type="hidden" name="profiles" value={JSON.stringify(secondaryDraft)}/>
+      <p class="console-note">Standard has no secondary roll. Specialized selects one option; Superior and High-end select two distinct options. Skill Chips have no item level, so each quality uses one direct range.</p>
+      <div class="selection-head pool-editor-head"><div><span>AVAILABLE ATTRIBUTES</span><small>SPECIALIZED · SUPERIOR · HIGH-END RANGES</small></div><button type="button" class="row-action" onclick={() => secondaryDraft = [...secondaryDraft, blankSecondary()]} disabled={secondaryDraft.length >= 50}>ADD ATTRIBUTE ＋</button></div>
+      <div class="skill-chip-profile-options">
+        {#each secondaryDraft as profile, index}
+          <div class="skill-chip-profile-option selectable"><strong>{String(index + 1).padStart(2, '0')}</strong><SearchableAssignment items={stats} mode="single" compact subjectLabel="POSSIBLE ATTRIBUTE" searchPlaceholder="Search attributes…" excludedIds={secondaryDraft.filter((_, itemIndex) => itemIndex !== index).map((item) => item.statId)} bind:value={profile.statId}/>{#each SKILL_CHIP_SECONDARY_QUALITIES as quality}<label><b class={qualityClass(quality)}>{quality.toUpperCase()}</b><span><input type="number" min="0" step="any" bind:value={profile.values[quality].min} aria-label={`${quality} ${stats.find((item) => item.id === profile.statId)?.name ?? `option ${index + 1}`} minimum`} required/><i>–</i><input type="number" min="0" step="any" bind:value={profile.values[quality].max} aria-label={`${quality} ${stats.find((item) => item.id === profile.statId)?.name ?? `option ${index + 1}`} maximum`} required/></span></label>{/each}<button type="button" aria-label={`Remove secondary option ${index + 1}`} onclick={() => secondaryDraft = secondaryDraft.filter((_, itemIndex) => itemIndex !== index)} disabled={secondaryDraft.length <= 2}>×</button></div>
+        {/each}
+      </div>
+      {#if secondaryError}<p class="error">{secondaryError}</p>{/if}
+      <div class="form-actions"><button type="button" class="secondary" onclick={() => secondaryEditing = false}>CANCEL</button><button class="primary">SAVE SHARED POOL →</button></div>
+    </PendingForm>
+  </div>
+{/if}

src/lib/components/WeaponModSlotIcon.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  let {
+    slot,
+    iconUrl,
+    decorative = true,
+    size = 24
+  }: { slot: string; iconUrl?: string | null; decorative?: boolean; size?: number } = $props();
+</script>
+
+{#if iconUrl}
+  <img
+    class="weapon-mod-slot-icon"
+    src={iconUrl}
+    alt={decorative ? '' : `${slot} Weapon Mod slot`}
+    loading="lazy"
+    width={size}
+    height={size}
+    style={`--weapon-mod-slot-icon-size: ${size}px`}
+  />
+{/if}
+
+<style>
+  img {
+    width: var(--weapon-mod-slot-icon-size);
+    height: var(--weapon-mod-slot-icon-size);
+    flex: 0 0 var(--weapon-mod-slot-icon-size);
+    object-fit: contain;
+  }
+</style>

src/lib/components/WeaponModSlotIconPanel.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import IconUploadField from '$lib/components/IconUploadField.svelte';
+  import PendingForm from '$lib/components/PendingForm.svelte';
+  import WeaponModSlotIcon from '$lib/components/WeaponModSlotIcon.svelte';
+
+  type SlotIcon = {
+    id: string;
+    name: string;
+    iconUrl: string;
+    updatedAt: string;
+  };
+
+  let {
+    slots,
+    error = '',
+    saved = false,
+    resultToken = ''
+  }: {
+    slots: SlotIcon[];
+    error?: string;
+    saved?: boolean;
+    resultToken?: string;
+  } = $props();
+
+  let editing = $state<SlotIcon | null>(null);
+  let handledResultToken = $state('');
+
+  $effect(() => {
+    if (saved && resultToken && resultToken !== handledResultToken) {
+      handledResultToken = resultToken;
+      editing = null;
+    }
+  });
+</script>
+
+<section class="slot-icon-registry" aria-labelledby="slot-icon-registry-title">
+  <div class="selection-head">
+    <div>
+      <span id="slot-icon-registry-title">SHARED MOD SLOT ICONS</span>
+      <small>ONE CANONICAL ICON FOR EACH WEAPON MOD SLOT</small>
+    </div>
+    <b>{slots.every((slot) => slot.iconUrl) ? 'READY' : 'CONFIG REQUIRED'}</b>
+  </div>
+  <div class="slot-icon-grid">
+    {#each slots as slot}
+      <button
+        type="button"
+        class:configured={Boolean(slot.iconUrl)}
+        aria-pressed={editing?.id === slot.id}
+        onclick={() => editing = slot}
+      >
+        <span class="slot-icon-preview">
+          {#if slot.iconUrl}
+            <WeaponModSlotIcon slot={slot.name} iconUrl={slot.iconUrl}/>
+          {:else}
+            <i aria-hidden="true">?</i>
+          {/if}
+        </span>
+        <span><strong>{slot.name}</strong><small>{slot.iconUrl ? 'ICON REGISTERED' : 'ICON REQUIRED'}</small></span>
+        <b>EDIT</b>
+      </button>
+    {/each}
+  </div>
+</section>
+
+{#if editing}
+  <section class="dashboard-editor slot-icon-editor" aria-labelledby="slot-icon-editor-title">
+    <div class="editor-title">
+      <div><p class="eyebrow">SHARED MOD SLOT ARTWORK</p><h3 id="slot-icon-editor-title">{editing.name.toUpperCase()}</h3></div>
+      <button aria-label="Close slot icon editor" onclick={() => editing = null}>×</button>
+    </div>
+    <PendingForm action="?/saveSlotIcon" enctype="multipart/form-data">
+      <input type="hidden" name="id" value={editing.id}/>
+      <input type="hidden" name="name" value={`${editing.name} Slot`}/>
+      <input type="hidden" name="slotType" value={editing.name}/>
+      <input type="hidden" name="baseUpdatedAt" value={editing.updatedAt}/>
+      <div class="slot-icon-editor-body">
+        <div class="slot-icon-editor-identity">
+          <span class="slot-icon-preview large">
+            {#if editing.iconUrl}
+              <WeaponModSlotIcon slot={editing.name} iconUrl={editing.iconUrl} size={56}/>
+            {:else}
+              <i aria-hidden="true">?</i>
+            {/if}
+          </span>
+          <div><small>CANONICAL SLOT</small><strong>{editing.name}</strong><p>Weapon cards use this artwork anywhere the slot is available.</p></div>
+        </div>
+        <IconUploadField currentUrl={editing.iconUrl} label={`${editing.name.toUpperCase()} SLOT ICON`} resetToken={`${editing.id}:${editing.updatedAt}`}/>
+      </div>
+      {#if error}<p class="error" role="alert">{error}</p>{/if}
+      <div class="form-actions"><button type="button" class="secondary" onclick={() => editing = null}>CANCEL</button><button class="primary">SAVE SLOT ICON →</button></div>
+    </PendingForm>
+  </section>
+{/if}
+
+<style>
+  .slot-icon-registry {
+    margin: 10px 0;
+    padding: 10px;
+    border: 1px solid var(--shd-border);
+    border-left: 2px solid var(--shd-info);
+    background: #0d1011;
+  }
+  .slot-icon-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 7px;
+    margin-top: 8px;
+  }
+  .slot-icon-grid > button {
+    min-height: 62px;
+    display: grid;
+    grid-template-columns: 38px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 9px;
+    padding: 8px;
+    border: 1px solid var(--shd-border);
+    background: #101415;
+    color: var(--shd-text);
+    text-align: left;
+    cursor: pointer;
+  }
+  .slot-icon-grid > button:hover,
+  .slot-icon-grid > button:focus-visible,
+  .slot-icon-grid > button[aria-pressed='true'] {
+    border-color: var(--shd-orange);
+    background: #191712;
+  }
+  .slot-icon-grid > button:focus-visible {
+    outline: 2px solid var(--shd-orange);
+    outline-offset: 2px;
+  }
+  .slot-icon-grid > button > span:nth-child(2) {
+    min-width: 0;
+    display: grid;
+    gap: 3px;
+  }
+  .slot-icon-grid strong,
+  .slot-icon-grid small {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .slot-icon-grid strong {
+    font-size: var(--shd-type-label);
+    letter-spacing: .04em;
+  }
+  .slot-icon-grid small,
+  .slot-icon-grid > button > b {
+    color: var(--shd-text-muted);
+    font-size: var(--shd-type-micro);
+    letter-spacing: .07em;
+  }
+  .slot-icon-grid > button.configured small,
+  .slot-icon-grid > button.configured > b {
+    color: var(--shd-info);
+  }
+  .slot-icon-preview {
+    width: 38px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+    border: 1px solid #313839;
+    background: #090b0c;
+  }
+  .slot-icon-preview i {
+    color: #586164;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 900;
+  }
+  .slot-icon-editor {
+    border-top-color: var(--shd-info);
+  }
+  .slot-icon-editor-body {
+    display: grid;
+    grid-template-columns: minmax(260px, .7fr) minmax(360px, 1.3fr);
+    gap: 12px;
+  }
+  .slot-icon-editor-identity {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--shd-border);
+    background: #0d1011;
+  }
+  .slot-icon-preview.large {
+    width: 76px;
+    height: 76px;
+    flex: 0 0 76px;
+  }
+  .slot-icon-editor-identity > div {
+    display: grid;
+    gap: 5px;
+  }
+  .slot-icon-editor-identity small,
+  .slot-icon-editor-identity p {
+    color: var(--shd-text-muted);
+    font-size: var(--shd-type-telemetry);
+  }
+  .slot-icon-editor-identity p {
+    margin: 0;
+  }
+  @media (max-width: 900px) {
+    .slot-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .slot-icon-editor-body { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 480px) {
+    .slot-icon-grid { grid-template-columns: 1fr; }
+  }
+</style>

src/lib/components/isac/MechanicProgramEditor.svelte

@@ -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)}