@alphacifer/slidev-addon-theme 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [
@@ -39,6 +39,7 @@
     "vue": "3.5.40"
   },
   "scripts": {
+    "test": "vitest run --coverage",
     "dev": "slidev slides.md --open",
     "dev:academic": "slidev academic-slides.md --open",
     "preview:build": "slidev build slides.md"

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

@@ -0,0 +1,46 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+
+import type { IPyramidPalette, IPyramidRegistration } from '../shared';
+import type { ICircularLayerGeometry, ICircularPyramidGeometry } from './types';
+
+export interface ICircularPyramidRegistration extends IPyramidRegistration {}
+
+export interface ICircularPyramidRootContext {
+  readonly count: ComputedRef<number>;
+  readonly activeIndex: Ref<number> | ComputedRef<number>;
+  readonly color: ComputedRef<string>;
+  readonly geo: ComputedRef<ICircularPyramidGeometry>;
+  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 ICircularPyramidStackContext {
+  readonly index: ComputedRef<number>;
+  readonly isActive: ComputedRef<boolean>;
+  readonly step: ComputedRef<string | number>;
+  readonly color?: ComputedRef<string>;
+  readonly layerGeo?: ComputedRef<ICircularLayerGeometry | undefined>;
+  readonly deltaY?: ComputedRef<number>;
+  readonly connectorWidth?: ComputedRef<number>;
+  readonly setActive?: () => void;
+}
+
+export const CIRCULAR_PYRAMID_ROOT_KEY: InjectionKey<ICircularPyramidRootContext> =
+  Symbol('CIRCULAR_PYRAMID_ROOT_KEY');
+
+export const CIRCULAR_PYRAMID_STACK_KEY: InjectionKey<ICircularPyramidStackContext> =
+  Symbol('CIRCULAR_PYRAMID_STACK_KEY');

package/utils/pyramid/circular-pyramid/createCircularPyramidGeometry.ts

@@ -0,0 +1,143 @@
+import {
+  clampPyramidCount,
+  computePyramidStacking,
+  DEFAULT_PYRAMID_COLOR,
+  darkenColor,
+  lightenColor,
+  MAX_PYRAMID_COUNT,
+  MIN_PYRAMID_COUNT,
+  resolvePyramidPalette,
+} from '../shared';
+import type {
+  ICircularLayerGeometry,
+  ICircularPyramidGeometry,
+  ICircularPyramidPalette,
+  ICreateCircularPyramidOptions,
+} from './types';
+
+export const DEFAULT_CIRCULAR_PYRAMID_COLOR = DEFAULT_PYRAMID_COLOR;
+export const DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS: readonly string[] = [
+  '#3b82f6', // 0: Blue
+  '#6366f1', // 1: Indigo
+  '#10b981', // 2: Emerald
+  '#f59e0b', // 3: Amber
+  '#ec4899', // 4: Pink
+  '#06b6d4', // 5: Cyan
+] as const;
+
+export const MIN_CIRCULAR_COUNT = MIN_PYRAMID_COUNT;
+export const MAX_CIRCULAR_COUNT = MAX_PYRAMID_COUNT;
+
+export { darkenColor, lightenColor };
+
+export function clampCircularCount(count?: number): number {
+  return clampPyramidCount(count);
+}
+
+export function resolveCircularPyramidPalette(
+  baseColor: string = DEFAULT_CIRCULAR_PYRAMID_COLOR,
+): ICircularPyramidPalette {
+  return resolvePyramidPalette(baseColor);
+}
+
+export function createCircularPyramidGeometry(
+  options: ICreateCircularPyramidOptions = {},
+): ICircularPyramidGeometry {
+  const viewBoxWidth = options.viewBoxWidth ?? 960;
+  const viewBoxHeight = options.viewBoxHeight ?? 440;
+  const count = clampCircularCount(options.count);
+  const ratio = options.ratio ?? 0.45;
+
+  const cx = options.cx ?? viewBoxWidth / 2;
+  const cylinderHeight = options.cylinderHeight ?? (count >= 5 ? 7 : 8);
+
+  if (count === 1) {
+    const rx = options.topRadius ?? 120;
+    const ry = Number((rx * ratio).toFixed(2));
+    const cy = Number((viewBoxHeight / 2 - cylinderHeight / 2).toFixed(2));
+
+    const topEllipsePath = `M ${cx - rx} ${cy} a ${rx} ${ry} 0 1 0 ${rx * 2} 0 a ${rx} ${ry} 0 1 0 ${-rx * 2} 0`;
+    const cylinderPath = `M ${cx - rx} ${cy} L ${cx - rx} ${cy + cylinderHeight} A ${rx} ${ry} 0 0 0 ${cx + rx} ${cy + cylinderHeight} L ${cx + rx} ${cy} A ${rx} ${ry} 0 0 1 ${cx - rx} ${cy} Z`;
+    const bottomArcPath = `M ${cx - rx} ${cy + cylinderHeight} A ${rx} ${ry} 0 0 0 ${cx + rx} ${cy + cylinderHeight}`;
+
+    const slabCenterY = Number((cy + cylinderHeight / 2).toFixed(2));
+
+    return {
+      viewBoxWidth,
+      viewBoxHeight,
+      count: 1,
+      layers: [
+        {
+          index: 0,
+          cx,
+          cy,
+          rx,
+          ry,
+          cylinderHeight,
+          cylinderPath,
+          bottomArcPath,
+          topEllipsePath,
+          slabCenterY,
+        },
+      ],
+    };
+  }
+
+  const topRadius =
+    options.topRadius ??
+    (count <= 2 ? 120 : Math.max(80, 115 - (count - 3) * 8));
+  const bottomRadius = options.bottomRadius ?? 215;
+
+  const radii: { rx: number; ry: number }[] = [];
+  for (let i = 0; i < count; i++) {
+    const t = i / (count - 1);
+    const rx = Number((topRadius + t * (bottomRadius - topRadius)).toFixed(2));
+    const ry = Number((rx * ratio).toFixed(2));
+    radii.push({ rx, ry });
+  }
+
+  const { startCy, stepYList } = computePyramidStacking({
+    count,
+    viewBoxHeight,
+    slabHeight: cylinderHeight,
+    radii,
+  });
+
+  const layers: ICircularLayerGeometry[] = [];
+  let currentCy = startCy;
+
+  for (let i = 0; i < count; i++) {
+    const rx = radii[i]?.rx ?? topRadius;
+    const ry = radii[i]?.ry ?? topRadius * ratio;
+    const cy = Number(currentCy.toFixed(2));
+
+    const topEllipsePath = `M ${cx - rx} ${cy} a ${rx} ${ry} 0 1 0 ${rx * 2} 0 a ${rx} ${ry} 0 1 0 ${-rx * 2} 0`;
+    const cylinderPath = `M ${cx - rx} ${cy} L ${cx - rx} ${cy + cylinderHeight} A ${rx} ${ry} 0 0 0 ${cx + rx} ${cy + cylinderHeight} L ${cx + rx} ${cy} A ${rx} ${ry} 0 0 1 ${cx - rx} ${cy} Z`;
+    const bottomArcPath = `M ${cx - rx} ${cy + cylinderHeight} A ${rx} ${ry} 0 0 0 ${cx + rx} ${cy + cylinderHeight}`;
+    const slabCenterY = Number((cy + cylinderHeight / 2).toFixed(2));
+
+    layers.push({
+      index: i,
+      cx,
+      cy,
+      rx,
+      ry,
+      cylinderHeight,
+      cylinderPath,
+      bottomArcPath,
+      topEllipsePath,
+      slabCenterY,
+    });
+
+    if (i < count - 1) {
+      currentCy += stepYList[i] ?? 0;
+    }
+  }
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    count,
+    layers,
+  };
+}

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

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

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

@@ -0,0 +1,34 @@
+import type { IPyramidPalette } from '../shared';
+
+export interface ICircularLayerGeometry {
+  readonly index: number;
+  readonly cx: number;
+  readonly cy: number;
+  readonly rx: number;
+  readonly ry: number;
+  readonly cylinderHeight: number;
+  readonly cylinderPath: string;
+  readonly bottomArcPath: string;
+  readonly topEllipsePath: string;
+  readonly slabCenterY?: number;
+}
+
+export interface ICircularPyramidGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly count: number;
+  readonly layers: readonly ICircularLayerGeometry[];
+}
+
+export interface ICreateCircularPyramidOptions {
+  readonly count?: number;
+  readonly viewBoxWidth?: number;
+  readonly viewBoxHeight?: number;
+  readonly topRadius?: number;
+  readonly bottomRadius?: number;
+  readonly cylinderHeight?: number;
+  readonly ratio?: number;
+  readonly cx?: number;
+}
+
+export interface ICircularPyramidPalette extends IPyramidPalette {}

