@alphacifer/slidev-addon-theme 0.0.8 → 0.0.10

package/utils/pyramid/shared/types.ts

@@ -0,0 +1,36 @@
+export interface IColorModifierParams {
+  readonly hex: string;
+  readonly ratio?: number;
+}
+
+export interface IPyramidPalette {
+  readonly activeTopStart: string;
+  readonly activeTopEnd: string;
+  readonly activeSideStart: string;
+  readonly activeSideEnd: string;
+  readonly activeStroke: string;
+  readonly defaultTopStart: string;
+  readonly defaultTopEnd: string;
+  readonly defaultSideStart: string;
+  readonly defaultSideEnd: string;
+  readonly defaultStroke: string;
+  readonly glow: string;
+}
+
+export interface IPyramidRegistration {
+  readonly index: number;
+  readonly unregister: () => void;
+}
+
+export interface IComputePyramidStackingParams {
+  readonly count: number;
+  readonly viewBoxHeight: number;
+  readonly slabHeight: number;
+  readonly radii: readonly { readonly rx: number; readonly ry: number }[];
+}
+
+export interface IPyramidStackingResult {
+  readonly startCy: number;
+  readonly stepYList: readonly number[];
+  readonly actualTotalHeight: number;
+}

package/utils/pyramid/square-pyramid/context.ts

@@ -0,0 +1,46 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+
+import type { IPyramidPalette, IPyramidRegistration } from '../shared';
+import type { ISquareLayerGeometry, ISquarePyramidGeometry } from './types';
+
+export interface ISquarePyramidRegistration extends IPyramidRegistration {}
+
+export interface ISquarePyramidRootContext {
+  readonly count: ComputedRef<number>;
+  readonly activeIndex: Ref<number> | ComputedRef<number>;
+  readonly color: ComputedRef<string>;
+  readonly geo: ComputedRef<ISquarePyramidGeometry>;
+  readonly palette: ComputedRef<IPyramidPalette>;
+  readonly animation: ComputedRef<boolean>;
+  readonly interactive: ComputedRef<boolean>;
+  readonly titleWidthPx: ComputedRef<number>;
+  readonly contentWidthPx: ComputedRef<number>;
+  readonly contentRightOffsetPx: ComputedRef<number>;
+  readonly registerStack: (
+    id?: symbol,
+    color?: ComputedRef<string | undefined>,
+  ) => {
+    index: ComputedRef<number>;
+    unregister: () => void;
+  };
+  readonly getLayerColor: (index: number) => string;
+  readonly setActiveIndex: (index: number) => void;
+  readonly getCardDeltaY?: (index: number) => number;
+}
+
+export interface ISquarePyramidStackContext {
+  readonly index: ComputedRef<number>;
+  readonly isActive: ComputedRef<boolean>;
+  readonly step: ComputedRef<string | number>;
+  readonly color?: ComputedRef<string>;
+  readonly layerGeo?: ComputedRef<ISquareLayerGeometry | undefined>;
+  readonly deltaY?: ComputedRef<number>;
+  readonly connectorWidth?: ComputedRef<number>;
+  readonly setActive?: () => void;
+}
+
+export const SQUARE_PYRAMID_ROOT_KEY: InjectionKey<ISquarePyramidRootContext> =
+  Symbol('SQUARE_PYRAMID_ROOT_KEY');
+
+export const SQUARE_PYRAMID_STACK_KEY: InjectionKey<ISquarePyramidStackContext> =
+  Symbol('SQUARE_PYRAMID_STACK_KEY');

package/utils/pyramid/square-pyramid/createSquarePyramidGeometry.ts

