kmcom-nuxt-layers 4.0.0 → 5.0.0

package/layers/design-system/theming/app/plugins/theme.client.ts

@@ -10,19 +10,21 @@ export default defineNuxtPlugin({
     const { setTransparencyOverride, effectiveReducedTransparency } = useThemeTransparency()
 
     // Restore persisted preferences. useState defaults were serialized from the
-    // server, so hydration matches. We update to the stored values here, after
-    // hydration completes, to avoid any mismatch.
-    const storedAccent = localStorage.getItem('theme-colour')
-    if (storedAccent) setAccent(storedAccent as AccentColor)
-
-    const storedContrast = localStorage.getItem('theme-contrast')
-    if (storedContrast) setContrastOverride(storedContrast as PreferenceOverride)
-
-    const storedMotion = localStorage.getItem('theme-motion')
-    if (storedMotion) setMotionOverride(storedMotion as PreferenceOverride)
-
-    const storedTransparency = localStorage.getItem('theme-transparency')
-    if (storedTransparency) setTransparencyOverride(storedTransparency as PreferenceOverride)
+    // server, so hydration matches only if client state is still at those defaults
+    // while hydrating. Plugin setup runs BEFORE hydration, so the stored values are
+    // applied on `app:mounted` (after hydration) instead of here.
+    useNuxtApp().hook('app:mounted', () => {
+      const restorers: Array<[key: string, apply: (value: string) => void]> = [
+        ['theme-colour', (v) => setAccent(v as AccentColor)],
+        ['theme-contrast', (v) => setContrastOverride(v as PreferenceOverride)],
+        ['theme-motion', (v) => setMotionOverride(v as PreferenceOverride)],
+        ['theme-transparency', (v) => setTransparencyOverride(v as PreferenceOverride)],
+      ]
+      for (const [key, apply] of restorers) {
+        const stored = localStorage.getItem(key)
+        if (stored) apply(stored)
+      }
+    })
 
     watch(
       activeAccent,

package/layers/design-system/theming/app/utils/themeAdapter.ts

@@ -1,4 +1,4 @@
-import { ACCENT_PALETTES, type AccentName } from '../../server/utils/accent-css'
+import { ACCENT_PALETTES, type AccentName } from '../../server/utils/accent-css.ts'
 
 /**
  * Derives Nuxt UI's `ui.colors` shape from the same accent-relationship table

package/layers/design-system/theming/nuxt.config.ts

@@ -1,5 +1,5 @@
 // Theme Layer - Color mode, accent colors, accessibility preferences
-import { resolveUiColors } from './app/utils/themeAdapter'
+import { resolveUiColors } from './app/utils/themeAdapter.ts'
 
 declare module '@nuxt/schema' {
   interface PublicRuntimeConfig {

package/layers/design-system/theming/server/utils/accent-css.test.ts

@@ -1,5 +1,5 @@
 import twColors from 'tailwindcss/colors'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { buildAccentCSS } from './accent-css'
 

package/layers/design-system/theming/server/utils/fouc-config.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { buildThemeInitScript } from './fouc-config'
 

package/layers/design-system/typography/app/components/Typography/TextStroke.vue

@@ -31,7 +31,7 @@
     v-bind="$attrs"
   >
     <!-- Sizer: transparent text for natural sizing + selectable -->
-    <span class="text-stroke-sizer text-transparent whitespace-nowrap" aria-hidden="true">{{
+    <span class="text-stroke-sizer whitespace-nowrap text-transparent" aria-hidden="true">{{
       text
     }}</span>
 

package/layers/design-system/visual/app/assets/css/visual.css

@@ -1,5 +1,4 @@
 .gradient-text {
-  background-clip: text;
   background-clip: text;
   color: transparent;
 }

package/layers/design-system/visual/app/components/Accent/Scene.vue

@@ -25,8 +25,8 @@
 </script>
 
 <template>
-  <component :is="tag" class="relative overflow-clip isolate">
-    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+  <component :is="tag" class="relative isolate overflow-clip">
+    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
       <AccentBlob
         v-for="(blob, i) in resolvedBlobs"
         :key="i"

package/layers/design-system/visual/app/components/Tint/Overlay.vue

@@ -20,6 +20,6 @@
 <template>
   <component :is="tag" class="relative">
     <slot />
-    <span class="absolute inset-0 pointer-events-none" :style aria-hidden="true" />
+    <span class="pointer-events-none absolute inset-0" :style aria-hidden="true" />
   </component>
 </template>

package/layers/design-system/visual/app/utils/colorTokens.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { resolveUiColorToken } from './colorTokens'
 

package/layers/design-system/visual/app/utils/gradientStyle.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { GradientConfig } from '../types/gradient'
 import { buildGradientStyle, resolveGradientColor } from './gradientStyle'

package/layers/design-system/visual/app/utils/responsiveSizes.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { ResponsiveSizes } from '../types/media'
 import { buildResponsiveSizesQueries } from './responsiveSizes'

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

@@ -147,7 +147,7 @@
   >
     <div
       ref="contentRef"
-      class="motion-marquee__content flex will-change-transform w-max"
+      class="motion-marquee__content flex w-max will-change-transform"
       :style="{ gap }"
     >
       <slot />

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

@@ -95,8 +95,8 @@
   onMounted(async () => {
     await nextTick()
 
-    baseX.value = new Array(texts.length).fill(0)
-    directionFactors.value = new Array(texts.length).fill(1)
+    baseX.value = Array.from({ length: texts.length }, () => 0)
+    directionFactors.value = Array.from({ length: texts.length }, () => 1)
     animLastTime = performance.now()
 
     const firstContainer = containerRef.value?.[0]
@@ -131,7 +131,7 @@
       :style="parallaxStyle"
     >
       <div
-        :class="`${scrollerClassName} font-styles-logo flex py-2 text-center font-sans text-4xl font-medium tracking-[-0.02em] whitespace-nowrap text-neutral drop-shadow md:text-[5rem] md:leading-20`"
+        :class="`${scrollerClassName} font-styles-logo text-neutral flex py-2 text-center font-sans text-4xl font-medium tracking-[-0.02em] whitespace-nowrap drop-shadow md:text-[5rem] md:leading-20`"
         :style="{ transform: `translateX(${scrollTransforms[index] ?? '0px'})`, ...scrollerStyle }"
       >
         <span

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

@@ -57,7 +57,7 @@
 
 <template>
   <section ref="sectionRef" class="motion-horizontal-scroll h-screen overflow-hidden">
-    <div ref="trackRef" class="h-full flex items-center will-change-transform">
+    <div ref="trackRef" class="flex h-full items-center will-change-transform">
       <slot />
     </div>
   </section>

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

@@ -72,8 +72,8 @@
 </script>
 
 <template>
-  <section ref="sectionRef" class="motion-pinned-section h-screen relative">
-    <div ref="contentRef" class="motion-pinned-content h-full flex items-center justify-center">
+  <section ref="sectionRef" class="motion-pinned-section relative h-screen">
+    <div ref="contentRef" class="motion-pinned-content flex h-full items-center justify-center">
       <slot />
     </div>
   </section>

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

@@ -49,7 +49,7 @@
   <!-- Linear Progress -->
   <div v-if="type === 'linear'" class="motion-scroll-progress-linear" v-bind="$attrs">
     <div
-      class="w-full rounded-full overflow-hidden"
+      class="w-full overflow-hidden rounded-full"
       :style="{ height: `${height}px`, backgroundColor: bgColor }"
     >
       <div
@@ -60,7 +60,7 @@
         }"
       />
     </div>
-    <span v-if="showPercentage" class="text-sm font-medium tabular-nums mt-2 block text-center">
+    <span v-if="showPercentage" class="mt-2 block text-center text-sm font-medium tabular-nums">
       {{ percentage }}%
     </span>
   </div>

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

@@ -51,7 +51,7 @@
 
 <template>
   <div
-    class="bg-black/80 backdrop-blur-sm text-white rounded-xl transition-opacity duration-300"
+    class="rounded-xl bg-black/80 text-white backdrop-blur-sm transition-opacity duration-300"
     :class="[
       ...positionClasses,
       isScrolling ? 'opacity-100' : 'opacity-60',
@@ -61,31 +61,31 @@
     <div class="flex items-center" :class="[compact ? 'gap-4 text-xs' : 'gap-6 text-sm']">
       <!-- Scrolling indicator -->
       <div
-        class="w-2 h-2 rounded-full transition-colors duration-100"
+        class="h-2 w-2 rounded-full transition-colors duration-100"
         :class="isScrolling ? 'bg-green-500' : 'bg-gray-600'"
       />
 
       <!-- Velocity -->
       <div v-if="show.includes('velocity')" class="text-center">
-        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">VEL</div>
+        <div v-if="!compact" class="mb-0.5 text-xs text-gray-500">VEL</div>
         <div class="font-medium tabular-nums">{{ velocity.toFixed(2) }}</div>
       </div>
 
       <!-- Progress -->
       <div v-if="show.includes('progress')" class="text-center">
-        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">PROG</div>
+        <div v-if="!compact" class="mb-0.5 text-xs text-gray-500">PROG</div>
         <div class="font-medium tabular-nums">{{ (progress * 100).toFixed(0) }}%</div>
       </div>
 
       <!-- Direction -->
       <div v-if="show.includes('direction')" class="text-center">
-        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">DIR</div>
+        <div v-if="!compact" class="mb-0.5 text-xs text-gray-500">DIR</div>
         <div class="font-medium">{{ directionLabel }}</div>
       </div>
 
       <!-- Scroll Y -->
       <div v-if="show.includes('scrollY')" class="text-center">
-        <div v-if="!compact" class="text-gray-500 text-xs mb-0.5">Y</div>
+        <div v-if="!compact" class="mb-0.5 text-xs text-gray-500">Y</div>
         <div class="font-medium tabular-nums">{{ Math.round(scrollY) }}px</div>
       </div>
     </div>

package/layers/motion/transitions/app/assets/css/transitions.css

@@ -21,31 +21,31 @@
 
 /* Animation classes */
 .animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
+  animation: fade-in 0.3s ease-out forwards;
 }
 
 .animate-fade-out {
-  animation: fadeOut 0.3s ease-out forwards;
+  animation: fade-out 0.3s ease-out forwards;
 }
 
 .animate-slide-in-up {
-  animation: slideInUp 0.3s ease-out forwards;
+  animation: slide-in-up 0.3s ease-out forwards;
 }
 
 .animate-slide-in-down {
-  animation: slideInDown 0.3s ease-out forwards;
+  animation: slide-in-down 0.3s ease-out forwards;
 }
 
 .animate-slide-in-left {
-  animation: slideInLeft 0.3s ease-out forwards;
+  animation: slide-in-left 0.3s ease-out forwards;
 }
 
 .animate-slide-in-right {
-  animation: slideInRight 0.3s ease-out forwards;
+  animation: slide-in-right 0.3s ease-out forwards;
 }
 
 /* Keyframes */
-@keyframes fadeIn {
+@keyframes fade-in {
   from {
     opacity: 0;
   }
@@ -55,7 +55,7 @@
   }
 }
 
-@keyframes fadeOut {
+@keyframes fade-out {
   from {
     opacity: 1;
   }
@@ -65,7 +65,7 @@
   }
 }
 
-@keyframes slideInUp {
+@keyframes slide-in-up {
   from {
     transform: translateY(20px);
     opacity: 0;
@@ -77,7 +77,7 @@
   }
 }
 
-@keyframes slideInDown {
+@keyframes slide-in-down {
   from {
     transform: translateY(-20px);
     opacity: 0;
@@ -89,7 +89,7 @@
   }
 }
 
-@keyframes slideInLeft {
+@keyframes slide-in-left {
   from {
     transform: translateX(-20px);
     opacity: 0;
@@ -101,7 +101,7 @@
   }
 }
 
-@keyframes slideInRight {
+@keyframes slide-in-right {
   from {
     transform: translateX(20px);
     opacity: 0;

package/layers/render/canvas/app/composables/useRendererCapabilities.ts

@@ -72,7 +72,8 @@ export async function checkWebGPUSupport(): Promise<boolean> {
   }
 
   try {
-    const adapter = await navigator.gpu.requestAdapter()
+    const gpu = (navigator as Navigator & { gpu: { requestAdapter: () => Promise<unknown> } }).gpu
+    const adapter = await gpu.requestAdapter()
     return adapter !== null
   } catch {
     return false

package/layers/render/canvas/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@types/three": "catalog:",
-    "vite": "catalog:"
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
   }
 }

package/layers/render/shader/app/assets/css/shader.css

@@ -12,17 +12,17 @@
   z-index: 9999;
   backdrop-filter: blur(8px);
   border-radius: 0.5rem;
-  background: rgb(0 0 0 / 0.8);
+  background: oklch(0% 0 0deg / 0.8);
   padding: 0.75rem 1rem;
   min-width: 200px;
-  color: #fff;
+  color: oklch(100% 0 0deg);
   font-size: 0.75rem;
   font-family: ui-monospace, monospace;
 }
 
 .shader-debug-title {
   margin-bottom: 0.5rem;
-  color: #a78bfa;
+  color: oklch(70.9% 0.1592 293.54deg);
   font-weight: 600;
 }
 
@@ -33,9 +33,9 @@
 }
 
 .shader-debug-label {
-  color: #94a3b8;
+  color: oklch(71.07% 0.0351 256.79deg);
 }
 
 .shader-debug-value {
-  color: #22c55e;
+  color: oklch(72.27% 0.192 149.58deg);
 }

package/layers/render/shader/app/components/Mesh/Plane.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import type { Vector3 } from 'three'
+
   const {
     width = 2,
     height = 2,
@@ -17,7 +19,7 @@
 </script>
 
 <template>
-  <TresMesh :position :rotation>
+  <TresMesh :position="position as unknown as Vector3" :rotation="rotation as unknown as Vector3">
     <TresPlaneGeometry :args="[width, height, widthSegments, heightSegments]" />
     <slot />
   </TresMesh>

package/layers/render/shader/app/shaders/common/grain.ts

@@ -334,7 +334,7 @@ export function crtEffect(
 
 // 8x8 Bayer matrix values (normalized to 0-1 range)
 const BAYER_8X8_MATRIX = [
-  0.0 / 64.0,
+  0, // 0 / 64
   48.0 / 64.0,
   12.0 / 64.0,
   60.0 / 64.0,

package/layers/render/shader/app/types/tsl.ts

@@ -37,7 +37,7 @@ export type TSLMat4 = any
 
 export type GradientStop = {
   position: number
-  color: TSLColor | TSLVec3
+  color: TSLColor
 }
 
 export type FBMOptions = {

package/layers/render/shader/app/utils/tsl/index.ts

@@ -1,2 +1,4 @@
 // Auto-imports are sourced directly from individual files in this directory.
 // See: noise.ts, math.ts, color.ts, uv.ts, animation.ts, patterns.ts, tween.ts, oklch.ts
+
+export {}

package/layers/structure/grid/app/assets/css/grid.css

@@ -12,6 +12,7 @@
 :root {
   /* rem term keeps this WCAG 1.4.4 zoom-safe; svi never vw (viewport-bar-collapse safe) */
   --fs: clamp(1rem, 0.95rem + 0.25svi, 1.125rem);
+
   /* rounded, not raw, so grid boundaries land on-pixel */
   line-height: round(nearest, var(--fs) * 1.5, 1px);
 }
@@ -21,6 +22,7 @@
      line-height */
   --unit: 1rlh;
   --measure-min: 22rem;
+
   /* margin floor > 0, steep svi slope so it shrinks fast on narrow screens */
   --edge-min: clamp(1rlh, 8svi, 3rlh);
   --avail-b: calc(100svh - 2 * var(--edge-min));

package/layers/structure/grid/app/composables/useGridTracks.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { GridPreset, TrackConfig } from '../types/tracks'
 import { resolve, toColumnsCss } from './useGridTracks'

package/layers/structure/grid/app/types/tracks.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { GridPreset, TrackConfig, TrackSegment } from './tracks'
 

package/layers/structure/grid/app/utils/placement.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { placementFromIndex, placementFromLines } from './placement'
 

package/layers/structure/layout/app/components/Layout/Grid/Debug.vue

@@ -72,7 +72,7 @@
 
 <template>
   <Teleport to="body">
-    <div v-if="visible" :style class="grid-debug z-9999 fixed inset-0" aria-hidden="true">
+    <div v-if="visible" :style class="grid-debug fixed inset-0 z-9999" aria-hidden="true">
       <div v-for="i in cols" :key="i" :style="{ backgroundColor: color }" class="h-full" />
     </div>
   </Teleport>

package/layers/structure/layout/app/components/Layout/Page/Header.vue

@@ -30,15 +30,15 @@
     <template v-if="back">
       <UButton :to="back" variant="ghost" icon="i-lucide-arrow-left" />
       <div>
-        <h1 class="text-3xl font-bold text-highlighted">{{ title }}</h1>
+        <h1 class="text-highlighted text-3xl font-bold">{{ title }}</h1>
         <p v-if="description" class="text-muted">{{ description }}</p>
       </div>
     </template>
 
     <!-- Centered page header (homepage, section intros) -->
     <template v-else>
-      <h1 class="text-4xl font-bold text-highlighted">{{ title }}</h1>
-      <p v-if="description" class="mt-3 text-lg text-muted">{{ description }}</p>
+      <h1 class="text-highlighted text-4xl font-bold">{{ title }}</h1>
+      <p v-if="description" class="text-muted mt-3 text-lg">{{ description }}</p>
     </template>
   </div>
 </template>

package/layers/structure/layout/app/components/Layout/Page/index.vue

@@ -2,9 +2,12 @@
   /**
    * LayoutPage — canonical page wrapper for the Swiss Grid System.
    *
-   * This is a fragment component (no wrapper element). The grid root is already
-   * provided by LayoutMain at the layout level via <main class="grid-root">.
-   * Adding another grid-root wrapper here would nest grids and misalign everything.
+   * The grid root is already provided by LayoutMain at the layout level via
+   * <main class="grid-root">. Adding another grid-root wrapper here would nest grids and
+   * misalign everything, so the single root element below is `display: contents` — it
+   * generates no box, and the header section and slot content still lay out as direct
+   * children of the grid root. A real root element (rather than a fragment) is what Vue's
+   * <Transition> and Nuxt's page-root check (NUXT_E4004) require.
    *
    * Responsibilities:
    *   - SEO via useHead()
@@ -57,13 +60,15 @@
 </script>
 
 <template>
-  <!-- Optional visible page header — rendered as a grid section -->
-  <LayoutSection v-if="showHeader">
-    <LayoutGridItem preset="centered">
-      <LayoutPageHeader :title v-bind="description !== undefined ? { description } : {}" />
-    </LayoutGridItem>
-  </LayoutSection>
+  <div class="contents">
+    <!-- Optional visible page header — rendered as a grid section -->
+    <LayoutSection v-if="showHeader">
+      <LayoutGridItem preset="centered">
+        <LayoutPageHeader :title v-bind="description !== undefined ? { description } : {}" />
+      </LayoutGridItem>
+    </LayoutSection>
 
-  <!-- Page content — direct children of grid-root (via LayoutMain in the layout) -->
-  <slot />
+    <!-- Page content — grid items of grid-root (via LayoutMain in the layout) -->
+    <slot />
+  </div>
 </template>

package/layers/structure/layout/app/utils/gridPlacementStyle.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import {
   buildGridPlacementClasses,

package/layers/structure/navigation/app/components/Mast/Nav.vue

@@ -6,7 +6,7 @@
 <template>
   <button
     aria-label="Open navigation menu"
-    class="fixed right-0 top-0 flex cursor-pointer items-center justify-center border-0 bg-transparent p-4"
+    class="fixed top-0 right-0 flex cursor-pointer items-center justify-center border-0 bg-transparent p-4"
     :style="{ zIndex: z }"
     @click="() => open()"
   >

package/layers/structure/navigation/app/components/Mast/NavModal.vue

@@ -41,7 +41,7 @@
       :style="{ zIndex: useGridConfig().useZIndex('modal') }"
     >
       <button
-        class="absolute right-[5vw] top-[3vh] cursor-pointer border-0 bg-transparent p-2"
+        class="absolute top-[3vh] right-[5vw] cursor-pointer border-0 bg-transparent p-2"
         aria-label="Close navigation"
         @click="dismiss"
       >
@@ -52,7 +52,7 @@
         <button
           v-for="link in links"
           :key="link.id"
-          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl uppercase tracking-widest transition-all"
+          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl tracking-widest uppercase transition-all"
           :class="activeSection === link.id ? 'font-normal' : 'font-light'"
           @click="() => handleNav(link)"
         >

package/layers/structure/navigation/app/utils/site.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { resolveSiteConfig } from './site'
 

package/layers/structure/routing/app/utils/resolveRoute.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { FeatureValue, RouteResolution, RoutingLayerConfig } from '../types/routing'
 import { resolveRoute } from './resolveRoute'