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

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;

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

@@ -1,18 +1,58 @@
 import {LitElement, html} from "lit";
-import {customElement} from "lit/decorators.js";
+import {customElement, property} from "lit/decorators.js";
 import {Subscriber} from "@supersoniks/concorde/mixins";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
-const tagName = "sonic-value"; // For Astro.build
+
+const tagName = "sonic-value";
+
+/**
+ * Affiche une valeur du DataProvider (`key`).
+ * `format="00000"` pad numérique, ou `format="intl:fr-FR"` / `format="intl:fr-FR:currency:EUR"`.
+ */
 @customElement(tagName)
 export class SonicValue extends Subscriber(LitElement) {
+  @property({type: String}) format = "";
+
   connectedCallback(): void {
     this.setAttribute("subDataProvider", this.getAttribute("key"));
     super.connectedCallback();
   }
+
+  private formatted(): string {
+    const raw = this.props;
+    if (typeof raw === "object" || raw === undefined) return "";
+    const s = String(raw);
+    if (!this.format) return s;
+    if (this.format.startsWith("intl:")) {
+      const parts = this.format.slice(5).split(":");
+      const locale = parts[0] || "fr-FR";
+      const style = parts[1];
+      const currency = parts[2] || "EUR";
+      const n = Number(raw);
+      if (!Number.isFinite(n)) return s;
+      if (style === "currency") {
+        return new Intl.NumberFormat(locale, {style: "currency", currency}).format(n);
+      }
+      if (style === "percent") {
+        return new Intl.NumberFormat(locale, {style: "percent"}).format(n);
+      }
+      return new Intl.NumberFormat(locale).format(n);
+    }
+    // pad pattern like 00000
+    if (/^0+$/.test(this.format)) {
+      const n = Math.floor(Number(raw));
+      if (!Number.isFinite(n)) return s;
+      return String(n).padStart(this.format.length, "0");
+    }
+    return s;
+  }
+
   render() {
-    if (typeof this.props === "object" || this.props === undefined)
+    if (typeof this.props === "object" || this.props === undefined) {
       return html`<slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>`;
-    return html`${unsafeHTML(this.props.toString())}<slot name="prefix"></slot><slot></slot
+    }
+    const text = this.format ? this.formatted() : this.props.toString();
+    return html`${unsafeHTML(text)}<slot name="prefix"></slot><slot></slot
       ><slot name="suffix"></slot>`;
   }
 }

package/src/core/components/ui/_css/rounded.ts

@@ -0,0 +1,36 @@
+import { css } from "lit";
+
+export type Rounded = "" | "base" | "none" | "full" | "sm" | "md" | "lg" | "xl";
+
+export const hostRounded = css`
+  :host {
+    --sc-_rounded: 0;
+    border-radius: var(--sc-_rounded);
+  }
+  :host([rounded]),
+  :host([rounded="base"]) {
+    --sc-_rounded: var(--sc-rounded);
+    overflow: hidden;
+  }
+  :host([rounded="sm"]) {
+    --sc-_rounded: var(--sc-rounded-sm);
+  }
+
+  :host([rounded="md"]) {
+    --sc-_rounded: var(--sc-rounded-md);
+  }
+
+  :host([rounded="lg"]) {
+    --sc-_rounded: var(--sc-rounded-lg);
+  }
+  :host([rounded="xl"]) {
+    --sc-_rounded: var(--sc-rounded-xl);
+  }
+
+  :host([rounded="full"]) {
+    --sc-_rounded: 50% !important;
+  }
+  :host([rounded="none"]) {
+    --sc-_rounded: 0 !important;
+  }
+`;

package/src/core/components/ui/_css/type.ts

@@ -1,5 +1,54 @@
 import { css } from "lit";
 
+/** Icônes pour les composants à `status` (API messages, alert, toast). */
+export const statusIcon = {
+  default: "info-empty",
+  info: "info-empty",
+  success: "check-circled-outline",
+  warning: "warning-circled-outline",
+  error: "warning-circled-outline",
+};
+
+export type StatusIconKey = keyof typeof statusIcon;
+
+export function toStatus(value?: string): StatusIconKey | undefined {
+  if (!value) return undefined;
+  if (value === "danger") return "error";
+  return value in statusIcon ? (value as StatusIconKey) : undefined;
+}
+
+export function statusAriaRole(status?: StatusIconKey): "alert" | "status" {
+  return status === "error" ? "alert" : "status";
+}
+
+export function statusAriaLive(status?: StatusIconKey): "polite" | null {
+  return status === "error" ? null : "polite";
+}
+
+export const statusColor = css`
+  :host {
+    --sc-_color: var(--sc-base-content, #000);
+    color: var(--sc-_color);
+  }
+
+  :host([status="warning"]) {
+    --sc-_color: var(--sc-warning, var(--sc-base-content, #000));
+  }
+  :host([status="error"]) {
+    --sc-_color: var(--sc-danger, var(--sc-base-content, #000));
+  }
+  :host([status="info"]) {
+    --sc-_color: var(--sc-info, var(--sc-base-content, #000));
+  }
+  :host([status="success"]) {
+    --sc-_color: var(--sc-success, var(--sc-base-content, #000));
+  }
+
+  .inherit-color {
+    color: var(--sc-_color);
+  }
+`;
+
 export const typeColor = css`
   :host {
     --sc-_color: inherit;

package/src/core/components/ui/_i18n/ui-aria-labels.ts

@@ -0,0 +1,104 @@
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+
+/** Langues supportées pour les libellés ARIA UI (anglais par défaut). */
+export type UiLang = "en" | "fr" | "de" | "nl" | "es" | "it";
+
+export type UiLabelDict = Partial<Record<UiLang, string>> & { en: string };
+
+const supported = new Set<string>(["en", "fr", "de", "nl", "es", "it"]);
+
+/** Lit la langue courante à chaque appel (pas d'état par composant). */
+export function resolveUiLabel(dict: UiLabelDict, lang?: string): string {
+  const code = (lang ?? HTML.getLanguage() ?? "en").split("-")[0].toLowerCase();
+  if (supported.has(code) && dict[code as UiLang]) {
+    return dict[code as UiLang]!;
+  }
+  return dict.en;
+}
+
+export const uiAriaLabels = {
+  closeWindow: {
+    en: "Close window",
+    fr: "Fermer la fenêtre",
+    de: "Fenster schließen",
+    nl: "Venster sluiten",
+    es: "Cerrar ventana",
+    it: "Chiudi finestra",
+  },
+  closeAlert: {
+    en: "Close",
+    fr: "Fermer",
+    de: "Schließen",
+    nl: "Sluiten",
+    es: "Cerrar",
+    it: "Chiudi",
+  },
+  showPassword: {
+    en: "Show password",
+    fr: "Afficher le mot de passe",
+    de: "Passwort anzeigen",
+    nl: "Wachtwoord tonen",
+    es: "Mostrar contraseña",
+    it: "Mostra password",
+  },
+  hidePassword: {
+    en: "Hide password",
+    fr: "Masquer le mot de passe",
+    de: "Passwort ausblenden",
+    nl: "Wachtwoord verbergen",
+    es: "Ocultar contraseña",
+    it: "Nascondi password",
+  },
+  closeToast: {
+    en: "Close notification",
+    fr: "Fermer la notification",
+    de: "Benachrichtigung schließen",
+    nl: "Melding sluiten",
+    es: "Cerrar notificación",
+    it: "Chiudi notifica",
+  },
+  closeToastError: {
+    en: "Close error message",
+    fr: "Fermer le message d'erreur",
+    de: "Fehlermeldung schließen",
+    nl: "Foutmelding sluiten",
+    es: "Cerrar mensaje de error",
+    it: "Chiudi messaggio di errore",
+  },
+  closeToastWarning: {
+    en: "Close warning",
+    fr: "Fermer l'avertissement",
+    de: "Warnung schließen",
+    nl: "Waarschuwing sluiten",
+    es: "Cerrar advertencia",
+    it: "Chiudi avviso",
+  },
+  closeToastSuccess: {
+    en: "Close success message",
+    fr: "Fermer le message de succès",
+    de: "Erfolgsmeldung schließen",
+    nl: "Succesmelding sluiten",
+    es: "Cerrar mensaje de éxito",
+    it: "Chiudi messaggio di successo",
+  },
+  closeToastInfo: {
+    en: "Close information message",
+    fr: "Fermer l'information",
+    de: "Information schließen",
+    nl: "Informatie sluiten",
+    es: "Cerrar información",
+    it: "Chiudi informazione",
+  },
+} as const satisfies Record<string, UiLabelDict>;
+
+const toastCloseByStatus: Record<string, UiLabelDict> = {
+  error: uiAriaLabels.closeToastError,
+  warning: uiAriaLabels.closeToastWarning,
+  success: uiAriaLabels.closeToastSuccess,
+  info: uiAriaLabels.closeToastInfo,
+};
+
+export function resolveToastCloseLabel(status?: string): string {
+  const dict = status ? toastCloseByStatus[status] : undefined;
+  return resolveUiLabel(dict ?? uiAriaLabels.closeToast);
+}