kmcom-nuxt-layers 2.2.12 → 2.2.13

package/layers/shader/app/shaders/createMaterial.ts

@@ -106,102 +106,116 @@ const sideMap: Record<string, Side> = {
   double: DoubleSide,
 }
 
-// ============================================
-// Factory Functions
-// ============================================
-
-/**
- * Create a shader material from a shader type
- */
-export function createShaderMaterial<T extends ShaderType>(
+function createShaderUniforms<T extends ShaderType>(
   type: T,
-  shaderOptions?: ShaderOptions<T>,
-  materialOptions?: MaterialOptions
-): ShaderMaterialResult<T> {
-  const {
-    transparent = false,
-    side = 'double',
-    opacity = 1,
-    depthTest = true,
-    depthWrite = true,
-  } = materialOptions || {}
+  shaderOptions?: ShaderOptions<T>
+): ShaderUniforms<T> {
+  switch (type) {
+    case 'stripe':
+      return createStripeGradientUniforms(shaderOptions as StripeGradientOptions) as ShaderUniforms<T>
+    case 'meshGradient':
+      return createMeshGradientUniforms(shaderOptions as MeshGradientOptions) as ShaderUniforms<T>
+    case 'aurora':
+      return createAuroraUniforms(shaderOptions as AuroraOptions) as ShaderUniforms<T>
+    case 'shaderGradient':
+      return createShaderGradientUniforms(shaderOptions as ShaderGradientOptions) as ShaderUniforms<T>
+    case 'paperShading':
+      return createPaperShadingUniforms(shaderOptions as PaperShadingOptions) as ShaderUniforms<T>
+  }
+}
 
-  let uniforms: ShaderUniforms<T>
-  let colorNode: TSLNode
+function createShaderColorNode<T extends ShaderType>(type: T, uniforms: ShaderUniforms<T>): TSLNode {
+  switch (type) {
+    case 'stripe':
+      return stripeGradient(uniforms as StripeGradientUniforms)
+    case 'meshGradient':
+      return meshGradient(uniforms as MeshGradientUniforms)
+    case 'aurora':
+      return aurora(uniforms as AuroraUniforms)
+    case 'shaderGradient':
+      return shaderGradient(uniforms as ShaderGradientUniforms)
+    case 'paperShading':
+      return paperShading(uniforms as PaperShadingUniforms)
+  }
+}
 
-  // Create uniforms and color node based on type
+function updateShaderUniforms<T extends ShaderType>(
+  type: T,
+  uniforms: ShaderUniforms<T>,
+  options: Partial<ShaderOptions<T>>
+): void {
   switch (type) {
     case 'stripe':
-      uniforms = createStripeGradientUniforms(
-        shaderOptions as StripeGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = stripeGradient(uniforms as StripeGradientUniforms)
-      break
+      updateStripeGradientUniforms(
+        uniforms as StripeGradientUniforms,
+        options as Partial<StripeGradientOptions>
+      )
+      return
     case 'meshGradient':
-      uniforms = createMeshGradientUniforms(
-        shaderOptions as MeshGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = meshGradient(uniforms as MeshGradientUniforms)
-      break
+      updateMeshGradientUniforms(
+        uniforms as MeshGradientUniforms,
+        options as Partial<MeshGradientOptions>
+      )
+      return
     case 'aurora':
-      uniforms = createAuroraUniforms(shaderOptions as AuroraOptions) as ShaderUniforms<T>
-      colorNode = aurora(uniforms as AuroraUniforms)
-      break
+      updateAuroraUniforms(uniforms as AuroraUniforms, options as Partial<AuroraOptions>)
+      return
     case 'shaderGradient':
-      uniforms = createShaderGradientUniforms(
-        shaderOptions as ShaderGradientOptions
-      ) as ShaderUniforms<T>
-      colorNode = shaderGradient(uniforms as ShaderGradientUniforms)
-      break
+      updateShaderGradientUniforms(
+        uniforms as ShaderGradientUniforms,
+        options as Partial<ShaderGradientOptions>
+      )
+      return
     case 'paperShading':
-      uniforms = createPaperShadingUniforms(
-        shaderOptions as PaperShadingOptions
-      ) as ShaderUniforms<T>
-      colorNode = paperShading(uniforms as PaperShadingUniforms)
-      break
-    default:
-      throw new Error(`Unknown shader type: ${type}`)
+      updatePaperShadingUniforms(
+        uniforms as PaperShadingUniforms,
+        options as Partial<PaperShadingOptions>
+      )
   }
+}
+
+function applyMaterialOptions(
+  material: MeshBasicNodeMaterial,
+  colorNode: TSLNode,
+  options?: MaterialOptions
+): void {
+  const {
+    transparent = false,
+    side = 'double',
+    opacity = 1,
+    depthTest = true,
+    depthWrite = true,
+  } = options || {}
 
-  // Create material
-  const material = new MeshBasicNodeMaterial()
-  material.colorNode = transparent ? vec4(colorNode, opacity) : colorNode
   material.transparent = transparent
   material.side = sideMap[side] || DoubleSide
   material.depthTest = depthTest
   material.depthWrite = depthWrite
+  material.colorNode = transparent ? vec4(colorNode, opacity) : colorNode
+}
+
+// ============================================
+// Factory Functions
+// ============================================
+
+/**
+ * Create a shader material from a shader type
+ */
+export function createShaderMaterial<T extends ShaderType>(
+  type: T,
+  shaderOptions?: ShaderOptions<T>,
+  materialOptions?: MaterialOptions
+): ShaderMaterialResult<T> {
+  const uniforms = createShaderUniforms(type, shaderOptions)
+  const colorNode = createShaderColorNode(type, uniforms)
+
+  // Create material
+  const material = new MeshBasicNodeMaterial()
+  applyMaterialOptions(material, colorNode, materialOptions)
 
   // Update function
   const update = (options: Partial<ShaderOptions<T>>) => {
-    switch (type) {
-      case 'stripe':
-        updateStripeGradientUniforms(
-          uniforms as StripeGradientUniforms,
-          options as Partial<StripeGradientOptions>
-        )
-        break
-      case 'meshGradient':
-        updateMeshGradientUniforms(
-          uniforms as MeshGradientUniforms,
-          options as Partial<MeshGradientOptions>
-        )
-        break
-      case 'aurora':
-        updateAuroraUniforms(uniforms as AuroraUniforms, options as Partial<AuroraOptions>)
-        break
-      case 'shaderGradient':
-        updateShaderGradientUniforms(
-          uniforms as ShaderGradientUniforms,
-          options as Partial<ShaderGradientOptions>
-        )
-        break
-      case 'paperShading':
-        updatePaperShadingUniforms(
-          uniforms as PaperShadingUniforms,
-          options as Partial<PaperShadingOptions>
-        )
-        break
-    }
+    updateShaderUniforms(type, uniforms, options)
   }
 
   // Dispose function

package/layers/shader/app/shaders/layers/paperShading.ts

@@ -9,6 +9,18 @@ import { grain as grainFn, paperTexture } from '../common/grain'
 import { fbm2D, simplexNoise2D } from '../common/noise'
 import type { FloatUniform, TSLNode } from '../types'
 
+const DEFAULT_PAPER_SHADING_OPTIONS = {
+  paperColor: '#f5f0e6',
+  inkColor: '#1a1a1a',
+  inkColor2: '#3d5a80',
+  speed: 0.1,
+  textureIntensity: 0.15,
+  flowIntensity: 1,
+  grainIntensity: 0.08,
+  bleed: 0.5,
+  edgeDarkness: 0.3,
+} as const
+
 export type PaperShadingOptions = {
   /** Base paper color */
   paperColor?: string
@@ -49,16 +61,16 @@ export function createPaperShadingUniforms(
   options: PaperShadingOptions = {}
 ): PaperShadingUniforms {
   const {
-    paperColor = '#f5f0e6',
-    inkColor = '#1a1a1a',
-    inkColor2 = '#3d5a80',
-    speed = 0.1,
-    textureIntensity = 0.15,
-    flowIntensity = 1,
-    grainIntensity = 0.08,
-    bleed = 0.5,
-    edgeDarkness = 0.3,
-  } = options
+    paperColor,
+    inkColor,
+    inkColor2,
+    speed,
+    textureIntensity,
+    flowIntensity,
+    grainIntensity,
+    bleed,
+    edgeDarkness,
+  } = { ...DEFAULT_PAPER_SHADING_OPTIONS, ...options }
 
   return {
     paperColor: uniform(new Color(paperColor)),

package/layers/shader/app/shaders/layers/shaderGradient.ts

@@ -8,6 +8,31 @@ import { cos, mix, pow, sin, smoothstep, time as tslTime, uniform, uv, vec2, vec
 import { fbm2D, simplexNoise2D } from '../common/noise'
 import type { FloatUniform, TSLNode } from '../types'
 
+const DEFAULT_SHADER_GRADIENT_OPTIONS = {
+  color1: '#ff5722',
+  color2: '#673ab7',
+  color3: '#2196f3',
+  speed: 0.4,
+  morphIntensity: 1,
+  grain: 0.03,
+  lightX: 0.5,
+  lightY: 0.5,
+  brightness: 1,
+  zoom: 1,
+} as const
+
+function setNumberUniform(uniform: FloatUniform, value: number | undefined): void {
+  if (value !== undefined) {
+    uniform.value = value
+  }
+}
+
+function setColorUniform(uniform: TSLNode, value: string | undefined): void {
+  if (value !== undefined) {
+    uniform.value = new Color(value)
+  }
+}
+
 export type ShaderGradientOptions = {
   /** Primary color */
   color1?: string
@@ -51,17 +76,17 @@ export function createShaderGradientUniforms(
   options: ShaderGradientOptions = {}
 ): ShaderGradientUniforms {
   const {
-    color1 = '#ff5722',
-    color2 = '#673ab7',
-    color3 = '#2196f3',
-    speed = 0.4,
-    morphIntensity = 1,
-    grain = 0.03,
-    lightX = 0.5,
-    lightY = 0.5,
-    brightness = 1,
-    zoom = 1,
-  } = options
+    color1,
+    color2,
+    color3,
+    speed,
+    morphIntensity,
+    grain,
+    lightX,
+    lightY,
+    brightness,
+    zoom,
+  } = { ...DEFAULT_SHADER_GRADIENT_OPTIONS, ...options }
 
   return {
     color1: uniform(new Color(color1)),
@@ -139,14 +164,14 @@ export function updateShaderGradientUniforms(
   uniforms: ShaderGradientUniforms,
   options: Partial<ShaderGradientOptions>
 ): void {
-  if (options.color1 !== undefined) uniforms.color1.value = new Color(options.color1)
-  if (options.color2 !== undefined) uniforms.color2.value = new Color(options.color2)
-  if (options.color3 !== undefined) uniforms.color3.value = new Color(options.color3)
-  if (options.speed !== undefined) uniforms.speed.value = options.speed
-  if (options.morphIntensity !== undefined) uniforms.morphIntensity.value = options.morphIntensity
-  if (options.grain !== undefined) uniforms.grain.value = options.grain
-  if (options.lightX !== undefined) uniforms.lightX.value = options.lightX
-  if (options.lightY !== undefined) uniforms.lightY.value = options.lightY
-  if (options.brightness !== undefined) uniforms.brightness.value = options.brightness
-  if (options.zoom !== undefined) uniforms.zoom.value = options.zoom
+  setColorUniform(uniforms.color1, options.color1)
+  setColorUniform(uniforms.color2, options.color2)
+  setColorUniform(uniforms.color3, options.color3)
+  setNumberUniform(uniforms.speed, options.speed)
+  setNumberUniform(uniforms.morphIntensity, options.morphIntensity)
+  setNumberUniform(uniforms.grain, options.grain)
+  setNumberUniform(uniforms.lightX, options.lightX)
+  setNumberUniform(uniforms.lightY, options.lightY)
+  setNumberUniform(uniforms.brightness, options.brightness)
+  setNumberUniform(uniforms.zoom, options.zoom)
 }

package/layers/shader/app/utils/tsl/tween.ts

@@ -14,11 +14,9 @@ export type TweenHandle = {
  */
 export function tweenUniform(
   uniformNode: { value: number },
-  from: number,
-  to: number,
-  duration: number,
-  easing?: (t: number) => number
+  ...args: [from: number, to: number, duration: number, easing?: (t: number) => number]
 ): TweenHandle {
+  const [from, to, duration, easing] = args
   let startTime: number | null = null
   let cancelled = false
   let resolvePromise: () => void

package/layers/shader/package.json

@@ -10,6 +10,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@vueuse/core": "catalog:"
+    "@vueuse/core": "catalog:",
+    "three": "catalog:"
+  },
+  "devDependencies": {
+    "@types/three": "catalog:"
   }
 }

package/layers/theme/app/components/ThemePicker/Menu.vue

@@ -1,30 +1,8 @@
 <script setup lang="ts">
-  const {
-    contrastOverride,
-    motionOverride,
-    transparencyOverride,
-    setContrastOverride,
-    setMotionOverride,
-    setTransparencyOverride,
-    effectiveHighContrast,
-    effectiveReducedMotion,
-    effectiveReducedTransparency,
-  } = useTheme()
+  import { useThemePreferenceModels } from '../../composables/useThemePreferenceModels'
 
-  const contrastModel = computed({
-    get: () => effectiveHighContrast.value,
-    set: (val: boolean) => setContrastOverride(val ? 'on' : 'system'),
-  })
-
-  const motionModel = computed({
-    get: () => effectiveReducedMotion.value,
-    set: (val: boolean) => setMotionOverride(val ? 'on' : 'system'),
-  })
-
-  const transparencyModel = computed({
-    get: () => effectiveReducedTransparency.value,
-    set: (val: boolean) => setTransparencyOverride(val ? 'on' : 'system'),
-  })
+  const { contrastOverride, motionOverride, transparencyOverride, contrastModel, motionModel, transparencyModel } =
+    useThemePreferenceModels()
 </script>
 
 <template>

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

@@ -0,0 +1,39 @@
+import { computed } from 'vue'
+
+export function useThemePreferenceModels() {
+  const {
+    contrastOverride,
+    motionOverride,
+    transparencyOverride,
+    setContrastOverride,
+    setMotionOverride,
+    setTransparencyOverride,
+    effectiveHighContrast,
+    effectiveReducedMotion,
+    effectiveReducedTransparency,
+  } = useTheme()
+
+  const contrastModel = computed({
+    get: () => effectiveHighContrast.value,
+    set: (value: boolean) => setContrastOverride(value ? 'on' : 'system'),
+  })
+
+  const motionModel = computed({
+    get: () => effectiveReducedMotion.value,
+    set: (value: boolean) => setMotionOverride(value ? 'on' : 'system'),
+  })
+
+  const transparencyModel = computed({
+    get: () => effectiveReducedTransparency.value,
+    set: (value: boolean) => setTransparencyOverride(value ? 'on' : 'system'),
+  })
+
+  return {
+    contrastOverride,
+    motionOverride,
+    transparencyOverride,
+    contrastModel,
+    motionModel,
+    transparencyModel,
+  }
+}

package/layers/theme/server/plugins/theme-fouc.ts

@@ -1,6 +1,4 @@
-import twColors from 'tailwindcss/colors'
-
-type DefaultColors = typeof twColors
+import { buildAccentCSS } from '../utils/accent-css'
 
 /**
  * Nitro render hook — prevents FOUC for all theme preferences by injecting:
@@ -24,95 +22,6 @@ type DefaultColors = typeof twColors
  * set the same value again — this is idempotent and safe.
  */
 
-const ACCENTS = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const
-
-type AccentName = (typeof ACCENTS)[number]
-
-const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
-
-/**
- * Coordinated three-colour palettes. Each accent colour selects a
- * secondary and info (accent) colour that sit in the same temperature
- * zone and feel cohesive together.
- *
- *   primary  = the user-selected accent
- *   secondary = a related colour in the same hue family
- *   info      = a third complementary accent
- */
-const ACCENT_PALETTES: Record<AccentName, { secondary: AccentName; info: AccentName }> = {
-  red: { secondary: 'rose', info: 'orange' },
-  orange: { secondary: 'amber', info: 'red' },
-  amber: { secondary: 'orange', info: 'yellow' },
-  yellow: { secondary: 'lime', info: 'amber' },
-  lime: { secondary: 'green', info: 'yellow' },
-  green: { secondary: 'teal', info: 'emerald' },
-  emerald: { secondary: 'green', info: 'teal' },
-  teal: { secondary: 'cyan', info: 'emerald' },
-  cyan: { secondary: 'sky', info: 'teal' },
-  sky: { secondary: 'blue', info: 'cyan' },
-  blue: { secondary: 'indigo', info: 'sky' },
-  indigo: { secondary: 'violet', info: 'blue' },
-  violet: { secondary: 'purple', info: 'indigo' },
-  purple: { secondary: 'fuchsia', info: 'violet' },
-  fuchsia: { secondary: 'pink', info: 'purple' },
-  pink: { secondary: 'rose', info: 'fuchsia' },
-  rose: { secondary: 'pink', info: 'red' },
-}
-
-function getShades(name: AccentName): Record<number, string> | null {
-  const p = (twColors as DefaultColors)[name]
-  return !p || typeof p === 'string' ? null : (p as Record<number, string>)
-}
-
-// Pre-compute all CSS rules at startup (once)
-function buildAccentCSS(): string {
-  let css = ''
-  for (const accent of ACCENTS) {
-    const primary = getShades(accent)
-    if (!primary) continue
-
-    const { secondary: secName, info: infoName } = ACCENT_PALETTES[accent]
-    const secondary = getShades(secName)
-    const info = getShades(infoName)
-
-    let vars = ''
-    for (const s of SHADES) {
-      vars += `--ui-color-primary-${s}:${primary[s]};`
-    }
-    if (secondary) {
-      for (const s of SHADES) {
-        vars += `--ui-color-secondary-${s}:${secondary[s]};`
-      }
-    }
-    if (info) {
-      for (const s of SHADES) {
-        vars += `--ui-color-info-${s}:${info[s]};`
-      }
-    }
-
-    css += `html[data-theme-colour="${accent}"]{${vars}}`
-  }
-  return css
-}
-
 const accentCSS = buildAccentCSS()
 
 // Blocking init script — restores data-* attributes from localStorage before first paint.

package/layers/theme/server/utils/accent-css.ts

@@ -0,0 +1,75 @@
+import twColors from 'tailwindcss/colors'
+
+type DefaultColors = typeof twColors
+
+const ACCENTS = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const
+
+type AccentName = (typeof ACCENTS)[number]
+
+const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+const ACCENT_PALETTES: Record<AccentName, { secondary: AccentName; info: AccentName }> = {
+  red: { secondary: 'rose', info: 'orange' },
+  orange: { secondary: 'amber', info: 'red' },
+  amber: { secondary: 'orange', info: 'yellow' },
+  yellow: { secondary: 'lime', info: 'amber' },
+  lime: { secondary: 'green', info: 'yellow' },
+  green: { secondary: 'teal', info: 'emerald' },
+  emerald: { secondary: 'green', info: 'teal' },
+  teal: { secondary: 'cyan', info: 'emerald' },
+  cyan: { secondary: 'sky', info: 'teal' },
+  sky: { secondary: 'blue', info: 'cyan' },
+  blue: { secondary: 'indigo', info: 'sky' },
+  indigo: { secondary: 'violet', info: 'blue' },
+  violet: { secondary: 'purple', info: 'indigo' },
+  purple: { secondary: 'fuchsia', info: 'violet' },
+  fuchsia: { secondary: 'pink', info: 'purple' },
+  pink: { secondary: 'rose', info: 'fuchsia' },
+  rose: { secondary: 'pink', info: 'red' },
+}
+
+function resolveAccentShades(name: AccentName): Record<number, string> | null {
+  const palette = (twColors as DefaultColors)[name]
+  return !palette || typeof palette === 'string' ? null : (palette as Record<number, string>)
+}
+
+function buildColourVariables(prefix: string, colours: Record<number, string>) {
+  return SHADES.map((shade) => `--ui-color-${prefix}-${shade}:${colours[shade]};`).join('')
+}
+
+function buildAccentRule(accent: AccentName) {
+  const primary = resolveAccentShades(accent)
+  if (!primary) return ''
+
+  const { secondary: secondaryName, info: infoName } = ACCENT_PALETTES[accent]
+  const secondary = resolveAccentShades(secondaryName)
+  const info = resolveAccentShades(infoName)
+
+  let vars = buildColourVariables('primary', primary)
+  if (secondary) vars += buildColourVariables('secondary', secondary)
+  if (info) vars += buildColourVariables('info', info)
+
+  return `html[data-theme-colour="${accent}"]{${vars}}`
+}
+
+export function buildAccentCSS(): string {
+  return ACCENTS.map(buildAccentRule).join('')
+}

package/layers/typography/app/composables/typography.ts

@@ -24,13 +24,9 @@ function normalizeAxis(
 ) {
   const { prefix = '', fallback = '', numericFormatter } = options
 
-  if (typeof value === 'number') {
-    if (numericFormatter) return numericFormatter(value)
-    if (prefix) return `${prefix}-[${value}]`
-    return `[${value}]`
-  }
-
-  return value ?? fallback
+  return typeof value === 'number'
+    ? numericFormatter?.(value) ?? (prefix ? `${prefix}-[${value}]` : `[${value}]`)
+    : value ?? fallback
 }
 
 function getSizeClass(size: FontSize | undefined): string {

package/layers/visual/app/composables/accent.ts

@@ -2,6 +2,7 @@ import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
 
 import type { BlobBlur, BlobConfig } from '../types/accent'
+import { resolveUiColorToken } from '../utils/colorTokens'
 
 const BLUR_PX_MAP: Record<string, number> = {
   none: 0,
@@ -18,14 +19,6 @@ function resolveBlurPx(blur: BlobBlur = '3xl'): number {
   return BLUR_PX_MAP[blur] ?? 64
 }
 
-function resolveColor(config: BlobConfig): string {
-  const { color = 'primary', shade = 500, customColor } = config
-  if (color === 'custom') return customColor ?? 'transparent'
-  if (color === 'white') return '#ffffff'
-  if (color === 'black') return '#000000'
-  return `var(--ui-color-${color}-${shade})`
-}
-
 export function useAccentBlob(config: MaybeRefOrGetter<BlobConfig>): {
   style: ComputedRef<CSSProperties>
 } {
@@ -42,7 +35,7 @@ export function useAccentBlob(config: MaybeRefOrGetter<BlobConfig>): {
       transform: 'translate(-50%, -50%)',
       width: size,
       height: size,
-      backgroundColor: resolveColor(resolved),
+      backgroundColor: resolveUiColorToken(resolved),
       opacity,
       borderRadius: '9999px',
       filter: blurPx > 0 ? `blur(${blurPx}px)` : undefined,