package/utils/pyramid/index.ts

@@ -0,0 +1,3 @@
+export * from './circular-pyramid';
+export * from './shared';
+export * from './square-pyramid';

package/utils/pyramid/shared/colors.ts

@@ -0,0 +1,92 @@
+import { DEFAULT_PYRAMID_COLOR } from './constants';
+import type { IColorModifierParams, IPyramidPalette } 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 resolvePyramidPalette(
+  baseColor: string = DEFAULT_PYRAMID_COLOR,
+): IPyramidPalette {
+  return {
+    activeTopStart: lightenColor({ hex: baseColor, ratio: 0.82 }),
+    activeTopEnd: baseColor,
+    activeSideStart: darkenColor({ hex: baseColor, ratio: 0.28 }),
+    activeSideEnd: lightenColor({ hex: baseColor, ratio: 0.35 }),
+    activeStroke: lightenColor({ hex: baseColor, ratio: 0.7 }),
+    defaultTopStart: '#ffffff',
+    defaultTopEnd: lightenColor({ hex: baseColor, ratio: 0.88 }),
+    defaultSideStart: lightenColor({ hex: baseColor, ratio: 0.72 }),
+    defaultSideEnd: lightenColor({ hex: baseColor, ratio: 0.88 }),
+    defaultStroke: '#ffffff',
+    glow: baseColor,
+  };
+}

