@alphacifer/slidev-addon-theme 0.0.6 → 0.0.8

package/components/facets/triad/gear-triad/GearTriadIcon.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
+import type { TGearTriadIcon } from '../../../../utils/gearTriad';
+
+defineOptions({
+  name: 'GearTriadIcon',
+});
+
+export interface IGearTriadIconProps {
+  readonly size?: number;
+  readonly color?: string;
+  readonly strokeWidth?: number;
+  readonly icon?: TGearTriadIcon;
+}
+
+const props = withDefaults(defineProps<IGearTriadIconProps>(), {
+  size: 32,
+  color: '#0f172a',
+  strokeWidth: 2,
+  icon: undefined,
+});
+
+const slots = useSlots();
+
+const shouldRender = computed((): boolean => {
+  if (props.icon === false) {
+    return false;
+  }
+  return Boolean(props.icon || slots.default);
+});
+
+const isStringIcon = computed((): boolean => {
+  return typeof props.icon === 'string';
+});
+
+const isComponentIcon = computed((): boolean => {
+  return typeof props.icon === 'object' && props.icon !== null;
+});
+</script>
+
+<template>
+  <div
+    v-if="shouldRender"
+    class="alpha-gear-triad-icon flex items-center justify-center pointer-events-none select-none"
+    :style="{
+      color: props.color,
+      width: `${props.size}px`,
+      height: `${props.size}px`,
+    }"
+  >
+    <slot>
+      <!-- Custom Vue Component -->
+      <component
+        :is="props.icon"
+        v-if="isComponentIcon"
+        class="w-full h-full"
+        :style="{ color: props.color }"
+      />
+
+      <!-- UnoCSS / Iconify class name (e.g. i-lucide-file-text) -->
+      <span
+        v-else-if="isStringIcon && (props.icon as string).includes('-')"
+        :class="props.icon"
+        class="inline-block"
+        :style="{
+          color: props.color,
+          width: `${props.size}px`,
+          height: `${props.size}px`,
+          fontSize: `${props.size}px`,
+        }"
+      />
+
+      <!-- 01 Document with folded corner and lines (Option 1) -->
+      <svg
+        v-else-if="
+          props.icon === 'document' ||
+          props.icon === 'file' ||
+          props.icon === 'file-text'
+        "
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="props.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-full h-full"
+      >
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+        <polyline points="14 2 14 8 20 8" />
+        <line x1="16" y1="13" x2="8" y2="13" />
+        <line x1="16" y1="17" x2="8" y2="17" />
+        <line x1="10" y1="9" x2="8" y2="9" />
+      </svg>
+
+      <!-- 02 Shield with star (Option 2) -->
+      <svg
+        v-else-if="props.icon === 'shield' || props.icon === 'shield-star'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="props.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-full h-full"
+      >
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        <polygon
+          points="12 8 13.3 11 16.5 11.3 14 13.5 14.8 16.7 12 15 9.2 16.7 10 13.5 7.5 11.3 10.7 11"
+          stroke-width="1.5"
+        />
+      </svg>
+
+      <!-- 03 Archive box with files poking out (Option 3) -->
+      <svg
+        v-else-if="
+          props.icon === 'archive' ||
+          props.icon === 'box' ||
+          props.icon === 'package'
+        "
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="props.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-full h-full"
+      >
+        <!-- Box body -->
+        <path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+        <!-- Lid rim -->
+        <rect x="2" y="7" width="20" height="4" rx="1" />
+        <!-- Center handle slot -->
+        <line x1="10" y1="15" x2="14" y2="15" />
+        <!-- Folders / papers peeking out top -->
+        <path d="M7 7V4a1 1 0 0 1 1-1h4l2 2h3a1 1 0 0 1 1 1v1" stroke-width="1.5" />
+      </svg>
+
+      <!-- 04 Center Gear with 6 teeth and 3-spoke inner steering (Center Hub) -->
+      <svg
+        v-else-if="props.icon === 'gear' || props.icon === 'settings' || props.icon === 'cog'"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="props.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-full h-full"
+      >
+        <circle cx="12" cy="12" r="3" />
+        <path
+          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+        />
+      </svg>
+    </slot>
+  </div>
+</template>

