@alphacifer/slidev-addon-theme 0.0.6 → 0.0.8

package/components/{quad-hub/QuadHub.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetrad.vue}

@@ -16,37 +16,37 @@ import {
 } from 'vue';
 
 import {
-  calculateQuadHubCoordinates,
-  DEFAULT_QUAD_HUB_ITEMS,
-  type IQuadBox,
-  type IQuadHubItem,
-  type IQuadHubRegistration,
-  type IQuadPoint,
-  type IResolvedQuadHubItem,
-  QUAD_HUB_ROOT_KEY,
-  resolveQuadHubItems,
-} from '../../utils/quadHub';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-import QuadHubCallout from './QuadHubCallout.vue';
-import QuadHubCenter from './QuadHubCenter.vue';
-import QuadHubIcon from './QuadHubIcon.vue';
+  calculateRectOrbitTetradCoordinates,
+  DEFAULT_RECT_ORBIT_TETRAD_ITEMS,
+  type IRectOrbitBox,
+  type IRectOrbitPoint,
+  type IRectOrbitTetradItem,
+  type IRectOrbitTetradRegistration,
+  type IResolvedRectOrbitTetradItem,
+  RECT_ORBIT_TETRAD_ROOT_KEY,
+  resolveRectOrbitTetradItems,
+} from '../../../../utils/rectOrbitTetrad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+import RectOrbitTetradCallout from './RectOrbitTetradCallout.vue';
+import RectOrbitTetradCenter from './RectOrbitTetradCenter.vue';
+import RectOrbitTetradIcon from './RectOrbitTetradIcon.vue';
 
 defineOptions({
-  name: 'QuadHub',
+  name: 'RectOrbitTetrad',
   inheritAttrs: false,
 });
 
