@supersoniks/concorde 4.9.98-visual-stack.0 → 4.9.98-visual-stack.2

package/src/core/components/functional/interactive/matrix.ts

@@ -0,0 +1,185 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { Subscriber } from "@supersoniks/concorde/mixins";
+
+const tagName = "sonic-matrix";
+
+type Palette = Record<string, string>;
+
+function pathGet(obj: unknown, path: string): unknown {
+  if (!path) return obj;
+  let cur: any = obj;
+  for (const p of path.split(".").filter(Boolean)) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
+/**
+ * Rendu canvas d’une grille 2D (number[][] ou flat + cols) depuis dataProvider.
+ */
+@customElement(tagName)
+export class SonicMatrix extends Subscriber(LitElement) {
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      line-height: 0;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: auto;
+      image-rendering: pixelated;
+    }
+  `;
+
+  /** Clé vers la matrice dans le DP. */
+  @property({ type: String })
+  key = "grid";
+
+  @property({ type: Number })
+  cols = 0;
+
+  @property({ type: Object })
+  palette: Palette = {
+    "0": "transparent",
+    "1": "#00f0f0",
+    "2": "#0000f0",
+    "3": "#f0a000",
+    "4": "#f0f000",
+    "5": "#00f000",
+    "6": "#a000f0",
+    "7": "#f00000",
+  };
+
+  /** Taille cellule px, ou `auto`. */
+  @property({ type: String })
+  cell = "24";
+
+  @property({ type: Number })
+  gap = 1;
+
+  @property({ type: Number })
+  radius = 2;
+
+  /** Clé couche fantôme optionnelle. */
+  @property({ type: String, attribute: "ghost-key" })
+  ghostKey = "";
+
+  @property({ type: String, attribute: "label-key" })
+  labelKey = "";
+
+  @query("canvas") private canvas!: HTMLCanvasElement;
+
+  private lastSig = "";
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute("role", "img");
+  }
+
+  protected updated(): void {
+    this.draw();
+  }
+
+  private readGrid(): number[][] {
+    const props = this.props as Record<string, unknown> | undefined;
+    const raw = props ? pathGet(props, this.key) : undefined;
+    if (Array.isArray(raw) && Array.isArray(raw[0])) {
+      return raw as number[][];
+    }
+    if (Array.isArray(raw) && this.cols > 0) {
+      const flat = raw as number[];
+      const out: number[][] = [];
+      for (let i = 0; i < flat.length; i += this.cols) {
+        out.push(flat.slice(i, i + this.cols).map((n) => Number(n) || 0));
+      }
+      return out;
+    }
+    return [];
+  }
+
+  private readGhost(): number[][] | null {
+    if (!this.ghostKey) return null;
+    const props = this.props as Record<string, unknown> | undefined;
+    const raw = props ? pathGet(props, this.ghostKey) : undefined;
+    if (Array.isArray(raw) && Array.isArray(raw[0])) return raw as number[][];
+    return null;
+  }
+
+  private colorFor(v: number, ghost = false): string {
+    const c = this.palette?.[String(v)] ?? this.palette?.[v] ?? "#888";
+    if (!ghost) return c;
+    if (c === "transparent") return c;
+    return c.startsWith("var(") ? c : `${c}66`;
+  }
+
+  private draw(): void {
+    const grid = this.readGrid();
+    const ghost = this.readGhost();
+    const h = grid.length;
+    const w = h ? grid[0].length : 0;
+    if (!w || !h || !this.canvas) return;
+
+    const sig = JSON.stringify({ grid, ghost, palette: this.palette, cell: this.cell, gap: this.gap });
+    if (sig === this.lastSig) return;
+    this.lastSig = sig;
+
+    const hostW = this.clientWidth || w * 24;
+    const cellPx =
+      this.cell === "auto" ? Math.max(1, Math.floor(hostW / w)) : Math.max(1, Number(this.cell) || 24);
+    const gap = Math.max(0, this.gap);
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const cssW = w * cellPx;
+    const cssH = h * cellPx;
+    this.canvas.width = Math.floor(cssW * dpr);
+    this.canvas.height = Math.floor(cssH * dpr);
+    this.canvas.style.width = `${cssW}px`;
+    this.canvas.style.height = `${cssH}px`;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssW, cssH);
+
+    const paint = (mat: number[][], ghostLayer: boolean) => {
+      for (let y = 0; y < mat.length; y++) {
+        const row = mat[y];
+        for (let x = 0; x < row.length; x++) {
+          const v = Number(row[x]) || 0;
+          if (!v && !ghostLayer) continue;
+          if (!v) continue;
+          ctx.fillStyle = this.colorFor(v, ghostLayer);
+          const px = x * cellPx + gap;
+          const py = y * cellPx + gap;
+          const s = cellPx - gap * 2;
+          if (this.radius > 0) {
+            const r = Math.min(this.radius, s / 2);
+            ctx.beginPath();
+            ctx.roundRect(px, py, s, s, r);
+            ctx.fill();
+          } else {
+            ctx.fillRect(px, py, s, s);
+          }
+        }
+      }
+    };
+
+    if (ghost) paint(ghost, true);
+    paint(grid, false);
+
+    if (this.labelKey) {
+      const props = this.props as Record<string, unknown> | undefined;
+      const label = props ? pathGet(props, this.labelKey) : undefined;
+      if (label != null) this.setAttribute("aria-label", String(label));
+    }
+  }
+
+  render() {
+    return html`<canvas></canvas>`;
+  }
+}
+
+export default SonicMatrix;

package/src/core/components/functional/interactive/registry.ts

@@ -0,0 +1,46 @@
+/**
+ * Registre global des sonic-store + dispatch typé.
+ * Utilisé par keyboard / gamepad / gesture / action / ticker.
+ */
+
+export type SonicActionMessage = {
+  type: string;
+  payload?: unknown;
+  t?: number;
+  dt?: number;
+};
+
+export type StoreHandle = {
+  id: string;
+  dispatch: (action: SonicActionMessage) => void;
+  getState: () => unknown;
+  reset: () => void;
+};
+
+const stores = new Map<string, StoreHandle>();
+
+export function registerStore(handle: StoreHandle): void {
+  stores.set(handle.id, handle);
+}
+
+export function unregisterStore(id: string): void {
+  stores.delete(id);
+}
+
+export function getStore(id: string): StoreHandle | undefined {
+  return stores.get(id);
+}
+
+/** Dispatch une action vers un store enregistré. No-op si absent. */
+export function dispatch(storeId: string, action: SonicActionMessage): void {
+  const store = stores.get(storeId);
+  if (!store) return;
+  store.dispatch({
+    ...action,
+    t: action.t ?? performance.now(),
+  });
+}
+
+export function listStoreIds(): string[] {
+  return [...stores.keys()];
+}

package/src/core/components/functional/interactive/store.ts

@@ -0,0 +1,264 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import jsonata from "jsonata";
+import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { registerInteractiveHelpers } from "./helpers";
+import {
+  dispatch as registryDispatch,
+  registerStore,
+  unregisterStore,
+  type SonicActionMessage,
+  type StoreHandle,
+} from "./registry";
+
+const tagName = "sonic-store";
+
+const DEFAULT_MAX_STATE_BYTES = 256 * 1024;
+const DEFAULT_BUDGET_MS = 8;
+
+type HistoryEntry = unknown;
+
+/**
+ * Store déclaratif : state' = reducer($state, $action, $env) via JSONata.
+ * Opt-in : `@supersoniks/concorde/interactive`.
+ */
+@customElement(tagName)
+export class SonicStore extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  /** Identifiant du store (obligatoire pour dispatch). */
+  @property({ type: String })
+  id = "";
+
+  /** DataProvider où publier l’état (défaut = id). */
+  @property({ type: String })
+  dataProvider = "";
+
+  /** État initial (JSON attribut / objet). */
+  @property({ type: Object })
+  initial: unknown = null;
+
+  /** Expression JSONata du reducer. */
+  @property({ type: String })
+  reducer = "";
+
+  @property({ type: Number, attribute: "max-state-bytes" })
+  maxStateBytes = DEFAULT_MAX_STATE_BYTES;
+
+  @property({ type: Number, attribute: "budget-ms" })
+  budgetMs = DEFAULT_BUDGET_MS;
+
+  /** Taille max de l’historique undo (0 = off). */
+  @property({ type: Number })
+  history = 0;
+
+  private state: unknown = null;
+  private queue: SonicActionMessage[] = [];
+  private draining = false;
+  private compiled: ReturnType<typeof jsonata> | null = null;
+  private historyStack: HistoryEntry[] = [];
+  private lastError: string | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.bootstrap();
+  }
+
+  disconnectedCallback(): void {
+    if (this.id) unregisterStore(this.id);
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: Map<string | number | symbol, unknown>): void {
+    if (
+      changed.has("id") ||
+      changed.has("reducer") ||
+      changed.has("initial") ||
+      changed.has("dataProvider")
+    ) {
+      const prevId = changed.get("id");
+      if (typeof prevId === "string" && prevId && prevId !== this.id) {
+        unregisterStore(prevId);
+      }
+      this.bootstrap();
+    }
+  }
+
+  private dpId(): string {
+    return (this.dataProvider || this.id || "").trim();
+  }
+
+  private bootstrap(): void {
+    if (!this.id) return;
+    this.compileReducer();
+    this.state = this.clone(this.initial);
+    this.historyStack = [];
+    this.lastError = null;
+    this.publish();
+    const handle: StoreHandle = {
+      id: this.id,
+      dispatch: (action) => this.enqueue(action),
+      getState: () => this.state,
+      reset: () => this.reset(),
+    };
+    registerStore(handle);
+  }
+
+  private compileReducer(): void {
+    this.compiled = null;
+    const src = (this.reducer || "").trim();
+    if (!src) return;
+    if (src.length > 32_768) {
+      this.fail("reducer trop long (max 32 Ko)");
+      return;
+    }
+    try {
+      const expr = jsonata(src);
+      registerInteractiveHelpers(expr);
+      // Désactiver impureté
+      expr.assign("random", () => {
+        throw new Error("$random interdit dans un reducer (utiliser $rand)");
+      });
+      expr.assign("now", () => {
+        throw new Error("$now interdit dans un reducer (utiliser $action.t)");
+      });
+      this.compiled = expr;
+    } catch (err) {
+      this.fail(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  private enqueue(action: SonicActionMessage): void {
+    if (action.type === "@reset") {
+      this.reset();
+      return;
+    }
+    if (action.type === "@undo") {
+      this.undo();
+      return;
+    }
+    this.queue.push(action);
+    void this.drain();
+  }
+
+  private async drain(): Promise<void> {
+    if (this.draining) return;
+    this.draining = true;
+    try {
+      while (this.queue.length) {
+        const action = this.queue.shift()!;
+        this.apply(action);
+      }
+    } finally {
+      this.draining = false;
+    }
+  }
+
+  private apply(action: SonicActionMessage): void {
+    if (!this.compiled) return;
+    const started = performance.now();
+    const env = {
+      width: typeof window !== "undefined" ? window.innerWidth : 0,
+      height: typeof window !== "undefined" ? window.innerHeight : 0,
+      now: action.t ?? started,
+    };
+    const bindings = {
+      state: this.state,
+      action: {
+        type: action.type,
+        payload: action.payload ?? null,
+        t: action.t ?? started,
+        dt: action.dt ?? null,
+      },
+      env,
+    };
+    try {
+      const expr = this.compiled;
+      // Bindings → $state, $action, $env (purs ; pas de $random / $now)
+      const result = expr.evaluate(this.state, {
+        state: this.state,
+        action: bindings.action,
+        env,
+      });
+      const elapsed = performance.now() - started;
+      if (elapsed > this.budgetMs) {
+        this.fail(`budget ${this.budgetMs}ms dépassé (${elapsed.toFixed(1)}ms)`);
+        return;
+      }
+      if (result === undefined) return;
+      const encoded = JSON.stringify(result);
+      if (encoded !== undefined && encoded.length > this.maxStateBytes) {
+        this.fail(`état trop gros (max ${this.maxStateBytes} octets)`);
+        return;
+      }
+      if (this.history > 0) {
+        this.historyStack.push(this.clone(this.state));
+        if (this.historyStack.length > this.history) this.historyStack.shift();
+      }
+      this.state = result;
+      this.lastError = null;
+      this.publish();
+    } catch (err) {
+      this.fail(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  private reset(): void {
+    this.state = this.clone(this.initial);
+    this.historyStack = [];
+    this.lastError = null;
+    this.publish();
+  }
+
+  private undo(): void {
+    if (!this.historyStack.length) return;
+    this.state = this.historyStack.pop();
+    this.publish();
+  }
+
+  private publish(): void {
+    const id = this.dpId();
+    if (!id) return;
+    const payload =
+      this.state && typeof this.state === "object"
+        ? { ...(this.state as object), lastError: this.lastError }
+        : { value: this.state, lastError: this.lastError };
+    set(id, payload as never);
+  }
+
+  private fail(message: string): void {
+    this.lastError = message;
+    this.dispatchEvent(
+      new CustomEvent("error", {
+        detail: { message },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.publish();
+  }
+
+  private clone(v: unknown): unknown {
+    if (v === null || typeof v !== "object") return v;
+    try {
+      return JSON.parse(JSON.stringify(v));
+    } catch {
+      return v;
+    }
+  }
+
+  /** API élément : dispatch manuel. */
+  dispatchAction(action: SonicActionMessage): void {
+    registryDispatch(this.id, action);
+  }
+
+  render() {
+    return html``;
+  }
+}
+
+export default SonicStore;

package/src/core/components/functional/interactive/ticker.ts

@@ -0,0 +1,171 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { get } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { dispatch, type SonicActionMessage } from "./registry";
+
+const tagName = "sonic-ticker";
+
+/**
+ * Horloge déclarative : émet `tick` avec `dt` vers un store.
+ */
+@customElement(tagName)
+export class SonicTicker extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: Number })
+  interval = 500;
+
+  /** Chemin dans le DP du store pour l’intervalle (ex. `speed`). */
+  @property({ type: String, attribute: "interval-key" })
+  intervalKey = "";
+
+  /** Chemin booléen pause (ex. `running`). */
+  @property({ type: String, attribute: "running-key" })
+  runningKey = "";
+
+  /** `interval` | `raf` */
+  @property({ type: String })
+  mode: "interval" | "raf" = "interval";
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  private timer: number | null = null;
+  private raf = 0;
+  private last = 0;
+  private acc = 0;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener("visibilitychange", this.onVis);
+    this.restart();
+  }
+
+  disconnectedCallback(): void {
+    document.removeEventListener("visibilitychange", this.onVis);
+    this.stop();
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: Map<string | number | symbol, unknown>): void {
+    if (
+      changed.has("interval") ||
+      changed.has("mode") ||
+      changed.has("target") ||
+      changed.has("intervalKey") ||
+      changed.has("runningKey")
+    ) {
+      this.restart();
+    }
+  }
+
+  private onVis = () => {
+    if (document.hidden) this.stop();
+    else this.restart();
+  };
+
+  private stop(): void {
+    if (this.timer != null) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    if (this.raf) {
+      cancelAnimationFrame(this.raf);
+      this.raf = 0;
+    }
+    this.acc = 0;
+  }
+
+  private restart(): void {
+    this.stop();
+    if (!this.target || document.hidden) return;
+    this.last = performance.now();
+    if (this.mode === "raf") {
+      const loop = (now: number) => {
+        this.raf = requestAnimationFrame(loop);
+        if (!this.isRunning()) {
+          this.last = now;
+          return;
+        }
+        const raw = Math.min(100, now - this.last);
+        this.last = now;
+        this.acc += raw;
+        const ms = this.currentInterval();
+        while (this.acc >= ms) {
+          this.acc -= ms;
+          this.emit(ms);
+        }
+      };
+      this.raf = requestAnimationFrame(loop);
+      return;
+    }
+    this.timer = window.setInterval(() => {
+      if (!this.isRunning()) return;
+      const now = performance.now();
+      const dt = Math.min(1000, now - this.last);
+      this.last = now;
+      this.emit(dt);
+    }, this.currentInterval());
+  }
+
+  private currentInterval(): number {
+    let ms = this.interval;
+    if (this.intervalKey && this.target) {
+      try {
+        const state = get(this.target) as Record<string, unknown> | undefined;
+        const v = this.path(state, this.intervalKey);
+        if (typeof v === "number" && Number.isFinite(v)) ms = v;
+      } catch {
+        /* keep */
+      }
+    }
+    return Math.max(16, ms);
+  }
+
+  private isRunning(): boolean {
+    if (!this.runningKey || !this.target) return true;
+    try {
+      const state = get(this.target) as Record<string, unknown> | undefined;
+      return Boolean(this.path(state, this.runningKey));
+    } catch {
+      return true;
+    }
+  }
+
+  private path(obj: unknown, path: string): unknown {
+    if (!obj || typeof obj !== "object") return undefined;
+    let cur: any = obj;
+    for (const p of path.split(".").filter(Boolean)) {
+      if (cur == null) return undefined;
+      cur = cur[p];
+    }
+    return cur;
+  }
+
+  private emit(dt: number): void {
+    const action: SonicActionMessage = { type: "tick", payload: { dt }, dt };
+    if (this.target) dispatch(this.target, action);
+    if (this.dispatchEventFlag) {
+      this.dispatchEvent(
+        new CustomEvent("sonic-action", {
+          detail: action,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html``;
+  }
+}
+
+export default SonicTicker;