@alphacifer/slidev-addon-theme 0.0.7 → 0.0.9

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

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