package/components/{hex-triad → facets/triad/hex-triad}/HexTriad.vue

@@ -14,8 +14,8 @@ import {
   HEX_TRIAD_ROOT_KEY,
   type IHexTriadItem,
   resolveHexTriadItems,
-} from '../../utils/hexTriad';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+} from '../../../../utils/hexTriad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   inheritAttrs: false,

package/components/{hex-triad → facets/triad/hex-triad}/HexTriadBadge.vue

@@ -4,7 +4,7 @@ import { computed, inject, useSlots, watchEffect } from 'vue';
 import {
   createRoundedHexagonPath,
   HEX_TRIAD_CALLOUT_KEY,
-} from '../../utils/hexTriad';
+} from '../../../../utils/hexTriad';
 
 defineOptions({
   name: 'HexTriadBadge',

package/components/{hex-triad → facets/triad/hex-triad}/HexTriadCallout.vue

@@ -6,7 +6,7 @@ import {
   HEX_TRIAD_CALLOUT_KEY,
   HEX_TRIAD_ROOT_KEY,
   type IHexTriadItem,
-} from '../../utils/hexTriad';
+} from '../../../../utils/hexTriad';
 import HexTriadBadge from './HexTriadBadge.vue';
 import HexTriadContent from './HexTriadContent.vue';
 import HexTriadHeading from './HexTriadHeading.vue';

package/components/{hex-triad → facets/triad/hex-triad}/HexTriadHeading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { HEX_TRIAD_CALLOUT_KEY } from '../../utils/hexTriad';
+import { HEX_TRIAD_CALLOUT_KEY } from '../../../../utils/hexTriad';
 
 defineOptions({
   name: 'HexTriadHeading',

package/components/{arc-arrow-process → process/arc-arrow-process}/ArcArrowProcess.vue

@@ -19,8 +19,8 @@ import {
   type IArcArrowProcessRegistration,
   type IResolvedArcArrowProcessItem,
   resolveArcArrowProcessItems,
-} from '../../utils/arcArrowProcess';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+} from '../../../utils/arcArrowProcess';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcArrowProcessArrow from './ArcArrowProcessArrow.vue';
 import ArcArrowProcessCallout from './ArcArrowProcessCallout.vue';
 

package/components/{arc-arrow-process → process/arc-arrow-process}/ArcArrowProcessArrow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { DEFAULT_ARC_ARROW_PATH } from '../../utils/arcArrowProcess';
+import { DEFAULT_ARC_ARROW_PATH } from '../../../utils/arcArrowProcess';
 
 defineOptions({
   name: 'ArcArrowProcessArrow',

package/components/{arc-arrow-process → process/arc-arrow-process}/ArcArrowProcessCallout.vue

@@ -17,7 +17,7 @@ import {
   type IArcArrowProcessItem,
   type IResolvedArcArrowProcessItem,
   resolveSingleArcArrowProcessItem,
-} from '../../utils/arcArrowProcess';
+} from '../../../utils/arcArrowProcess';
 import ArcArrowProcessContent from './ArcArrowProcessContent.vue';
 import ArcArrowProcessHeading from './ArcArrowProcessHeading.vue';
 import ArcArrowProcessIcon from './ArcArrowProcessIcon.vue';

package/components/{arc-arrow-process → process/arc-arrow-process}/ArcArrowProcessContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../utils/arcArrowProcess';
+import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/arcArrowProcess';
 
 defineOptions({
   name: 'ArcArrowProcessContent',

package/components/{arc-arrow-process → process/arc-arrow-process}/ArcArrowProcessHeading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../utils/arcArrowProcess';
+import { ARC_ARROW_PROCESS_CALLOUT_KEY } from '../../../utils/arcArrowProcess';
 
 defineOptions({
   name: 'ArcArrowProcessHeading',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alphacifer/slidev-addon-theme",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "All Slidev addons for Alpha presentations",
   "type": "module",
   "keywords": [

package/utils/arcComparison/context.ts

@@ -0,0 +1,40 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IArcComparisonGeometry } from './createArcComparisonGeometry';
+import type { IResolvedArcComparisonItem } from './resolveArcComparisonItems';
+
+export interface IArcComparisonRootContext {
+  readonly animation: ComputedRef<boolean>;
+  readonly startDelay: ComputedRef<number>;
+  readonly pointsCount: ComputedRef<number>;
+  readonly geo: ComputedRef<IArcComparisonGeometry>;
+  readonly as?: ComputedRef<'layout' | null | undefined>;
+  readonly isMoved?: ComputedRef<boolean>;
+  readonly edgeOffset?: ComputedRef<number>;
+}
+
+export interface IArcComparisonSideContext {
+  readonly side: 'left' | 'right';
+  readonly color: ComputedRef<string>;
+  readonly title: ComputedRef<string>;
+  readonly setTitle: (title: string) => void;
+  readonly registerCallout: (id?: symbol) => number | ComputedRef<number>;
+  readonly unregisterCallout?: (id: symbol) => void;
+  readonly count: ComputedRef<number>;
+}
+
+export interface IArcComparisonCalloutContext {
+  readonly side: 'left' | 'right';
+  readonly index: number;
+  readonly color: ComputedRef<string>;
+  readonly item: ComputedRef<IResolvedArcComparisonItem>;
+}
+
+export const ARC_COMPARISON_ROOT_KEY: InjectionKey<IArcComparisonRootContext> =
+  Symbol('ARC_COMPARISON_ROOT_KEY');
+
+export const ARC_COMPARISON_SIDE_KEY: InjectionKey<IArcComparisonSideContext> =
+  Symbol('ARC_COMPARISON_SIDE_KEY');
+
+export const ARC_COMPARISON_CALLOUT_KEY: InjectionKey<IArcComparisonCalloutContext> =
+  Symbol('ARC_COMPARISON_CALLOUT_KEY');

package/utils/arcComparison/createArcComparisonGeometry.ts

@@ -0,0 +1,175 @@
+import { createArcOrbitGeometry } from '../arcOrbit';
+
+export interface IArcComparisonPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IArcComparisonNodeGeo {
+  readonly index: number;
+  readonly center: IArcComparisonPoint;
+  readonly radius: number;
+}
+
+export interface IArcComparisonCalloutBox {
+  readonly index: number;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly badgeOffset: number;
+  readonly top: number;
+  readonly textGap?: number;
+  readonly textWidth?: number;
+}
+
+export interface IArcComparisonSideGeometry {
+  readonly hubPath: string;
+  readonly otherHubPath?: string;
+  readonly hubCenter: IArcComparisonPoint;
+  readonly hubRadius: number;
+  readonly arcPath: string;
+  readonly topDot: IArcComparisonPoint;
+  readonly bottomDot: IArcComparisonPoint;
+  readonly dotRadius: number;
+  readonly nodes: readonly IArcComparisonNodeGeo[];
+  readonly callouts: readonly IArcComparisonCalloutBox[];
+}
+
+export interface IArcComparisonGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly centerX: number;
+  readonly centerY: number;
+  readonly vsCenter: IArcComparisonPoint;
+  readonly vsRadius: number;
+  readonly pointsCount: number;
+  readonly dividerLine: {
+    readonly x: number;
+    readonly y1: number;
+    readonly y2: number;
+  };
+  readonly left: IArcComparisonSideGeometry;
+  readonly right: IArcComparisonSideGeometry;
+}
+
+export interface ICreateArcComparisonGeometryOptions {
+  readonly viewBoxWidth?: number;
+  readonly viewBoxHeight?: number;
+  readonly hubRadius?: number;
+  readonly arcRadius?: number;
+  readonly arcOffset?: number;
+  readonly nodeRadius?: number;
+  readonly nodeAngleDeg?: number;
+  readonly arcExtentDeg?: number;
+  readonly vsRadius?: number;
+  readonly pointsCount?: number;
+  readonly isLayout?: boolean;
+}
+
+export function createArcComparisonGeometry(
+  options: ICreateArcComparisonGeometryOptions = {},
+): IArcComparisonGeometry {
+  const viewBoxWidth = options.viewBoxWidth ?? 1000;
+  const viewBoxHeight = options.viewBoxHeight ?? 480;
+  const hubRadius = options.hubRadius ?? 135;
+  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 isLayout = options.isLayout ?? false;
+
+  const centerX = viewBoxWidth / 2;
+  const centerY = viewBoxHeight / 2;
+
+  const leftOrbit = createArcOrbitGeometry({
+    viewBoxWidth,
+    viewBoxHeight,
+    position: 'left',
+    hubRadius,
+    arcRadius,
+    arcOffset,
+    nodeRadius,
+    nodeAngleDeg: options.nodeAngleDeg,
+    arcExtentDeg: options.arcExtentDeg,
+    pointsCount,
+  });
+
+  const rightOrbit = createArcOrbitGeometry({
+    viewBoxWidth,
+    viewBoxHeight,
+    position: 'right',
+    hubRadius,
+    arcRadius,
+    arcOffset,
+    nodeRadius,
+    nodeAngleDeg: options.nodeAngleDeg,
+    arcExtentDeg: options.arcExtentDeg,
+    pointsCount,
+  });
+
+  const leftHubPath = isLayout
+    ? `M ${centerX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 0 ${centerX} ${centerY + hubRadius} Z`
+    : leftOrbit.hubPath;
+
+  const leftOtherHubPath = isLayout
+    ? `M ${centerX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${centerX} ${centerY + hubRadius} Z`
+    : undefined;
+
+  const rightHubPath = isLayout
+    ? `M ${centerX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 1 ${centerX} ${centerY + hubRadius} Z`
+    : rightOrbit.hubPath;
+
+  const rightOtherHubPath = isLayout
+    ? `M ${centerX} ${centerY - hubRadius} A ${hubRadius} ${hubRadius} 0 0 0 ${centerX} ${centerY + hubRadius} Z`
+    : undefined;
+
+  return {
+    viewBoxWidth,
+    viewBoxHeight,
+    centerX,
+    centerY,
+    vsCenter: {
+      x: centerX,
+      y: centerY,
+    },
+    vsRadius,
+    pointsCount,
+    dividerLine: {
+      x: centerX,
+      y1: 20,
+      y2: viewBoxHeight - 20,
+    },
+    left: {
+      hubPath: leftHubPath,
+      otherHubPath: leftOtherHubPath,
+      hubCenter: {
+        x: isLayout ? centerX - 55 : 55,
+        y: centerY,
+      },
+      hubRadius,
+      arcPath: leftOrbit.arcPath,
+      topDot: leftOrbit.topDot,
+      bottomDot: leftOrbit.bottomDot,
+      dotRadius,
+      nodes: leftOrbit.nodes,
+      callouts: leftOrbit.callouts,
+    },
+    right: {
+      hubPath: rightHubPath,
+      otherHubPath: rightOtherHubPath,
+      hubCenter: {
+        x: isLayout ? centerX + 55 : viewBoxWidth - 55,
+        y: centerY,
+      },
+      hubRadius,
+      arcPath: rightOrbit.arcPath,
+      topDot: rightOrbit.topDot,
+      bottomDot: rightOrbit.bottomDot,
+      dotRadius,
+      nodes: rightOrbit.nodes,
+      callouts: rightOrbit.callouts,
+    },
+  };
+}

package/utils/arcComparison/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArcComparisonGeometry';
+export * from './resolveArcComparisonItems';

package/utils/{arcCompare/resolveArcCompareItems.ts → arcComparison/resolveArcComparisonItems.ts}

@@ -1,4 +1,9 @@
-export interface IArcCompareItem {
+import {
+  resolveArcOrbitItems,
+  DEFAULT_LOREM_TEXT as SHARED_LOREM_TEXT,
+} from '../arcOrbit';
+
+export interface IArcComparisonItem {
   readonly id?: string | number;
   readonly title?: string;
   readonly description?: string;
@@ -6,7 +11,7 @@ export interface IArcCompareItem {
   readonly textColor?: string;
 }
 
-export interface IResolvedArcCompareItem {
+export interface IResolvedArcComparisonItem {
   readonly id: string | number;
   readonly title: string;
   readonly description: string;
@@ -18,14 +23,13 @@ export const DEFAULT_LEFT_COLOR = '#e87a36';
 
 export const DEFAULT_RIGHT_COLOR = '#208b9e';
 
-export const DEFAULT_LOREM_TEXT =
-  'Lorem ipsum dolor sit amet, constitutor adipiscing elit. Nam vulputate augue vel ligula.';
+export const DEFAULT_LOREM_TEXT = SHARED_LOREM_TEXT;
 
 export const DEFAULT_LEFT_ITEMS: readonly [
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
 ] = [
   {
     id: '01',
@@ -54,10 +58,10 @@ export const DEFAULT_LEFT_ITEMS: readonly [
 ];
 
 export const DEFAULT_RIGHT_ITEMS: readonly [
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
-  IResolvedArcCompareItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
+  IResolvedArcComparisonItem,
 ] = [
   {
     id: '01',
@@ -85,39 +89,14 @@ export const DEFAULT_RIGHT_ITEMS: readonly [
   },
 ];
 
-export function resolveArcCompareSideItems(
-  items?: readonly IArcCompareItem[],
+export function resolveArcComparisonSideItems(
+  items?: readonly IArcComparisonItem[],
   defaultColor = DEFAULT_LEFT_COLOR,
   count = 3,
-): readonly IResolvedArcCompareItem[] {
-  const result: IResolvedArcCompareItem[] = [];
-
-  for (let i = 0; i < count; i++) {
-    const custom = items?.[i];
-    const defaultItem =
-      defaultColor === DEFAULT_RIGHT_COLOR
-        ? DEFAULT_RIGHT_ITEMS[i]
-        : DEFAULT_LEFT_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;
+): readonly IResolvedArcComparisonItem[] {
+  return resolveArcOrbitItems({
+    items,
+    defaultColor,
+    count,
+  });
 }

package/utils/arcOrbit/context.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type {
+  IArcOrbitGeometry,
+  TArcOrbitPosition,
+} from './createArcOrbitGeometry';
+import type {
+  IArcOrbitItem,
+  IResolvedArcOrbitItem,
+} from './resolveArcOrbitItems';
+
+export interface IArcOrbitRootContext {
+  readonly position: ComputedRef<TArcOrbitPosition>;
+  readonly color: ComputedRef<string>;
+  readonly pointsCount: ComputedRef<number>;
+  readonly geo: ComputedRef<IArcOrbitGeometry>;
+  readonly animation: ComputedRef<boolean>;
+  readonly startDelay: ComputedRef<number>;
+  readonly title: ComputedRef<string>;
+  readonly setTitle: (title: string) => void;
+  readonly registerCallout: (id?: symbol) => number | ComputedRef<number>;
+  readonly unregisterCallout?: (id: symbol) => void;
+  readonly edgeOffset?: ComputedRef<number>;
+  readonly items?: ComputedRef<readonly IArcOrbitItem[] | undefined>;
+}
+
+export interface IArcOrbitCalloutContext {
+  readonly position: TArcOrbitPosition;
+  readonly index: number;
+  readonly color: ComputedRef<string>;
+  readonly item: ComputedRef<IResolvedArcOrbitItem>;
+}
+
+export const ARC_ORBIT_ROOT_KEY: InjectionKey<IArcOrbitRootContext> =
+  Symbol('ARC_ORBIT_ROOT_KEY');
+
+export const ARC_ORBIT_CALLOUT_KEY: InjectionKey<IArcOrbitCalloutContext> =
+  Symbol('ARC_ORBIT_CALLOUT_KEY');