@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/defense-in-depth/{arc-did/ArcDiDLayerPart.vue → arc-defense-in-depth/ArcDefenseInDepthLayerPart.vue}

@@ -5,22 +5,25 @@ import {
   ARC_DID_LAYER_KEY,
   ARC_DID_ROOT_KEY,
   ARC_DID_SECTOR_KEY,
-} from '../../../utils/defenseInDepth/arcDid/context';
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
 import {
   calculatePartAngles,
   polarToCartesian,
-} from '../../../utils/defenseInDepth/arcDid/createArcDiDGeometry';
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/createArcDefenseInDepthGeometry';
 import type {
-  IArcDiDPartItem,
-  TArcDiDPartPosition,
-} from '../../../utils/defenseInDepth/arcDid/types';
-import { DEFAULT_DID_DOT_COLOR } from '../../../utils/defenseInDepth/shared/constants';
+  IArcDefenseInDepthPartItem,
+  TArcDefenseInDepthOrientation,
+  TArcDefenseInDepthPartPosition,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/types';
+import { DEFAULT_DID_DOT_COLOR } from '../../../utils/defense-in-depth/shared/constants';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'ArcDiDLayerPart',
+  inheritAttrs: false,
+  name: 'ArcDefenseInDepthLayerPart',
 });
 
