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

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

@@ -0,0 +1,197 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { dispatch, type SonicActionMessage } from "./registry";
+import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
+
+const tagName = "sonic-gamepad";
+
+type RepeatCfg = Record<string, [number, number]>;
+
+const STANDARD: Record<string, number | { axis: number; dir: 1 | -1 }> = {
+  "dpad-up": 12,
+  "dpad-down": 13,
+  "dpad-left": 14,
+  "dpad-right": 15,
+  a: 0,
+  b: 1,
+  x: 2,
+  y: 3,
+  start: 9,
+  select: 8,
+  "ls-x-": { axis: 0, dir: -1 },
+  "ls-x+": { axis: 0, dir: 1 },
+  "ls-y-": { axis: 1, dir: -1 },
+  "ls-y+": { axis: 1, dir: 1 },
+};
+
+/**
+ * Manette → actions store. Raf uniquement si une pad est connectée.
+ */
+@customElement(tagName)
+export class SonicGamepad extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: Object })
+  keymap: Record<string, string | { type: string; payload?: unknown }> = {
+    "dpad-left": "left",
+    "dpad-right": "right",
+    "dpad-up": "rotate",
+    "dpad-down": "soft-drop",
+    a: "rotate",
+    b: "drop",
+    start: "pause",
+  };
+
+  @property({ type: Number })
+  deadzone = 0.25;
+
+  @property({ type: Object })
+  repeat: RepeatCfg = {};
+
+  @property({ type: String })
+  dataProvider = "";
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  @state() private connected = false;
+
+  private raf = 0;
+  private prev = new Map<string, boolean>();
+  private heldTimers = new Map<string, { timer?: number; interval?: number }>();
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("gamepadconnected", this.onConnect);
+    window.addEventListener("gamepaddisconnected", this.onDisconnect);
+    this.scan();
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener("gamepadconnected", this.onConnect);
+    window.removeEventListener("gamepaddisconnected", this.onDisconnect);
+    this.stopLoop();
+    this.clearHolds();
+    super.disconnectedCallback();
+  }
+
+  private onConnect = () => this.scan();
+  private onDisconnect = () => this.scan();
+
+  private scan(): void {
+    const pads = navigator.getGamepads?.() ?? [];
+    const any = [...pads].some(Boolean);
+    this.connected = any;
+    this.publishStatus();
+    if (any) this.startLoop();
+    else this.stopLoop();
+  }
+
+  private publishStatus(): void {
+    if (!this.dataProvider) return;
+    const pads = navigator.getGamepads?.() ?? [];
+    const first = [...pads].find(Boolean);
+    set(this.dataProvider, {
+      connected: this.connected,
+      id: first?.id ?? null,
+    } as never);
+  }
+
+  private startLoop(): void {
+    if (this.raf) return;
+    const loop = () => {
+      this.raf = requestAnimationFrame(loop);
+      this.poll();
+    };
+    this.raf = requestAnimationFrame(loop);
+  }
+
+  private stopLoop(): void {
+    if (this.raf) cancelAnimationFrame(this.raf);
+    this.raf = 0;
+  }
+
+  private poll(): void {
+    const pads = navigator.getGamepads?.() ?? [];
+    const pad = [...pads].find(Boolean);
+    if (!pad) {
+      this.scan();
+      return;
+    }
+    for (const [name, mapped] of Object.entries(this.keymap || {})) {
+      const spec = STANDARD[name];
+      if (spec == null) continue;
+      let pressed = false;
+      if (typeof spec === "number") {
+        pressed = Boolean(pad.buttons[spec]?.pressed);
+      } else {
+        const axis = pad.axes[spec.axis] ?? 0;
+        pressed = spec.dir < 0 ? axis < -this.deadzone : axis > this.deadzone;
+      }
+      const was = this.prev.get(name) ?? false;
+      if (pressed && !was) {
+        this.fire(mapped);
+        this.startRepeat(name, mapped);
+      } else if (!pressed && was) {
+        this.stopRepeat(name);
+      }
+      this.prev.set(name, pressed);
+    }
+  }
+
+  private startRepeat(
+    name: string,
+    mapped: string | { type: string; payload?: unknown },
+  ): void {
+    const action = typeof mapped === "string" ? { type: mapped } : mapped;
+    const rep = this.repeat?.[action.type];
+    if (!rep) return;
+    const [delay, interval] = rep;
+    const entry: { timer?: number; interval?: number } = {};
+    entry.timer = window.setTimeout(() => {
+      this.fire(mapped);
+      entry.interval = window.setInterval(() => this.fire(mapped), Math.max(16, interval));
+    }, Math.max(0, delay));
+    this.heldTimers.set(name, entry);
+  }
+
+  private stopRepeat(name: string): void {
+    const h = this.heldTimers.get(name);
+    if (!h) return;
+    if (h.timer) clearTimeout(h.timer);
+    if (h.interval) clearInterval(h.interval);
+    this.heldTimers.delete(name);
+  }
+
+  private clearHolds(): void {
+    for (const name of [...this.heldTimers.keys()]) this.stopRepeat(name);
+  }
+
+  private fire(mapped: string | { type: string; payload?: unknown }): void {
+    const action: SonicActionMessage =
+      typeof mapped === "string" ? { type: mapped } : { type: mapped.type, payload: mapped.payload };
+    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 SonicGamepad;

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

@@ -0,0 +1,136 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dispatch, type SonicActionMessage } from "./registry";
+
+const tagName = "sonic-gesture";
+
+/**
+ * Zone tactile : tap, double-tap, swipe, long-press (+ drag optionnel).
+ */
+@customElement(tagName)
+export class SonicGesture extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: Number, attribute: "swipe-threshold" })
+  swipeThreshold = 40;
+
+  @property({ type: Number, attribute: "long-press-ms" })
+  longPressMs = 450;
+
+  @property({ type: Number, attribute: "double-tap-ms" })
+  doubleTapMs = 280;
+
+  @property({ type: Boolean })
+  drag = false;
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  private startX = 0;
+  private startY = 0;
+  private startT = 0;
+  private longTimer: number | null = null;
+  private lastTap = 0;
+  private pointerId: number | null = null;
+
+  private onDown = (e: PointerEvent) => {
+    if (this.pointerId != null) return;
+    this.pointerId = e.pointerId;
+    this.setPointerCapture(e.pointerId);
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.startT = performance.now();
+    this.longTimer = window.setTimeout(() => {
+      this.emit({ type: "long-press" });
+      this.longTimer = null;
+    }, this.longPressMs);
+  };
+
+  private onMove = (e: PointerEvent) => {
+    if (this.pointerId !== e.pointerId) return;
+    const dx = e.clientX - this.startX;
+    const dy = e.clientY - this.startY;
+    if (Math.hypot(dx, dy) > 10 && this.longTimer != null) {
+      clearTimeout(this.longTimer);
+      this.longTimer = null;
+    }
+    if (this.drag) {
+      const rect = this.getBoundingClientRect();
+      this.emit({
+        type: "drag",
+        payload: {
+          dx: rect.width ? dx / rect.width : 0,
+          dy: rect.height ? dy / rect.height : 0,
+        },
+      });
+    }
+  };
+
+  private onUp = (e: PointerEvent) => {
+    if (this.pointerId !== e.pointerId) return;
+    if (this.longTimer != null) {
+      clearTimeout(this.longTimer);
+      this.longTimer = null;
+    }
+    const dx = e.clientX - this.startX;
+    const dy = e.clientY - this.startY;
+    const dist = Math.hypot(dx, dy);
+    const dt = performance.now() - this.startT;
+    this.pointerId = null;
+    if (dist >= this.swipeThreshold) {
+      const type =
+        Math.abs(dx) > Math.abs(dy)
+          ? dx > 0
+            ? "swipe-right"
+            : "swipe-left"
+          : dy > 0
+            ? "swipe-down"
+            : "swipe-up";
+      this.emit({ type });
+      return;
+    }
+    if (dt < this.longPressMs) {
+      const now = performance.now();
+      if (now - this.lastTap < this.doubleTapMs) {
+        this.emit({ type: "double-tap" });
+        this.lastTap = 0;
+      } else {
+        this.emit({ type: "tap" });
+        this.lastTap = now;
+      }
+    }
+  };
+
+  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 html`<slot
+      @pointerdown=${this.onDown}
+      @pointermove=${this.onMove}
+      @pointerup=${this.onUp}
+      @pointercancel=${this.onUp}
+    ></slot>`;
+  }
+}
+
+export default SonicGesture;

