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

package/src/core/components/functional/if/if.ts

@@ -1,23 +1,70 @@
 import {css, html, LitElement, nothing} from "lit";
 import {customElement, property} from "lit/decorators.js";
-const tagName = "sonic-if"; // For Astro.build
+import {Subscriber} from "@supersoniks/concorde/mixins";
+
+const tagName = "sonic-if";
+
+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;
+}
+
 /**
- * Le composant *sonic-if* affiche son contenu dans le slot principal si sa propriété .condition est évaluée à true
+ * Affiche le slot si `.condition` est true **ou** via attributs SDUI
+ * `dataProvider` + `key` (+ `equals` / `not` / `truthy` / `gt` / `lt`).
  */
 @customElement(tagName)
-export class SonicIF extends LitElement {
+export class SonicIF extends Subscriber(LitElement) {
   static styles = css`
     :host {
       display: contents;
     }
   `;
 
-  /**
-   * Le contenu s'affiche si la condition est évaluée à true.
-   */
+  /** Mode Lit classique. */
   @property({type: Boolean}) condition = false;
+
+  @property({type: String}) key = "";
+
+  @property({type: String}) equals = "";
+
+  @property({type: String}) not = "";
+
+  @property({type: Boolean}) truthy = false;
+
+  @property({type: String}) gt = "";
+
+  @property({type: String}) lt = "";
+
+  private attrMode(): boolean {
+    return Boolean(
+      this.dataProvider &&
+        (this.key ||
+          this.truthy ||
+          this.equals !== "" ||
+          this.not !== "" ||
+          this.gt !== "" ||
+          this.lt !== ""),
+    );
+  }
+
+  private show(): boolean {
+    if (!this.attrMode()) return this.condition;
+    const value = pathGet(this.props, this.key);
+    if (this.equals !== "") return String(value) === this.equals;
+    if (this.not !== "") return String(value) !== this.not;
+    if (this.gt !== "") return Number(value) > Number(this.gt);
+    if (this.lt !== "") return Number(value) < Number(this.lt);
+    return Boolean(value);
+  }
+
   render() {
-    if (!this.condition) return nothing;
+    if (!this.show()) return nothing;
     return html` <slot></slot> `;
   }
 }

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

@@ -0,0 +1,84 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dispatch, type SonicActionMessage } from "./registry";
+
+const tagName = "sonic-action";
+
+/**
+ * Wrapper clic → dispatch vers un store.
+ * `hold-repeat="170,50"` pour d-pad tactile.
+ */
+@customElement(tagName)
+export class SonicAction extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: String })
+  type = "";
+
+  @property({ type: Object })
+  payload: unknown = null;
+
+  @property({ type: String, attribute: "hold-repeat" })
+  holdRepeat = "";
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  private holdTimer: number | null = null;
+  private holdInterval: number | null = null;
+
+  private onPointerDown = (e: PointerEvent) => {
+    if (e.button != null && e.button !== 0) return;
+    this.emit();
+    const parts = this.holdRepeat.split(",").map((s) => Number(s.trim()));
+    if (parts.length === 2 && parts.every((n) => Number.isFinite(n))) {
+      const [delay, interval] = parts;
+      this.holdTimer = window.setTimeout(() => {
+        this.emit();
+        this.holdInterval = window.setInterval(() => this.emit(), Math.max(16, interval));
+      }, Math.max(0, delay));
+    }
+  };
+
+  private onPointerUp = () => this.clearHold();
+
+  private clearHold(): void {
+    if (this.holdTimer != null) clearTimeout(this.holdTimer);
+    if (this.holdInterval != null) clearInterval(this.holdInterval);
+    this.holdTimer = null;
+    this.holdInterval = null;
+  }
+
+  private emit(): void {
+    if (!this.type) return;
+    const action: SonicActionMessage = { type: this.type, payload: this.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`<slot
+      @pointerdown=${this.onPointerDown}
+      @pointerup=${this.onPointerUp}
+      @pointercancel=${this.onPointerUp}
+      @pointerleave=${this.onPointerUp}
+    ></slot>`;
+  }
+}
+
+export default SonicAction;

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.