kmcom-nuxt-layers 4.0.1 → 5.0.0

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/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/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'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -153,7 +153,6 @@
     "@culur/config-stylelint": "^1.7.2",
     "@eslint/json": "^1.2.0",
     "@eslint/markdown": "^8.0.3",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@iconify-json/lucide": "^1.2.126",
     "@netlify/nuxt": "0.3.7",
     "@nuxt/eslint": "^1.15.2",
@@ -171,7 +170,7 @@
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.60.1",
     "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/coverage-v8": "5.0.4",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.10",
     "@vueuse/core": "^14.3.0",
@@ -188,7 +187,6 @@
     "eslint-plugin-compat": "^7.0.2",
     "eslint-plugin-glsl": "0.0.0-wip",
     "eslint-plugin-pnpm": "^1.6.1",
-    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.9.2",
@@ -196,32 +194,26 @@
     "happy-dom": "^20.10.3",
     "netlify-cli": "^26.1.0",
     "npm-check-updates": "^22.2.2",
-    "nuxt": "latest",
+    "nuxt": "4.6.1",
     "pinia": "^4.0.3",
     "postcss-html": "^1.8.1",
-    "prettier": "^3.8.3",
-    "prettier-plugin-css-order": "^2.2.0",
-    "prettier-plugin-glsl": "^0.3.1",
-    "prettier-plugin-organize-attributes": "^1.0.0",
-    "prettier-plugin-tailwind-styled-components": "^2.0.2",
-    "prettier-plugin-tailwindcss": "^0.8.1",
     "stylelint": "^17.12.0",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-config-tailwindcss": "^1.0.1",
     "stylelint-no-unsupported-browser-features": "^8.1.1",
-    "stylelint-prettier": "^5.0.3",
     "tailwindcss": "latest",
-    "turbo": "^2.9.18",
+    "turbo": "^2.11.8",
     "type-fest": "^5.7.0",
     "typescript": "^6",
     "vite-plugin-checker": "^0.14.5",
-    "vitest": "^4.1.11",
+    "vitest": "5.0.4",
     "vue": "3.5.35",
     "vue-tsc": "3.3.11",
     "zod": "^4.4.3",
-    "zod-to-json-schema": "^3.25.2"
+    "zod-to-json-schema": "^3.25.2",
+    "vite-plus": "1.2.0"
   },
   "browserslist": [
     "last 2 Chrome major versions",
@@ -237,10 +229,6 @@
   "engines": {
     "node": ">=24 <25"
   },
-  "volta": {
-    "node": "24.16.0",
-    "pnpm": "11.5.3"
-  },
   "scripts": {
     "dev": "pnpm -F playground dev",
     "dev:debug": "pnpm -F debug dev",
@@ -251,25 +239,25 @@
     "dev:database": "PLAYGROUND_LAYERS=core,database pnpm -F playground dev",
     "dev:auth": "PLAYGROUND_LAYERS=core,auth pnpm -F playground dev",
     "build": "turbo run build",
-    "lint": "turbo run lint",
-    "lint:fix": "turbo run lint -- --fix",
+    "lint": "vp lint && turbo run lint",
+    "lint:fix": "vp lint --fix && turbo run lint -- --fix",
     "lint:style": "stylelint \"**/*.{vue,scss,css}\"",
     "lint:style:fix": "stylelint \"**/*.{vue,scss,css}\" --fix",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "format": "vp fmt .",
+    "format:check": "vp fmt --check .",
     "check": "pnpm run lint && pnpm run typecheck && pnpm run format:check",
     "fix": "pnpm run format && pnpm run lint:fix && pnpm run lint:style:fix",
-    "fix:layer": "f(){ pnpm turbo run lint --filter \"./layers/$1\" -- --fix && prettier --write \"layers/$1\"; }; f",
-    "fix:app": "f(){ pnpm turbo run lint --filter \"./apps/$1\" -- --fix && prettier --write \"apps/$1\"; }; f",
+    "fix:layer": "f(){ pnpm turbo run lint --filter \"./layers/$1\" -- --fix && vp fmt \"layers/$1\"; }; f",
+    "fix:app": "f(){ pnpm turbo run lint --filter \"./apps/$1\" -- --fix && vp fmt \"apps/$1\"; }; f",
     "validate": "pnpm run check && pnpm run build",
     "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest",
-    "test:unit": "vitest run --project unit",
-    "test:vitest": "vitest run --project vitest",
-    "test:vue": "vitest run --project vue",
-    "test:nuxt": "vitest run --project nuxt",
+    "test": "vp test run",
+    "test:coverage": "vp test run --coverage",
+    "test:watch": "vp test",
+    "test:unit": "vp test run --project unit",
+    "test:vitest": "vp test run --project vitest",
+    "test:vue": "vp test run --project vue",
+    "test:nuxt": "vp test run --project nuxt",
     "test:playwright": "playwright test",
     "test:e2e": "playwright test",
     "clean": "pnpm -r exec rm -rf .nuxt .output .data",