@konitif/theme 0.284.2

package/src/depth/spatialDepthTypes.ts

@@ -0,0 +1,79 @@
+import type { KonitifDepthLevel } from '../focus/perceptualFocusTypes';
+
+export type SpatialDepthLayerDefinition = {
+  depth: KonitifDepthLevel;
+  label: string;
+  blur: number;
+  opacity: number;
+  contrast: number;
+  shadow: number;
+  parallax: number;
+  lightResponse: number;
+};
+
+export const spatialDepthLayers: SpatialDepthLayerDefinition[] = [
+  {
+    depth: 'ambient',
+    label: 'Ambient',
+    blur: 1.8,
+    opacity: 0.64,
+    contrast: 0.88,
+    shadow: 0.04,
+    parallax: 0,
+    lightResponse: 0.22
+  },
+  {
+    depth: 'background',
+    label: 'Background',
+    blur: 1.1,
+    opacity: 0.74,
+    contrast: 0.92,
+    shadow: 0.08,
+    parallax: 0,
+    lightResponse: 0.34
+  },
+  {
+    depth: 'workspace',
+    label: 'Workspace',
+    blur: 0.36,
+    opacity: 0.92,
+    contrast: 0.98,
+    shadow: 0.14,
+    parallax: 0,
+    lightResponse: 0.5
+  },
+  {
+    depth: 'panel',
+    label: 'Panel',
+    blur: 0.12,
+    opacity: 0.98,
+    contrast: 1,
+    shadow: 0.2,
+    parallax: 0,
+    lightResponse: 0.64
+  },
+  {
+    depth: 'active',
+    label: 'Active',
+    blur: 0,
+    opacity: 1,
+    contrast: 1.04,
+    shadow: 0.32,
+    parallax: 0,
+    lightResponse: 0.82
+  },
+  {
+    depth: 'overlay',
+    label: 'Overlay',
+    blur: 0,
+    opacity: 1,
+    contrast: 1.02,
+    shadow: 0.4,
+    parallax: 0,
+    lightResponse: 0.92
+  }
+];
+
+export function getSpatialDepthLayer(depth: KonitifDepthLevel): SpatialDepthLayerDefinition {
+  return spatialDepthLayers.find((layer) => layer.depth === depth) ?? spatialDepthLayers[2];
+}

package/src/focus/FocusPlaneProvider.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { globalPerceptualFocusStore } from './perceptualFocusStore';
+  import { setPerceptualFocusContext } from './usePerceptualFocus';
+  import type { PerceptualFocusState, PerceptualFocusStore } from './perceptualFocusTypes';
+
+  export let store: PerceptualFocusStore = globalPerceptualFocusStore;
+  export let enabled = true;
+
+  const dispatch = createEventDispatcher<{ focuschange: PerceptualFocusState }>();
+  setPerceptualFocusContext(store);
+
+  $: focusState = $store;
+  $: dispatch('focuschange', focusState);
+  $: focusStyle = [
+    `--k-focus-x: ${focusState.focusPoint.x}`,
+    `--k-focus-y: ${focusState.focusPoint.y}`,
+    `--k-focus-strength: ${enabled ? focusState.focusStrength : 0}`
+  ].join('; ');
+</script>
+
+<div
+  class="konitif-focus-plane"
+  data-workbench-focus-plane
+  data-workbench-focus-enabled={enabled}
+  data-workbench-active-surface={focusState.activeSurfaceId ?? undefined}
+  data-workbench-active-role={focusState.activeRole ?? undefined}
+  data-workbench-active-depth={focusState.activeDepth ?? undefined}
+  data-konitif-focus-plane
+  data-konitif-focus-enabled={enabled}
+  data-konitif-active-surface={focusState.activeSurfaceId ?? undefined}
+  data-konitif-active-role={focusState.activeRole ?? undefined}
+  data-konitif-active-depth={focusState.activeDepth ?? undefined}
+  style={focusStyle}
+>
+  <slot />
+</div>
+
+<style>
+  .konitif-focus-plane {
+    display: contents;
+  }
+</style>