package/src/core/components/functional/interactive/helpers.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import {
+  clamp,
+  matrix,
+  rand,
+  randInt,
+  range,
+  rotate,
+  immutableSet,
+} from "./helpers";
+
+describe("interactive helpers", () => {
+  it("rand is deterministic for a seed sequence", () => {
+    const a = rand(1);
+    const b = rand(a.seed);
+    const a2 = rand(1);
+    expect(a.value).toBeGreaterThanOrEqual(0);
+    expect(a.value).toBeLessThan(1);
+    expect(a2.value).toBe(a.value);
+    expect(b.seed).not.toBe(a.seed);
+  });
+
+  it("randInt stays in range", () => {
+    let seed = 42;
+    for (let i = 0; i < 20; i++) {
+      const r = randInt(seed, 7);
+      expect(r.value).toBeGreaterThanOrEqual(0);
+      expect(r.value).toBeLessThan(7);
+      seed = r.seed;
+    }
+  });
+
+  it("matrix / rotate / set / clamp / range", () => {
+    expect(matrix(2, 3, 1)).toEqual([
+      [1, 1],
+      [1, 1],
+      [1, 1],
+    ]);
+    expect(rotate([
+      [1, 2],
+      [3, 4],
+    ])).toEqual([
+      [3, 1],
+      [4, 2],
+    ]);
+    expect(immutableSet({ a: { b: 1 } }, "a.b", 2)).toEqual({ a: { b: 2 } });
+    expect(clamp(5, 0, 3)).toBe(3);
+    expect(range(3)).toEqual([0, 1, 2]);
+  });
+});

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

