@alphacifer/slidev-addon-theme 0.0.10 → 0.0.11

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

@@ -16,18 +16,16 @@ import {
   SQUARE_PYRAMID_ROOT_KEY,
   SQUARE_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/square-pyramid';
-import SquarePyramidStackContent from './SquarePyramidStackContent.vue';
-import SquarePyramidStackTitle from './SquarePyramidStackTitle.vue';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'SquarePyramidStack',
+  inheritAttrs: false,
 });
 
 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;
@@ -36,8 +34,6 @@ export interface ISquarePyramidStackProps {
 const props = withDefaults(defineProps<ISquarePyramidStackProps>(), {
   index: undefined,
   step: undefined,
-  title: undefined,
-  content: undefined,
   color: undefined,
   active: undefined,
   connectorWidth: undefined,
@@ -56,13 +52,16 @@ interface INamedComponent {
 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[]));
@@ -70,6 +69,7 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
       result.push(node);
     }
   }
+
   return result;
 }
 
@@ -77,19 +77,20 @@ const defaultNodes = computed(() => {
   if (!slots.default) {
     return [];
   }
+
   return flattenVNodes(slots.default());
 });
 
 const slottedTitle = computed(() => {
-  return defaultNodes.value.find((node) =>
-    hasComponentName(node.type, 'SquarePyramidStackTitle'),
-  );
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'SquarePyramidStackHeading');
+  });
 });
 
 const slottedContent = computed(() => {
-  return defaultNodes.value.find((node) =>
-    hasComponentName(node.type, 'SquarePyramidStackContent'),
-  );
+  return defaultNodes.value.find((node) => {
+    return hasComponentName(node.type, 'SquarePyramidStackContent');
+  });
 });
 
 const stackToken = Symbol();
@@ -108,6 +109,7 @@ const resolvedIndex = computed<number>(() => {
   if (props.index !== undefined) {
     return Number(props.index);
   }
+
   return registration?.index.value ?? 0;
 });
 
@@ -115,9 +117,11 @@ const isActive = computed<boolean>(() => {
   if (props.active !== undefined) {
     return props.active;
   }
+
   if (!rootContext) {
     return false;
   }
+
   return rootContext.activeIndex.value === resolvedIndex.value;
 });
 
@@ -125,6 +129,7 @@ const resolvedStep = computed(() => {
   if (props.step !== undefined) {
     return props.step;
   }
+
   return String(resolvedIndex.value + 1).padStart(2, '0');
 });
 
@@ -132,6 +137,7 @@ const layerGeometry = computed(() => {
   if (!rootContext) {
     return undefined;
   }
+
   return rootContext.geo.value.layers[resolvedIndex.value];
 });
 
@@ -139,7 +145,9 @@ const posY = computed(() => {
   if (!layerGeometry.value) {
     return 0;
   }
+
   const geo = layerGeometry.value;
+
   return (
     geo.slabCenterY ?? Number((geo.cy + (geo.slabHeight ?? 0) / 2).toFixed(2))
   );
@@ -151,8 +159,10 @@ 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;
 });
 
@@ -164,25 +174,27 @@ const rightWingWidth = computed(() => {
     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;
   }
+
+  const stackIndex =
+    Math.abs(resolvedIndex.value) % DEFAULT_SQUARE_PYRAMID_STACK_COLORS.length;
+  const stackColor =
+    DEFAULT_SQUARE_PYRAMID_STACK_COLORS[stackIndex] ??
+    DEFAULT_SQUARE_PYRAMID_COLOR;
+
   return (
     rootContext?.getLayerColor(resolvedIndex.value) ??
-    DEFAULT_SQUARE_PYRAMID_STACK_COLORS[
-      Math.abs(resolvedIndex.value) % DEFAULT_SQUARE_PYRAMID_STACK_COLORS.length
-    ] ??
-    DEFAULT_SQUARE_PYRAMID_COLOR
+    `var(--alpha-square-pyramid-stack-${stackIndex + 1}-color, ${stackColor})`
   );
 });
 
