@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

package/components/facets/triad/{hex-triad/HexTriadCallout.vue → hexagon-triad/HexagonTriadCallout.vue}

@@ -5,14 +5,16 @@ import {
   DEFAULT_HEX_TRIAD_ITEMS,
   HEX_TRIAD_CALLOUT_KEY,
   HEX_TRIAD_ROOT_KEY,
-  type IHexTriadItem,
-} from '../../../../utils/hexTriad';
-import HexTriadBadge from './HexTriadBadge.vue';
-import HexTriadContent from './HexTriadContent.vue';
-import HexTriadHeading from './HexTriadHeading.vue';
+  type IHexagonTriadItem,
+} from '../../../../utils/facets/triad/hexagon-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+import HexagonTriadBadge from './HexagonTriadBadge.vue';
+import HexagonTriadContent from './HexagonTriadContent.vue';
+import HexagonTriadHeading from './HexagonTriadHeading.vue';
 
 defineOptions({
-  name: 'HexTriadCallout',
+  inheritAttrs: false,
+  name: 'HexagonTriadCallout',
 });
 
 interface INamedComponent {
@@ -30,13 +32,13 @@ function hasComponentName(type: unknown, name: string): boolean {
 const rootContext = inject(HEX_TRIAD_ROOT_KEY, undefined);
 
 if (!rootContext) {
-  console.warn('[HexTriadCallout] Must be used inside <HexTriad>');
+  console.warn('[HexagonTriadCallout] Must be used inside <HexagonTriad>');
 }
 
 const registration = rootContext?.registerCallout();
 const index = registration?.index ?? 0;
 
-const fallbackItem = computed<IHexTriadItem>(() => {
+const fallbackItem = computed<IHexagonTriadItem>(() => {
   return DEFAULT_HEX_TRIAD_ITEMS[0];
 });
 
@@ -70,21 +72,22 @@ function flattenVNodes(nodes: VNode[]): VNode[] {
 
 function isBadgeNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'HexTriadBadge') || node.type === HexTriadBadge
+    hasComponentName(node.type, 'HexagonTriadBadge') ||
+    node.type === HexagonTriadBadge
   );
 }
 
 function isHeadingNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'HexTriadHeading') ||
-    node.type === HexTriadHeading
+    hasComponentName(node.type, 'HexagonTriadHeading') ||
+    node.type === HexagonTriadHeading
   );
 }
 
 function isContentNode(node: VNode): boolean {
   return (
-    hasComponentName(node.type, 'HexTriadContent') ||
-    node.type === HexTriadContent
+    hasComponentName(node.type, 'HexagonTriadContent') ||
+    node.type === HexagonTriadContent
   );
 }
 
@@ -132,30 +135,31 @@ const positionStyle = computed(() => {
 
 const animation = computed(() => rootContext?.animation?.value ?? true);
 
-const containerClass = computed(() => {
-  if (index === 2) {
-    return `alpha-hex-triad-callout alpha-hex-triad-callout--${index} absolute flex items-start gap-3 justify-end text-right z-10 pointer-events-auto`;
-  }
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => {
+  const alignClasses =
+    index === 2 ? 'justify-end text-right' : 'justify-start text-left';
 
-  return `alpha-hex-triad-callout alpha-hex-triad-callout--${index} absolute flex items-start gap-3 justify-start text-left z-10 pointer-events-auto`;
+  return `alpha-hexagon-triad-callout absolute flex items-start gap-3 z-10 pointer-events-auto ${alignClasses}`;
 });
 </script>
 
 <template>
   <div
     v-if="index < 3"
-    :class="[containerClass, { 'alpha-hex-triad-callout--animated': animation }]"
+    v-bind="forwardedAttrs()"
+    :class="[
+      className(),
+      `alpha-hexagon-triad-callout--${index}`,
+      { 'alpha-hexagon-triad-callout--animated': animation },
+    ]"
     :style="positionStyle"
   >
     <!-- For Index 0 and 1: Badge on left, Text on right -->
     <template v-if="index !== 2">
       <component :is="badgeNode" v-if="badgeNode" />
-      <HexTriadBadge v-else />
       <div class="flex flex-col items-start text-left">
         <component :is="headingNode" v-if="headingNode" />
-        <HexTriadHeading v-else />
         <component :is="contentNode" v-if="contentNode" />
-        <HexTriadContent v-else />
         <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
       </div>
     </template>
@@ -163,28 +167,28 @@ const containerClass = computed(() => {
     <template v-else>
       <div class="flex flex-col items-end text-right">
         <component :is="headingNode" v-if="headingNode" />
-        <HexTriadHeading v-else />
         <component :is="contentNode" v-if="contentNode" />
-        <HexTriadContent v-else />
         <component :is="node" v-for="(node, i) in otherNodes" :key="i" />
       </div>
       <component :is="badgeNode" v-if="badgeNode" />
-      <HexTriadBadge v-else />
     </template>
   </div>
 </template>
 
 <style scoped>
-.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--0 {
-  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 250ms) both;
+.alpha-hexagon-triad-callout--animated.alpha-hexagon-triad-callout--0 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--hex-start-delay, 0ms) + 250ms) both;
 }
 
-.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--1 {
-  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 450ms) both;
+.alpha-hexagon-triad-callout--animated.alpha-hexagon-triad-callout--1 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--hex-start-delay, 0ms) + 450ms) both;
 }
 
