@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/pyramid/circular-pyramid/CircularPyramidStackTitle.vue

@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import {
-  CIRCULAR_PYRAMID_ROOT_KEY,
-  CIRCULAR_PYRAMID_STACK_KEY,
-} from '../../../utils/pyramid/circular-pyramid';
-
-defineOptions({
-  name: 'CircularPyramidStackTitle',
-});
-
-export interface ICircularPyramidStackTitleProps {
-  readonly step?: string | number;
-  readonly title?: string;
-  readonly color?: string;
-  readonly minWidth?: number;
-}
-
-const props = withDefaults(defineProps<ICircularPyramidStackTitleProps>(), {
-  step: undefined,
-  title: undefined,
-  color: undefined,
-  minWidth: 150,
-});
-
-const rootContext = inject(CIRCULAR_PYRAMID_ROOT_KEY, undefined);
-const stackContext = inject(CIRCULAR_PYRAMID_STACK_KEY, undefined);
-
-const isActive = computed(() => {
-  return stackContext?.isActive.value ?? false;
-});
-
-const resolvedStep = computed(() => {
-  if (props.step !== undefined) {
-    return props.step;
-  }
-  if (stackContext?.step.value !== undefined) {
-    return stackContext.step.value;
-  }
-  return '01';
-});
-
-const palette = computed(() => {
-  return rootContext?.palette.value;
-});
-
-const minPillWidth = computed(() => props.minWidth ?? 150);
-
-const stackColor = computed(() => {
-  return (
-    props.color ??
-    stackContext?.color?.value ??
-    rootContext?.color.value ??
-    '#3b82f6'
-  );
-});
-</script>
-
-<template>
-  <div
-    class="alpha-circular-pyramid-stack-title relative w-full flex items-center select-none"
-    :class="[
-      isActive
-        ? 'alpha-circular-pyramid-stack-title--active'
-        : 'alpha-circular-pyramid-stack-title--default',
-    ]"
-  >
-    <!-- Pill Badge Container (min-width: 150px, max-width: whole spacing left leaving at least 30px before dot) -->
-    <div
-      class="alpha-circular-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
-      :style="{
-        minWidth: `${minPillWidth}px`,
-        maxWidth: 'calc(100% - 30px)',
-        width: 'fit-content',
-        boxSizing: 'border-box',
-        borderColor: stackColor,
-        backgroundColor: isActive
-          ? 'rgba(255, 255, 255, 0.95)'
-          : 'rgba(255, 255, 255, 0.85)',
-        boxShadow: isActive
-          ? `0 4px 14px ${stackColor}26`
-          : 'none',
-      }"
-    >
-      <!-- Circular Step Indicator (Badge using stack color) -->
-      <div
-        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight transition-all duration-300 flex-shrink-0"
-        :style="{
-          backgroundColor: stackColor,
-          color: '#ffffff',
-        }"
-      >
-        <slot name="step">{{ resolvedStep }}</slot>
-      </div>
-      <!-- Title Text -->
-      <span
-        class="text-xs font-semibold tracking-tight transition-colors duration-300 pr-1 truncate flex-1 leading-tight"
-        :style="{
-          color: isActive ? '#0f172a' : '#334155',
-        }"
-      >
-        <slot>{{ props.title }}</slot>
-      </span>
-    </div>
-    <!-- Scalable Line between Title and Dot (always at least 30px) -->
-    <div
-      class="alpha-circular-pyramid-stack-title__connector flex-1 flex items-center min-w-[30px] pointer-events-none"
-    >
-      <div
-        class="alpha-circular-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
-        :style="{
-          backgroundColor: stackColor,
-          opacity: isActive ? 1 : 0.65,
-        }"
-      />
-      <div
-        class="alpha-circular-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
-        :style="{
-          backgroundColor: stackColor,
-          boxShadow: isActive
-            ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.alpha-circular-pyramid-stack-title {
-  box-sizing: border-box;
-}
-
-.alpha-circular-pyramid-stack-title--active .alpha-circular-pyramid-stack-title__pill {
-  backdrop-filter: blur(8px);
-}
-</style>

