@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/utils/defense-in-depth/arc-defense-in-depth/types.ts

@@ -0,0 +1,144 @@
+export type TArcDefenseInDepthOrder = 'outer-to-inner' | 'inner-to-outer';
+export type TArcDefenseInDepthPartPosition =
+  | 'top'
+  | 'middle'
+  | 'bottom'
+  | 'center';
+export type TArcDefenseInDepthOrientation =
+  | boolean
+  | number
+  | 'tangent'
+  | 'auto'
+  | (string & {});
+
+export interface IArcDefenseInDepthPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IArcDefenseInDepthPartItem {
+  readonly label: string;
+  readonly angle?: number;
+  readonly radius?: number;
+  readonly radialOffset?: number;
+  readonly color?: string;
+  readonly icon?: string;
+  readonly span?: number;
+  readonly position?: TArcDefenseInDepthPartPosition;
+  readonly maxWidth?: number | string;
+  readonly rotate?: TArcDefenseInDepthOrientation;
+  readonly skew?: TArcDefenseInDepthOrientation;
+  readonly active?: boolean;
+}
+
+export interface IArcDefenseInDepthSectorItem {
+  readonly parts: readonly (string | IArcDefenseInDepthPartItem)[];
+  readonly split?: boolean;
+  readonly angle?: number;
+  readonly span?: number;
+  readonly color?: string;
+  readonly rotate?: TArcDefenseInDepthOrientation;
+  readonly skew?: TArcDefenseInDepthOrientation;
+}
+
+export interface IArcDefenseInDepthLayerItem {
+  readonly title?: string;
+  readonly parts?: readonly (string | IArcDefenseInDepthPartItem)[];
+  readonly sectors?: readonly (
+    | IArcDefenseInDepthSectorItem
+    | readonly (string | IArcDefenseInDepthPartItem)[]
+  )[];
+  readonly color?: string;
+  readonly textColor?: string;
+  readonly titleAngleSpan?: number;
+  readonly titleWidth?: number;
+}
+
+export interface IArcDefenseInDepthPartGeometry {
+  readonly index: number;
+  readonly sectorIndex?: number;
+  readonly trackIndex?: number;
+  readonly position?: TArcDefenseInDepthPartPosition;
+  readonly label: string;
+  readonly angle: number;
+  readonly radius: number;
+  readonly x: number;
+  readonly y: number;
+  readonly color?: string;
+  readonly icon?: string;
+  readonly startAngle?: number;
+  readonly endAngle?: number;
+  readonly midAngle?: number;
+  readonly path?: string;
+  readonly innerRadius?: number;
+  readonly outerRadius?: number;
+  readonly maxContentWidth?: number;
+  readonly rotate?: TArcDefenseInDepthOrientation;
+  readonly skew?: TArcDefenseInDepthOrientation;
+  readonly rotationAngle?: number;
+  readonly active?: boolean;
+}
+
+export interface IArcDefenseInDepthSectorGeometry {
+  readonly index: number;
+  readonly startAngle: number;
+  readonly endAngle: number;
+  readonly midAngle: number;
+  readonly span: number;
+  readonly path: string;
+  readonly split: boolean;
+  readonly dividerPaths: readonly string[];
+  readonly color?: string;
+  readonly rotate?: TArcDefenseInDepthOrientation;
+  readonly skew?: TArcDefenseInDepthOrientation;
+  readonly parts: readonly IArcDefenseInDepthPartGeometry[];
+}
+
+export interface IArcDefenseInDepthLayerGeometry {
+  readonly index: number;
+  readonly innerRadius: number;
+  readonly outerRadius: number;
+  readonly midRadius: number;
+  readonly thickness: number;
+  readonly path: string;
+  readonly titlePosition: IArcDefenseInDepthPoint;
+  readonly titlePath?: string;
+  readonly titleLeft?: number;
+  readonly titleRight?: number;
+  readonly sectors: readonly IArcDefenseInDepthSectorGeometry[];
+  readonly parts: readonly IArcDefenseInDepthPartGeometry[];
+}
+
+export interface IArcDefenseInDepthDecorativeArc {
+  readonly path: string;
+  readonly strokeWidth: number;
+  readonly opacity: number;
+}
+
+export interface IArcDefenseInDepthGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly cx: number;
+  readonly cy: number;
+  readonly innerRadius: number;
+  readonly outerRadius: number;
+  readonly count: number;
+  readonly layers: readonly IArcDefenseInDepthLayerGeometry[];
+  readonly decorativeArcs: readonly IArcDefenseInDepthDecorativeArc[];
+  readonly innerCutoutPath?: string;
+}
+
+export interface ICreateArcDefenseInDepthOptions {
+  readonly viewBoxWidth?: number;
+  readonly viewBoxHeight?: number;
+  readonly cx?: number;
+  readonly cy?: number;
+  readonly innerRadius?: number;
+  readonly outerRadius?: number;
+  readonly count?: number;
+  readonly gap?: number;
+  readonly order?: TArcDefenseInDepthOrder;
+  readonly titleAngleSpan?: number;
+  readonly titleWidth?: number;
+  readonly layers?: readonly IArcDefenseInDepthLayerItem[];
+}

