@konitif/theme 0.284.2

package/src/ambient/SpatialAmbientRuntime.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { StageAmbientProjection } from '@konitif/workbench';
+  import { globalPerceptualFocusStore } from '../focus/perceptualFocusStore';
+  import { normalizeKonitifRuntimePhase, type RuntimePhase } from '../konitifRuntimePhaseTokens';
+  import {
+    createRuntimeSpatialState,
+    interpolateRuntimeSpatialState,
+    type RuntimeSpatialState
+  } from '../runtime/runtimeSpatialReactivity';
+  import SpatialAmbientCanvas from './SpatialAmbientCanvas.svelte';
+  import SpatialAmbientParticles from './SpatialAmbientParticles.svelte';
+  import SpatialProjectionGrid from './SpatialProjectionGrid.svelte';
+  import type { AmbientQuality } from './spatialAmbientTypes';
+  import type { SpatialProjectionGridConfig } from './spatialProjectionGridTypes';
+
+  export let phase: RuntimePhase = 'LAUNCH_GATE';
+  export let quality: AmbientQuality = 'medium';
+  export let reducedMotion = false;
+  export let themeMode: 'dark' | 'light' = 'dark';
+  export let spatialOverrides: Partial<RuntimeSpatialState> | null = null;
+  export let gridConfig: Partial<SpatialProjectionGridConfig> | null = null;
+  export let stageAmbient: StageAmbientProjection | null = null;
+
+  let prefersReducedMotion = false;
+  let isDocumentHidden = false;
+  let reducedMotionQuery: MediaQueryList | null = null;
+  let focusState = globalPerceptualFocusStore.getState();
+  let renderedPhase: RuntimePhase | null = null;
+  let renderedSpatialState: RuntimeSpatialState | null = null;
+  let vectorTransitionTarget: RuntimePhase | null = null;
+  let vectorTransitionFrame: number | null = null;
+  let vectorTransitionStartedAt = 0;
+
+  const phaseVectorFadeDuration = 680;
+
+  $: resolvedPhase = normalizeKonitifRuntimePhase(phase);
+  $: effectiveReducedMotion = reducedMotion || prefersReducedMotion || isDocumentHidden;
+  $: targetSpatialState = {
+    ...createRuntimeSpatialState(resolvedPhase, {
+      quality,
+      reducedMotion: reducedMotion || prefersReducedMotion,
+      hidden: isDocumentHidden
+    }),
+    ...(spatialOverrides ?? {}),
+    phase: resolvedPhase
+  };
+  $: activeSpatialState = renderedSpatialState ?? targetSpatialState;
+  $: ambientStyle = createAmbientStyle(activeSpatialState);
+  $: if (quality !== 'off') {
+    syncRuntimeVector(resolvedPhase, targetSpatialState, effectiveReducedMotion);
+  } else {
+    clearVectorTransition();
+    renderedPhase = null;
+    renderedSpatialState = null;
+    vectorTransitionTarget = null;
+  }
+
+  onMount(() => {
+    const unsubscribeFocus = globalPerceptualFocusStore.subscribe((state) => {
+      focusState = state;
+    });
+
+    if (typeof document !== 'undefined') {
+      isDocumentHidden = document.hidden;
+      const handleVisibilityChange = (): void => {
+        isDocumentHidden = document.hidden;
+      };
+
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+
+      if (typeof window === 'undefined' || !window.matchMedia) {
+        return () => {
+          document.removeEventListener('visibilitychange', handleVisibilityChange);
+          unsubscribeFocus();
+        };
+      }
+
+      reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+      prefersReducedMotion = reducedMotionQuery.matches;
+
+      const handleChange = (event: MediaQueryListEvent): void => {
+        prefersReducedMotion = event.matches;
+      };
+
+      reducedMotionQuery.addEventListener('change', handleChange);
+
+      return () => {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        reducedMotionQuery?.removeEventListener('change', handleChange);
+        unsubscribeFocus();
+      };
+    }
+
+    return unsubscribeFocus;
+  });
+
+  onDestroy(() => {
+    clearVectorTransition();
+    reducedMotionQuery = null;
+  });
+
+  function createAmbientStyle(state: RuntimeSpatialState): string {
+    const focusPoint = stageAmbient?.focusPoint ?? focusState.focusPoint;
+    const focusStrength = stageAmbient
+      ? Math.max(0.2, 1 - stageAmbient.focusDepth * 0.42)
+      : focusState.focusStrength;
+
+    return [
+      `--k-runtime-tint: ${state.tint}`,
+      `--k-runtime-tint-rgb: ${state.tintRgb}`,
+      `--k-runtime-intensity: ${state.lightIntensity}`,
+      `--k-runtime-fog-density: ${state.fogDensity}`,
+      `--k-runtime-particle-density: ${state.particleDensity}`,
+      `--k-runtime-particle-speed: ${state.particleSpeed}`,
+      `--k-runtime-motion-intensity: ${state.motionIntensity}`,
+      `--k-runtime-tilt-strength: ${state.tiltStrength}`,
+      `--k-runtime-focus-falloff: ${state.focusFalloff}`,
+      `--k-runtime-instability: ${state.instability}`,
+      `--k-focus-x: ${focusPoint.x}`,
+      `--k-focus-y: ${focusPoint.y}`,
+      `--k-focus-strength: ${focusStrength}`
+    ].join('; ');
+  }
+
+  function syncRuntimeVector(
+    phaseValue: RuntimePhase,
+    state: RuntimeSpatialState,
+    shouldReduceMotion: boolean
+  ): void {
+    if (typeof window === 'undefined' || shouldReduceMotion || renderedSpatialState === null || renderedPhase === null) {
+      clearVectorTransition();
+      renderedPhase = phaseValue;
+      renderedSpatialState = { ...state };
+      vectorTransitionTarget = null;
+      return;
+    }
+
+    if (phaseValue === renderedPhase) {
+      if (vectorTransitionTarget === null) {
+        renderedSpatialState = { ...state };
+      }
+      return;
+    }
+
+    if (phaseValue === vectorTransitionTarget) {
+      return;
+    }
+
+    startVectorTransition(renderedSpatialState, { ...state }, phaseValue);
+  }
+
+  function startVectorTransition(fromState: RuntimeSpatialState, toState: RuntimeSpatialState, targetPhase: RuntimePhase): void {
+    if (typeof window === 'undefined') {
+      renderedPhase = targetPhase;
+      renderedSpatialState = { ...toState };
+      vectorTransitionTarget = null;
+      return;
+    }
+
+    clearVectorTransition();
+    vectorTransitionTarget = targetPhase;
+    vectorTransitionStartedAt = window.performance.now();
+
+    const step = (now: number): void => {
+      const progress = (now - vectorTransitionStartedAt) / phaseVectorFadeDuration;
+      renderedSpatialState = interpolateRuntimeSpatialState(fromState, toState, progress);
+
+      if (progress < 1) {
+        vectorTransitionFrame = window.requestAnimationFrame(step);
+        return;
+      }
+
+      renderedPhase = targetPhase;
+      renderedSpatialState = { ...toState };
+      vectorTransitionTarget = null;
+      vectorTransitionFrame = null;
+    };
+
+    vectorTransitionFrame = window.requestAnimationFrame(step);
+  }
+
+  function clearVectorTransition(): void {
+    if (typeof window !== 'undefined' && vectorTransitionFrame !== null) {
+      window.cancelAnimationFrame(vectorTransitionFrame);
+    }
+    vectorTransitionFrame = null;
+  }
+</script>
+
+{#if quality !== 'off' && activeSpatialState}
+  <div
+    class="konitif-ambient workbench-theme-ambient"
+    data-workbench-theme-ambient
+    data-workbench-theme-family="konitif"
+    data-quality={quality}
+    data-theme-mode={themeMode}
+    aria-hidden="true"
+  >
+    <div
+      class="konitif-ambient__phase-layer"
+      style={ambientStyle}
+      data-phase={activeSpatialState.phase}
+      data-reduced-motion={effectiveReducedMotion}
+    >
+      <SpatialAmbientCanvas
+        phase={activeSpatialState.phase}
+        {quality}
+        reducedMotion={effectiveReducedMotion}
+        spatialState={activeSpatialState}
+        {themeMode}
+      />
+      <SpatialProjectionGrid
+        phase={activeSpatialState.phase}
+        {quality}
+        reducedMotion={effectiveReducedMotion}
+        config={gridConfig}
+        {themeMode}
+      />
+      <SpatialAmbientParticles
+        phase={activeSpatialState.phase}
+        {quality}
+        reducedMotion={effectiveReducedMotion}
+        spatialState={activeSpatialState}
+        {themeMode}
+      />
+      <div class="konitif-frustum-vignette"></div>
+      <div class="konitif-corner-tilt"></div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .konitif-ambient {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background: var(--k-bg-root);
+  }
+
+  .konitif-ambient__phase-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background:
+      radial-gradient(circle at 50% 35%, rgba(var(--k-runtime-tint-rgb), calc(var(--k-runtime-intensity) * 0.34)), transparent 34%),
+      radial-gradient(circle at 12% 18%, var(--k-frustum-light), transparent 28%),
+      linear-gradient(180deg, var(--k-bg-space, var(--k-bg-root)), var(--k-bg-space-deep, var(--k-bg-root)));
+  }
+
+  .konitif-ambient[data-theme-mode='light'] .konitif-ambient__phase-layer {
+    background:
+      radial-gradient(circle at 68% 16%, var(--k-frustum-light-core), transparent 18%),
+      radial-gradient(circle at 50% 44%, rgba(var(--k-runtime-tint-rgb), calc(var(--k-runtime-intensity) * 0.085)), transparent 30%),
+      radial-gradient(ellipse at 50% 56%, var(--k-frustum-fog), transparent 44%),
+      linear-gradient(135deg, rgba(255, 246, 230, 0.26) 0%, transparent 32%),
+      linear-gradient(315deg, var(--k-frustum-shadow) 0%, transparent 30%),
+      linear-gradient(180deg, var(--k-bg-space), var(--k-bg-space-deep));
+  }
+
+  .konitif-frustum-vignette,
+  .konitif-corner-tilt {
+    position: absolute;
+    inset: 0;
+  }
+
+  .konitif-frustum-vignette {
+    background:
+      radial-gradient(circle at 50% 42%, transparent 0%, transparent 42%, rgba(0, 0, 0, calc(0.18 + var(--k-runtime-fog-density) * 0.18)) 100%),
+      linear-gradient(115deg, transparent 0%, rgba(var(--k-runtime-tint-rgb), 0.035) 48%, transparent 68%);
+    mix-blend-mode: multiply;
+  }
+
+  .konitif-ambient[data-theme-mode='light'] .konitif-frustum-vignette {
+    background:
+      radial-gradient(circle at 50% 42%, transparent 0%, transparent 54%, rgba(110, 135, 165, calc(0.08 + var(--k-runtime-fog-density) * 0.08)) 100%),
+      linear-gradient(35deg, rgba(110, 135, 165, 0.08) 0%, transparent 38%),
+      linear-gradient(120deg, transparent 0%, rgba(var(--k-runtime-tint-rgb), 0.026) 48%, transparent 72%);
+    mix-blend-mode: multiply;
+  }
+
+  .konitif-corner-tilt {
+    inset: -8%;
+    background:
+      linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.035) 48%, transparent 64%),
+      linear-gradient(315deg, transparent 0%, rgba(var(--k-runtime-tint-rgb), 0.045) 52%, transparent 72%);
+    opacity: 0.72;
+  }
+
+  .konitif-ambient[data-theme-mode='light'] .konitif-corner-tilt {
+    background:
+      linear-gradient(135deg, rgba(255, 238, 205, 0.14) 0%, transparent 38%),
+      linear-gradient(315deg, rgba(110, 135, 165, 0.1) 0%, transparent 34%);
+    opacity: 0.58;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .konitif-corner-tilt {
+      animation: none;
+      transform: none;
+    }
+  }
+</style>

