@alphacifer/slidev-addon-theme 0.0.6 → 0.0.8

package/utils/gearTriad/resolveGearTriadItems.ts

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

package/utils/rectOrbitTetrad/context.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type {
+  IRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
+} from './resolveRectOrbitTetradItems';
+
+export interface IRectOrbitTetradRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectOrbitTetradItem>;
+  readonly setCustomBadge?: (text: string | number) => void;
+}
+
+export interface IRectOrbitTetradRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly registerCallout: (
+    props?: IRectOrbitTetradItem,
+  ) => IRectOrbitTetradRegistration;
+  readonly items: ComputedRef<readonly IResolvedRectOrbitTetradItem[]>;
+}
+
+export interface IRectOrbitTetradCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedRectOrbitTetradItem>;
+}
+
+export const RECT_ORBIT_TETRAD_ROOT_KEY: InjectionKey<IRectOrbitTetradRootContext> =
+  Symbol('RECT_ORBIT_TETRAD_ROOT_KEY');
+
+export const RECT_ORBIT_TETRAD_CALLOUT_KEY: InjectionKey<IRectOrbitTetradCalloutContext> =
+  Symbol('RECT_ORBIT_TETRAD_CALLOUT_KEY');

package/utils/{quadHub/createQuadHubGeometry.ts → rectOrbitTetrad/createRectOrbitTetradGeometry.ts}