package/components/pyramid/square-pyramid/SquarePyramidStackTitle.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-import {
-  SQUARE_PYRAMID_ROOT_KEY,
-  SQUARE_PYRAMID_STACK_KEY,
-} from '../../../utils/pyramid/square-pyramid';
-
-defineOptions({
-  name: 'SquarePyramidStackTitle',
-});
-
-export interface ISquarePyramidStackTitleProps {
-  readonly step?: string | number;
-  readonly title?: string;
-  readonly color?: string;
-  readonly minWidth?: number;
-}
-
-const props = withDefaults(defineProps<ISquarePyramidStackTitleProps>(), {
-  step: undefined,
-  title: undefined,
-  color: undefined,
-  minWidth: 150,
-});
-
-const rootContext = inject(SQUARE_PYRAMID_ROOT_KEY, undefined);
-const stackContext = inject(SQUARE_PYRAMID_STACK_KEY, undefined);
-
-const isActive = computed(() => {
-  return stackContext?.isActive.value ?? false;
-});
-
-const resolvedStep = computed(() => {
-  if (props.step !== undefined) {
-    return props.step;
-  }
-  if (stackContext?.step.value !== undefined) {
-    return stackContext.step.value;
-  }
-  return '01';
-});
-
-const minPillWidth = computed(() => props.minWidth ?? 150);
-
-const stackColor = computed(() => {
-  return (
-    props.color ??
-    stackContext?.color?.value ??
-    rootContext?.color.value ??
-    '#3b82f6'
-  );
-});
-</script>
-
-<template>
-  <div
-    class="alpha-square-pyramid-stack-title relative w-full flex items-center select-none"
-    :class="[
-      isActive
-        ? 'alpha-square-pyramid-stack-title--active'
-        : 'alpha-square-pyramid-stack-title--default',
-    ]"
-  >
-    <!-- Pill Badge Container -->
-    <div
-      class="alpha-square-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
-      :style="{
-        minWidth: `${minPillWidth}px`,
-        maxWidth: 'calc(100% - 30px)',
-        width: 'fit-content',
-        boxSizing: 'border-box',
-        borderColor: stackColor,
-        backgroundColor: isActive
-          ? 'rgba(255, 255, 255, 0.95)'
-          : 'rgba(255, 255, 255, 0.85)',
-        boxShadow: isActive
-          ? `0 4px 14px ${stackColor}26`
-          : 'none',
-      }"
-    >
-      <!-- Circular Step Indicator -->
-      <div
-        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight transition-all duration-300 flex-shrink-0"
-        :style="{
-          backgroundColor: stackColor,
-          color: '#ffffff',
-        }"
-      >
-        <slot name="step">{{ resolvedStep }}</slot>
-      </div>
-      <!-- Title Text -->
-      <span
-        class="text-xs font-semibold tracking-tight transition-colors duration-300 pr-1 truncate flex-1 leading-tight"
-        :style="{
-          color: isActive ? '#0f172a' : '#334155',
-        }"
-      >
-        <slot>{{ props.title }}</slot>
-      </span>
-    </div>
-    <!-- Scalable Line between Title and Dot -->
-    <div
-      class="alpha-square-pyramid-stack-title__connector flex-1 flex items-center min-w-[30px] pointer-events-none"
-    >
-      <div
-        class="alpha-square-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
-        :style="{
-          backgroundColor: stackColor,
-          opacity: isActive ? 1 : 0.65,
-        }"
-      />
-      <div
-        class="alpha-square-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
-        :style="{
-          backgroundColor: stackColor,
-          boxShadow: isActive
-            ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.alpha-square-pyramid-stack-title {
-  box-sizing: border-box;
-}
-
-.alpha-square-pyramid-stack-title--active .alpha-square-pyramid-stack-title__pill {
-  backdrop-filter: blur(8px);
-}
-</style>

package/layouts/core/table-of-contents.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-defineProps({
-  maxDepth: {
-    type: [Number, String],
-    default: 1,
-  },
-});
-
-const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-table-of-contents slidev-layout default toc-layout',
-);
-</script>
-
-<template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
-    <slot>
-      <h1>Table of Contents</h1>
-    </slot>
-    <Toc :maxDepth="maxDepth" />
-  </div>
-</template>

package/utils/arcArrowProcess/resolveArcArrowProcessItems.ts