@@ -222,17 +234,23 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
   connectorWidth,
   setActive: handleStackClick,
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-square-pyramid-stack absolute inset-x-0 pointer-events-none select-none flex items-center justify-between',
+);
 </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}`,
-    ]"
+    v-bind="forwardedAttrs()"
+    :class="
+      className([
+        isActive
+          ? 'alpha-square-pyramid-stack--active'
+          : 'alpha-square-pyramid-stack--inactive',
+        `alpha-square-pyramid-stack--${resolvedIndex}`,
+      ])
+    "
     :data-index="resolvedIndex"
     :data-active="isActive"
     :style="{
@@ -241,14 +259,17 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
     }"
   >
     <!-- 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"
+    <button
+      type="button"
+      class="alpha-square-pyramid-stack__left shrink-0 flex items-center justify-start pointer-events-auto cursor-pointer bg-transparent border-0 p-0 m-0 appearance-none"
+      :disabled="!rootContext?.interactive.value"
+      :aria-label="`Select stage ${resolvedStep}`"
       :class="[
         `alpha-square-pyramid-stack__left--${resolvedIndex}`,
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
-        '--wing-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+        '--wing-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
         width: `${leftWidth}px`,
         minWidth: `${leftWidth}px`,
         maxWidth: `${leftWidth}px`,
@@ -257,36 +278,28 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
       @click="handleStackClick"
     >
       <component :is="slottedTitle" v-if="slottedTitle" />
-      <SquarePyramidStackTitle
-        v-else
-        :step="resolvedStep"
-        :title="props.title || `Stage ${resolvedStep}`"
-        :connector-width="props.connectorWidth"
-      />
-    </div>
+    </button>
     <!-- Right Wing: Dot + Connector + Content Card (10px from slab) -->
-    <div
-      class="alpha-square-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
+    <button
+      type="button"
+      class="alpha-square-pyramid-stack__right shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer bg-transparent border-0 p-0 m-0 appearance-none"
+      :disabled="!rootContext?.interactive.value"
+      :aria-label="`Select stage ${resolvedStep}`"
       :class="[
         `alpha-square-pyramid-stack__right--${resolvedIndex}`,
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
-        '--wing-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+        '--wing-delay': `calc(var(--alpha-square-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" />
-      <SquarePyramidStackContent
-        v-else
-        :content="props.content || 'Layer details and operational description.'"
-      />
-    </div>
+    </button>
   </div>
 </template>
 
@@ -298,11 +311,18 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
 
 .alpha-square-pyramid-stack__left,
 .alpha-square-pyramid-stack__right {
-  transition: opacity 0.3s ease, transform 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
 }
 
 .alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__left {
-  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--square-pyramid-start-delay, 0ms) + 460ms)) both;
+  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(
+      --wing-delay,
+      calc(var(--alpha-square-pyramid-start-delay, 0ms) + 460ms)
+    )
+    both;
 }
 
 @keyframes alpha-pyramid-left-in {
@@ -317,7 +337,12 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
 }
 
 .alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__right {
-  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--square-pyramid-start-delay, 0ms) + 470ms)) both;
+  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(
+      --wing-delay,
+      calc(var(--alpha-square-pyramid-start-delay, 0ms) + 470ms)
+    )
+    both;
 }
 
 @keyframes alpha-pyramid-right-in {

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

@@ -6,19 +6,19 @@ import {
   SQUARE_PYRAMID_ROOT_KEY,
   SQUARE_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/square-pyramid';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'SquarePyramidStackContent',
+  inheritAttrs: false,
 });
 
 export interface ISquarePyramidStackContentProps {
-  readonly content?: string;
   readonly color?: string;
   readonly connectorWidth?: number;
 }
 
 const props = withDefaults(defineProps<ISquarePyramidStackContentProps>(), {
-  content: undefined,
   color: undefined,
   connectorWidth: undefined,
 });
@@ -67,7 +67,9 @@ const deltaY = computed(() => {
   if (stackContext?.deltaY?.value !== undefined) {
     return stackContext.deltaY.value;
   }
+
   const idx = stackContext?.index.value ?? 0;
+
   return rootContext?.getCardDeltaY?.(idx) ?? 0;
 });
 
