@konitif/theme 0.284.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+# Licence — @konitif/theme
+
+SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+
+The original KONITIF / Workbench code in this v0.x package is made available
+under the PolyForm Noncommercial License 1.0.0:
+https://polyformproject.org/licenses/noncommercial/1.0.0
+
+This notice incorporates the standard terms by reference; it is not a modified
+version of the licence. This is source-available software, not OSI open source.
+Third-party components retain their own licences and notices.
+
+Uses outside the standard licence's permitted purposes require a separate
+written licence. A public repository or npm download grants no additional
+commercial rights. Any free professional authorization must be explicit,
+nominative and limited to the agreed products; none is granted by this notice.
+
+The KONITIF name, logo and official identity belong to Maxime Mouflard.
+Descriptive reference is permitted. No third-party version may claim to be
+official, certified or approved without authorization. This trademark notice
+is separate from the software licence and does not amend its terms.

package/README.md

@@ -0,0 +1,56 @@
+# @konitif/theme
+
+Theme tokens, spatial ambience and perceptual focus projections for compatible
+KONITIF Workbench hosts.
+
+## Installation
+
+```sh
+npm install @konitif/theme
+```
+
+## What it provides
+
+- Authored light and dark theme tokens.
+- Svelte surfaces for ambient depth, focus and spatial presentation.
+- Deterministic mappings from runtime phases to visual states.
+- Explicit CSS entry points for base and depth tokens.
+
+## Authority boundary
+
+This package owns the KONITIF visual identity and its local projection state.
+The host owns workspace state, runtime phases and semantic selection. Applying
+or animating a theme never changes those authorities.
+
+## Quick start
+
+```ts
+import {
+  applyKonitifTheme,
+  konitifWorkbenchThemeRuntime
+} from '@konitif/theme';
+import '@konitif/theme/styles.css';
+import '@konitif/theme/depth/styles.css';
+
+applyKonitifTheme('konitif-dark');
+export const themeRuntime = konitifWorkbenchThemeRuntime;
+```
+
+## Public entry points
+
+| Entry | Purpose |
+| --- | --- |
+| `@konitif/theme` | Theme identity, visual mappings and Svelte projection components. |
+| `@konitif/theme/styles.css` | Base KONITIF design tokens. |
+| `@konitif/theme/depth/styles.css` | Spatial depth tokens and layer styles. |
+
+## Reference
+
+See [`reference/`](reference/) for the machine-readable capability catalog and
+authority diagram. These artifacts describe the package and do not configure a
+host.
+
+## License
+
+Source-available under [PolyForm Noncommercial 1.0.0](LICENSE.md), not OSI open
+source. Commercial use requires separate written authorization.

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@konitif/theme",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "version": "0.284.2",
+  "private": false,
+  "type": "module",
+  "description": "KONITIF theme tokens, spatial ambience and perceptual focus projections for compatible workbench hosts.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LeMouf/konitif-theme.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "svelte": "./src/index.ts",
+  "files": [
+    "LICENSE.md",
+    "src/ambient",
+    "src/components",
+    "src/depth",
+    "src/focus",
+    "src/runtime",
+    "src/index.ts",
+    "src/konitifRuntimePhaseTokens.ts",
+    "src/konitifTheme.ts",
+    "src/konitifThemeAdapter.ts",
+    "src/konitifTokens.css",
+    "src/konitifWorkbenchThemeRuntime.ts",
+    "README.md",
+    "package.json",
+    "reference"
+  ],
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles.css": "./src/konitifTokens.css",
+    "./depth/styles.css": "./src/depth/spatialDepthTokens.css"
+  },
+  "dependencies": {
+    "@konitif/workbench": "0.284.2",
+    "svelte": "4.2.20"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node --test tests/*.test.mjs",
+    "verify:package": "node scripts/verify-package.mjs",
+    "prepack": "npm run typecheck && npm test",
+    "prepublishOnly": "node -e \"throw new Error('Publish only the verified .release/package.tgz archive with scripts disabled')\""
+  }
+}

package/reference/README.md

@@ -0,0 +1,10 @@
+# Theme reference
+
+This directory contains the machine-readable capability catalog and authority
+diagram for `@konitif/theme`.
+
+- [`catalog.json`](catalog.json) groups the public visual contracts by responsibility.
+- [`diagrams.json`](diagrams.json) describes the runtime-signal-to-perception flow.
+
+These files support documentation tooling. They are not runtime configuration,
+workspace state or theme preferences.

package/reference/catalog.json

@@ -0,0 +1,129 @@
+{
+  "schemaVersion": "1.0.0",
+  "package": "@konitif/theme",
+  "intent": "Project KONITIF visual and spatial direction without changing the functional authority of the host.",
+  "clusters": [
+    {
+      "id": "theme-tokens",
+      "title": "Theme and runtime phases",
+      "summary": "Theme tokens and visual mappings for runtime phases.",
+      "authority": "Authored visual contract.",
+      "owns": [
+        "tokens",
+        "visual mapping"
+      ],
+      "doesNotOwn": [
+        "runtime phase"
+      ],
+      "workflow": [
+        "Define",
+        "Map",
+        "Apply"
+      ],
+      "sources": [
+        "konitifTheme.ts",
+        "konitifWorkbenchThemeRuntime.ts",
+        "konitifRuntimePhaseTokens.ts",
+        "runtimePhaseVisualMap.ts"
+      ]
+    },
+    {
+      "id": "spatial-runtime",
+      "title": "Spatial reactivity",
+      "summary": "Derived spatial state and reactions to runtime signals.",
+      "authority": "Derived spatial projection.",
+      "owns": [
+        "reactivity",
+        "spatial state"
+      ],
+      "doesNotOwn": [
+        "runtime signal"
+      ],
+      "workflow": [
+        "Observe",
+        "Derive",
+        "Animate"
+      ],
+      "sourcePrefixes": [
+        "runtime/"
+      ]
+    },
+    {
+      "id": "ambient",
+      "title": "Ambience and grid",
+      "summary": "Ambient-depth models, presets and components.",
+      "authority": "Ambient visual projection.",
+      "owns": [
+        "grid",
+        "uniforms",
+        "ambience"
+      ],
+      "doesNotOwn": [
+        "workspace"
+      ],
+      "workflow": [
+        "Configure",
+        "Project",
+        "Render"
+      ],
+      "sourcePrefixes": [
+        "ambient/"
+      ],
+      "sources": [
+        "SpatialAmbientRuntime.svelte",
+        "SpatialProjectionGrid.svelte"
+      ]
+    },
+    {
+      "id": "focus-depth",
+      "title": "Focus and depth",
+      "summary": "Perceptual hierarchy, focus planes and depth layers.",
+      "authority": "Local perceptual state.",
+      "owns": [
+        "focus",
+        "depth"
+      ],
+      "doesNotOwn": [
+        "domain selection"
+      ],
+      "workflow": [
+        "Declare",
+        "Compute",
+        "Project"
+      ],
+      "sourcePrefixes": [
+        "focus/",
+        "depth/"
+      ],
+      "sources": [
+        "FocusPlaneProvider.svelte",
+        "PerceptualSurface.svelte",
+        "SpatialDepthStack.svelte",
+        "SpatialDepthLayer.svelte"
+      ]
+    },
+    {
+      "id": "surfaces",
+      "title": "Visual surfaces",
+      "summary": "Surface components for the KONITIF visual direction.",
+      "authority": "Surface rendering.",
+      "owns": [
+        "visual material"
+      ],
+      "doesNotOwn": [
+        "projected content"
+      ],
+      "workflow": [
+        "Receive",
+        "Style",
+        "Render"
+      ],
+      "sourcePrefixes": [
+        "components/"
+      ],
+      "sources": [
+        "KonitifGlassSurface.svelte"
+      ]
+    }
+  ]
+}

package/reference/diagrams.json

@@ -0,0 +1,60 @@
+{
+  "schemaVersion": "1.0.0",
+  "package": "@konitif/theme",
+  "diagrams": [
+    {
+      "id": "runtime-to-perception",
+      "title": "From runtime signal to perception",
+      "kind": "mechanism",
+      "summary": "The theme combines authored tokens and observed signals to produce a purely projective spatial reaction.",
+      "nodes": [
+        {
+          "id": "tokens",
+          "label": "Theme tokens",
+          "description": "Colors, depth and materials are defined."
+        },
+        {
+          "id": "signal",
+          "label": "Runtime signal",
+          "description": "A phase or observation is received.",
+          "tone": "observation"
+        },
+        {
+          "id": "map",
+          "label": "Visual mapping",
+          "description": "The signal is mapped to a perceptual expression."
+        },
+        {
+          "id": "spatial",
+          "label": "Spatial state",
+          "description": "Focus, ambience and depth are derived."
+        },
+        {
+          "id": "surface",
+          "label": "Rendered surface",
+          "description": "Components project the result.",
+          "tone": "projection"
+        }
+      ],
+      "edges": [
+        {
+          "from": "tokens",
+          "to": "signal"
+        },
+        {
+          "from": "signal",
+          "to": "map"
+        },
+        {
+          "from": "map",
+          "to": "spatial"
+        },
+        {
+          "from": "spatial",
+          "to": "surface"
+        }
+      ],
+      "caption": "Changing the theme does not modify runtime or semantic workspace state."
+    }
+  ]
+}

package/src/ambient/SpatialAmbientCanvas.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+  import type { RuntimeSpatialState } from '../runtime/runtimeSpatialReactivity';
+  import type { AmbientQuality } from './spatialAmbientTypes';
+
+  export let phase: RuntimePhase = 'LAUNCH_GATE';
+  export let quality: AmbientQuality = 'medium';
+  export let reducedMotion = false;
+  export let spatialState: RuntimeSpatialState | null = null;
+  export let themeMode: 'dark' | 'light' = 'dark';
+
+  let canvas: HTMLCanvasElement | null = null;
+  let context: CanvasRenderingContext2D | null = null;
+  let mounted = false;
+  let drawFrame = 0;
+
+  $: if (mounted) {
+    phase;
+    quality;
+    reducedMotion;
+    spatialState;
+    themeMode;
+    scheduleDraw();
+  }
+
+  onMount(() => {
+    context = canvas?.getContext('2d') ?? null;
+
+    if (!canvas || !context) {
+      return;
+    }
+
+    mounted = true;
+    const resizeObserver =
+      typeof ResizeObserver === 'function'
+        ? new ResizeObserver(() => {
+            scheduleDraw();
+          })
+        : null;
+
+    resizeObserver?.observe(canvas);
+    scheduleDraw();
+
+    return () => {
+      mounted = false;
+      resizeObserver?.disconnect();
+
+      if (drawFrame !== 0) {
+        cancelAnimationFrame(drawFrame);
+        drawFrame = 0;
+      }
+
+      context = null;
+    };
+  });
+
+  function scheduleDraw(): void {
+    if (!mounted || drawFrame !== 0 || typeof requestAnimationFrame !== 'function') {
+      return;
+    }
+
+    drawFrame = requestAnimationFrame(() => {
+      drawFrame = 0;
+      drawAmbientCanvas();
+    });
+  }
+
+  function drawAmbientCanvas(): void {
+    if (!canvas || !context) {
+      return;
+    }
+
+    const dpr = Math.min(devicePixelRatio || 1, 2);
+    const width = Math.max(1, Math.round(canvas.clientWidth * dpr));
+    const height = Math.max(1, Math.round(canvas.clientHeight * dpr));
+    const style = getComputedStyle(canvas);
+    const isLight = themeMode === 'light';
+    const tintRgb = spatialState?.tintRgb ?? (style.getPropertyValue('--k-runtime-tint-rgb').trim() || '34, 211, 238');
+    const intensity = spatialState?.lightIntensity ?? (Number.parseFloat(style.getPropertyValue('--k-runtime-intensity')) || 0.5);
+    const fogDensity = spatialState?.fogDensity ?? (Number.parseFloat(style.getPropertyValue('--k-runtime-fog-density')) || 0.24);
+
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    context.clearRect(0, 0, width, height);
+
+    const centerX = width * 0.5;
+    const centerY = height * (isLight ? 0.44 : 0.38);
+    const gradient = context.createRadialGradient(
+      centerX,
+      centerY,
+      0,
+      centerX,
+      centerY,
+      Math.max(width, height) * 0.72
+    );
+
+    gradient.addColorStop(0, `rgba(${tintRgb}, ${isLight ? 0.06 * intensity + 0.025 * fogDensity : 0.18 * intensity + 0.05 * fogDensity})`);
+    gradient.addColorStop(0.38, `rgba(${tintRgb}, ${isLight ? 0.025 * intensity + 0.018 * fogDensity : 0.06 * intensity + 0.035 * fogDensity})`);
+    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, width, height);
+
+    if (isLight) {
+      const warmLight = context.createRadialGradient(
+        width * 0.76,
+        height * 0.12,
+        0,
+        width * 0.76,
+        height * 0.12,
+        Math.max(width, height) * 0.48
+      );
+      warmLight.addColorStop(0, `rgba(255, 236, 198, ${0.12 + intensity * 0.05})`);
+      warmLight.addColorStop(0.42, `rgba(255, 236, 198, ${0.045 + intensity * 0.025})`);
+      warmLight.addColorStop(1, 'rgba(255, 236, 198, 0)');
+      context.fillStyle = warmLight;
+      context.fillRect(0, 0, width, height);
+
+      const coldEdge = context.createLinearGradient(0, height, width * 0.55, height * 0.28);
+      coldEdge.addColorStop(0, `rgba(110, 135, 165, ${0.095 + fogDensity * 0.025})`);
+      coldEdge.addColorStop(0.42, 'rgba(110, 135, 165, 0.035)');
+      coldEdge.addColorStop(1, 'rgba(110, 135, 165, 0)');
+      context.fillStyle = coldEdge;
+      context.fillRect(0, 0, width, height);
+    }
+  }
+</script>
+
+<canvas bind:this={canvas} class="ambient-canvas" data-phase={phase} data-quality={quality} data-theme-mode={themeMode}></canvas>
+
+<style>
+  .ambient-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    filter: blur(0.2px);
+    opacity: 0.95;
+  }
+
+  .ambient-canvas[data-theme-mode='light'] {
+    filter: blur(0.1px);
+    opacity: 0.72;
+  }
+</style>

package/src/ambient/SpatialAmbientParticles.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { RuntimePhase } from '../konitifRuntimePhaseTokens';
+  import type { RuntimeSpatialState } from '../runtime/runtimeSpatialReactivity';
+  import type { AmbientQuality } from './spatialAmbientTypes';
+
+  export let phase: RuntimePhase = 'LAUNCH_GATE';
+  export let quality: AmbientQuality = 'medium';
+  export let reducedMotion = false;
+  export let spatialState: RuntimeSpatialState | null = null;
+  export let themeMode: 'dark' | 'light' = 'dark';
+
+  const countByQuality: Record<AmbientQuality, number> = {
+    off: 0,
+    low: 18,
+    medium: 42,
+    high: 72
+  };
+
+  $: particleCount = Math.round(countByQuality[quality] * (spatialState?.particleDensity ?? 1));
+  $: speedFactor = Math.max(0.08, spatialState?.particleSpeed ?? 0.3);
+  $: particles = Array.from({ length: particleCount }, (_, index) => ({
+    id: index,
+    x: (index * 37) % 100,
+    y: (index * 61) % 100,
+    size: 1 + (index % 4),
+    duration: (10 + (index % 9)) / speedFactor,
+    depth: 0.22 + (index % 7) * 0.08
+  }));
+</script>
+
+<div
+  class:reducedMotion
+  class="particles"
+  data-phase={phase}
+  data-theme-mode={themeMode}
+  style={`--particle-speed:${speedFactor};`}
+>
+  {#each particles as particle (particle.id)}
+    <i
+      style={`--x:${particle.x}%; --y:${particle.y}%; --s:${particle.size}px; --d:${particle.duration}s; --depth:${particle.depth};`}
+    ></i>
+  {/each}
+</div>
+
+<style>
+  .particles {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .particles i {
+    position: absolute;
+    left: var(--x);
+    top: var(--y);
+    width: var(--s);
+    height: var(--s);
+    border-radius: 999px;
+    background: var(--k-particle-color);
+    box-shadow:
+      0 0 calc(12px + 18px * var(--depth)) rgba(var(--k-runtime-tint-rgb), 0.22),
+      0 0 18px var(--k-particle-glow, var(--k-frustum-light));
+    opacity: calc(0.28 + var(--depth) * 0.38);
+    animation: float var(--d) ease-in-out infinite alternate;
+  }
+
+  .particles[data-theme-mode='light'] i {
+    box-shadow:
+      0 0 calc(8px + 12px * var(--depth)) rgba(var(--k-runtime-tint-rgb), 0.12),
+      0 0 12px var(--k-particle-glow);
+    opacity: calc(0.2 + var(--depth) * 0.24);
+  }
+
+  .reducedMotion i {
+    animation: none;
+  }
+
+  @keyframes float {
+    from {
+      filter: blur(0.2px);
+      transform: translate3d(-8px, 6px, 0) scale(calc(0.8 + var(--depth)));
+    }
+
+    to {
+      filter: blur(1.4px);
+      transform: translate3d(10px, -14px, 0) scale(calc(0.95 + var(--depth)));
+    }
+  }
+</style>