package/utils/pyramid/shared/connector.ts

@@ -0,0 +1,111 @@
+export interface IPyramidConnectorPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export function createPyramidConnectorPath(
+  start: IPyramidConnectorPoint,
+  end: IPyramidConnectorPoint,
+): string {
+  const startX = Number(start.x.toFixed(2));
+  const startY = Number(start.y.toFixed(2));
+  const endX = Number(end.x.toFixed(2));
+  const endY = Number(end.y.toFixed(2));
+
+  // If startY and endY are virtually aligned, return straight line
+  if (Math.abs(startY - endY) < 1) {
+    return `M ${startX} ${startY} L ${endX} ${endY}`;
+  }
+
+  const width = Math.max(0, endX - startX);
+  // Initial horizontal stub leaving the disc dot
+  const stubWidth = Math.min(14, width * 0.2);
+  const x1 = Number((startX + stubWidth).toFixed(2));
+
+  // Ramp/elbow transition to target card elevation
+  const rampWidth = Math.min(28, Math.max(14, (width - stubWidth) * 0.45));
+  const x2 = Number((x1 + rampWidth).toFixed(2));
+
+  // Connect: (startX, startY) -> (x1, startY) -> (x2, endY) -> (endX, endY)
+  return `M ${startX} ${startY} L ${x1} ${startY} L ${x2} ${endY} L ${endX} ${endY}`;
+}
+
+export interface IResolvePyramidCardPositionsParams {
+  readonly targetYList: readonly number[];
+  readonly heights: readonly number[];
+  readonly gap?: number;
+  readonly minY?: number;
+  readonly maxY?: number;
+}
+
+export function resolvePyramidCardPositions(
+  params: IResolvePyramidCardPositionsParams,
+): number[] {
+  const { targetYList, heights, gap = 10, minY = 16, maxY = 464 } = params;
+  const count = targetYList.length;
+  if (count <= 1) {
+    return [...targetYList];
+  }
+
+  const yList: number[] = [...targetYList];
+
+  // 1. Forward pass: push down any overlapping cards
+  for (let i = 0; i < count - 1; i++) {
+    const curY = yList[i] ?? 0;
+    const nextY = yList[i + 1] ?? 0;
+    const curH = heights[i] ?? 48;
+    const nextH = heights[i + 1] ?? 48;
+    const minCenterNext = curY + curH / 2 + nextH / 2 + gap;
+    if (nextY < minCenterNext) {
+      yList[i + 1] = minCenterNext;
+    }
+  }
+
+  // 2. Center the shift by redistributing excess displacement
+  const avgShift =
+    yList.reduce((sum, y, i) => sum + (y - (targetYList[i] ?? y)), 0) / count;
+  const firstY = yList[0] ?? 0;
+  const firstH = heights[0] ?? 48;
+  const maxAllowableUpShift = firstY - firstH / 2 - minY;
+  const shiftUp = Math.max(0, Math.min(avgShift, maxAllowableUpShift));
+  for (let i = 0; i < count; i++) {
+    yList[i] = (yList[i] ?? 0) - shiftUp;
+  }
+
+  // 3. Backward pass from bottom boundary
+  const lastY = yList[count - 1] ?? 0;
+  const lastH = heights[count - 1] ?? 48;
+  const bottomOverlap = lastY + lastH / 2 - maxY;
+  if (bottomOverlap > 0) {
+    yList[count - 1] = lastY - bottomOverlap;
+    for (let i = count - 2; i >= 0; i--) {
+      const curY = yList[i] ?? 0;
+      const nextY = yList[i + 1] ?? 0;
+      const curH = heights[i] ?? 48;
+      const nextH = heights[i + 1] ?? 48;
+      const maxCenterPrev = nextY - nextH / 2 - curH / 2 - gap;
+      if (curY > maxCenterPrev) {
+        yList[i] = maxCenterPrev;
+      }
+    }
+  }
+
+  // 4. Final top boundary safety
+  const updatedFirstY = yList[0] ?? 0;
+  const topOverlap = minY - (updatedFirstY - firstH / 2);
+  if (topOverlap > 0) {
+    yList[0] = updatedFirstY + topOverlap;
+    for (let i = 0; i < count - 1; i++) {
+      const curY = yList[i] ?? 0;
+      const nextY = yList[i + 1] ?? 0;
+      const curH = heights[i] ?? 48;
+      const nextH = heights[i + 1] ?? 48;
+      const minCenterNext = curY + curH / 2 + nextH / 2 + gap;
+      if (nextY < minCenterNext) {
+        yList[i + 1] = minCenterNext;
+      }
+    }
+  }
+
+  return yList.map((y) => Number(y.toFixed(2)));
+}

