kmcom-nuxt-layers 4.0.1 → 5.0.0

package/layers/core/app/composables/useElementLayout.test.ts

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

package/layers/core/app/composables/useElementSizing.test.ts

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

package/layers/core/app/composables/useElementSurface.test.ts

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

package/layers/core/app/composables/useLayoutAttrs.test.ts

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

package/layers/core/app/error.vue

@@ -34,7 +34,7 @@
           <template #description>
             <div class="space-y-2">
               <p class="text-muted">{{ message }}</p>
-              <code v-if="error?.statusMessage" class="block rounded bg-elevated px-2 py-1 text-sm">
+              <code v-if="error?.statusMessage" class="bg-elevated block rounded px-2 py-1 text-sm">
                 {{ error.statusMessage }}
               </code>
             </div>

package/layers/core/app/pages/[...slug].vue

@@ -88,10 +88,10 @@
         <UEmpty :icon :title :description size="xl">
           <!-- Show attempted path -->
           <template v-if="config.showPath !== false" #description>
-            <p class="mb-2 text-muted">
+            <p class="text-muted mb-2">
               {{ description }}
             </p>
-            <code class="rounded bg-elevated px-2 py-1 text-sm">
+            <code class="bg-elevated rounded px-2 py-1 text-sm">
               {{ attemptedPath }}
             </code>
           </template>

package/layers/core/app/utils/browserInfo.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { getBrowserVersionParts, isBrowserAtLeast, parseBrowserInfo } from './browserInfo'
 

package/layers/core/app/utils/featureClasses.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { FeatureDetection } from '../types/detection'
 import { getFeatureClassNames } from './featureClasses'

package/layers/core/app/utils/scrollGuardClamp.test.ts

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

package/layers/core/app/utils/styleToTailwindClasses.test.ts

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

package/layers/data/forms/app/utils/contact-schema.test.ts

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