package/utils/defense-in-depth/shared/colors.ts

@@ -0,0 +1,51 @@
+import { darkenColor, lightenColor } from '../../colors';
+import {
+  DEFAULT_DID_COLOR,
+  DEFAULT_DID_DOT_COLOR,
+  DEFAULT_DID_DOT_GLOW_COLOR,
+  DEFAULT_DID_LAYER_COLORS,
+  DEFAULT_DID_STROKE_COLOR,
+} from './constants';
+import type { IDefenseInDepthPalette } from './types';
+
+export function resolveArcDefenseInDepthPalette(
+  baseColor: string = DEFAULT_DID_COLOR,
+  count = 3,
+): IDefenseInDepthPalette {
+  if (baseColor === DEFAULT_DID_COLOR && count === 3) {
+    return {
+      layerColors: DEFAULT_DID_LAYER_COLORS,
+      dotColor: DEFAULT_DID_DOT_COLOR,
+      dotGlowColor: DEFAULT_DID_DOT_GLOW_COLOR,
+      strokeColor: DEFAULT_DID_STROKE_COLOR,
+      decorativeStrokeColor: lightenColor({ hex: baseColor, ratio: 0.65 }),
+    };
+  }
+
+  const layerColors: string[] = [];
+  const safeCount = Math.max(1, count);
+
+  for (let i = 0; i < safeCount; i++) {
+    // 0 = outermost (lightest, ratio ~0.35), count - 1 = innermost (deepest, ratio ~0.25 darken)
+    if (safeCount === 1) {
+      layerColors.push(baseColor);
+    } else {
+      const t = i / (safeCount - 1);
+      if (t < 0.5) {
+        const lightenRatio = 0.35 * (1 - t * 2);
+        layerColors.push(lightenColor({ hex: baseColor, ratio: lightenRatio }));
+      } else {
+        const darkenRatio = 0.25 * ((t - 0.5) * 2);
+        layerColors.push(darkenColor({ hex: baseColor, ratio: darkenRatio }));
+      }
+    }
+  }
+
+  return {
+    layerColors,
+    dotColor: darkenColor({ hex: baseColor, ratio: 0.2 }),
+    dotGlowColor: lightenColor({ hex: baseColor, ratio: 0.7 }),
+    strokeColor: DEFAULT_DID_STROKE_COLOR,
+    decorativeStrokeColor: lightenColor({ hex: baseColor, ratio: 0.65 }),
+  };
+}

package/utils/defense-in-depth/shared/constants.ts