package/utils/pyramid/shared/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_PYRAMID_COLOR = '#3b82f6';
+export const MIN_PYRAMID_COUNT = 1;
+export const MAX_PYRAMID_COUNT = 6;
+
+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;

package/utils/pyramid/shared/index.ts

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

package/utils/pyramid/shared/stacking.ts

@@ -0,0 +1,76 @@
+import { MAX_PYRAMID_COUNT, MIN_PYRAMID_COUNT } from './constants';
+import type {
+  IComputePyramidStackingParams,
+  IPyramidStackingResult,
+} from './types';
+
+export function clampPyramidCount(count?: number): number {
+  if (count === undefined || Number.isNaN(count)) {
+    return 4;
+  }
+
+  return Math.min(
+    MAX_PYRAMID_COUNT,
+    Math.max(MIN_PYRAMID_COUNT, Math.round(count)),
+  );
+}
+
+export function computePyramidStacking({
+  count,
+  viewBoxHeight,
+  slabHeight,
+  radii,
+}: IComputePyramidStackingParams): IPyramidStackingResult {
+  let sumAdjacentRy = 0;
+  for (let i = 0; i < count - 1; i++) {
+    const rCurrent = radii[i]?.ry ?? 0;
+    const rNext = radii[i + 1]?.ry ?? 0;
+    sumAdjacentRy += rCurrent + rNext;
+  }
+
+  const firstRy = radii[0]?.ry ?? 0;
+  const lastRy = radii[count - 1]?.ry ?? 0;
+
+  const baseOverlap =
+    count <= 2
+      ? 0.24
+      : count === 3
+        ? 0.26
+        : count === 4
+          ? 0.28
+          : count === 5
+            ? 0.34
+            : 0.38;
+
+  const maxAllowedHeight = viewBoxHeight - 60;
+  const naturalHeight =
+    firstRy + lastRy + count * slabHeight + (1 - baseOverlap) * sumAdjacentRy;
+
+  const effectiveOverlap =
+    naturalHeight > maxAllowedHeight && sumAdjacentRy > 0
+      ? 1 -
+        (maxAllowedHeight - firstRy - lastRy - count * slabHeight) /
+          sumAdjacentRy
+      : baseOverlap;
+
+  const stepYList: number[] = [];
+  let totalStepY = 0;
+  for (let i = 0; i < count - 1; i++) {
+    const rCurrent = radii[i]?.ry ?? 0;
+    const rNext = radii[i + 1]?.ry ?? 0;
+    const step = (rCurrent + rNext) * (1 - effectiveOverlap) + slabHeight;
+    stepYList.push(step);
+    totalStepY += step;
+  }
+
+  const actualTotalHeight = firstRy + totalStepY + slabHeight + lastRy;
+  const startCy = Number(
+    (viewBoxHeight / 2 - actualTotalHeight / 2 + firstRy).toFixed(2),
+  );
+
+  return {
+    startCy,
+    stepYList,
+    actualTotalHeight,
+  };
+}

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');