@alphacifer/slidev-addon-theme 0.0.8 → 0.0.9

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

@@ -0,0 +1,366 @@
+<script setup lang="ts">
+import {
+  computed,
+  Fragment,
+  inject,
+  onUnmounted,
+  provide,
+  useSlots,
+  type VNode,
+} from 'vue';
+
+import {
+  DEFAULT_SQUARE_PYRAMID_COLOR,
+  DEFAULT_SQUARE_PYRAMID_STACK_COLORS,
+  SQUARE_PYRAMID_ROOT_KEY,
+  SQUARE_PYRAMID_STACK_KEY,
+} from '../../../utils/pyramid/square-pyramid';
+import SquarePyramidStackContent from './SquarePyramidStackContent.vue';
+import SquarePyramidStackTitle from './SquarePyramidStackTitle.vue';
+
+defineOptions({
+  name: 'SquarePyramidStack',
+});
+
+export interface ISquarePyramidStackProps {
+  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<ISquarePyramidStackProps>(), {
+  index: undefined,
+  step: undefined,
+  title: undefined,
+  content: undefined,
+  color: undefined,
+  active: undefined,
+  connectorWidth: undefined,
+});
+
+const slots = useSlots();
+const rootContext = inject(SQUARE_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, 'SquarePyramidStackTitle'),
+  );
+});
+
+const slottedContent = computed(() => {
+  return defaultNodes.value.find((node) =>
+    hasComponentName(node.type, 'SquarePyramidStackContent'),
+  );
+});
+
+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.slabHeight ?? 0) / 2).toFixed(2))
+  );
+});
+
+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 - 40));
+  }
+  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 + 40;
+    const containerW = 960;
+    return Math.max(rightWidth.value + 20, Math.round(containerW - dotRightX));
+  }
+  return rightWidth.value + 40;
+});
+
+const rightOffset = computed(
+  () => rootContext?.contentRightOffsetPx.value ?? 0,
+);
+
+const resolvedColor = computed<string>(() => {
+  if (effectiveColor.value) {
+    return effectiveColor.value;
+  }
+  return (
+    rootContext?.getLayerColor(resolvedIndex.value) ??
+    DEFAULT_SQUARE_PYRAMID_STACK_COLORS[
+      Math.abs(resolvedIndex.value) % DEFAULT_SQUARE_PYRAMID_STACK_COLORS.length
+    ] ??
+    DEFAULT_SQUARE_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);
+});
+
+provide(SQUARE_PYRAMID_STACK_KEY, {
+  index: resolvedIndex,
+  isActive,
+  step: resolvedStep,
+  layerGeo: layerGeometry,
+  color: resolvedColor,
+  deltaY,
+  connectorWidth,
+  setActive: handleStackClick,
+});
+</script>
+
+<template>
+  <div
+    class="alpha-square-pyramid-stack absolute inset-x-0 pointer-events-none select-none flex items-center justify-between"
+    :class="[
+      isActive
+        ? 'alpha-square-pyramid-stack--active'
+        : 'alpha-square-pyramid-stack--inactive',
+      `alpha-square-pyramid-stack--${resolvedIndex}`,
+    ]"
+    :data-index="resolvedIndex"
+    :data-active="isActive"
+    :style="{
+      top: `${posY}px`,
+      transform: 'translateY(-50%)',
+    }"
+  >
+    <!-- Left Wing: Title Pill (150px) -->
+    <div
+      class="alpha-square-pyramid-stack__left flex-shrink-0 flex items-center justify-start pointer-events-auto cursor-pointer"
+      :class="[
+        `alpha-square-pyramid-stack__left--${resolvedIndex}`,
+        { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
+      ]"
+      :style="{
+        width: `${leftWidth}px`,
+        minWidth: `${leftWidth}px`,
+        maxWidth: `${leftWidth}px`,
+        opacity: !hasActiveStack || isActive ? 1 : 0.65,
+      }"
+      @click="handleStackClick"
+    >
+      <component :is="slottedTitle" v-if="slottedTitle" />
+      <SquarePyramidStackTitle
+        v-else
+        :step="resolvedStep"
+        :title="props.title || `Stage ${resolvedStep}`"
+        :connector-width="props.connectorWidth"
+      />
+    </div>
+    <!-- Right Wing: Dot + Connector + Content Card (40px from slab) -->
+    <div
+      class="alpha-square-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
+      :class="[
+        `alpha-square-pyramid-stack__right--${resolvedIndex}`,
+        { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
+      ]"
+      :style="{
+        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" />
+      <SquarePyramidStackContent
+        v-else
+        :content="props.content || 'Layer details and operational description.'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alpha-square-pyramid-stack {
+  height: 0;
+  overflow: visible;
+}
+
+.alpha-square-pyramid-stack__left,
+.alpha-square-pyramid-stack__right {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--0 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 100ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--1 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 180ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--2 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 260ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--3 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 340ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--4 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 420ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--5 {
+  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 500ms) both;
+}
+
+@keyframes alpha-pyramid-left-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--0 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 120ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--1 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 200ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--2 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 280ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--3 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 360ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--4 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 440ms) both;
+}
+
+.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--5 {
+  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 520ms) both;
+}
+
+@keyframes alpha-pyramid-right-in {
+  0% {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

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

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
+
+import { createPyramidConnectorPath } from '../../../utils/pyramid/shared';
+import {
+  SQUARE_PYRAMID_ROOT_KEY,
+  SQUARE_PYRAMID_STACK_KEY,
+} from '../../../utils/pyramid/square-pyramid';
+
+defineOptions({
+  name: 'SquarePyramidStackContent',
+});
+
+export interface ISquarePyramidStackContentProps {
+  readonly content?: string;
+  readonly color?: string;
+  readonly connectorWidth?: number;
+}
+
+const props = withDefaults(defineProps<ISquarePyramidStackContentProps>(), {
+  content: undefined,
+  color: undefined,
+  connectorWidth: undefined,
+});
+
+const rootContext = inject(SQUARE_PYRAMID_ROOT_KEY, undefined);
+const stackContext = inject(SQUARE_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 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-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible">
+    <!-- Scalable Line between Dot and Content Card (always at least 20px) -->
+    <div
+      ref="connectorRef"
+      class="alpha-square-pyramid-stack-content__connector flex-1 flex items-center min-w-[20px] pointer-events-none relative overflow-visible h-0"
+    >
+      <div
+        class="alpha-square-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"
+        :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-square-pyramid-stack-content__line absolute left-0 top-0 w-full h-[1px] -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        :style="{
+          backgroundColor: stackColor,
+          opacity: isActive ? 1 : 0.65,
+        }"
+      />
+      <!-- Zigzag SVG connector when deltaY !== 0 -->
+      <svg
+        v-else
+        class="alpha-square-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-square-pyramid-stack-content__line transition-all duration-300"
+          :d="connectorPath"
+          fill="none"
+          :stroke="stackColor"
+          stroke-width="1.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          :style="{
+            opacity: isActive ? 1 : 0.65,
+          }"
+        />
+      </svg>
+    </div>
+    <!-- Content Card -->
+    <div
+      class="alpha-square-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-square-pyramid-stack-content--active'
+          : 'alpha-square-pyramid-stack-content--default',
+      ]"
+      :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',
+        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-square-pyramid-stack-content {
+  box-sizing: border-box;
+}
+
+.alpha-square-pyramid-stack-content--active {
+  backdrop-filter: blur(8px);
+}
+</style>

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

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