@alphacifer/slidev-addon-theme 0.0.5 → 0.0.6

package/utils/arcCompare/resolveArcCompareItems.ts

@@ -0,0 +1,123 @@
+export interface IArcCompareItem {
+  readonly id?: string | number;
+  readonly title?: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcCompareItem {
+  readonly id: string | number;
+  readonly title: string;
+  readonly description: string;
+  readonly color: string;
+  readonly textColor?: string;
+}
+
+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_LEFT_ITEMS: readonly [
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+] = [
+  {
+    id: '01',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '02',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '03',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+  {
+    id: '04',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_LEFT_COLOR,
+  },
+];
+
+export const DEFAULT_RIGHT_ITEMS: readonly [
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+  IResolvedArcCompareItem,
+] = [
+  {
+    id: '01',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '02',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '03',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+  {
+    id: '04',
+    title: 'Add Text Here',
+    description: DEFAULT_LOREM_TEXT,
+    color: DEFAULT_RIGHT_COLOR,
+  },
+];
+
+export function resolveArcCompareSideItems(
+  items?: readonly IArcCompareItem[],
+  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;
+}

package/utils/arrowTriad/context.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IResolvedArrowTriadItem } from './resolveArrowTriadItems';
+
+export type TArrowTriadLayout =
+  | '2-left-1-right'
+  | '1-left-2-right'
+  | '2-left'
+  | '1-left';
+
+export interface IArrowTriadRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedArrowTriadItem>;
+}
+
+export interface IArrowTriadRootContext {
+  readonly animation: ComputedRef<boolean>;
+  readonly layout: ComputedRef<TArrowTriadLayout>;
+  readonly registerCallout: () => IArrowTriadRegistration;
+  readonly items: ComputedRef<
+    readonly [
+      IResolvedArrowTriadItem,
+      IResolvedArrowTriadItem,
+      IResolvedArrowTriadItem,
+    ]
+  >;
+}
+
+export interface IArrowTriadCalloutContext {
+  readonly item: ComputedRef<IResolvedArrowTriadItem>;
+  readonly index: number;
+}
+
+export const ARROW_TRIAD_ROOT_KEY: InjectionKey<IArrowTriadRootContext> =
+  Symbol('ARROW_TRIAD_ROOT_KEY');
+
+export const ARROW_TRIAD_CALLOUT_KEY: InjectionKey<IArrowTriadCalloutContext> =
+  Symbol('ARROW_TRIAD_CALLOUT_KEY');

package/utils/arrowTriad/createArrowTriadGeometry.ts

@@ -0,0 +1,63 @@
+export interface IArrowTriadPathData {
+  readonly path: string;
+  readonly stemPath: string;
+  readonly outerHeadPoints: string;
+  readonly innerHeadPoints: string;
+  readonly neckLine: string;
+}
+
+export interface IArrowTriadGeometry {
+  readonly viewBoxWidth: number;
+  readonly viewBoxHeight: number;
+  readonly blueArrow: IArrowTriadPathData;
+  readonly yellowArrow: IArrowTriadPathData;
+  readonly greenArrow: IArrowTriadPathData;
+  readonly dashedArcs: readonly string[];
+}
+
+/**
+ * Precision coordinates and SVG paths for the 3-way curved arrow triad diagram.
+ * Directly extracted from the design template (560 x 662):
+ * - Equilateral/isosceles triangle arrowheads with symmetrical barb overhangs.
+ * - Inset framed inner triangle facets with darker depth stroke.
+ * - Clean curved stems meeting at 120-degree central pie junction.
+ * - Concentric dashed guide lines centered in each gap.
+ */
+export function createArrowTriadGeometry(): IArrowTriadGeometry {
+  return {
+    viewBoxWidth: 560,
+    viewBoxHeight: 662,
+    yellowArrow: {
+      path: 'M 526 31 L 429 89 L 437 92 C 431 188, 383 244, 324 281 L 352 329 L 408 329 C 410 260, 435 190, 515 137 L 528 144 Z',
+      stemPath:
+        'M 352 329 L 408 329 C 410 260, 435 190, 515 137 L 437 92 C 431 188, 383 244, 324 281 Z',
+      outerHeadPoints: '429,89 526,31 528,144',
+      innerHeadPoints: '447,89 517,47 518,128',
+      neckLine: 'M 429 89 L 528 144',
+    },
+    greenArrow: {
+      path: 'M 523 629 L 424 574 L 437 566 C 431 470, 383 414, 324 377 L 352 329 L 408 329 C 410 398, 435 468, 515 521 L 521 516 Z',
+      stemPath:
+        'M 352 329 L 324 377 C 383 414, 431 470, 437 566 L 515 521 C 435 468, 410 398, 408 329 Z',
+      outerHeadPoints: '424,574 523,629 521,516',
+      innerHeadPoints: '512,531 514,613 443,573',
+      neckLine: 'M 424 574 L 521 516',
+    },
+    blueArrow: {
+      path: 'M 7 327 L 104 269 L 104 284 C 190 327, 263 313, 324 281 L 352 329 L 324 377 C 263 345, 190 331, 104 374 L 106 382 Z',
+      stemPath:
+        'M 352 329 L 324 281 C 263 313, 190 327, 104 284 L 104 374 C 190 331, 263 345, 324 377 Z',
+      outerHeadPoints: '104,269 7,327 106,382',
+      innerHeadPoints: '97,367 25,327 95,286',
+      neckLine: 'M 104 269 L 106 382',
+    },
+    dashedArcs: [
+      // Blue to Yellow (top-left)
+      'M 145 251 C 245 301, 383 221, 389 110',
+      // Yellow to Green (right crescent)
+      'M 523 189 C 430 250, 430 410, 523 471',
+      // Blue to Green (bottom-left)
+      'M 144 406 C 243 356, 381 436, 388 547',
+    ],
+  };
+}

package/utils/arrowTriad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createArrowTriadGeometry';
+export * from './resolveArrowTriadItems';

package/utils/arrowTriad/resolveArrowTriadItems.ts

@@ -0,0 +1,121 @@
+export interface IArrowTriadItem {
+  readonly id?: string | number;
+  readonly color?: string;
+  readonly depthColor?: string;
+  readonly title?: string;
+  readonly description?: string;
+  readonly icon?: string | object | false;
+  readonly cardBg?: string;
+  readonly textColor?: string;
+  readonly titleColor?: string;
+}
+
+export interface IResolvedArrowTriadItem {
+  readonly id: string | number;
+  readonly color: string;
+  readonly depthColor: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string | object | false;
+  readonly cardBg: string;
+  readonly textColor: string;
+  readonly titleColor: string;
+}
+
+const defaultItem0: IResolvedArrowTriadItem = {
+  id: '01',
+  color: '#fec201',
+  depthColor: '#d59b01',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+const defaultItem1: IResolvedArrowTriadItem = {
+  id: '02',
+  color: '#71ad49',
+  depthColor: '#548235',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo cupidatat non proident, sunt',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+const defaultItem2: IResolvedArrowTriadItem = {
+  id: '03',
+  color: '#5b9bd5',
+  depthColor: '#41719c',
+  title: 'TITLE TEXT HERE',
+  description:
+    'Magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo',
+  icon: undefined,
+  cardBg: '#ffffff',
+  textColor: '#64748b',
+  titleColor: '#1e293b',
+};
+
+export const DEFAULT_ARROW_TRIAD_ITEMS: readonly [
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+] = [defaultItem0, defaultItem1, defaultItem2];
+
+export function getDefaultArrowTriadItem(
+  index: number,
+): IResolvedArrowTriadItem {
+  const safe = Math.abs(index) % 3;
+
+  if (safe === 1) {
+    return defaultItem1;
+  }
+
+  if (safe === 2) {
+    return defaultItem2;
+  }
+
+  return defaultItem0;
+}
+
+export function resolveSingleArrowTriadItem(
+  item: IArrowTriadItem | undefined,
+  fallbackIndex = 0,
+): IResolvedArrowTriadItem {
+  const fallback = getDefaultArrowTriadItem(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 ?? fallback.cardBg,
+    textColor: item.textColor ?? fallback.textColor,
+    titleColor: item.titleColor ?? fallback.titleColor,
+  };
+}
+
+export function resolveArrowTriadItems(
+  items?: readonly IArrowTriadItem[],
+): readonly [
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+  IResolvedArrowTriadItem,
+] {
+  return [
+    resolveSingleArrowTriadItem(items?.[0], 0),
+    resolveSingleArrowTriadItem(items?.[1], 1),
+    resolveSingleArrowTriadItem(items?.[2], 2),
+  ];
+}

package/utils/chevronCard/context.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export interface IChevronCardContext {
+  readonly step: ComputedRef<string | number>;
+  readonly color: ComputedRef<string>;
+  readonly cardBg: ComputedRef<string>;
+  readonly textColor: ComputedRef<string | undefined>;
+  readonly titleColor: ComputedRef<string | undefined>;
+}
+
+export const CHEVRON_CARD_KEY: InjectionKey<IChevronCardContext> =
+  Symbol('CHEVRON_CARD_KEY');

package/utils/chevronCard/createChevronCardGeometry.ts

@@ -0,0 +1,48 @@
+export interface ICreateChevronPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly notchDepth?: number;
+}
+
+/**
+ * Generates an SVG path for the chevron badge.
+ * Features an indented notched tail on the left and a protruding arrow tip on the right.
+ */
+export function createChevronPath({
+  width,
+  height,
+  notchDepth = 26,
+}: ICreateChevronPathParams): string {
+  const safeNotch = Math.max(0, Math.min(notchDepth, width / 2));
+  const halfH = height / 2;
+
+  return `M 0 0 L ${width - safeNotch} 0 L ${width} ${halfH} L ${width - safeNotch} ${height} L 0 ${height} L ${safeNotch} ${halfH} Z`;
+}
+
+export interface ICreateChevronCardBodyPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly notchDepth?: number;
+  readonly borderRadius?: number;
+}
+
+/**
+ * Generates an SVG path for the card body container.
+ * Left edge matches the chevron notch so slide background shows through;
+ * right edge features smooth rounded corners.
+ */
+export function createChevronCardBodyPath({
+  width,
+  height,
+  notchDepth = 26,
+  borderRadius = 18,
+}: ICreateChevronCardBodyPathParams): string {
+  const safeNotch = Math.max(0, Math.min(notchDepth, width / 2));
+  const safeR = Math.max(
+    0,
+    Math.min(borderRadius, (width - safeNotch) / 2, height / 2),
+  );
+  const halfH = height / 2;
+
+  return `M 0 0 L ${width - safeR} 0 A ${safeR} ${safeR} 0 0 1 ${width} ${safeR} L ${width} ${height - safeR} A ${safeR} ${safeR} 0 0 1 ${width - safeR} ${height} L 0 ${height} L ${safeNotch} ${halfH} Z`;
+}

