@alphacifer/slidev-addon-theme 0.0.7 → 0.0.8

package/utils/{arcCompare/createArcCompareGeometry.ts → arcOrbit/createArcOrbitGeometry.ts}

@@ -1,15 +1,17 @@
-export interface IArcComparePoint {
+export type TArcOrbitPosition = 'left' | 'right';
+
+export interface IArcOrbitPoint {
   readonly x: number;
   readonly y: number;
 }
 
-export interface IArcCompareNodeGeo {
+export interface IArcOrbitNodeGeo {
   readonly index: number;
-  readonly center: IArcComparePoint;
+  readonly center: IArcOrbitPoint;
   readonly radius: number;
 }
 
-export interface IArcCompareCalloutBox {
+export interface IArcOrbitCalloutBox {
   readonly index: number;
   readonly x: number;
   readonly y: number;
@@ -20,72 +22,58 @@ export interface IArcCompareCalloutBox {
   readonly textWidth?: number;
 }
 
-export interface IArcCompareSideGeometry {
-  readonly hubPath: string;
-  readonly hubCenter: IArcComparePoint;
+export interface IArcOrbitGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly position: TArcOrbitPosition;
+  readonly hubCenter: IArcOrbitPoint;
   readonly hubRadius: number;
+  readonly hubPath: string;
   readonly arcPath: string;
-  readonly topDot: IArcComparePoint;
-  readonly bottomDot: IArcComparePoint;
+  readonly topDot: IArcOrbitPoint;
+  readonly bottomDot: IArcOrbitPoint;
   readonly dotRadius: number;
-  readonly nodes: readonly IArcCompareNodeGeo[];
-  readonly callouts: readonly IArcCompareCalloutBox[];
-}
-
-export interface IArcCompareGeometry {
-  readonly viewBoxWidth: number;
-  readonly viewBoxHeight: number;
-  readonly centerX: number;
-  readonly centerY: number;
-  readonly vsCenter: IArcComparePoint;
-  readonly vsRadius: number;
+  readonly nodes: readonly IArcOrbitNodeGeo[];
+  readonly callouts: readonly IArcOrbitCalloutBox[];
   readonly pointsCount: number;
-  readonly dividerLine: {
-    readonly x: number;
-    readonly y1: number;
-    readonly y2: number;
-  };
-  readonly left: IArcCompareSideGeometry;
-  readonly right: IArcCompareSideGeometry;
 }
 
-export interface ICreateArcCompareGeometryOptions {
+export interface ICreateArcOrbitGeometryOptions {
   readonly viewBoxWidth?: number;
   readonly viewBoxHeight?: number;
+  readonly position?: TArcOrbitPosition;
   readonly hubRadius?: number;
+  readonly edgeOffset?: number;
   readonly arcRadius?: number;
   readonly arcOffset?: number;
   readonly nodeRadius?: number;
   readonly nodeAngleDeg?: number;
   readonly arcExtentDeg?: number;
-  readonly vsRadius?: number;
   readonly pointsCount?: number;
 }
 
-export function createArcCompareGeometry(
-  options: ICreateArcCompareGeometryOptions = {},
-): IArcCompareGeometry {
-  const viewBoxWidth = options.viewBoxWidth ?? 1000;
+export function createArcOrbitGeometry(
+  options: ICreateArcOrbitGeometryOptions = {},
+): IArcOrbitGeometry {
+  const viewBoxWidth = options.viewBoxWidth ?? 500;
   const viewBoxHeight = options.viewBoxHeight ?? 480;
+  const position: TArcOrbitPosition = options.position ?? 'left';
   const hubRadius = options.hubRadius ?? 135;
+  const edgeOffset = options.edgeOffset !== undefined ? options.edgeOffset : 30;
   const arcRadius = options.arcRadius ?? 235;
   const arcOffset = options.arcOffset ?? 25;
   const nodeRadius = options.nodeRadius ?? 26;
-  const vsRadius = options.vsRadius ?? 26;
   const dotRadius = 3.5;
   const pointsCount = options.pointsCount === 4 ? 4 : 3;
 
   const defaultArcExtent = pointsCount === 4 ? 66 : 58;
   const arcExtentDeg = options.arcExtentDeg ?? defaultArcExtent;
+  const extentRad = (arcExtentDeg * Math.PI) / 180;
 
-  const centerX = viewBoxWidth / 2;
   const centerY = viewBoxHeight / 2;
-  const leftArcCenterX = -arcOffset;
-
-  // Angular math for left side:
-  const extentRad = (arcExtentDeg * Math.PI) / 180;
 
-  // Left arc start (top) and end (bottom)
+  // Base left calculations (origin at x = 0)
+  const leftArcCenterX = -arcOffset;
   const leftStartCos = Math.cos(extentRad);
   const leftStartSin = Math.sin(extentRad);
   const leftTopX = Number(
@@ -95,25 +83,18 @@ export function createArcCompareGeometry(
   const leftBottomX = leftTopX;
   const leftBottomY = Number((centerY + arcRadius * leftStartSin).toFixed(2));
 
-  // Left arc path
-  const leftArcPath = `M ${leftTopX} ${leftTopY} A ${arcRadius} ${arcRadius} 0 0 1 ${leftBottomX} ${leftBottomY}`;
-
-  // Left hub path (semicircle centered at 0, centerY)
-  const leftHubPath = `M 0 ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 0 ${centerY + hubRadius} Z`;
-
   // Determine node angles for 3 or 4 points
   const nodeAnglesDeg: readonly number[] =
     pointsCount === 4
       ? [50, 16.5, -16.5, -50]
       : [options.nodeAngleDeg ?? 38, 0, -(options.nodeAngleDeg ?? 38)];
 
-  // Left nodes and callouts
-  const leftCalloutGap = 26;
-  const leftNodes: IArcCompareNodeGeo[] = [];
-  const leftCallouts: IArcCompareCalloutBox[] = [];
   const defaultTextGap = 28;
   const textWidth = pointsCount === 4 ? 215 : 205;
 
+  const leftNodes: IArcOrbitNodeGeo[] = [];
+  const leftCallouts: IArcOrbitCalloutBox[] = [];
+
   for (let i = 0; i < pointsCount; i++) {
     const angleDeg = nodeAnglesDeg[i] ?? 0;
     const angleRad = (angleDeg * Math.PI) / 180;
@@ -133,14 +114,12 @@ export function createArcCompareGeometry(
 
     const badgeOffset = Math.round(nodeX - nodeRadius);
     const top = Math.round(nodeY - nodeRadius);
-    // Only adjust position for 01 (index 0) so its text does not overlay the arc curve.
-    // 02, 03, and 04 keep their standard natural gap.
     const textGap = i === 0 ? (pointsCount === 4 ? 46 : 36) : defaultTextGap;
     const width = Math.round(nodeRadius * 2 + textGap + textWidth);
 
     leftCallouts.push({
       index: i,
-      x: nodeX + leftCalloutGap,
+      x: nodeX + 26,
       y: nodeY - 32,
       width,
       badgeOffset,
@@ -150,17 +129,46 @@ export function createArcCompareGeometry(
     });
   }
 
-  // Right side (symmetrical reflection across centerX)
+  if (position === 'left') {
+    const leftArcPath = `M ${leftTopX} ${leftTopY} A ${arcRadius} ${arcRadius} 0 0 1 ${leftBottomX} ${leftBottomY}`;
+    const leftHubCenterX = edgeOffset;
+    const leftHubPath =
+      edgeOffset > 0
+        ? `M ${leftHubCenterX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${leftHubCenterX} ${centerY + hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${leftHubCenterX} ${centerY - hubRadius} Z`
+        : `M 0 ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 0 ${centerY + hubRadius} Z`;
+
+    return {
+      viewBoxWidth,
+      viewBoxHeight,
+      position: 'left',
+      hubCenter: { x: leftHubCenterX, y: centerY },
+      hubRadius,
+      hubPath: leftHubPath,
+      arcPath: leftArcPath,
+      topDot: { x: leftTopX, y: leftTopY },
+      bottomDot: { x: leftBottomX, y: leftBottomY },
+      dotRadius,
+      nodes: leftNodes,
+      callouts: leftCallouts,
+      pointsCount,
+    };
+  }
+
+  // Right position: mirrored across viewBoxWidth
   const rightTopX = Number((viewBoxWidth - leftTopX).toFixed(2));
   const rightTopY = leftTopY;
   const rightBottomX = rightTopX;
   const rightBottomY = leftBottomY;
 
   const rightArcPath = `M ${rightTopX} ${rightTopY} A ${arcRadius} ${arcRadius} 0 0 0 ${rightBottomX} ${rightBottomY}`;
-  const rightHubPath = `M ${viewBoxWidth} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 0 ${viewBoxWidth} ${centerY + hubRadius} Z`;
+  const rightHubCenterX = viewBoxWidth - edgeOffset;
+  const rightHubPath =
+    edgeOffset > 0
+      ? `M ${rightHubCenterX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${rightHubCenterX} ${centerY + hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${rightHubCenterX} ${centerY - hubRadius} Z`
+      : `M ${viewBoxWidth} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 0 ${viewBoxWidth} ${centerY + hubRadius} Z`;
 
-  const rightNodes: IArcCompareNodeGeo[] = [];
-  const rightCallouts: IArcCompareCalloutBox[] = [];
+  const rightNodes: IArcOrbitNodeGeo[] = [];
+  const rightCallouts: IArcOrbitCalloutBox[] = [];
 
   for (let i = 0; i < pointsCount; i++) {
     const leftNode = leftNodes[i];
@@ -184,7 +192,7 @@ export function createArcCompareGeometry(
 
     rightCallouts.push({
       index: i,
-      x: centerX + 20,
+      x: rightNodeX - leftCallout.width,
       y: rightNodeY - 32,
       width: leftCallout.width,
       badgeOffset: leftCallout.badgeOffset,
@@ -197,58 +205,19 @@ export function createArcCompareGeometry(
   return {
     viewBoxWidth,
     viewBoxHeight,
-    centerX,
-    centerY,
-    vsCenter: {
-      x: centerX,
+    position: 'right',
+    hubCenter: {
+      x: rightHubCenterX,
       y: centerY,
     },
-    vsRadius,
+    hubRadius,
+    hubPath: rightHubPath,
+    arcPath: rightArcPath,
+    topDot: { x: rightTopX, y: rightTopY },
+    bottomDot: { x: rightBottomX, y: rightBottomY },
+    dotRadius,
+    nodes: rightNodes,
+    callouts: rightCallouts,
     pointsCount,
-    dividerLine: {
-      x: centerX,
-      y1: 20,
-      y2: viewBoxHeight - 20,
-    },
-    left: {
-      hubPath: leftHubPath,
-      hubCenter: {
-        x: 55,
-        y: centerY,
-      },
-      hubRadius,
-      arcPath: leftArcPath,
-      topDot: {
-        x: leftTopX,
-        y: leftTopY,
-      },
-      bottomDot: {
-        x: leftBottomX,
-        y: leftBottomY,
-      },
-      dotRadius,
-      nodes: leftNodes,
-      callouts: leftCallouts,
-    },
-    right: {
-      hubPath: rightHubPath,
-      hubCenter: {
-        x: viewBoxWidth - 55,
-        y: centerY,
-      },
-      hubRadius,
-      arcPath: rightArcPath,
-      topDot: {
-        x: rightTopX,
-        y: rightTopY,
-      },
-      bottomDot: {
-        x: rightBottomX,
-        y: rightBottomY,
-      },
-      dotRadius,
-      nodes: rightNodes,
-      callouts: rightCallouts,
-    },
   };
 }

package/utils/arcOrbit/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArcOrbitGeometry';
+export * from './resolveArcOrbitItems';

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