package/src/focus/PerceptualSurface.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { konitifRoleDefaultDepth, resolveKonitifDepthVisual } from './focusDepthMap';
+  import { usePerceptualFocus } from './usePerceptualFocus';
+  import type { KonitifDepthLevel, KonitifSurfaceRole } from './perceptualFocusTypes';
+
+  export let id: string;
+  export let role: KonitifSurfaceRole = 'panel';
+  export let depth: KonitifDepthLevel | null = null;
+  export let active = false;
+  export let focusStrength = 1;
+  export let interactive = true;
+  export let as: keyof HTMLElementTagNameMap = 'div';
+  export let ariaRole: string | null = 'group';
+  let className = '';
+  export { className as class };
+
+  const focus = usePerceptualFocus();
+
+  $: resolvedDepth = depth ?? konitifRoleDefaultDepth[role];
+  $: depthVisual = resolveKonitifDepthVisual(resolvedDepth);
+  $: surfaceStyle = [
+    `--k-surface-z: ${depthVisual.zIndex}`,
+    `--k-surface-blur: ${depthVisual.blur}px`,
+    `--k-surface-opacity: ${depthVisual.opacity}`,
+    `--k-surface-contrast: ${depthVisual.contrast}`,
+    `--k-surface-shadow: ${depthVisual.shadow}`,
+    `--k-surface-parallax: ${depthVisual.parallax}`,
+    `--k-surface-light-response: ${depthVisual.lightResponse}`
+  ].join('; ');
+
+  function getPoint(event?: MouseEvent | PointerEvent | FocusEvent): PerceptualFocusPoint {
+    if (!event || !('currentTarget' in event)) {
+      return { x: 0.5, y: 0.42 };
+    }
+
+    const element = event.currentTarget as HTMLElement | null;
+    const rect = element?.getBoundingClientRect();
+
+    if (!rect || rect.width <= 0 || rect.height <= 0) {
+      return { x: 0.5, y: 0.42 };
+    }
+
+    const clientX = 'clientX' in event ? event.clientX : rect.left + rect.width / 2;
+    const clientY = 'clientY' in event ? event.clientY : rect.top + rect.height / 2;
+
+    return {
+      x: (clientX - rect.left) / rect.width,
+      y: (clientY - rect.top) / rect.height
+    };
+  }
+
+  function activate(event?: MouseEvent | FocusEvent): void {
+    if (!interactive) {
+      return;
+    }
+
+    focus.setActiveSurface({
+      id,
+      role,
+      depth: resolvedDepth,
+      focusPoint: getPoint(event),
+      focusStrength
+    });
+  }
+
+  onMount(() => {
+    focus.registerSurface({ id, role, depth: resolvedDepth });
+  });
+
+  onDestroy(() => {
+    focus.unregisterSurface(id);
+  });
+
+  $: if (active) {
+    focus.setActiveSurface({ id, role, depth: resolvedDepth, focusStrength });
+  }
+</script>
+
+<svelte:element
+  this={as}
+  {...$$restProps}
+  class={`konitif-perceptual-surface workbench-perceptual-surface ${className}`.trim()}
+  data-workbench-surface-frame={id}
+  data-workbench-surface-role={role}
+  data-workbench-surface-depth={resolvedDepth}
+  data-workbench-surface-active={active || $focus.activeSurfaceId === id ? 'true' : undefined}
+  data-workbench-theme-active={active || $focus.activeSurfaceId === id ? 'true' : undefined}
+  data-konitif-surface={id}
+  data-konitif-surface-role={role}
+  data-konitif-surface-depth={resolvedDepth}
+  data-konitif-active={active || $focus.activeSurfaceId === id ? 'true' : undefined}
+  role={interactive ? (ariaRole ?? undefined) : undefined}
+  style={`${surfaceStyle}; ${$$restProps.style ?? ''}`}
+  on:mouseenter={activate}
+  on:focusin={activate}
+  on:click={activate}
+>
+  <slot />
+</svelte:element>
+
+<style>
+  .konitif-perceptual-surface {
+    position: relative;
+    z-index: var(--k-surface-z);
+    opacity: var(--k-surface-opacity);
+    filter: blur(var(--k-surface-blur)) contrast(var(--k-surface-contrast));
+    transition:
+      box-shadow 280ms ease,
+      filter 320ms ease,
+      opacity 320ms ease;
+  }
+
+  .konitif-perceptual-surface::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 1px solid transparent;
+    border-radius: inherit;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity 220ms ease,
+      box-shadow 260ms ease;
+  }
+
+  .konitif-perceptual-surface[data-konitif-active='true'] {
+    opacity: 1;
+    filter: none;
+  }
+
+  .konitif-perceptual-surface[data-konitif-active='true']::after {
+    border-color: var(--k-border-soft);
+    box-shadow:
+      0 0 calc(1.6rem * var(--k-surface-light-response)) rgba(var(--k-runtime-tint-rgb, 34, 211, 238), 0.2),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    opacity: calc(0.34 + var(--k-focus-strength, 0) * 0.44);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .konitif-perceptual-surface {
+      transform: none;
+      transition-duration: 1ms;
+    }
+  }
+</style>