@@ -0,0 +1,97 @@
+/**
+ * Helpers JSONata purs pour sonic-store (PRNG, matrix, set immuable…).
+ * `$random` / `$now` volontairement absents — rejouabilité.
+ */
+import type { Expression } from "jsonata";
+
+/** mulberry32 → { value: 0..1, seed } */
+export function rand(seed: unknown): { value: number; seed: number } {
+  let t = (Number(seed) >>> 0) + 0x6d2b79f5;
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  const next = t >>> 0;
+  return { value: ((next ^ (next >>> 14)) >>> 0) / 4294967296, seed: next };
+}
+
+export function randInt(seed: unknown, n: unknown): { value: number; seed: number } {
+  const r = rand(seed);
+  const max = Math.max(1, Math.floor(Number(n) || 1));
+  return { value: Math.floor(r.value * max), seed: r.seed };
+}
+
+export function clamp(value: unknown, min: unknown, max: unknown): number {
+  const v = Number(value);
+  const a = Number(min);
+  const b = Number(max);
+  return Math.min(b, Math.max(a, v));
+}
+
+export function range(n: unknown): number[] {
+  const len = Math.max(0, Math.min(10_000, Math.floor(Number(n) || 0)));
+  return Array.from({ length: len }, (_, i) => i);
+}
+
+/** Set immuable par chemin dot (`a.b.0.c`). */
+export function immutableSet(
+  obj: unknown,
+  path: unknown,
+  value: unknown,
+): unknown {
+  const parts = String(path ?? "")
+    .split(".")
+    .filter(Boolean);
+  if (!parts.length) return value;
+  const clone = (v: unknown): unknown => {
+    if (Array.isArray(v)) return v.slice();
+    if (v && typeof v === "object") return { ...(v as Record<string, unknown>) };
+    return v;
+  };
+  const root = clone(obj ?? {});
+  let cur: any = root;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    const next = cur[key];
+    cur[key] = clone(next ?? (/^\d+$/.test(parts[i + 1]) ? [] : {}));
+    cur = cur[key];
+  }
+  cur[parts[parts.length - 1]] = value;
+  return root;
+}
+
+export function matrix(w: unknown, h: unknown, fill: unknown = 0): number[][] {
+  const width = Math.max(0, Math.min(256, Math.floor(Number(w) || 0)));
+  const height = Math.max(0, Math.min(256, Math.floor(Number(h) || 0)));
+  const f = Number(fill) || 0;
+  return Array.from({ length: height }, () =>
+    Array.from({ length: width }, () => f),
+  );
+}
+
+/** Rotation 90° horaire d’une matrice 2D. */
+export function rotate(mat: unknown): number[][] {
+  if (!Array.isArray(mat) || !mat.length) return [];
+  const rows = mat as unknown[][];
+  const h = rows.length;
+  const w = Array.isArray(rows[0]) ? rows[0].length : 0;
+  const out: number[][] = Array.from({ length: w }, () =>
+    Array.from({ length: h }, () => 0),
+  );
+  for (let y = 0; y < h; y++) {
+    const row = rows[y];
+    if (!Array.isArray(row)) continue;
+    for (let x = 0; x < w; x++) {
+      out[x][h - 1 - y] = Number(row[x]) || 0;
+    }
+  }
+  return out;
+}
+
+export function registerInteractiveHelpers(expression: Expression): void {
+  expression.registerFunction("rand", rand);
+  expression.registerFunction("randInt", randInt);
+  expression.registerFunction("clamp", clamp);
+  expression.registerFunction("range", range);
+  expression.registerFunction("set", immutableSet);
+  expression.registerFunction("matrix", matrix);
+  expression.registerFunction("rotate", rotate);
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Addon interactivity déclarative (stores, inputs, matrix).
+ * Opt-in : `@supersoniks/concorde/interactive`
+ */
+export {
+  dispatch,
+  getStore,
+  listStoreIds,
+  type SonicActionMessage,
+} from "./registry";
+export { SonicStore } from "./store";
+export { SonicKeyboard } from "./keyboard";
+export { SonicGamepad } from "./gamepad";
+export { SonicGesture } from "./gesture";
+export { SonicAction } from "./action";
+export { SonicTicker } from "./ticker";
+export { SonicMatrix } from "./matrix";
+
+import "./store";
+import "./keyboard";
+import "./gamepad";
+import "./gesture";
+import "./action";
+import "./ticker";
+import "./matrix";

package/src/core/components/functional/interactive/interactive.md

@@ -0,0 +1,33 @@
+# Interactive (SDUI)
+
+Addon opt-in `@supersoniks/concorde/interactive` for **declarative** playable UIs under a strict CSP (no `eval`, no inline script, no `on*` handlers).
+
+## Components
+
+| Tag | Role |
+|---|---|
+| `sonic-store` | State + JSONata reducer (`$state`, `$action`, `$env`) |
+| `sonic-keyboard` | Keymap → actions |
+| `sonic-gamepad` | Standard gamepad → actions |
+| `sonic-gesture` | Tap / swipe / long-press |
+| `sonic-action` | Click / hold-repeat → action |
+| `sonic-ticker` | Clock `tick` with `dt` |
+| `sonic-matrix` | 2D grid canvas from DataProvider |
+
+Also: `sonic-if` accepts `dataProvider` + `key` + `equals`/`not`/`truthy`/`gt`/`lt` for SDUI. `sonic-value` accepts `format="00000"` or `format="intl:fr-FR"`.
+
+## Reducer purity
+
+Injected: `$rand`, `$randInt`, `$clamp`, `$range`, `$set`, `$matrix`, `$rotate`.  
+`$random` and `$now` throw — use `$rand(seed)` and `$action.t`.
+
+## CDN
+
+```html
+<script src="concorde-core.bundle.js"></script>
+<script src="concorde-interactive.bundle.js"></script>
+```
+
+## Out of scope (this pass)
+
+Declarative sound, multiplayer, persistence.

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;