@alphacifer/slidev-addon-theme 0.0.8 → 0.0.10

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

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import {
+  computed,
+  Fragment,
+  inject,
+  onUnmounted,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  CIRCULAR_PYRAMID_ROOT_KEY,
+  CIRCULAR_PYRAMID_STACK_KEY,
+  DEFAULT_CIRCULAR_PYRAMID_COLOR,
+  DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS,
+} from '../../../utils/pyramid/circular-pyramid';
+import { PYRAMID_DOT_GAP_PX } from '../../../utils/pyramid/shared';
+import CircularPyramidStackContent from './CircularPyramidStackContent.vue';
+import CircularPyramidStackTitle from './CircularPyramidStackTitle.vue';
+
+defineOptions({
+  name: 'CircularPyramidStack',
+});
+
+export interface ICircularPyramidStackProps {
+  readonly index?: number;
+  readonly step?: string | number;
+  readonly title?: string;
+  readonly content?: string;
+  readonly color?: string;
+  readonly active?: boolean;
+  readonly connectorWidth?: number;
+}
+
+const props = withDefaults(defineProps<ICircularPyramidStackProps>(), {
+  index: undefined,
+  step: undefined,
+  title: undefined,
+  content: undefined,
+  color: undefined,
+  active: undefined,
+  connectorWidth: undefined,
+});
+
+const slots = useSlots();
+const rootContext = inject(CIRCULAR_PYRAMID_ROOT_KEY, undefined);
+
+interface INamedComponent {
+  readonly type?: {
+    readonly name?: string;
+    readonly displayName?: string;
+  };
+}
+
+function hasComponentName(type: unknown, targetName: string): boolean {
+  if (typeof type === 'object' && type !== null) {
+    const comp = type as INamedComponent['type'];
+    return comp?.name === targetName || comp?.displayName === targetName;
+  }
+  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;
+}
+
+const defaultNodes = computed(() => {
+  if (!slots.default) {
+    return [];
+  }
+  return flattenVNodes(slots.default());
+});
+
+const slottedTitle = computed(() => {
+  return defaultNodes.value.find((node) =>
+    hasComponentName(node.type, 'CircularPyramidStackTitle'),
+  );
+});
+
+const slottedContent = computed(() => {
+  return defaultNodes.value.find((node) =>
+    hasComponentName(node.type, 'CircularPyramidStackContent'),
+  );
+});
+
+const stackToken = Symbol();
+const effectiveColor = computed(() => {
+  return (
+    props.color || (slottedTitle.value?.props?.color as string | undefined)
+  );
+});
+const registration = rootContext?.registerStack(stackToken, effectiveColor);
+
+onUnmounted(() => {
+  registration?.unregister();
+});
+
+const resolvedIndex = computed<number>(() => {
+  if (props.index !== undefined) {
+    return Number(props.index);
+  }
+  return registration?.index.value ?? 0;
+});
+
+const isActive = computed<boolean>(() => {
+  if (props.active !== undefined) {
+    return props.active;
+  }
+  if (!rootContext) {
+    return false;
+  }
+  return rootContext.activeIndex.value === resolvedIndex.value;
+});
+
+const resolvedStep = computed(() => {
+  if (props.step !== undefined) {
+    return props.step;
+  }
+  return String(resolvedIndex.value + 1).padStart(2, '0');
+});
+
+const layerGeometry = computed(() => {
+  if (!rootContext) {
+    return undefined;
+  }
+  return rootContext.geo.value.layers[resolvedIndex.value];
+});
+
+const posY = computed(() => {
+  if (!layerGeometry.value) {
+    return 0;
+  }
+  const geo = layerGeometry.value;
+  return (
+    geo.slabCenterY ??
+    Number((geo.cy + (geo.cylinderHeight ?? 0) / 2).toFixed(2))
+  );
+});
+
+const discRadiusX = computed(() => {
+  if (!layerGeometry.value) {
+    return 140;
+  }
+  return layerGeometry.value.rx;
+});
+
+const DOT_POSITION_X = 210;
+
+const leftWidth = computed(() => {
+  if (layerGeometry.value) {
+    const rx = layerGeometry.value.rx;
+    const cx = 465;
+    return Math.max(180, Math.round(cx - rx - PYRAMID_DOT_GAP_PX));
+  }
+  return DOT_POSITION_X;
+});
+
+const rightWidth = computed(() => rootContext?.contentWidthPx.value ?? 240);
+
+const rightWingWidth = computed(() => {
+  if (layerGeometry.value) {
+    const rx = layerGeometry.value.rx;
+    const cx = 465;
+    const dotRightX = cx + rx + PYRAMID_DOT_GAP_PX;
+    const containerW = 960;
+    return Math.max(rightWidth.value + 20, Math.round(containerW - dotRightX));
+  }
+  return rightWidth.value + PYRAMID_DOT_GAP_PX;
+});
+
+const rightOffset = computed(
+  () => rootContext?.contentRightOffsetPx.value ?? 0,
+);
+
+const resolvedColor = computed<string>(() => {
+  if (effectiveColor.value) {
+    return effectiveColor.value;
+  }
+  return (
+    rootContext?.getLayerColor(resolvedIndex.value) ??
+    DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS[
+      Math.abs(resolvedIndex.value) %
+        DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS.length
+    ] ??
+    DEFAULT_CIRCULAR_PYRAMID_COLOR
+  );
+});
+
+const hasActiveStack = computed(() => {
+  return (rootContext?.activeIndex.value ?? -1) >= 0;
+});
+
+function handleStackClick(): void {
+  if (rootContext?.interactive.value) {
+    if (rootContext.activeIndex.value === resolvedIndex.value) {
+      rootContext.setActiveIndex(-1);
+    } else {
+      rootContext.setActiveIndex(resolvedIndex.value);
+    }
+  }
+}
+
+const deltaY = computed(() => {
+  return rootContext?.getCardDeltaY?.(resolvedIndex.value) ?? 0;
+});
+
+const connectorWidth = computed(() => {
+  return Math.max(20, rightWingWidth.value - rightWidth.value);
+});
+
+const stepIndex = computed(() => {
+  return resolvedIndex.value;
+});
+
+provide(CIRCULAR_PYRAMID_STACK_KEY, {
+  index: resolvedIndex,
+  isActive,
+  step: resolvedStep,
+  layerGeo: layerGeometry,
+  color: resolvedColor,
+  deltaY,
+  connectorWidth,
+  setActive: handleStackClick,
+});
+</script>
+
+<template>
+  <div
+    class="alpha-circular-pyramid-stack absolute inset-x-0 pointer-events-none select-none flex items-center justify-between"
+    :class="[
+      isActive
+        ? 'alpha-circular-pyramid-stack--active'
+        : 'alpha-circular-pyramid-stack--inactive',
+      `alpha-circular-pyramid-stack--${resolvedIndex}`,
+    ]"
+    :data-index="resolvedIndex"
+    :data-active="isActive"
+    :style="{
+      top: `${posY}px`,
+      transform: 'translateY(-50%)',
+    }"
+  >
+    <!-- Left Wing: Title Pill (150px) -->
+    <div
+      class="alpha-circular-pyramid-stack__left flex-shrink-0 flex items-center justify-start pointer-events-auto cursor-pointer"
+      :class="[
+        `alpha-circular-pyramid-stack__left--${resolvedIndex}`,
+        { 'alpha-circular-pyramid-stack--animated': rootContext?.animation.value },
+      ]"
+      :style="{
+        '--wing-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+        width: `${leftWidth}px`,
+        minWidth: `${leftWidth}px`,
+        maxWidth: `${leftWidth}px`,
+        opacity: !hasActiveStack || isActive ? 1 : 0.65,
+      }"
+      @click="handleStackClick"
+    >
+      <component :is="slottedTitle" v-if="slottedTitle" />
+      <CircularPyramidStackTitle
+        v-else
+        :step="resolvedStep"
+        :title="props.title || `Stage ${resolvedStep}`"
+        :connector-width="props.connectorWidth"
+      />
+    </div>
+    <!-- Right Wing: Dot + Connector + Content Card (10px from slab) -->
+    <div
+      class="alpha-circular-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
+      :class="[
+        `alpha-circular-pyramid-stack__right--${resolvedIndex}`,
+        { 'alpha-circular-pyramid-stack--animated': rootContext?.animation.value },
+      ]"
+      :style="{
+        '--wing-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+        width: `${rightWingWidth}px`,
+        minWidth: `${rightWidth}px`,
+        maxWidth: `${rightWingWidth}px`,
+        marginRight: rightOffset ? `${rightOffset}px` : undefined,
+        opacity: !hasActiveStack || isActive ? 1 : 0.65,
+      }"
+      @click="handleStackClick"
+    >
+      <component :is="slottedContent" v-if="slottedContent" />
+      <CircularPyramidStackContent
+        v-else
+        :content="props.content || 'Layer details and operational description.'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-circular-pyramid-stack {
+  height: 0;
+  overflow: visible;
+}
+
+.alpha-circular-pyramid-stack__left,
+.alpha-circular-pyramid-stack__right {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.alpha-circular-pyramid-stack--animated .alpha-circular-pyramid-stack__left {
+  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 460ms)) both;
+}
+
+@keyframes alpha-pyramid-left-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.alpha-circular-pyramid-stack--animated .alpha-circular-pyramid-stack__right {
+  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 470ms)) both;
+}
+
+@keyframes alpha-pyramid-right-in {
+  0% {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

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

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
+
+import {
+  CIRCULAR_PYRAMID_ROOT_KEY,
+  CIRCULAR_PYRAMID_STACK_KEY,
+} from '../../../utils/pyramid/circular-pyramid';
+import { createPyramidConnectorPath } from '../../../utils/pyramid/shared';
+
+defineOptions({
+  name: 'CircularPyramidStackContent',
+});
+
+export interface ICircularPyramidStackContentProps {
+  readonly content?: string;
+  readonly color?: string;
+  readonly connectorWidth?: number;
+}
+
+const props = withDefaults(defineProps<ICircularPyramidStackContentProps>(), {
+  content: undefined,
+  color: undefined,
+  connectorWidth: undefined,
+});
+
+const rootContext = inject(CIRCULAR_PYRAMID_ROOT_KEY, undefined);
+const stackContext = inject(CIRCULAR_PYRAMID_STACK_KEY, undefined);
+
+const connectorRef = ref<HTMLElement | null>(null);
+const measuredConnectorWidth = ref<number>(0);
+
+let resizeObserver: ResizeObserver | null = null;
+
+function updateWidth(): void {
+  if (connectorRef.value && connectorRef.value.clientWidth > 0) {
+    measuredConnectorWidth.value = connectorRef.value.clientWidth;
+  }
+}
+
+onMounted(() => {
+  updateWidth();
+  if (typeof ResizeObserver !== 'undefined' && connectorRef.value) {
+    resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(connectorRef.value);
+  }
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+const isActive = computed(() => {
+  return stackContext?.isActive.value ?? false;
+});
+
+const isAnimated = computed(() => {
+  return rootContext?.animation.value ?? false;
+});
+
+const stepIndex = computed(() => {
+  return stackContext?.index.value ?? 0;
+});
+
+const palette = computed(() => {
+  return rootContext?.palette.value;
+});
+
+const contentWidth = computed(() => rootContext?.contentWidthPx.value ?? 240);
+
+const deltaY = computed(() => {
+  if (stackContext?.deltaY?.value !== undefined) {
+    return stackContext.deltaY.value;
+  }
+  const idx = stackContext?.index.value ?? 0;
+  return rootContext?.getCardDeltaY?.(idx) ?? 0;
+});
+
+const effectiveDeltaY = computed(() => deltaY.value ?? 0);
+
+const connectorWidth = computed(() => {
+  if (props.connectorWidth !== undefined) {
+    return props.connectorWidth;
+  }
+  if (stackContext?.connectorWidth?.value !== undefined) {
+    return stackContext.connectorWidth.value;
+  }
+  return measuredConnectorWidth.value || 40;
+});
+
+const svgMargin = 4;
+const svgHeight = computed(() => {
+  return Math.max(8, Math.abs(effectiveDeltaY.value) + svgMargin * 2);
+});
+
+const svgMinY = computed(() => {
+  return Math.min(0, effectiveDeltaY.value) - svgMargin;
+});
+
+const svgTop = computed(() => {
+  return Math.min(0, effectiveDeltaY.value) - svgMargin;
+});
+
+const connectorPath = computed(() => {
+  const w = connectorWidth.value;
+  return createPyramidConnectorPath(
+    { x: 0, y: 0 },
+    { x: w, y: effectiveDeltaY.value },
+  );
+});
+
+const stackColor = computed(() => {
+  return (
+    props.color ??
+    stackContext?.color?.value ??
+    rootContext?.color.value ??
+    '#3b82f6'
+  );
+});
+</script>
+
+<template>
+  <div
+    class="alpha-circular-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible"
+    :style="{
+      '--content-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+    }"
+  >
+    <!-- Scalable Line between Dot and Content Card (always at least 20px) -->
+    <div
+      ref="connectorRef"
+      class="alpha-circular-pyramid-stack-content__connector flex-1 flex items-center min-w-[20px] pointer-events-none relative overflow-visible h-0"
+    >
+      <div
+        class="alpha-circular-pyramid-stack-content__dot absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 pointer-events-auto"
+        :class="{
+          'alpha-circular-pyramid-stack-content__dot--animated': isAnimated,
+        }"
+        :style="{
+          backgroundColor: stackColor,
+          boxShadow: isActive
+            ? `0 0 6px ${stackColor}`
+            : `0 0 2px ${stackColor}80`,
+        }"
+      />
+      <!-- Straight horizontal line when deltaY is 0 -->
+      <div
+        v-if="!effectiveDeltaY"
+        class="alpha-circular-pyramid-stack-content__line absolute left-0 top-0 w-full h-[1px] -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        :class="{
+          'alpha-circular-pyramid-stack-content__line--animated': isAnimated,
+        }"
+        :style="{
+          backgroundColor: stackColor,
+          opacity: isActive ? 1 : 0.65,
+        }"
+      />
+      <!-- Zigzag SVG connector when deltaY !== 0 -->
+      <svg
+        v-else
+        class="alpha-circular-pyramid-stack-content__line-svg absolute left-0 pointer-events-none overflow-visible"
+        :width="connectorWidth"
+        :height="svgHeight"
+        :viewBox="`0 ${svgMinY} ${connectorWidth} ${svgHeight}`"
+        :style="{
+          top: `${svgTop}px`,
+          width: `${connectorWidth}px`,
+          height: `${svgHeight}px`,
+        }"
+      >
+        <path
+          class="alpha-circular-pyramid-stack-content__line transition-all duration-300"
+          :class="{
+            'alpha-circular-pyramid-stack-content__line--svg-animated': isAnimated,
+          }"
+          :d="connectorPath"
+          fill="none"
+          :stroke="stackColor"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          pathLength="1"
+          :style="{
+            opacity: isActive ? 1 : 0.65,
+          }"
+        />
+      </svg>
+    </div>
+    <!-- Content Card -->
+    <div
+      class="alpha-circular-pyramid-stack-content rounded-xl p-2 px-2.5 transition-all duration-300 border select-none box-border flex-shrink-0"
+      :class="[
+        isActive
+          ? 'alpha-circular-pyramid-stack-content--active'
+          : 'alpha-circular-pyramid-stack-content--default',
+        {
+          'alpha-circular-pyramid-stack-content--animated': isAnimated,
+        },
+      ]"
+      :style="{
+        width: `${contentWidth}px`,
+        minWidth: `${contentWidth}px`,
+        maxWidth: `${contentWidth}px`,
+        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',
+        '--card-transform': deltaY ? `translateY(${deltaY}px)` : 'none',
+        transform: deltaY ? `translateY(${deltaY}px)` : undefined,
+      }"
+    >
+      <div
+        class="text-[10px] leading-snug transition-colors duration-300 break-words line-clamp-3"
+        :style="{
+          color: isActive ? '#0f172a' : '#475569',
+        }"
+      >
+        <slot>{{ props.content }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-circular-pyramid-stack-content {
+  box-sizing: border-box;
+}
+
+.alpha-circular-pyramid-stack-content--active {
+  backdrop-filter: blur(8px);
+}
+
+.alpha-circular-pyramid-stack-content__dot--animated {
+  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--content-delay) both;
+}
+
+@keyframes alpha-pyramid-dot-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-content__line--animated {
+  transform-origin: left center;
+  animation: alpha-pyramid-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-line-draw {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-content__line--svg-animated {
+  stroke-dasharray: 1;
+  animation: alpha-pyramid-svg-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-svg-line-draw {
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  2% {
+    opacity: 1;
+    stroke-dashoffset: 1;
+  }
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+.alpha-circular-pyramid-stack-content--animated {
+  animation: alpha-pyramid-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--content-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-card-in {
+  0% {
+    opacity: 0;
+    transform: var(--card-transform, none) translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: var(--card-transform, none) translateX(0);
+  }
+}
+</style>