package/src/focus/focusDepthMap.ts

@@ -0,0 +1,33 @@
+import type { KonitifDepthLevel, KonitifSurfaceRole } from './perceptualFocusTypes';
+
+export type KonitifDepthVisual = {
+  zIndex: number;
+  blur: number;
+  opacity: number;
+  contrast: number;
+  shadow: number;
+  parallax: number;
+  lightResponse: number;
+};
+
+export const konitifDepthVisualMap = {
+  ambient: { zIndex: 0, blur: 1.8, opacity: 0.64, contrast: 0.88, shadow: 0.04, parallax: -0.06, lightResponse: 0.22 },
+  background: { zIndex: 1, blur: 1.1, opacity: 0.74, contrast: 0.92, shadow: 0.08, parallax: -0.03, lightResponse: 0.34 },
+  workspace: { zIndex: 2, blur: 0.36, opacity: 0.92, contrast: 0.98, shadow: 0.14, parallax: 0, lightResponse: 0.5 },
+  panel: { zIndex: 3, blur: 0.12, opacity: 0.98, contrast: 1, shadow: 0.2, parallax: 0.035, lightResponse: 0.64 },
+  active: { zIndex: 4, blur: 0, opacity: 1, contrast: 1.04, shadow: 0.32, parallax: 0.06, lightResponse: 0.82 },
+  overlay: { zIndex: 5, blur: 0, opacity: 1, contrast: 1.02, shadow: 0.4, parallax: 0.08, lightResponse: 0.92 }
+} satisfies Record<KonitifDepthLevel, KonitifDepthVisual>;
+
+export const konitifRoleDefaultDepth = {
+  shell: 'workspace',
+  panel: 'panel',
+  tool: 'workspace',
+  overlay: 'overlay',
+  inspector: 'active',
+  modal: 'overlay'
+} satisfies Record<KonitifSurfaceRole, KonitifDepthLevel>;
+
+export function resolveKonitifDepthVisual(depth: KonitifDepthLevel): KonitifDepthVisual {
+  return konitifDepthVisualMap[depth] ?? konitifDepthVisualMap.workspace;
+}

package/src/focus/perceptualFocusStore.ts