@@ -0,0 +1,22 @@
+export const DEFAULT_DID_COLOR =
+  'var(--alpha-arc-defense-in-depth-layer-accent)';
+
+const DEFAULT_DID_OUTER_COLOR =
+  'var(--alpha-arc-defense-in-depth-layer-1-color)';
+const DEFAULT_DID_MIDDLE_COLOR =
+  'var(--alpha-arc-defense-in-depth-layer-2-color)';
+const DEFAULT_DID_INNER_COLOR =
+  'var(--alpha-arc-defense-in-depth-layer-3-color)';
+
+export const DEFAULT_DID_LAYER_COLORS: readonly string[] = [
+  DEFAULT_DID_OUTER_COLOR,
+  DEFAULT_DID_MIDDLE_COLOR,
+  DEFAULT_DID_INNER_COLOR,
+];
+
+export const DEFAULT_DID_DOT_COLOR =
+  'var(--alpha-arc-defense-in-depth-part-dot)';
+export const DEFAULT_DID_DOT_GLOW_COLOR =
+  'var(--alpha-arc-defense-in-depth-part-dot-glow)';
+export const DEFAULT_DID_STROKE_COLOR =
+  'var(--alpha-arc-defense-in-depth-stroke)';

package/utils/defense-in-depth/shared/types.ts

@@ -0,0 +1,7 @@
+export interface IDefenseInDepthPalette {
+  readonly layerColors: readonly string[];
+  readonly dotColor: string;
+  readonly dotGlowColor: string;
+  readonly strokeColor: string;
+  readonly decorativeStrokeColor: string;
+}

package/utils/facets/tetrad/rectangle-orbit-tetrad/context.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type {
+  IRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+} from './resolveRectangleOrbitTetradItems';
+
+export interface IRectangleOrbitTetradRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectangleOrbitTetradItem>;
+  readonly setCustomBadge?: (text: string | number) => void;
+}
+
+export interface IRectangleOrbitTetradRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly registerCallout: (
+    props?: IRectangleOrbitTetradItem,
+  ) => IRectangleOrbitTetradRegistration;
+  readonly items: ComputedRef<readonly IResolvedRectangleOrbitTetradItem[]>;
+}
+
+export interface IRectangleOrbitTetradCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectangleOrbitTetradItem>;
+}
+
+export const RECT_ORBIT_TETRAD_ROOT_KEY: InjectionKey<IRectangleOrbitTetradRootContext> =
+  Symbol('RECT_ORBIT_TETRAD_ROOT_KEY');
+
+export const RECT_ORBIT_TETRAD_CALLOUT_KEY: InjectionKey<IRectangleOrbitTetradCalloutContext> =
+  Symbol('RECT_ORBIT_TETRAD_CALLOUT_KEY');

package/utils/{rectOrbitTetrad/createRectOrbitTetradGeometry.ts → facets/tetrad/rectangle-orbit-tetrad/createRectangleOrbitTetradGeometry.ts}

@@ -11,7 +11,7 @@ export interface IRectOrbitBox {
   readonly height: number;
 }
 