@@ -0,0 +1,265 @@
+import {
+  clampPyramidCount,
+  computePyramidStacking,
+  DEFAULT_PYRAMID_COLOR,
+  darkenColor,
+  lightenColor,
+  MAX_PYRAMID_COUNT,
+  MIN_PYRAMID_COUNT,
+  resolvePyramidPalette,
+} from '../shared';
+import type {
+  ICreateSquarePyramidOptions,
+  ISquareLayerGeometry,
+  ISquarePyramidGeometry,
+  ISquarePyramidPalette,
+} from './types';
+
+export const DEFAULT_SQUARE_PYRAMID_COLOR = DEFAULT_PYRAMID_COLOR;
+export const DEFAULT_SQUARE_PYRAMID_STACK_COLORS: readonly string[] = [
+  '#ec4899', // 0: Pink (matches top slab)
+  '#8b5cf6', // 1: Purple (matches 2nd slab)
+  '#3b82f6', // 2: Blue (matches 3rd slab)
+  '#06b6d4', // 3: Cyan (matches 4th slab)
+  '#14b8a6', // 4: Teal (matches 5th slab)
+  '#f59e0b', // 5: Amber (warm accent)
+] as const;
+
+export const MIN_SQUARE_COUNT = MIN_PYRAMID_COUNT;
+export const MAX_SQUARE_COUNT = MAX_PYRAMID_COUNT;
+
+export { darkenColor, lightenColor };
+
+export function clampSquareCount(count?: number): number {
+  return clampPyramidCount(count);
+}
+
+export function resolveSquarePyramidPalette(
+  baseColor: string = DEFAULT_SQUARE_PYRAMID_COLOR,
+): ISquarePyramidPalette {
+  return resolvePyramidPalette(baseColor);
+}
+
+function buildSquarePaths({
+  cx,
+  cy,
+  rx,
+  ry,
+  dx,
+  dy,
+  slabHeight,
+}: {
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+  dx: number;
+  dy: number;
+  slabHeight: number;
+}) {
+  const topFacePath = [
+    `M ${cx - dx} ${cy - ry + dy}`,
+    `Q ${cx} ${cy - ry} ${cx + dx} ${cy - ry + dy}`,
+    `L ${cx + rx - dx} ${cy - dy}`,
+    `Q ${cx + rx} ${cy} ${cx + rx - dx} ${cy + dy}`,
+    `L ${cx + dx} ${cy + ry - dy}`,
+    `Q ${cx} ${cy + ry} ${cx - dx} ${cy + ry - dy}`,
+    `L ${cx - rx + dx} ${cy + dy}`,
+    `Q ${cx - rx} ${cy} ${cx - rx + dx} ${cy - dy}`,
+    'Z',
+  ].join(' ');
+
+  const innerRatio = 0.65;
+  const rxInner = Number((rx * innerRatio).toFixed(2));
+  const ryInner = Number((ry * innerRatio).toFixed(2));
+  const dxInner = Number((dx * innerRatio).toFixed(2));
+  const dyInner = Number((dy * innerRatio).toFixed(2));
+
+  const innerFacePath = [
+    `M ${cx - dxInner} ${cy - ryInner + dyInner}`,
+    `Q ${cx} ${cy - ryInner} ${cx + dxInner} ${cy - ryInner + dyInner}`,
+    `L ${cx + rxInner - dxInner} ${cy - dyInner}`,
+    `Q ${cx + rxInner} ${cy} ${cx + rxInner - dxInner} ${cy + dyInner}`,
+    `L ${cx + dxInner} ${cy + ryInner - dyInner}`,
+    `Q ${cx} ${cy + ryInner} ${cx - dxInner} ${cy + ryInner - dyInner}`,
+    `L ${cx - rxInner + dxInner} ${cy + dyInner}`,
+    `Q ${cx - rxInner} ${cy} ${cx - rxInner + dxInner} ${cy - dyInner}`,
+    'Z',
+  ].join(' ');
+
+  const sidePath = [
+    `M ${cx - rx + 0.5 * dx} ${cy}`,
+    `Q ${cx - rx + 0.5 * dx} ${cy + 0.5 * dy} ${cx - rx + dx} ${cy + dy}`,
+    `L ${cx - dx} ${cy + ry - dy}`,
+    `Q ${cx} ${cy + ry} ${cx + dx} ${cy + ry - dy}`,
+    `L ${cx + rx - dx} ${cy + dy}`,
+    `Q ${cx + rx - 0.5 * dx} ${cy + 0.5 * dy} ${cx + rx - 0.5 * dx} ${cy}`,
+    `L ${cx + rx - 0.5 * dx} ${cy + slabHeight}`,
+    `Q ${cx + rx - 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx + rx - dx} ${cy + slabHeight + dy}`,
+    `L ${cx + dx} ${cy + ry + slabHeight - dy}`,
+    `Q ${cx} ${cy + ry + slabHeight} ${cx - dx} ${cy + ry + slabHeight - dy}`,
+    `L ${cx - rx + dx} ${cy + slabHeight + dy}`,
+    `Q ${cx - rx + 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx - rx + 0.5 * dx} ${cy + slabHeight}`,
+    'Z',
+  ].join(' ');
+
+  const leftSidePath = [
+    `M ${cx - rx + 0.5 * dx} ${cy}`,
+    `Q ${cx - rx + 0.5 * dx} ${cy + 0.5 * dy} ${cx - rx + dx} ${cy + dy}`,
+    `L ${cx - dx} ${cy + ry - dy}`,
+    `Q ${cx} ${cy + ry} ${cx} ${cy + ry - 0.5 * dy}`,
+    `L ${cx} ${cy + ry + slabHeight - 0.5 * dy}`,
+    `Q ${cx} ${cy + ry + slabHeight} ${cx - dx} ${cy + ry + slabHeight - dy}`,
+    `L ${cx - rx + dx} ${cy + slabHeight + dy}`,
+    `Q ${cx - rx + 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx - rx + 0.5 * dx} ${cy + slabHeight}`,
+    'Z',
+  ].join(' ');
+
+  const rightSidePath = [
+    `M ${cx} ${cy + ry - 0.5 * dy}`,
+    `Q ${cx} ${cy + ry} ${cx + dx} ${cy + ry - dy}`,
+    `L ${cx + rx - dx} ${cy + dy}`,
+    `Q ${cx + rx - 0.5 * dx} ${cy + 0.5 * dy} ${cx + rx - 0.5 * dx} ${cy}`,
+    `L ${cx + rx - 0.5 * dx} ${cy + slabHeight}`,
+    `Q ${cx + rx - 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx + rx - dx} ${cy + slabHeight + dy}`,
+    `L ${cx + dx} ${cy + ry + slabHeight - dy}`,
+    `Q ${cx} ${cy + ry + slabHeight} ${cx} ${cy + ry + slabHeight - 0.5 * dy}`,
+    'Z',
+  ].join(' ');
+
+  const bottomEdgePath = [
+    `M ${cx - rx + 0.5 * dx} ${cy + slabHeight}`,
+    `Q ${cx - rx + 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx - rx + dx} ${cy + slabHeight + dy}`,
+    `L ${cx - dx} ${cy + ry + slabHeight - dy}`,
+    `Q ${cx} ${cy + ry + slabHeight} ${cx + dx} ${cy + ry + slabHeight - dy}`,
+    `L ${cx + rx - dx} ${cy + slabHeight + dy}`,
+    `Q ${cx + rx - 0.5 * dx} ${cy + slabHeight + 0.5 * dy} ${cx + rx - 0.5 * dx} ${cy + slabHeight}`,
+  ].join(' ');
+
+  return {
+    topFacePath,
+    innerFacePath,
+    sidePath,
+    leftSidePath,
+    rightSidePath,
+    bottomEdgePath,
+  };
+}
+
+export function createSquarePyramidGeometry(
+  options: ICreateSquarePyramidOptions = {},
+): ISquarePyramidGeometry {
+  const viewBoxWidth = options.viewBoxWidth ?? 960;
+  const viewBoxHeight = options.viewBoxHeight ?? 440;
+  const count = clampSquareCount(options.count);
+  const ratio = options.ratio ?? 0.46;
+  const cx = options.cx ?? viewBoxWidth / 2;
+  const slabHeight = options.slabHeight ?? (count >= 5 ? 8 : 10);
+  const cornerRadiusRatio = options.cornerRadiusRatio ?? 0.16;
+
+  if (count === 1) {
+    const rx = options.topSize ?? 110;
+    const ry = Number((rx * ratio).toFixed(2));
+    const cy = Number((viewBoxHeight / 2 - slabHeight / 2).toFixed(2));
+    const cornerRadius = Number((rx * cornerRadiusRatio).toFixed(2));
+    const dx = cornerRadius;
+    const dy = Number((cornerRadius * ratio).toFixed(2));
+
+    const paths = buildSquarePaths({
+      cx,
+      cy,
+      rx,
+      ry,
+      dx,
+      dy,
+      slabHeight,
+    });
+
+    const slabCenterY = Number((cy + slabHeight / 2).toFixed(2));
+
+    return {
+      viewBoxWidth,
+      viewBoxHeight,
+      count: 1,
+      layers: [
+        {
+          index: 0,
+          cx,
+          cy,
+          rx,
+          ry,
+          slabHeight,
+          cornerRadius,
+          slabCenterY,
+          ...paths,
+        },
+      ],
+    };
+  }
+
+  const topSize =
+    options.topSize ?? (count <= 2 ? 110 : Math.max(75, 100 - (count - 3) * 7));
+  const bottomSize = options.bottomSize ?? 185;
+
+  const radii: { rx: number; ry: number }[] = [];
+  for (let i = 0; i < count; i++) {
+    const t = i / (count - 1);
+    const rx = Number((topSize + t * (bottomSize - topSize)).toFixed(2));
+    const ry = Number((rx * ratio).toFixed(2));
+    radii.push({ rx, ry });
+  }
+
+  const { startCy, stepYList } = computePyramidStacking({
+    count,
+    viewBoxHeight,
+    slabHeight,
+    radii,
+  });
+
+  const layers: ISquareLayerGeometry[] = [];
+  let currentCy = startCy;
+
+  for (let i = 0; i < count; i++) {
+    const rx = radii[i]?.rx ?? topSize;
+    const ry = radii[i]?.ry ?? topSize * ratio;
+    const cy = Number(currentCy.toFixed(2));
+    const cornerRadius = Number((rx * cornerRadiusRatio).toFixed(2));
+    const dx = cornerRadius;
+    const dy = Number((cornerRadius * ratio).toFixed(2));
+
+    const paths = buildSquarePaths({
+      cx,
+      cy,
+      rx,
+      ry,
+      dx,
+      dy,
+      slabHeight,
+    });
+
+    const slabCenterY = Number((cy + slabHeight / 2).toFixed(2));
+
+    layers.push({
+      index: i,
+      cx,
+      cy,
+      rx,
+      ry,
+      slabHeight,
+      cornerRadius,
+      slabCenterY,
+      ...paths,
+    });
+
+    if (i < count - 1) {
+      currentCy += stepYList[i] ?? 0;
+    }
+  }
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    count,
+    layers,
+  };
+}