@@ -0,0 +1,98 @@
+import { get, writable } from 'svelte/store';
+import type {
+  PerceptualFocusPoint,
+  PerceptualFocusState,
+  PerceptualFocusStore,
+  PerceptualFocusUpdate,
+  PerceptualSurfaceRegistration
+} from './perceptualFocusTypes';
+
+export const DEFAULT_PERCEPTUAL_FOCUS_STATE: PerceptualFocusState = {
+  activeSurfaceId: null,
+  activeRole: null,
+  activeDepth: null,
+  focusPoint: { x: 0.5, y: 0.42 },
+  focusStrength: 0
+};
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));
+}
+
+function resolveFocusPoint(focusPoint?: Partial<PerceptualFocusPoint>): PerceptualFocusPoint {
+  return {
+    x: clamp01(focusPoint?.x ?? DEFAULT_PERCEPTUAL_FOCUS_STATE.focusPoint.x),
+    y: clamp01(focusPoint?.y ?? DEFAULT_PERCEPTUAL_FOCUS_STATE.focusPoint.y)
+  };
+}
+
+export function createPerceptualFocusStore(
+  initialState: Partial<PerceptualFocusState> = {}
+): PerceptualFocusStore {
+  const surfaces = new Map<string, PerceptualSurfaceRegistration>();
+  const state = writable<PerceptualFocusState>({
+    ...DEFAULT_PERCEPTUAL_FOCUS_STATE,
+    ...initialState,
+    focusPoint: resolveFocusPoint(initialState.focusPoint),
+    focusStrength: clamp01(initialState.focusStrength ?? DEFAULT_PERCEPTUAL_FOCUS_STATE.focusStrength)
+  });
+
+  return {
+    subscribe: state.subscribe,
+    registerSurface(surface) {
+      surfaces.set(surface.id, surface);
+    },
+    unregisterSurface(surfaceId) {
+      surfaces.delete(surfaceId);
+      state.update((current) =>
+        current.activeSurfaceId === surfaceId
+          ? { ...DEFAULT_PERCEPTUAL_FOCUS_STATE, focusPoint: current.focusPoint }
+          : current
+      );
+    },
+    setActiveSurface(update: PerceptualFocusUpdate) {
+      surfaces.set(update.id, {
+        id: update.id,
+        role: update.role,
+        depth: update.depth
+      });
+
+      state.set({
+        activeSurfaceId: update.id,
+        activeRole: update.role,
+        activeDepth: update.depth,
+        focusPoint: resolveFocusPoint(update.focusPoint),
+        focusStrength: clamp01(update.focusStrength ?? 1)
+      });
+    },
+    clearActiveSurface(surfaceId) {
+      state.update((current) => {
+        if (surfaceId && current.activeSurfaceId !== surfaceId) {
+          return current;
+        }
+
+        return {
+          ...current,
+          activeSurfaceId: null,
+          activeRole: null,
+          activeDepth: null,
+          focusStrength: 0
+        };
+      });
+    },
+    setFocusPoint(focusPoint) {
+      state.update((current) => ({
+        ...current,
+        focusPoint: resolveFocusPoint({ ...current.focusPoint, ...focusPoint })
+      }));
+    },
+    getState() {
+      return get(state);
+    },
+    getSurface(surfaceId) {
+      return surfaces.get(surfaceId) ?? null;
+    }
+  };
+}
+
+export const globalPerceptualFocusStore = createPerceptualFocusStore();

package/src/focus/perceptualFocusTypes.ts

@@ -0,0 +1,38 @@
+export type KonitifSurfaceRole = 'shell' | 'panel' | 'tool' | 'overlay' | 'inspector' | 'modal';
+
+export type KonitifDepthLevel = 'ambient' | 'background' | 'workspace' | 'panel' | 'active' | 'overlay';
+
+export type PerceptualFocusPoint = {
+  x: number;
+  y: number;
+};
+
+export type PerceptualFocusState = {
+  activeSurfaceId: string | null;
+  activeRole: KonitifSurfaceRole | null;
+  activeDepth: KonitifDepthLevel | null;
+  focusPoint: PerceptualFocusPoint;
+  focusStrength: number;
+};
+
+export type PerceptualSurfaceRegistration = {
+  id: string;
+  role: KonitifSurfaceRole;
+  depth: KonitifDepthLevel;
+};
+
+export type PerceptualFocusUpdate = PerceptualSurfaceRegistration & {
+  focusPoint?: Partial<PerceptualFocusPoint>;
+  focusStrength?: number;
+};
+
+export type PerceptualFocusStore = {
+  subscribe: (run: (state: PerceptualFocusState) => void) => () => void;
+  registerSurface: (surface: PerceptualSurfaceRegistration) => void;
+  unregisterSurface: (surfaceId: string) => void;
+  setActiveSurface: (update: PerceptualFocusUpdate) => void;
+  clearActiveSurface: (surfaceId?: string) => void;
+  setFocusPoint: (focusPoint: Partial<PerceptualFocusPoint>) => void;
+  getState: () => PerceptualFocusState;
+  getSurface: (surfaceId: string) => PerceptualSurfaceRegistration | null;
+};

