@alphacifer/slidev-addon-theme 0.0.9 → 0.0.10

package/utils/defenseInDepth/shared/colors.ts

@@ -0,0 +1,121 @@
+import {
+  DEFAULT_DID_COLOR,
+  DEFAULT_DID_DOT_COLOR,
+  DEFAULT_DID_DOT_GLOW_COLOR,
+  DEFAULT_DID_LAYER_COLORS,
+} from './constants';
+import type { IColorModifierParams, IDefenseInDepthPalette } from './types';
+
+export function lightenColor({
+  hex,
+  ratio = 0.5,
+}: IColorModifierParams): string {
+  const raw = hex.trim().replace(/^#/, '');
+  const sanitized =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((char) => 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 =>
+    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 => n.toString(16).padStart(2, '0');
+
+  return `#${toHex(lr)}${toHex(lg)}${toHex(lb)}`;
+}
+
+export function darkenColor({
+  hex,
+  ratio = 0.5,
+}: IColorModifierParams): string {
+  const raw = hex.trim().replace(/^#/, '');
+  const sanitized =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((char) => 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 =>
+    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 => n.toString(16).padStart(2, '0');
+
+  return `#${toHex(dr)}${toHex(dg)}${toHex(db)}`;
+}
+
+export function resolveArcDiDPalette(
+  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: '#ffffff',
+      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: '#ffffff',
+    decorativeStrokeColor: lightenColor({ hex: baseColor, ratio: 0.65 }),
+  };
+}

package/utils/defenseInDepth/shared/constants.ts

@@ -0,0 +1,14 @@
+export const DEFAULT_DID_COLOR = '#0ea5e9';
+
+export const DEFAULT_DID_OUTER_COLOR = '#38bdf8';
+export const DEFAULT_DID_MIDDLE_COLOR = '#0ea5e9';
+export const DEFAULT_DID_INNER_COLOR = '#0284c7';
+
+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 = '#0284c7';
+export const DEFAULT_DID_DOT_GLOW_COLOR = 'rgba(56, 189, 248, 0.35)';

package/utils/defenseInDepth/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './constants';
+export * from './types';

package/utils/defenseInDepth/shared/types.ts

@@ -0,0 +1,12 @@
+export interface IColorModifierParams {
+  readonly hex: string;
+  readonly ratio?: number;
+}
+
+export interface IDefenseInDepthPalette {
+  readonly layerColors: readonly string[];
+  readonly dotColor: string;
+  readonly dotGlowColor: string;
+  readonly strokeColor: string;
+  readonly decorativeStrokeColor: string;
+}

package/utils/pyramid/shared/constants.ts

@@ -6,3 +6,4 @@ export const PYRAMID_TITLE_WIDTH_PX = 150;
 export const PYRAMID_CONTENT_WIDTH_PX = 240;
 export const PYRAMID_CONTENT_RIGHT_OFFSET_PX = 0;
 export const PYRAMID_DOT_POSITION_X = 210;
+export const PYRAMID_DOT_GAP_PX = 10;

package/utils/useDiagramAutoScale.ts

@@ -14,6 +14,9 @@ export interface IUseDiagramAutoScaleOptions {
   readonly scale?: Ref<number | undefined> | (() => number | undefined);
   readonly autoScale?: Ref<boolean | undefined> | (() => boolean | undefined);
   readonly maxScale?: Ref<number | undefined> | (() => number | undefined);
+  readonly width?:
+    | Ref<number | string | undefined>
+    | (() => number | string | undefined);
   readonly height?:
     | Ref<number | string | undefined>
     | (() => number | string | undefined);
@@ -94,6 +97,19 @@ export function useDiagramAutoScale(
       availW = el.clientWidth;
     }
 
+    const explicitWidth = resolveValue(options.width, undefined);
+    if (typeof explicitWidth === 'number' && explicitWidth > 0) {
+      availW = availW > 0 ? Math.min(availW, explicitWidth) : explicitWidth;
+    } else if (
+      typeof explicitWidth === 'string' &&
+      explicitWidth.endsWith('px')
+    ) {
+      const parsedW = Number.parseFloat(explicitWidth);
+      if (parsedW > 0) {
+        availW = availW > 0 ? Math.min(availW, parsedW) : parsedW;
+      }
+    }
+
     // Available height inside parent or slide layout
     let availH = 0;
     const explicitHeight = resolveValue(options.height, undefined);
@@ -140,6 +156,25 @@ export function useDiagramAutoScale(
         pagyEl && window.getComputedStyle(pagyEl).display !== 'none';
       const clearance = isPagyVisible ? pagyClearance : 16;
 
+      // Check for internal component header inside el (e.g. ArcDiD, GearTriad, HexTriad)
+      let internalHeaderH = 0;
+      for (let i = 0; i < el.children.length; i++) {
+        const child = el.children[i];
+        if (
+          child instanceof HTMLElement &&
+          (child.tagName === 'HEADER' ||
+            child.classList.contains('alpha-arc-did__header') ||
+            child.classList.contains('alpha-gear-triad__header') ||
+            child.classList.contains('alpha-hex-triad__header'))
+        ) {
+          internalHeaderH += child.offsetHeight;
+          const cs = window.getComputedStyle(child);
+          internalHeaderH +=
+            (Number.parseFloat(cs.marginTop) || 0) +
+            (Number.parseFloat(cs.marginBottom) || 0);
+        }
+      }
+
       if (slideEl && slideEl.clientHeight > 0) {
         const slideStyle = window.getComputedStyle(slideEl);
         const sPadTop = Number.parseFloat(slideStyle.paddingTop) || 0;
@@ -148,21 +183,26 @@ export function useDiagramAutoScale(
         let slideSiblingsH = siblingsH;
 
         if (parent !== slideEl) {
-          for (let i = 0; i < slideEl.children.length; i++) {
-            const child = slideEl.children[i];
-
-            if (
-              child &&
-              child !== parent &&
-              !child.contains(parent) &&
-              child instanceof HTMLElement
-            ) {
-              slideSiblingsH += child.offsetHeight;
-              const cs = window.getComputedStyle(child);
-              slideSiblingsH +=
-                (Number.parseFloat(cs.marginTop) || 0) +
-                (Number.parseFloat(cs.marginBottom) || 0);
+          let curr: HTMLElement | null = parent;
+          while (curr && curr !== slideEl && curr.parentElement) {
+            const p: HTMLElement = curr.parentElement;
+            for (let i = 0; i < p.children.length; i++) {
+              const child = p.children[i];
+              if (
+                child &&
+                child !== curr &&
+                !child.contains(curr) &&
+                child instanceof HTMLElement
+              ) {
+                slideSiblingsH += child.offsetHeight;
+                const cs = window.getComputedStyle(child);
+                slideSiblingsH +=
+                  (Number.parseFloat(cs.marginTop) || 0) +
+                  (Number.parseFloat(cs.marginBottom) || 0);
+              }
             }
+            if (p === slideEl) break;
+            curr = p;
           }
         }
 
@@ -172,12 +212,18 @@ export function useDiagramAutoScale(
             sPadTop -
             sPadBottom -
             slideSiblingsH -
+            internalHeaderH -
             clearance,
         );
       } else if (parent.clientHeight > 0) {
         availH = Math.max(
           0,
-          parent.clientHeight - padTop - padBottom - siblingsH - clearance,
+          parent.clientHeight -
+            padTop -
+            padBottom -
+            siblingsH -
+            internalHeaderH -
+            clearance,
         );
       }
     }