kmcom-nuxt-layers 6.3.0 → 6.5.0

package/layers/core/app/composables/useLoading.ts

@@ -1,7 +1,7 @@
 // composables/useLoading.ts
 
 import type { LoadingScreenState } from '../types/loading'
-import { approachProgress, resolveLoadingConfig, trickleProgress } from '../utils/loading'
+import { approachProgress, resolveLoadingConfig } from '../utils/loading'
 
 // Frame-loop state is non-reactive and intentionally module-scope (singleton)
 const _loop = {
@@ -16,9 +16,10 @@ const _loop = {
  * Loading state composable for app initialization and async operations
  *
  * Features:
- * - Smooth progress: a per-frame loop eases the displayed value toward a simulated target that
- *   slows as it nears 90%, then counts up to 100 once work is done
- * - Holds below 100 until `minDuration` has passed, so fast loads don't flash
+ * - Real progress: callers raise the target at real milestones (`updateProgress`) and a per-frame
+ *   loop eases the displayed value toward it, then counts up to 100 once work is done
+ * - Optional `minDuration` hold before 100 (default 0: finish as soon as the work does)
+ * - `finishNow()` ends the boot screen at once, e.g. for reduced motion
  * - Shared state across all component instances
  * - Can be disabled via app.config
  * - Works without UI component (headless)
@@ -30,9 +31,8 @@ export function useLoading() {
   const isLoading = useState('core:loading', () => enabled)
   const progress = useState('core:loading:progress', () => 0)
   const screen = useState<LoadingScreenState>('core:loading:screen', () => 'hidden')
-
-  // Trickle pace follows minDuration: a typical load sits around 60% when it may finish
-  const trickleTau = Math.max(minDuration, 500) * 0.8
+  // Set by finishNow: the boot screen leaves at once, without its beat or exit animation
+  const skipped = useState('core:loading:skipped', () => false)
 
   function tick(now: number): void {
     // Cap at one 30fps frame so a main-thread hitch (hydration, a backgrounded tab) is followed
@@ -40,9 +40,7 @@ export function useLoading() {
     const dt = Math.min((now - _loop.lastTime) / 1000, 1 / 30)
     _loop.lastTime = now
 
-    const elapsed = now - _loop.startedAt
-    _loop.target = Math.max(_loop.target, trickleProgress(elapsed, trickleTau))
-    if (_loop.done && elapsed >= minDuration) _loop.target = 100
+    if (_loop.done && now - _loop.startedAt >= minDuration) _loop.target = 100
 
     progress.value = approachProgress(progress.value, _loop.target, dt)
 
@@ -82,6 +80,15 @@ export function useLoading() {
     _loop.target = Math.max(_loop.target, Math.min(Math.max(value, 0), 99))
   }
 
+  function finishNow(): void {
+    skipped.value = true
+    if (import.meta.client) cancelAnimationFrame(_loop.frame)
+    _loop.frame = 0
+    _loop.done = true
+    progress.value = 100
+    isLoading.value = false
+  }
+
   async function withLoading(fn: () => Promise<void>): Promise<void> {
     startLoading()
     try {
@@ -95,9 +102,11 @@ export function useLoading() {
     isLoading: readonly(isLoading),
     progress: readonly(progress),
     screen: readonly(screen),
+    skipped: readonly(skipped),
     startLoading,
     stopLoading,
     updateProgress,
+    finishNow,
     withLoading,
   }
 }

package/layers/core/app/plugins/loading.client.ts

@@ -6,12 +6,13 @@ import { resolveLoadingConfig } from '../utils/loading'
  * Loading screen initialization plugin
  *
  * Client-side only. Once the app has mounted (hydration done) it:
- * 1. Starts the progress count, timed from navigation start - the SSR'd screen has been up
- *    since first paint, so the count catches up smoothly rather than starting late
+ * 1. Starts the count, timed from navigation start, and moves it at real milestones:
+ *    hydrated (50), fonts ready (75)
  * 2. Waits for fonts and the initial page's images, capped at `maxDuration`
  * 3. Marks loading done - the count then finishes to 100 before the screen exits
  *
  * Starting after mount keeps the counter at the SSR'd 0 through hydration (no mismatch).
+ * With `prefers-reduced-motion: reduce` it ends at once instead: CSS hides the screen.
  *
  * Configuration via app.config.ts:
  * - Set `coreLayer.loading.enabled: false` to disable
@@ -26,11 +27,18 @@ export default defineNuxtPlugin({
       return // Disabled, skip initialization
     }
 
-    const { startLoading, stopLoading } = useLoading()
+    const { isLoading, startLoading, stopLoading, updateProgress, finishNow } = useLoading()
 
     // Not awaited: app:mounted handlers run serially, so waiting here would hold up other layers
     nuxtApp.hook('app:mounted', () => {
+      // CSS hides the screen under reduced motion, so don't hold the page (GSAP, scrolling) for it.
+      // After hydration, not in setup: state changes before then would fail to hydrate
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return finishNow()
+      // Already ended by another layer, e.g. the theme's Reduce Motion switch
+      if (!isLoading.value) return
       startLoading(0)
+      updateProgress(50)
+      void document.fonts?.ready.then(() => updateProgress(75))
       void Promise.race([
         Promise.all([pageLoaded(), document.fonts?.ready]),
         new Promise((resolve) => setTimeout(resolve, maxDuration)),

package/layers/core/app/types/loading.ts

@@ -6,10 +6,13 @@
 export type LoadingConfig = {
   /** Master toggle - set to false to disable completely */
   enabled: boolean
-  /** Minimum time (ms, from navigation start) the count runs before it may reach 100 */
+  /** Minimum time (ms, from navigation start) before the count may reach 100 - 0 finishes
+   * as soon as the work does */
   minDuration: number
   /** Longest wait (ms, after the app mounts) for fonts and images before finishing anyway */
   maxDuration: number
+  /** Delay (ms, from first paint) before the screen fades in - faster loads never see it */
+  showAfter: number
   /** Small caption above the counter - empty string hides it */
   label: string
   /** Background color */
@@ -46,12 +49,16 @@ export type UseLoadingReturn = {
   progress: Readonly<Ref<number>>
   /** Boot loading screen lifecycle (readonly) */
   screen: Readonly<Ref<LoadingScreenState>>
-  /** Start simulated progress, timed from `since` (a `performance.now()` value; default now) */
+  /** True once `finishNow` has skipped the boot screen (readonly) */
+  skipped: Readonly<Ref<boolean>>
+  /** Start counting from 0, timed from `since` (a `performance.now()` value; default now) */
   startLoading: (since?: number) => void
   /** Mark work done - the count finishes to 100 once `minDuration` has passed */
   stopLoading: () => void
-  /** Raise the progress floor (0-99) - only `stopLoading` completes */
+  /** Raise the target to a real milestone (0-99) - only `stopLoading` completes */
   updateProgress: (value: number) => void
+  /** End the boot screen now, without its beat or exit animation. Call after hydration */
+  finishNow: () => void
   /** Execute async function with loading state */
   withLoading: (fn: () => Promise<void>) => Promise<void>
 }

package/layers/core/app/utils/loading.ts

@@ -2,9 +2,10 @@ import type { LoadingConfig } from '../types/loading'
 
 /** Fallbacks for keys app.config leaves unset - core's app.config ships the same values. */
 const LOADING_DEFAULTS: LoadingConfig = {
-  enabled: true,
-  minDuration: 1500,
-  maxDuration: 3000,
+  enabled: false,
+  minDuration: 0,
+  maxDuration: 1500,
+  showAfter: 400,
   label: 'Loading',
   background: '#0a0a0a',
   textColor: '#ffffff',
@@ -18,27 +19,17 @@ export function resolveLoadingConfig(coreLayer: unknown): LoadingConfig {
 }
 
 /*
- * Pure easing math behind `useLoading`'s progress counter. `useLoading` runs these once per
- * animation frame: `trickleProgress` moves the target, `approachProgress` moves the displayed
- * value toward it, so the counter climbs smoothly instead of jumping between random values.
+ * Pure easing math behind `useLoading`'s progress counter. The target only moves at real
+ * milestones; `approachProgress` runs once per animation frame to move the displayed value
+ * toward it, so the counter climbs smoothly instead of jumping.
  */
 
-/** Simulated progress stays below this until loading actually finishes. */
-const TRICKLE_CAP = 90
 /** Time constant (s) of the displayed value's exponential ease toward its target. */
 const EASE = 0.15
 /** Speed band (%/s) for the displayed value: no crawling at the tail, no leaps on big jumps. */
 const MIN_SPEED = 24
 const MAX_SPEED = 140
 
-/**
- * Simulated progress `elapsed` ms after loading started: quick at first, then slowing as it
- * approaches the cap. `tau` (ms) sets the pace — ~63% of the cap is reached after `tau`.
- */
-export function trickleProgress(elapsed: number, tau: number): number {
-  return TRICKLE_CAP * (1 - Math.exp(-Math.max(elapsed, 0) / tau))
-}
-
 /**
  * Advances `current` toward `target` over `dt` seconds. Eases out as the gap closes, within the
  * speed band, and never moves backwards or past `target`. A rAF timestamp can precede the

package/layers/core/nuxt.config.ts

@@ -1,3 +1,15 @@
+import { createRequire } from 'node:module'
+
+// @nuxt/eslint is an optional peer: load it outside production only when the app has it
+// installed, otherwise a consumer without it fails module resolution in dev/test builds.
+const lintModules: string[] = []
+if (process.env.NODE_ENV !== 'production') {
+  try {
+    createRequire(import.meta.url).resolve('@nuxt/eslint')
+    lintModules.push('@nuxt/eslint')
+  } catch {}
+}
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   $meta: {
@@ -15,7 +27,7 @@ export default defineNuxtConfig({
 
   // Base modules (always loaded)
   modules: [
-    ...(process.env.NODE_ENV !== 'production' ? ['@nuxt/eslint'] : []),
+    ...lintModules,
     '@nuxt/ui',
     // '@nuxt/image'
     '@vueuse/nuxt',
@@ -27,24 +39,12 @@ export default defineNuxtConfig({
 
   css: ['#layers/core/app/assets/css/core.css'],
 
-  devtools: {
-    enabled: true,
-
-    vscode: {
-      enabled: true,
-    },
-  },
-
-  // Force light mode for consistent appearance
+  // Follow the OS colour scheme; light when it can't be detected
   colorMode: {
     preference: 'system',
     fallback: 'light',
   },
 
-  future: {
-    compatibilityVersion: 5,
-  },
-
   compatibilityDate: '2026-01-24',
 
   typescript: {

package/layers/core/server/utils/app-config.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line no-restricted-imports -- the fallback below is the one place it belongs
+import { useAppConfig as useNitroAppConfig } from 'nitropack/runtime'
+
+/**
+ * The app's merged app.config, read on the server.
+ *
+ * Nuxt hands Nitro its merged `useAppConfig` as an auto-import, so this leaves `useAppConfig`
+ * unimported on purpose. With `experimental.nitroAutoImports: false` (Nuxt 5's default) nothing
+ * is injected and Nuxt can't evaluate app.config.ts in Nitro at all - importing `nuxt/server`
+ * there crashes the server - so fall back to Nitro's own app config, which is empty.
+ */
+export function readServerAppConfig(): Record<string, unknown> {
+  // `typeof` doesn't throw for an identifier that was never injected
+  return typeof useAppConfig === 'function'
+    ? (useAppConfig() as Record<string, unknown>)
+    : (useNitroAppConfig() as Record<string, unknown>)
+}

package/layers/data/auth/app/middleware/auth.ts

@@ -1,4 +1,4 @@
 export default defineNuxtRouteMiddleware(() => {
   const { loggedIn } = useUserSession()
-  if (!loggedIn.value) return navigateTo('/auth/github')
+  if (!loggedIn.value) return navigateTo('/auth/github', { external: true })
 })

package/layers/data/forms/app/components/Form/Contact.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import type { FormSubmitEvent } from '@nuxt/ui'
 
-  import { contactSchema, type ContactData } from '../../utils/contact-schema'
+  import { contactSchema, type ContactData } from '../../../shared/utils/contact-schema'
 
   const emit = defineEmits<{
     submit: [data: ContactData]

package/layers/data/forms/server/api/contact.post.ts

@@ -1,16 +1,20 @@
-import { createError, defineEventHandler, readBody } from 'h3'
+import { createError, defineEventHandler, getRequestHeader, getRequestIP, readBody } from 'h3'
 import { sendContactEmail } from '#layers/mailer/server/utils/email'
 import { mailerLayerHooks } from '#layers/mailer/server/utils/hooks'
 
-import { contactSchema } from '../../app/utils/contact-schema'
+import { contactSchema } from '../../shared/utils/contact-schema'
 
 type RateLimitRecord = { count: number; resetAt: number }
+// Per-instance memory: serverless instances each keep their own count. Move to useStorage()
+// or the host's rate limiting if the limit must hold across instances.
 const rateLimitStore = new Map<string, RateLimitRecord>()
 const RATE_LIMIT_MAX = 5
 const RATE_LIMIT_WINDOW_MS = 60_000
 
 function checkRateLimit(ip: string): boolean {
   const now = Date.now()
+  // Drop expired windows so the map doesn't grow with every IP ever seen
+  for (const [key, entry] of rateLimitStore) if (now > entry.resetAt) rateLimitStore.delete(key)
   const record = rateLimitStore.get(ip)
   if (!record || now > record.resetAt) {
     rateLimitStore.set(ip, { count: 1, resetAt: now + RATE_LIMIT_WINDOW_MS })
@@ -22,11 +26,15 @@ function checkRateLimit(ip: string): boolean {
 }
 
 export default defineEventHandler(async (event) => {
-  const ip = getRequestIP(event, { xForwardedFor: true }) ?? 'unknown'
+  // Netlify's client IP header can't be set by the client; X-Forwarded-For's first entry can
+  const ip =
+    getRequestHeader(event, 'x-nf-client-connection-ip') ??
+    getRequestIP(event, { xForwardedFor: true }) ??
+    'unknown'
   if (!checkRateLimit(ip)) {
     throw createError({
-      statusCode: 429,
-      statusMessage: 'Too many requests. Please try again later.',
+      status: 429,
+      statusText: 'Too many requests. Please try again later.',
     })
   }
 
@@ -34,7 +42,7 @@ export default defineEventHandler(async (event) => {
   const result = contactSchema.safeParse(body)
 
   if (!result.success) {
-    throw createError({ statusCode: 400, data: result.error.flatten().fieldErrors })
+    throw createError({ status: 400, data: result.error.flatten().fieldErrors })
   }
 
   const data = result.data
@@ -49,7 +57,7 @@ export default defineEventHandler(async (event) => {
 
   await mailerLayerHooks.callHook('contact:failed', { ...data, error: emailResult.error })
   throw createError({
-    statusCode: 500,
-    statusMessage: 'Failed to send message. Please try again later.',
+    status: 500,
+    statusText: 'Failed to send message. Please try again later.',
   })
 })

package/layers/data/forms/server/api/forms/status.get.ts

@@ -4,6 +4,9 @@ import { useMailerConfig } from '#layers/mailer/server/utils/config'
 export default defineEventHandler(() => {
   const { resendApiKey, emailFrom, emailTo } = useMailerConfig()
 
+  // Addresses are dev-only: emailTo is the private inbox every submission lands in
+  if (!import.meta.dev) return { configured: Boolean(resendApiKey) }
+
   return {
     configured: Boolean(resendApiKey),
     emailFrom,

package/layers/data/forms/{app → shared}/utils/contact-schema.ts

@@ -1,7 +1,8 @@
 import { z } from 'zod'
 
 export const contactSchema = z.object({
-  name: z.string().min(3, 'Name must be at least 3 characters'),
+  // Real names can be one or two letters (Li, Ng), so only require one
+  name: z.string().trim().min(1, 'Please enter your name'),
   email: z.string().email('Please enter a valid email'),
   message: z.string().min(8, 'Message must be at least 8 characters'),
 })

package/layers/data/metadata/server/api/metadata/search.get.ts

@@ -1,19 +1,39 @@
 import { searchMetadata } from '../../utils/metadata/search'
 import { createError, defineEventHandler, getQuery } from 'h3'
-import type { MetadataMediaType, MetadataProviderId } from '#layers/metadata/shared/types'
+import type { MetadataMediaType } from '#layers/metadata/shared/types'
+
+const MEDIA_TYPES = new Set<MetadataMediaType>([
+  'book',
+  'comic',
+  'comic-series',
+  'manga',
+  'graphic-novel',
+  'collected-edition',
+  'movie',
+  'tv-show',
+])
+const MAX_LIMIT = 50
 
 // fallow-ignore-next-line complexity
 export default defineEventHandler(async (event) => {
   const query = getQuery(event)
 
   const q = String(query.q ?? '').trim()
-  if (!q) throw createError({ statusCode: 400, message: 'q is required' })
+  if (!q) throw createError({ status: 400, message: 'q is required' })
+
+  const mediaType = query.mediaType ? (String(query.mediaType) as MetadataMediaType) : undefined
+  if (mediaType && !MEDIA_TYPES.has(mediaType)) {
+    throw createError({ status: 400, message: `Unknown mediaType '${mediaType}'` })
+  }
+
+  // Unknown provider ids are dropped by searchMetadata's registry filter
+  const providers = query.providers ? String(query.providers).split(',').filter(Boolean) : undefined
 
-  const mediaType = query.mediaType as MetadataMediaType | undefined
-  const providers = query.providers
-    ? (String(query.providers).split(',').filter(Boolean) as MetadataProviderId[])
-    : undefined
-  const limit = query.limit ? Number(query.limit) : 10
+  const rawLimit = query.limit ? Number(query.limit) : 10
+  if (!Number.isInteger(rawLimit) || rawLimit < 1) {
+    throw createError({ status: 400, message: 'limit must be a positive integer' })
+  }
+  const limit = Math.min(rawLimit, MAX_LIMIT)
 
   return searchMetadata({
     query: q,

package/layers/data/metadata/server/api/metadata/status.get.ts

@@ -1,7 +1,10 @@
 import { getProviders } from '../../utils/metadata/provider-registry'
-import { defineEventHandler } from 'h3'
+import { createError, defineEventHandler } from 'h3'
 
 export default defineEventHandler(async () => {
+  // Dev-only: each call runs a live search on every provider, spending real API quota
+  if (!import.meta.dev) throw createError({ status: 404 })
+
   const providers = getProviders()
 
   return Promise.all(

package/layers/data/metadata/server/api/metadata/sync.post.ts

@@ -1,8 +1,18 @@
 import { resolveRecord } from '../../utils/metadata/resolve-record'
 import { defineEventHandler, readBody } from 'h3'
-import type { MetadataSyncInput } from '#layers/metadata/shared/types'
+
+const str = (v: unknown) => (typeof v === 'string' && v.trim() ? v.trim() : undefined)
 
 export default defineEventHandler(async (event) => {
-  const body = await readBody<MetadataSyncInput>(event)
-  return resolveRecord({ ...body })
+  // Pick known fields only; resolveRecord rejects missing provider/providerId with a 400
+  const body = (await readBody<Record<string, unknown>>(event)) ?? {}
+  const provider = str(body.provider)
+  const providerId = str(body.providerId)
+  const resourceType = str(body.resourceType)
+  return resolveRecord({
+    ...(provider && { provider }),
+    ...(providerId && { providerId }),
+    ...(resourceType && { resourceType }),
+    force: body.force === true,
+  })
 })

package/layers/data/metadata/server/utils/metadata/resolve-record.ts

@@ -20,12 +20,12 @@ export async function resolveRecord(
 ): Promise<{ record: MetadataRecord; synced: boolean }> {
   const { provider: providerName, providerId, resourceType, force } = input
   if (!providerName || !providerId) {
-    throw createError({ statusCode: 400, message: 'provider and providerId are required' })
+    throw createError({ status: 400, message: 'provider and providerId are required' })
   }
 
   const provider = getProvider(providerName)
   if (!provider) {
-    throw createError({ statusCode: 404, message: `Provider '${providerName}' not registered` })
+    throw createError({ status: 404, message: `Provider '${providerName}' not registered` })
   }
 
   const cacheKey = makeCacheKey('metadata', providerName, resourceType ?? 'item', providerId)
@@ -40,7 +40,7 @@ export async function resolveRecord(
     providerId,
     ...(resourceType && { resourceType }),
   })
-  if (!record) throw createError({ statusCode: 404, message: 'Not found' })
+  if (!record) throw createError({ status: 404, message: 'Not found' })
 
   const now = new Date().toISOString()
   await setCacheRecord(cacheKey, {

package/layers/delivery/feeds/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
     name: 'feeds',
   },
 
-  extends: process.env.FEEDS_STANDALONE ? ['../../core', '../../content'] : [],
+  extends: ['../../core', '../../content'],
 
   alias: {
     '#layers/feeds': import.meta.dirname,
@@ -29,4 +29,9 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2025-07-15',
+
+  typescript: {
+    typeCheck: false,
+    strict: true,
+  },
 })

package/layers/delivery/feeds/package.json

@@ -8,8 +8,8 @@
     "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
-    "build": "FEEDS_STANDALONE=true nuxi build",
-    "generate": "FEEDS_STANDALONE=true nuxi generate",
+    "build": "nuxi build",
+    "generate": "nuxi generate",
     "preview": "nuxt preview .playground",
     "lint": "eslint ."
   },

package/layers/delivery/feeds/server/routes/feed/demo.get.ts

@@ -1,6 +1,6 @@
 import { buildFeed } from '../../utils/feed-service'
 import { defineEventHandler, getRequestURL, setHeader } from 'h3'
-import { useAppConfig } from 'nitropack/runtime'
+import { readServerAppConfig } from '#layers/core/server/utils/app-config'
 
 const RSS_ICON = `<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
         <path d="M2.5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3Z"/>
@@ -26,7 +26,7 @@ function formatDate(date: Date): string {
 }
 
 export default defineEventHandler(async (event) => {
-  const appConfig = useAppConfig()
+  const appConfig = readServerAppConfig()
   const feedConfig =
     (appConfig as { feedsLayer?: { feed?: { defaultCollection?: string } } }).feedsLayer?.feed ?? {}
   const defaultCollection = feedConfig.defaultCollection ?? 'blog'

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

@@ -39,7 +39,7 @@ export async function getContentFeedItems(
   limit: number = 30
 ): Promise<FeedItem[]> {
   if (!COLLECTION_NAME_RE.test(collection)) {
-    throw createError({ statusCode: 400, statusMessage: 'Invalid collection name' })
+    throw createError({ status: 400, statusText: 'Invalid collection name' })
   }
 
   // queryCollection is keyed by literal collection names, but feed routes accept

package/layers/delivery/feeds/server/utils/feed-service.ts

@@ -1,6 +1,6 @@
 import { getContentFeedItems } from './content-adapter'
 import { getRequestURL, type H3Event } from 'h3'
-import { useAppConfig } from 'nitropack/runtime'
+import { readServerAppConfig } from '#layers/core/server/utils/app-config'
 
 import {
   createFeedConfig,
@@ -16,7 +16,7 @@ export async function buildFeed(
   collection?: string,
   options?: { unlimited?: boolean }
 ): Promise<{ items: FeedItem[]; config: FeedConfig }> {
-  const appConfig = useAppConfig() as unknown as AppFeedConfig
+  const appConfig = readServerAppConfig() as unknown as AppFeedConfig
   const feedConfig = appConfig.feedsLayer?.feed
   const requestUrl = getRequestURL(event)
   const { site, siteUrl } = resolveFeedSiteConfig(appConfig, requestUrl)

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

@@ -50,6 +50,13 @@ export default defineNuxtPlugin({
       { immediate: true }
     )
 
+    // The Reduce Motion switch (restored on mount) also ends core's boot loading screen. Core
+    // handles the OS setting itself, so this only reacts to changes, never before hydration
+    const loading = useLoading()
+    watch(effectiveReducedMotion, (reduced) => {
+      if (reduced && loading.isLoading.value) loading.finishNow()
+    })
+
     watch(
       effectiveReducedTransparency,
       (reduced) => {

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

@@ -28,8 +28,6 @@ export default defineNuxtConfig({
   // Shadow/duration tokens live in core (core/app/assets/css/tokens/elevation-motion.css).
   css: ['#layers/theming/app/assets/css/theme.css'],
 
-  plugins: ['#layers/theming/app/plugins/theme.client.ts'],
-
   colorMode: {
     dataValue: 'theme-mode',
     storageKey: 'theme-mode',

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

@@ -31,12 +31,25 @@
   --type-scale: 1.26;
   --type-snap: 0.0625rem; /* rounding interval: rem so it scales with the root; never px, never 0 */
 
-  /* Fluid display step, 5 → 7 across 360 → 1280px. tan(atan2(length, 1rem)) casts the
-     length to the unitless exponent pow() needs; normalised by 1rem (not 1px) so the
-     exponent stays 5 → 7 whatever the user's root font size; the vw term is scaled by root / 16px so a
-     larger root doesn't lower the exponent at a given width (h1 stays visibly larger). */
+  /* Fluid display step: --display-from at ≤360px → --display-to at ≥1280px (57.5 = 920px / 16).
+     tan(atan2(length, 1rem)) casts the length to the unitless exponent pow() needs; normalised
+     by 1rem (not 1px) so the exponent doesn't move with the user's root font size; the vw term
+     is scaled by root / 16px so a larger root doesn't lower it at a given width (h1 stays
+     visibly larger). Defaults reduce to clamp(5rem, 4.2176rem + 3.4784vw·k, 7rem).
+     --step-display resolves var() here at :root, so overriding --display-from/to on a subtree
+     only reaches elements that recompute it: text-step-display and h1 do. */
+  --display-from: 5;
+  --display-to: 7;
   --step-display: tan(
-    atan2(clamp(5rem, 4.2176rem + 3.4784vw * tan(atan2(1rem, 16px)), 7rem), 1rem)
+    atan2(
+      clamp(
+        var(--display-from) * 1rem,
+        var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+          tan(atan2(1rem, 16px)) / 57.5,
+        var(--display-to) * 1rem
+      ),
+      1rem
+    )
   );
 }
 
@@ -252,6 +265,18 @@
 }
 
 @utility text-step-display {
+  /* Recomputed here so [--display-from:4] [--display-to:9] on the element takes effect */
+  --step-display: tan(
+    atan2(
+      clamp(
+        var(--display-from) * 1rem,
+        var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+          tan(atan2(1rem, 16px)) / 57.5,
+        var(--display-to) * 1rem
+      ),
+      1rem
+    )
+  );
   --step: var(--step-display);
 
   font-size: calc(var(--type-base) * pow(var(--type-scale), var(--step)));
@@ -283,6 +308,17 @@
 
   /* Same expressions as the text-step-* utilities. h1 uses the display step. */
   h1:where(:not([data-slot])) {
+    --step-display: tan(
+      atan2(
+        clamp(
+          var(--display-from) * 1rem,
+          var(--display-from) * 1rem + (var(--display-to) - var(--display-from)) * (100vw - 360px) *
+            tan(atan2(1rem, 16px)) / 57.5,
+          var(--display-to) * 1rem
+        ),
+        1rem
+      )
+    );
     --step: var(--step-display);
 
     font-size: calc(var(--type-base) * pow(var(--type-scale), var(--step)));