@@ -1,9 +1,9 @@
-export interface IQuadPoint {
+export interface IRectOrbitPoint {
   readonly x: number;
   readonly y: number;
 }
 
-export interface IQuadBox {
+export interface IRectOrbitBox {
   readonly x: number;
   readonly y: number;
   readonly rx: number;
@@ -11,26 +11,31 @@ export interface IQuadBox {
   readonly height: number;
 }
 
-export interface IQuadHubCoordinates {
+export interface IRectOrbitTetradCoordinates {
   readonly centerX: number;
   readonly centerY: number;
   readonly arcPaths: readonly [string, string, string, string];
   readonly arcRadius: number;
   readonly hubRadius: number;
-  readonly quadrants: readonly [IQuadBox, IQuadBox, IQuadBox, IQuadBox];
+  readonly quadrants: readonly [
+    IRectOrbitBox,
+    IRectOrbitBox,
+    IRectOrbitBox,
+    IRectOrbitBox,
+  ];
   readonly viewBoxSize: number;
   readonly iconPositions: readonly [
-    IQuadPoint,
-    IQuadPoint,
-    IQuadPoint,
-    IQuadPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
   ];
   readonly arcBorderWidth: number;
   readonly numberPositions: readonly [
-    IQuadPoint,
-    IQuadPoint,
-    IQuadPoint,
-    IQuadPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
+    IRectOrbitPoint,
   ];
 }
 
@@ -54,7 +59,7 @@ function createArcPath(
   return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
 }
 
-export interface ICalculateQuadHubCoordinatesParams {
+export interface ICalculateRectOrbitTetradCoordinatesParams {
   readonly gap?: number;
   readonly width?: number;
   readonly height?: number;
@@ -69,14 +74,14 @@ export interface ICalculateQuadHubCoordinatesParams {
 }
 
 /**
- * Calculates geometric coordinates for the QuadHub layout.
+ * Calculates geometric coordinates for the RectOrbitTetrad layout.
  * Indices (Clockwise starting Top-Left):
  * 0: Top-Left (01)
  * 1: Top-Right (02)
  * 2: Bottom-Right (03)
  * 3: Bottom-Left (04)
  */
-export function calculateQuadHubCoordinates({
+export function calculateRectOrbitTetradCoordinates({
   gap = 14,
   width = 136,
   height = 150,
@@ -88,14 +93,14 @@ export function calculateQuadHubCoordinates({
   iconPaddingX = 30,
   iconPaddingY = 32,
   arcBorderWidth = 5,
-}: ICalculateQuadHubCoordinatesParams = {}): IQuadHubCoordinates {
+}: ICalculateRectOrbitTetradCoordinatesParams = {}): IRectOrbitTetradCoordinates {
   const centerX = viewBoxSize / 2;
   const centerY = viewBoxSize / 2;
   const halfGap = gap / 2;
 
   // Quadrants:
   // 0: Top-Left (1)
-  const q0: IQuadBox = {
+  const q0: IRectOrbitBox = {
     x: centerX - halfGap - width,
     y: centerY - halfGap - height,
     rx: cornerRadius,
@@ -104,7 +109,7 @@ export function calculateQuadHubCoordinates({
   };
 
   // 1: Top-Right (2)
-  const q1: IQuadBox = {
+  const q1: IRectOrbitBox = {
     x: centerX + halfGap,
     y: centerY - halfGap - height,
     rx: cornerRadius,
@@ -113,7 +118,7 @@ export function calculateQuadHubCoordinates({
   };
 
   // 2: Bottom-Right (3)
-  const q2: IQuadBox = {
+  const q2: IRectOrbitBox = {
     x: centerX + halfGap,
     y: centerY + halfGap,
     rx: cornerRadius,
@@ -122,7 +127,7 @@ export function calculateQuadHubCoordinates({
   };
 
   // 3: Bottom-Left (4)
-  const q3: IQuadBox = {
+  const q3: IRectOrbitBox = {
     x: centerX - halfGap - width,
     y: centerY + halfGap,
     rx: cornerRadius,
@@ -137,44 +142,44 @@ export function calculateQuadHubCoordinates({
   const offsetY = Number((numberRadius * Math.sin(rad)).toFixed(2));
 
   // 0: Top-Left (1)
-  const num0: IQuadPoint = {
+  const num0: IRectOrbitPoint = {
     x: centerX - offsetX,
     y: centerY - offsetY,
   };
   // 1: Top-Right (2)
-  const num1: IQuadPoint = {
+  const num1: IRectOrbitPoint = {
     x: centerX + offsetX,
     y: centerY - offsetY,
   };
   // 2: Bottom-Right (3)
-  const num2: IQuadPoint = {
+  const num2: IRectOrbitPoint = {
     x: centerX + offsetX,
     y: centerY + offsetY,
   };
   // 3: Bottom-Left (4)
-  const num3: IQuadPoint = {
+  const num3: IRectOrbitPoint = {
     x: centerX - offsetX,
     y: centerY + offsetY,
   };
 
   // Icon positions (in outer corner of each block)
   // 0: Top-Left (1)
-  const icon0: IQuadPoint = {
+  const icon0: IRectOrbitPoint = {
     x: q0.x + iconPaddingX,
     y: q0.y + iconPaddingY,
   };
   // 1: Top-Right (2)
-  const icon1: IQuadPoint = {
+  const icon1: IRectOrbitPoint = {
     x: q1.x + q1.width - iconPaddingX,
     y: q1.y + iconPaddingY,
   };
   // 2: Bottom-Right (3)
-  const icon2: IQuadPoint = {
+  const icon2: IRectOrbitPoint = {
     x: q2.x + q2.width - iconPaddingX,
     y: q2.y + q2.height - iconPaddingY,
   };
   // 3: Bottom-Left (4)
-  const icon3: IQuadPoint = {
+  const icon3: IRectOrbitPoint = {
     x: q3.x + iconPaddingX,
     y: q3.y + q3.height - iconPaddingY,
   };

package/utils/rectOrbitTetrad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createRectOrbitTetradGeometry';
+export * from './resolveRectOrbitTetradItems';

package/utils/{quadHub/resolveQuadHubItems.ts → rectOrbitTetrad/resolveRectOrbitTetradItems.ts}

@@ -1,14 +1,14 @@
-import { lightenColor } from './createQuadHubGeometry';
+import { lightenColor } from './createRectOrbitTetradGeometry';
 
-export type TQuadHubIcon = string | object | boolean;
+export type TRectOrbitTetradIcon = string | object | boolean;
 
-export interface IQuadHubItem {
+export interface IRectOrbitTetradItem {
   readonly id?: string | number;
   /**
    * Optional icon: icon class (e.g. 'i-lucide-user'), component object,
    * built-in name ('user' | 'academic' | 'briefcase' | 'target'), or false to hide.
    */
-  readonly icon?: TQuadHubIcon;
+  readonly icon?: TRectOrbitTetradIcon;
   readonly color?: string;
   readonly cardBg?: string;
   readonly arcColor?: string;
@@ -19,7 +19,7 @@ export interface IQuadHubItem {
   readonly arcBorderRatio?: number;
 }
 
-export interface IResolvedQuadHubItem extends IQuadHubItem {
+export interface IResolvedRectOrbitTetradItem extends IRectOrbitTetradItem {
   readonly id: string | number;
   readonly color: string;
   readonly cardBg: string;
@@ -29,11 +29,11 @@ export interface IResolvedQuadHubItem extends IQuadHubItem {
   readonly arcBorderColor: string;
 }
 
-export const DEFAULT_QUAD_HUB_ITEMS: readonly [
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
+export const DEFAULT_RECT_ORBIT_TETRAD_ITEMS: readonly [
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
 ] = [
   // 0: Top-Left (01) - Golden Orange
   {
@@ -118,11 +118,11 @@ export const DEFAULT_QUAD_HUB_ITEMS: readonly [
 ] as const;
 
 export function resolveSingleItem(
-  defaultItem: IResolvedQuadHubItem,
-  userItem?: IQuadHubItem,
+  defaultItem: IResolvedRectOrbitTetradItem,
+  userItem?: IRectOrbitTetradItem,
   defaultArcRatio = 0.55,
   defaultArcBorderRatio = 0.8,
-): IResolvedQuadHubItem {
+): IResolvedRectOrbitTetradItem {
   const merged = {
     ...defaultItem,
     ...(userItem ?? {}),
@@ -169,43 +169,43 @@ export function resolveSingleItem(
   };
 }
 
-export interface IResolveQuadHubItemsParams {
-  readonly items?: readonly IQuadHubItem[];
+export interface IResolveRectOrbitTetradItemsParams {
+  readonly items?: readonly IRectOrbitTetradItem[];
   readonly arcRatio?: number;
   readonly arcBorderRatio?: number;
 }
 
-export function resolveQuadHubItems({
+export function resolveRectOrbitTetradItems({
   items = [],
   arcRatio = 0.55,
   arcBorderRatio = 0.8,
-}: IResolveQuadHubItemsParams = {}): readonly [
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
-  IResolvedQuadHubItem,
+}: IResolveRectOrbitTetradItemsParams = {}): readonly [
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
+  IResolvedRectOrbitTetradItem,
 ] {
   return [
     resolveSingleItem(
-      DEFAULT_QUAD_HUB_ITEMS[0],
+      DEFAULT_RECT_ORBIT_TETRAD_ITEMS[0],
       items[0],
       arcRatio,
       arcBorderRatio,
     ),
     resolveSingleItem(
-      DEFAULT_QUAD_HUB_ITEMS[1],
+      DEFAULT_RECT_ORBIT_TETRAD_ITEMS[1],
       items[1],
       arcRatio,
       arcBorderRatio,
     ),
     resolveSingleItem(
-      DEFAULT_QUAD_HUB_ITEMS[2],
+      DEFAULT_RECT_ORBIT_TETRAD_ITEMS[2],
       items[2],
       arcRatio,
       arcBorderRatio,
     ),
     resolveSingleItem(
-      DEFAULT_QUAD_HUB_ITEMS[3],
+      DEFAULT_RECT_ORBIT_TETRAD_ITEMS[3],
       items[3],
       arcRatio,
       arcBorderRatio,

package/utils/tableComparison/constants.ts

@@ -0,0 +1,72 @@
+export const DEFAULT_COL_COLORS: readonly string[] = [
+  '#354f82',
+  '#5b8bb3',
+  '#00a8a8',
+  '#00b884',
+  '#00875a',
+];
+
+export const DEFAULT_ROW_HEADER_COLOR = '#2e8b9a';
+export const DEFAULT_ROW_HEADER_TEXT_COLOR = '#ffffff';
+export const DEFAULT_COL_HEADER_TEXT_COLOR = '#ffffff';
+export const DEFAULT_CELL_BG = '#d6e5ef';
+export const DEFAULT_CELL_COLOR = '#475569';
+export const DEFAULT_BORDER_RADIUS = '8px';
+export const DEFAULT_SPACING = '6px';
+export const DEFAULT_ROW_HEADER_WIDTH = '160px';
+
+export interface IDefaultMockupCol {
+  readonly title: string;
+  readonly color: string;
+}
+
+export interface IDefaultMockupRow {
+  readonly title: string;
+  readonly cells: readonly string[];
+}
+
+export const DEFAULT_MOCKUP_COLS: readonly IDefaultMockupCol[] = [
+  { title: 'COLUMN 1', color: '#354f82' },
+  { title: 'COLUMN 2', color: '#5b8bb3' },
+  { title: 'COLUMN 3', color: '#00a8a8' },
+  { title: 'COLUMN 4', color: '#00b884' },
+  { title: 'COLUMN 5', color: '#00875a' },
+];
+
+export const DEFAULT_MOCKUP_ROWS: readonly IDefaultMockupRow[] = [
+  { title: 'ROW 1', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 2', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 3', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 4', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 5', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+  { title: 'ROW 6', cells: ['TEXT', 'TEXT', 'TEXT', 'TEXT', 'TEXT'] },
+];
+
+/**
+ * Resolves a dimension input (number or string) into a CSS-ready unit string.
+ */
+export function resolveDimension(
+  value: number | string | undefined,
+  defaultUnit = 'px',
+): string | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+
+  if (typeof value === 'number') {
+    return `${value}${defaultUnit}`;
+  }
+
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return undefined;
+  }
+
+  // If already contains unit or percentage or calc/var, return as is
+  if (/^[+-]?\d+(\.\d+)?$/.test(trimmed)) {
+    return `${trimmed}${defaultUnit}`;
+  }
+
+  return trimmed;
+}

package/utils/tableComparison/context.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export interface ITableComparisonContext {
+  readonly cellBg: ComputedRef<string>;
+  readonly cellColor: ComputedRef<string>;
+  readonly rowHeaderColor: ComputedRef<string>;
+  readonly rowHeaderTextColor: ComputedRef<string>;
+  readonly colHeaderTextColor: ComputedRef<string>;
+  readonly borderRadius: ComputedRef<string>;
+  readonly rowHeaderWidth: ComputedRef<string | undefined>;
+  readonly spacing: ComputedRef<string>;
+  readonly dense: ComputedRef<boolean>;
+  readonly animation: ComputedRef<boolean>;
+}
+
+export interface ITableComparisonColsContext {
+  readonly registerCol: () => number;
+}
+
+export const TABLE_COMPARISON_KEY: InjectionKey<ITableComparisonContext> =
+  Symbol('TABLE_COMPARISON_KEY');
+
+export const TABLE_COMPARISON_COLS_KEY: InjectionKey<ITableComparisonColsContext> =
+  Symbol('TABLE_COMPARISON_COLS_KEY');

package/utils/tableComparison/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './context';

package/utils/useDiagramAutoScale.ts

@@ -43,7 +43,7 @@ function resolveValue<T>(val: Ref<T> | (() => T) | undefined, fallback: T): T {
 
 /**
  * Automatically computes a scale factor (via CSS transform: scale)
- * so that diagram components (ArrowTriad, QuadHub, ArcArrowProcess, etc.)
+ * so that diagram components (ArrowTriad, RectOrbitTetrad, ArcArrowProcess, etc.)
  * fit comfortably inside the available slide canvas without clipping or overlaying pagination.
  */
 export function useDiagramAutoScale(