kmcom-nuxt-layers 6.2.1 → 6.4.0

package/layers/design-system/visual/app/components/Base/Modal.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
   /**
-   * BaseModal — overlay-compatible modal shell.
-   *
-   * Use this as a starting point for new modals:
-   *   1. Copy or extend this component
-   *   2. Add your props and content in the slots
-   *   3. Register with createModal() in a composable
+   * BaseModal — overlay-compatible modal preset on UModal, which supplies the dialog role,
+   * focus trap, Escape, portal and transitions. This adds a size scale and a footer slot that
+   * receives `dismiss`.
    *
    * Example:
    *   // components/ConfirmModal.vue
@@ -31,13 +28,13 @@
     close: []
   }>()
 
-  const sizeClass: Record<string, string> = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-full',
-  }
+  const sizeClass = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    full: '',
+  } as const
 
   function dismiss() {
     emit('update:open', false)
@@ -46,77 +43,28 @@
 </script>
 
 <template>
-  <Transition name="base-modal">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4"
-      @click.self="dismiss"
-    >
-      <!-- Backdrop -->
-      <div class="bg-muted absolute inset-0 opacity-60" @click="dismiss" />
-
-      <!-- Panel -->
-      <div
-        class="bg-default ring-default relative w-full rounded-2xl shadow-xl ring-1"
-        :class="sizeClass[size]"
-      >
-        <!-- Header -->
-        <div
-          v-if="title || $slots.header"
-          class="border-default flex items-start justify-between border-b px-6 py-4"
-        >
-          <slot name="header">
-            <div>
-              <p class="text-default text-base font-semibold">
-                {{ title }}
-              </p>
-              <p v-if="description" class="text-muted mt-0.5 text-sm">
-                {{ description }}
-              </p>
-            </div>
-          </slot>
-          <button
-            class="text-muted hover:text-default ml-4 cursor-pointer border-0 bg-transparent p-1 transition-colors"
-            aria-label="Close"
-            @click="dismiss"
-          >
-            <UIcon name="lucide:x" class="size-5" />
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div class="px-6 py-5">
-          <slot />
-        </div>
-
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="border-default flex justify-end gap-3 border-t px-6 py-4">
-          <slot name="footer" :dismiss />
-        </div>
-      </div>
-    </div>
-  </Transition>
+  <UModal
+    :open
+    v-bind="{
+      ...(title !== undefined && { title }),
+      ...(description !== undefined && { description }),
+    }"
+    :fullscreen="size === 'full'"
+    :ui="{
+      overlay: 'z-(--z-modal)',
+      content: `z-(--z-modal) ${sizeClass[size]}`,
+      footer: 'justify-end gap-3',
+    }"
+    @update:open="(value) => !value && dismiss()"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
+    <template v-if="$slots.default" #body>
+      <slot />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" :dismiss />
+    </template>
+  </UModal>
 </template>
-
-<style scoped>
-  .base-modal-enter-active,
-  .base-modal-leave-active {
-    transition: opacity 200ms ease;
-  }
-
-  .base-modal-enter-from,
-  .base-modal-leave-to {
-    opacity: 0;
-  }
-  .base-modal-enter-active .bg-\(--ui-bg\),
-  .base-modal-leave-active .bg-\(--ui-bg\) {
-    transition:
-      opacity 200ms ease,
-      transform 200ms ease;
-  }
-  .base-modal-enter-from .bg-\(--ui-bg\),
-  .base-modal-leave-to .bg-\(--ui-bg\) {
-    transform: scale(0.96) translateY(4px);
-    opacity: 0;
-  }
-</style>

package/layers/design-system/visual/app/components/HoverDimGroup.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { describe, expect, it } from 'vite-plus/test'
+
+import HoverDimGroup from './HoverDimGroup.vue'
+
+// Same template shape as MastNavModal: <template v-for> around a <slot> with fallback content,
+// which compiles to fragments nested two deep
+const Parent = defineComponent({
+  components: { HoverDimGroup },
+  data: () => ({ ids: ['a', 'b', 'c'] }),
+  template: `
+    <HoverDimGroup tag="nav">
+      <template v-for="id in ids" :key="id">
+        <slot name="link" :id="id"><button>{{ id }}</button></slot>
+      </template>
+    </HoverDimGroup>`,
+})
+
+describe('HoverDimGroup', () => {
+  it('renders and dims children nested in v-for and slot fragments', async () => {
+    const wrapper = mount(Parent)
+    const items = wrapper.findAll('nav > button')
+    expect(items.map((b) => b.text())).toEqual(['a', 'b', 'c'])
+
+    await items[0]?.trigger('mouseenter')
+    expect(items.map((b) => b.attributes('style'))).toEqual([
+      expect.stringContaining('opacity: 1'),
+      expect.stringContaining('opacity: 0.3'),
+      expect.stringContaining('opacity: 0.3'),
+    ])
+  })
+
+  it('uses slot content when the parent passes it', () => {
+    const wrapper = mount(Parent, { slots: { link: '<a href="#">x</a>' } })
+    expect(wrapper.findAll('nav > a')).toHaveLength(3)
+  })
+})

package/layers/design-system/visual/app/components/HoverDimGroup.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
+
+  export default defineComponent({
+    name: 'HoverDimGroup',
+    inheritAttrs: false,
+    props: {
+      tag: { type: String, default: 'div' },
+      dimOpacity: { type: Number, default: 0.3 },
+      duration: { type: Number, default: 200 },
+    },
+    setup(props, { slots, attrs }) {
+      const hoveredIndex = ref<number | null>(null)
+
+      // v-for over slots nests fragments (v-for → slot → element), so flatten all the way down
+      const flatten = (nodes: VNode[]): VNode[] =>
+        nodes.flatMap((node) =>
+          node.type === Fragment && Array.isArray(node.children)
+            ? flatten(node.children as VNode[])
+            : [node]
+        )
+
+      return () => {
+        const children = flatten(slots.default?.() ?? []).filter(
+          (node) => typeof node.type === 'string' || typeof node.type === 'object'
+        )
+
+        const styledChildren = children.map((vnode, index) =>
+          cloneVNode(vnode, {
+            onMouseenter: () => {
+              hoveredIndex.value = index
+            },
+            style: {
+              opacity:
+                hoveredIndex.value !== null && hoveredIndex.value !== index ? props.dimOpacity : 1,
+              transition: `opacity ${props.duration}ms ease-out`,
+            },
+          })
+        )
+
+        return h(
+          props.tag,
+          {
+            ...attrs,
+            onMouseleave: () => {
+              hoveredIndex.value = null
+            },
+          },
+          styledChildren
+        )
+      }
+    },
+  })
+</script>

package/layers/design-system/visual/app/components/Progress/Bar.vue

@@ -1,35 +1,15 @@
 <script setup lang="ts">
-  const {
-    progress = null,
-    color = undefined,
-    size = undefined,
-    orientation = undefined,
-    status = undefined,
-    animation = undefined,
-    inverted = undefined,
-  } = defineProps<{
-    progress?: number | null
-    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-    orientation?: 'horizontal' | 'vertical'
-    status?: boolean
-    animation?: 'carousel' | 'carousel-inverse' | 'swing' | 'elastic'
-    inverted?: boolean
-  }>()
+  import type { ProgressProps } from '@nuxt/ui'
 
-  const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
-
-  const progressProps = computed(() => ({
-    ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
-    ...(color !== undefined && { color: color as 'primary' | 'neutral' }),
-    ...(size !== undefined && { size }),
-    ...(orientation !== undefined && { orientation }),
-    ...(status !== undefined && { status }),
-    ...(animation !== undefined && { animation }),
-    ...(inverted !== undefined && { inverted }),
-  }))
+  // The one decision over UProgress: progress is 0–1 (null = indeterminate). Every other
+  // UProgress prop stays typed here but falls through as an attr (@vue-ignore).
+  /* eslint-disable vue/no-unused-properties -- @vue-ignore props fall through as attrs */
+  const { progress = null } = defineProps<
+    { progress?: number | null } & /* @vue-ignore */ Omit<ProgressProps, 'modelValue'>
+  >()
+  /* eslint-enable vue/no-unused-properties */
 </script>
 
 <template>
