@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/utils/activateOnKeyboard.ts

@@ -0,0 +1,14 @@
+/** Dispatch the same click event for Enter and Space on a focused control. */
+export function activateOnKeyboard(event: KeyboardEvent): void {
+  if (
+    event.target !== event.currentTarget ||
+    (event.key !== 'Enter' && event.key !== ' ')
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+  event.currentTarget?.dispatchEvent(
+    new MouseEvent('click', { bubbles: true, cancelable: true }),
+  );
+}

package/utils/{chevronCard → card/chevron-card}/context.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, InjectionKey } from 'vue';
 
 export interface IChevronCardContext {
   readonly step: ComputedRef<string | number>;
-  readonly color: ComputedRef<string>;
+  readonly color: ComputedRef<string | undefined>;
   readonly cardBg: ComputedRef<string>;
   readonly textColor: ComputedRef<string | undefined>;
   readonly titleColor: ComputedRef<string | undefined>;

package/utils/card/chevron-card/index.ts

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

package/utils/card/horizontal-card/context.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export type THorizontalCardBadgeVariant = 'outside' | 'none' | 'hidden';
+
+export interface IHorizontalCardContext {
+  readonly color: ComputedRef<string>;
+  readonly step: ComputedRef<string | number>;
+  readonly textColor: ComputedRef<string | undefined>;
+}
+
+export const HORIZ_CARD_KEY: InjectionKey<IHorizontalCardContext> =
+  Symbol('HORIZ_CARD');

package/utils/{horizCard/createHorizCardGeometry.ts → card/horizontal-card/createHorizontalCardGeometry.ts}

@@ -1,4 +1,4 @@
-export interface ICreateHorizCardPathParams {
+export interface ICreateHorizontalCardPathParams {
   readonly width: number;
   readonly height: number;
   readonly chamferX?: number;
@@ -7,7 +7,7 @@ export interface ICreateHorizCardPathParams {
   readonly chamferFillet?: number;
 }
 
-export interface ICreateHorizCardAccentPathParams {
+export interface ICreateHorizontalCardAccentPathParams {
   readonly width: number;
   readonly height: number;
   readonly chamferX?: number;
@@ -21,7 +21,7 @@ export interface ICreateHorizCardAccentPathParams {
   readonly accentBottomFillet?: number;
 }
 
-export interface ICreateHorizCardBadgePathParams {
+export interface ICreateHorizontalCardBadgePathParams {
   readonly width?: number;
   readonly height?: number;
   readonly topRadius?: number;
@@ -30,24 +30,19 @@ export interface ICreateHorizCardBadgePathParams {
   readonly bottomRadius?: number;
 }
 
-export interface IHexToRgbaParams {
-  readonly hex: string;
-  readonly alpha?: number;
-}
-
 /**
- * Generates an SVG path for the main HorizCard body.
+ * Generates an SVG path for the main HorizontalCard 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({
+export function createHorizontalCardPath({
   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 {
+}: ICreateHorizontalCardPathParams): string {
   const safeR = Math.max(
     0,
     Math.min(borderRadius, width / 2, (height - chamferY) / 2),
@@ -87,7 +82,7 @@ export function createHorizCardPath({
  * (a top fillet and a bottom fillet) flanking the diagonal segment, perfectly mirroring
  * the white card's dual filleted transitions.
  */
-export function createHorizCardAccentPath({
+export function createHorizontalCardAccentPath({
   width,
   height,
   chamferX = Math.min(60, Math.round(width * 0.17)),
@@ -99,7 +94,7 @@ export function createHorizCardAccentPath({
   accentThickness = 16,
   accentTopFillet = 22,
   accentBottomFillet = 22,
-}: ICreateHorizCardAccentPathParams): string {
+}: ICreateHorizontalCardAccentPathParams): string {
   const diagLen = Math.hypot(chamferX, chamferY);
   const ux = diagLen > 0 ? chamferX / diagLen : 0;
   const uy = diagLen > 0 ? chamferY / diagLen : 0;
@@ -171,14 +166,14 @@ export function createHorizCardAccentPath({
  * 4. Bottom-Center pointed tip curve
  * 5. Bottom-Left rounded corner
  */
-export function createHorizCardBadgePath({
+export function createHorizontalCardBadgePath({
   width = 84,
   height = 58,
   topRadius = 12,
   tipRadius = 8,
   sideHeight = 46,
   bottomRadius = 8,
-}: ICreateHorizCardBadgePathParams = {}): string {
+}: ICreateHorizontalCardBadgePathParams = {}): string {
   const halfW = width / 2;
   const dx = halfW;
   const dy = height - sideHeight;
@@ -211,33 +206,3 @@ export function createHorizCardBadgePath({
     '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/card/horizontal-card/index.ts

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

package/utils/card/vertical-card/context.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+export type TVerticalCardBadgeVariant =
+  | 'outside'
+  | 'inside'
+  | 'none'
+  | 'hidden';
+
+export interface IVerticalCardContext {
+  readonly color: ComputedRef<string>;
+  readonly cardBg: ComputedRef<string>;
+  readonly hasDivider?: ComputedRef<boolean>;
+  readonly step: ComputedRef<string | number>;
+  readonly textColor: ComputedRef<string | undefined>;
+  readonly badgeVariant: ComputedRef<TVerticalCardBadgeVariant>;
+}
+
+export const VERT_CARD_KEY: InjectionKey<IVerticalCardContext> =
+  Symbol('VERT_CARD');

package/utils/{vertCard/createVertCardGeometry.ts → card/vertical-card/createVerticalCardGeometry.ts}

@@ -1,35 +1,4 @@
-export interface ICreateVertCardPathParams {
-  readonly width: number;
-  readonly height: number;
-  readonly borderRadius?: number;
-}
-
-/**
- * Generates an SVG path for the main VertCard body.
- * Features rounded corners on all four sides.
- */
-export function createVertCardPath({
-  width,
-  height,
-  borderRadius = 24,
-}: ICreateVertCardPathParams): string {
-  const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
-
-  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 ${safeR}`,
-    `A ${safeR} ${safeR} 0 0 1 0 ${height - safeR}`,
-    `V ${safeR}`,
-    `A ${safeR} ${safeR} 0 0 1 ${safeR} 0`,
-    'Z',
-  ].join(' ');
-}
-
-export interface ICreateVertCardBottomBlobPathParams {
+export interface ICreateVerticalCardBottomBlobPathParams {
   readonly width: number;
   readonly height: number;
   readonly blobWidth?: number;
@@ -42,13 +11,13 @@ export interface ICreateVertCardBottomBlobPathParams {
  * Curves down smoothly from the left edge into the bottom horizontal edge,
  * adhering to the bottom-left rounded corner of the card.
  */
-export function createVertCardBottomBlobPath({
+export function createVerticalCardBottomBlobPath({
   width,
   height,
   borderRadius = 24,
   blobWidth = Math.round(width * 0.45),
   blobHeight = Math.round(height * 0.24),
-}: ICreateVertCardBottomBlobPathParams): string {
+}: ICreateVerticalCardBottomBlobPathParams): string {
   const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
   const startY = height - blobHeight;
   const endX = blobWidth;
@@ -68,7 +37,7 @@ export function createVertCardBottomBlobPath({
   ].join(' ');
 }
 
-export interface ICreateVertCardTopRightBlobPathParams {
+export interface ICreateVerticalCardTopRightBlobPathParams {
   readonly width: number;
   readonly height: number;
   readonly blobWidth?: number;
@@ -80,13 +49,13 @@ export interface ICreateVertCardTopRightBlobPathParams {
  * Generates an SVG path for the organic accent blob/wave at the top-right corner.
  * Symmetrical counterpart (180° rotation) to the bottom-left organic blob.
  */
-export function createVertCardTopRightBlobPath({
+export function createVerticalCardTopRightBlobPath({
   width,
   height,
   borderRadius = 24,
   blobWidth = Math.round(width * 0.45),
   blobHeight = Math.round(height * 0.24),
-}: ICreateVertCardTopRightBlobPathParams): string {
+}: ICreateVerticalCardTopRightBlobPathParams): string {
   const safeR = Math.max(0, Math.min(borderRadius, width / 2, height / 2));
   const startX = width - blobWidth;
   const endY = blobHeight;
@@ -106,52 +75,7 @@ export function createVertCardTopRightBlobPath({
   ].join(' ');
 }
 
-export interface ICreateVertCardTopRightOuterStripePathParams {
-  readonly width: number;
-  readonly outerOffset?: number;
-}
-
-/**
- * Generates an SVG path for the top-right diagonal outer accent band.
- */
-export function createVertCardTopRightOuterStripePath({
-  width,
-  outerOffset = 72,
-}: ICreateVertCardTopRightOuterStripePathParams): string {
-  return [
-    `M ${width - outerOffset} 0`,
-    `L ${width} ${outerOffset}`,
-    `L ${width} 0`,
-    'Z',
-  ].join(' ');
-}
-
-export interface ICreateVertCardTopRightInnerStripePathParams {
-  readonly width: number;
-  readonly outerOffset?: number;
-  readonly stripeWidth?: number;
-}
-
-/**
- * Generates an SVG path for the top-right diagonal inner accent band.
- */
-export function createVertCardTopRightInnerStripePath({
-  width,
-  outerOffset = 72,
-  stripeWidth = 24,
-}: ICreateVertCardTopRightInnerStripePathParams): string {
-  const innerOffset = outerOffset + stripeWidth;
-
-  return [
-    `M ${width - innerOffset} 0`,
-    `L ${width} ${innerOffset}`,
-    `L ${width} ${outerOffset}`,
-    `L ${width - outerOffset} 0`,
-    'Z',
-  ].join(' ');
-}
-
-export interface ICreateVertCardBadgePathParams {
+export interface ICreateVerticalCardBadgePathParams {
   readonly width?: number;
   readonly height?: number;
   readonly tipRadius?: number;
@@ -165,14 +89,14 @@ export interface ICreateVertCardBadgePathParams {
  * Features rounded corners on the left edge, smooth transition fillets,
  * and a rounded arrow tip pointing into the card.
  */
-export function createVertCardBadgePath({
+export function createVerticalCardBadgePath({
   width = 62,
   height = 48,
   leftRadius = 8,
   tipRadius = 6,
   sideWidth = 42,
   cornerRadius = 6,
-}: ICreateVertCardBadgePathParams = {}): string {
+}: ICreateVerticalCardBadgePathParams = {}): string {
   const halfH = height / 2;
   const dx = width - sideWidth;
   const dy = halfH;
@@ -195,48 +119,3 @@ export function createVertCardBadgePath({
     'Z',
   ].join(' ');
 }
-
-export interface IHexToRgbaParams {
-  readonly hex: string;
-  readonly alpha?: number;
-}
-
-/**
- * Converts a hex color string to an RGBA string with the given alpha transparency.
- */
-export function hexToRgba({ hex, alpha = 0.16 }: IHexToRgbaParams): string {
-  const trimmed = hex.trim();
-
-  if (
-    trimmed.startsWith('var(') ||
-    trimmed.startsWith('rgb') ||
-    trimmed.startsWith('hsl')
-  ) {
-    return `color-mix(in srgb, ${trimmed} ${Math.round(alpha * 100)}%, transparent)`;
-  }
-
-  let sanitized = trimmed.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/card/vertical-card/index.ts

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

package/utils/colors.ts

@@ -0,0 +1,93 @@
+export interface IColorModifierParams {
+  readonly hex: string;
+  readonly ratio?: number;
+}
+
+interface IModifyColorParams extends IColorModifierParams {
+  readonly target: 'white' | 'black';
+}
+
+interface IRgbColor {
+  readonly red: number;
+  readonly green: number;
+  readonly blue: number;
+}
+
+function parseHexColor(hex: string): IRgbColor | undefined {
+  const raw = hex.trim().replace(/^#/, '');
+  const sanitized =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((character) => {
+            return character + character;
+          })
+          .join('')
+      : raw;
+
+  if (sanitized.length !== 6) {
+    return undefined;
+  }
+
+  const red = Number.parseInt(sanitized.slice(0, 2), 16);
+  const green = Number.parseInt(sanitized.slice(2, 4), 16);
+  const blue = Number.parseInt(sanitized.slice(4, 6), 16);
+
+  if ([red, green, blue].some(Number.isNaN)) {
+    return undefined;
+  }
+
+  return {
+    red,
+    green,
+    blue,
+  };
+}
+
+function formatHexChannel(channel: number): string {
+  return Math.min(255, Math.max(0, Math.round(channel)))
+    .toString(16)
+    .padStart(2, '0');
+}
+
+function modifyColor({ hex, ratio = 0.5, target }: IModifyColorParams): string {
+  if (hex.trim().startsWith('var(')) {
+    const weight = Number(
+      ((1 - Math.min(1, Math.max(0, ratio))) * 100).toFixed(4),
+    );
+
+    return `color-mix(in srgb, ${hex} ${weight}%, ${target})`;
+  }
+
+  const color = parseHexColor(hex);
+
+  if (!color) {
+    return hex;
+  }
+
+  const modifyChannel = (channel: number): number => {
+    if (target === 'white') {
+      return channel + (255 - channel) * ratio;
+    }
+
+    return channel * (1 - ratio);
+  };
+
+  return `#${formatHexChannel(modifyChannel(color.red))}${formatHexChannel(modifyChannel(color.green))}${formatHexChannel(modifyChannel(color.blue))}`;
+}
+
+export function lightenColor({ hex, ratio }: IColorModifierParams): string {
+  return modifyColor({
+    hex,
+    ratio,
+    target: 'white',
+  });
+}
+
+export function darkenColor({ hex, ratio }: IColorModifierParams): string {
+  return modifyColor({
+    hex,
+    ratio,
+    target: 'black',
+  });
+}

package/utils/{arcComparison → comparisons/arc-comparison}/context.ts

@@ -1,7 +1,6 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 
 import type { IArcComparisonGeometry } from './createArcComparisonGeometry';
-import type { IResolvedArcComparisonItem } from './resolveArcComparisonItems';
 
 export interface IArcComparisonRootContext {
   readonly animation: ComputedRef<boolean>;
@@ -23,18 +22,8 @@ export interface IArcComparisonSideContext {
   readonly count: ComputedRef<number>;
 }
 
-export interface IArcComparisonCalloutContext {
-  readonly side: 'left' | 'right';
-  readonly index: number;
-  readonly color: ComputedRef<string>;
-  readonly item: ComputedRef<IResolvedArcComparisonItem>;
-}
-
 export const ARC_COMPARISON_ROOT_KEY: InjectionKey<IArcComparisonRootContext> =
   Symbol('ARC_COMPARISON_ROOT_KEY');
 
 export const ARC_COMPARISON_SIDE_KEY: InjectionKey<IArcComparisonSideContext> =
   Symbol('ARC_COMPARISON_SIDE_KEY');
-
-export const ARC_COMPARISON_CALLOUT_KEY: InjectionKey<IArcComparisonCalloutContext> =
-  Symbol('ARC_COMPARISON_CALLOUT_KEY');

package/utils/{arcComparison → comparisons/arc-comparison}/createArcComparisonGeometry.ts

@@ -1,4 +1,4 @@
-import { createArcOrbitGeometry } from '../arcOrbit';
+import { createArcOrbitGeometry } from '../../core/arc-orbit';
 
 export interface IArcComparisonPoint {
   readonly x: number;

package/utils/comparisons/arc-comparison/resolveArcComparisonItems.ts

@@ -0,0 +1,33 @@
+import { resolveArcOrbitItems } from '../../core/arc-orbit';
+
+export interface IArcComparisonItem {
+  readonly id?: string | number;
+  readonly title?: string;
+  readonly description?: string;
+  readonly color?: string;
+  readonly textColor?: string;
+}
+
+export interface IResolvedArcComparisonItem {
+  readonly id: string | number;
+  readonly title: string;
+  readonly description: string;
+  readonly color: string;
+  readonly textColor?: string;
+}
+
+export const DEFAULT_LEFT_COLOR = 'var(--alpha-arc-comparison-left-accent)';
+
+export const DEFAULT_RIGHT_COLOR = 'var(--alpha-arc-comparison-right-accent)';
+
+export function resolveArcComparisonSideItems(
+  items?: readonly IArcComparisonItem[],
+  defaultColor = DEFAULT_LEFT_COLOR,
+  count = 3,
+): readonly IResolvedArcComparisonItem[] {
+  return resolveArcOrbitItems({
+    items,
+    defaultColor,
+    count,
+  });
+}

package/utils/comparisons/table-comparison/constants.ts

@@ -0,0 +1,47 @@
+export const DEFAULT_COL_COLORS: readonly string[] = [
+  'var(--alpha-table-comparison-col-1-background)',
+  'var(--alpha-table-comparison-col-2-background)',
+  'var(--alpha-table-comparison-col-3-background)',
+  'var(--alpha-table-comparison-col-4-background)',
+  'var(--alpha-table-comparison-col-5-background)',
+];
+
+export const DEFAULT_ROW_HEADER_COLOR = 'var(--alpha-table-comparison-row-bg)';
+export const DEFAULT_ROW_HEADER_TEXT_COLOR =
+  'var(--alpha-table-comparison-row)';
+export const DEFAULT_COL_HEADER_TEXT_COLOR =
+  'var(--alpha-table-comparison-col)';
+export const DEFAULT_CELL_BG = 'var(--alpha-table-comparison-cell-bg)';
+export const DEFAULT_CELL_COLOR = 'var(--alpha-table-comparison-cell)';
+export const DEFAULT_BORDER_RADIUS = '8px';
+export const DEFAULT_SPACING = '6px';
+export const DEFAULT_ROW_HEADER_WIDTH = '160px';
+
+/**
+ * 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 → comparisons/table-comparison}/context.ts

@@ -13,12 +13,12 @@ export interface ITableComparisonContext {
   readonly animation: ComputedRef<boolean>;
 }
 
-export interface ITableComparisonColsContext {
+export interface ITableComparisonColumnsContext {
   readonly registerCol: () => number;
 }
 
 export const TABLE_COMPARISON_KEY: InjectionKey<ITableComparisonContext> =
   Symbol('TABLE_COMPARISON_KEY');
 
-export const TABLE_COMPARISON_COLS_KEY: InjectionKey<ITableComparisonColsContext> =
+export const TABLE_COMPARISON_COLS_KEY: InjectionKey<ITableComparisonColumnsContext> =
   Symbol('TABLE_COMPARISON_COLS_KEY');

package/utils/{arcOrbit → core/arc-orbit}/resolveArcOrbitItems.ts

@@ -14,10 +14,7 @@ export interface IResolvedArcOrbitItem {
   readonly textColor?: string;
 }
 
-export const DEFAULT_ARC_ORBIT_COLOR = '#ea580c';
-
-export const DEFAULT_LOREM_TEXT =
-  'Lorem ipsum dolor sit amet, constitutor adipiscing elit. Nam vulputate augue vel ligula.';
+export const DEFAULT_ARC_ORBIT_COLOR = 'var(--alpha-arc-orbit-accent)';
 
 export const DEFAULT_ARC_ORBIT_ITEMS: readonly [
   IResolvedArcOrbitItem,
@@ -27,26 +24,26 @@ export const DEFAULT_ARC_ORBIT_ITEMS: readonly [
 ] = [
   {
     id: '01',
-    title: 'Add Text Here',
-    description: DEFAULT_LOREM_TEXT,
+    title: '',
+    description: '',
     color: DEFAULT_ARC_ORBIT_COLOR,
   },
   {
     id: '02',
-    title: 'Add Text Here',
-    description: DEFAULT_LOREM_TEXT,
+    title: '',
+    description: '',
     color: DEFAULT_ARC_ORBIT_COLOR,
   },
   {
     id: '03',
-    title: 'Add Text Here',
-    description: DEFAULT_LOREM_TEXT,
+    title: '',
+    description: '',
     color: DEFAULT_ARC_ORBIT_COLOR,
   },
   {
     id: '04',
-    title: 'Add Text Here',
-    description: DEFAULT_LOREM_TEXT,
+    title: '',
+    description: '',
     color: DEFAULT_ARC_ORBIT_COLOR,
   },
 ];
@@ -73,9 +70,8 @@ export function resolveArcOrbitItems(
         ? 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 title = custom?.title ?? defaultItem?.title ?? '';
+    const description = custom?.description ?? defaultItem?.description ?? '';
     const color = custom?.color ?? defaultColor;
     const textColor = custom?.textColor ?? defaultItem?.textColor;