@alphacifer/slidev-addon-theme 0.0.5 → 0.0.7

package/README.md

@@ -2,6 +2,9 @@
 
 Shared Slidev components and layouts for Alpha presentations.
 
+For Alpha's light-only academic styling, combine this addon with
+`@alphacifer/slidev-theme-academic`.
+
 ## Installation
 
 ```bash
@@ -31,14 +34,172 @@ addons:
 - Components: `ThanksContent`, `ThanksOutlineSquare`, `ThanksSquare`
 - Layout: `thanks`
 
+## Hex triad
+
+- Components: `HexTriad`, `HexTriadCallout`, `HexTriadBadge`, `HexTriadHeading`, `HexTriadContent`
+
+```vue
+<HexTriad>
+  <HexTriadCallout>
+    <HexTriadBadge>01</HexTriadBadge>
+    <HexTriadHeading>Performance</HexTriadHeading>
+    <HexTriadContent>Fast builds, instant feedback, and zero-overhead runtime.</HexTriadContent>
+  </HexTriadCallout>
+  <HexTriadCallout>
+    <HexTriadBadge>02</HexTriadBadge>
+    <HexTriadHeading>Reliability</HexTriadHeading>
+    <HexTriadContent>Strict type safety paired with deterministic test suites.</HexTriadContent>
+  </HexTriadCallout>
+  <HexTriadCallout>
+    <HexTriadBadge>03</HexTriadBadge>
+    <HexTriadHeading>Scalability</HexTriadHeading>
+    <HexTriadContent>Seamless growth across packages, tools, and workflows.</HexTriadContent>
+  </HexTriadCallout>
+</HexTriad>
+```
+
+## Horiz card
+
+- Components: `HorizCard`, `HorizCardBadge`, `HorizCardHeading`, `HorizCardContent`, `HorizCardIcon`
+
+```vue
+<!-- Self-contained props usage with optional icon -->
+<HorizCard
+  step="01"
+  title="Lorem Ipsum"
+  description="Lorem ipsum dolor sit amet, nibh est. A magna maecenas, quam magna nec quis."
+/>
+
+<!-- With custom icon and color -->
+<HorizCard
+  step="02"
+  title="Discovery"
+  description="Explore ideas and prototype user experiences."
+  color="#2563eb"
+>
+  <template #icon>
+    <div class="i-carbon-search text-4xl" />
+  </template>
+</HorizCard>
+```
+
+## Arc compare
+
+- Components: `ArcCompare`, `ArcCompareLeft`, `ArcCompareRight`, `ArcCompareTitle`, `ArcCompareContents`, `ArcCompareCallout`, `ArcCompareBadge`, `ArcCompareHeading`, `ArcCompareContent`
+
+```vue
+<!-- Self-contained mockup default (3 points) -->
+
+<!-- 4 points mode -->
+<ArcCompare>
+  <ArcCompareLeft color="#ea580c">
+    <ArcCompareTitle>Traditional<br />Monolith</ArcCompareTitle>
+    <ArcCompareContents>
+      <ArcCompareCallout>
+        <ArcCompareBadge>01</ArcCompareBadge>
+        <ArcCompareHeading>Coupled State</ArcCompareHeading>
+        <ArcCompareContent>
+          Shared database schemas create cross-team deployment bottlenecks.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+      <ArcCompareCallout>
+        <ArcCompareBadge>02</ArcCompareBadge>
+        <ArcCompareHeading>Vertical Scale</ArcCompareHeading>
+        <ArcCompareContent>
+          Requires upgrading single instances with exponential cost increases.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+      <ArcCompareCallout>
+        <ArcCompareBadge>03</ArcCompareBadge>
+        <ArcCompareHeading>Single Failure</ArcCompareHeading>
+        <ArcCompareContent>
+          Unchecked memory leaks or crashes can bring down the entire system.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+    </ArcCompareContents>
+  </ArcCompareLeft>
+
+  <ArcCompareRight color="#0284c7">
+    <ArcCompareTitle>Distributed<br />Microservices</ArcCompareTitle>
+    <ArcCompareContents>
+      <ArcCompareCallout>
+        <ArcCompareBadge>01</ArcCompareBadge>
+        <ArcCompareHeading>Bounded Context</ArcCompareHeading>
+        <ArcCompareContent>
+          Autonomous services communicate over defined asynchronous events.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+      <ArcCompareCallout>
+        <ArcCompareBadge>02</ArcCompareBadge>
+        <ArcCompareHeading>Elastic Scale</ArcCompareHeading>
+        <ArcCompareContent>
+          Horizontal autoscaling responds dynamically to spike traffic demand.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+      <ArcCompareCallout>
+        <ArcCompareBadge>03</ArcCompareBadge>
+        <ArcCompareHeading>Isolated Faults</ArcCompareHeading>
+        <ArcCompareContent>
+          Failures remain localized without cascading across service domains.
+        </ArcCompareContent>
+      </ArcCompareCallout>
+    </ArcCompareContents>
+  </ArcCompareRight>
+</ArcCompare>
+```
+
+## Comparison table
+
+- Components: `ComparisonTable`, `ComparisonTableCols`, `ComparisonTableCol`, `ComparisonTableRows`, `ComparisonTableRow`, `ComparisonTableCell`
+
+```vue
+<!-- Self-contained mockup default (5 columns x 6 rows) -->
+<ComparisonTable />
+
+<!-- Custom compound comparison structure -->
+<ComparisonTable>
+  <ComparisonTableCols>
+    <ComparisonTableCol color="#ff0000">
+      Column 1
+    </ComparisonTableCol>
+    <ComparisonTableCol color="#00ff00">
+      Column 2
+    </ComparisonTableCol>
+    <ComparisonTableCol color="#0000ff">
+      Column 3
+    </ComparisonTableCol>
+  </ComparisonTableCols>
+  <ComparisonTableRows>
+    <ComparisonTableRow title="Row 1">
+      <ComparisonTableCell>Row 1, Cell 1</ComparisonTableCell>
+      <ComparisonTableCell>Row 1, Cell 2</ComparisonTableCell>
+      <ComparisonTableCell>Row 1, Cell 3</ComparisonTableCell>
+    </ComparisonTableRow>
+    <ComparisonTableRow title="Row 2">
+      <ComparisonTableCell>Row 2, Cell 1</ComparisonTableCell>
+      <ComparisonTableCell>Row 2, Cell 2</ComparisonTableCell>
+      <ComparisonTableCell>Row 2, Cell 3</ComparisonTableCell>
+    </ComparisonTableRow>
+  </ComparisonTableRows>
+</ComparisonTable>
+```
+
 ## Preview
 
 ```bash
 pnpm --filter @alphacifer/slidev-addon-theme dev
 ```
 
-The preview deck is defined in `slides.md` and loads this package locally as a
-Slidev addon.
+The default preview deck is defined in `slides.md` and loads this package
+locally as a Slidev addon with the Seriph theme.
+
+Run the same preview content with the sibling Alpha Academic theme:
+
+```bash
+pnpm --filter @alphacifer/slidev-addon-theme dev:academic
+```
+
+The academic preview deck is defined in `academic-slides.md`.
 
 The preview deck includes rendered arc TOC examples for every supported item
 count from one through seven.

package/components/arc-arrow-process/ArcArrowProcess.vue

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import {
+  type ComputedRef,
+  computed,
+  Fragment,
+  inject,
+  onBeforeUpdate,
+  provide,
+  ref,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  ARC_ARROW_PROCESS_ROOT_KEY,
+  createArcArrowProcessGeometry,
+  getDefaultArcArrowProcessItem,
+  type IArcArrowProcessItem,
+  type IArcArrowProcessRegistration,
+  type IResolvedArcArrowProcessItem,
+  resolveArcArrowProcessItems,
+} from '../../utils/arcArrowProcess';
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+import ArcArrowProcessArrow from './ArcArrowProcessArrow.vue';
+import ArcArrowProcessCallout from './ArcArrowProcessCallout.vue';
+
+defineOptions({
+  name: 'ArcArrowProcess',
+  inheritAttrs: false,
+});
+
+export interface IArcArrowProcessProps {
+  readonly items?: readonly IArcArrowProcessItem[];
+  readonly count?: number;
+  readonly animation?: boolean;
+  readonly height?: number | string;
+  readonly startDelay?: number;
+  readonly active?: boolean;
+  readonly rotationOffset?: number;
+}
+
+const props = withDefaults(defineProps<IArcArrowProcessProps>(), {
+  items: undefined,
+  count: undefined,
+  animation: true,
+  height: 370,
+  startDelay: undefined,
+  active: undefined,
+  rotationOffset: undefined,
+});
+
+const slots = useSlots();
+
+interface INamedComponent {
+  readonly name?: string;
+  readonly __name?: string;
+}
+
+function hasComponentName(type: unknown, name: string): boolean {
+  if (typeof type === 'object' && type !== null) {
+    const comp = type as INamedComponent;
+
+    return comp.name === name || comp.__name === name;
+  }
+
+  return false;
+}
+
+function flattenVNodes(nodes: VNode[]): VNode[] {
+  const result: VNode[] = [];
+
+  for (const node of nodes) {
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      result.push(...flattenVNodes(node.children as VNode[]));
+    } else {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+function countCallouts(nodes: VNode[]): number {
+  let count = 0;
+
+  for (const node of flattenVNodes(nodes)) {
+    if (hasComponentName(node.type, 'ArcArrowProcessCallout')) {
+      count++;
+    }
+  }
+
+  return count;
+}
+
+const slottedCount = computed(() => {
+  if (!slots.default) {
+    return 0;
+  }
+
+  return countCallouts(slots.default());
+});
+
+const shiftingIntro = inject<
+  | {
+      active: ComputedRef<boolean>;
+      isShifting?: ComputedRef<boolean>;
+    }
+  | undefined
+>('SLIDEV_LAYOUT_SHIFTING_INTRO', undefined);
+
+const isAnimated = computed(() => {
+  if (!props.animation) {
+    return false;
+  }
+
+  if (props.active !== undefined) {
+    return props.active;
+  }
+
+  if (shiftingIntro) {
+    return shiftingIntro.active.value;
+  }
+
+  return true;
+});
+
+const resolvedStartDelay = computed(() => {
+  if (props.startDelay !== undefined) {
+    return props.startDelay;
+  }
+
+  if (shiftingIntro) {
+    return shiftingIntro.isShifting?.value ? 600 : 0;
+  }
+
+  return 0;
+});
+
+const resolvedCount = computed<number>(() => {
+  if (props.count !== undefined) {
+    return props.count;
+  }
+
+  if (slottedCount.value > 0) {
+    return slottedCount.value;
+  }
+
+  if (props.items && props.items.length > 0) {
+    return props.items.length;
+  }
+
+  return 4;
+});
+
+const resolvedItems = computed(() => {
+  return resolveArcArrowProcessItems(props.items, resolvedCount.value);
+});
+
+const registeredCalloutColors = ref<Record<number, string>>({});
+
+const setCalloutColor = (index: number, color: string | undefined) => {
+  if (color === undefined) {
+    const updated = { ...registeredCalloutColors.value };
+    delete updated[index];
+    registeredCalloutColors.value = updated;
+  } else {
+    registeredCalloutColors.value = {
+      ...registeredCalloutColors.value,
+      [index]: color,
+    };
+  }
+};
+
+const slottedCalloutProps = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+
+  const nodes = flattenVNodes(slots.default()).filter((node) =>
+    hasComponentName(node.type, 'ArcArrowProcessCallout'),
+  );
+
+  return nodes.map((node, idx) => {
+    const rawProps = node.props;
+    const explicitIndex =
+      rawProps?.index !== undefined && rawProps.index !== null
+        ? Number(rawProps.index)
+        : idx;
+
+    return {
+      index: explicitIndex,
+      color: typeof rawProps?.color === 'string' ? rawProps.color : undefined,
+    };
+  });
+});
+
+const getArrowColor = (idx: number): string => {
+  if (registeredCalloutColors.value[idx]) {
+    return registeredCalloutColors.value[idx];
+  }
+
+  const slottedMatch = slottedCalloutProps.value.find((p) => p.index === idx);
+  if (slottedMatch?.color) {
+    return slottedMatch.color;
+  }
+
+  if (props.items?.[idx]?.color) {
+    return props.items[idx].color;
+  }
+
+  return getDefaultArcArrowProcessItem(idx, resolvedCount.value).color;
+};
+
+const getArrowGradientEnd = (idx: number): string | undefined => {
+  if (props.items?.[idx]?.gradientEnd) {
+    return props.items[idx].gradientEnd;
+  }
+
+  if (registeredCalloutColors.value[idx]) {
+    return registeredCalloutColors.value[idx];
+  }
+
+  const slottedMatch = slottedCalloutProps.value.find((p) => p.index === idx);
+  if (slottedMatch?.color) {
+    return slottedMatch.color;
+  }
+
+  return getDefaultArcArrowProcessItem(idx, resolvedCount.value).gradientEnd;
+};
+
+let calloutCounter = 0;
+onBeforeUpdate(() => {
+  calloutCounter = 0;
+});
+
+const registerCallout = (): IArcArrowProcessRegistration => {
+  const idx = calloutCounter++;
+
+  return {
+    index: idx,
+    item: computed<IResolvedArcArrowProcessItem>(() => {
+      const item = resolvedItems.value[idx] ?? resolvedItems.value[0];
+
+      if (item) {
+        return item;
+      }
+
+      return getDefaultArcArrowProcessItem(idx, resolvedCount.value);
+    }),
+  };
+};
+
+provide(ARC_ARROW_PROCESS_ROOT_KEY, {
+  items: resolvedItems,
+  count: resolvedCount,
+  animation: isAnimated,
+  registerCallout,
+  setCalloutColor,
+});
+
+const geo = computed(() => {
+  return createArcArrowProcessGeometry(
+    resolvedCount.value,
+    props.rotationOffset,
+  );
+});
+
+const resolvedHeightStyle = computed(() => {
+  if (props.height === undefined) {
+    return '100%';
+  }
+
+  return typeof props.height === 'number' ? `${props.height}px` : props.height;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process w-full flex items-start justify-center select-none font-sans relative',
+);
+</script>
+
+<template>
+  <div
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{
+      height: resolvedHeightStyle,
+      minHeight: '340px',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+      '--arc-arrow-start-delay': `${resolvedStartDelay}ms`,
+    }"
+  >
+    <!-- Relative stage container -->
+    <div
+      class="alpha-arc-arrow-process__stage relative w-full h-full max-w-[1000px] flex items-start justify-center overflow-visible"
+    >
+      <!-- Central Graphic: Reusing ArcArrowProcessArrow -->
+      <div
+        class="alpha-arc-arrow-process__center absolute inset-0 w-full h-full pointer-events-none"
+      >
+        <ArcArrowProcessArrow
+          v-for="(arrow, idx) in geo.arrows"
+          :key="idx"
+          :class="[
+            'alpha-arc-arrow-process__arrow absolute inset-0 w-full h-full',
+            `alpha-arc-arrow-process__arrow--${idx}`,
+            { 'alpha-arc-arrow-process--animated': isAnimated },
+          ]"
+          :color="getArrowColor(idx)"
+          :gradient-end="getArrowGradientEnd(idx)"
+          :origin-y="geo.cy"
+          :path="arrow.path"
+          :rotation="arrow.rotation"
+          :standalone="false"
+        />
+      </div>
+      <!-- Callout Cards -->
+      <slot v-if="slots.default" />
+      <template v-else>
+        <ArcArrowProcessCallout
+          v-for="idx in resolvedCount"
+          :key="idx - 1"
+          :index="idx - 1"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-arc-arrow-process--animated.alpha-arc-arrow-process__arrow--0 {
+  animation: arc-arrow-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 50ms) both;
+  transform-origin: 500px -220px;
+}
+
+.alpha-arc-arrow-process--animated.alpha-arc-arrow-process__arrow--1 {
+  animation: arc-arrow-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 130ms) both;
+  transform-origin: 500px -220px;
+}
+
+.alpha-arc-arrow-process--animated.alpha-arc-arrow-process__arrow--2 {
+  animation: arc-arrow-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 210ms) both;
+  transform-origin: 500px -220px;
+}
+
+.alpha-arc-arrow-process--animated.alpha-arc-arrow-process__arrow--3 {
+  animation: arc-arrow-pop 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-arrow-start-delay, 0ms) + 290ms) both;
+  transform-origin: 500px -220px;
+}
+
+@keyframes arc-arrow-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/components/arc-arrow-process/ArcArrowProcessArrow.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { DEFAULT_ARC_ARROW_PATH } from '../../utils/arcArrowProcess';
+
+defineOptions({
+  name: 'ArcArrowProcessArrow',
+});
+
+export interface IArcArrowProcessArrowProps {
+  readonly color?: string;
+  readonly gradientEnd?: string;
+  readonly stroke?: string;
+  readonly strokeWidth?: number;
+  readonly width?: number | string;
+  readonly height?: number | string;
+  readonly rotation?: number;
+  readonly standalone?: boolean;
+  readonly path?: string;
+  readonly viewBox?: string;
+  readonly originY?: number;
+}
+
+const props = withDefaults(defineProps<IArcArrowProcessArrowProps>(), {
+  color: '#6fa3b5',
+  gradientEnd: '#8cb8c8',
+  stroke: '#ffffff',
+  strokeWidth: 2.5,
+  width: undefined,
+  height: undefined,
+  rotation: 0,
+  standalone: undefined,
+  path: undefined,
+  viewBox: undefined,
+  originY: -220,
+});
+
+const uid = Math.random().toString(36).slice(2, 8);
+const gradId = computed(() => `arc-arrow-grad-${uid}`);
+const shadowId = computed(() => `arc-arrow-shadow-${uid}`);
+
+const isStandalone = computed(() => {
+  if (props.standalone !== undefined) {
+    return props.standalone;
+  }
+
+  return props.rotation === 0;
+});
+
+const resolvedPath = computed(() => {
+  return props.path ?? DEFAULT_ARC_ARROW_PATH;
+});
+
+const resolvedViewBox = computed(() => {
+  if (props.viewBox !== undefined) {
+    return props.viewBox;
+  }
+
+  return isStandalone.value ? '-125 335 310 150' : '0 -30 1000 370';
+});
+
+const resolvedWidth = computed(() => {
+  if (props.width !== undefined) {
+    return typeof props.width === 'number' ? `${props.width}px` : props.width;
+  }
+
+  return isStandalone.value ? '380px' : '100%';
+});
+
+const resolvedHeight = computed(() => {
+  if (props.height !== undefined) {
+    return typeof props.height === 'number'
+      ? `${props.height}px`
+      : props.height;
+  }
+
+  return isStandalone.value ? '215px' : '100%';
+});
+</script>
+
+<template>
+  <div
+    class="alpha-arc-arrow-process-arrow inline-flex items-center justify-center select-none"
+    :style="{
+      width: resolvedWidth,
+      height: resolvedHeight,
+    }"
+  >
+    <svg
+      class="w-full h-full overflow-visible"
+      :viewBox="resolvedViewBox"
+      preserveAspectRatio="xMidYMin meet"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <filter
+          :id="shadowId"
+          x="-30%"
+          y="-30%"
+          width="160%"
+          height="160%"
+        >
+          <feDropShadow
+            dx="0"
+            dy="5"
+            stdDeviation="5"
+            flood-opacity="0.22"
+            flood-color="#000000"
+          />
+        </filter>
+        <linearGradient
+          :id="gradId"
+          x1="0%"
+          y1="100%"
+          x2="100%"
+          y2="0%"
+        >
+          <stop offset="0%" :stop-color="props.color" />
+          <stop offset="100%" :stop-color="props.gradientEnd ?? props.color" />
+        </linearGradient>
+      </defs>
+      <g v-if="!isStandalone" :transform="`translate(500, ${props.originY}) rotate(${props.rotation})`">
+        <path
+          :d="resolvedPath"
+          :fill="`url(#${gradId})`"
+          :stroke="props.stroke"
+          :stroke-width="props.strokeWidth"
+          stroke-linejoin="round"
+          :filter="`url(#${shadowId})`"
+        />
+      </g>
+      <path
+        v-else
+        :d="resolvedPath"
+        :fill="`url(#${gradId})`"
+        :stroke="props.stroke"
+        :stroke-width="props.strokeWidth"
+        stroke-linejoin="round"
+        :filter="`url(#${shadowId})`"
+      />
+    </svg>
+  </div>
+</template>