@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/defense-in-depth/{arc-did/ArcDiD.vue → arc-defense-in-depth/ArcDefenseInDepth.vue}

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { activateOnKeyboard } from '../../../utils/activateOnKeyboard';
 import {
   type ComputedRef,
   computed,
@@ -13,34 +14,32 @@ import {
 
 import {
   ARC_DID_ROOT_KEY,
-  type IArcDiDRegisteredLayerData,
-  type IArcDiDRootContext,
-} from '../../../utils/defenseInDepth/arcDid/context';
-import { createArcDiDGeometry } from '../../../utils/defenseInDepth/arcDid/createArcDiDGeometry';
+  type IArcDefenseInDepthRegisteredLayerData,
+  type IArcDefenseInDepthRootContext,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
+import { createArcDefenseInDepthGeometry } from '../../../utils/defense-in-depth/arc-defense-in-depth/createArcDefenseInDepthGeometry';
 import type {
-  IArcDiDLayerItem,
-  TArcDiDOrder,
-} from '../../../utils/defenseInDepth/arcDid/types';
-import {
-  lightenColor,
-  resolveArcDiDPalette,
-} from '../../../utils/defenseInDepth/shared/colors';
-import { DEFAULT_DID_COLOR } from '../../../utils/defenseInDepth/shared/constants';
+  IArcDefenseInDepthLayerItem,
+  IArcDefenseInDepthPartGeometry,
+  TArcDefenseInDepthOrder,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/types';
+import { lightenColor } from '../../../utils/colors';
+import { resolveArcDefenseInDepthPalette } from '../../../utils/defense-in-depth/shared/colors';
+import { DEFAULT_DID_COLOR } from '../../../utils/defense-in-depth/shared/constants';
 import { useDiagramAutoScale } from '../../../utils/useDiagramAutoScale';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'ArcDiD',
+  name: 'ArcDefenseInDepth',
   inheritAttrs: false,
 });
 