package/utils/pyramid/square-pyramid/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createSquarePyramidGeometry';
+export * from './types';

package/utils/pyramid/square-pyramid/types.ts

@@ -0,0 +1,39 @@
+import type { IPyramidPalette } from '../shared';
+
+export interface ISquareLayerGeometry {
+  readonly index: number;
+  readonly cx: number;
+  readonly cy: number;
+  readonly rx: number;
+  readonly ry: number;
+  readonly slabHeight: number;
+  readonly cornerRadius: number;
+  readonly topFacePath: string;
+  readonly innerFacePath: string;
+  readonly sidePath: string;
+  readonly leftSidePath: string;
+  readonly rightSidePath: string;
+  readonly bottomEdgePath: string;
+  readonly slabCenterY?: number;
+}
+
+export interface ISquarePyramidGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly count: number;
+  readonly layers: readonly ISquareLayerGeometry[];
+}
+
+export interface ICreateSquarePyramidOptions {
+  readonly count?: number;
+  readonly viewBoxWidth?: number;
+  readonly viewBoxHeight?: number;
+  readonly topSize?: number;
+  readonly bottomSize?: number;
+  readonly slabHeight?: number;
+  readonly ratio?: number;
+  readonly cx?: number;
+  readonly cornerRadiusRatio?: number;
+}
+
+export interface ISquarePyramidPalette extends IPyramidPalette {}

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,14 +156,26 @@ export function useDiagramAutoScale(
         pagyEl && window.getComputedStyle(pagyEl).display !== 'none';
       const clearance = isPagyVisible ? pagyClearance : 16;
 
-      if (parent.clientHeight > 0 && parent !== slideEl) {
-        availH = Math.max(
-          0,
-          parent.clientHeight - padTop - padBottom - siblingsH - clearance,
-        );
+      // 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 (availH <= 0 && slideEl && slideEl.clientHeight > 0) {
+      if (slideEl && slideEl.clientHeight > 0) {
         const slideStyle = window.getComputedStyle(slideEl);
         const sPadTop = Number.parseFloat(slideStyle.paddingTop) || 0;
         const sPadBottom = Number.parseFloat(slideStyle.paddingBottom) || 0;
@@ -155,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;
           }
         }
 
@@ -179,6 +212,17 @@ export function useDiagramAutoScale(
             sPadTop -
             sPadBottom -
             slideSiblingsH -
+            internalHeaderH -
+            clearance,
+        );
+      } else if (parent.clientHeight > 0) {
+        availH = Math.max(
+          0,
+          parent.clientHeight -
+            padTop -
+            padBottom -
+            siblingsH -
+            internalHeaderH -
             clearance,
         );
       }