kmcom-nuxt-layers 1.7.4 → 1.7.6

package/layers/content/app/components/Blog/Article.vue

@@ -12,7 +12,7 @@ const asBlog = (item: unknown) => item as BlogCollectionItem
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
       <div class="flex items-center gap-3 text-sm text-muted">
-        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString() }}</time>
+        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}</time>
         <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
           {{ asBlog(item).badge }}
         </UBadge>

package/layers/core/app/assets/css/core.css

@@ -8,5 +8,11 @@
 
 @config '#layers/core/tailwind.config.js';
 
+/* Force Tailwind 4 to eagerly scan all layer and app component files upfront.
+   Without this, dev mode compiles CSS lazily (per-file as Vite requests them),
+   causing an HMR update mid-render that produces a visible layout shift. */
+@source '../../../../*/app/**/*.{vue,ts}';
+@source '../../../../../apps/*/app/**/*.{vue,ts}';
+
 @import '#layers/core/app/assets/css/layout.css';
 @import '#layers/core/app/assets/css/base.css';

package/layers/core/app/components/DiagnosticsPage.vue

@@ -27,6 +27,7 @@ useSeoMeta({
 <template>
   <div class="min-h-screen p-8">
     <UContainer>
+      <ClientOnly>
       <div class="space-y-8">
         <div class="text-center">
           <h1 class="text-4xl font-bold mb-2">Core Layer Diagnostics</h1>
@@ -215,6 +216,11 @@ useSeoMeta({
           </div>
         </UCard>
       </div>
+
+        <template #fallback>
+          <div class="text-center text-muted py-16">Loading diagnostics…</div>
+        </template>
+      </ClientOnly>
     </UContainer>
   </div>
 </template>

package/layers/core/tailwind.config.js

@@ -1,17 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    'app/components/**/*.{vue,js,ts}',
-    'app/composables/**/*.{js,ts}',
-    'app/content/**/*.md',
-    'app/layouts/**/*.vue',
-    'app/pages/**/*.vue',
-    'app/plugins/**/*.{js,ts}',
-    'app/App.{js,ts,vue}',
-    'app/app.{js,ts,vue}',
-    'app/Error.{js,ts,vue}',
-    'app/error.{js,ts,vue}',
-  ],
+  // No content array — Tailwind 4's Vite plugin auto-discovers all processed files.
+  // A content array here would restrict scanning to only these paths (v3 behaviour),
+  // causing utilities from ui/layout/theme/etc layers to be absent from the initial CSS.
 
   safelist: [
     // Swiss Grid System - Responsive grid classes for BaseGridItem

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     /**
@@ -48,7 +50,7 @@ const percentage = computed(() => Math.round(progress.value * 100))
 
 <template>
   <!-- Linear Progress -->
-  <div v-if="type === 'linear'" class="motion-scroll-progress-linear">
+  <div v-if="type === 'linear'" class="motion-scroll-progress-linear" v-bind="$attrs">
     <div
       class="w-full rounded-full overflow-hidden"
       :style="{ height: `${height}px`, backgroundColor: bgColor }"
@@ -69,6 +71,7 @@ const percentage = computed(() => Math.round(progress.value * 100))
   <!-- Circular Progress -->
   <ProgressCircular
     v-else
+    v-bind="$attrs"
     :progress="progress"
     :size
     :stroke-width="strokeWidth"

package/layers/motion/nuxt.config.ts

@@ -30,9 +30,7 @@ export default defineNuxtConfig({
 
   vite: {
     optimizeDeps: {
-      include: [
-        'locomotive-scroll',
-      ]
-    }
-  }
+      include: ['locomotive-scroll'],
+    },
+  },
 })

package/layers/shader/app/components/Shader/Pipeline.client.vue

@@ -2,7 +2,7 @@
 // @ts-nocheck - TSL types are complex
 import { DoubleSide } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
-import { float, positionLocal, uv, vec3, vec4 } from 'three/tsl'
+import { float, Fn, positionLocal, uv, vec3, vec4 } from 'three/tsl'
 
 const { transparent = false } = defineProps<{
   transparent?: boolean
@@ -28,18 +28,16 @@ watch(
     const vertex = pipeline.stagesFor('vertex')
     const ray = pipeline.stagesFor('ray')
 
-    // UV chain — generators read pipeline.uvNode.value in their stage fn closures
-    pipeline.uvNode.value = uvStages.reduce((node, { fn }) => fn(node), uv())
-
-    // Ray chain — sky/tunnel generators read pipeline.rayNode.value in their closures
-    pipeline.rayNode.value = ray.reduce((node, { fn }) => fn(node), screenRayNode)
-
-    // Fragment chain
-    material.colorNode = fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1))
+    // Wrap each chain in Fn() so TSL .toVar()/.assign() ops (used by noise functions
+    // like simplexNoise3d) have a valid stack context. Without this, TSL throws
+    // "No stack defined for assign operation".
+    pipeline.uvNode.value = Fn(() => uvStages.reduce((node, { fn }) => fn(node), uv()))()
+    pipeline.rayNode.value = Fn(() => ray.reduce((node, { fn }) => fn(node), screenRayNode))()
+    material.colorNode = Fn(() => fragment.reduce((node, { fn }) => fn(node), vec4(0, 0, 0, 1)))()
     material.needsUpdate = true
 
     if (vertex.length > 0) {
-      material.positionNode = vertex.reduce((node, { fn }) => fn(node), positionLocal)
+      material.positionNode = Fn(() => vertex.reduce((node, { fn }) => fn(node), positionLocal))()
       material.needsUpdate = true
     }
   },

package/layers/theme/app/composables/useAccentColor.ts

@@ -1,17 +1,23 @@
-import { createSharedComposable, useLocalStorage } from '@vueuse/core'
+import { createSharedComposable } from '@vueuse/core'
 import type { AccentColor } from '#layers/theme/app/types/theme'
 
 export const useAccentColor = createSharedComposable(() => {
   const appConfig = useAppConfig()
-
   const defaultAccent = (appConfig.themeLayer?.defaultAccent ?? 'blue') as AccentColor
-  const accent = useLocalStorage<AccentColor>('theme-colour', defaultAccent)
+
+  // useState ensures server value is serialized into the Nuxt payload and reused
+  // during hydration, avoiding a mismatch with localStorage (client-only).
+  // theme.client.ts reads localStorage after hydration and calls setAccent.
+  const accent = useState<AccentColor>('theme-accent', () => defaultAccent)
 
   const pageAccent = ref<AccentColor | null>(null)
   const activeAccent = computed<AccentColor>(() => pageAccent.value ?? accent.value)
 
   function setAccent(color: AccentColor) {
     accent.value = color
+    if (import.meta.client) {
+      localStorage.setItem('theme-colour', color)
+    }
   }
 
   function setPageAccent(color: AccentColor | null) {

package/layers/theme/app/composables/useThemeContrast.ts

@@ -1,8 +1,8 @@
-import { createSharedComposable, useLocalStorage, usePreferredContrast } from '@vueuse/core'
+import { createSharedComposable, usePreferredContrast } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeContrast = createSharedComposable(() => {
-  const contrastOverride = useLocalStorage<PreferenceOverride>('theme-contrast', 'system')
+  const contrastOverride = useState<PreferenceOverride>('theme-contrast', () => 'system')
   const systemContrast = usePreferredContrast()
 
   const effectiveHighContrast = computed(() => {
@@ -13,6 +13,9 @@ export const useThemeContrast = createSharedComposable(() => {
 
   function setContrastOverride(value: PreferenceOverride) {
     contrastOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-contrast', value)
+    }
   }
 
   return {

package/layers/theme/app/composables/useThemeMotion.ts

@@ -1,8 +1,8 @@
-import { createSharedComposable, useLocalStorage, usePreferredReducedMotion } from '@vueuse/core'
+import { createSharedComposable, usePreferredReducedMotion } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeMotion = createSharedComposable(() => {
-  const motionOverride = useLocalStorage<PreferenceOverride>('theme-motion', 'system')
+  const motionOverride = useState<PreferenceOverride>('theme-motion', () => 'system')
   const systemMotion = usePreferredReducedMotion()
 
   const effectiveReducedMotion = computed(() => {
@@ -13,6 +13,9 @@ export const useThemeMotion = createSharedComposable(() => {
 
   function setMotionOverride(value: PreferenceOverride) {
     motionOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-motion', value)
+    }
   }
 
   return {

package/layers/theme/app/composables/useThemeTransparency.ts

@@ -1,12 +1,11 @@
 import {
   createSharedComposable,
-  useLocalStorage,
   usePreferredReducedTransparency,
 } from '@vueuse/core'
 import type { PreferenceOverride } from '#layers/theme/app/types/theme'
 
 export const useThemeTransparency = createSharedComposable(() => {
-  const transparencyOverride = useLocalStorage<PreferenceOverride>('theme-transparency', 'system')
+  const transparencyOverride = useState<PreferenceOverride>('theme-transparency', () => 'system')
   const systemTransparency = usePreferredReducedTransparency()
 
   const effectiveReducedTransparency = computed(() => {
@@ -17,6 +16,9 @@ export const useThemeTransparency = createSharedComposable(() => {
 
   function setTransparencyOverride(value: PreferenceOverride) {
     transparencyOverride.value = value
+    if (import.meta.client) {
+      localStorage.setItem('theme-transparency', value)
+    }
   }
 
   return {

package/layers/theme/app/plugins/theme.client.ts

@@ -1,8 +1,25 @@
+import type { AccentColor, PreferenceOverride } from '#layers/theme/app/types/theme'
+
 export default defineNuxtPlugin(() => {
-  const { activeAccent } = useAccentColor()
-  const { effectiveHighContrast } = useThemeContrast()
-  const { effectiveReducedMotion } = useThemeMotion()
-  const { effectiveReducedTransparency } = useThemeTransparency()
+  const { setAccent, activeAccent } = useAccentColor()
+  const { setContrastOverride, effectiveHighContrast } = useThemeContrast()
+  const { setMotionOverride, effectiveReducedMotion } = useThemeMotion()
+  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)
 
   watch(activeAccent, (color) => {
     document.documentElement.setAttribute('data-theme-colour', color)

package/layers/ui/app/components/Mast/Footer.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+const year = useState('footer-year', () => new Date().getFullYear())
+</script>
+
 <template>
   <UFooter>
     <template #bottom>
       <div class="pt-10">
         <p class="text-center text-sm text-neutral-300">
-          Copyright © {{ new Date().getFullYear() }}
+          Copyright © {{ year }}
         </p>
       </div>
     </template>

package/layers/ui/app/components/Progress/Circular.vue

@@ -20,7 +20,7 @@ const radius = computed(() => (size - strokeWidth) / 2)
 const circumference = computed(() => 2 * Math.PI * radius.value)
 const strokeDasharray = computed(() => `${progress * circumference.value} ${circumference.value}`)
 
-const gradientId = `progress-circular-gradient-${Math.random().toString(36).slice(2, 9)}`
+const gradientId = `progress-circular-gradient-${useId()}`
 </script>
 
 <template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -189,6 +189,7 @@
   },
   "scripts": {
     "dev": "pnpm -F playground dev",
+    "dev:debug": "pnpm -F debug dev",
     "dev:identity": "pnpm -F visual-identity dev",
     "dev:core": "PLAYGROUND_LAYERS=core pnpm -F playground dev",
     "dev:ui": "PLAYGROUND_LAYERS=core,ui pnpm -F playground dev",