package/src/ambient/SpatialProjectionGrid.svelte

@@ -0,0 +1,252 @@
+<script context="module" lang="ts">
+  let spatialProjectionGridInstanceSequence = 0;
+</script>
+
+<script lang="ts">
+  import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+  import type { AmbientQuality } from './spatialAmbientTypes';
+  import {
+    createSpatialProjectionGridGeometry,
+    resolveSpatialProjectionGridConfig
+  } from './spatialProjectionGridModel';
+  import type { SpatialProjectionGridConfig } from './spatialProjectionGridTypes';
+
+  export let config: Partial<SpatialProjectionGridConfig> | null = null;
+  export let phase: RuntimePhase | string = 'LAUNCH_GATE';
+  export let quality: AmbientQuality = 'medium';
+  export let reducedMotion = false;
+  export let animated = true;
+  export let themeMode: 'dark' | 'light' = 'dark';
+
+  const instanceId = `konitif-grid-${++spatialProjectionGridInstanceSequence}`;
+
+  $: resolvedConfig = resolveSpatialProjectionGridConfig({ phase, quality, reducedMotion, config });
+  $: renderConfig = resolveRenderConfig(resolvedConfig, themeMode);
+  $: geometry = createSpatialProjectionGridGeometry(renderConfig);
+  $: shouldRender = quality !== 'off' && renderConfig.enabled;
+  $: shouldAnimate = animated && !reducedMotion && renderConfig.animationSpeed > 0;
+  $: gridStyle = [
+    `--k-space-grid-major-opacity: ${renderConfig.majorLineOpacity}`,
+    `--k-space-grid-minor-opacity: ${renderConfig.minorLineOpacity}`,
+    `--k-space-grid-node-opacity: ${renderConfig.nodeOpacity}`,
+    `--k-space-grid-origin-opacity: ${renderConfig.originNodeOpacity}`,
+    `--k-space-grid-glow: ${renderConfig.glowIntensity}`,
+    `--k-space-grid-fog-opacity: ${renderConfig.fogIntensity}`,
+    `--k-space-grid-drift-duration: ${Math.max(18, 54 - renderConfig.animationSpeed * 34)}s`
+  ].join('; ');
+
+  function resolveRenderConfig(
+    currentConfig: SpatialProjectionGridConfig,
+    mode: 'dark' | 'light'
+  ): SpatialProjectionGridConfig {
+    if (mode !== 'light') {
+      return currentConfig;
+    }
+
+    return {
+      ...currentConfig,
+      majorLineOpacity: clamp01(currentConfig.majorLineOpacity * 1.14 + 0.025),
+      minorLineOpacity: clamp01(currentConfig.minorLineOpacity * 0.56),
+      nodeOpacity: clamp01(currentConfig.nodeOpacity * 1.08),
+      originNodeOpacity: clamp01(currentConfig.originNodeOpacity * 1.12),
+      glowIntensity: clamp01(currentConfig.glowIntensity * 0.58),
+      fogIntensity: clamp01(currentConfig.fogIntensity * 0.72),
+      animationSpeed: clamp01(currentConfig.animationSpeed * 0.72)
+    };
+  }
+
+  function clamp01(value: number): number {
+    return Math.min(1, Math.max(0, value));
+  }
+</script>
+
+{#if shouldRender}
+  <div
+    class:spatial-grid--animated={shouldAnimate}
+    class="spatial-grid"
+    data-quality={quality}
+    data-phase={phase}
+    data-theme-mode={themeMode}
+    style={gridStyle}
+    aria-hidden="true"
+  >
+    <div class="spatial-grid__fog"></div>
+    <svg
+      class="spatial-grid__svg"
+      viewBox={`0 0 ${geometry.width} ${geometry.height}`}
+      preserveAspectRatio="none"
+      focusable="false"
+      role="presentation"
+    >
+      <defs>
+        <filter id={`${instanceId}-node-glow`} x="-160%" y="-160%" width="420%" height="420%">
+          <feGaussianBlur stdDeviation="4" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        <linearGradient id={`${instanceId}-depth-fade`} x1="0" x2="0" y1="1" y2="0">
+          <stop offset="0%" stop-color="white" stop-opacity="1" />
+          <stop offset="54%" stop-color="white" stop-opacity="0.52" />
+          <stop offset="100%" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <radialGradient id={`${instanceId}-lateral-fade`} cx="50%" cy="76%" r="72%">
+          <stop offset="0%" stop-color="white" stop-opacity="1" />
+          <stop offset="58%" stop-color="white" stop-opacity="0.74" />
+          <stop offset="100%" stop-color="white" stop-opacity="0" />
+        </radialGradient>
+        <mask id={`${instanceId}-mask`}>
+          <rect width={geometry.width} height={geometry.height} fill={`url(#${instanceId}-depth-fade)`} />
+          <rect width={geometry.width} height={geometry.height} fill={`url(#${instanceId}-lateral-fade)`} opacity="0.82" />
+        </mask>
+      </defs>
+
+      <g class="spatial-grid__layer" mask={`url(#${instanceId}-mask)`}>
+        {#each geometry.lines as line (line.id)}
+          <line
+            class={`spatial-grid__line spatial-grid__line--${line.kind}`}
+            x1={line.x1}
+            y1={line.y1}
+            x2={line.x2}
+            y2={line.y2}
+            opacity={line.opacity}
+          />
+        {/each}
+
+        {#each geometry.nodes as node (node.id)}
+          <circle
+            class:spatial-grid__node--origin={node.origin}
+            class="spatial-grid__node"
+            cx={node.x}
+            cy={node.y}
+            r={node.radius}
+            opacity={node.opacity}
+            filter={`url(#${instanceId}-node-glow)`}
+          />
+        {/each}
+      </g>
+    </svg>
+  </div>
+{/if}
+
+<style>
+  .spatial-grid {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    opacity: var(--k-space-grid-opacity, 0.92);
+    filter: blur(var(--k-space-grid-blur, 0px));
+  }
+
+  .spatial-grid::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .spatial-grid__fog,
+  .spatial-grid__svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .spatial-grid__fog {
+    background:
+      radial-gradient(ellipse at 50% 45%, var(--k-space-grid-horizon), transparent 28%),
+      radial-gradient(ellipse at 50% 72%, var(--k-space-grid-fog), transparent 44%);
+    opacity: var(--k-space-grid-fog-opacity, 0.32);
+  }
+
+  .spatial-grid[data-theme-mode='light'] .spatial-grid__fog {
+    background:
+      radial-gradient(ellipse at 72% 18%, rgba(255, 238, 205, 0.2), transparent 24%),
+      radial-gradient(ellipse at 50% 48%, var(--k-space-grid-horizon), transparent 28%),
+      radial-gradient(ellipse at 50% 72%, var(--k-space-grid-fog), transparent 48%);
+  }
+
+  .spatial-grid__svg {
+    overflow: visible;
+  }
+
+  .spatial-grid__layer {
+    transform-origin: 50% 82%;
+  }
+
+  .spatial-grid--animated .spatial-grid__layer {
+    animation: konitif-grid-drift var(--k-space-grid-drift-duration, 42s) ease-in-out infinite alternate;
+  }
+
+  .spatial-grid__line {
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+    mix-blend-mode: screen;
+  }
+
+  .spatial-grid[data-theme-mode='light'] .spatial-grid__line {
+    mix-blend-mode: multiply;
+  }
+
+  .spatial-grid__line--axis {
+    stroke: var(--k-space-grid-axis);
+    stroke-width: 1.25;
+  }
+
+  .spatial-grid__line--major {
+    stroke: var(--k-space-grid-major);
+    stroke-width: 0.9;
+  }
+
+  .spatial-grid__line--minor {
+    stroke: var(--k-space-grid-minor);
+    stroke-width: 0.56;
+  }
+
+  .spatial-grid__line--tertiary {
+    stroke: var(--k-space-grid-tertiary);
+    stroke-width: 0.42;
+  }
+
+  .spatial-grid__node {
+    fill: var(--k-space-grid-node);
+    mix-blend-mode: screen;
+  }
+
+  .spatial-grid[data-theme-mode='light'] .spatial-grid__node {
+    mix-blend-mode: normal;
+  }
+
+  .spatial-grid__node--origin {
+    fill: var(--k-space-grid-origin);
+  }
+
+  .spatial-grid[data-theme-mode='light']::after {
+    background:
+      radial-gradient(circle at 50% 82%, rgba(75, 135, 190, 0.08), transparent 22%),
+      linear-gradient(35deg, rgba(110, 135, 165, 0.12) 0%, transparent 34%),
+      linear-gradient(160deg, rgba(255, 238, 205, 0.12) 0%, transparent 28%);
+    mix-blend-mode: multiply;
+    opacity: 1;
+  }
+
+  @keyframes konitif-grid-drift {
+    from {
+      transform: translate3d(0, 3px, 0);
+    }
+
+    to {
+      transform: translate3d(0, -5px, 0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spatial-grid--animated .spatial-grid__layer {
+      animation: none;
+    }
+  }
+</style>

package/src/ambient/shaders/noise.glsl

@@ -0,0 +1 @@
+float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453123);}float noise(vec2 p){vec2 i=floor(p),f=fract(p);float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.));vec2 u=f*f*(3.-2.*f);return mix(a,b,u.x)+(c-a)*u.y*(1.-u.x)+(d-b)*u.x*u.y;}

package/src/ambient/shaders/particleField.glsl

@@ -0,0 +1 @@
+float particleField(vec2 uv,float time){float v=0.0;for(int i=0;i<8;i++){vec2 p=fract(uv*float(i+3)+time*.01*float(i+1));v+=smoothstep(.995,1.0,1.0-length(p-.5));}return v;}

package/src/ambient/shaders/spatialAmbient.frag.glsl

@@ -0,0 +1 @@
+precision mediump float;varying vec2 vUv;uniform float uTime;uniform vec3 uFogColor;uniform vec3 uLightColor;uniform float uIntensity;#include "noise.glsl" void main(){vec2 p=vUv-.5;float r=length(p);float beam=smoothstep(.42,0.,abs(p.x))*smoothstep(.55,.05,p.y+.15);float n=noise(vUv*8.+uTime*.03);vec3 col=mix(uFogColor,uLightColor,beam*.55+n*.08)*uIntensity*(1.-r*.8);gl_FragColor=vec4(col,max(0.,.42-r*.55));}

package/src/ambient/shaders/spatialAmbient.vert.glsl

@@ -0,0 +1 @@
+attribute vec2 position;varying vec2 vUv;void main(){vUv=position*.5+.5;gl_Position=vec4(position,0.,1.);}

package/src/ambient/shaders/volumetricFog.glsl

@@ -0,0 +1 @@
+float volumetricFog(vec2 uv,float depth){float center=1.0-length(uv-0.5);return smoothstep(0.0,1.0,center)*depth;}

package/src/ambient/spatialAmbientStore.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+import type { SpatialAmbientConfig } from './spatialAmbientTypes';
+export const spatialAmbientStore=writable<SpatialAmbientConfig>({phase:'LAUNCH_GATE',quality:'medium',reducedMotion:false,focusX:.5,focusY:.42});

package/src/ambient/spatialAmbientTypes.ts

@@ -0,0 +1,11 @@
+import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+
+export type AmbientQuality = 'off' | 'low' | 'medium' | 'high';
+
+export type SpatialAmbientConfig = {
+  phase: RuntimePhase;
+  quality: AmbientQuality;
+  reducedMotion: boolean;
+  focusX: number;
+  focusY: number;
+};