@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

package/components/facets/tetrad/{rect-orbit-tetrad/RectOrbitTetrad.vue → rectangle-orbit-tetrad/RectangleOrbitTetrad.vue}

@@ -16,23 +16,23 @@ import {
 } from 'vue';
 
 import {
-  calculateRectOrbitTetradCoordinates,
+  calculateRectangleOrbitTetradCoordinates,
   DEFAULT_RECT_ORBIT_TETRAD_ITEMS,
   type IRectOrbitBox,
   type IRectOrbitPoint,
-  type IRectOrbitTetradItem,
-  type IRectOrbitTetradRegistration,
-  type IResolvedRectOrbitTetradItem,
+  type IRectangleOrbitTetradItem,
+  type IRectangleOrbitTetradRegistration,
+  type IResolvedRectangleOrbitTetradItem,
   RECT_ORBIT_TETRAD_ROOT_KEY,
-  resolveRectOrbitTetradItems,
-} from '../../../../utils/rectOrbitTetrad';
+  resolveRectangleOrbitTetradItems,
+} from '../../../../utils/facets/tetrad/rectangle-orbit-tetrad';
 import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
-import RectOrbitTetradCallout from './RectOrbitTetradCallout.vue';
-import RectOrbitTetradCenter from './RectOrbitTetradCenter.vue';
-import RectOrbitTetradIcon from './RectOrbitTetradIcon.vue';
+import RectangleOrbitTetradCallout from './RectangleOrbitTetradCallout.vue';
+import RectangleOrbitTetradCenter from './RectangleOrbitTetradCenter.vue';
+import RectangleOrbitTetradIcon from './RectangleOrbitTetradIcon.vue';
 
 defineOptions({
-  name: 'RectOrbitTetrad',
+  name: 'RectangleOrbitTetrad',
   inheritAttrs: false,
 });
 
@@ -41,16 +41,13 @@ export interface IRectOrbitBlockData {
   readonly arcPath: string;
   readonly iconPos: IRectOrbitPoint;
   readonly numberPos: IRectOrbitPoint;
-  readonly item: IResolvedRectOrbitTetradItem;
+  readonly item: IResolvedRectangleOrbitTetradItem;
 }
 