-export interface IRectOrbitTetradCoordinates {
+export interface IRectangleOrbitTetradCoordinates {
   readonly centerX: number;
   readonly centerY: number;
   readonly arcPaths: readonly [string, string, string, string];
@@ -59,7 +59,7 @@ function createArcPath(
   return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
 }
 
-export interface ICalculateRectOrbitTetradCoordinatesParams {
+export interface ICalculateRectangleOrbitTetradCoordinatesParams {
   readonly gap?: number;
   readonly width?: number;
   readonly height?: number;
@@ -74,14 +74,14 @@ export interface ICalculateRectOrbitTetradCoordinatesParams {
 }
 
 /**
- * Calculates geometric coordinates for the RectOrbitTetrad layout.
+ * Calculates geometric coordinates for the RectangleOrbitTetrad layout.
  * Indices (Clockwise starting Top-Left):
  * 0: Top-Left (01)
  * 1: Top-Right (02)
  * 2: Bottom-Right (03)
  * 3: Bottom-Left (04)
  */
-export function calculateRectOrbitTetradCoordinates({
+export function calculateRectangleOrbitTetradCoordinates({
   gap = 14,
   width = 136,
   height = 150,
@@ -93,7 +93,7 @@ export function calculateRectOrbitTetradCoordinates({
   iconPaddingX = 30,
   iconPaddingY = 32,
   arcBorderWidth = 5,
-}: ICalculateRectOrbitTetradCoordinatesParams = {}): IRectOrbitTetradCoordinates {
+}: ICalculateRectangleOrbitTetradCoordinatesParams = {}): IRectangleOrbitTetradCoordinates {
   const centerX = viewBoxSize / 2;
   const centerY = viewBoxSize / 2;
   const halfGap = gap / 2;
@@ -235,102 +235,3 @@ export function calculateRectOrbitTetradCoordinates({
     numberPositions: [num0, num1, num2, num3],
   };
 }
-
-export interface ILightenColorParams {
-  readonly hex: string;
-  readonly ratio?: number;
-}
-
-/**
- * Automatically lightens a base hex color by mixing it with white.
- * ratio: 0 = original color, 1 = pure white.
- */
-export function lightenColor({
-  hex,
-  ratio = 0.5,
-}: ILightenColorParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => {
-            return char + char;
-          })
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number => {
-    return Math.min(255, Math.max(0, Math.round(val)));
-  };
-
-  const lr = clamp(r + (255 - r) * ratio);
-  const lg = clamp(g + (255 - g) * ratio);
-  const lb = clamp(b + (255 - b) * ratio);
-
-  const toHex = (n: number): string => {
-    return n.toString(16).padStart(2, '0');
-  };
-
-  return `#${toHex(lr)}${toHex(lg)}${toHex(lb)}`;
-}
-
-export interface IDarkenColorParams {
-  readonly hex: string;
-  readonly ratio?: number;
-}
-
-/**
- * Automatically darkens a base hex color by mixing it with black.
- * ratio: 0 = original color, 1 = pure black.
- */
-export function darkenColor({ hex, ratio = 0.18 }: IDarkenColorParams): string {
-  const raw = hex.trim().replace(/^#/, '');
-  const sanitized =
-    raw.length === 3
-      ? raw
-          .split('')
-          .map((char) => {
-            return char + char;
-          })
-          .join('')
-      : raw;
-
-  if (sanitized.length !== 6) {
-    return hex;
-  }
-
-  const r = Number.parseInt(sanitized.slice(0, 2), 16);
-  const g = Number.parseInt(sanitized.slice(2, 4), 16);
-  const b = Number.parseInt(sanitized.slice(4, 6), 16);
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return hex;
-  }
-
-  const clamp = (val: number): number => {
-    return Math.min(255, Math.max(0, Math.round(val)));
-  };
-
-  const dr = clamp(r * (1 - ratio));
-  const dg = clamp(g * (1 - ratio));
-  const db = clamp(b * (1 - ratio));
-
-  const toHex = (n: number): string => {
-    return n.toString(16).padStart(2, '0');
-  };
-
-  return `#${toHex(dr)}${toHex(dg)}${toHex(db)}`;
-}

package/utils/facets/tetrad/rectangle-orbit-tetrad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createRectangleOrbitTetradGeometry';
+export * from './resolveRectangleOrbitTetradItems';

package/utils/{rectOrbitTetrad/resolveRectOrbitTetradItems.ts → facets/tetrad/rectangle-orbit-tetrad/resolveRectangleOrbitTetradItems.ts}

@@ -1,57 +1,55 @@
-import { lightenColor } from './createRectOrbitTetradGeometry';
+import { lightenColor } from '../../../colors';
 
-export type TRectOrbitTetradIcon = string | object | boolean;
+export type TRectangleOrbitTetradIcon = string | object | boolean;
 
-export interface IRectOrbitTetradItem {
+export interface IRectangleOrbitTetradItem {
   readonly id?: string | number;
   /**
    * Optional icon: icon class (e.g. 'i-lucide-user'), component object,
    * built-in name ('user' | 'academic' | 'briefcase' | 'target'), or false to hide.
    */
-  readonly icon?: TRectOrbitTetradIcon;
+  readonly icon?: TRectangleOrbitTetradIcon;
   readonly color?: string;
   readonly cardBg?: string;
   readonly arcColor?: string;
   readonly arcRatio?: number;
   readonly textColor?: string;
-  readonly titleColor?: string;
   readonly arcBorderColor?: string;
   readonly arcBorderRatio?: number;
 }
 
-export interface IResolvedRectOrbitTetradItem extends IRectOrbitTetradItem {
+export interface IResolvedRectangleOrbitTetradItem
+  extends IRectangleOrbitTetradItem {
   readonly id: string | number;
   readonly color: string;
   readonly cardBg: string;
   readonly arcColor: string;
   readonly textColor: string;
-  readonly titleColor: string;
   readonly arcBorderColor: string;
 }
 
 export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
 ] = [
   // 0: Top-Left (01) - Golden Orange
   {
     id: '01',
     icon: 'user',
-    color: '#f29e4b',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
     cardBg: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#e6882c',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#f29e4b',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-1-color)',
       ratio: 0.8,
     }),
   },
@@ -59,19 +57,18 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '02',
     icon: 'academic',
-    color: '#a4cb81',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
     cardBg: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#8bb863',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#a4cb81',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-2-color)',
       ratio: 0.8,
     }),
   },
@@ -79,19 +76,18 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '03',
     icon: 'briefcase',
-    color: '#62b6a8',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
     cardBg: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#4ea798',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#62b6a8',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-3-color)',
       ratio: 0.8,
     }),
   },
@@ -99,30 +95,29 @@ export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
   {
     id: '04',
     icon: 'target',
-    color: '#e9717a',
+    color: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
     cardBg: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.9,
     }),
     arcColor: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.55,
     }),
