kmcom-nuxt-layers 2.7.4 → 3.0.0

package/layers/motion/page-transitions/app/assets/css/page-transitions.css

@@ -0,0 +1,30 @@
+.fade-enter-active,
+.fade-leave-active,
+.default-enter-active,
+.default-leave-active {
+  transition: opacity var(--page-transition-duration, 300ms) ease;
+}
+
+.fade-enter-from,
+.fade-leave-to,
+.default-enter-from,
+.default-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition:
+    transform var(--page-transition-duration, 300ms) ease,
+    opacity var(--page-transition-duration, 300ms) ease;
+}
+
+.slide-enter-from {
+  transform: translateX(24px);
+  opacity: 0;
+}
+
+.slide-leave-to {
+  transform: translateX(-24px);
+  opacity: 0;
+}

package/layers/{page-transitions → motion/page-transitions}/app/composables/usePageTransition.ts

@@ -8,10 +8,13 @@
 export function usePageTransition(name?: string) {
   const appConfig = useAppConfig()
   const route = useRoute()
+  const pageTransitions = appConfig.pageTransitions as
+    | { default?: string; duration?: number }
+    | undefined
 
   const currentTransition = useState('page-transition:current', () => ({
-    name: appConfig.pageTransitions?.default ?? 'fade',
-    duration: appConfig.pageTransitions?.duration ?? 300,
+    name: pageTransitions?.default ?? 'fade',
+    duration: pageTransitions?.duration ?? 300,
   }))
 
   if (name) {
@@ -21,6 +24,15 @@ export function usePageTransition(name?: string) {
   const transitionName = computed(() => currentTransition.value.name)
   const duration = computed(() => currentTransition.value.duration)
 
+  if (import.meta.client) {
+    watchEffect(() => {
+      document.documentElement.style.setProperty(
+        '--page-transition-duration',
+        `${duration.value}ms`
+      )
+    })
+  }
+
   function setTransition(transitionName: string, transitionDuration?: number) {
     currentTransition.value.name = transitionName
     if (transitionDuration !== undefined) {

package/layers/{page-transitions → motion/page-transitions}/app/plugins/page-transitions.client.ts

@@ -2,9 +2,12 @@ export default defineNuxtPlugin({
   name: 'page-transitions:page-transitions',
   setup(nuxtApp) {
     const appConfig = useAppConfig()
+    const pageTransitions = appConfig.pageTransitions as
+      | { default?: string; duration?: number }
+      | undefined
 
-    const defaultTransition = appConfig.pageTransitions?.default ?? 'fade'
-    const duration = appConfig.pageTransitions?.duration ?? 300
+    const defaultTransition = pageTransitions?.default ?? 'fade'
+    const duration = pageTransitions?.duration ?? 300
 
     nuxtApp.hook('page:start', () => {
       useState('page-transition:current').value = {

package/layers/{page-transitions → motion/page-transitions}/nuxt.config.ts

@@ -1,13 +1,15 @@
 export default defineNuxtConfig({
   $meta: { name: 'page-transitions' },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/page-transitions': import.meta.dirname,
     '#layers/page-transitions/types': `${import.meta.dirname}/app/types`,
   },
 
+  css: ['#layers/page-transitions/app/assets/css/page-transitions.css'],
+
   compatibilityDate: '2026-06-06',
 
   typescript: {

package/layers/motion/page-transitions/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/motion/scroll/app/app.config.ts

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+  scroll: {
+    smoothScroll: true as boolean | string[],
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    scroll?: {
+      smoothScroll?: boolean | string[]
+    }
+  }
+}

package/layers/{scroll → motion/scroll}/app/composables/useSmoothScroll.ts

@@ -25,7 +25,8 @@ export function useSmoothScroll() {
     () => (nuxtApp.$locomotiveScroll as Ref<LocomotiveScroll | null>)?.value ?? undefined
   )
 
-  const isEnabled = computed(() => (appConfig.scroll?.smoothScroll ?? true) !== false)
+  const scrollConfig = appConfig.scroll as { smoothScroll?: boolean | string[] } | undefined
+  const isEnabled = computed(() => (scrollConfig?.smoothScroll ?? true) !== false)
   const isReady = computed(() => locomotiveScroll.value !== null)
 
   const scrollState = computed(

package/layers/{scroll → motion/scroll}/app/plugins/locomotive-scroll.client.ts

@@ -47,7 +47,8 @@ export default defineNuxtPlugin({
 
     const router = useRouter()
     const appConfig = useAppConfig()
-    const smoothScroll: boolean | string[] = appConfig.scroll?.smoothScroll ?? true
+    const scrollConfig = appConfig.scroll as { smoothScroll?: boolean | string[] } | undefined
+    const smoothScroll: boolean | string[] = scrollConfig?.smoothScroll ?? true
 
     const nuxtApp = useNuxtApp()
 

package/layers/{scroll → motion/scroll}/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   $meta: { name: 'scroll' },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/scroll': import.meta.dirname,

package/layers/motion/scroll/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/{transitions → motion/transitions}/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   $meta: { name: 'transitions' },
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   alias: {
     '#layers/transitions': import.meta.dirname,

package/layers/motion/transitions/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/{canvas → render/canvas}/app/composables/useRendererCapabilities.ts

@@ -1,7 +1,6 @@
 import {
   QUALITY_PRESETS,
   type QualityLevel,
-  type QualitySettings,
   type RendererCapabilities,
 } from '#layers/canvas/types/renderer'
 import type { WebGLRenderer } from 'three'
@@ -80,13 +79,6 @@ export async function checkWebGPUSupport(): Promise<boolean> {
   }
 }
 
-/**
- * Get quality settings for a given level
- */
-export function getQualitySettings(level: QualityLevel): QualitySettings {
-  return QUALITY_PRESETS[level]
-}
-
 /**
  * Auto-detect optimal quality based on device
  */

package/layers/{canvas → render/canvas}/app/composables/useShaderTime.ts

@@ -131,15 +131,3 @@ export function useShaderTime(options: ShaderTimeOptions = {}) {
     setTime,
   }
 }
-
-/**
- * Simple global time singleton for basic use cases
- */
-const _globalTime = { instance: null as ReturnType<typeof useShaderTime> | null }
-
-export function useGlobalShaderTime() {
-  if (!_globalTime.instance) {
-    _globalTime.instance = useShaderTime({ autoStart: true })
-  }
-  return _globalTime.instance
-}

package/layers/{canvas → render/canvas}/nuxt.config.ts

@@ -145,7 +145,7 @@ export default defineNuxtConfig({
 
   compatibilityDate: '2026-06-06',
 
-  extends: ['../core'],
+  extends: ['../../core'],
 
   typescript: {
     typeCheck: false,
@@ -175,9 +175,6 @@ export default defineNuxtConfig({
     plugins: [threeWebGPUSSRStub()],
     optimizeDeps: {
       include: ['three', 'three/webgpu', 'three/tsl'],
-      esbuildOptions: {
-        target: 'esnext',
-      },
     },
     build: {
       target: 'esnext',

package/layers/{canvas → render/canvas}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,canvas pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {
@@ -18,6 +18,7 @@
     "three": "catalog:"
   },
   "devDependencies": {
-    "@types/three": "catalog:"
+    "@types/three": "catalog:",
+    "vite": "catalog:"
   }
 }

package/layers/{canvas → render/canvas}/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../apps/playground/tsconfig.json",
+  "extends": "../../../apps/playground/tsconfig.json",
   "compilerOptions": {
     "strict": true,
     "types": ["@webgpu/types"]

package/layers/render/shader/app/app.config.ts

@@ -0,0 +1,21 @@
+export default defineAppConfig({
+  shader: {
+    preferWebGPU: true,
+    maxPixelRatio: 2,
+    defaultQuality: 'high',
+    debugPanel: true,
+    toneMapping: 'aces',
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    shader?: {
+      preferWebGPU?: boolean
+      maxPixelRatio?: number
+      defaultQuality?: 'low' | 'medium' | 'high' | 'ultra'
+      debugPanel?: boolean
+      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+    }
+  }
+}

package/layers/{shader → render/shader}/app/shaders/layers/paperShading.ts

@@ -3,7 +3,7 @@
  * Inspired by Paper Shaders - organic, hand-drawn aesthetic
  */
 import { Color } from 'three'
-import { abs, float, mix, smoothstep, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
+import { abs, clamp, float, mix, smoothstep, time as tslTime, uniform, uv, vec3 } from 'three/tsl'
 
 import { grain as grainFn, paperTexture } from '../common/grain'
 import { fbm2D, simplexNoise2D } from '../common/noise'

package/layers/{shader → render/shader}/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,canvas,shader pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "typecheck": "vue-tsc --noEmit -p ../../../tsconfig.typecheck.json",
     "lint": "eslint ."
   },
   "dependencies": {

package/layers/render/shader/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/layers/structure/grid/app/app.config.ts

@@ -0,0 +1,92 @@
+import type { GridPreset } from './types/tracks'
+
+const SWISS_COLUMNS = Array.from({ length: 18 }, () => ({ size: 1 }))
+
+export default defineAppConfig({
+  gridLayer: {
+    presets: {
+      swiss: {
+        name: 'swiss',
+        columns: SWISS_COLUMNS,
+      },
+      editorial: {
+        name: 'editorial',
+        columns: [
+          {
+            size: 2,
+            lineStart: 'feature-start',
+            lineEnd: 'feature-end',
+          },
+          {
+            size: 1,
+            lineStart: 'aside-start',
+            lineEnd: 'aside-end',
+          },
+        ],
+      },
+      sidebar: {
+        name: 'sidebar',
+        columns: [
+          {
+            size: 1,
+            lineStart: 'sidebar-start',
+            lineEnd: 'sidebar-end',
+          },
+          {
+            size: 4,
+            lineStart: 'content-start',
+            lineEnd: 'content-end',
+          },
+        ],
+      },
+      magazine: {
+        name: 'magazine',
+        columns: [
+          {
+            size: 2,
+            lineStart: 'feature-start',
+            lineEnd: 'feature-end',
+          },
+          {
+            size: 3,
+            lineStart: 'body-start',
+            lineEnd: 'body-end',
+          },
+          {
+            size: 1,
+            lineStart: 'aside-start',
+            lineEnd: 'aside-end',
+          },
+        ],
+      },
+      'holy-grail': {
+        name: 'holy-grail',
+        columns: [
+          {
+            size: 1,
+            lineStart: 'aside-left-start',
+            lineEnd: 'aside-left-end',
+          },
+          {
+            size: 4,
+            lineStart: 'main-start',
+            lineEnd: 'main-end',
+          },
+          {
+            size: 1,
+            lineStart: 'aside-right-start',
+            lineEnd: 'aside-right-end',
+          },
+        ],
+      },
+    },
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    gridLayer?: {
+      presets?: Record<string, GridPreset>
+    }
+  }
+}

package/layers/structure/grid/app/assets/css/grid.css

@@ -0,0 +1,38 @@
+/* Grid layer rhythm — derives all vertical spacing from --fs. See
+   docs/superpowers/specs/2026-09-04-grid-layer-design.md and root LAYOUT-SYSTEM.md
+   for the full derivation rationale. Column composition is NOT here — it comes from
+   useGridTracks().toColumnsCss(), applied inline per grid-tracks instance. */
+
+@property --fs {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+: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);
+}
+
+.grid-tracks {
+  /* rlh not lh: always resolves against root, unaffected by a nested element's own
+     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));
+  --lines: calc(round(down, var(--avail-b), var(--unit)) / var(--unit));
+  --lpf: clamp(4, round(down, calc(100svh / var(--unit) / 4.5), 1), 8);
+  --fields: max(1, round(down, calc((var(--lines) + 1) / (var(--lpf) + 1)), 1));
+
+  display: grid;
+  grid-auto-rows: minmax(calc(var(--lpf) * var(--unit)), max-content);
+  gap: var(--unit);
+  container-name: grid-tracks;
+  container-type: inline-size;
+  padding-inline: var(--edge-min);
+  padding-block: var(--edge-min);
+}

package/layers/structure/grid/app/composables/useGridTracks.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+
+import type { GridPreset, TrackConfig } from '../types/tracks'
+import { resolve, toColumnsCss } from './useGridTracks'
+
+describe('toColumnsCss', () => {
+  it('renders equal segments with no line names', () => {
+    const config: TrackConfig = { columns: [{ size: 1 }, { size: 1 }, { size: 1 }] }
+    expect(toColumnsCss(config)).toBe(
+      'minmax(var(--measure-min), 1fr) minmax(var(--measure-min), 1fr) ' +
+        'minmax(var(--measure-min), 1fr)'
+    )
+  })
+
+  it('renders mixed sizes (8 equal + double + triple)', () => {
+    const config: TrackConfig = {
+      columns: [
+        { size: 1 },
+        { size: 1 },
+        { size: 1 },
+        { size: 1 },
+        { size: 1 },
+        { size: 1 },
+        { size: 1 },
+        { size: 2 },
+        { size: 3 },
+      ],
+    }
+    const css = toColumnsCss(config)
+    expect(css.split(' ').filter((s) => s.startsWith('minmax'))).toHaveLength(9)
+    expect(css).toContain('minmax(var(--measure-min), 2fr)')
+    expect(css).toContain('minmax(var(--measure-min), 3fr)')
+  })
+
+  it('brackets a leading lineStart and trailing lineEnd', () => {
+    const config: TrackConfig = {
+      columns: [{ size: 1, lineStart: 'a-start', lineEnd: 'a-end' }],
+    }
+    expect(toColumnsCss(config)).toBe('[a-start] minmax(var(--measure-min), 1fr) [a-end]')
+  })
+
+  it('merges an adjacent lineEnd and lineStart into one bracket', () => {
+    const config: TrackConfig = {
+      columns: [
+        { size: 2, lineStart: 'feature-start', lineEnd: 'feature-end' },
+        { size: 1, lineStart: 'aside-start', lineEnd: 'aside-end' },
+      ],
+    }
+    expect(toColumnsCss(config)).toBe(
+      '[feature-start] minmax(var(--measure-min), 2fr) ' +
+        '[feature-end aside-start] minmax(var(--measure-min), 1fr) [aside-end]'
+    )
+  })
+
+  it('supports a segment with only lineStart set', () => {
+    const config: TrackConfig = {
+      columns: [{ size: 1, lineStart: 'only-start' }, { size: 1 }],
+    }
+    expect(toColumnsCss(config)).toBe(
+      '[only-start] minmax(var(--measure-min), 1fr) minmax(var(--measure-min), 1fr)'
+    )
+  })
+
+  it('accepts an array of line names', () => {
+    const config: TrackConfig = {
+      columns: [{ size: 1, lineStart: ['a', 'b'] }],
+    }
+    expect(toColumnsCss(config)).toBe('[a b] minmax(var(--measure-min), 1fr)')
+  })
+
+  it('uses minTrackWidth override instead of the --measure-min default', () => {
+    const config: TrackConfig = { columns: [{ size: 1 }], minTrackWidth: '20rem' }
+    expect(toColumnsCss(config)).toBe('minmax(20rem, 1fr)')
+  })
+})
+
+describe('resolve', () => {
+  const presets: Record<string, GridPreset> = {
+    swiss: { name: 'swiss', columns: [{ size: 1 }] },
+  }
+
+  it('looks up a named preset from the registry', () => {
+    expect(resolve('swiss', presets)).toBe(presets.swiss)
+  })
+
+  it('throws for an unknown preset name', () => {
+    expect(() => resolve('nope', presets)).toThrow('Unknown grid preset: "nope"')
+  })
+
+  it('passes a TrackConfig object through unchanged', () => {
+    const custom: TrackConfig = { columns: [{ size: 1 }, { size: 2 }] }
+    expect(resolve(custom, presets)).toBe(custom)
+  })
+})

package/layers/structure/grid/app/composables/useGridTracks.ts

@@ -0,0 +1,74 @@
+import type { GridPreset, TrackConfig } from '../types/tracks'
+
+type GridLayerAppConfig = {
+  gridLayer?: {
+    presets?: Record<string, GridPreset>
+  }
+}
+
+function normalizeNames(names: string | string[] | undefined): string[] {
+  if (!names) return []
+  return Array.isArray(names) ? names : [names]
+}
+
+function toBracket(names: string[]): string {
+  return names.length > 0 ? `[${names.join(' ')}]` : ''
+}
+
+/**
+ * Builds a `grid-template-columns` value from a TrackConfig. Each segment becomes a
+ * `minmax(floor, Nfr)` track; adjacent lineEnd/lineStart names merge into one bracket,
+ * per standard named-grid-line syntax. Unlike `repeat(auto-fill, ...)`, an explicit track
+ * list cannot drop columns to fit a narrow viewport — it only overflows. Wrap the grid in
+ * a scrollable container (e.g. `overflow-x: auto` on a wrapper element, not on
+ * `.grid-tracks` itself) if segments may overflow the target viewport, or pass a smaller
+ * `minTrackWidth`/fewer segments to avoid overflow entirely.
+ */
+export function toColumnsCss(config: TrackConfig): string {
+  const minWidth = config.minTrackWidth ?? 'var(--measure-min)'
+  const segments = config.columns
+
+  const parts: string[] = []
+
+  segments.forEach((segment, index) => {
+    const previous = index > 0 ? segments[index - 1] : undefined
+    const leadNames = [...normalizeNames(previous?.lineEnd), ...normalizeNames(segment.lineStart)]
+    const leadBracket = toBracket(leadNames)
+    if (leadBracket) parts.push(leadBracket)
+    parts.push(`minmax(${minWidth}, ${segment.size}fr)`)
+  })
+
+  const lastSegment = segments[segments.length - 1]
+  const trailBracket = toBracket(normalizeNames(lastSegment?.lineEnd))
+  if (trailBracket) parts.push(trailBracket)
+
+  return parts.join(' ')
+}
+
+/**
+ * Resolves a preset name against a registry, or passes a TrackConfig object through
+ * unchanged. Exported standalone so it's testable without Nuxt's useAppConfig context.
+ */
+export function resolve(
+  input: string | TrackConfig,
+  presets?: Record<string, GridPreset>
+): TrackConfig {
+  if (typeof input === 'string') {
+    const found = presets?.[input]
+    if (!found) {
+      throw new Error(`Unknown grid preset: "${input}"`)
+    }
+    return found
+  }
+  return input
+}
+
+export function useGridTracks() {
+  const appConfig = useAppConfig() as GridLayerAppConfig
+  const presets = computed(() => appConfig.gridLayer?.presets)
+
+  return {
+    resolve: (input: string | TrackConfig) => resolve(input, presets.value),
+    toColumnsCss,
+  }
+}

package/layers/structure/grid/app/types/tracks.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import type { GridPreset, TrackConfig, TrackSegment } from './tracks'
+
+describe('track types', () => {
+  it('accepts a minimal equal-width segment', () => {
+    const segment: TrackSegment = { size: 1 }
+    expect(segment.size).toBe(1)
+  })
+
+  it('accepts a segment with named lines', () => {
+    const segment: TrackSegment = {
+      size: 2,
+      lineStart: 'feature-start',
+      lineEnd: ['feature-end', 'aside-start'],
+    }
+    expect(segment.lineEnd).toEqual(['feature-end', 'aside-start'])
+  })
+
+  it('accepts a TrackConfig with optional minTrackWidth', () => {
+    const config: TrackConfig = {
+      columns: [{ size: 1 }, { size: 2 }],
+      minTrackWidth: '20rem',
+    }
+    expect(config.columns).toHaveLength(2)
+  })
+
+  it('a GridPreset is a named TrackConfig', () => {
+    const preset: GridPreset = { name: 'swiss', columns: [{ size: 1 }] }
+    expect(preset.name).toBe('swiss')
+  })
+})

package/layers/structure/grid/app/types/tracks.ts

@@ -0,0 +1,18 @@
+export type TrackSegment = {
+  /** Relative size, same unit as CSS `fr`. 1 = one equal column. */
+  size: number
+  /** Optional named line(s) at the start of this segment, e.g. 'feature-start'. */
+  lineStart?: string | string[]
+  /** Optional named line(s) at the end of this segment. */
+  lineEnd?: string | string[]
+}
+
+export type TrackConfig = {
+  columns: TrackSegment[]
+  /** Track floor — reuses --measure-min unless overridden. */
+  minTrackWidth?: string
+}
+
+export type GridPreset = TrackConfig & {
+  name: string
+}