@alphacifer/slidev-addon-theme 0.0.7 → 0.0.9

package/utils/arcOrbit/resolveArcOrbitItems.ts

@@ -0,0 +1,92 @@
+export interface IArcOrbitItem {
+  readonly id?: string | number;
+  readonly title?: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcOrbitItem {
+  readonly id: string | number;
+  readonly title: string;
+  readonly description: string;
+  readonly color: string;
+  readonly textColor?: string;
+}
+
+export const DEFAULT_ARC_ORBIT_COLOR = '#ea580c';
+
+export const DEFAULT_LOREM_TEXT =
+  'Lorem ipsum dolor sit amet, constitutor adipiscing elit. Nam vulputate augue vel ligula.';
+
+export const DEFAULT_ARC_ORBIT_ITEMS: readonly [
+  IResolvedArcOrbitItem,
+  IResolvedArcOrbitItem,
+  IResolvedArcOrbitItem,
+  IResolvedArcOrbitItem,
+] = [
+  {
+    id: '01',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_ARC_ORBIT_COLOR,
+  },
+  {
+    id: '02',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_ARC_ORBIT_COLOR,
+  },
+  {
+    id: '03',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_ARC_ORBIT_COLOR,
+  },
+  {
+    id: '04',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_ARC_ORBIT_COLOR,
+  },
+];
+
+export interface IResolveArcOrbitItemsOptions {
+  readonly items?: readonly IArcOrbitItem[];
+  readonly defaultColor?: string;
+  readonly count?: number;
+}
+
+export function resolveArcOrbitItems(
+  options: IResolveArcOrbitItemsOptions = {},
+): readonly IResolvedArcOrbitItem[] {
+  const { items, defaultColor = DEFAULT_ARC_ORBIT_COLOR, count = 3 } = options;
+
+  const result: IResolvedArcOrbitItem[] = [];
+
+  for (let i = 0; i < count; i++) {
+    const custom = items?.[i];
+    const defaultItem = DEFAULT_ARC_ORBIT_ITEMS[i];
+
+    const id =
+      custom?.id !== undefined
+        ? custom.id
+        : (defaultItem?.id ?? String(i + 1).padStart(2, '0'));
+
+    const title = custom?.title ?? defaultItem?.title ?? 'Add Text Here';
+    const description =
+      custom?.description ?? defaultItem?.description ?? DEFAULT_LOREM_TEXT;
+    const color = custom?.color ?? defaultColor;
+    const textColor = custom?.textColor ?? defaultItem?.textColor;
+
+    result.push({
+      id,
+      title,
+      description,
+      color,
+      textColor,
+    });
+  }
+
+  return result;
+}

package/utils/gearTriad/context.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type {
+  IGearTriadItem,
+  IResolvedGearTriadItem,
+} from './resolveGearTriadItems';
+
+export interface IGearTriadRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedGearTriadItem>;
+}
+
+export interface IGearTriadRootContext {
+  readonly animation: ComputedRef<boolean>;
+  readonly isShifted: ComputedRef<boolean>;
+  readonly currentStep: ComputedRef<number>;
+  readonly activeOptionIndex: ComputedRef<number>;
+  readonly hasContents: ComputedRef<boolean>;
+  readonly registerCallout: (
+    override?: ComputedRef<IGearTriadItem> | (() => IGearTriadItem),
+  ) => IGearTriadRegistration;
+  readonly registerContents: () => void;
+  readonly items: ComputedRef<
+    readonly [
+      IResolvedGearTriadItem,
+      IResolvedGearTriadItem,
+      IResolvedGearTriadItem,
+    ]
+  >;
+}
+
+export interface IGearTriadCalloutContext {
+  readonly item: ComputedRef<IResolvedGearTriadItem>;
+  readonly index: number;
+}
+
+export interface IGearTriadContentsContext {
+  readonly activeItem: ComputedRef<IResolvedGearTriadItem>;
+  readonly activeOptionIndex: ComputedRef<number>;
+  readonly registerContent: (option?: number) => { index: number };
+}
+
+export const GEAR_TRIAD_ROOT_KEY: InjectionKey<IGearTriadRootContext> = Symbol(
+  'GEAR_TRIAD_ROOT_KEY',
+);
+
+export const GEAR_TRIAD_CALLOUT_KEY: InjectionKey<IGearTriadCalloutContext> =
+  Symbol('GEAR_TRIAD_CALLOUT_KEY');
+
+export const GEAR_TRIAD_CONTENTS_KEY: InjectionKey<IGearTriadContentsContext> =
+  Symbol('GEAR_TRIAD_CONTENTS_KEY');

package/utils/gearTriad/createGearTriadGeometry.ts