-.alpha-hex-triad-callout--animated.alpha-hex-triad-callout--2 {
-  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hex-start-delay, 0ms) + 650ms) both;
+.alpha-hexagon-triad-callout--animated.alpha-hexagon-triad-callout--2 {
+  animation: hex-callout-display 400ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--hex-start-delay, 0ms) + 650ms) both;
 }
 
 @keyframes hex-callout-display {

package/components/facets/triad/hexagon-triad/HexagonTriadCenterBadge.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HexagonTriadCenterBadge',
+});
+
+export interface IHexagonTriadCenterBadgeProps {
+  readonly x: number;
+  readonly y: number;
+  readonly text: string | number;
+  readonly color: string;
+  readonly filter?: string;
+  readonly radius: number;
+}
+
+const props = withDefaults(defineProps<IHexagonTriadCenterBadgeProps>(), {
+  filter: 'url(#hex-badge-shadow)',
+});
+
+const transform = computed(() => {
+  return `translate(${props.x}, ${props.y})`;
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hexagon-triad-center-badge',
+);
+</script>
+
+<template>
+  <g
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :transform="transform"
+    :filter="filter"
+  >
+    <circle
+      class="alpha-hexagon-triad-center-badge__outer"
+      cx="0"
+      cy="0"
+      :r="radius + 4"
+      fill="var(--alpha-hexagon-triad-center-badge-fill)"
+    />
+    <circle
+      class="alpha-hexagon-triad-center-badge__circle"
+      cx="0"
+      cy="0"
+      :r="radius"
+      :fill="color"
+    />
+    <circle
+      class="alpha-hexagon-triad-center-badge__ring"
+      cx="0"
+      cy="0"
+      :r="radius - 4"
+      fill="none"
+      stroke="var(--alpha-hexagon-triad-center-badge-stroke)"
+      stroke-width="1.2"
+      :style="{ opacity: 0.65 }"
+    />
+    <text
+      class="alpha-hexagon-triad-center-badge__text font-sans font-black text-lg select-none"
+      x="0"
+      y="6.5"
+      text-anchor="middle"
+      fill="var(--alpha-hexagon-triad-center-badge-fill)"
+    >
+      {{ text }}
+    </text>
+  </g>
+</template>

package/components/facets/triad/hexagon-triad/HexagonTriadContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HexagonTriadContent',
+});
+
+export interface IHexagonTriadContentProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IHexagonTriadContentProps>(), {
+  color: undefined,
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hexagon-triad-content font-sans leading-relaxed max-w-60 text-(--alpha-hexagon-triad-content)',
+);
+</script>
+
+<template>
+  <p
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="
+      props.color
+        ? { '--alpha-hexagon-triad-content': props.color }
+        : undefined
+    "
+  >
+    <slot />
+  </p>
+</template>