-export interface IRectOrbitTetradProps {
-  readonly title?: string;
-  readonly items?: readonly IRectOrbitTetradItem[];
+export interface IRectangleOrbitTetradProps {
   readonly active?: boolean;
   readonly height?: number | string;
   readonly arcRatio?: number;
-  readonly subtitle?: string;
   readonly animation?: boolean;
   readonly startDelay?: number;
   readonly arcBorderRatio?: number;
@@ -59,13 +56,10 @@ export interface IRectOrbitTetradProps {
   readonly maxScale?: number;
 }
 
-const props = withDefaults(defineProps<IRectOrbitTetradProps>(), {
-  title: undefined,
-  items: undefined,
+const props = withDefaults(defineProps<IRectangleOrbitTetradProps>(), {
   active: undefined,
   height: undefined,
   arcRatio: 0.55,
-  subtitle: undefined,
   animation: true,
   startDelay: undefined,
   arcBorderRatio: 0.8,
@@ -150,42 +144,39 @@ const resolvedStartDelay = computed((): number => {
   return 0;
 });
 
-const registeredCallouts = shallowReactive<Map<number, IRectOrbitTetradItem>>(
-  new Map(),
-);
+const registeredCallouts = shallowReactive<
+  Map<number, IRectangleOrbitTetradItem>
+>(new Map());
 
 const resolvedItems = computed(
   (): readonly [
-    IResolvedRectOrbitTetradItem,
-    IResolvedRectOrbitTetradItem,
-    IResolvedRectOrbitTetradItem,
-    IResolvedRectOrbitTetradItem,
+    IResolvedRectangleOrbitTetradItem,
+    IResolvedRectangleOrbitTetradItem,
+    IResolvedRectangleOrbitTetradItem,
+    IResolvedRectangleOrbitTetradItem,
   ] => {
     const rawDefaultNodes = slots.default ? slots.default() : [];
     const flattenedNodes = flattenVNodes(rawDefaultNodes);
     const calloutNodes = flattenedNodes.filter((node) => {
       return (
-        hasComponentName(node.type, 'RectOrbitTetradCallout') ||
-        node.type === RectOrbitTetradCallout
+        hasComponentName(node.type, 'RectangleOrbitTetradCallout') ||
+        node.type === RectangleOrbitTetradCallout
       );
     });
 
-    const mergedItems: IRectOrbitTetradItem[] = [];
+    const mergedItems: IRectangleOrbitTetradItem[] = [];
 
     for (let i = 0; i < 4; i++) {
       const slotProps =
-        (calloutNodes[i]?.props as IRectOrbitTetradItem | undefined) ?? {};
+        (calloutNodes[i]?.props as IRectangleOrbitTetradItem | undefined) ?? {};
       const regProps = registeredCallouts.get(i) ?? {};
-      const propItem = props.items?.[i] ?? {};
-
       mergedItems.push({
-        ...propItem,
         ...slotProps,
         ...regProps,
       });
     }
 
-    return resolveRectOrbitTetradItems({
+    return resolveRectangleOrbitTetradItems({
       items: mergedItems,
       arcRatio: props.arcRatio,
       arcBorderRatio: props.arcBorderRatio,
@@ -198,8 +189,8 @@ const [firstFallbackItem] = DEFAULT_RECT_ORBIT_TETRAD_ITEMS;
 let calloutCounter = 0;
 
 const registerCallout = (
-  calloutProps?: IRectOrbitTetradItem,
-): IRectOrbitTetradRegistration => {
+  calloutProps?: IRectangleOrbitTetradItem,
+): IRectangleOrbitTetradRegistration => {
   const idx = calloutCounter++;
 
   if (calloutProps) {
@@ -208,7 +199,7 @@ const registerCallout = (
 
   return {
     index: idx,
-    item: computed((): IResolvedRectOrbitTetradItem => {
+    item: computed((): IResolvedRectangleOrbitTetradItem => {
       const current = resolvedItems.value[idx];
       return current ?? resolvedItems.value[0] ?? firstFallbackItem;
     }),
@@ -226,7 +217,7 @@ provide(RECT_ORBIT_TETRAD_ROOT_KEY, {
 });
 
 // Precision coordinates calculation for SVG elements
-const coords = calculateRectOrbitTetradCoordinates({
+const coords = calculateRectangleOrbitTetradCoordinates({
   gap: 14,
   width: 136,
   height: 150,
@@ -295,7 +286,7 @@ const quadrantBlocks = computed(
 );
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-rect-orbit-tetrad w-full flex-1 flex flex-col items-center justify-center select-none font-sans min-h-0',
+  'alpha-rectangle-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,30 +473,41 @@ const resolvedScale = computed((): number => {
     :class="className()"
     :style="{
       height: resolvedHeightStyle,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
       '--rect-orbit-start-delay': `${resolvedStartDelay}ms`,
     }"
   >
     <div
-      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"
+      class="alpha-rectangle-orbit-tetrad__stage relative w-full h-full min-h-87.5 max-w-255 mx-auto flex items-center justify-center overflow-visible"
       :style="{
-        transform: props.scale !== undefined ? `scale(${props.scale})` : undefined,
+        transform:
+          resolvedScale !== 1 ? `scale(${resolvedScale})` : undefined,
         transformOrigin: 'center center',
       }"
     >
       <!-- Center Diagram: 4 Colored Quadrants + Concentric Arcs -->
       <div
-        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"
+        class="alpha-rectangle-orbit-tetrad__center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-97.5 h-97.5 z-10 pointer-events-none"
       >
         <svg
-          class="alpha-rect-orbit-tetrad__svg w-[390px] h-[390px] overflow-visible"
+          aria-hidden="true"
+          class="alpha-rectangle-orbit-tetrad__svg w-97.5 h-97.5 overflow-visible"
           :viewBox="`0 0 ${viewBoxSize} ${viewBoxSize}`"
         >
           <defs>
             <!-- Drop shadow for the quadrant blocks (unique per component instance) -->
-            <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
+              :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
@@ -565,16 +567,17 @@ const resolvedScale = computed((): number => {
               :x="block.numberPos.x"
               :y="block.numberPos.y + 6"
               text-anchor="middle"
-              fill="#2c3e50"
+              fill="var(--alpha-rectangle-orbit-tetrad-center)"
               class="font-extrabold text-[18.5px] select-none font-sans"
-              style="font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;"
             >
               {{ block.item.id }}
             </text>
           </g>
         </svg>
         <!-- HTML Icon Overlay Layer (ensures UnoCSS mask icons render reliably) -->
-        <div class="alpha-rect-orbit-tetrad__icons absolute top-0 left-0 w-[360px] h-[360px] pointer-events-none">
+        <div
+          class="alpha-rectangle-orbit-tetrad__icons absolute top-0 left-0 w-90 h-90 pointer-events-none"
+        >
           <div
             v-for="(block, idx) in quadrantBlocks"
             :key="idx"
@@ -583,27 +586,23 @@ const resolvedScale = computed((): number => {
               `alpha-rect-orbit-block--${idx}`,
               { 'alpha-rect-orbit-block--animated': isAnimated },
             ]"
-            class="absolute flex items-center justify-center w-[34px] h-[34px]"
+            class="absolute flex items-center justify-center w-8.5 h-8.5"
             :style="{
               top: `${block.iconPos.y - 17}px`,
               left: `${block.iconPos.x - 17}px`,
             }"
           >
-            <RectOrbitTetradIcon
+            <RectangleOrbitTetradIcon
               v-if="block.item.icon !== false && block.item.icon !== undefined"
               :icon="block.item.icon"
               :size="34"
-              color="#ffffff"
+              color="var(--alpha-rectangle-orbit-tetrad-connector)"
             />
           </div>
         </div>
         <!-- Central Circular Hub -->
-        <slot name="hub">
-          <RectOrbitTetradCenter
-            :title="props.title"
-            :subtitle="props.subtitle"
-            :radius="hubRadius"
-          />
+        <slot name="center">
+          <RectangleOrbitTetradCenter :radius="hubRadius" />
         </slot>
       </div>
       <!-- Callout Cards -->
@@ -614,19 +613,23 @@ const resolvedScale = computed((): number => {
 
 <style scoped>
 .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;
+  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-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;
+  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-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;
+  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-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;
+  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 rect-orbit-block-pop {

package/components/facets/tetrad/{rect-orbit-tetrad/RectOrbitTetradCallout.vue → rectangle-orbit-tetrad/RectangleOrbitTetradCallout.vue}

@@ -3,38 +3,38 @@ import { computed, Fragment, inject, provide, useSlots, type VNode } from 'vue';
 
 import {
   DEFAULT_RECT_ORBIT_TETRAD_ITEMS,
-  type IResolvedRectOrbitTetradItem,
+  type IResolvedRectangleOrbitTetradItem,
   RECT_ORBIT_TETRAD_CALLOUT_KEY,
   RECT_ORBIT_TETRAD_ROOT_KEY,
   resolveSingleItem,
-  type TRectOrbitTetradIcon,
-} from '../../../../utils/rectOrbitTetrad';
-import RectOrbitTetradContent from './RectOrbitTetradContent.vue';
-import RectOrbitTetradHeading from './RectOrbitTetradHeading.vue';
+  type TRectangleOrbitTetradIcon,
+} from '../../../../utils/facets/tetrad/rectangle-orbit-tetrad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+import RectangleOrbitTetradContent from './RectangleOrbitTetradContent.vue';
+import RectangleOrbitTetradHeading from './RectangleOrbitTetradHeading.vue';
 
 defineOptions({
-  name: 'RectOrbitTetradCallout',
+  inheritAttrs: false,
+  name: 'RectangleOrbitTetradCallout',
 });
 
-export interface IRectOrbitTetradCalloutProps {
+export interface IRectangleOrbitTetradCalloutProps {
   readonly id?: string | number;
-  readonly icon?: TRectOrbitTetradIcon;
+  readonly icon?: TRectangleOrbitTetradIcon;
   readonly color?: string;
   readonly cardBg?: string;
   readonly arcColor?: string;
   readonly textColor?: string;
-  readonly titleColor?: string;
   readonly arcBorderColor?: string;
 }
 
-const props = withDefaults(defineProps<IRectOrbitTetradCalloutProps>(), {
+const props = withDefaults(defineProps<IRectangleOrbitTetradCalloutProps>(), {
   id: undefined,
   icon: undefined,
   color: undefined,
   cardBg: undefined,
   arcColor: undefined,
   textColor: undefined,
-  titleColor: undefined,
   arcBorderColor: undefined,
 });
 
@@ -56,7 +56,7 @@ const rootContext = inject(RECT_ORBIT_TETRAD_ROOT_KEY, undefined);
 
 if (!rootContext) {
   console.warn(
-    '[RectOrbitTetradCallout] Must be used inside <RectOrbitTetrad>',
+    '[RectangleOrbitTetradCallout] Must be used inside <RectangleOrbitTetrad>',
   );
 }
 
@@ -65,13 +65,13 @@ const index = registration?.index ?? 0;
 
 const [firstDefaultItem] = DEFAULT_RECT_ORBIT_TETRAD_ITEMS;
 
-const fallbackItem = computed<IResolvedRectOrbitTetradItem>(() => {
+const fallbackItem = computed<IResolvedRectangleOrbitTetradItem>(() => {
   const current = DEFAULT_RECT_ORBIT_TETRAD_ITEMS[index];
 
   return resolveSingleItem(current ?? firstDefaultItem, props);
 });
 
-const item = computed<IResolvedRectOrbitTetradItem>(() => {
+const item = computed<IResolvedRectangleOrbitTetradItem>(() => {
   return registration?.item.value ?? fallbackItem.value;
 });
 
@@ -98,15 +98,15 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
 
 function isHeadingNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'RectOrbitTetradHeading') ||
-    node.type === RectOrbitTetradHeading
+    hasComponentName(node.type, 'RectangleOrbitTetradHeading') ||
+    node.type === RectangleOrbitTetradHeading
   );
 }
 
 function isContentNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'RectOrbitTetradContent') ||
-    node.type === RectOrbitTetradContent
+    hasComponentName(node.type, 'RectangleOrbitTetradContent') ||
+    node.type === RectangleOrbitTetradContent
   );
 }
 
@@ -144,6 +144,7 @@ const positionStyle = computed(() => {
     case 0: {
       return 'left: 0; right: calc(50% + 95px); top: 10px; bottom: calc(50% + 14px);';
     }
+
     case 1: {
       return 'left: calc(50% + 95px); right: 0; top: 10px; bottom: calc(50% + 14px);';
     }
@@ -162,24 +163,31 @@ const positionStyle = computed(() => {
 const animation = computed(() => {
   return rootContext?.animation?.value ?? true;
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  const alignPadding = isLeftCard.value
+    ? 'pl-5 pr-16 py-4 text-right'
+    : 'pl-16 pr-5 py-4 text-left';
+
+  return `alpha-rectangle-orbit-tetrad-callout absolute rounded-2xl flex flex-col justify-center z-0 bg-(--alpha-rectangle-orbit-tetrad-card-bg) font-sans transition-all duration-300 pointer-events-auto shadow-sm select-none box-border ${alignPadding}`;
+});
 </script>
 
 <template>
   <div
     v-if="index < 4"
+    v-bind="forwardedAttrs()"
     :class="[
-      '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-rect-orbit-tetrad-callout--${index}`,
-      { 'alpha-rect-orbit-tetrad-callout--animated': animation },
+      className(),
+      `alpha-rectangle-orbit-tetrad-callout--${index}`,
+      { 'alpha-rectangle-orbit-tetrad-callout--animated': animation },
     ]"
     :style="[
       positionStyle,
-      {
-        backgroundColor: item.cardBg,
-        fontFamily:
-          'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      },
+      item.cardBg &&
+      !item.cardBg.includes('--alpha-rectangle-orbit-tetrad-card-bg')
+        ? { '--alpha-rectangle-orbit-tetrad-card-bg': item.cardBg }
+        : undefined,
     ]"
   >
     <!-- Left-side callouts (TL & BL): Heading on top (right-aligned), then [description | accentBar] -->
@@ -193,8 +201,8 @@ const animation = computed(() => {
           <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
         </div>
         <div
-          class="w-[3px] self-stretch min-h-[30px] rounded-full flex-shrink-0 my-0.5"
-          :style="{ backgroundColor: item.titleColor }"
+          class="w-0.75 self-stretch min-h-7.5 rounded-full shrink-0 my-0.5"
+          :style="{ backgroundColor: item.color }"
         />
       </div>
     </template>
@@ -205,8 +213,8 @@ const animation = computed(() => {
       </div>
       <div class="w-full flex items-stretch justify-start gap-2.5">
         <div
-          class="w-[3px] self-stretch min-h-[30px] rounded-full flex-shrink-0 my-0.5"
-          :style="{ backgroundColor: item.titleColor }"
+          class="w-0.75 self-stretch min-h-7.5 rounded-full shrink-0 my-0.5"
+          :style="{ backgroundColor: item.color }"
         />
         <div class="flex-1 flex flex-col items-start min-w-0">
           <component :is="contentNode" v-if="contentNode" />
@@ -218,31 +226,37 @@ const animation = computed(() => {
 </template>
 
 <style scoped>
-.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;
+@layer alpha-theme-tokens {
+  .alpha-rectangle-orbit-tetrad-callout :deep(p),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h1),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h2),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h3),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h4),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h5),
+  .alpha-rectangle-orbit-tetrad-callout :deep(h6) {
+    margin: 0;
+    padding: 0;
+  }
 }
 
-.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-rectangle-orbit-tetrad-callout--animated.alpha-rectangle-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-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-rectangle-orbit-tetrad-callout--animated.alpha-rectangle-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-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-rectangle-orbit-tetrad-callout--animated.alpha-rectangle-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-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;
+.alpha-rectangle-orbit-tetrad-callout--animated.alpha-rectangle-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 rect-orbit-callout-right {

package/components/facets/tetrad/rectangle-orbit-tetrad/RectangleOrbitTetradCenter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { isVNode, type VNode } from 'vue';
+
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'RectangleOrbitTetradCenter',
+});
+
+export interface IRectangleOrbitTetradCenterProps {
+  readonly title?: string | VNode;
+  readonly radius?: number;
+}
+
+const props = withDefaults(defineProps<IRectangleOrbitTetradCenterProps>(), {
+  title: undefined,
+  radius: 58,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-rectangle-orbit-tetrad-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20 rounded-full bg-(--alpha-rectangle-orbit-tetrad-center-bg) font-sans flex flex-col items-center justify-center text-center shadow-lg pointer-events-auto select-none',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{
+      width: `${props.radius * 2}px`,
+      height: `${props.radius * 2}px`,
+      boxShadow: 'var(--alpha-rectangle-orbit-tetrad-center-shadow)',
+    }"
+  >
+    <h4
+      v-if="props.title != null || $slots.title"
+      class="mb-2 font-extrabold text-(--alpha-rectangle-orbit-tetrad-title) tracking-tight leading-none"
+    >
+      <slot v-if="$slots.title" name="title" />
+      <component :is="props.title" v-else-if="isVNode(props.title)" />
+      <template v-else-if="typeof props.title === 'string'">{{
+        props.title
+      }}</template>
+    </h4>
+    <p
+      v-if="$slots.content"
+      class="text-sm font-medium text-(--alpha-rectangle-orbit-tetrad-center-content) tracking-normal leading-normal"
+    >
+      <slot name="content" />
+    </p>
+    <slot />
+  </div>
+</template>

package/components/facets/tetrad/rectangle-orbit-tetrad/RectangleOrbitTetradContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/facets/tetrad/rectangle-orbit-tetrad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'RectangleOrbitTetradContent',
+});
+
+export interface IRectangleOrbitTetradContentProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IRectangleOrbitTetradContentProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
+
+const contentColor = computed(() => {
+  return props.color ?? calloutContext?.item.value.textColor ?? undefined;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-rectangle-orbit-tetrad-content font-sans leading-[1.38] font-normal tracking-tight text-(--alpha-rectangle-orbit-tetrad-content) select-none',
+);
+</script>
+
+<template>
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      contentColor &&
+      !contentColor.includes('--alpha-rectangle-orbit-tetrad-content')
+        ? { '--alpha-rectangle-orbit-tetrad-content': contentColor }
+        : undefined
+    "
+  >
+    <slot />
+  </p>
+</template>

package/components/facets/tetrad/rectangle-orbit-tetrad/RectangleOrbitTetradHeading.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { RECT_ORBIT_TETRAD_CALLOUT_KEY } from '../../../../utils/facets/tetrad/rectangle-orbit-tetrad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'RectangleOrbitTetradHeading',
+});
+
+const calloutContext = inject(RECT_ORBIT_TETRAD_CALLOUT_KEY, undefined);
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-rectangle-orbit-tetrad-heading font-sans font-bold leading-tight tracking-tight select-none',
+);
+</script>
+
+<template>
+  <h4
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ color: calloutContext?.item.value.color }"
+  >
+    <slot>{{ '' }}</slot>
+  </h4>
+</template>