-export interface IQuadBlockData {
-  readonly box: IQuadBox;
+export interface IRectOrbitBlockData {
+  readonly box: IRectOrbitBox;
   readonly arcPath: string;
-  readonly iconPos: IQuadPoint;
-  readonly numberPos: IQuadPoint;
-  readonly item: IResolvedQuadHubItem;
+  readonly iconPos: IRectOrbitPoint;
+  readonly numberPos: IRectOrbitPoint;
+  readonly item: IResolvedRectOrbitTetradItem;
 }
 
-export interface IQuadHubProps {
+export interface IRectOrbitTetradProps {
   readonly title?: string;
-  readonly items?: readonly IQuadHubItem[];
+  readonly items?: readonly IRectOrbitTetradItem[];
   readonly active?: boolean;
   readonly height?: number | string;
   readonly arcRatio?: number;
@@ -59,7 +59,7 @@ export interface IQuadHubProps {
   readonly maxScale?: number;
 }
 
-const props = withDefaults(defineProps<IQuadHubProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradProps>(), {
   title: undefined,
   items: undefined,
   active: undefined,
@@ -150,31 +150,31 @@ const resolvedStartDelay = computed((): number => {
   return 0;
 });
 
-const registeredCallouts = shallowReactive<Map<number, IQuadHubItem>>(
+const registeredCallouts = shallowReactive<Map<number, IRectOrbitTetradItem>>(
   new Map(),
 );
 
 const resolvedItems = computed(
   (): readonly [
-    IResolvedQuadHubItem,
-    IResolvedQuadHubItem,
-    IResolvedQuadHubItem,
-    IResolvedQuadHubItem,
+    IResolvedRectOrbitTetradItem,
+    IResolvedRectOrbitTetradItem,
+    IResolvedRectOrbitTetradItem,
+    IResolvedRectOrbitTetradItem,
   ] => {
     const rawDefaultNodes = slots.default ? slots.default() : [];
     const flattenedNodes = flattenVNodes(rawDefaultNodes);
     const calloutNodes = flattenedNodes.filter((node) => {
       return (
-        hasComponentName(node.type, 'QuadHubCallout') ||
-        node.type === QuadHubCallout
+        hasComponentName(node.type, 'RectOrbitTetradCallout') ||
+        node.type === RectOrbitTetradCallout
       );
     });
 
-    const mergedItems: IQuadHubItem[] = [];
+    const mergedItems: IRectOrbitTetradItem[] = [];
 
     for (let i = 0; i < 4; i++) {
       const slotProps =
-        (calloutNodes[i]?.props as IQuadHubItem | undefined) ?? {};
+        (calloutNodes[i]?.props as IRectOrbitTetradItem | undefined) ?? {};
       const regProps = registeredCallouts.get(i) ?? {};
       const propItem = props.items?.[i] ?? {};
 
@@ -185,7 +185,7 @@ const resolvedItems = computed(
       });
     }
 
-    return resolveQuadHubItems({
+    return resolveRectOrbitTetradItems({
       items: mergedItems,
       arcRatio: props.arcRatio,
       arcBorderRatio: props.arcBorderRatio,
@@ -193,11 +193,13 @@ const resolvedItems = computed(
   },
 );
 
-const [firstFallbackItem] = DEFAULT_QUAD_HUB_ITEMS;
+const [firstFallbackItem] = DEFAULT_RECT_ORBIT_TETRAD_ITEMS;
 
 let calloutCounter = 0;
 
-const registerCallout = (calloutProps?: IQuadHubItem): IQuadHubRegistration => {
+const registerCallout = (
+  calloutProps?: IRectOrbitTetradItem,
+): IRectOrbitTetradRegistration => {
   const idx = calloutCounter++;
 
   if (calloutProps) {
@@ -206,7 +208,7 @@ const registerCallout = (calloutProps?: IQuadHubItem): IQuadHubRegistration => {
 
   return {
     index: idx,
-    item: computed((): IResolvedQuadHubItem => {
+    item: computed((): IResolvedRectOrbitTetradItem => {
       const current = resolvedItems.value[idx];
       return current ?? resolvedItems.value[0] ?? firstFallbackItem;
     }),
@@ -217,14 +219,14 @@ onBeforeUpdate(() => {
   calloutCounter = 0;
 });
 
-provide(QUAD_HUB_ROOT_KEY, {
+provide(RECT_ORBIT_TETRAD_ROOT_KEY, {
   items: resolvedItems,
   animation: isAnimated,
   registerCallout,
 });
 
 // Precision coordinates calculation for SVG elements
-const coords = calculateQuadHubCoordinates({
+const coords = calculateRectOrbitTetradCoordinates({
   gap: 14,
   width: 136,
   height: 150,
@@ -253,10 +255,10 @@ const {
 
 const quadrantBlocks = computed(
   (): readonly [
-    IQuadBlockData,
-    IQuadBlockData,
-    IQuadBlockData,
-    IQuadBlockData,
+    IRectOrbitBlockData,
+    IRectOrbitBlockData,
+    IRectOrbitBlockData,
+    IRectOrbitBlockData,
   ] => {
     const [i0, i1, i2, i3] = resolvedItems.value;
     return [
@@ -293,7 +295,7 @@ const quadrantBlocks = computed(
 );
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-quad-hub w-full flex-1 flex flex-col items-center justify-center select-none font-sans min-h-0',
+  'alpha-rect-orbit-tetrad w-full flex-1 flex flex-col items-center justify-center select-none font-sans min-h-0',
 );
 
 const rootRef = ref<HTMLElement | null>(null);
@@ -482,11 +484,11 @@ const resolvedScale = computed((): number => {
       height: resolvedHeightStyle,
       fontFamily:
         'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      '--quad-start-delay': `${resolvedStartDelay}ms`,
+      '--rect-orbit-start-delay': `${resolvedStartDelay}ms`,
     }"
   >
     <div
-      class="alpha-quad-hub__stage relative w-full h-full min-h-[350px] max-w-[1020px] mx-auto flex items-center justify-center overflow-visible"
+      class="alpha-rect-orbit-tetrad__stage relative w-full h-full min-h-[350px] max-w-[1020px] mx-auto flex items-center justify-center overflow-visible"
       :style="{
         transform: props.scale !== undefined ? `scale(${props.scale})` : undefined,
         transformOrigin: 'center center',
@@ -494,21 +496,21 @@ const resolvedScale = computed((): number => {
     >
       <!-- Center Diagram: 4 Colored Quadrants + Concentric Arcs -->
       <div
-        class="alpha-quad-hub__center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-[390px] h-[390px] z-10 pointer-events-none"
+        class="alpha-rect-orbit-tetrad__center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-[390px] h-[390px] z-10 pointer-events-none"
       >
         <svg
-          class="alpha-quad-hub__svg w-[390px] h-[390px] overflow-visible"
+          class="alpha-rect-orbit-tetrad__svg w-[390px] h-[390px] overflow-visible"
           :viewBox="`0 0 ${viewBoxSize} ${viewBoxSize}`"
         >
           <defs>
             <!-- Drop shadow for the quadrant blocks (unique per component instance) -->
-            <filter :id="`quad-block-shadow-${uid}`" x="-20%" y="-20%" width="140%" height="140%">
+            <filter :id="`rect-orbit-block-shadow-${uid}`" x="-20%" y="-20%" width="140%" height="140%">
               <feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.10" />
             </filter>
             <!-- Quadrant Clip Paths for Rounded Corner Squares (unique per instance) -->
             <clipPath
               v-for="(block, idx) in quadrantBlocks"
-              :id="`clip-quad-${uid}-${idx}`"
+              :id="`clip-rect-orbit-${uid}-${idx}`"
               :key="idx"
             >
               <rect
@@ -526,11 +528,11 @@ const resolvedScale = computed((): number => {
             v-for="(block, idx) in quadrantBlocks"
             :key="idx"
             :class="[
-              'alpha-quad-block',
-              `alpha-quad-block--${idx}`,
-              { 'alpha-quad-block--animated': isAnimated },
+              'alpha-rect-orbit-block',
+              `alpha-rect-orbit-block--${idx}`,
+              { 'alpha-rect-orbit-block--animated': isAnimated },
             ]"
-            :filter="`url(#quad-block-shadow-${uid})`"
+            :filter="`url(#rect-orbit-block-shadow-${uid})`"
           >
             <!-- Base solid colored rounded rectangle -->
             <rect
@@ -548,7 +550,7 @@ const resolvedScale = computed((): number => {
               :cy="centerY"
               :r="arcRadius"
               :fill="block.item.arcColor"
-              :clip-path="`url(#clip-quad-${uid}-${idx})`"
+              :clip-path="`url(#clip-rect-orbit-${uid}-${idx})`"
             />
             <!-- Floating Arc Separator Border (Touches pastel area without overlay) -->
             <path
@@ -572,14 +574,14 @@ const resolvedScale = computed((): number => {
           </g>
         </svg>
         <!-- HTML Icon Overlay Layer (ensures UnoCSS mask icons render reliably) -->
-        <div class="alpha-quad-hub__icons absolute top-0 left-0 w-[360px] h-[360px] pointer-events-none">
+        <div class="alpha-rect-orbit-tetrad__icons absolute top-0 left-0 w-[360px] h-[360px] pointer-events-none">
           <div
             v-for="(block, idx) in quadrantBlocks"
             :key="idx"
             :class="[
-              'alpha-quad-block',
-              `alpha-quad-block--${idx}`,
-              { 'alpha-quad-block--animated': isAnimated },
+              'alpha-rect-orbit-block',
+              `alpha-rect-orbit-block--${idx}`,
+              { 'alpha-rect-orbit-block--animated': isAnimated },
             ]"
             class="absolute flex items-center justify-center w-[34px] h-[34px]"
             :style="{
@@ -587,7 +589,7 @@ const resolvedScale = computed((): number => {
               left: `${block.iconPos.x - 17}px`,
             }"
           >
-            <QuadHubIcon
+            <RectOrbitTetradIcon
               v-if="block.item.icon !== false && block.item.icon !== undefined"
               :icon="block.item.icon"
               :size="34"
@@ -597,7 +599,7 @@ const resolvedScale = computed((): number => {
         </div>
         <!-- Central Circular Hub -->
         <slot name="hub">
-          <QuadHubCenter
+          <RectOrbitTetradCenter
             :title="props.title"
             :subtitle="props.subtitle"
             :radius="hubRadius"
@@ -611,23 +613,23 @@ const resolvedScale = computed((): number => {
 </template>
 
 <style scoped>
-.alpha-quad-block--animated.alpha-quad-block--0 {
-  animation: quad-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--quad-start-delay, 0ms) + 100ms) both;
+.alpha-rect-orbit-block--animated.alpha-rect-orbit-block--0 {
+  animation: rect-orbit-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--rect-orbit-start-delay, 0ms) + 100ms) both;
 }
 
-.alpha-quad-block--animated.alpha-quad-block--1 {
-  animation: quad-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--quad-start-delay, 0ms) + 200ms) both;
+.alpha-rect-orbit-block--animated.alpha-rect-orbit-block--1 {
+  animation: rect-orbit-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--rect-orbit-start-delay, 0ms) + 200ms) both;
 }
 
-.alpha-quad-block--animated.alpha-quad-block--2 {
-  animation: quad-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--quad-start-delay, 0ms) + 300ms) both;
+.alpha-rect-orbit-block--animated.alpha-rect-orbit-block--2 {
+  animation: rect-orbit-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--rect-orbit-start-delay, 0ms) + 300ms) both;
 }
 
-.alpha-quad-block--animated.alpha-quad-block--3 {
-  animation: quad-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--quad-start-delay, 0ms) + 400ms) both;
+.alpha-rect-orbit-block--animated.alpha-rect-orbit-block--3 {
+  animation: rect-orbit-block-pop 400ms cubic-bezier(0.2, 0.9, 0.4, 1) calc(var(--rect-orbit-start-delay, 0ms) + 400ms) both;
 }
 
-@keyframes quad-block-pop {
+@keyframes rect-orbit-block-pop {
   0% {
     opacity: 0;
     transform: scale(0.92);

package/components/{quad-hub/QuadHubCallout.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetradCallout.vue}

@@ -2,23 +2,23 @@
 import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
 
 import {
-  DEFAULT_QUAD_HUB_ITEMS,
-  type IResolvedQuadHubItem,
-  QUAD_HUB_CALLOUT_KEY,
-  QUAD_HUB_ROOT_KEY,
+  DEFAULT_RECT_ORBIT_TETRAD_ITEMS,
+  type IResolvedRectOrbitTetradItem,
+  RECT_ORBIT_TETRAD_CALLOUT_KEY,
+  RECT_ORBIT_TETRAD_ROOT_KEY,
   resolveSingleItem,
-  type TQuadHubIcon,
-} from '../../utils/quadHub';
-import QuadHubContent from './QuadHubContent.vue';
-import QuadHubHeading from './QuadHubHeading.vue';
+  type TRectOrbitTetradIcon,
+} from '../../../../utils/rectOrbitTetrad';
+import RectOrbitTetradContent from './RectOrbitTetradContent.vue';
+import RectOrbitTetradHeading from './RectOrbitTetradHeading.vue';
 
 defineOptions({
-  name: 'QuadHubCallout',
+  name: 'RectOrbitTetradCallout',
 });
 
-export interface IQuadHubCalloutProps {
+export interface IRectOrbitTetradCalloutProps {
   readonly id?: string | number;
-  readonly icon?: TQuadHubIcon;
+  readonly icon?: TRectOrbitTetradIcon;
   readonly color?: string;
   readonly cardBg?: string;
   readonly arcColor?: string;
@@ -27,7 +27,7 @@ export interface IQuadHubCalloutProps {
   readonly arcBorderColor?: string;
 }
 
-const props = withDefaults(defineProps<IQuadHubCalloutProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradCalloutProps>(), {
   id: undefined,
   icon: undefined,
   color: undefined,
@@ -52,28 +52,30 @@ function hasComponentName(type: unknown, name: string): boolean {
   return false;
 }
 
-const rootContext = inject(QUAD_HUB_ROOT_KEY, undefined);
+const rootContext = inject(RECT_ORBIT_TETRAD_ROOT_KEY, undefined);
 
 if (!rootContext) {
-  console.warn('[QuadHubCallout] Must be used inside <QuadHub>');
+  console.warn(
+    '[RectOrbitTetradCallout] Must be used inside <RectOrbitTetrad>',
+  );
 }
 
 const registration = rootContext?.registerCallout(props);
 const index = registration?.index ?? 0;
 
-const [firstDefaultItem] = DEFAULT_QUAD_HUB_ITEMS;
+const [firstDefaultItem] = DEFAULT_RECT_ORBIT_TETRAD_ITEMS;
 
-const fallbackItem = computed<IResolvedQuadHubItem>(() => {
-  const current = DEFAULT_QUAD_HUB_ITEMS[index];
+const fallbackItem = computed<IResolvedRectOrbitTetradItem>(() => {
+  const current = DEFAULT_RECT_ORBIT_TETRAD_ITEMS[index];
 
   return resolveSingleItem(current ?? firstDefaultItem, props);
 });
 
-const item = computed<IResolvedQuadHubItem>(() => {
+const item = computed<IResolvedRectOrbitTetradItem>(() => {
   return registration?.item.value ?? fallbackItem.value;
 });
 
-provide(QUAD_HUB_CALLOUT_KEY, {
+provide(RECT_ORBIT_TETRAD_CALLOUT_KEY, {
   item,
   index,
 });
@@ -96,15 +98,15 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
 
 function isHeadingNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'QuadHubHeading') ||
-    node.type === QuadHubHeading
+    hasComponentName(node.type, 'RectOrbitTetradHeading') ||
+    node.type === RectOrbitTetradHeading
   );
 }
 
 function isContentNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'QuadHubContent') ||
-    node.type === QuadHubContent
+    hasComponentName(node.type, 'RectOrbitTetradContent') ||
+    node.type === RectOrbitTetradContent
   );
 }
 
@@ -166,10 +168,10 @@ const animation = computed(() => {
   <div
     v-if="index < 4"
     :class="[
-      'alpha-quad-hub-callout absolute rounded-2xl flex flex-col justify-center z-0 transition-all duration-300 pointer-events-auto shadow-sm select-none box-border',
+      'alpha-rect-orbit-tetrad-callout absolute rounded-2xl flex flex-col justify-center z-0 transition-all duration-300 pointer-events-auto shadow-sm select-none box-border',
       isLeftCard ? 'pl-5 pr-16 py-4 text-right' : 'pl-16 pr-5 py-4 text-left',
-      `alpha-quad-hub-callout--${index}`,
-      { 'alpha-quad-hub-callout--animated': animation },
+      `alpha-rect-orbit-tetrad-callout--${index}`,
+      { 'alpha-rect-orbit-tetrad-callout--animated': animation },
     ]"
     :style="[
       positionStyle,
@@ -216,34 +218,34 @@ const animation = computed(() => {
 </template>
 
 <style scoped>
-.alpha-quad-hub-callout :deep(p),
-.alpha-quad-hub-callout :deep(h1),
-.alpha-quad-hub-callout :deep(h2),
-.alpha-quad-hub-callout :deep(h3),
-.alpha-quad-hub-callout :deep(h4),
-.alpha-quad-hub-callout :deep(h5),
-.alpha-quad-hub-callout :deep(h6) {
+.alpha-rect-orbit-tetrad-callout :deep(p),
+.alpha-rect-orbit-tetrad-callout :deep(h1),
+.alpha-rect-orbit-tetrad-callout :deep(h2),
+.alpha-rect-orbit-tetrad-callout :deep(h3),
+.alpha-rect-orbit-tetrad-callout :deep(h4),
+.alpha-rect-orbit-tetrad-callout :deep(h5),
+.alpha-rect-orbit-tetrad-callout :deep(h6) {
   margin: 0;
   padding: 0;
 }
 
-.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--0 {
-  animation: quad-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 150ms) both;
+.alpha-rect-orbit-tetrad-callout--animated.alpha-rect-orbit-tetrad-callout--0 {
+  animation: rect-orbit-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rect-orbit-start-delay, 0ms) + 150ms) both;
 }
 
-.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--1 {
-  animation: quad-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 300ms) both;
+.alpha-rect-orbit-tetrad-callout--animated.alpha-rect-orbit-tetrad-callout--1 {
+  animation: rect-orbit-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rect-orbit-start-delay, 0ms) + 300ms) both;
 }
 
-.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--2 {
-  animation: quad-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 450ms) both;
+.alpha-rect-orbit-tetrad-callout--animated.alpha-rect-orbit-tetrad-callout--2 {
+  animation: rect-orbit-callout-right 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rect-orbit-start-delay, 0ms) + 450ms) both;
 }
 
-.alpha-quad-hub-callout--animated.alpha-quad-hub-callout--3 {
-  animation: quad-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--quad-start-delay, 0ms) + 600ms) both;
+.alpha-rect-orbit-tetrad-callout--animated.alpha-rect-orbit-tetrad-callout--3 {
+  animation: rect-orbit-callout-left 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rect-orbit-start-delay, 0ms) + 600ms) both;
 }
 
-@keyframes quad-callout-right {
+@keyframes rect-orbit-callout-right {
   0% {
     opacity: 0;
     transform: translateX(-28px);
@@ -254,7 +256,7 @@ const animation = computed(() => {
   }
 }
 
-@keyframes quad-callout-left {
+@keyframes rect-orbit-callout-left {
   0% {
     opacity: 0;
     transform: translateX(28px);

package/components/{quad-hub/QuadHubCenter.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetradCenter.vue}

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'QuadHubCenter',
+  name: 'RectOrbitTetradCenter',
 });
 
-export interface IQuadHubCenterProps {
+export interface IRectOrbitTetradCenterProps {
   readonly title?: string;
   readonly radius?: number;
   readonly subtitle?: string;
 }
 
-const props = withDefaults(defineProps<IQuadHubCenterProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradCenterProps>(), {
   title: undefined,
   subtitle: undefined,
   radius: 58,
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<IQuadHubCenterProps>(), {
 
 <template>
   <div
-    class="alpha-quad-hub-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full bg-white flex flex-col items-center justify-center text-center shadow-lg pointer-events-auto select-none"
+    class="alpha-rect-orbit-tetrad-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full bg-white flex flex-col items-center justify-center text-center shadow-lg pointer-events-auto select-none"
     :style="{
       width: `${props.radius * 2}px`,
       height: `${props.radius * 2}px`,

package/components/{quad-hub/QuadHubContent.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetradContent.vue}

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { QUAD_HUB_CALLOUT_KEY } from '../../utils/quadHub';
+import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/rectOrbitTetrad';
 
 defineOptions({
-  name: 'QuadHubContent',
+  name: 'RectOrbitTetradContent',
 });
 
-export interface IQuadHubContentProps {
+export interface IRectOrbitTetradContentProps {
   readonly color?: string;
 }
 
-const props = withDefaults(defineProps<IQuadHubContentProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradContentProps>(), {
   color: undefined,
 });
 
-const calloutContext = inject(QUAD_HUB_CALLOUT_KEY, undefined);
+const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
 
 const contentColor = computed(() => {
   return props.color ?? calloutContext?.item.value.textColor ?? '#555555';
@@ -24,7 +24,7 @@ const contentColor = computed(() => {
 
 <template>
   <div
-    class="alpha-quad-hub-content text-[1rem] leading-[1.38] font-normal tracking-tight m-0 p-0 select-none"
+    class="alpha-rect-orbit-tetrad-content text-[1rem] leading-[1.38] font-normal tracking-tight m-0 p-0 select-none"
     :style="{
       color: contentColor,
       margin: 0,

package/components/{quad-hub/QuadHubHeading.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetradHeading.vue}

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { QUAD_HUB_CALLOUT_KEY } from '../../utils/quadHub';
+import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/rectOrbitTetrad';
 
 defineOptions({
-  name: 'QuadHubHeading',
+  name: 'RectOrbitTetradHeading',
 });
 
-export interface IQuadHubHeadingProps {
+export interface IRectOrbitTetradHeadingProps {
   readonly color?: string;
 }
 
-const props = withDefaults(defineProps<IQuadHubHeadingProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradHeadingProps>(), {
   color: undefined,
 });
 
-const calloutContext = inject(QUAD_HUB_CALLOUT_KEY, undefined);
+const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
 
 const headingColor = computed(() => {
   return (
@@ -29,7 +29,7 @@ const headingColor = computed(() => {
 
 <template>
   <div
-    class="alpha-quad-hub-heading font-bold text-[1.25rem] leading-tight tracking-tight m-0 p-0 select-none"
+    class="alpha-rect-orbit-tetrad-heading font-bold text-[1.25rem] leading-tight tracking-tight m-0 p-0 select-none"
     :style="{
       color: headingColor,
       margin: 0,

package/components/{quad-hub/QuadHubIcon.vue → facets/tetrad/rect-orbit-tetrad/RectOrbitTetradIcon.vue}

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import type { TQuadHubIcon } from '../../utils/quadHub';
+import type { TRectOrbitTetradIcon } from '../../../../utils/rectOrbitTetrad';
 
 defineOptions({
-  name: 'QuadHubIcon',
+  name: 'RectOrbitTetradIcon',
 });
 
-export interface IQuadHubIconProps {
+export interface IRectOrbitTetradIconProps {
   readonly size?: number;
   readonly color?: string;
-  readonly icon?: TQuadHubIcon;
+  readonly icon?: TRectOrbitTetradIcon;
 }
 
-const props = withDefaults(defineProps<IQuadHubIconProps>(), {
+const props = withDefaults(defineProps<IRectOrbitTetradIconProps>(), {
   size: 34,
   icon: undefined,
   color: '#ffffff',
@@ -31,7 +31,7 @@ const isComponentIcon = computed((): boolean => {
 <template>
   <div
     v-if="props.icon !== false"
-    class="alpha-quad-hub-icon flex items-center justify-center pointer-events-none select-none"
+    class="alpha-rect-orbit-tetrad-icon flex items-center justify-center pointer-events-none select-none"
     :style="{
       color: props.color,
       width: `${props.size}px`,

package/components/{arrow-triad → facets/triad/arrow-triad}/ArrowTriad.vue

@@ -16,9 +16,9 @@ import {
   type IArrowTriadItem,
   resolveArrowTriadItems,
   type TArrowTriadLayout,
-} from '../../utils/arrowTriad';
-import { useDiagramAutoScale } from '../../utils/useDiagramAutoScale';
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+} from '../../../../utils/arrowTriad';
+import { useDiagramAutoScale } from '../../../../utils/useDiagramAutoScale';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
 import ArrowTriadCallout from './ArrowTriadCallout.vue';
 
 defineOptions({

package/components/{arrow-triad → facets/triad/arrow-triad}/ArrowTriadCallout.vue

@@ -8,7 +8,7 @@ import {
   type IArrowTriadItem,
   type IResolvedArrowTriadItem,
   resolveSingleArrowTriadItem,
-} from '../../utils/arrowTriad';
+} from '../../../../utils/arrowTriad';
 import ArrowTriadContent from './ArrowTriadContent.vue';
 import ArrowTriadHeading from './ArrowTriadHeading.vue';
 import ArrowTriadIcon from './ArrowTriadIcon.vue';

package/components/{arrow-triad → facets/triad/arrow-triad}/ArrowTriadContent.vue

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