@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.3

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

@@ -0,0 +1,171 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dispatch, type SonicActionMessage } from "./registry";
+
+const tagName = "sonic-keyboard";
+
+type KeymapValue = string | { type: string; payload?: unknown };
+type Keymap = Record<string, KeymapValue>;
+type RepeatCfg = Record<string, [number, number]>;
+type HeldKey = { type: string; payload?: unknown; timer?: number; interval?: number };
+
+/**
+ * Source d’actions clavier → store (`target`).
+ * Opt-in `@supersoniks/concorde/interactive`.
+ */
+@customElement(tagName)
+export class SonicKeyboard extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+    :host([scope="focus"]) {
+      display: block;
+      outline: none;
+    }
+    :host([scope="focus"]:focus) {
+      outline: 2px solid var(--sc-primary, #3b82f6);
+      outline-offset: 2px;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: Object })
+  keymap: Keymap = {};
+
+  /** `document` | `focus` */
+  @property({ type: String })
+  scope: "document" | "focus" = "document";
+
+  /** `{ "left": [delayMs, intervalMs] }` */
+  @property({ type: Object })
+  repeat: RepeatCfg = {};
+
+  @property({ type: Boolean })
+  keyup = false;
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  private held = new Map<string, HeldKey>();
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.scope === "focus") {
+      if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+    }
+    this.bindTarget().addEventListener("keydown", this.onKeyDown);
+    this.bindTarget().addEventListener("keyup", this.onKeyUp);
+    window.addEventListener("blur", this.releaseAll);
+    document.addEventListener("visibilitychange", this.onVis);
+  }
+
+  disconnectedCallback(): void {
+    this.bindTarget().removeEventListener("keydown", this.onKeyDown);
+    this.bindTarget().removeEventListener("keyup", this.onKeyUp);
+    window.removeEventListener("blur", this.releaseAll);
+    document.removeEventListener("visibilitychange", this.onVis);
+    this.releaseAll();
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: Map<string | number | symbol, unknown>): void {
+    if (changed.has("scope")) {
+      // rebind would need disconnect/connect; keep simple: focus ring attrs
+      if (this.scope === "focus" && !this.hasAttribute("tabindex")) this.tabIndex = 0;
+    }
+  }
+
+  private bindTarget(): EventTarget {
+    return this.scope === "focus" ? this : window;
+  }
+
+  private onVis = () => {
+    if (document.hidden) this.releaseAll();
+  };
+
+  private onKeyDown = (ev: Event) => {
+    const e = ev as KeyboardEvent;
+    if (e.repeat) return; // handled via our DAS/ARR
+    if (this.isEditableTarget(e.target)) return;
+    const code = e.code || e.key;
+    const mapped = this.keymap?.[code] ?? this.keymap?.[e.key];
+    if (!mapped) return;
+    e.preventDefault();
+    const action = this.toAction(mapped);
+    this.emit(action);
+    const rep = this.repeat?.[action.type];
+    if (rep) {
+      const [delay, interval] = rep;
+      const entry: HeldKey = {
+        type: action.type,
+        payload: action.payload,
+        timer: window.setTimeout(() => {
+          this.emit({ type: action.type, payload: action.payload });
+          entry.interval = window.setInterval(() => {
+            this.emit({ type: action.type, payload: action.payload });
+          }, Math.max(16, interval));
+        }, Math.max(0, delay)),
+      };
+      this.held.set(code, entry);
+    } else {
+      this.held.set(code, { type: action.type, payload: action.payload });
+    }
+  };
+
+  private onKeyUp = (ev: Event) => {
+    const e = ev as KeyboardEvent;
+    const code = e.code || e.key;
+    const held = this.held.get(code);
+    if (held) {
+      if (held.timer) clearTimeout(held.timer);
+      if (held.interval) clearInterval(held.interval);
+      this.held.delete(code);
+      if (this.keyup) {
+        this.emit({ type: `${held.type}:up`, payload: held.payload });
+      }
+    }
+  };
+
+  private releaseAll = () => {
+    for (const [, held] of this.held) {
+      if (held.timer) clearTimeout(held.timer);
+      if (held.interval) clearInterval(held.interval);
+    }
+    this.held.clear();
+  };
+
+  private isEditableTarget(t: EventTarget | null): boolean {
+    if (!(t instanceof HTMLElement)) return false;
+    const tag = t.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+    if (t.isContentEditable) return true;
+    return Boolean(t.closest("input,textarea,select,[contenteditable=true]"));
+  }
+
+  private toAction(mapped: KeymapValue): SonicActionMessage {
+    if (typeof mapped === "string") return { type: mapped };
+    return { type: mapped.type, payload: mapped.payload };
+  }
+
+  private emit(action: SonicActionMessage): void {
+    if (this.target) dispatch(this.target, action);
+    if (this.dispatchEventFlag) {
+      this.dispatchEvent(
+        new CustomEvent("sonic-action", {
+          detail: action,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return this.scope === "focus" ? html`<slot></slot>` : html``;
+  }
+}
+
+export default SonicKeyboard;

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,270 @@
+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();
+  }
+
+  /** Action optionnelle après bootstrap (ex. `view` pour peindre la grille). */
+  @property({ type: String, attribute: "boot-action" })
+  bootAction = "";
+
+  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);
+    const boot = (this.bootAction || "").trim();
+    if (boot) this.enqueue({ type: boot, t: performance.now() });
+  }
+
+  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()!;
+        await this.apply(action);
+      }
+    } finally {
+      this.draining = false;
+    }
+  }
+
+  private async apply(action: SonicActionMessage): Promise<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 = await 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;