package/components/facets/triad/hexagon-triad/HexagonTriadHeading.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { HEX_TRIAD_CALLOUT_KEY } from '../../../../utils/facets/triad/hexagon-triad';
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'HexagonTriadHeading',
+});
+
+export interface IHexagonTriadHeadingProps {
+  readonly color?: string;
+}
+
+const props = withDefaults(defineProps<IHexagonTriadHeadingProps>(), {
+  color: undefined,
+});
+
+const calloutContext = inject(HEX_TRIAD_CALLOUT_KEY, undefined);
+
+const headingColor = computed(() => {
+  return (
+    props.color ??
+    calloutContext?.item.value.color ??
+    'var(--alpha-hexagon-triad-heading)'
+  );
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hexagon-triad-heading mb-2 font-sans font-bold tracking-tight',
+);
+</script>
+
+<template>
+  <h4
+    v-if="$slots.default"
+    v-bind="forwardedAttrs()"
+    :class="className()"
+    :style="{ color: headingColor }"
+  >
+    <slot>{{ '' }}</slot>
+  </h4>
+</template>

package/components/facets/triad/{hex-triad/HexTriadLayer.vue → hexagon-triad/HexagonTriadLayer.vue}

@@ -1,25 +1,33 @@
 <script setup lang="ts">
+import { useMergedUnoAttrs } from '../../../../utils/useMergedUnoAttrs';
+
 defineOptions({
-  name: 'HexTriadLayer',
+  inheritAttrs: false,
+  name: 'HexagonTriadLayer',
 });
 
-export interface IHexTriadLayerProps {
+export interface IHexagonTriadLayerProps {
   readonly d: string;
   readonly fill?: string;
   readonly filter?: string;
   readonly opacity?: number | string;
 }
 
-withDefaults(defineProps<IHexTriadLayerProps>(), {
+withDefaults(defineProps<IHexagonTriadLayerProps>(), {
   opacity: 1,
   fill: undefined,
   filter: undefined,
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-hexagon-triad-layer',
+);
 </script>
 
 <template>
   <path
-    class="alpha-hex-triad-layer"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :d="d"
     :fill="fill"
     :filter="filter"

package/components/facets/triad/hexagon-triad/style.css

@@ -0,0 +1,22 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-hexagon-triad-content: var(--alpha-foreground-primary, #475569);
+    --alpha-hexagon-triad-badge: #ffffff;
+    --alpha-hexagon-triad-badge-bg: #e11d48;
+    --alpha-hexagon-triad-badge-light: #fb7185;
+    --alpha-hexagon-triad-center-badge-fill: #ffffff;
+    --alpha-hexagon-triad-center-badge-stroke: #ffffff;
+    --alpha-hexagon-triad-connector-stroke: #ffffff;
+    --alpha-hexagon-triad-heading: var(--alpha-foreground-primary, #e11d48);
+    --alpha-hexagon-triad-item-1-color: #ee3248;
+    --alpha-hexagon-triad-item-1-depth: #9e1526;
+    --alpha-hexagon-triad-item-1-light: #ff8595;
+    --alpha-hexagon-triad-item-2-color: #f26522;
+    --alpha-hexagon-triad-item-2-depth: #a83908;
+    --alpha-hexagon-triad-item-2-light: #ffb088;
+    --alpha-hexagon-triad-item-3-color: #2b4594;
+    --alpha-hexagon-triad-item-3-depth: #172554;
+    --alpha-hexagon-triad-item-3-light: #8da4e2;
+  }
+}

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

@@ -15,14 +15,12 @@ import {
   ARC_ARROW_PROCESS_ROOT_KEY,
   createArcArrowProcessGeometry,
   getDefaultArcArrowProcessItem,
-  type IArcArrowProcessItem,
   type IArcArrowProcessRegistration,
   type IResolvedArcArrowProcessItem,
   resolveArcArrowProcessItems,
-} from '../../../utils/arcArrowProcess';
+} from '../../../utils/process/arc-arrow-process';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcArrowProcessArrow from './ArcArrowProcessArrow.vue';
-import ArcArrowProcessCallout from './ArcArrowProcessCallout.vue';
 
 defineOptions({
   name: 'ArcArrowProcess',
@@ -30,7 +28,6 @@ defineOptions({
 });
 
 export interface IArcArrowProcessProps {
-  readonly items?: readonly IArcArrowProcessItem[];
   readonly count?: number;
   readonly animation?: boolean;
   readonly height?: number | string;
@@ -40,7 +37,6 @@ export interface IArcArrowProcessProps {
 }
 
 const props = withDefaults(defineProps<IArcArrowProcessProps>(), {
-  items: undefined,
   count: undefined,
   animation: true,
   height: 370,
@@ -145,15 +141,11 @@ const resolvedCount = computed<number>(() => {
     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);
+  return resolveArcArrowProcessItems(undefined, resolvedCount.value);
 });
 
 const registeredCalloutColors = ref<Record<number, string>>({});
@@ -204,18 +196,10 @@ const getArrowColor = (idx: number): string => {
     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];
   }
@@ -274,7 +258,7 @@ const resolvedHeightStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-arrow-process w-full flex items-start justify-center select-none font-sans relative',
+  'alpha-arc-arrow-process w-full min-h-[340px] flex items-start justify-center select-none font-sans relative',
 );
 </script>
 
@@ -284,15 +268,12 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :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"
+      class="alpha-arc-arrow-process__stage relative w-full h-full max-w-250 flex items-start justify-center overflow-visible"
     >
       <!-- Central Graphic: Reusing ArcArrowProcessArrow -->
       <div
@@ -315,36 +296,33 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         />
       </div>
       <!-- Callout Cards -->
-      <slot v-if="slots.default" />
-      <template v-else>
-        <ArcArrowProcessCallout
-          v-for="idx in resolvedCount"
-          :key="idx - 1"
-          :index="idx - 1"
-        />
-      </template>
+      <slot />
     </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;
+  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;
+  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;
+  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;
+  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;
 }
 

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { DEFAULT_ARC_ARROW_PATH } from '../../../utils/arcArrowProcess';
+import { DEFAULT_ARC_ARROW_PATH } from '../../../utils/process/arc-arrow-process';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
   name: 'ArcArrowProcessArrow',
+  inheritAttrs: false,
 });
 
 export interface IArcArrowProcessArrowProps {
@@ -22,9 +24,9 @@ export interface IArcArrowProcessArrowProps {
 }
 
 const props = withDefaults(defineProps<IArcArrowProcessArrowProps>(), {
-  color: '#6fa3b5',
-  gradientEnd: '#8cb8c8',
-  stroke: '#ffffff',
+  color: 'var(--alpha-arc-arrow-process-arrow)',
+  gradientEnd: 'var(--alpha-arc-arrow-process-arrow-gradient-end)',
+  stroke: 'var(--alpha-arc-arrow-process-arrow-stroke)',
   strokeWidth: 2.5,
   width: undefined,
   height: undefined,
@@ -76,50 +78,47 @@ const resolvedHeight = computed(() => {
 
   return isStandalone.value ? '215px' : '100%';
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-arc-arrow-process-arrow inline-flex items-center justify-center select-none',
+);
 </script>
 
 <template>
   <div
-    class="alpha-arc-arrow-process-arrow inline-flex items-center justify-center select-none"
+    v-bind="forwardedAttrs()"
+    :class="className()"
     :style="{
       width: resolvedWidth,
       height: resolvedHeight,
     }"
   >
     <svg
+      aria-hidden="true"
       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%"
-        >
+        <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"
+            flood-color="var(--alpha-arc-arrow-process-arrow-shadow)"
           />
         </filter>
-        <linearGradient
-          :id="gradId"
-          x1="0%"
-          y1="100%"
-          x2="100%"
-          y2="0%"
-        >
+        <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})`">
+      <g
+        v-if="!isStandalone"
+        :transform="`translate(500, ${props.originY}) rotate(${props.rotation})`"
+      >
         <path
           :d="resolvedPath"
           :fill="`url(#${gradId})`"