kmcom-nuxt-layers 4.0.1 → 5.0.1

package/layers/delivery/feeds/public/feed/style.css

@@ -12,13 +12,13 @@
 }
 
 :root {
-  --feed-bg: var(--ui-bg, #fff);
-  --feed-bg-elevated: var(--ui-bg-elevated, #f8fafc);
-  --feed-bg-accented: var(--ui-bg-accented, #f1f5f9);
-  --feed-border: var(--ui-border, #e2e8f0);
-  --feed-text: var(--ui-text, #0f172a);
-  --feed-text-muted: var(--ui-text-muted, #64748b);
-  --feed-text-toned: var(--ui-text-toned, #475569);
+  --feed-bg: var(--ui-bg, oklch(100% 0 0deg));
+  --feed-bg-elevated: var(--ui-bg-elevated, oklch(98.42% 0.0034 247.86deg));
+  --feed-bg-accented: var(--ui-bg-accented, oklch(96.83% 0.0069 247.9deg));
+  --feed-border: var(--ui-border, oklch(92.88% 0.0126 255.51deg));
+  --feed-text: var(--ui-text, oklch(20.77% 0.0398 265.75deg));
+  --feed-text-muted: var(--ui-text-muted, oklch(55.44% 0.0407 257.42deg));
+  --feed-text-toned: var(--ui-text-toned, oklch(44.55% 0.0374 257.28deg));
   --feed-primary: var(--ui-color-primary-500, oklch(62.3% 0.214 259.5deg));
   --feed-primary-text: var(--ui-color-primary-600, oklch(54.6% 0.214 259.5deg));
   --feed-primary-bg: var(--ui-color-primary-50, oklch(97% 0.03 259.5deg));
@@ -28,13 +28,13 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --feed-bg: var(--ui-bg, #020617);
-    --feed-bg-elevated: var(--ui-bg-elevated, #0f172a);
-    --feed-bg-accented: var(--ui-bg-accented, #1e293b);
-    --feed-border: var(--ui-border, #1e293b);
-    --feed-text: var(--ui-text, #f8fafc);
-    --feed-text-muted: var(--ui-text-muted, #94a3b8);
-    --feed-text-toned: var(--ui-text-toned, #cbd5e1);
+    --feed-bg: var(--ui-bg, oklch(12.88% 0.0406 264.7deg));
+    --feed-bg-elevated: var(--ui-bg-elevated, oklch(20.77% 0.0398 265.75deg));
+    --feed-bg-accented: var(--ui-bg-accented, oklch(27.95% 0.0368 260.03deg));
+    --feed-border: var(--ui-border, oklch(27.95% 0.0368 260.03deg));
+    --feed-text: var(--ui-text, oklch(98.42% 0.0034 247.86deg));
+    --feed-text-muted: var(--ui-text-muted, oklch(71.07% 0.0351 256.79deg));
+    --feed-text-toned: var(--ui-text-toned, oklch(86.9% 0.0198 252.89deg));
     --feed-primary: var(--ui-color-primary-400, oklch(71% 0.18 259.5deg));
     --feed-primary-text: var(--ui-color-primary-400, oklch(71% 0.18 259.5deg));
     --feed-primary-bg: var(--ui-color-primary-950, oklch(22% 0.06 259.5deg));
@@ -160,7 +160,7 @@ a:hover {
   border-radius: var(--feed-radius);
   background-color: var(--feed-primary);
   padding: 0.5rem 1.125rem;
-  color: #fff;
+  color: oklch(100% 0 0deg);
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1;
@@ -169,7 +169,7 @@ a:hover {
 
 .feed-subscribe:hover {
   opacity: 0.85;
-  color: #fff;
+  color: oklch(100% 0 0deg);
   text-decoration: none;
 }
 

package/layers/delivery/feeds/server/utils/content-adapter.test.ts

@@ -1,5 +1,5 @@
 import type { H3Event } from 'h3'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 
 import { getContentFeedItems } from './content-adapter'
 

package/layers/delivery/feeds/server/utils/feed-author.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { resolveFeedAuthor, resolveFeedDate } from './feed-author'
 

package/layers/delivery/feeds/server/utils/feed-config.test.ts

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

package/layers/delivery/feeds/server/utils/formats.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { toAtom } from './formats/atom'
 import { toJSONFeed } from './formats/json'

package/layers/delivery/scripts/app/components/BaselineStatus.vue

@@ -10,7 +10,9 @@
       },
     },
     setup(props) {
-      if (import.meta.server) return () => null
+      // Render the custom element on server AND client. Returning null on the server
+      // produced a comment node there but an element on the client (hydration mismatch);
+      // an unregistered custom element is inert until the client script upgrades it.
       return () => h('baseline-status', { featureId: props.featureId })
     },
   })

package/layers/delivery/seo/app/utils/seoConfig.test.ts

@@ -1,5 +1,5 @@
 import type { SiteConfig } from '#layers/core/app/types/site'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { resolveSeoConfig } from './seoConfig'
 

package/layers/design-system/theming/app/assets/css/theme.css

@@ -36,7 +36,6 @@
 
 [data-theme-transparency='reduced'] :where([class*='backdrop-blur']) {
   backdrop-filter: none !important;
-  backdrop-filter: none !important;
 }
 
 [data-theme-transparency='reduced'] :where([class*='bg-default/'], [class*='bg-elevated/']) {

package/layers/design-system/theming/app/components/ThemePicker/AccentButton.vue

@@ -21,8 +21,8 @@
     class="size-8 rounded-full ring-1 ring-offset-2 transition-shadow duration-200"
     :class="[
       active
-        ? 'ring-2 ring-primary ring-offset-bg shadow-lg'
-        : 'ring-transparent hover:ring-muted ring-offset-bg hover:shadow-md',
+        ? 'ring-primary ring-offset-bg shadow-lg ring-2'
+        : 'hover:ring-muted ring-offset-bg ring-transparent hover:shadow-md',
     ]"
     :style="bgStyle"
     :aria-label="`Set accent color to ${color}`"

package/layers/design-system/theming/app/components/ThemePicker/Menu.vue

@@ -34,7 +34,7 @@
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">High Contrast</h2>
-                <p v-if="contrastOverride === 'system'" class="text-sm text-muted">
+                <p v-if="contrastOverride === 'system'" class="text-muted text-sm">
                   Following system
                 </p>
               </div>
@@ -49,7 +49,7 @@
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">Reduce Motion</h2>
-                <p v-if="motionOverride === 'system'" class="text-sm text-muted">
+                <p v-if="motionOverride === 'system'" class="text-muted text-sm">
                   Following system
                 </p>
               </div>
@@ -64,7 +64,7 @@
             <li class="flex w-full flex-row items-center justify-between py-1">
               <div>
                 <h2 class="text-lg font-semibold">Reduce Transparency</h2>
-                <p v-if="transparencyOverride === 'system'" class="text-sm text-muted">
+                <p v-if="transparencyOverride === 'system'" class="text-muted text-sm">
                   Following system
                 </p>
               </div>

package/layers/design-system/theming/app/composables/useAccentColor.ts

@@ -13,7 +13,10 @@ export const useAccentColor = createSharedComposable(() => {
   // theme.client.ts reads localStorage after hydration and calls setAccent.
   const accent = useState<AccentColor>('theme-accent', () => defaultAccent)
 
-  const pageAccent = ref<AccentColor | null>(null)
+  // Page-scoped override. Must be useState (not a module-level ref): pages call
+  // setPageAccent() during setup, and a plain ref is not carried in the SSR payload,
+  // so the server rendered the default accent while the client had the page's.
+  const pageAccent = useState<AccentColor | null>('theme-page-accent', () => null)
   const activeAccent = computed<AccentColor>(() => pageAccent.value ?? accent.value)
 
   function setAccent(color: AccentColor) {

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/nuxt.config.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite'
+import type { Plugin } from 'vite-plus'
 
 /**
  * Intercepts three.webgpu.js in SSR via the transform hook.

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>