package/utils/chevronCard/index.ts

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

package/utils/hexTriad/context.ts

@@ -0,0 +1,25 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IHexTriadItem } from './resolveHexTriadItems';
+
+export interface IHexTriadRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly items: ComputedRef<readonly IHexTriadItem[]>;
+  readonly registerCallout: () => {
+    readonly index: number;
+    readonly item: ComputedRef<IHexTriadItem>;
+    readonly setBadgeText: (text: string | number) => void;
+  };
+}
+
+export interface IHexTriadCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IHexTriadItem>;
+  readonly setBadgeText: (text: string | number) => void;
+}
+
+export const HEX_TRIAD_ROOT_KEY: InjectionKey<IHexTriadRootContext> =
+  Symbol('HEX_TRIAD_ROOT_KEY');
+
+export const HEX_TRIAD_CALLOUT_KEY: InjectionKey<IHexTriadCalloutContext> =
+  Symbol('HEX_TRIAD_CALLOUT_KEY');

package/utils/hexTriad/createHexTriadGeometry.ts

@@ -0,0 +1,182 @@
+export interface IHexTriadPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IHexTriadCoordinates {
+  readonly centerX: number;
+  readonly centerY: number;
+  readonly hexRadius: number;
+  readonly triadRadius: number;
+  readonly badgeRadius: number;
+  readonly hex1: IHexTriadPoint;
+  readonly hex2: IHexTriadPoint;
+  readonly hex3: IHexTriadPoint;
+  readonly badge1: IHexTriadPoint;
+  readonly badge2: IHexTriadPoint;
+  readonly badge3: IHexTriadPoint;
+}
+
+/**
+ * Creates pointy-topped hexagon SVG points with sharp vertices
+ */
+export function createHexagonPoints(cx: number, cy: number, r: number): string {
+  const angles = [-90, -30, 30, 90, 150, 210];
+
+  return angles
+    .map((deg) => {
+      const rad = (deg * Math.PI) / 180;
+      const x = (cx + r * Math.cos(rad)).toFixed(1);
+      const y = (cy + r * Math.sin(rad)).toFixed(1);
+
+      return `${x},${y}`;
+    })
+    .join(' ');
+}
+
+/**
+ * Creates a pointy-topped hexagon SVG path with smoothly rounded corners
+ */
+export function createRoundedHexagonPath(
+  cx: number,
+  cy: number,
+  r: number,
+  cornerRadius = 16,
+): string {
+  const angles = [-90, -30, 30, 90, 150, 210];
+  const vertices = angles.map((deg) => {
+    const rad = (deg * Math.PI) / 180;
+    return {
+      x: cx + r * Math.cos(rad),
+      y: cy + r * Math.sin(rad),
+    };
+  });
+
+  const d = Math.min(cornerRadius, r * 0.3);
+  const commands: string[] = [];
+
+  for (let i = 0; i < 6; i += 1) {
+    const prev = vertices[(i + 5) % 6];
+    const curr = vertices[i];
+    const next = vertices[(i + 1) % 6];
+
+    if (!prev || !curr || !next) {
+      continue;
+    }
+
+    const lenPrev = Math.hypot(prev.x - curr.x, prev.y - curr.y);
+    const lenNext = Math.hypot(next.x - curr.x, next.y - curr.y);
+
+    const a = {
+      x: curr.x + ((prev.x - curr.x) / lenPrev) * d,
+      y: curr.y + ((prev.y - curr.y) / lenPrev) * d,
+    };
+    const b = {
+      x: curr.x + ((next.x - curr.x) / lenNext) * d,
+      y: curr.y + ((next.y - curr.y) / lenNext) * d,
+    };
+
+    if (i === 0) {
+      commands.push(`M ${b.x.toFixed(1)} ${b.y.toFixed(1)}`);
+    } else {
+      commands.push(
+        `L ${a.x.toFixed(1)} ${a.y.toFixed(1)} Q ${curr.x.toFixed(1)} ${curr.y.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`,
+      );
+    }
+  }
+
+  const prev0 = vertices[5];
+  const curr0 = vertices[0];
+  const next0 = vertices[1];
+
+  if (prev0 && curr0 && next0) {
+    const len0 = Math.hypot(prev0.x - curr0.x, prev0.y - curr0.y);
+    const lenNext0 = Math.hypot(next0.x - curr0.x, next0.y - curr0.y);
+    const a0 = {
+      x: curr0.x + ((prev0.x - curr0.x) / len0) * d,
+      y: curr0.y + ((prev0.y - curr0.y) / len0) * d,
+    };
+    const b0 = {
+      x: curr0.x + ((next0.x - curr0.x) / lenNext0) * d,
+      y: curr0.y + ((next0.y - curr0.y) / lenNext0) * d,
+    };
+    commands.push(
+      `L ${a0.x.toFixed(1)} ${a0.y.toFixed(1)} Q ${curr0.x.toFixed(1)} ${curr0.y.toFixed(1)} ${b0.x.toFixed(1)} ${b0.y.toFixed(1)} Z`,
+    );
+  }
+
+  return commands.join(' ');
+}
+
+export function calculateHexTriadCoordinates(
+  centerX = 270,
+  centerY = 224,
+  triadRadius = 66,
+  hexRadius = 114,
+  badgeRadius = 28,
+  horizontalSpread = 28,
+): IHexTriadCoordinates {
+  const angleRad30 = (30 * Math.PI) / 180;
+
+  const hex2X = Number(
+    (centerX + triadRadius * Math.cos(angleRad30) + horizontalSpread).toFixed(
+      2,
+    ),
+  );
+  const hex3X = Number(
+    (centerX - triadRadius * Math.cos(angleRad30) - horizontalSpread).toFixed(
+      2,
+    ),
+  );
+  const bottomY = Number(
+    (centerY + triadRadius * Math.sin(angleRad30)).toFixed(2),
+  );
+
+  // Exact equilateral height so that all three pairwise overlap areas are equal:
+  const spreadDistance = hex2X - hex3X;
+  const equilateralHeight = Number(
+    (spreadDistance * (Math.sqrt(3) / 2)).toFixed(2),
+  );
+  const hex1Y = Number((bottomY - equilateralHeight).toFixed(2));
+
+  const circumCenterY = Number(((hex1Y + 2 * bottomY) / 3).toFixed(2));
+  // Set circle radius to hexRadius (114) so it crosses the three yellow points
+  const circleRadius = hexRadius;
+
+  // Badges centered directly ON the white circle:
+  const badge1 = {
+    x: centerX,
+    y: Number((circumCenterY - circleRadius).toFixed(2)),
+  };
+  const badge2 = {
+    x: Number((centerX + circleRadius * Math.cos(angleRad30)).toFixed(2)),
+    y: Number((circumCenterY + circleRadius * Math.sin(angleRad30)).toFixed(2)),
+  };
+  const badge3 = {
+    x: Number((centerX - circleRadius * Math.cos(angleRad30)).toFixed(2)),
+    y: Number((circumCenterY + circleRadius * Math.sin(angleRad30)).toFixed(2)),
+  };
+
+  return {
+    centerX,
+    centerY: circumCenterY,
+    hexRadius,
+    triadRadius: circleRadius,
+    badgeRadius,
+    hex1: {
+      x: centerX,
+      y: hex1Y,
+    },
+    hex2: {
+      x: hex2X,
+      y: bottomY,
+    },
+    hex3: {
+      x: hex3X,
+      y: bottomY,
+    },
+    badge1,
+    badge2,
+    badge3,
+  };
+}