package/src/focus/usePerceptualFocus.ts

@@ -0,0 +1,18 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { globalPerceptualFocusStore } from './perceptualFocusStore';
+import type { PerceptualFocusStore } from './perceptualFocusTypes';
+
+const PERCEPTUAL_FOCUS_CONTEXT = Symbol('konitif.perceptual-focus');
+
+export function setPerceptualFocusContext(store: PerceptualFocusStore): PerceptualFocusStore {
+  setContext(PERCEPTUAL_FOCUS_CONTEXT, store);
+  return store;
+}
+
+export function usePerceptualFocus(): PerceptualFocusStore {
+  if (hasContext(PERCEPTUAL_FOCUS_CONTEXT)) {
+    return getContext<PerceptualFocusStore>(PERCEPTUAL_FOCUS_CONTEXT);
+  }
+
+  return globalPerceptualFocusStore;
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export * from './konitifTheme';
+export * from './konitifWorkbenchThemeRuntime';
+export * from './konitifRuntimePhaseTokens';
+export * from './runtime/runtimePhaseVisualMap';
+export * from './runtime/runtimeSpatialReactivity';
+export * from './runtime/runtimeSpatialStateStore';
+export * from './ambient/spatialProjectionGridModel';
+export * from './ambient/spatialProjectionGridPresets';
+export * from './ambient/spatialProjectionGridTypes';
+export * from './ambient/spatialAmbientTypes';
+export * from './ambient/themeToAmbientUniforms';
+export * from './focus/perceptualFocusTypes';
+export * from './focus/perceptualFocusStore';
+export * from './focus/focusDepthMap';
+export * from './depth/spatialDepthTypes';
+export { default as SpatialAmbientRuntime } from './ambient/SpatialAmbientRuntime.svelte';
+export { default as SpatialProjectionGrid } from './ambient/SpatialProjectionGrid.svelte';
+export { default as KonitifGlassSurface } from './components/KonitifGlassSurface.svelte';
+export { default as FocusPlaneProvider } from './focus/FocusPlaneProvider.svelte';
+export { default as PerceptualSurface } from './focus/PerceptualSurface.svelte';
+export { default as SpatialDepthStack } from './depth/SpatialDepthStack.svelte';
+export { default as SpatialDepthLayer } from './depth/SpatialDepthLayer.svelte';

package/src/konitifRuntimePhaseTokens.ts

@@ -0,0 +1,15 @@
+import type { LaunchPhase } from '@konitif/workbench';
+
+export type RuntimePhase = LaunchPhase | 'TEARING_DOWN' | 'RECOVERING';
+
+export function normalizeKonitifRuntimePhase(phase: RuntimePhase | string | null | undefined): RuntimePhase {
+  if (phase === 'TEARING_DOWN') {
+    return 'TEARDOWN';
+  }
+
+  if (phase === 'RECOVERING') {
+    return 'RECOVERY';
+  }
+
+  return (phase || 'LAUNCH_GATE') as RuntimePhase;
+}

package/src/konitifTheme.ts

@@ -0,0 +1,2 @@
+export type KonitifThemeMode = 'konitif-dark' | 'konitif-light';
+export const KONITIF_THEME = { id:'konitif', modes:['konitif-dark','konitif-light'] as const };

package/src/konitifThemeAdapter.ts

@@ -0,0 +1,13 @@
+import type { KonitifThemeMode } from './konitifTheme';
+
+export function applyKonitifTheme(mode: KonitifThemeMode, target?: HTMLElement | null): void {
+  const resolvedTarget = target ?? (typeof document === 'undefined' ? null : document.documentElement);
+
+  if (!resolvedTarget) {
+    return;
+  }
+
+  resolvedTarget.dataset.theme = mode;
+  resolvedTarget.dataset.workbenchTheme = 'konitif';
+  resolvedTarget.dataset.workbenchColorMode = mode === 'konitif-light' ? 'light' : 'dark';
+}