kmcom-nuxt-layers 1.3.1 → 1.5.0

package/layers/routing/app/composables/useFeatures.ts

@@ -0,0 +1,12 @@
+import type { FeatureValue } from '../types/routing'
+
+export function useFeatures() {
+  const { config } = useRoutingConfig()
+  const runtimeFlags = useState<Record<string, FeatureValue>>('routing:flags', () => ({}))
+
+  function resolve(name: string): FeatureValue {
+    return runtimeFlags.value[name] ?? config.features[name] ?? 'disabled'
+  }
+
+  return { resolve, runtimeFlags }
+}

package/layers/routing/app/composables/useMaintenance.ts

@@ -0,0 +1,7 @@
+export function useMaintenance() {
+  const { config } = useRoutingConfig()
+  return {
+    isEnabled: computed(() => config.maintenance.enabled),
+    allowRoutes: computed(() => config.maintenance.allowRoutes),
+  }
+}

package/layers/routing/app/composables/useRoutingConfig.ts

@@ -0,0 +1,20 @@
+import { defu } from 'defu'
+import { ROUTING_PRESETS } from '../types/routing'
+import type { RoutingLayerConfig, FeatureValue } from '../types/routing'
+
+export function useRoutingConfig() {
+  const appConfig = useAppConfig()
+  const user = appConfig.routingLayer as Partial<RoutingLayerConfig>
+  const preset = ROUTING_PRESETS[user.preset ?? 'simple']
+  const config = defu(user, preset) as RoutingLayerConfig
+
+  return {
+    config,
+    isStrictMode: () => config.strictDefaultDeny,
+    isLayerDefaultDeny: () => config.layerDefaultDeny,
+    getFeatureVariant: (name: string): FeatureValue =>
+      config.features[name] ?? 'disabled',
+    isFeatureEnabled: (name: string) =>
+      config.features[name] === 'enabled',
+  }
+}

package/layers/routing/app/middleware/01.maintenance.global.ts

@@ -0,0 +1,6 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { isEnabled, allowRoutes } = useMaintenance()
+  if (!isEnabled.value) return
+  if (allowRoutes.value.some(r => to.path.startsWith(r))) return
+  return navigateTo(allowRoutes.value[0])
+})

package/layers/routing/app/middleware/02.governance.global.ts

@@ -0,0 +1,25 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { config, isStrictMode, isLayerDefaultDeny } = useRoutingConfig()
+  const { resolve } = useFeatures()
+  const meta = to.meta
+
+  if (config.debug) console.log('[routing] governance check', to.path, meta)
+
+  // strict default-deny: every route must declare a feature
+  if (isStrictMode() && !meta.feature) {
+    throw createError({ statusCode: 404 })
+  }
+
+  // layer default-deny: layer routes must declare a feature
+  if (isLayerDefaultDeny() && meta.__fromLayer && !meta.feature) {
+    throw createError({ statusCode: 404 })
+  }
+
+  if (!meta.feature) return
+
+  const variant = resolve(meta.feature)
+  if (config.debug) console.log(`[routing] feature "${meta.feature}" resolved to "${variant}"`)
+
+  if (variant === 'disabled') throw createError({ statusCode: 404 })
+  if (variant === 'beta' || variant === 'coming-soon') return navigateTo('/coming-soon')
+})

package/layers/routing/app/plugins/feature-flags.client.ts

@@ -0,0 +1,15 @@
+import type { FeatureValue } from '../types/routing'
+
+export default defineNuxtPlugin(async () => {
+  const { config } = useRoutingConfig()
+  if (!config.runtimeFlags) return
+
+  const { runtimeFlags } = useFeatures()
+  try {
+    const data = await $fetch<Record<string, FeatureValue>>('/api/feature-flags')
+    runtimeFlags.value = data
+  }
+  catch (e) {
+    if (config.debug) console.warn('[routing] Failed to fetch feature flags', e)
+  }
+})

package/layers/routing/app/plugins/scroll-routing.client.ts

@@ -0,0 +1,21 @@
+export default defineNuxtPlugin(() => {
+  const { config } = useRoutingConfig()
+  if (!config.scrollRouting.enabled) return
+
+  const router = useRouter()
+  const observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries.find(e => e.isIntersecting)
+      if (!visible) return
+      const id = visible.target.getAttribute('data-section')
+      if (!id) return
+      const method = config.scrollRouting.mode === 'push' ? 'push' : 'replace'
+      router[method]({ hash: `#${id}` })
+    },
+    { threshold: 0.5 },
+  )
+
+  onNuxtReady(() => {
+    document.querySelectorAll('[data-section]').forEach(el => observer.observe(el))
+  })
+})

package/layers/routing/app/types/route-meta.d.ts

@@ -0,0 +1,6 @@
+declare module 'vue-router' {
+  interface RouteMeta {
+    feature?: string
+    __fromLayer?: boolean
+  }
+}

package/layers/routing/app/types/routing.ts

@@ -0,0 +1,48 @@
+export type FeatureValue = 'enabled' | 'disabled' | 'beta' | 'coming-soon'
+export type RoutingPreset = 'simple' | 'marketing' | 'product' | 'enterprise'
+
+export interface RoutingLayerConfig {
+  preset: RoutingPreset
+  strictDefaultDeny: boolean
+  layerDefaultDeny: boolean
+  runtimeFlags: boolean
+  debug: boolean
+  maintenance: { enabled: boolean; allowRoutes: string[] }
+  scrollRouting: { enabled: boolean; mode: 'replace' | 'push' }
+  features: Record<string, FeatureValue>
+}
+
+export const ROUTING_PRESETS: Record<RoutingPreset, Omit<RoutingLayerConfig, 'preset' | 'features'>> = {
+  simple: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: false,
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: false, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+  marketing: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: true,
+    runtimeFlags: false,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: true, mode: 'replace' },
+  },
+  product: {
+    strictDefaultDeny: false,
+    layerDefaultDeny: true,
+    runtimeFlags: true,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+  enterprise: {
+    strictDefaultDeny: true,
+    layerDefaultDeny: true,
+    runtimeFlags: true,
+    debug: false,
+    maintenance: { enabled: true, allowRoutes: ['/maintenance'] },
+    scrollRouting: { enabled: false, mode: 'replace' },
+  },
+}

package/layers/routing/nuxt.config.ts

@@ -0,0 +1,27 @@
+import type { NuxtPage } from '@nuxt/schema'
+
+export default defineNuxtConfig({
+  $meta: { name: 'routing' },
+
+  alias: {
+    '#layers/routing': import.meta.dirname,
+  },
+
+  compatibilityDate: '2026-01-30',
+
+  hooks: {
+    'pages:extend'(pages) {
+      const cwd = process.cwd()
+      const tag = (list: NuxtPage[]) => {
+        for (const page of list) {
+          if (page.file && !page.file.startsWith(cwd)) {
+            page.meta ??= {}
+            page.meta.__fromLayer = true
+          }
+          if (page.children) tag(page.children)
+        }
+      }
+      tag(pages)
+    },
+  },
+})

package/layers/routing/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@layers/routing",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./nuxt.config.ts"
+}

package/layers/shader/app/components/Preset/ThemeAurora.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeAuroraColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeAuroraColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeBubble.client.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeBubbleColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+// color3/color4 accepted for API consistency but Bubble only uses color1+color2
+const colorNode = createThemeBubbleColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeFlow.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeFlowColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeFlowColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeGradient.client.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeGradientColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+// createAmbientUniforms hardcodes 0.5 — override with our prop value
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeGradientColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,           (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,       (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,   (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeLavaLamp.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeLavaLampColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeLavaLampColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>