@@ -1,189 +0,0 @@
-export interface IArcArrowProcessItem {
-  readonly id?: string | number;
-  readonly color?: string;
-  readonly gradientEnd?: string;
-  readonly title?: string;
-  readonly description?: string;
-  readonly icon?: string | object | false;
-  readonly titleColor?: string;
-  readonly textColor?: string;
-}
-
-export interface IResolvedArcArrowProcessItem {
-  readonly id: string | number;
-  readonly color: string;
-  readonly gradientEnd: string;
-  readonly title: string;
-  readonly description: string;
-  readonly icon?: string | object | false;
-  readonly titleColor: string;
-  readonly textColor: string;
-}
-
-export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_4: readonly [
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-] = [
-  {
-    id: '01',
-    color: '#a0a5aa',
-    gradientEnd: '#8e959f',
-    title: 'Heading Here',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.',
-    titleColor: '#888d94',
-    textColor: '#8e959f',
-  },
-  {
-    id: '02',
-    color: '#2c485d',
-    gradientEnd: '#334e68',
-    title: 'Heading Here',
-    description:
-      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    titleColor: '#2c485d',
-    textColor: '#8e959f',
-  },
-  {
-    id: '03',
-    color: '#6fa3b5',
-    gradientEnd: '#7fb0c0',
-    title: 'Heading Here',
-    description:
-      'Tempor incididunt ut laborelorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod et.',
-    titleColor: '#6fa3b5',
-    textColor: '#8e959f',
-  },
-  {
-    id: '04',
-    color: '#d6284d',
-    gradientEnd: '#e63964',
-    title: 'Heading Here',
-    description:
-      'Eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.',
-    titleColor: '#d6284d',
-    textColor: '#8e959f',
-  },
-];
-
-export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_3: readonly [
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-] = [
-  {
-    id: '01',
-    color: '#a0a5aa',
-    gradientEnd: '#8e959f',
-    title: 'Heading Here',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
-    titleColor: '#888d94',
-    textColor: '#8e959f',
-  },
-  {
-    id: '02',
-    color: '#2c485d',
-    gradientEnd: '#334e68',
-    title: 'Heading Here',
-    description:
-      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    titleColor: '#2c485d',
-    textColor: '#8e959f',
-  },
-  {
-    id: '03',
-    color: '#d6284d',
-    gradientEnd: '#e63964',
-    title: 'Heading Here',
-    description:
-      'Eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.',
-    titleColor: '#d6284d',
-    textColor: '#8e959f',
-  },
-];
-
-export const DEFAULT_ARC_ARROW_PROCESS_ITEMS_2: readonly [
-  IResolvedArcArrowProcessItem,
-  IResolvedArcArrowProcessItem,
-] = [
-  {
-    id: '01',
-    color: '#2c485d',
-    gradientEnd: '#334e68',
-    title: 'Heading Here',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
-    titleColor: '#2c485d',
-    textColor: '#8e959f',
-  },
-  {
-    id: '02',
-    color: '#6fa3b5',
-    gradientEnd: '#7fb0c0',
-    title: 'Heading Here',
-    description:
-      'Sed do eiusmod tempor incididunt ut labore et lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    titleColor: '#6fa3b5',
-    textColor: '#8e959f',
-  },
-];
-
-export function getDefaultArcArrowProcessItem(
-  index: number,
-  count: number = 4,
-): IResolvedArcArrowProcessItem {
-  const list =
-    count === 2
-      ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_2
-      : count === 3
-        ? DEFAULT_ARC_ARROW_PROCESS_ITEMS_3
-        : DEFAULT_ARC_ARROW_PROCESS_ITEMS_4;
-  const safe = Math.abs(index) % list.length;
-  const item = list[safe];
-
-  if (item) {
-    return item;
-  }
-
-  return DEFAULT_ARC_ARROW_PROCESS_ITEMS_4[0];
-}
-
-export function resolveSingleArcArrowProcessItem(
-  item: IArcArrowProcessItem | undefined,
-  fallbackIndex = 0,
-  count: number = 4,
-): IResolvedArcArrowProcessItem {
-  const fallback = getDefaultArcArrowProcessItem(fallbackIndex, count);
-
-  if (!item) {
-    return fallback;
-  }
-
-  return {
-    id: item.id ?? fallback.id,
-    color: item.color ?? fallback.color,
-    gradientEnd: item.gradientEnd ?? fallback.gradientEnd,
-    title: item.title ?? fallback.title,
-    description: item.description ?? fallback.description,
-    icon: item.icon !== undefined ? item.icon : fallback.icon,
-    titleColor: item.titleColor ?? item.color ?? fallback.titleColor,
-    textColor: item.textColor ?? fallback.textColor,
-  };
-}
-
-export function resolveArcArrowProcessItems(
-  items: readonly IArcArrowProcessItem[] | undefined,
-  count: number = 4,
-): readonly IResolvedArcArrowProcessItem[] {
-  const targetCount = count >= 2 ? count : 4;
-  const result: IResolvedArcArrowProcessItem[] = [];
-
-  for (let i = 0; i < targetCount; i++) {
-    result.push(resolveSingleArcArrowProcessItem(items?.[i], i, targetCount));
-  }
-
-  return result;
-}

package/utils/arcComparison/resolveArcComparisonItems.ts

@@ -1,102 +0,0 @@
-import {
-  resolveArcOrbitItems,
-  DEFAULT_LOREM_TEXT as SHARED_LOREM_TEXT,
-} from '../arcOrbit';
-
-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 = '#e87a36';
-
-export const DEFAULT_RIGHT_COLOR = '#208b9e';
-
-export const DEFAULT_LOREM_TEXT = SHARED_LOREM_TEXT;
-
-export const DEFAULT_LEFT_ITEMS: readonly [
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-] = [
-  {
-    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 [
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-  IResolvedArcComparisonItem,
-] = [
-  {
-    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 resolveArcComparisonSideItems(
-  items?: readonly IArcComparisonItem[],
-  defaultColor = DEFAULT_LEFT_COLOR,
-  count = 3,
-): readonly IResolvedArcComparisonItem[] {
-  return resolveArcOrbitItems({
-    items,
-    defaultColor,
-    count,
-  });
-}

package/utils/chevronCard/createChevronCardGeometry.ts

@@ -1,48 +0,0 @@
-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

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

package/utils/hexTriad/context.ts

@@ -1,25 +0,0 @@
-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/index.ts

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