-export interface IArcDiDProps {
-  readonly order?: TArcDiDOrder;
+export interface IArcDefenseInDepthProps {
+  readonly order?: TArcDefenseInDepthOrder;
   readonly count?: number;
   readonly activeIndex?: number;
   readonly color?: string;
   readonly colors?: readonly string[] | string[];
-  readonly layers?: readonly IArcDiDLayerItem[];
   readonly width?: number | string;
   readonly height?: number | string;
   readonly scale?: number;
@@ -60,14 +59,13 @@ export interface IArcDiDProps {
   readonly activePart?: string | number;
 }
 
-const props = withDefaults(defineProps<IArcDiDProps>(), {
+const props = withDefaults(defineProps<IArcDefenseInDepthProps>(), {
   order: 'outer-to-inner',
   count: undefined,
   activeIndex: -1,
   activePart: undefined,
   color: DEFAULT_DID_COLOR,
   colors: undefined,
-  layers: undefined,
   width: 720,
   height: undefined,
   scale: undefined,
@@ -90,7 +88,7 @@ const emit = defineEmits<{
   (e: 'update:activeIndex', index: number): void;
   (e: 'update:activePart', part: string | number | undefined): void;
   (e: 'select', index: number): void;
-  (e: 'part-click', part: IArcDiDPartGeometry): void;
+  (e: 'part-click', part: IArcDefenseInDepthPartGeometry): void;
   (e: 'click', event: MouseEvent): void;
 }>();
 
@@ -109,9 +107,11 @@ const isAnimated = computed(() => {
   if (!props.animation) {
     return false;
   }
+
   if (shiftingIntro) {
     return shiftingIntro.active.value;
   }
+
   return true;
 });
 
@@ -119,9 +119,11 @@ const resolvedStartDelay = computed(() => {
   if (props.startDelay !== undefined) {
     return props.startDelay;
   }
+
   if (shiftingIntro?.isShifting?.value) {
     return 500;
   }
+
   return 0;
 });
 
@@ -142,14 +144,18 @@ function hasComponentName(type: unknown, targetName: string): boolean {
       comp?.__name === targetName
     );
   }
+
   return false;
 }
 
 function countSlottedLayers(slotNodes?: VNode[]): number {
-  if (!slotNodes) return 0;
+  if (!slotNodes) {
+    return 0;
+  }
+
   let count = 0;
   for (const node of slotNodes) {
-    if (hasComponentName(node.type, 'ArcDiDLayer')) {
+    if (hasComponentName(node.type, 'ArcDefenseInDepthLayer')) {
       count++;
       continue;
     }
@@ -157,6 +163,7 @@ function countSlottedLayers(slotNodes?: VNode[]): number {
       count += countSlottedLayers(node.children as VNode[]);
     }
   }
+
   return count;
 }
 
@@ -166,13 +173,13 @@ const slottedLayerCount = computed(() => {
 });
 
 const registeredLayerTokens = ref<symbol[]>([]);
-const registeredLayerData = ref<Map<symbol, IArcDiDRegisteredLayerData>>(
-  new Map(),
-);
+const registeredLayerData = ref<
+  Map<symbol, IArcDefenseInDepthRegisteredLayerData>
+>(new Map());
 
 function registerLayer(
   token?: symbol,
-  dataRef?: ComputedRef<IArcDiDRegisteredLayerData | undefined>,
+  dataRef?: ComputedRef<IArcDefenseInDepthRegisteredLayerData | undefined>,
 ) {
   const lToken = token ?? Symbol();
   if (!registeredLayerTokens.value.includes(lToken)) {
@@ -216,27 +223,30 @@ const resolvedCount = computed<number>(() => {
   if (props.count !== undefined && props.count > 0) {
     return Math.max(1, Math.min(props.count, 6));
   }
-  if (props.layers && props.layers.length > 0) {
-    return Math.max(1, Math.min(props.layers.length, 6));
-  }
+
   if (slottedLayerCount.value > 0) {
     return Math.max(1, Math.min(slottedLayerCount.value, 6));
   }
+
   if (registeredLayerTokens.value.length > 0) {
     return Math.max(1, Math.min(registeredLayerTokens.value.length, 6));
   }
+
   return 0;
 });
 
-const resolvedLayers = computed<IArcDiDLayerItem[]>(() => {
-  const indexed: (IArcDiDLayerItem | undefined)[] = [];
-  const unindexed: IArcDiDLayerItem[] = [];
+const resolvedLayers = computed<IArcDefenseInDepthLayerItem[]>(() => {
+  const indexed: (IArcDefenseInDepthLayerItem | undefined)[] = [];
+  const unindexed: IArcDefenseInDepthLayerItem[] = [];
 
   for (let i = 0; i < registeredLayerTokens.value.length; i++) {
     const token = registeredLayerTokens.value[i];
-    if (!token) continue;
+    if (!token) {
+      continue;
+    }
+
     const data = registeredLayerData.value.get(token);
-    const item: IArcDiDLayerItem = {
+    const item: IArcDefenseInDepthLayerItem = {
       title: data?.title ?? '',
       color: data?.color,
       parts: data?.parts ?? [],
@@ -252,7 +262,7 @@ const resolvedLayers = computed<IArcDiDLayerItem[]>(() => {
   }
 
   let unindexedIdx = 0;
-  const result: IArcDiDLayerItem[] = [];
+  const result: IArcDefenseInDepthLayerItem[] = [];
   const total = Math.max(indexed.length, registeredLayerTokens.value.length);
   for (let i = 0; i < total; i++) {
     const item = indexed[i];
@@ -265,18 +275,12 @@ const resolvedLayers = computed<IArcDiDLayerItem[]>(() => {
       }
     }
   }
-  return result;
-});
 
-const effectiveLayers = computed<readonly IArcDiDLayerItem[]>(() => {
-  if (props.layers && props.layers.length > 0) {
-    return props.layers;
-  }
-  return resolvedLayers.value;
+  return result;
 });
 
 const palette = computed(() =>
-  resolveArcDiDPalette(props.color, resolvedCount.value),
+  resolveArcDefenseInDepthPalette(props.color, resolvedCount.value),
 );
 
 function getLayerColor(index: number): string {
@@ -327,21 +331,23 @@ function setActivePart(part: string | number | undefined): void {
   emit('update:activePart', part);
 }
 
-function isPartActive(part: IArcDiDPartGeometry): boolean {
+function isPartActive(part: IArcDefenseInDepthPartGeometry): boolean {
   if (part.active) {
     return true;
   }
+
   if (internalActivePart.value !== undefined) {
     return (
       internalActivePart.value === part.label ||
       internalActivePart.value === part.index
     );
   }
+
   return false;
 }
 
 const geo = computed(() => {
-  return createArcDiDGeometry({
+  return createArcDefenseInDepthGeometry({
     viewBoxWidth: props.viewBoxWidth,
     viewBoxHeight: props.viewBoxHeight,
     innerRadius: props.innerRadius,
@@ -350,7 +356,7 @@ const geo = computed(() => {
     gap: props.gap,
     order: props.order,
     titleAngleSpan: props.titleAngleSpan,
-    layers: effectiveLayers.value,
+    layers: resolvedLayers.value,
   });
 });
 
@@ -358,6 +364,7 @@ const hasAnyActivePart = computed<boolean>(() => {
   if (internalActivePart.value !== undefined) {
     return true;
   }
+
   for (const layer of geo.value.layers) {
     for (const part of layer.parts) {
       if (part.active) {
@@ -365,6 +372,7 @@ const hasAnyActivePart = computed<boolean>(() => {
       }
     }
   }
+
   return false;
 });
 
@@ -380,17 +388,25 @@ function getPartOpacity(layerIndex: number, isActive: boolean): number {
   if (hasAnyActivePart.value) {
     return isActive ? 1 : 0.28;
   }
+
   if (
     internalActiveIndex.value === -1 ||
     internalActiveIndex.value === layerIndex
   ) {
     return 1;
   }
+
   return 0.45;
 }
 
-function handlePartClick(part: IArcDiDPartGeometry, layerIndex: number): void {
-  if (!props.interactive) return;
+function handlePartClick(
+  part: IArcDefenseInDepthPartGeometry,
+  layerIndex: number,
+): void {
+  if (!props.interactive) {
+    return;
+  }
+
   emit('part-click', part);
   if (isPartActive(part)) {
     setActivePart(undefined);
@@ -405,7 +421,7 @@ function handlePartClick(part: IArcDiDPartGeometry, layerIndex: number): void {
   }
 }
 
-const rootContext: IArcDiDRootContext = {
+const rootContext: IArcDefenseInDepthRootContext = {
   geo,
   count: resolvedCount,
   activeIndex: internalActiveIndex,
@@ -414,7 +430,10 @@ const rootContext: IArcDiDRootContext = {
   setActivePart,
   hasAnyActivePart,
   isPartActive: (label, index, activeProp) => {
-    if (activeProp) return true;
+    if (activeProp) {
+      return true;
+    }
+
     if (internalActivePart.value !== undefined) {
       return (
         internalActivePart.value === label || internalActivePart.value === index
@@ -449,6 +468,7 @@ const stageTransform = computed(() => {
   if (resolvedScale.value !== 1) {
     return `scale(${resolvedScale.value})`;
   }
+
   return undefined;
 });
 
@@ -456,6 +476,7 @@ const resolvedWidthStyle = computed(() => {
   if (props.width !== undefined) {
     return typeof props.width === 'number' ? `${props.width}px` : props.width;
   }
+
   return '100%';
 });
 
@@ -465,9 +486,11 @@ const resolvedHeightStyle = computed(() => {
       ? `${props.height}px`
       : props.height;
   }
+
   if (containerHeight.value > 0) {
     return `${containerHeight.value}px`;
   }
+
   return `${props.viewBoxHeight}px`;
 });
 
@@ -485,17 +508,15 @@ function handleContainerClick(event: MouseEvent): void {
   emit('click', event);
 }
 
-const uid = Math.random().toString(36).slice(2, 8);
-const gradIdPrefix = `alpha-arc-did-grad-${uid}`;
-
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-did w-full flex items-center justify-center select-none relative',
+  'alpha-arc-defense-in-depth w-full flex items-center justify-center select-none relative border-0 p-0 m-0 min-w-0 bg-transparent',
 );
 </script>
 
 <template>
-  <div
+  <fieldset
     ref="rootRef"
+    aria-label="Defense in depth diagram"
     v-bind="forwardedAttrs()"
     :class="className()"
     :data-count="resolvedCount"
@@ -504,13 +525,14 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       width: resolvedWidthStyle,
       height: resolvedHeightStyle,
-      '--arc-did-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-defense-in-depth-start-delay': `${resolvedStartDelay}ms`,
     }"
     @click="handleContainerClick"
+    @keydown="activateOnKeyboard"
   >
     <!-- Stage Container with diagram auto-scale -->
     <div
-      class="alpha-arc-did__stage relative flex items-center justify-center overflow-visible flex-shrink-0"
+      class="alpha-arc-defense-in-depth__stage relative flex items-center justify-center overflow-visible shrink-0"
       :style="{
         width: `${props.viewBoxWidth}px`,
         height: `${props.viewBoxHeight}px`,
@@ -520,23 +542,30 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     >
       <!-- Base SVG Layer: Concentric Arcs and Decorative Flairs -->
       <svg
-        class="alpha-arc-did__svg absolute inset-0 w-full h-full overflow-visible pointer-events-none"
+        class="alpha-arc-defense-in-depth__svg absolute inset-0 w-full h-full overflow-visible pointer-events-none"
         :viewBox="`0 0 ${props.viewBoxWidth} ${props.viewBoxHeight}`"
         xmlns="http://www.w3.org/2000/svg"
       >
+        <title>Defense in depth diagram</title>
         <defs>
-          <filter id="alpha-arc-did-glow" x="-20%" y="-20%" width="140%" height="140%">
+          <filter
+            id="alpha-arc-defense-in-depth-glow"
+            x="-20%"
+            y="-20%"
+            width="140%"
+            height="140%"
+          >
             <feGaussianBlur stdDeviation="3" result="blur" />
             <feComposite in="SourceGraphic" in2="blur" operator="over" />
           </filter>
         </defs>
 
         <!-- Concentric Arc Bands (Seamless with zero spacing) -->
-        <g class="alpha-arc-did__layers">
+        <g class="alpha-arc-defense-in-depth__layers">
           <g
             v-for="layer in geo.layers"
             :key="layer.index"
-            class="alpha-arc-did__layer-group"
+            class="alpha-arc-defense-in-depth__layer-group"
           >
             <!-- Full base band -->
             <path
@@ -545,10 +574,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
               :stroke="props.showPartBoundaries ? palette.strokeColor : 'none'"
               :stroke-width="props.showPartBoundaries ? 1.5 : 0"
               stroke-linejoin="round"
-              class="alpha-arc-did__band transition-all duration-300 ease-out"
+              class="alpha-arc-defense-in-depth__band transition-all duration-300 ease-out pointer-events-none"
               :class="[
-                { 'alpha-arc-did__band--animated': isAnimated },
-                props.interactive ? 'cursor-pointer pointer-events-auto' : 'pointer-events-none',
+                { 'alpha-arc-defense-in-depth__band--animated': isAnimated },
               ]"
               :style="{
                 opacity: hasAnyActivePart
@@ -556,11 +584,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                   : (internalActiveIndex === -1 || internalActiveIndex === layer.index ? 1 : 0.45),
                 filter:
                   internalActiveIndex === layer.index && !hasAnyActivePart
-                    ? 'drop-shadow(0 0 12px rgba(14, 165, 233, 0.45))'
+                    ? 'var(--alpha-arc-defense-in-depth-layer-glow)'
                     : undefined,
                 '--layer-anim-delay': `${resolvedStartDelay + layer.index * 100}ms`,
               }"
-              @click="handleLayerClick(layer.index)"
             />
 
             <!-- Title Sector Boundary/Area (when layer has parts) -->
@@ -571,10 +598,9 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
               :stroke="palette.strokeColor"
               stroke-width="1.5"
               stroke-linejoin="round"
-              class="alpha-arc-did__band alpha-arc-did__sector alpha-arc-did__sector--title transition-all duration-300 ease-out hover:brightness-105"
+              class="alpha-arc-defense-in-depth__band alpha-arc-defense-in-depth__sector alpha-arc-defense-in-depth__sector--title transition-all duration-300 ease-out hover:brightness-105 pointer-events-none"
               :class="[
-                { 'alpha-arc-did__band--animated': isAnimated },
-                props.interactive ? 'cursor-pointer pointer-events-auto' : 'pointer-events-none',
+                { 'alpha-arc-defense-in-depth__band--animated': isAnimated },
               ]"
               :style="{
                 opacity: hasAnyActivePart
@@ -582,7 +608,6 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                   : (internalActiveIndex === -1 || internalActiveIndex === layer.index ? 1 : 0.45),
                 '--layer-anim-delay': `${resolvedStartDelay + layer.index * 100}ms`,
               }"
-              @click="handleLayerClick(layer.index)"
             />
 
             <!-- Interactive Part Sector Areas on top with visible boundaries -->
@@ -595,23 +620,21 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                     :key="part.index"
                     :d="part.path"
                     :fill="isPartActive(part) ? getActivePartFill(part.color || sector.color, getLayerColor(layer.index)) : (part.color || sector.color || getLayerColor(layer.index))"
-                    :stroke="isPartActive(part) ? '#ffffff' : (props.showPartBoundaries ? palette.strokeColor : 'none')"
+                    :stroke="isPartActive(part) ? 'var(--alpha-arc-defense-in-depth-active-stroke)' : (props.showPartBoundaries ? palette.strokeColor : 'none')"
                     :stroke-width="isPartActive(part) ? 3.5 : (props.showPartBoundaries ? 1.5 : 0)"
                     stroke-linejoin="round"
-                    class="alpha-arc-did__band alpha-arc-did__sector alpha-arc-did__sector--part transition-all duration-300 ease-out hover:brightness-110"
+                    class="alpha-arc-defense-in-depth__band alpha-arc-defense-in-depth__sector alpha-arc-defense-in-depth__sector--part transition-all duration-300 ease-out hover:brightness-110 pointer-events-none"
                     :class="[
-                      { 'alpha-arc-did__band--animated': isAnimated },
-                      { 'alpha-arc-did__sector--active': isPartActive(part) },
-                      props.interactive ? 'cursor-pointer pointer-events-auto' : 'pointer-events-none',
+                      { 'alpha-arc-defense-in-depth__band--animated': isAnimated },
+                      { 'alpha-arc-defense-in-depth__sector--active': isPartActive(part) },
                     ]"
                     :style="{
                       opacity: getPartOpacity(layer.index, isPartActive(part)),
                       filter: isPartActive(part)
-                        ? 'drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.2)'
+                        ? 'var(--alpha-arc-defense-in-depth-active-glow)'
                         : undefined,
                       '--layer-anim-delay': `${resolvedStartDelay + layer.index * 100}ms`,
                     }"
-                    @click.stop="handlePartClick(part, layer.index)"
                   />
                 </template>
                 <!-- If sector is NOT split: render the entire sector band -->
@@ -619,28 +642,28 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                   <path
                     :d="sector.path"
                     :fill="sector.parts[0] && isPartActive(sector.parts[0]) ? getActivePartFill(sector.color, getLayerColor(layer.index)) : (sector.color || getLayerColor(layer.index))"
-                    :stroke="sector.parts[0] && isPartActive(sector.parts[0]) ? '#ffffff' : (props.showPartBoundaries ? palette.strokeColor : 'none')"
+                    :stroke="sector.parts[0] && isPartActive(sector.parts[0]) ? 'var(--alpha-arc-defense-in-depth-active-stroke)' : (props.showPartBoundaries ? palette.strokeColor : 'none')"
                     :stroke-width="sector.parts[0] && isPartActive(sector.parts[0]) ? 3.5 : (props.showPartBoundaries ? 1.5 : 0)"
                     stroke-linejoin="round"
-                    class="alpha-arc-did__band alpha-arc-did__sector alpha-arc-did__sector--part transition-all duration-300 ease-out hover:brightness-110"
+                    class="alpha-arc-defense-in-depth__band alpha-arc-defense-in-depth__sector alpha-arc-defense-in-depth__sector--part transition-all duration-300 ease-out hover:brightness-110 pointer-events-none"
                     :class="[
-                      { 'alpha-arc-did__band--animated': isAnimated },
-                      { 'alpha-arc-did__sector--active': sector.parts[0] && isPartActive(sector.parts[0]) },
-                      props.interactive ? 'cursor-pointer pointer-events-auto' : 'pointer-events-none',
+                      { 'alpha-arc-defense-in-depth__band--animated': isAnimated },
+                      { 'alpha-arc-defense-in-depth__sector--active': sector.parts[0] && isPartActive(sector.parts[0]) },
                     ]"
                     :style="{
                       opacity: getPartOpacity(layer.index, !!(sector.parts[0] && isPartActive(sector.parts[0]))),
                       filter: sector.parts[0] && isPartActive(sector.parts[0])
-                        ? 'drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.2)'
+                        ? 'var(--alpha-arc-defense-in-depth-active-glow)'
                         : undefined,
                       '--layer-anim-delay': `${resolvedStartDelay + layer.index * 100}ms`,
                     }"
-                    @click.stop="sector.parts[0] ? handlePartClick(sector.parts[0], layer.index) : handleLayerClick(layer.index)"
                   />
                 </template>
 
                 <!-- Divider concentric lines when sector is split -->
-                <template v-if="props.showPartBoundaries && sector.split && sector.dividerPaths.length > 0">
+                <template
+                  v-if="props.showPartBoundaries && sector.split && sector.dividerPaths.length > 0"
+                >
                   <path
                     v-for="(dPath, dIdx) in sector.dividerPaths"
                     :key="dIdx"
@@ -658,7 +681,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         </g>
 
         <!-- Active Sector Highlight Overlay (rendered on top of all layers and dividers so stroke & glow are never clipped) -->
-        <g v-if="hasAnyActivePart" class="alpha-arc-did__active-sectors pointer-events-none">
+        <g
+          v-if="hasAnyActivePart"
+          class="alpha-arc-defense-in-depth__active-sectors pointer-events-none"
+        >
           <template v-for="layer in geo.layers" :key="layer.index">
             <template v-for="sector in layer.sectors" :key="sector.index">
               <template v-if="sector.split">
@@ -667,12 +693,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                     v-if="isPartActive(part) && part.path"
                     :d="part.path"
                     :fill="getActivePartFill(part.color || sector.color, getLayerColor(layer.index))"
-                    stroke="#ffffff"
+                    stroke="var(--alpha-arc-defense-in-depth-active-stroke)"
                     stroke-width="3.5"
                     stroke-linejoin="round"
-                    class="alpha-arc-did__band alpha-arc-did__sector alpha-arc-did__sector--active pointer-events-none"
+                    class="alpha-arc-defense-in-depth__band alpha-arc-defense-in-depth__sector alpha-arc-defense-in-depth__sector--active pointer-events-none"
                     :style="{
-                      filter: 'drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.2)',
+                      filter: 'var(--alpha-arc-defense-in-depth-active-glow)',
                     }"
                   />
                 </template>
@@ -682,12 +708,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                   v-if="sector.parts[0] && isPartActive(sector.parts[0]) && sector.path"
                   :d="sector.path"
                   :fill="getActivePartFill(sector.color, getLayerColor(layer.index))"
-                  stroke="#ffffff"
+                  stroke="var(--alpha-arc-defense-in-depth-active-stroke)"
                   stroke-width="3.5"
                   stroke-linejoin="round"
-                  class="alpha-arc-did__band alpha-arc-did__sector alpha-arc-did__sector--active pointer-events-none"
+                  class="alpha-arc-defense-in-depth__band alpha-arc-defense-in-depth__sector alpha-arc-defense-in-depth__sector--active pointer-events-none"
                   :style="{
-                    filter: 'drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.2)',
+                    filter: 'var(--alpha-arc-defense-in-depth-active-glow)',
                   }"
                 />
               </template>
@@ -699,27 +725,71 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         <path
           v-if="geo.innerCutoutPath"
           :d="geo.innerCutoutPath"
-          fill="#ffffff"
+          fill="var(--alpha-arc-defense-in-depth-center-fill)"
           stroke="none"
           class="pointer-events-none"
         />
       </svg>
 
+      <template v-if="props.interactive">
+        <template v-for="layer in geo.layers" :key="`layer-${layer.index}`">
+          <button
+            type="button"
+            class="alpha-interaction-control"
+            :aria-label="`Select layer ${layer.index + 1}`"
+            :style="{ clipPath: `path('${layer.path}')` }"
+            @click="handleLayerClick(layer.index)"
+          />
+          <button
+            v-if="props.showPartBoundaries && layer.titlePath && layer.parts.length > 0"
+            type="button"
+            class="alpha-interaction-control"
+            :aria-label="`Select layer ${layer.index + 1}`"
+            :style="{ clipPath: `path('${layer.titlePath}')` }"
+            @click="handleLayerClick(layer.index)"
+          />
+          <template v-for="sector in layer.sectors" :key="sector.index">
+            <template v-if="sector.split">
+              <button
+                v-for="part in sector.parts"
+                :key="part.index"
+                type="button"
+                class="alpha-interaction-control"
+                :aria-label="`Select part ${part.index + 1}`"
+                :style="{ clipPath: `path('${part.path}')` }"
+                @click.stop="handlePartClick(part, layer.index)"
+              />
+            </template>
+            <button
+              v-else
+              type="button"
+              class="alpha-interaction-control"
+              :aria-label="`Select sector ${sector.index + 1}`"
+              :style="{ clipPath: `path('${sector.path}')` }"
+              @click.stop="sector.parts[0] ? handlePartClick(sector.parts[0], layer.index) : handleLayerClick(layer.index)"
+            />
+          </template>
+        </template>
+      </template>
+
       <!-- Stage Overlays: Slotted Layers -->
-      <div class="alpha-arc-did__stage-overlay absolute inset-0 w-full h-full pointer-events-none">
+      <div
+        class="alpha-arc-defense-in-depth__stage-overlay absolute inset-0 w-full h-full pointer-events-none"
+      >
         <slot />
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style scoped>
-.alpha-arc-did__band--animated {
-  animation: arc-did-band-in 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--layer-anim-delay, 0ms) both;
+.alpha-arc-defense-in-depth__band--animated {
+  animation: arc-defense-in-depth-band-in 600ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--layer-anim-delay, 0ms) both;
   transform-origin: 50% 90%;
 }
 
-@keyframes arc-did-band-in {
+@keyframes arc-defense-in-depth-band-in {
   0% {
     opacity: 0;
     transform: scale(0.92);