-  <UProgress v-bind="progressProps" />
+  <UProgress :model-value="progress == null ? null : progress * 100" />
 </template>

package/layers/motion/animations/app/components/Motion/Cursor.vue

@@ -52,7 +52,7 @@
 <template>
   <Teleport to="body">
     <div
-      class="motion-cursor pointer-events-none fixed inset-0 z-9999 transition-opacity duration-300"
+      class="motion-cursor pointer-events-none fixed inset-0 z-(--z-cursor) transition-opacity duration-300"
       :style="{ opacity: visible ? 1 : 0 }"
       aria-hidden="true"
     >

package/layers/motion/animations/app/components/Motion/Marquee.vue

@@ -50,6 +50,7 @@
   }>()
 
   const { gsap } = useGsap()
+  const reduced = useReducedMotion()
   const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
 
   const containerRef = useTemplateRef<HTMLElement>('containerRef')
@@ -78,9 +79,13 @@
           return direction === 'left' ? parseFloat(x) % mod : Math.abs(parseFloat(x) % mod)
         }),
       },
+      paused: reduced.value,
     })
   })
 
+  // Reduced motion holds the marquee still (and resumes it if the preference is turned off)
+  watch(reduced, (r) => tweenRef.value?.paused(r))
+
   // Watch velocity changes for velocity-based animation
   watch(
     [scrollVelocity, scrollDirection],

package/layers/motion/animations/app/components/Motion/MarqueeText.vue

@@ -33,6 +33,7 @@
   }>()
 
   const { gsap, ScrollTrigger } = useGsap()