-export interface IArcDiDLayerPartProps {
+export interface IArcDefenseInDepthLayerPartProps {
   readonly label?: string;
   readonly index?: number;
   readonly angle?: number;
@@ -30,14 +33,14 @@ export interface IArcDiDLayerPartProps {
   readonly icon?: string;
   readonly showDot?: boolean;
   readonly span?: number;
-  readonly position?: TArcDiDPartPosition;
+  readonly position?: TArcDefenseInDepthPartPosition;
   readonly maxWidth?: number | string;
-  readonly rotate?: boolean | number | 'tangent' | 'auto';
-  readonly skew?: boolean | number | string;
+  readonly rotate?: TArcDefenseInDepthOrientation;
+  readonly skew?: TArcDefenseInDepthOrientation;
   readonly active?: boolean;
 }
 
-const props = withDefaults(defineProps<IArcDiDLayerPartProps>(), {
+const props = withDefaults(defineProps<IArcDefenseInDepthLayerPartProps>(), {
   label: undefined,
   index: undefined,
   angle: undefined,
@@ -70,6 +73,7 @@ function extractTextFromVNodes(nodes: VNode[]): string {
       text += extractTextFromVNodes(node.children as VNode[]);
     }
   }
+
   return text.trim();
 }
 
@@ -77,19 +81,22 @@ const slottedLabel = computed<string>(() => {
   if (props.label) {
     return props.label;
   }
+
   if (slots.default) {
     const vnodes = slots.default();
     const textNode = vnodes[0]?.children;
     if (typeof textNode === 'string') {
       return textNode.trim();
     }
+
     return extractTextFromVNodes(slots.default());
   }
+
   return '';
 });
 
 const partToken = Symbol();
-const registrationData = computed<IArcDiDPartItem>(() => ({
+const registrationData = computed<IArcDefenseInDepthPartItem>(() => ({
   label: slottedLabel.value,
   angle: props.angle,
   radius: props.radius,
@@ -116,6 +123,7 @@ const resolvedIndex = computed<number>(() => {
   if (props.index !== undefined) {
     return Number(props.index);
   }
+
   return registration?.index.value ?? 0;
 });
 
@@ -182,6 +190,7 @@ const maxContentWidth = computed(() => {
       ? `${props.maxWidth}px`
       : props.maxWidth;
   }
+
   if (sectorContext) {
     const partGeo = sectorContext.sectorGeo.value?.parts[resolvedIndex.value];
     if (partGeo?.maxContentWidth) {
@@ -194,12 +203,17 @@ const maxContentWidth = computed(() => {
       return `${standalonePartGeo.maxContentWidth}px`;
     }
   }
+
   const geo = layerContext?.layerGeo.value;
-  if (!geo) return '110px';
+  if (!geo) {
+    return '110px';
+  }
+
   const partGeo = geo.parts[resolvedIndex.value];
   if (partGeo?.maxContentWidth) {
     return `${partGeo.maxContentWidth}px`;
   }
+
   const span =
     partGeo?.startAngle !== undefined && partGeo?.endAngle !== undefined
       ? Math.abs(partGeo.startAngle - partGeo.endAngle)
@@ -216,12 +230,15 @@ const isSplitSector = computed(() => {
   ) {
     return true;
   }
+
   if (sectorContext?.sectorGeo.value?.split) {
     return true;
   }
+
   if ((sectorContext?.sectorGeo.value?.parts.length ?? 0) > 1) {
     return true;
   }
+
   return false;
 });
 
@@ -229,20 +246,24 @@ const resolvedAngle = computed<number>(() => {
   if (props.angle !== undefined) {
     return props.angle;
   }
+
   if (sectorContext) {
     const partGeo = sectorContext.sectorGeo.value?.parts[resolvedIndex.value];
     if (partGeo?.angle !== undefined) {
       return partGeo.angle;
     }
+
     if (sectorContext.sectorGeo.value?.midAngle !== undefined) {
       return sectorContext.sectorGeo.value.midAngle;
     }
   }
+
   const geo = layerContext?.layerGeo.value;
   const partGeo = geo?.parts[resolvedIndex.value];
   if (partGeo?.angle !== undefined) {
     return partGeo.angle;
   }
+
   return 90;
 });
 
@@ -264,13 +285,16 @@ const resolvedRotation = computed<string | undefined>(() => {
     }
     return undefined;
   }
+
   if (typeof rot === 'number') {
     return `rotate(${rot}deg)`;
   }
+
   if (rot === true || rot === 'tangent' || rot === 'auto') {
     const tangent = Math.round(90 - resolvedAngle.value);
     return `rotate(${tangent}deg)`;
   }
+
   if (typeof rot === 'string') {
     return rot.includes('rotate')
       ? rot
@@ -278,6 +302,7 @@ const resolvedRotation = computed<string | undefined>(() => {
         ? `rotate(${rot})`
         : `rotate(${rot}deg)`;
   }
+
   return undefined;
 });
 
@@ -286,12 +311,15 @@ const resolvedSkew = computed<string | undefined>(() => {
   if (sk === undefined || sk === false) {
     return undefined;
   }
+
   if (sk === true || sk === 'tangent' || sk === 'auto') {
     return undefined;
   }
+
   if (typeof sk === 'number') {
     return `skewX(${sk}deg)`;
   }
+
   if (typeof sk === 'string') {
     return sk.includes('skew') || sk.includes('rotate')
       ? sk
@@ -299,6 +327,7 @@ const resolvedSkew = computed<string | undefined>(() => {
         ? `skewX(${sk})`
         : `skewX(${sk}deg)`;
   }
+
   return undefined;
 });
 
@@ -307,9 +336,11 @@ const partLabelTransform = computed<string | undefined>(() => {
   if (resolvedRotation.value) {
     transforms.push(resolvedRotation.value);
   }
+
   if (resolvedSkew.value) {
     transforms.push(resolvedSkew.value);
   }
+
   return transforms.length > 0 ? transforms.join(' ') : undefined;
 });
 
@@ -317,6 +348,7 @@ const isSelfActive = computed<boolean>(() => {
   if (props.active !== undefined) {
     return props.active;
   }
+
   if (rootContext?.isPartActive) {
     return rootContext.isPartActive(
       slottedLabel.value,
@@ -324,10 +356,12 @@ const isSelfActive = computed<boolean>(() => {
       props.active,
     );
   }
+
   if (rootContext?.activePart?.value !== undefined) {
     const ap = rootContext.activePart.value;
     return ap === slottedLabel.value || ap === resolvedIndex.value;
   }
+
   return false;
 });
 
@@ -345,16 +379,33 @@ function handlePartAreaClick(event: MouseEvent): void {
     }
   }
 }
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  const colorClass = isSelfActive.value
+    ? 'text-(--alpha-arc-defense-in-depth-part-active)'
+    : 'text-(--alpha-arc-defense-in-depth-part)';
+  const opacityClass =
+    hasAnyActivePart.value && !isSelfActive.value
+      ? 'opacity-30'
+      : 'opacity-100';
+  const interactionClass = rootContext?.interactive?.value
+    ? 'cursor-pointer pointer-events-auto'
+    : 'pointer-events-none';
+
+  return `alpha-arc-defense-in-depth__part alpha-arc-defense-in-depth__part-area absolute flex flex-col items-center justify-center select-none text-center transition-all duration-300 ease-out bg-transparent border-0 p-0 m-0 appearance-none ${colorClass} ${opacityClass} ${interactionClass}`;
+});
 </script>
 
 <template>
-  <div
-    class="alpha-arc-did__part alpha-arc-did__part-area absolute flex flex-col items-center justify-center select-none text-center transition-all duration-300 ease-out"
+  <button
+    type="button"
+    v-bind="forwardedAttrs()"
+    :disabled="!rootContext?.interactive?.value"
+    :aria-label="`Select ${slottedLabel}`"
     :class="[
-      { 'alpha-arc-did__part--animated': isAnimated },
-      { 'alpha-arc-did__part--active': isSelfActive },
-      hasAnyActivePart && !isSelfActive ? 'opacity-30' : 'opacity-100',
-      rootContext?.interactive?.value ? 'cursor-pointer pointer-events-auto' : 'pointer-events-none',
+      className(),
+      { 'alpha-arc-defense-in-depth__part--animated': isAnimated },
+      { 'alpha-arc-defense-in-depth__part--active': isSelfActive },
     ]"
     :data-active="isSelfActive"
     :style="{
@@ -363,6 +414,9 @@ function handlePartAreaClick(event: MouseEvent): void {
       transform: 'translate(-50%, -50%)',
       zIndex: isSelfActive ? 30 : 10,
       '--part-delay': `${animationDelay}ms`,
+      ...(props.color
+        ? { '--alpha-arc-defense-in-depth-part': props.color }
+        : {}),
     }"
     @click="handlePartAreaClick"
   >
@@ -373,70 +427,68 @@ function handlePartAreaClick(event: MouseEvent): void {
     >
       <span
         v-if="props.icon"
-        class="text-xs text-white"
+        class="text-xs text-current"
         :class="props.icon"
       />
       <div
         v-else-if="props.showDot"
         class="w-4 h-4 rounded-full transition-all duration-200 flex items-center justify-center"
         :class="[
-          isSelfActive ? 'scale-125 ring-2 ring-white shadow-[0_0_12px_#38bdf8]' : 'group-hover:scale-125',
+          isSelfActive ? 'scale-125 ring-2 ring-(--alpha-arc-defense-in-depth-part-ring) shadow-[0_0_12px_var(--alpha-arc-defense-in-depth-part-glow)]' : 'group-hover:scale-125',
         ]"
         :style="{
           background: isSelfActive
-            ? 'radial-gradient(circle at 35% 32%, #ffffff 25%, #38bdf8 70%, #0369a1 100%)'
+            ? 'radial-gradient(circle at 35% 32%, var(--alpha-arc-defense-in-depth-part-dot-highlight) 25%, var(--alpha-arc-defense-in-depth-part-dot-active) 70%, var(--alpha-arc-defense-in-depth-part-dot-active-edge) 100%)'
             : props.color
-              ? `radial-gradient(circle at 35% 32%, #ffffff 15%, ${effectiveDotColor} 65%, #0f172a 100%)`
-              : 'radial-gradient(circle at 35% 32%, #ffffff 15%, #cbd5e1 55%, #94a3b8 100%)',
+              ? `radial-gradient(circle at 35% 32%, var(--alpha-arc-defense-in-depth-part-dot-highlight) 15%, ${effectiveDotColor} 65%, var(--alpha-arc-defense-in-depth-part-dot-edge) 100%)`
+              : 'radial-gradient(circle at 35% 32%, var(--alpha-arc-defense-in-depth-part-dot-highlight) 15%, var(--alpha-arc-defense-in-depth-part-dot-idle) 55%, var(--alpha-arc-defense-in-depth-part-dot-idle-edge) 100%)',
           boxShadow: isSelfActive
-            ? '0 0 12px rgba(56, 189, 248, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.9)'
-            : '0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.8)',
+            ? 'var(--alpha-arc-defense-in-depth-part-active-shadow)'
+            : 'var(--alpha-arc-defense-in-depth-part-shadow)',
         }"
       />
     </div>
 
     <!-- Part Area Content -->
     <div
-      class="alpha-arc-did__part-label-wrapper"
+      class="alpha-arc-defense-in-depth__part-label-wrapper"
       :style="{
         transform: partLabelTransform,
       }"
     >
       <div
-        class="alpha-arc-did__part-label alpha-arc-did__part-content text-center font-medium leading-tight text-white drop-shadow-sm whitespace-pre-line transition-all duration-200"
+        class="alpha-arc-defense-in-depth__part-label alpha-arc-defense-in-depth__part-content text-center font-medium leading-tight text-current drop-shadow-sm whitespace-pre-line transition-all duration-200"
         :class="[
           isSplitSector ? 'text-[11px] md:text-xs' : 'text-xs md:text-sm',
-          isSelfActive
-            ? 'font-bold !text-white scale-110'
-            : 'hover:scale-105',
+          isSelfActive ? 'font-bold scale-110' : 'hover:scale-105',
         ]"
         :style="{
           maxWidth: maxContentWidth,
-          color: isSelfActive ? '#ffffff' : props.color,
           textShadow: isSelfActive
-            ? '0 0 12px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9)'
+            ? 'var(--alpha-arc-defense-in-depth-part-active-text-shadow)'
             : undefined,
         }"
       >
         <slot>{{ slottedLabel }}</slot>
       </div>
     </div>
-  </div>
+  </button>
 </template>
 
 <style scoped>
-.alpha-arc-did__part-label {
+.alpha-arc-defense-in-depth__part-label {
   word-break: normal;
   overflow-wrap: normal;
   hyphens: none;
   white-space: pre-line;
 }
 
-.alpha-arc-did__part--animated {
-  animation: arc-did-part-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--part-delay, 0ms) both;
+.alpha-arc-defense-in-depth__part--animated {
+  animation: arc-defense-in-depth-part-pop 450ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--part-delay, 0ms) both;
 }
 
-@keyframes arc-did-part-pop {
+@keyframes arc-defense-in-depth-part-pop {
   0% {
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.6);

package/components/defense-in-depth/{arc-did/ArcDiDLayerSector.vue → arc-defense-in-depth/ArcDefenseInDepthLayerSector.vue}

@@ -12,16 +12,19 @@ import {
 import {
   ARC_DID_LAYER_KEY,
   ARC_DID_SECTOR_KEY,
-  type IArcDiDRegisteredSectorData,
-  type IArcDiDSectorContext,
-} from '../../../utils/defenseInDepth/arcDid/context';
-import type { IArcDiDPartItem } from '../../../utils/defenseInDepth/arcDid/types';
+  type IArcDefenseInDepthRegisteredSectorData,
+  type IArcDefenseInDepthSectorContext,
+} from '../../../utils/defense-in-depth/arc-defense-in-depth/context';
+import type { IArcDefenseInDepthPartItem } from '../../../utils/defense-in-depth/arc-defense-in-depth/types';
+
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'ArcDiDLayerSector',
+  inheritAttrs: false,
+  name: 'ArcDefenseInDepthLayerSector',
 });
 
-export interface IArcDiDLayerSectorProps {
+export interface IArcDefenseInDepthLayerSectorProps {
   readonly split?: boolean;
   readonly angle?: number;
   readonly span?: number;
@@ -31,7 +34,7 @@ export interface IArcDiDLayerSectorProps {
   readonly skew?: boolean | number | string;
 }
 
-const props = withDefaults(defineProps<IArcDiDLayerSectorProps>(), {
+const props = withDefaults(defineProps<IArcDefenseInDepthLayerSectorProps>(), {
   split: true,
   angle: undefined,
   span: undefined,
@@ -44,11 +47,13 @@ const props = withDefaults(defineProps<IArcDiDLayerSectorProps>(), {
 const layerContext = inject(ARC_DID_LAYER_KEY, undefined);
 
 const registeredPartTokens = ref<symbol[]>([]);
-const registeredPartData = ref<Map<symbol, IArcDiDPartItem>>(new Map());
+const registeredPartData = ref<Map<symbol, IArcDefenseInDepthPartItem>>(
+  new Map(),
+);
 
 function registerPart(
   token?: symbol,
-  partDataRef?: ComputedRef<IArcDiDPartItem | undefined>,
+  partDataRef?: ComputedRef<IArcDefenseInDepthPartItem | undefined>,
 ) {
   const pToken = token ?? Symbol();
   if (!registeredPartTokens.value.includes(pToken)) {
@@ -66,6 +71,7 @@ function registerPart(
         } else {
           nextMap.delete(pToken);
         }
+
         registeredPartData.value = nextMap;
       },
       { immediate: true },
@@ -88,23 +94,25 @@ function registerPart(
   };
 }
 
-const registeredPartsList = computed<IArcDiDPartItem[]>(() => {
+const registeredPartsList = computed<IArcDefenseInDepthPartItem[]>(() => {
   return registeredPartTokens.value
     .map((token) => registeredPartData.value.get(token))
-    .filter((item): item is IArcDiDPartItem => item !== undefined);
+    .filter((item): item is IArcDefenseInDepthPartItem => item !== undefined);
 });
 
 const sectorToken = Symbol();
-const sectorRegistrationData = computed<IArcDiDRegisteredSectorData>(() => ({
-  parts: registeredPartsList.value,
-  split: props.split,
-  angle: props.angle,
-  span: props.span,
-  color: props.color,
-  index: props.index !== undefined ? Number(props.index) : undefined,
-  rotate: props.rotate,
-  skew: props.skew,
-}));
+const sectorRegistrationData = computed<IArcDefenseInDepthRegisteredSectorData>(
+  () => ({
+    parts: registeredPartsList.value,
+    split: props.split,
+    angle: props.angle,
+    span: props.span,
+    color: props.color,
+    index: props.index !== undefined ? Number(props.index) : undefined,
+    rotate: props.rotate,
+    skew: props.skew,
+  }),
+);
 
 const registration = layerContext?.registerSector(
   sectorToken,
@@ -119,6 +127,7 @@ const resolvedIndex = computed<number>(() => {
   if (props.index !== undefined) {
     return Number(props.index);
   }
+
   return registration?.index.value ?? 0;
 });
 
@@ -126,7 +135,7 @@ const sectorGeo = computed(() => {
   return layerContext?.layerGeo.value?.sectors[resolvedIndex.value];
 });
 
-const sectorContext: IArcDiDSectorContext = {
+const sectorContext: IArcDefenseInDepthSectorContext = {
   sectorIndex: resolvedIndex,
   sectorGeo,
   rotate: computed(() => props.rotate),
@@ -135,11 +144,16 @@ const sectorContext: IArcDiDSectorContext = {
 };
 
 provide(ARC_DID_SECTOR_KEY, sectorContext);
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-defense-in-depth__layer-sector contents pointer-events-none',
+);
 </script>
 
 <template>
   <div
-    class="alpha-arc-did__layer-sector contents pointer-events-none"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :data-sector-index="resolvedIndex"
     :data-split="props.split"
   >

package/components/defense-in-depth/arc-defense-in-depth/style.css

@@ -0,0 +1,38 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-arc-defense-in-depth-active-glow: 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);
+    --alpha-arc-defense-in-depth-active-stroke: #ffffff;
+    --alpha-arc-defense-in-depth-center-fill: #ffffff;
+    --alpha-arc-defense-in-depth-layer-1-color: #38bdf8;
+    --alpha-arc-defense-in-depth-layer-2-color: #0ea5e9;
+    --alpha-arc-defense-in-depth-layer-3-color: #0284c7;
+    --alpha-arc-defense-in-depth-layer-accent: #0ea5e9;
+    --alpha-arc-defense-in-depth-layer-glow: drop-shadow(
+      0 0 12px rgba(14, 165, 233, 0.45)
+    );
+    --alpha-arc-defense-in-depth-layer-heading: #ffffff;
+    --alpha-arc-defense-in-depth-part: #ffffff;
+    --alpha-arc-defense-in-depth-part-active: #ffffff;
+    --alpha-arc-defense-in-depth-part-active-shadow:
+      0 0 12px rgba(56, 189, 248, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.9);
+    --alpha-arc-defense-in-depth-part-active-text-shadow:
+      0 0 12px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.9);
+    --alpha-arc-defense-in-depth-part-dot: #0284c7;
+    --alpha-arc-defense-in-depth-part-dot-active: #38bdf8;
+    --alpha-arc-defense-in-depth-part-dot-active-edge: #0369a1;
+    --alpha-arc-defense-in-depth-part-dot-edge: #0f172a;
+    --alpha-arc-defense-in-depth-part-dot-glow: rgba(56, 189, 248, 0.35);
+    --alpha-arc-defense-in-depth-part-dot-highlight: #ffffff;
+    --alpha-arc-defense-in-depth-part-dot-idle: #cbd5e1;
+    --alpha-arc-defense-in-depth-part-dot-idle-edge: #94a3b8;
+    --alpha-arc-defense-in-depth-part-glow: #38bdf8;
+    --alpha-arc-defense-in-depth-part-ring: #ffffff;
+    --alpha-arc-defense-in-depth-part-shadow:
+      0 2px 5px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.8);
+    --alpha-arc-defense-in-depth-stroke: #ffffff;
+  }
+}