package/layers/data/forms/app/utils/fieldProps.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import type { FieldConfig } from '../types/fields'
 import {

package/layers/data/metadata/providers/comicvine/server/utils/metadata-comicvine/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { normaliseComicVineIssue, normaliseComicVineVolume } from './normalise'
 import type { ComicVineIssue, ComicVineVolume } from './types'

package/layers/data/metadata/providers/google-books/server/utils/metadata-google-books/client.test.ts

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

package/layers/data/metadata/providers/google-books/server/utils/metadata-google-books/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { googleBooksCoverUrl, googleBooksMediaType } from './client'
 import { normaliseGoogleBooksVolume } from './normalise'

package/layers/data/metadata/providers/openlibrary/server/utils/metadata-openlibrary/client.test.ts

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

package/layers/data/metadata/providers/openlibrary/server/utils/metadata-openlibrary/normalise.test.ts

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

package/layers/data/metadata/providers/themoviedb/server/utils/metadata-tmdb/client.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 vi.stubGlobal('useRuntimeConfig', () => ({
   metadataTmdb: {

package/layers/data/metadata/providers/themoviedb/server/utils/metadata-tmdb/normalise.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { tmdbImageUrl } from './client'
 import { normaliseTmdbMovie, normaliseTmdbSearchResult, normaliseTmdbTV } from './normalise'

package/layers/data/metadata/server/utils/metadata/cache.test.ts

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

package/layers/data/metadata/server/utils/metadata/provider-registry.test.ts

@@ -1,5 +1,5 @@
 import type { MetadataProvider } from '#layers/metadata/shared/types'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vite-plus/test'
 
 import { getProvider, getProviders, registerProvider } from './provider-registry'
 

package/layers/data/metadata/server/utils/metadata/search.test.ts

@@ -3,7 +3,7 @@ import type {
   MetadataSearchInput,
   MetadataSearchResult,
 } from '#layers/metadata/shared/types'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 
 import { hashQuery, makeCacheKey } from './cache'
 

package/layers/delivery/feeds/app/assets/css/feeds.css

@@ -17,42 +17,54 @@
 }
 
 .feed-badge-rss {
-  background-color: color-mix(in srgb, var(--color-orange-500, #f97316) 12%, transparent);
-  color: var(--color-orange-600, #ea580c);
+  background-color: color-mix(
+    in srgb,
+    var(--color-orange-500, oklch(70.49% 0.1867 47.6deg)) 12%,
+    transparent
+  );
+  color: var(--color-orange-600, oklch(64.61% 0.1943 41.12deg));
 }
 
 .feed-badge-atom {
-  background-color: color-mix(in srgb, var(--color-purple-500, #a855f7) 12%, transparent);
-  color: var(--color-purple-600, #9333ea);
+  background-color: color-mix(
+    in srgb,
+    var(--color-purple-500, oklch(62.68% 0.2325 303.9deg)) 12%,
+    transparent
+  );
+  color: var(--color-purple-600, oklch(55.75% 0.2525 302.32deg));
 }
 
 .feed-badge-json {
-  background-color: color-mix(in srgb, var(--color-yellow-500, #eab308) 12%, transparent);
-  color: var(--color-yellow-600, #ca8a04);
+  background-color: color-mix(
+    in srgb,
+    var(--color-yellow-500, oklch(79.52% 0.1617 86.05deg)) 12%,
+    transparent
+  );
+  color: var(--color-yellow-600, oklch(68.06% 0.1423 75.83deg));
 }
 
 @media (prefers-color-scheme: dark) {
   .feed-badge-rss {
-    color: var(--color-orange-400, #fb923c);
+    color: var(--color-orange-400, oklch(75.76% 0.159 55.93deg));
   }
 
   .feed-badge-atom {
-    color: var(--color-purple-400, #c084fc);
+    color: var(--color-purple-400, oklch(72.17% 0.1767 305.5deg));
   }
 
   .feed-badge-json {
-    color: var(--color-yellow-400, #facc15);
+    color: var(--color-yellow-400, oklch(86.06% 0.1731 91.94deg));
   }
 }
 
 /* Feed preview code block — used in playground and consuming apps */
 .feed-preview {
   border-radius: var(--ui-radius, 0.375rem);
-  background-color: var(--color-gray-950, #030712);
+  background-color: var(--color-gray-950, oklch(12.96% 0.0274 261.69deg));
   padding: 1rem;
   max-height: 24rem;
   overflow: auto;
-  color: var(--color-gray-100, #f3f4f6);
+  color: var(--color-gray-100, oklch(96.7% 0.0029 264.54deg));
   font-size: 0.75rem;
   line-height: 1.6;
   font-family: var(--font-mono, ui-monospace, monospace);

package/layers/delivery/feeds/app/components/Feeds/Index.vue

@@ -25,10 +25,10 @@
   >
     <div class="pointer-events-none absolute inset-0">
       <div
-        class="absolute -right-20 top-0 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
+        class="absolute top-0 -right-20 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
       />
       <div
-        class="absolute -left-20 bottom-0 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
+        class="absolute bottom-0 -left-20 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
       />
       <div
         class="absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-orange-400/35 to-transparent"
@@ -39,7 +39,7 @@
       <div class="feeds-split grid gap-6">
         <div class="space-y-6">
           <div
-            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-amber-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
+            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold tracking-[0.35em] text-amber-700 uppercase shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
           >
             <UIcon name="i-lucide-rss" class="text-sm" />
             Feeds layer
@@ -63,7 +63,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Default
               </p>
@@ -79,7 +79,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Exposed
               </p>
@@ -95,7 +95,7 @@
               class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
             >
               <p
-                class="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
               >
                 Limit
               </p>
@@ -113,7 +113,7 @@
             class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
           >
             <span
-              class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              class="text-xs font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
             >
               Site
             </span>
@@ -134,7 +134,7 @@
         >
           <div class="flex items-center justify-between gap-3">
             <p
-              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
             >
               Global routes
             </p>
@@ -162,7 +162,7 @@
         <div class="flex flex-wrap items-end justify-between gap-4">
           <div>
             <p
-              class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
             >
               Collection routes
             </p>
@@ -190,7 +190,7 @@
             >
               <div>
                 <p
-                  class="text-[0.68rem] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400"
+                  class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
                 >
                   Collection
                 </p>

package/layers/delivery/feeds/app/components/Feeds/RouteCard.vue

@@ -50,7 +50,7 @@
   <UCard
     :to="route.path"
     :ui="{ body: 'p-0' }"
-    class="group relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700 @container"
+    class="group @container relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
   >
     <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
     <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">

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'