-    textColor: '#555555',
-    titleColor: '#e45b65',
+    textColor: 'var(--alpha-rectangle-orbit-tetrad-content)',
     arcBorderColor: lightenColor({
-      hex: '#e9717a',
+      hex: 'var(--alpha-rectangle-orbit-tetrad-item-4-color)',
       ratio: 0.8,
     }),
   },
 ] as const;
 
 export function resolveSingleItem(
-  defaultItem: IResolvedRectOrbitTetradItem,
-  userItem?: IRectOrbitTetradItem,
+  defaultItem: IResolvedRectangleOrbitTetradItem,
+  userItem?: IRectangleOrbitTetradItem,
   defaultArcRatio = 0.55,
   defaultArcBorderRatio = 0.8,
-): IResolvedRectOrbitTetradItem {
+): IResolvedRectangleOrbitTetradItem {
   const merged = {
     ...defaultItem,
     ...(userItem ?? {}),
@@ -155,9 +150,6 @@ export function resolveSingleItem(
           })
         : defaultItem.arcColor),
     textColor: merged.textColor ?? defaultItem.textColor,
-    titleColor:
-      merged.titleColor ??
-      (isColorChanged ? baseColor : defaultItem.titleColor),
     arcBorderColor:
       userItem?.arcBorderColor ??
       (isColorChanged || userItem?.arcBorderRatio !== undefined
@@ -169,21 +161,21 @@ export function resolveSingleItem(
   };
 }
 
-export interface IResolveRectOrbitTetradItemsParams {
-  readonly items?: readonly IRectOrbitTetradItem[];
+export interface IResolveRectangleOrbitTetradItemsParams {
+  readonly items?: readonly IRectangleOrbitTetradItem[];
   readonly arcRatio?: number;
   readonly arcBorderRatio?: number;
 }
 
-export function resolveRectOrbitTetradItems({
+export function resolveRectangleOrbitTetradItems({
   items = [],
   arcRatio = 0.55,
   arcBorderRatio = 0.8,
-}: IResolveRectOrbitTetradItemsParams = {}): readonly [
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
-  IResolvedRectOrbitTetradItem,
+}: IResolveRectangleOrbitTetradItemsParams = {}): readonly [
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
+  IResolvedRectangleOrbitTetradItem,
 ] {
   return [
     resolveSingleItem(