package/utils/hexTriad/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createHexTriadGeometry';
+export * from './resolveHexTriadItems';

package/utils/hexTriad/resolveHexTriadItems.ts

@@ -0,0 +1,63 @@
+export interface IHexTriadItem {
+  readonly id?: string | number;
+  readonly title: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly depthColor?: string;
+  readonly lightColor?: string;
+}
+
+export const DEFAULT_HEX_TRIAD_ITEMS: readonly [
+  IHexTriadItem,
+  IHexTriadItem,
+  IHexTriadItem,
+] = [
+  {
+    id: '01',
+    title: 'Text Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod sed diam nonummy nibh',
+    color: '#ee3248',
+    depthColor: '#9e1526',
+    lightColor: '#ff8595',
+  },
+  {
+    id: '02',
+    title: 'Text Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod sed diam nonummy nibh',
+    color: '#f26522',
+    depthColor: '#a83908',
+    lightColor: '#ffb088',
+  },
+  {
+    id: '03',
+    title: 'Text Here',
+    description:
+      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod sed diam nonummy nibh',
+    color: '#2b4594',
+    depthColor: '#172554',
+    lightColor: '#8da4e2',
+  },
+];
+
+export function resolveHexTriadItems(
+  userItems?: readonly IHexTriadItem[],
+): readonly [IHexTriadItem, IHexTriadItem, IHexTriadItem] {
+  const items = userItems ?? [];
+
+  return [
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[0],
+      ...(items[0] ?? {}),
+    },
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[1],
+      ...(items[1] ?? {}),
+    },
+    {
+      ...DEFAULT_HEX_TRIAD_ITEMS[2],
+      ...(items[2] ?? {}),
+    },
+  ] as const;
+}