@@ -0,0 +1,210 @@
+export interface IGearTriadPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IGearTriadPetalGeometry {
+  readonly facePath: string;
+  readonly valleyPath: string;
+  readonly leftFoldPath: string;
+  readonly rightFoldPath: string;
+  readonly iconPosition: IGearTriadPoint;
+}
+
+export interface IGearTriadSectorGeometry extends IGearTriadPetalGeometry {}
+
+export interface IGearTriadGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly centerX: number;
+  readonly centerY: number;
+  readonly hubRadius: number;
+  readonly baseGearPath: string;
+  readonly valleyPath: string;
+  /**
+   * One canonical petal geometry (facing South, 270 deg).
+   * Reused for all 3 sectors via 0 deg (Pink), 120 deg (Cyan), and 240 deg (Orange).
+   */
+  readonly petal: IGearTriadPetalGeometry;
+  readonly cyanSector: IGearTriadSectorGeometry;
+  readonly orangeSector: IGearTriadSectorGeometry;
+  readonly pinkSector: IGearTriadSectorGeometry;
+}
+
+/**
+ * Polar to Cartesian conversion in SVG screen space:
+ * - 0 deg = East (3 o'clock)
+ * - 90 deg = North (12 o'clock, straight UP)
+ * - 180 deg = West (9 o'clock)
+ * - 270 deg = South (6 o'clock, straight DOWN)
+ */
+function polarToCartesian(
+  cx: number,
+  cy: number,
+  radius: number,
+  angleInDegrees: number,
+): IGearTriadPoint {
+  const radians = (angleInDegrees * Math.PI) / 180;
+
+  return {
+    x: Number((cx + radius * Math.cos(radians)).toFixed(2)),
+    y: Number((cy - radius * Math.sin(radians)).toFixed(2)),
+  };
+}
+
+function rotatePoint(
+  p: IGearTriadPoint,
+  cx: number,
+  cy: number,
+  degrees: number,
+): IGearTriadPoint {
+  const rad = (degrees * Math.PI) / 180;
+  const dx = p.x - cx;
+  const dy = p.y - cy;
+
+  return {
+    x: Number((dx * Math.cos(rad) - dy * Math.sin(rad) + cx).toFixed(2)),
+    y: Number((dx * Math.sin(rad) + dy * Math.cos(rad) + cy).toFixed(2)),
+  };
+}
+
+export function createGearTriadGeometry(): IGearTriadGeometry {
+  const viewBoxWidth = 540;
+  const viewBoxHeight = 480;
+  const centerX = 270;
+  const centerY = 220;
+  const rOut = 180;
+  const rNotch = 128;
+  const hubRadius = 54;
+
+  // Base 6-tooth gear with rounded valleys (6 teeth at 0, 60, 120, 180, 240, 300 deg)
+  const toothCenters = [0, 60, 120, 180, 240, 300];
+  let baseGearPath = '';
+  for (let i = 0; i < toothCenters.length; i++) {
+    const th = toothCenters[i] ?? 0;
+    const p1 = polarToCartesian(centerX, centerY, rOut, th - 10);
+    const p2 = polarToCartesian(centerX, centerY, rOut, th + 10);
+    const p3 = polarToCartesian(centerX, centerY, rNotch, th + 20);
+    const p4 = polarToCartesian(centerX, centerY, rNotch, th + 40);
+    if (i === 0) {
+      baseGearPath += `M ${p1.x} ${p1.y}`;
+    } else {
+      baseGearPath += ` L ${p1.x} ${p1.y}`;
+    }
+    baseGearPath += ` L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} A ${rNotch} ${rNotch} 0 0 0 ${p4.x} ${p4.y}`;
+  }
+  baseGearPath += ' Z';
+
+  // ONE CANONICAL PETAL SHAPE (pointing South / 270 deg):
+  // Reused across all 3 sectors via 0 deg (Pink), 120 deg (Cyan), and 240 deg (Orange)
+  const p0 = polarToCartesian(centerX, centerY, hubRadius, 230);
+  const p1 = polarToCartesian(centerX, centerY, rOut, 230);
+  const p2 = polarToCartesian(centerX, centerY, rOut, 250);
+  const p3a = polarToCartesian(centerX, centerY, rNotch, 260);
+  const p3b = polarToCartesian(centerX, centerY, rNotch, 280);
+  const p4 = polarToCartesian(centerX, centerY, rOut, 290);
+  const p5 = polarToCartesian(centerX, centerY, rOut, 310);
+  const p6 = polarToCartesian(centerX, centerY, hubRadius, 310);
+
+  const petalFacePath = [
+    `M ${p0.x} ${p0.y}`,
+    `L ${p1.x} ${p1.y}`,
+    `L ${p2.x} ${p2.y}`,
+    `L ${p3a.x} ${p3a.y}`,
+    `A ${rNotch} ${rNotch} 0 0 0 ${p3b.x} ${p3b.y}`,
+    `L ${p4.x} ${p4.y}`,
+    `L ${p5.x} ${p5.y}`,
+    `L ${p6.x} ${p6.y}`,
+    `A ${hubRadius} ${hubRadius} 0 0 1 ${p0.x} ${p0.y}`,
+    'Z',
+  ].join(' ');
+
+  // The unified canonical shape between the colored petals (centered at 210 deg):
+  // Reused across all 3 inter-sector positions via 0 deg, 120 deg, and 240 deg rotations.
+  const pvFlankPink = polarToCartesian(centerX, centerY, rOut, 230);
+  const pvNotchPink = polarToCartesian(centerX, centerY, rNotch, 220);
+  const pvNotchCyan = polarToCartesian(centerX, centerY, rNotch, 200);
+  const pvFlankCyan = polarToCartesian(centerX, centerY, rOut, 190);
+  const pvHubCyan = polarToCartesian(centerX, centerY, hubRadius, 190);
+  const pvHubPink = polarToCartesian(centerX, centerY, hubRadius, 230);
+
+  const valleyPath = [
+    `M ${pvFlankPink.x} ${pvFlankPink.y}`,
+    `L ${pvNotchPink.x} ${pvNotchPink.y}`,
+    `A ${rNotch} ${rNotch} 0 0 1 ${pvNotchCyan.x} ${pvNotchCyan.y}`,
+    `L ${pvFlankCyan.x} ${pvFlankCyan.y}`,
+    `L ${pvHubCyan.x} ${pvHubCyan.y}`,
+    `A ${hubRadius} ${hubRadius} 0 0 0 ${pvHubPink.x} ${pvHubPink.y}`,
+    'Z',
+  ].join(' ');
+
+  // Legacy fold paths maintained for backwards compatibility
+  const pValley220 = polarToCartesian(centerX, centerY, rNotch, 220);
+  const pValley210 = polarToCartesian(centerX, centerY, rNotch, 210);
+  const pHub210 = polarToCartesian(centerX, centerY, hubRadius, 210);
+
+  const leftFoldPath = [
+    `M ${p1.x} ${p1.y}`,
+    `L ${pValley220.x} ${pValley220.y}`,
+    `A ${rNotch} ${rNotch} 0 0 0 ${pValley210.x} ${pValley210.y}`,
+    `L ${pHub210.x} ${pHub210.y}`,
+    `A ${hubRadius} ${hubRadius} 0 0 1 ${p0.x} ${p0.y}`,
+    'Z',
+  ].join(' ');
+
+  const pValley320 = polarToCartesian(centerX, centerY, rNotch, 320);
+  const pValley330 = polarToCartesian(centerX, centerY, rNotch, 330);
+  const pHub330 = polarToCartesian(centerX, centerY, hubRadius, 330);
+
+  const rightFoldPath = [
+    `M ${p5.x} ${p5.y}`,
+    `L ${pValley320.x} ${pValley320.y}`,
+    `A ${rNotch} ${rNotch} 0 0 1 ${pValley330.x} ${pValley330.y}`,
+    `L ${pHub330.x} ${pHub330.y}`,
+    `A ${hubRadius} ${hubRadius} 0 0 0 ${p6.x} ${p6.y}`,
+    'Z',
+  ].join(' ');
+
+  const canonicalIconPos = polarToCartesian(centerX, centerY, 105, 270);
+
+  const canonicalPetal: IGearTriadPetalGeometry = {
+    facePath: petalFacePath,
+    valleyPath,
+    leftFoldPath,
+    rightFoldPath,
+    iconPosition: canonicalIconPos,
+  };
+
+  // The 3 sectors reuse the canonical petal rotated by 120 deg intervals:
+  // - Pink (Option 3, Bottom): rotation 0 deg
+  // - Cyan (Option 1, Top-Left): rotation 120 deg
+  // - Orange (Option 2, Top-Right): rotation 240 deg
+  const pinkSector: IGearTriadSectorGeometry = {
+    ...canonicalPetal,
+    iconPosition: canonicalIconPos,
+  };
+
+  const cyanSector: IGearTriadSectorGeometry = {
+    ...canonicalPetal,
+    iconPosition: rotatePoint(canonicalIconPos, centerX, centerY, 120),
+  };
+
+  const orangeSector: IGearTriadSectorGeometry = {
+    ...canonicalPetal,
+    iconPosition: rotatePoint(canonicalIconPos, centerX, centerY, 240),
+  };
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    centerX,
+    centerY,
+    hubRadius,
+    baseGearPath,
+    valleyPath,
+    petal: canonicalPetal,
+    cyanSector,
+    orangeSector,
+    pinkSector,
+  };
+}