@@ -77,9 +79,11 @@ const connectorWidth = computed(() => {
   if (props.connectorWidth !== undefined) {
     return props.connectorWidth;
   }
+
   if (stackContext?.connectorWidth?.value !== undefined) {
     return stackContext.connectorWidth.value;
   }
+
   return measuredConnectorWidth.value || 40;
 });
 
@@ -98,9 +102,16 @@ const svgTop = computed(() => {
 
 const connectorPath = computed(() => {
   const w = connectorWidth.value;
+
   return createPyramidConnectorPath(
-    { x: 0, y: 0 },
-    { x: w, y: effectiveDeltaY.value },
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: w,
+      y: effectiveDeltaY.value,
+    },
   );
 });
 
@@ -109,25 +120,32 @@ const stackColor = computed(() => {
     props.color ??
     stackContext?.color?.value ??
     rootContext?.color.value ??
-    '#3b82f6'
+    'var(--alpha-square-pyramid-stack-content-accent)'
   );
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'alpha-square-pyramid-stack-content rounded-xl p-2 px-2.5 text-[10px] leading-snug transition-all duration-300 border select-none box-border shrink-0',
+  isActive.value
+    ? 'alpha-square-pyramid-stack-content--active bg-(--alpha-square-pyramid-stack-content-border-active) text-(--alpha-square-pyramid-stack-content-active)'
+    : 'alpha-square-pyramid-stack-content--default bg-(--alpha-square-pyramid-stack-content-border) text-(--alpha-square-pyramid-stack-content)',
+]);
 </script>
 
 <template>
   <div
     class="alpha-square-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible"
     :style="{
-      '--content-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+      '--content-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
     }"
   >
     <!-- 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"
+      class="alpha-square-pyramid-stack-content__connector flex-1 flex items-center min-w-5 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"
+        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 shrink-0 transition-all duration-300 pointer-events-auto"
         :class="{
           'alpha-square-pyramid-stack-content__dot--animated': isAnimated,
         }"
@@ -135,13 +153,13 @@ const stackColor = computed(() => {
           backgroundColor: stackColor,
           boxShadow: isActive
             ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
+            : `0 0 2px color-mix(in srgb, ${stackColor} 50%, transparent)`,
         }"
       />
       <!-- 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"
+        class="alpha-square-pyramid-stack-content__line absolute left-0 top-0 w-full h-px -translate-y-1/2 pointer-events-none transition-colors duration-300"
         :class="{
           'alpha-square-pyramid-stack-content__line--animated': isAnimated,
         }"
@@ -152,6 +170,7 @@ const stackColor = computed(() => {
       />
       <!-- Zigzag SVG connector when deltaY !== 0 -->
       <svg
+        aria-hidden="true"
         v-else
         class="alpha-square-pyramid-stack-content__line-svg absolute left-0 pointer-events-none overflow-visible"
         :width="connectorWidth"
@@ -183,39 +202,30 @@ const stackColor = computed(() => {
     </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',
-        {
+      v-bind="forwardedAttrs()"
+      :class="
+        className({
           'alpha-square-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`
+          ? `0 4px 14px color-mix(in srgb, ${stackColor} 15%, transparent)`
           : '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',
-        }"
+      <p
+        class="text-[10px] transition-colors duration-300 wrap-break-word line-clamp-3"
       >
-        <slot>{{ props.content }}</slot>
-      </div>
+        <slot />
+      </p>
     </div>
   </div>
 </template>
@@ -230,7 +240,8 @@ const stackColor = computed(() => {
 }
 
 .alpha-square-pyramid-stack-content__dot--animated {
-  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--content-delay) both;
+  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--content-delay) both;
 }
 
 @keyframes alpha-pyramid-dot-pop {
@@ -246,7 +257,8 @@ const stackColor = computed(() => {
 
 .alpha-square-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;
+  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 {
@@ -266,7 +278,8 @@ const stackColor = computed(() => {
 
 .alpha-square-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;
+  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 {
@@ -285,7 +298,8 @@ const stackColor = computed(() => {
 }
 
 .alpha-square-pyramid-stack-content--animated {
-  animation: alpha-pyramid-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--content-delay) + 380ms) both;
+  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 {