@konitif/theme 0.284.2

package/src/konitifTokens.css

@@ -0,0 +1,201 @@
+:root,
+[data-theme='konitif-dark'] {
+  color-scheme: dark;
+
+  --color-background-canvas: #02050a;
+  --color-background-surface: rgba(8, 17, 31, 0.86);
+  --color-background-elevated: rgba(10, 22, 40, 0.92);
+  --color-background-accent: rgba(14, 34, 58, 0.92);
+  --color-background-muted: rgba(6, 13, 24, 0.86);
+  --color-background-empty-panel: rgba(5, 12, 22, 0.8);
+  --color-background-empty-panel-stripe: rgba(34, 211, 238, 0.045);
+  --color-background-hover: rgba(20, 44, 70, 0.9);
+  --color-background-pressed: rgba(25, 58, 88, 0.92);
+  --color-background-selected: rgba(17, 45, 74, 0.9);
+  --color-background-danger: rgba(56, 18, 27, 0.82);
+  --color-background-danger-hover: rgba(74, 24, 35, 0.9);
+  --color-background-overlay: rgba(2, 5, 10, 0.72);
+  --color-background-glow: rgba(34, 211, 238, 0.13);
+
+  --color-border-subtle: rgba(148, 178, 255, 0.18);
+  --color-border-strong: rgba(148, 178, 255, 0.34);
+  --color-border-focus: #22d3ee;
+  --color-border-danger: rgba(239, 68, 68, 0.58);
+  --color-border-edge-split: rgba(96, 165, 250, 0.56);
+  --color-border-edge-split-hover: rgba(34, 211, 238, 0.78);
+
+  --color-text-primary: #f4f8ff;
+  --color-text-secondary: #9db3cc;
+  --color-text-muted: #60758c;
+  --color-text-danger: #ff9aa8;
+
+  --color-status-success: #4ade80;
+  --color-status-warning: #f59e0b;
+  --color-status-danger: #ef4444;
+
+  --color-action-primary: #22d3ee;
+  --color-action-primary-hover: #67e8f9;
+  --color-action-secondary: rgba(10, 22, 40, 0.8);
+  --color-action-secondary-hover: rgba(16, 36, 62, 0.92);
+  --color-action-danger: rgba(127, 29, 44, 0.58);
+  --color-action-danger-hover: rgba(159, 35, 52, 0.68);
+
+  --shadow-surface: 0 24px 80px rgba(0, 0, 0, 0.28);
+  --shadow-focus: 0 0 0 1px var(--color-border-focus), 0 0 28px rgba(34, 211, 238, 0.18);
+}
+
+:root[data-theme='konitif-light'],
+[data-theme='konitif-light'] {
+  color-scheme: light;
+
+  --color-background-canvas: #f6f8fc;
+  --color-background-surface: rgba(255, 255, 255, 0.68);
+  --color-background-elevated: rgba(255, 255, 255, 0.84);
+  --color-background-accent: rgba(231, 237, 244, 0.86);
+  --color-background-muted: rgba(238, 242, 247, 0.88);
+  --color-background-empty-panel: rgba(239, 245, 252, 0.86);
+  --color-background-empty-panel-stripe: rgba(56, 189, 248, 0.06);
+  --color-background-hover: rgba(230, 239, 250, 0.94);
+  --color-background-pressed: rgba(216, 229, 245, 0.96);
+  --color-background-selected: rgba(220, 237, 255, 0.96);
+  --color-background-danger: rgba(255, 239, 242, 0.9);
+  --color-background-danger-hover: rgba(255, 225, 231, 0.96);
+  --color-background-overlay: rgba(28, 36, 50, 0.32);
+  --color-background-glow: rgba(56, 189, 248, 0.15);
+
+  --color-border-subtle: rgba(110, 140, 180, 0.18);
+  --color-border-strong: rgba(90, 125, 170, 0.28);
+  --color-border-focus: #2f8fd6;
+  --color-border-danger: rgba(239, 68, 68, 0.48);
+  --color-border-edge-split: rgba(99, 102, 241, 0.42);
+  --color-border-edge-split-hover: rgba(56, 189, 248, 0.65);
+
+  --color-text-primary: #1b3048;
+  --color-text-secondary: #4d6480;
+  --color-text-muted: #7b8fa8;
+  --color-text-danger: #b4233b;
+
+  --color-status-success: #34a875;
+  --color-status-warning: #d89125;
+  --color-status-danger: #d9534f;
+
+  --color-action-primary: #2f8fd6;
+  --color-action-primary-hover: #257bc0;
+  --color-action-secondary: rgba(255, 255, 255, 0.72);
+  --color-action-secondary-hover: rgba(236, 244, 255, 0.92);
+  --color-action-danger: rgba(255, 226, 231, 0.82);
+  --color-action-danger-hover: rgba(255, 210, 219, 0.9);
+
+  --shadow-surface: 0 22px 70px rgba(50, 68, 98, 0.16);
+  --shadow-focus: 0 0 0 1px var(--color-border-focus), 0 0 24px rgba(56, 189, 248, 0.18);
+}
+
+:root,
+[data-theme='konitif-dark'],
+[data-workbench-color-mode='dark'] {
+  --k-bg-root: var(--color-background-canvas, #02050a);
+  --k-bg-space: #06121f;
+  --k-bg-space-deep: #02060d;
+  --k-bg-surface: color-mix(in srgb, var(--color-background-surface, #08111f) 78%, transparent);
+  --k-bg-surface-strong: color-mix(in srgb, var(--color-background-elevated, #0a1628) 90%, transparent);
+  --k-text-primary: var(--color-text-primary, #f4f8ff);
+  --k-text-secondary: var(--color-text-secondary, #9db3cc);
+  --k-text-muted: var(--color-text-muted, #60758c);
+  --k-accent-primary: var(--color-action-primary, #22d3ee);
+  --k-accent-secondary: #60a5fa;
+  --k-accent-success: var(--color-status-success, #4ade80);
+  --k-accent-warning: var(--color-status-warning, #f59e0b);
+  --k-accent-error: var(--color-status-danger, #ef4444);
+  --k-accent-hydration: #a855f7;
+  --k-entity-application: #69ecc1;
+  --k-entity-application-rgb: 105, 236, 193;
+  --k-entity-repository: #b084ff;
+  --k-entity-repository-rgb: 176, 132, 255;
+  --k-border-soft: color-mix(in srgb, var(--color-border-subtle, #94b2ff) 64%, transparent);
+  --k-border-strong: color-mix(in srgb, var(--color-border-strong, #94b2ff) 74%, transparent);
+  --k-glow-primary: rgba(34, 211, 238, 0.32);
+  --k-glow-success: rgba(74, 222, 128, 0.28);
+  --k-glow-error: rgba(239, 68, 68, 0.32);
+  --k-frustum-fog: rgba(20, 80, 120, 0.18);
+  --k-frustum-light: rgba(34, 211, 238, 0.22);
+  --k-frustum-light-core: rgba(150, 245, 255, 0.36);
+  --k-frustum-shadow: rgba(0, 0, 0, 0.22);
+  --k-particle-color: rgba(170, 220, 255, 0.72);
+  --k-particle-glow: rgba(34, 211, 238, 0.22);
+  --k-space-grid-major: rgba(45, 230, 210, 0.74);
+  --k-space-grid-minor: rgba(45, 230, 210, 0.32);
+  --k-space-grid-tertiary: rgba(45, 230, 210, 0.16);
+  --k-space-grid-node: rgba(158, 255, 239, 0.9);
+  --k-space-grid-origin: rgba(236, 255, 255, 0.96);
+  --k-space-grid-horizon: rgba(36, 220, 160, 0.22);
+  --k-space-grid-fog: rgba(20, 180, 150, 0.12);
+  --k-space-grid-axis: rgba(103, 255, 232, 0.86);
+  --k-space-grid-opacity: 0.92;
+  --k-space-grid-blur: 0px;
+  --k-runtime-tint: var(--k-accent-primary);
+  --k-runtime-tint-rgb: 34, 211, 238;
+  --k-runtime-intensity: 0.5;
+}
+
+:root[data-theme='light'],
+[data-theme='konitif-light'],
+[data-workbench-color-mode='light'] {
+  --k-bg-root: #eef2f7;
+  --k-bg-space: #e7edf4;
+  --k-bg-space-deep: #dbe6f0;
+  --k-bg-surface: rgba(255, 255, 255, 0.68);
+  --k-bg-surface-strong: rgba(255, 255, 255, 0.84);
+  --k-text-primary: #1b3048;
+  --k-text-secondary: #4d6480;
+  --k-text-muted: #7b8fa8;
+  --k-accent-primary: #2f8fd6;
+  --k-accent-secondary: #6b7fe8;
+  --k-accent-success: #34a875;
+  --k-accent-warning: #d89125;
+  --k-accent-error: #d9534f;
+  --k-accent-hydration: #9275d8;
+  --k-entity-application: #0f9f86;
+  --k-entity-application-rgb: 15, 159, 134;
+  --k-entity-repository: #8b5cf6;
+  --k-entity-repository-rgb: 139, 92, 246;
+  --k-border-soft: rgba(110, 140, 180, 0.18);
+  --k-border-strong: rgba(90, 125, 170, 0.28);
+  --k-glow-primary: rgba(47, 143, 214, 0.2);
+  --k-glow-success: rgba(52, 168, 117, 0.18);
+  --k-glow-error: rgba(217, 83, 79, 0.18);
+  --k-frustum-light: rgba(255, 238, 205, 0.38);
+  --k-frustum-light-core: rgba(255, 246, 230, 0.72);
+  --k-frustum-fog: rgba(190, 220, 255, 0.14);
+  --k-frustum-shadow: rgba(110, 135, 165, 0.12);
+  --k-particle-color: rgba(90, 130, 175, 0.34);
+  --k-particle-glow: rgba(255, 228, 185, 0.26);
+  --k-space-grid-major: rgba(105, 145, 190, 0.22);
+  --k-space-grid-minor: rgba(105, 145, 190, 0.075);
+  --k-space-grid-tertiary: rgba(105, 145, 190, 0.04);
+  --k-space-grid-node: rgba(90, 145, 195, 0.34);
+  --k-space-grid-origin: rgba(75, 135, 190, 0.48);
+  --k-space-grid-axis: rgba(80, 140, 190, 0.2);
+  --k-space-grid-horizon: rgba(160, 190, 220, 0.1);
+  --k-space-grid-fog: rgba(200, 220, 240, 0.18);
+  --k-space-grid-opacity: 0.76;
+  --k-space-grid-blur: 0px;
+}
+
+.konitif-theme-root {
+  min-height: 100dvh;
+  background: var(--k-bg-root);
+  color: var(--k-text-primary);
+  transition:
+    background-color 700ms ease,
+    color 700ms ease;
+}
+
+.konitif-glass-panel {
+  border: 1px solid var(--k-border-soft);
+  background: var(--k-bg-surface);
+  color: var(--k-text-primary);
+  backdrop-filter: blur(18px) saturate(1.22);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}

package/src/konitifWorkbenchThemeRuntime.ts

@@ -0,0 +1,35 @@
+import type { ComponentType, SvelteComponent } from 'svelte';
+import SpatialAmbientRuntime from './ambient/SpatialAmbientRuntime.svelte';
+import FocusPlaneProvider from './focus/FocusPlaneProvider.svelte';
+import PerceptualSurface from './focus/PerceptualSurface.svelte';
+import { applyKonitifTheme } from './konitifThemeAdapter';
+import type { KonitifThemeMode } from './konitifTheme';
+
+export type KonitifWorkbenchThemeColorMode = 'dark' | 'light';
+export type KonitifWorkbenchThemeComponent = ComponentType<SvelteComponent>;
+
+export interface KonitifWorkbenchThemeRuntime {
+  themeFamily: string;
+  AmbientRuntime: KonitifWorkbenchThemeComponent;
+  FocusPlaneProvider: KonitifWorkbenchThemeComponent;
+  SurfaceFrame: KonitifWorkbenchThemeComponent;
+  applyTheme: (themeId: string, colorMode: KonitifWorkbenchThemeColorMode) => void;
+  resolveThemeModeId: (colorMode: KonitifWorkbenchThemeColorMode) => string;
+}
+
+export const konitifWorkbenchThemeRuntime: KonitifWorkbenchThemeRuntime = {
+  themeFamily: 'konitif',
+  AmbientRuntime: SpatialAmbientRuntime,
+  FocusPlaneProvider,
+  SurfaceFrame: PerceptualSurface,
+  applyTheme: (themeId) => applyKonitifTheme(resolveKonitifThemeMode(themeId)),
+  resolveThemeModeId: resolveKonitifWorkbenchThemeModeId
+};
+
+export function resolveKonitifWorkbenchThemeModeId(colorMode: KonitifWorkbenchThemeColorMode): KonitifThemeMode {
+  return colorMode === 'light' ? 'konitif-light' : 'konitif-dark';
+}
+
+function resolveKonitifThemeMode(themeId: string): KonitifThemeMode {
+  return themeId === 'konitif-light' ? 'konitif-light' : 'konitif-dark';
+}

package/src/runtime/RuntimePhaseTintProvider.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { normalizeKonitifRuntimePhase, type RuntimePhase } from '../konitifRuntimePhaseTokens';
+  import { resolveRuntimePhaseVisual } from './runtimePhaseVisualMap';
+
+  export let phase: RuntimePhase = 'LAUNCH_GATE';
+
+  $: visual = resolveRuntimePhaseVisual(normalizeKonitifRuntimePhase(phase));
+</script>
+
+<div
+  class="phase-tint"
+  style={`--phase-tint:${visual.tint}; --phase-tint-rgb:${visual.tintRgb}; --phase-intensity:${visual.intensity}`}
+>
+  <slot />
+</div>
+
+<style>
+  .phase-tint {
+    --phase-tint: var(--k-accent-primary);
+    --phase-tint-rgb: 34, 211, 238;
+    --phase-intensity: 0.5;
+  }
+
+  .phase-tint :global(.phase-aware) {
+    border-color: var(--k-border-soft);
+    box-shadow: 0 0 calc(24px * var(--phase-intensity)) rgba(var(--phase-tint-rgb), 0.18);
+  }
+</style>

package/src/runtime/runtimePhaseIconMap.ts

@@ -0,0 +1 @@
+export const runtimePhaseIconMap={BOOT:'power',LAUNCH_GATE:'door-open',CONTEXT_RESOLVED:'folder-search',PREFLIGHT:'clipboard-check',PLANNED:'table',INITIALIZING:'settings',HYDRATING:'droplet',RUNNING:'play',SUSPENDING:'pause',SUSPENDED:'square',RESUMING:'fast-forward',TEARING_DOWN:'trash',RECOVERING:'refresh-cw',SAFE_MODE:'shield'} as const;

package/src/runtime/runtimePhaseVisualMap.ts

@@ -0,0 +1,37 @@
+import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+import { createRuntimeSpatialState } from './runtimeSpatialReactivity';
+
+export type RuntimePhaseVisual = {
+  tint: string;
+  tintRgb: string;
+  intensity: number;
+};
+
+export const runtimePhaseVisualMap = {
+  BOOT: { tint: 'var(--k-accent-secondary)', tintRgb: '96, 165, 250', intensity: 0.35 },
+  LAUNCH_GATE: { tint: 'var(--k-accent-primary)', tintRgb: '34, 211, 238', intensity: 0.42 },
+  CONTEXT_RESOLVED: { tint: 'var(--k-accent-primary)', tintRgb: '34, 211, 238', intensity: 0.4 },
+  PREFLIGHT: { tint: 'var(--k-accent-success)', tintRgb: '74, 222, 128', intensity: 0.48 },
+  PLANNED: { tint: 'var(--k-accent-success)', tintRgb: '74, 222, 128', intensity: 0.44 },
+  INITIALIZING: { tint: 'var(--k-accent-secondary)', tintRgb: '96, 165, 250', intensity: 0.58 },
+  HYDRATING: { tint: 'var(--k-accent-hydration)', tintRgb: '168, 85, 247', intensity: 0.5 },
+  RUNNING: { tint: 'var(--k-accent-primary)', tintRgb: '34, 211, 238', intensity: 0.62 },
+  SUSPENDING: { tint: 'var(--k-accent-warning)', tintRgb: '245, 158, 11', intensity: 0.36 },
+  SUSPENDED: { tint: 'var(--k-accent-warning)', tintRgb: '245, 158, 11', intensity: 0.26 },
+  RESUMING: { tint: 'var(--k-accent-primary)', tintRgb: '34, 211, 238', intensity: 0.5 },
+  TEARDOWN: { tint: 'var(--k-accent-warning)', tintRgb: '245, 158, 11', intensity: 0.32 },
+  TEARING_DOWN: { tint: 'var(--k-accent-warning)', tintRgb: '245, 158, 11', intensity: 0.32 },
+  RECOVERY: { tint: 'var(--k-accent-error)', tintRgb: '239, 68, 68', intensity: 0.6 },
+  RECOVERING: { tint: 'var(--k-accent-error)', tintRgb: '239, 68, 68', intensity: 0.6 },
+  SAFE_MODE: { tint: 'var(--k-accent-error)', tintRgb: '239, 68, 68', intensity: 0.28 }
+} satisfies Record<RuntimePhase, RuntimePhaseVisual>;
+
+export function resolveRuntimePhaseVisual(phase: RuntimePhase | string | null | undefined): RuntimePhaseVisual {
+  const spatialState = createRuntimeSpatialState(phase);
+
+  return {
+    tint: spatialState.tint,
+    tintRgb: spatialState.tintRgb,
+    intensity: spatialState.lightIntensity
+  };
+}

package/src/runtime/runtimeSpatialReactivity.ts

@@ -0,0 +1,307 @@
+import { normalizeKonitifRuntimePhase, type RuntimePhase } from '../konitifRuntimePhaseTokens';
+import type { AmbientQuality } from '../ambient/spatialAmbientTypes';
+
+export type RuntimeSpatialState = {
+  phase: RuntimePhase;
+  tint: string;
+  tintRgb: string;
+  fogDensity: number;
+  particleDensity: number;
+  particleSpeed: number;
+  lightIntensity: number;
+  motionIntensity: number;
+  tiltStrength: number;
+  focusFalloff: number;
+  instability: number;
+};
+
+export type RuntimeSpatialStateOptions = {
+  quality?: AmbientQuality;
+  reducedMotion?: boolean;
+  hidden?: boolean;
+};
+
+const baseSpatialState = {
+  BOOT: {
+    tint: 'var(--k-accent-secondary)',
+    tintRgb: '96, 165, 250',
+    fogDensity: 0.18,
+    particleDensity: 0.24,
+    particleSpeed: 0.18,
+    lightIntensity: 0.28,
+    motionIntensity: 0.16,
+    tiltStrength: 0.08,
+    focusFalloff: 0.52,
+    instability: 0.06
+  },
+  LAUNCH_GATE: {
+    tint: 'var(--k-accent-primary)',
+    tintRgb: '34, 211, 238',
+    fogDensity: 0.24,
+    particleDensity: 0.34,
+    particleSpeed: 0.22,
+    lightIntensity: 0.38,
+    motionIntensity: 0.2,
+    tiltStrength: 0.1,
+    focusFalloff: 0.56,
+    instability: 0.04
+  },
+  CONTEXT_RESOLVED: {
+    tint: 'var(--k-accent-primary)',
+    tintRgb: '34, 211, 238',
+    fogDensity: 0.24,
+    particleDensity: 0.36,
+    particleSpeed: 0.24,
+    lightIntensity: 0.4,
+    motionIntensity: 0.22,
+    tiltStrength: 0.1,
+    focusFalloff: 0.56,
+    instability: 0.04
+  },
+  PREFLIGHT: {
+    tint: 'var(--k-accent-success)',
+    tintRgb: '74, 222, 128',
+    fogDensity: 0.28,
+    particleDensity: 0.42,
+    particleSpeed: 0.28,
+    lightIntensity: 0.44,
+    motionIntensity: 0.28,
+    tiltStrength: 0.12,
+    focusFalloff: 0.62,
+    instability: 0.05
+  },
+  PLANNED: {
+    tint: 'var(--k-accent-success)',
+    tintRgb: '74, 222, 128',
+    fogDensity: 0.22,
+    particleDensity: 0.36,
+    particleSpeed: 0.24,
+    lightIntensity: 0.46,
+    motionIntensity: 0.22,
+    tiltStrength: 0.1,
+    focusFalloff: 0.66,
+    instability: 0.03
+  },
+  INITIALIZING: {
+    tint: 'var(--k-accent-secondary)',
+    tintRgb: '96, 165, 250',
+    fogDensity: 0.34,
+    particleDensity: 0.62,
+    particleSpeed: 0.54,
+    lightIntensity: 0.58,
+    motionIntensity: 0.56,
+    tiltStrength: 0.16,
+    focusFalloff: 0.6,
+    instability: 0.16
+  },
+  HYDRATING: {
+    tint: 'var(--k-accent-hydration)',
+    tintRgb: '168, 85, 247',
+    fogDensity: 0.42,
+    particleDensity: 0.54,
+    particleSpeed: 0.36,
+    lightIntensity: 0.52,
+    motionIntensity: 0.34,
+    tiltStrength: 0.18,
+    focusFalloff: 0.7,
+    instability: 0.12
+  },
+  RUNNING: {
+    tint: 'var(--k-accent-primary)',
+    tintRgb: '34, 211, 238',
+    fogDensity: 0.3,
+    particleDensity: 0.46,
+    particleSpeed: 0.3,
+    lightIntensity: 0.62,
+    motionIntensity: 0.32,
+    tiltStrength: 0.14,
+    focusFalloff: 0.68,
+    instability: 0.04
+  },
+  SUSPENDING: {
+    tint: 'var(--k-accent-warning)',
+    tintRgb: '245, 158, 11',
+    fogDensity: 0.34,
+    particleDensity: 0.3,
+    particleSpeed: 0.14,
+    lightIntensity: 0.32,
+    motionIntensity: 0.12,
+    tiltStrength: 0.08,
+    focusFalloff: 0.48,
+    instability: 0.08
+  },
+  SUSPENDED: {
+    tint: 'var(--k-accent-warning)',
+    tintRgb: '245, 158, 11',
+    fogDensity: 0.38,
+    particleDensity: 0.12,
+    particleSpeed: 0.04,
+    lightIntensity: 0.2,
+    motionIntensity: 0.04,
+    tiltStrength: 0.03,
+    focusFalloff: 0.38,
+    instability: 0.02
+  },
+  RESUMING: {
+    tint: 'var(--k-accent-primary)',
+    tintRgb: '34, 211, 238',
+    fogDensity: 0.32,
+    particleDensity: 0.48,
+    particleSpeed: 0.42,
+    lightIntensity: 0.5,
+    motionIntensity: 0.44,
+    tiltStrength: 0.14,
+    focusFalloff: 0.58,
+    instability: 0.1
+  },
+  TEARDOWN: {
+    tint: 'var(--k-accent-warning)',
+    tintRgb: '245, 158, 11',
+    fogDensity: 0.32,
+    particleDensity: 0.26,
+    particleSpeed: 0.16,
+    lightIntensity: 0.28,
+    motionIntensity: 0.12,
+    tiltStrength: 0.08,
+    focusFalloff: 0.46,
+    instability: 0.1
+  },
+  TEARING_DOWN: {
+    tint: 'var(--k-accent-warning)',
+    tintRgb: '245, 158, 11',
+    fogDensity: 0.32,
+    particleDensity: 0.26,
+    particleSpeed: 0.16,
+    lightIntensity: 0.28,
+    motionIntensity: 0.12,
+    tiltStrength: 0.08,
+    focusFalloff: 0.46,
+    instability: 0.1
+  },
+  RECOVERY: {
+    tint: 'var(--k-accent-error)',
+    tintRgb: '239, 68, 68',
+    fogDensity: 0.44,
+    particleDensity: 0.46,
+    particleSpeed: 0.38,
+    lightIntensity: 0.52,
+    motionIntensity: 0.36,
+    tiltStrength: 0.2,
+    focusFalloff: 0.5,
+    instability: 0.34
+  },
+  RECOVERING: {
+    tint: 'var(--k-accent-error)',
+    tintRgb: '239, 68, 68',
+    fogDensity: 0.44,
+    particleDensity: 0.46,
+    particleSpeed: 0.38,
+    lightIntensity: 0.52,
+    motionIntensity: 0.36,
+    tiltStrength: 0.2,
+    focusFalloff: 0.5,
+    instability: 0.34
+  },
+  SAFE_MODE: {
+    tint: 'var(--k-accent-error)',
+    tintRgb: '239, 68, 68',
+    fogDensity: 0.12,
+    particleDensity: 0.08,
+    particleSpeed: 0.02,
+    lightIntensity: 0.18,
+    motionIntensity: 0.02,
+    tiltStrength: 0.02,
+    focusFalloff: 0.34,
+    instability: 0.04
+  }
+} satisfies Record<RuntimePhase, Omit<RuntimeSpatialState, 'phase'>>;
+
+const qualityDensityFactor: Record<AmbientQuality, number> = {
+  off: 0,
+  low: 0.46,
+  medium: 1,
+  high: 1.34
+};
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));
+}
+
+function lerp(from: number, to: number, progress: number): number {
+  return from + (to - from) * progress;
+}
+
+function smoothStep(progress: number): number {
+  const clamped = clamp01(progress);
+  return clamped * clamped * (3 - 2 * clamped);
+}
+
+function parseTintRgb(value: string): [number, number, number] {
+  const channels = value.split(',').map((channel) => Number.parseFloat(channel.trim()));
+  return [
+    Number.isFinite(channels[0]) ? channels[0] : 34,
+    Number.isFinite(channels[1]) ? channels[1] : 211,
+    Number.isFinite(channels[2]) ? channels[2] : 238
+  ];
+}
+
+function formatTintRgb(channels: [number, number, number]): string {
+  return channels.map((channel) => String(Math.round(Math.min(255, Math.max(0, channel))))).join(', ');
+}
+
+export function createRuntimeSpatialState(
+  phase: RuntimePhase | string | null | undefined,
+  options: RuntimeSpatialStateOptions = {}
+): RuntimeSpatialState {
+  const resolvedPhase = normalizeKonitifRuntimePhase(phase);
+  const quality = options.quality ?? 'medium';
+  const base = baseSpatialState[resolvedPhase] ?? baseSpatialState.LAUNCH_GATE;
+  const densityFactor = qualityDensityFactor[quality];
+  const motionFactor = options.reducedMotion || options.hidden ? 0.08 : quality === 'low' ? 0.58 : quality === 'high' ? 1.12 : 1;
+
+  return {
+    phase: resolvedPhase,
+    tint: base.tint,
+    tintRgb: base.tintRgb,
+    fogDensity: clamp01(base.fogDensity * (quality === 'off' ? 0.18 : quality === 'low' ? 0.7 : quality === 'high' ? 1.12 : 1)),
+    particleDensity: clamp01(base.particleDensity * densityFactor),
+    particleSpeed: clamp01(base.particleSpeed * motionFactor),
+    lightIntensity: clamp01(base.lightIntensity * (quality === 'off' ? 0.3 : quality === 'low' ? 0.78 : quality === 'high' ? 1.08 : 1)),
+    motionIntensity: clamp01(base.motionIntensity * motionFactor),
+    tiltStrength: clamp01(base.tiltStrength * motionFactor),
+    focusFalloff: clamp01(base.focusFalloff),
+    instability: clamp01(base.instability * (options.reducedMotion ? 0.3 : 1))
+  };
+}
+
+export function interpolateRuntimeSpatialState(
+  from: RuntimeSpatialState,
+  to: RuntimeSpatialState,
+  progress: number
+): RuntimeSpatialState {
+  const easedProgress = smoothStep(progress);
+  const fromRgb = parseTintRgb(from.tintRgb);
+  const toRgb = parseTintRgb(to.tintRgb);
+
+  return {
+    phase: easedProgress >= 0.5 ? to.phase : from.phase,
+    tint: easedProgress >= 0.5 ? to.tint : from.tint,
+    tintRgb: formatTintRgb([
+      lerp(fromRgb[0], toRgb[0], easedProgress),
+      lerp(fromRgb[1], toRgb[1], easedProgress),
+      lerp(fromRgb[2], toRgb[2], easedProgress)
+    ]),
+    fogDensity: clamp01(lerp(from.fogDensity, to.fogDensity, easedProgress)),
+    particleDensity: clamp01(lerp(from.particleDensity, to.particleDensity, easedProgress)),
+    particleSpeed: clamp01(lerp(from.particleSpeed, to.particleSpeed, easedProgress)),
+    lightIntensity: clamp01(lerp(from.lightIntensity, to.lightIntensity, easedProgress)),
+    motionIntensity: clamp01(lerp(from.motionIntensity, to.motionIntensity, easedProgress)),
+    tiltStrength: clamp01(lerp(from.tiltStrength, to.tiltStrength, easedProgress)),
+    focusFalloff: clamp01(lerp(from.focusFalloff, to.focusFalloff, easedProgress)),
+    instability: clamp01(lerp(from.instability, to.instability, easedProgress))
+  };
+}
+
+export function shouldRunSpatialAnimation(quality: AmbientQuality, reducedMotion = false, hidden = false): boolean {
+  return quality !== 'off' && !reducedMotion && !hidden;
+}

package/src/runtime/runtimeSpatialStateStore.ts

@@ -0,0 +1,53 @@
+import { get, writable } from 'svelte/store';
+import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+import type { AmbientQuality } from '../ambient/spatialAmbientTypes';
+import {
+  createRuntimeSpatialState,
+  type RuntimeSpatialState,
+  type RuntimeSpatialStateOptions
+} from './runtimeSpatialReactivity';
+
+export type RuntimeSpatialStateStore = {
+  subscribe: (run: (state: RuntimeSpatialState) => void) => () => void;
+  updatePhase: (phase: RuntimePhase | string, options?: RuntimeSpatialStateOptions) => RuntimeSpatialState;
+  updateOptions: (options: RuntimeSpatialStateOptions) => RuntimeSpatialState;
+  getState: () => RuntimeSpatialState;
+};
+
+export function createRuntimeSpatialStateStore(
+  phase: RuntimePhase | string = 'LAUNCH_GATE',
+  options: RuntimeSpatialStateOptions = {}
+): RuntimeSpatialStateStore {
+  let currentPhase: RuntimePhase | string = phase;
+  let currentOptions: RuntimeSpatialStateOptions = options;
+  const state = writable(createRuntimeSpatialState(currentPhase, currentOptions));
+
+  function setNext(nextPhase: RuntimePhase | string, nextOptions: RuntimeSpatialStateOptions): RuntimeSpatialState {
+    currentPhase = nextPhase;
+    currentOptions = nextOptions;
+    const nextState = createRuntimeSpatialState(currentPhase, currentOptions);
+    state.set(nextState);
+    return nextState;
+  }
+
+  return {
+    subscribe: state.subscribe,
+    updatePhase(nextPhase, nextOptions = currentOptions) {
+      return setNext(nextPhase, { ...currentOptions, ...nextOptions });
+    },
+    updateOptions(nextOptions) {
+      return setNext(currentPhase, { ...currentOptions, ...nextOptions });
+    },
+    getState() {
+      return get(state);
+    }
+  };
+}
+
+export function createRuntimeSpatialStateFromQuality(
+  phase: RuntimePhase | string,
+  quality: AmbientQuality,
+  reducedMotion = false
+): RuntimeSpatialState {
+  return createRuntimeSpatialState(phase, { quality, reducedMotion });
+}