package/utils/gearTriad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createGearTriadGeometry';
+export * from './resolveGearTriadItems';

package/utils/gearTriad/resolveGearTriadItems.ts

@@ -0,0 +1,159 @@
+export type TGearTriadIcon =
+  | 'document'
+  | 'file'
+  | 'file-text'
+  | 'shield'
+  | 'shield-star'
+  | 'archive'
+  | 'box'
+  | 'package'
+  | 'gear'
+  | 'settings'
+  | string
+  | object
+  | false;
+
+export interface IGearTriadItem {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly depthColor?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly icon?: TGearTriadIcon;
+  readonly cardBg?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+}
+
+export interface IResolvedGearTriadItem {
+  readonly id: string | number;
+  readonly color: string;
+  readonly depthColor: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: TGearTriadIcon;
+  readonly cardBg?: string;
+  readonly textColor: string;
+  readonly titleColor: string;
+}
+
+const DEFAULT_LOREM =
+  'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.';
+
+const defaultItem0: IResolvedGearTriadItem = {
+  id: '01',
+  color: '#1fb5b5',
+  depthColor: '#126e7a',
+  title: 'Option 1',
+  description: DEFAULT_LOREM,
+  icon: undefined,
+  cardBg: undefined,
+  textColor: '#64748b',
+  titleColor: '#0f172a',
+};
+
+const defaultItem1: IResolvedGearTriadItem = {
+  id: '02',
+  color: '#f38942',
+  depthColor: '#aa521d',
+  title: 'Option 2',
+  description: DEFAULT_LOREM,
+  icon: undefined,
+  cardBg: undefined,
+  textColor: '#64748b',
+  titleColor: '#0f172a',
+};
+
+const defaultItem2: IResolvedGearTriadItem = {
+  id: '03',
+  color: '#f05367',
+  depthColor: '#a82c3c',
+  title: 'Option 3',
+  description: DEFAULT_LOREM,
+  icon: undefined,
+  cardBg: undefined,
+  textColor: '#64748b',
+  titleColor: '#0f172a',
+};
+
+export const DEFAULT_GEAR_TRIAD_ITEMS: readonly [
+  IResolvedGearTriadItem,
+  IResolvedGearTriadItem,
+  IResolvedGearTriadItem,
+] = [defaultItem0, defaultItem1, defaultItem2];
+
+export const GEAR_TRIAD_BASE_COLOR = '#11455c';
+
+export function getDefaultGearTriadItem(index: number): IResolvedGearTriadItem {
+  const safe = Math.abs(index) % 3;
+
+  if (safe === 1) {
+    return defaultItem1;
+  }
+
+  if (safe === 2) {
+    return defaultItem2;
+  }
+
+  return defaultItem0;
+}
+
+export function resolveSingleGearTriadItem(
+  item: IGearTriadItem | undefined,
+  fallbackIndex = 0,
+): IResolvedGearTriadItem {
+  const fallback = getDefaultGearTriadItem(fallbackIndex);
+
+  if (!item) {
+    return fallback;
+  }
+
+  return {
+    id: item.id ?? fallback.id,
+    color: item.color ?? fallback.color,
+    depthColor: item.depthColor ?? fallback.depthColor,
+    title: item.title ?? fallback.title,
+    description: item.description ?? fallback.description,
+    icon: item.icon !== undefined ? item.icon : fallback.icon,
+    cardBg: item.cardBg !== undefined ? item.cardBg : fallback.cardBg,
+    textColor: item.textColor ?? fallback.textColor,
+    titleColor: item.titleColor ?? fallback.titleColor,
+  };
+}
+
+export function resolveGearTriadItems(
+  items?: readonly IGearTriadItem[],
+  icons?: readonly (TGearTriadIcon | undefined)[],
+): readonly [
+  IResolvedGearTriadItem,
+  IResolvedGearTriadItem,
+  IResolvedGearTriadItem,
+] {
+  const item0 = items?.[0];
+  const item1 = items?.[1];
+  const item2 = items?.[2];
+
+  const merged0 = item0
+    ? { icon: item0.icon ?? icons?.[0], ...item0 }
+    : icons?.[0] !== undefined
+      ? { icon: icons[0] }
+      : undefined;
+
+  const merged1 = item1
+    ? { icon: item1.icon ?? icons?.[1], ...item1 }
+    : icons?.[1] !== undefined
+      ? { icon: icons[1] }
+      : undefined;
+
+  const merged2 = item2
+    ? { icon: item2.icon ?? icons?.[2], ...item2 }
+    : icons?.[2] !== undefined
+      ? { icon: icons[2] }
+      : undefined;
+
+  return [
+    resolveSingleGearTriadItem(merged0, 0),
+    resolveSingleGearTriadItem(merged1, 1),
+    resolveSingleGearTriadItem(merged2, 2),
+  ];
+}

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,
+  };
+}