+  const reduced = useReducedMotion()
   const { velocityFactor } = useMarqueeVelocity({ damping, stiffness, velocityMapping })
 
   const containerRef = useTemplateRef<HTMLElement[]>('containerRef')
@@ -71,7 +72,7 @@
   }
 
   function animate() {
-    if (isPaused.value) return
+    if (isPaused.value || reduced.value) return
 
     const now = performance.now()
     const delta = animLastTime ? now - animLastTime : 16

package/layers/motion/animations/app/components/Motion/Staggered.test.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
+
+import Staggered from './Staggered.vue'
+
+// Auto-imported from the scroll layer in Nuxt; stubbed here (no Nuxt context in the 'vue' project)
+const reduced = ref(false)
+vi.stubGlobal('useReducedMotion', () => reduced)
+
+describe('MotionStaggered', () => {
+  beforeEach(() => {
+    reduced.value = false
+    vi.useFakeTimers()
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('renders each child once and reveals every one after the stagger', () => {
+    const wrapper = mount(Staggered, {
+      props: { staggerDelay: 50 },
+      slots: { default: '<p>a</p><p>b</p><p>c</p>' },
+    })
+    const items = wrapper.findAll('p')
+    expect(items).toHaveLength(3)
+    expect(items.every((p) => !p.classes('animated'))).toBe(true)
+
+    vi.advanceTimersByTime(100)
+    expect(items.map((p) => p.classes('animated'))).toEqual([true, true, true])
+    expect(items[0]?.classes()).toContain('animate-fade-in')
+  })
+
+  it('reveals every child at once, without the animation class, under reduced motion', () => {
+    reduced.value = true
+    const wrapper = mount(Staggered, { slots: { default: '<p>a</p><p>b</p>' } })
+    const items = wrapper.findAll('p')
+    expect(items.map((p) => p.classes('animated'))).toEqual([true, true])
+    expect(items[0]?.classes()).not.toContain('animate-fade-in')
+    expect(wrapper.attributes('data-reduced')).toBe('')
+  })
+})

package/layers/motion/animations/app/components/Motion/Staggered.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-  // Props
+  // Explicit import so Staggered mounts under vitest's 'vue' project (no Nuxt auto-imports)
+  // — same exemption as ElementTw.vue (eslint.config.mjs).
+  import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue'
+
   const {
     staggerDelay = 100,
     initialDelay = 0,
@@ -13,61 +16,53 @@
     animation?: string
   }>()
 
-  // State
-  const items = ref<HTMLElement[]>([])
-  const animatedItems = ref<boolean[]>([])
-
-  // Slots
-  const slots = useSlots()
+  // Stagger the rendered DOM children, not slot vnodes: a `ref`/`class` on `<slot>` becomes a
+  // slot prop and never reaches an element, which left every item hidden for good.
+  const reduced = useReducedMotion()
+  const root = useTemplateRef<HTMLElement>('root')
+  const timers: ReturnType<typeof setTimeout>[] = []
 
-  // Methods
-  const setItemRef = (el: HTMLElement | null, index: number) => {
-    if (el) {
-      items.value[index] = el
-      animatedItems.value[index] = false
-    }
-  }
-
-  // Lifecycle
   onMounted(() => {
-    // Animate items with staggered delay
-    setTimeout(() => {
-      items.value.forEach((item, index) => {
-        if (item) {
-          setTimeout(
-            () => {
-              animatedItems.value[index] = true
-              item.classList.add(`animate-${animation}`, 'animated')
-            },
-            initialDelay + index * staggerDelay
-          )
-        }
-      })
-    }, 100)
+    const items = [...(root.value?.children ?? [])]
+    if (reduced.value) {
+      root.value?.setAttribute('data-reduced', '')
+      return items.forEach((item) => item.classList.add('animated'))
+    }
+    items.forEach((item, index) => {
+      timers.push(
+        setTimeout(
+          () => item.classList.add(`animate-${animation}`, 'animated'),
+          initialDelay + index * staggerDelay
+        )
+      )
+    })
   })
+
+  onBeforeUnmount(() => timers.forEach(clearTimeout))
 </script>
 
 <template>
-  <div class="motion-staggered">
-    <slot
-      v-for="(_, index) in slots.default?.()"
-      :key="index"
-      :ref="(el: HTMLElement | null) => setItemRef(el, index)"
-      :class="{ animated: animatedItems[index] }"
-    />
+  <div ref="root" class="motion-staggered">
+    <slot />
   </div>
 </template>
 
 <style scoped>
   /* stylelint-disable selector-pseudo-class-no-unknown */
-  .motion-staggered :deep(.animated) {
+  .motion-staggered > :deep(*) {
+    transform: translateY(20px);
+    opacity: 0;
+    transition:
+      opacity 0.3s ease-out,
+      transform 0.3s ease-out;
+  }
+
+  .motion-staggered > :deep(.animated) {
     transform: translateY(0);
     opacity: 1;
   }
 
-  .motion-staggered :deep(*) {
-    transform: translateY(20px);
-    opacity: 0;
-    transition: all 0.3s ease-out;
+  .motion-staggered[data-reduced] > :deep(*) {
+    transition: none;
   }
 </style>

package/layers/motion/animations/app/components/Motion/TextReveal.vue

@@ -27,6 +27,12 @@
     start?: string
   }>()
 
+  // Swapped to a plain span after mount: the server can't know the preference, so deciding in
+  // render would mismatch on hydration.
+  const reduced = useReducedMotion()
+  const isStatic = ref(false)
+  onMounted(() => (isStatic.value = reduced.value))
+
   const animBinding = computed(() => ({
     y: 40,
     opacity: 0,
@@ -39,8 +45,9 @@
 </script>
 
 <template>
+  <span v-if="isStatic" class="motion-text-reveal">{{ text }}</span>
   <span
-    v-if="type === 'chars'"
+    v-else-if="type === 'chars'"
     v-gsap.whenVisible.once.splitText.chars.from="animBinding"
     class="motion-text-reveal"
     >{{ text }}</span

package/layers/motion/animations/app/components/Motion/VelocityEffect.vue

@@ -25,11 +25,17 @@
 
   const { gsap } = useGsap()
   const { velocity } = useSmoothScroll()
+  const reduced = useReducedMotion()
 
   const smoothVelocity = ref(0)
   const smoothAbsVelocity = ref(0)
 
   function tick() {
+    if (reduced.value) {
+      smoothVelocity.value = 0
+      smoothAbsVelocity.value = 0
+      return
+    }
     const d = damping / 1000
     const s = stiffness / 1000
 

package/layers/motion/animations/app/composables/useCountUp.ts

@@ -15,6 +15,7 @@ export function useCountUp(
   opts: UseCountUpOptions
 ) {
   const { gsap, ScrollTrigger } = useGsap()
+  const reduced = useReducedMotion()
 
   const displayValue = ref(String(opts.from ?? 0))
   const isComplete = ref(false)
@@ -26,6 +27,11 @@ export function useCountUp(
   let tween: gsap.core.Tween | null = null
 
   function startCount() {
+    if (reduced.value) {
+      displayValue.value = format(opts.to)
+      isComplete.value = true
+      return
+    }
     tween = gsap.to(counter, {
       value: opts.to,
       duration: opts.duration ?? 2,

package/layers/motion/animations/app/composables/useCursorFollower.ts

@@ -4,11 +4,14 @@ export function useCursorFollower(opts: { smoothing?: MaybeRef<number> } = {}) {
   const { gsap } = useGsap()
   const { x: mouseX, y: mouseY } = useMouse({ type: 'client' })
 
+  const reduced = useReducedMotion()
+
   const x = ref(0)
   const y = ref(0)
 
   function tick() {
-    const factor = unref(opts.smoothing) ?? 0.15
+    // Reduced motion: track the pointer exactly instead of trailing it
+    const factor = reduced.value ? 1 : (unref(opts.smoothing) ?? 0.15)
     x.value += (mouseX.value - x.value) * factor
     y.value += (mouseY.value - y.value) * factor
   }

package/layers/motion/animations/app/utils/pointerMotion.ts

@@ -14,13 +14,18 @@ export function resolvePointerSpring(
 
 export function usePointerMotionFrame(update: () => void, cleanup?: () => void) {
   const { gsap } = useGsap()
+  const reduced = useReducedMotion()
+
+  // Checked per frame so a reduced-motion toggle applies live; reduced holds the element at rest.
+  // ponytail: cleanup re-runs every frame while reduced — cheap gsap.set, gate it if it ever shows up in a profile
+  const frame = () => (reduced.value ? cleanup?.() : update())
 
   onMounted(() => {
-    gsap.ticker.add(update)
+    gsap.ticker.add(frame)
   })
 
   onUnmounted(() => {
-    gsap.ticker.remove(update)
+    gsap.ticker.remove(frame)
     cleanup?.()
   })
 

package/layers/motion/scroll/app/components/Motion/HorizontalScroll.vue

@@ -11,6 +11,7 @@
   }>()
 
   const { gsap } = useGsap()
+  const reduced = useReducedMotion()
 
   const sectionRef = useTemplateRef<HTMLElement>('sectionRef')
   const trackRef = useTemplateRef<HTMLElement>('trackRef')
@@ -21,6 +22,14 @@
     if (!sectionRef.value || !trackRef.value) return
 
     const track = trackRef.value
+
+    // Reduced motion: no pinned scrub — panels scroll natively sideways instead.
+    // ponytail: checked once at mount — a later reduced-motion toggle applies on next mount/reload; re-run set-up in a watch if live toggling matters
+    if (reduced.value) {
+      sectionRef.value.style.overflowX = 'auto'
+      return
+    }
+
     const trackWidth = track.scrollWidth - window.innerWidth
 
     const tween = gsap.to(track, {

package/layers/motion/scroll/app/components/Motion/Parallax.vue

@@ -34,32 +34,33 @@
   }>()
 
   const { gsap } = useGsap()
+  const reduced = useReducedMotion()
 
   const containerRef = useTemplateRef<HTMLElement | null>('containerRef')
   const contentRef = useTemplateRef<HTMLElement | null>('contentRef')
 
+  let tween: gsap.core.Tween | null = null
+
   onMounted(() => {
     if (!containerRef.value || !contentRef.value) return
+    // ponytail: checked once at mount — a later reduced-motion toggle applies on next mount/reload; re-run set-up in a watch if live toggling matters
+    if (reduced.value) return
 
-    const yAmount = direction === 'vertical' ? speed * -200 : 0
-    const xAmount = direction === 'horizontal' ? speed * 200 : 0
-
-    const animationProps: gsap.TweenVars = {
+    tween = gsap.to(contentRef.value, {
       scrollTrigger: {
         trigger: containerRef.value,
         start: 'top bottom',
         end: 'bottom top',
-        scrub: scrub,
+        scrub,
       },
       ease: 'none',
-    }
-
-    if (yAmount !== 0) animationProps.y = yAmount
-    if (xAmount !== 0) animationProps.x = xAmount
-    if (rotate !== 0) animationProps.rotation = rotate
-    if (scale !== 0) animationProps.scale = 1 + scale
+      ...parallaxMotionVars({ speed, direction, rotate, scale }),
+    })
+  })
 
-    gsap.to(contentRef.value, animationProps)
+  onUnmounted(() => {
+    tween?.scrollTrigger?.kill()
+    tween?.kill()
   })
 </script>