@alphacifer/slidev-addon-theme 0.0.4 → 0.0.6

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');

package/utils/quadHub/createQuadHubGeometry.ts

@@ -0,0 +1,331 @@
+export interface IQuadPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface IQuadBox {
+  readonly x: number;
+  readonly y: number;
+  readonly rx: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface IQuadHubCoordinates {
+  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 viewBoxSize: number;
+  readonly iconPositions: readonly [
+    IQuadPoint,
+    IQuadPoint,
+    IQuadPoint,
+    IQuadPoint,
+  ];
+  readonly arcBorderWidth: number;
+  readonly numberPositions: readonly [
+    IQuadPoint,
+    IQuadPoint,
+    IQuadPoint,
+    IQuadPoint,
+  ];
+}
+
+function createArcPath(
+  cx: number,
+  cy: number,
+  radius: number,
+  startAngleDeg: number,
+  endAngleDeg: number,
+): string {
+  const startRad = (startAngleDeg * Math.PI) / 180;
+  const endRad = (endAngleDeg * Math.PI) / 180;
+
+  const x1 = Number((cx + radius * Math.cos(startRad)).toFixed(2));
+  const y1 = Number((cy + radius * Math.sin(startRad)).toFixed(2));
+  const x2 = Number((cx + radius * Math.cos(endRad)).toFixed(2));
+  const y2 = Number((cy + radius * Math.sin(endRad)).toFixed(2));
+
+  const largeArcFlag = Math.abs(endAngleDeg - startAngleDeg) > 180 ? 1 : 0;
+
+  return `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`;
+}
+
+export interface ICalculateQuadHubCoordinatesParams {
+  readonly gap?: number;
+  readonly width?: number;
+  readonly height?: number;
+  readonly arcRadius?: number;
+  readonly hubRadius?: number;
+  readonly arcInsetDeg?: number;
+  readonly viewBoxSize?: number;
+  readonly cornerRadius?: number;
+  readonly iconPaddingX?: number;
+  readonly iconPaddingY?: number;
+  readonly arcBorderWidth?: number;
+}
+
+/**
+ * Calculates geometric coordinates for the QuadHub 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({
+  gap = 14,
+  width = 136,
+  height = 150,
+  hubRadius = 58,
+  arcRadius = 104,
+  arcInsetDeg = 11,
+  viewBoxSize = 360,
+  cornerRadius = 26,
+  iconPaddingX = 30,
+  iconPaddingY = 32,
+  arcBorderWidth = 5,
+}: ICalculateQuadHubCoordinatesParams = {}): IQuadHubCoordinates {
+  const centerX = viewBoxSize / 2;
+  const centerY = viewBoxSize / 2;
+  const halfGap = gap / 2;
+
+  // Quadrants:
+  // 0: Top-Left (1)
+  const q0: IQuadBox = {
+    x: centerX - halfGap - width,
+    y: centerY - halfGap - height,
+    rx: cornerRadius,
+    width,
+    height,
+  };
+
+  // 1: Top-Right (2)
+  const q1: IQuadBox = {
+    x: centerX + halfGap,
+    y: centerY - halfGap - height,
+    rx: cornerRadius,
+    width,
+    height,
+  };
+
+  // 2: Bottom-Right (3)
+  const q2: IQuadBox = {
+    x: centerX + halfGap,
+    y: centerY + halfGap,
+    rx: cornerRadius,
+    width,
+    height,
+  };
+
+  // 3: Bottom-Left (4)
+  const q3: IQuadBox = {
+    x: centerX - halfGap - width,
+    y: centerY + halfGap,
+    rx: cornerRadius,
+    width,
+    height,
+  };
+
+  // Number positions (centered in the arc ribbon between hubRadius and arcRadius)
+  const numberRadius = (hubRadius + arcRadius) / 2;
+  const rad = (38 * Math.PI) / 180;
+  const offsetX = Number((numberRadius * Math.cos(rad)).toFixed(2));
+  const offsetY = Number((numberRadius * Math.sin(rad)).toFixed(2));
+
+  // 0: Top-Left (1)
+  const num0: IQuadPoint = {
+    x: centerX - offsetX,
+    y: centerY - offsetY,
+  };
+  // 1: Top-Right (2)
+  const num1: IQuadPoint = {
+    x: centerX + offsetX,
+    y: centerY - offsetY,
+  };
+  // 2: Bottom-Right (3)
+  const num2: IQuadPoint = {
+    x: centerX + offsetX,
+    y: centerY + offsetY,
+  };
+  // 3: Bottom-Left (4)
+  const num3: IQuadPoint = {
+    x: centerX - offsetX,
+    y: centerY + offsetY,
+  };
+
+  // Icon positions (in outer corner of each block)
+  // 0: Top-Left (1)
+  const icon0: IQuadPoint = {
+    x: q0.x + iconPaddingX,
+    y: q0.y + iconPaddingY,
+  };
+  // 1: Top-Right (2)
+  const icon1: IQuadPoint = {
+    x: q1.x + q1.width - iconPaddingX,
+    y: q1.y + iconPaddingY,
+  };
+  // 2: Bottom-Right (3)
+  const icon2: IQuadPoint = {
+    x: q2.x + q2.width - iconPaddingX,
+    y: q2.y + q2.height - iconPaddingY,
+  };
+  // 3: Bottom-Left (4)
+  const icon3: IQuadPoint = {
+    x: q3.x + iconPaddingX,
+    y: q3.y + q3.height - iconPaddingY,
+  };
+
+  // In SVG, stroke of width W centered on radius R extends [R - W/2, R + W/2].
+  // By placing the arc path center at arcRadius + arcBorderWidth / 2, the inner edge
+  // of the stroke is exactly arcRadius, touching the pastel circle with zero overlay.
+  const arcStrokeRadius = arcRadius + arcBorderWidth / 2;
+
+  // 0: Top-Left (1)
+  const p0 = createArcPath(
+    centerX,
+    centerY,
+    arcStrokeRadius,
+    -180 + arcInsetDeg,
+    -90 - arcInsetDeg,
+  );
+  // 1: Top-Right (2)
+  const p1 = createArcPath(
+    centerX,
+    centerY,
+    arcStrokeRadius,
+    -90 + arcInsetDeg,
+    0 - arcInsetDeg,
+  );
+  // 2: Bottom-Right (3)
+  const p2 = createArcPath(
+    centerX,
+    centerY,
+    arcStrokeRadius,
+    0 + arcInsetDeg,
+    90 - arcInsetDeg,
+  );
+  // 3: Bottom-Left (4)
+  const p3 = createArcPath(
+    centerX,
+    centerY,
+    arcStrokeRadius,
+    90 + arcInsetDeg,
+    180 - arcInsetDeg,
+  );
+
+  return {
+    centerX,
+    centerY,
+    arcPaths: [p0, p1, p2, p3],
+    arcRadius,
+    hubRadius,
+    quadrants: [q0, q1, q2, q3],
+    viewBoxSize,
+    iconPositions: [icon0, icon1, icon2, icon3],
+    arcBorderWidth,
+    numberPositions: [num0, num1, num2, num3],
+  };
+}
+
+export interface ILightenColorParams {
+  readonly hex: string;
+  readonly ratio?: number;
+}
+
+/**
+ * Automatically lightens a base hex color by mixing it with white.
+ * ratio: 0 = original color, 1 = pure white.
+ */
+export function lightenColor({
+  hex,
+  ratio = 0.5,
+}: ILightenColorParams): string {
+  const raw = hex.trim().replace(/^#/, '');
+  const sanitized =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((char) => {
+            return char + char;
+          })
+          .join('')
+      : raw;
+
+  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;
+  }
+
+  const clamp = (val: number): number => {
+    return Math.min(255, Math.max(0, Math.round(val)));
+  };
+
+  const lr = clamp(r + (255 - r) * ratio);
+  const lg = clamp(g + (255 - g) * ratio);
+  const lb = clamp(b + (255 - b) * ratio);
+
+  const toHex = (n: number): string => {
+    return n.toString(16).padStart(2, '0');
+  };
+
+  return `#${toHex(lr)}${toHex(lg)}${toHex(lb)}`;
+}
+
+export interface IDarkenColorParams {
+  readonly hex: string;
+  readonly ratio?: number;
+}
+
+/**
+ * Automatically darkens a base hex color by mixing it with black.
+ * ratio: 0 = original color, 1 = pure black.
+ */
+export function darkenColor({ hex, ratio = 0.18 }: IDarkenColorParams): string {
+  const raw = hex.trim().replace(/^#/, '');
+  const sanitized =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((char) => {
+            return char + char;
+          })
+          .join('')
+      : raw;
+
+  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;
+  }
+
+  const clamp = (val: number): number => {
+    return Math.min(255, Math.max(0, Math.round(val)));
+  };
+
+  const dr = clamp(r * (1 - ratio));
+  const dg = clamp(g * (1 - ratio));
+  const db = clamp(b * (1 - ratio));
+
+  const toHex = (n: number): string => {
+    return n.toString(16).padStart(2, '0');
+  };
+
+  return `#${toHex(dr)}${toHex(dg)}${toHex(db)}`;
+}

package/utils/quadHub/index.ts

@@ -0,0 +1,3 @@
+export * from './context';
+export * from './createQuadHubGeometry';
+export * from './resolveQuadHubItems';