@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

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;
+}

package/utils/horizCard/context.ts

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

package/utils/horizCard/createHorizCardGeometry.ts

@@ -0,0 +1,243 @@
+export interface ICreateHorizCardPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly chamferX?: number;
+  readonly chamferY?: number;
+  readonly borderRadius?: number;
+  readonly chamferFillet?: number;
+}
+
+export interface ICreateHorizCardAccentPathParams {
+  readonly width: number;
+  readonly height: number;
+  readonly chamferX?: number;
+  readonly chamferY?: number;
+  readonly accentEndX?: number;
+  readonly accentStartY?: number;
+  readonly chamferFillet?: number;
+  readonly accentOutsetX?: number;
+  readonly accentThickness?: number;
+  readonly accentTopFillet?: number;
+  readonly accentBottomFillet?: number;
+}
+
+export interface ICreateHorizCardBadgePathParams {
+  readonly width?: number;
+  readonly height?: number;
+  readonly topRadius?: number;
+  readonly tipRadius?: number;
+  readonly sideHeight?: number;
+  readonly bottomRadius?: number;
+}
+
+export interface IHexToRgbaParams {
+  readonly hex: string;
+  readonly alpha?: number;
+}
+
+/**
+ * Generates an SVG path for the main HorizCard body.
+ * Features rounded top-left, top-right, and bottom-right corners,
+ * and a smooth filleted chamfer at the bottom-left corner matching the design.
+ */
+export function createHorizCardPath({
+  width,
+  height,
+  chamferX = Math.min(60, Math.round(width * 0.17)),
+  chamferY = Math.min(76, Math.round(height * 0.29)),
+  borderRadius = 24,
+  chamferFillet = 22,
+}: ICreateHorizCardPathParams): string {
+  const safeR = Math.max(
+    0,
+    Math.min(borderRadius, width / 2, (height - chamferY) / 2),
+  );
+
+  const diagLen = Math.hypot(chamferX, chamferY);
+  const ux = diagLen > 0 ? chamferX / diagLen : 0;
+  const uy = diagLen > 0 ? chamferY / diagLen : 0;
+
+  const p1Y = height - chamferY - chamferFillet;
+  const p2X = chamferFillet * ux;
+  const p2Y = height - chamferY + chamferFillet * uy;
+
+  const p3X = chamferX - chamferFillet * ux;
+  const p3Y = height - chamferFillet * uy;
+  const p4X = chamferX + chamferFillet;
+
+  return [
+    `M ${safeR} 0`,
+    `H ${width - safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${width} ${safeR}`,
+    `V ${height - safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${width - safeR} ${height}`,
+    `H ${p4X.toFixed(2)}`,
+    `Q ${chamferX.toFixed(2)} ${height.toFixed(2)} ${p3X.toFixed(2)} ${p3Y.toFixed(2)}`,
+    `L ${p2X.toFixed(2)} ${p2Y.toFixed(2)}`,
+    `Q 0 ${(height - chamferY).toFixed(2)} 0 ${p1Y.toFixed(2)}`,
+    `V ${safeR}`,
+    `A ${safeR} ${safeR} 0 0 1 ${safeR} 0`,
+    'Z',
+  ].join(' ');
+}
+
+/**
+ * Generates an SVG path for the organic accent shape at the bottom-left of the card.
+ * Curves in parallel along with the white card body, featuring 2 distinct rounded curves
+ * (a top fillet and a bottom fillet) flanking the diagonal segment, perfectly mirroring
+ * the white card's dual filleted transitions.
+ */
+export function createHorizCardAccentPath({
+  width,
+  height,
+  chamferX = Math.min(60, Math.round(width * 0.17)),
+  chamferY = Math.min(76, Math.round(height * 0.29)),
+  accentEndX,
+  accentStartY = Math.round(height * 0.28),
+  chamferFillet = 22,
+  accentOutsetX,
+  accentThickness = 16,
+  accentTopFillet = 22,
+  accentBottomFillet = 22,
+}: ICreateHorizCardAccentPathParams): string {
+  const diagLen = Math.hypot(chamferX, chamferY);
+  const ux = diagLen > 0 ? chamferX / diagLen : 0;
+  const uy = diagLen > 0 ? chamferY / diagLen : 0;
+
+  const p1Y = height - chamferY - chamferFillet;
+  const p2X = chamferFillet * ux;
+  const p2Y = height - chamferY + chamferFillet * uy;
+
+  const p3X = chamferX - chamferFillet * ux;
+  const p3Y = height - chamferFillet * uy;
+  const p4X = chamferX + chamferFillet;
+
+  // Normal vector pointing outward/down-left
+  const nx = -uy;
+  const ny = ux;
+
+  // Parallel offset thickness
+  const o2X = p2X + accentThickness * nx;
+  const o2Y = p2Y + accentThickness * ny;
+  const o3X = p3X + accentThickness * nx;
+  const o3Y = p3Y + accentThickness * ny;
+
+  // 1. Bottom vertex & curve (matching white bottom fillet)
+  const tBottom = (height - o3Y) / uy;
+  const vBottomX = o3X + tBottom * ux;
+  const vBottomY = height;
+  const bStartX = vBottomX - accentBottomFillet * ux;
+  const bStartY = vBottomY - accentBottomFillet * uy;
+  const bEndX = vBottomX + accentBottomFillet;
+
+  // 2. Top vertex & curve (matching white top fillet)
+  const outsetX = accentOutsetX ?? accentThickness;
+  const vTopX = -outsetX;
+  const tTop = (vTopX - o2X) / ux;
+  const vTopY = o2Y + tTop * uy;
+  const tStartX = vTopX;
+  const tStartY = vTopY - accentTopFillet;
+  const tEndX = vTopX + accentTopFillet * ux;
+  const tEndY = vTopY + accentTopFillet * uy;
+
+  const startY = accentStartY;
+  const endX = accentEndX ?? Math.round(p4X + 4);
+
+  return [
+    `M 0 ${startY}`,
+    `C -8 ${startY}, ${vTopX} ${startY + 20}, ${tStartX.toFixed(2)} ${tStartY.toFixed(2)}`,
+    // Curve 1: Top fillet transitioning vertical edge into diagonal
+    `Q ${vTopX.toFixed(2)} ${vTopY.toFixed(2)} ${tEndX.toFixed(2)} ${tEndY.toFixed(2)}`,
+    // Straight diagonal running parallel to the white card
+    `L ${bStartX.toFixed(2)} ${bStartY.toFixed(2)}`,
+    // Curve 2: Bottom fillet transitioning diagonal into horizontal edge
+    `Q ${vBottomX.toFixed(2)} ${vBottomY.toFixed(2)} ${bEndX.toFixed(2)} ${height}`,
+    `H ${endX}`,
+    `L ${p4X.toFixed(2)} ${height}`,
+    `Q ${chamferX.toFixed(2)} ${height.toFixed(2)} ${p3X.toFixed(2)} ${p3Y.toFixed(2)}`,
+    `L ${p2X.toFixed(2)} ${p2Y.toFixed(2)}`,
+    `Q 0 ${(height - chamferY).toFixed(2)} 0 ${p1Y.toFixed(2)}`,
+    `L 0 ${startY}`,
+    'Z',
+  ].join(' ');
+}
+
+/**
+ * Generates an SVG path for the top ribbon step badge.
+ * Features 5 distinct rounded curves matching the design:
+ * 1. Top-Left rounded corner
+ * 2. Top-Right rounded corner
+ * 3. Bottom-Right rounded corner
+ * 4. Bottom-Center pointed tip curve
+ * 5. Bottom-Left rounded corner
+ */
+export function createHorizCardBadgePath({
+  width = 84,
+  height = 58,
+  topRadius = 12,
+  tipRadius = 8,
+  sideHeight = 46,
+  bottomRadius = 8,
+}: ICreateHorizCardBadgePathParams = {}): string {
+  const halfW = width / 2;
+  const dx = halfW;
+  const dy = height - sideHeight;
+  const len = Math.hypot(dx, dy);
+  const ux = len > 0 ? dx / len : 0;
+  const uy = len > 0 ? dy / len : 0;
+
+  return [
+    // 1. Top-Left curve
+    `M ${topRadius} 0`,
+    // Top horizontal edge
+    `H ${width - topRadius}`,
+    // 2. Top-Right curve
+    `A ${topRadius} ${topRadius} 0 0 1 ${width} ${topRadius}`,
+    // Right vertical edge
+    `V ${sideHeight - bottomRadius}`,
+    // 3. Bottom-Right curve
+    `Q ${width} ${sideHeight} ${(width - bottomRadius * ux).toFixed(2)} ${(sideHeight + bottomRadius * uy).toFixed(2)}`,
+    // Bottom-right diagonal edge
+    `L ${(halfW + tipRadius * ux).toFixed(2)} ${(height - tipRadius * uy).toFixed(2)}`,
+    // 4. Bottom-Center tip curve
+    `Q ${halfW} ${height} ${(halfW - tipRadius * ux).toFixed(2)} ${(height - tipRadius * uy).toFixed(2)}`,
+    // Bottom-left diagonal edge
+    `L ${(bottomRadius * ux).toFixed(2)} ${(sideHeight + bottomRadius * uy).toFixed(2)}`,
+    // 5. Bottom-Left curve
+    `Q 0 ${sideHeight} 0 ${sideHeight - bottomRadius}`,
+    // Left vertical edge
+    `V ${topRadius}`,
+    `A ${topRadius} ${topRadius} 0 0 1 ${topRadius} 0`,
+    'Z',
+  ].join(' ');
+}
+
+/**
+ * Converts a hex color string to an RGBA string with the given alpha transparency.
+ */
+export function hexToRgba({ hex, alpha = 0.15 }: IHexToRgbaParams): string {
+  let sanitized = hex.trim().replace(/^#/, '');
+
+  if (sanitized.length === 3) {
+    sanitized = sanitized
+      .split('')
+      .map((char) => {
+        return char + char;
+      })
+      .join('');
+  }
+
+  if (sanitized.length !== 6) {
+    return hex;
+  }
+
+  const r = Number.parseInt(sanitized.slice(0, 2), 16);
+  const g = Number.parseInt(sanitized.slice(2, 4), 16);
+  const b = Number.parseInt(sanitized.slice(4, 6), 16);
+
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return hex;
+  }
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/utils/horizCard/index.ts

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

package/utils/quadHub/context.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+import type { IQuadHubItem, IResolvedQuadHubItem } from './resolveQuadHubItems';
+
+export interface IQuadHubRegistration {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedQuadHubItem>;
+  readonly setCustomBadge?: (text: string | number) => void;
+}
+
+export interface IQuadHubRootContext {
+  readonly animation?: ComputedRef<boolean>;
+  readonly registerCallout: (props?: IQuadHubItem) => IQuadHubRegistration;
+  readonly items: ComputedRef<readonly IResolvedQuadHubItem[]>;
+}
+
+export interface IQuadHubCalloutContext {
+  readonly index: number;
+  readonly item: ComputedRef<IResolvedQuadHubItem>;
+}
+
+export const QUAD_HUB_ROOT_KEY: InjectionKey<IQuadHubRootContext> =
+  Symbol('QUAD_HUB_ROOT_KEY');
+
+export const QUAD_HUB_CALLOUT_KEY: InjectionKey<IQuadHubCalloutContext> =
+  Symbol('QUAD_HUB_CALLOUT_KEY');