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

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/functional/webgpu/gl-fallback.ts

@@ -45,6 +45,7 @@ export class WebGl2FallbackRuntime {
   private lastTime = 0;
   private disposed = false;
   private channelQueue: Promise<void> = Promise.resolve();
+  private elementResolver: ((key: string) => Element | null) | null = null;
 
   private constructor(canvas: HTMLCanvasElement, toy: ShaderToyRuntime) {
     this.canvas = canvas;
@@ -57,6 +58,11 @@ export class WebGl2FallbackRuntime {
     return new WebGl2FallbackRuntime(canvas, toy);
   }
 
+  setElementResolver(fn: ((key: string) => Element | null) | null) {
+    this.elementResolver = fn;
+    this.toy.setElementResolver(fn);
+  }
+
   /** WGSL ignoré — effet GLSL fixe (canaux / params OK). */
   async setShader(_userBody: string): Promise<void> {
     this.assertAlive();
@@ -77,6 +83,10 @@ export class WebGl2FallbackRuntime {
     this.assertAlive();
     const trimmed = url.trim();
     if (this.channelUrls[index] === trimmed) {
+      if (trimmed.startsWith("#")) {
+        this.toy.ensureElementTexture(trimmed);
+        return;
+      }
       // Même URL : s’assurer que la texture est bien chargée
       if (trimmed && !this.toy.getTextureSize(trimmed)) {
         await this.toy.ensureTextures([trimmed]);
@@ -85,8 +95,7 @@ export class WebGl2FallbackRuntime {
     }
     this.channelUrls[index] = trimmed;
     this.applySources();
-    const urls = this.channelUrls.filter(Boolean);
-    if (urls.length) await this.toy.ensureTextures(urls);
+    await this.ensureChannelAssets();
   }
 
   /** Applique les 4 canaux d’un coup (préféré au boot). */
@@ -100,8 +109,7 @@ export class WebGl2FallbackRuntime {
         urls[3].trim(),
       ];
       this.applySources();
-      const list = this.channelUrls.filter(Boolean);
-      if (list.length) await this.toy.ensureTextures(list);
+      await this.ensureChannelAssets();
     });
     return this.channelQueue;
   }
@@ -115,9 +123,17 @@ export class WebGl2FallbackRuntime {
     this.toy.resize(width, height);
   }
 
+  updateLiveChannels(resolveEl: (key: string) => Element | null) {
+    this.assertAlive();
+    this.toy.updateElementTextures(resolveEl);
+  }
+
   draw(state: WebGpuFrameState) {
     this.assertAlive();
     if (this.toy.isLost) return;
+    if (this.elementResolver) {
+      this.toy.updateElementTextures(this.elementResolver);
+    }
     const timeDelta =
       this.lastTime > 0 ? Math.max(0, state.time - this.lastTime) : 0;
     this.lastTime = state.time;
@@ -137,6 +153,14 @@ export class WebGl2FallbackRuntime {
     this.toy.dispose(loseContext);
   }
 
+  private async ensureChannelAssets() {
+    const urls = this.channelUrls.filter((u) => u && !u.startsWith("#"));
+    if (urls.length) await this.toy.ensureTextures(urls);
+    for (const key of this.channelUrls) {
+      if (key.startsWith("#")) this.toy.ensureElementTexture(key);
+    }
+  }
+
   private applySources() {
     const channels = new Map([
       [

package/src/core/components/functional/webgpu/gpu-runtime.ts

@@ -1,11 +1,53 @@
 /// <reference types="@webgpu/types" />
 
+import {
+  isFrameSource,
+  type SonicFrameSource,
+} from "@supersoniks/concorde/core/utils/mediaRef";
+import { shouldUploadElementFrame } from "../shader/gl-runtime";
 import { WebGpuCompileError } from "./types";
 import { buildWgslSource } from "./wgsl-prelude";
 
 const UNIFORM_BYTES = 64; // resolution+time+frame+mouse+params + pad
 const CHANNEL_COUNT = 4;
 
+/** `true` si la texture existante peut être réécrite (même taille). */
+export function channelTextureNeedsRecreate(
+  current: { width: number; height: number } | null | undefined,
+  nextW: number,
+  nextH: number,
+): boolean {
+  if (!current) return true;
+  return current.width !== nextW || current.height !== nextH;
+}
+
+function externalSourceSize(
+  src: TexImageSource,
+): { width: number; height: number } {
+  if (
+    typeof HTMLVideoElement !== "undefined" &&
+    src instanceof HTMLVideoElement
+  ) {
+    return { width: src.videoWidth || 1, height: src.videoHeight || 1 };
+  }
+  if (
+    typeof HTMLImageElement !== "undefined" &&
+    src instanceof HTMLImageElement
+  ) {
+    return {
+      width: src.naturalWidth || src.width || 1,
+      height: src.naturalHeight || src.height || 1,
+    };
+  }
+  if ("width" in src && "height" in src) {
+    return {
+      width: Math.max(1, Number(src.width) || 1),
+      height: Math.max(1, Number(src.height) || 1),
+    };
+  }
+  return { width: 1, height: 1 };
+}
+
 /** Adapter WebGPU : high-performance → low-power → défaut. */
 export async function requestBestAdapter(
   gpu: GPU = navigator.gpu!,
@@ -77,6 +119,13 @@ export class WebGpuRuntime {
     null,
   ];
   private channelUrls: [string, string, string, string] = ["", "", "", ""];
+  private channelLastSeq = [0, 0, 0, 0];
+  private channelLastSrc: (string | undefined)[] = [
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+  ];
   private placeholder: GPUTexture | null = null;
   private placeholderView: GPUTextureView | null = null;
   private bindGroup: GPUBindGroup | null = null;
@@ -185,10 +234,16 @@ export class WebGpuRuntime {
   async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
     this.assertAlive();
     const trimmed = url.trim();
+    if (trimmed.startsWith("#")) {
+      this.bindElementChannel(index, trimmed);
+      return;
+    }
     if (this.channelUrls[index] === trimmed && this.channelTextures[index]) {
       return;
     }
     this.channelUrls[index] = trimmed;
+    this.channelLastSeq[index] = 0;
+    this.channelLastSrc[index] = undefined;
     const token = ++this.channelLoadTokens[index];
     if (!trimmed) {
       this.destroyChannel(index);
@@ -197,24 +252,35 @@ export class WebGpuRuntime {
     }
     const img = await loadImage(trimmed);
     if (token !== this.channelLoadTokens[index] || this.disposed) return;
-    const texture = this.device.createTexture({
-      size: [img.width, img.height],
-      format: "rgba8unorm",
-      usage:
-        GPUTextureUsage.TEXTURE_BINDING |
-        GPUTextureUsage.COPY_DST |
-        GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-    this.device.queue.copyExternalImageToTexture(
-      { source: img },
-      { texture },
-      [img.width, img.height],
-    );
-    this.destroyChannel(index);
-    this.channelTextures[index] = texture;
-    this.channelViews[index] = texture.createView();
-    this.channelSizes[index] = { width: img.width, height: img.height };
-    this.bindGroup = null;
+    this.uploadExternal(index, img, /* flipY */ false);
+  }
+
+  /**
+   * Upload live des canaux `#id` / FrameSource / video / canvas.
+   * Recrée la texture seulement si la taille change (pas de createTexture chaque frame).
+   */
+  updateLiveChannels(resolveEl: (key: string) => Element | null) {
+    this.assertAlive();
+    for (let i = 0; i < CHANNEL_COUNT; i++) {
+      const key = this.channelUrls[i];
+      if (!key.startsWith("#")) continue;
+      const el = resolveEl(key);
+      const decision = shouldUploadElementFrame(
+        el,
+        this.channelLastSeq[i],
+        this.channelLastSrc[i],
+      );
+      if (!decision.upload || !decision.texSource) continue;
+      this.uploadExternal(i, decision.texSource, /* flipY */ true);
+      if (isFrameSource(el)) {
+        this.channelLastSeq[i] = (el as SonicFrameSource).frameSeq;
+      } else {
+        this.channelLastSeq[i] = (this.channelLastSeq[i] || 0) + 1;
+      }
+      if (decision.nextSrc !== undefined) {
+        this.channelLastSrc[i] = decision.nextSrc;
+      }
+    }
   }
 
   getTextureSize(url: string): { width: number; height: number } | null {
@@ -311,6 +377,76 @@ export class WebGpuRuntime {
     }
   }
 
+  private bindElementChannel(index: 0 | 1 | 2 | 3, key: string) {
+    if (this.channelUrls[index] === key && this.channelTextures[index]) {
+      return;
+    }
+    this.channelUrls[index] = key;
+    this.channelLastSeq[index] = 0;
+    this.channelLastSrc[index] = undefined;
+    this.channelLoadTokens[index]++;
+    if (!this.channelTextures[index]) {
+      const texture = this.device.createTexture({
+        size: [1, 1],
+        format: "rgba8unorm",
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      this.device.queue.writeTexture(
+        { texture },
+        new Uint8Array([0, 0, 0, 255]),
+        { bytesPerRow: 4 },
+        [1, 1],
+      );
+      this.channelTextures[index] = texture;
+      this.channelViews[index] = texture.createView();
+      this.channelSizes[index] = { width: 1, height: 1 };
+      this.bindGroup = null;
+    }
+  }
+
+  private uploadExternal(
+    index: number,
+    source: TexImageSource,
+    flipY: boolean,
+  ) {
+    const { width, height } = externalSourceSize(source);
+    const w = Math.max(1, width);
+    const h = Math.max(1, height);
+    const existing = this.channelTextures[index];
+    if (
+      existing &&
+      !channelTextureNeedsRecreate(this.channelSizes[index], w, h)
+    ) {
+      this.device.queue.copyExternalImageToTexture(
+        { source, flipY },
+        { texture: existing },
+        [w, h],
+      );
+      return;
+    }
+    const texture = this.device.createTexture({
+      size: [w, h],
+      format: "rgba8unorm",
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    this.device.queue.copyExternalImageToTexture(
+      { source, flipY },
+      { texture },
+      [w, h],
+    );
+    this.destroyChannel(index);
+    this.channelTextures[index] = texture;
+    this.channelViews[index] = texture.createView();
+    this.channelSizes[index] = { width: w, height: h };
+    this.bindGroup = null;
+  }
+
   private writeUniforms(state: WebGpuFrameState) {
     const data = new ArrayBuffer(UNIFORM_BYTES);
     const f32 = new Float32Array(data);

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

@@ -1,4 +1,4 @@
-import { toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
+import { toMediaUrl, mediaElementKey } from "@supersoniks/concorde/core/utils/mediaRef";
 
 export const LOG_PREFIX = "[sonic-webgpu]";
 
@@ -37,11 +37,17 @@ export function toNum(v: unknown, fallback: number): number {
   return fallback;
 }
 
+/** string (url / #id) | MediaRef → url | { element }. */
 export function channelFormValue(value: unknown): string | undefined {
   if (value === null || value === "") return "";
   if (typeof value === "string") return value.trim();
   const url = toMediaUrl(value);
   if (url) return url;
-  if (value && typeof value === "object") return undefined;
+  if (value && typeof value === "object") {
+    const el = (value as { element?: unknown }).element;
+    const key = mediaElementKey(el);
+    if (key) return key;
+    return undefined;
+  }
   return "";
 }

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

@@ -41,11 +41,22 @@ Simulation: `param0` = speed, `param1` = mouse attraction. WebGPU compute when a
 | `active-backend` | reflect |
 | `param0`…`param3` | floats (particles: speed / attraction) |
 | `targetX` / `targetY` | attractor 0–1 (DP, top-left origin) |
-| `channel0`…`channel3` | textures (image kernel) |
+| `channel0`…`channel3` | textures (image kernel) : URL, `#id` live (`SonicFrameSource`), ou MediaRef `{ element }` |
 | `dataProvider` | params / channels / `targetX`·`Y` |
 | `frame-out` | `frameUrl` + `snapshot` |
 | `play` / `mouse` | loop / pointer |
 
+## Live bridge (`#id`)
+
+Comme `sonic-shader` : `channel0="#plateau"` copie le canvas source chaque `frameSeq` (`copyExternalImageToTexture`). La texture GPU est **réutilisée** tant que la taille ne change pas (pas de `createTexture` / rebuild bind group chaque frame).
+
+```html
+<sonic-3d id="plateau" play …></sonic-3d>
+<sonic-webgpu channel0="#plateau" kernel="image" play shader="…"></sonic-webgpu>
+```
+
+Demo: [Visual stack — 3D → WebGPU live](#docs/_misc/visual-stack.md/visual-stack).
+
 ## Markup particles
 
 <sonic-code language="html">
@@ -61,7 +72,7 @@ Simulation: `param0` = speed, `param1` = mouse attraction. WebGPU compute when a
 
 ## Chaining
 
-Same MediaRef / DP bridge as the rest of the stack. No live texture bus with `sonic-shader` (separate contexts).
+Same MediaRef / DP bridge as the rest of the stack. Live textures entre composants : pont `#id` / `{ element }` (copie canvas), pas de contexte WebGPU partagé avec `sonic-shader`.
 
 ## CDN
 

package/src/core/components/functional/webgpu/webgpu.spec.ts

@@ -1,6 +1,8 @@
 import { expect, describe, it, vi, beforeAll } from "vitest";
 import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
 import { buildWgslSource, DEFAULT_MAIN_IMAGE } from "./wgsl-prelude";
+import { channelTextureNeedsRecreate } from "./gpu-runtime";
+import { channelFormValue } from "./helpers";
 import "./webgpu";
 import { SonicWebGpu } from "./webgpu";
 
@@ -28,6 +30,30 @@ describe("buildWgslSource", () => {
   });
 });
 
+describe("channelTextureNeedsRecreate", () => {
+  it("recrée si absent ou taille différente", () => {
+    expect(channelTextureNeedsRecreate(null, 64, 64)).toBe(true);
+    expect(channelTextureNeedsRecreate({ width: 32, height: 64 }, 64, 64)).toBe(
+      true,
+    );
+    expect(channelTextureNeedsRecreate({ width: 64, height: 64 }, 64, 64)).toBe(
+      false,
+    );
+  });
+});
+
+describe("channelFormValue", () => {
+  it("accepte url / #id / { element }", () => {
+    expect(channelFormValue("https://x/a.png")).toBe("https://x/a.png");
+    expect(channelFormValue("#plateau")).toBe("#plateau");
+    expect(channelFormValue({ element: "#plateau" })).toBe("#plateau");
+    expect(channelFormValue({ element: "scene" })).toBe("#scene");
+    expect(channelFormValue({ url: "https://x/a.png" })).toBe(
+      "https://x/a.png",
+    );
+  });
+});
+
 describe("sonic-webgpu", () => {
   beforeAll(() => {
     if (typeof globalThis.ResizeObserver === "undefined") {
@@ -67,6 +93,7 @@ describe("sonic-webgpu", () => {
       param1: 0.22,
       channel0: { url: "https://example.test/a.png" },
       channel1: "https://example.test/b.png",
+      channel2: { element: "#plateau" },
     });
     const el = TestUtils.bootstrap(
       `<sonic-webgpu dataProvider="${id}"></sonic-webgpu>`,
@@ -78,6 +105,7 @@ describe("sonic-webgpu", () => {
     expect(el.param1).toBe(0.22);
     expect(el.channel0).toBe("https://example.test/a.png");
     expect(el.channel1).toBe("https://example.test/b.png");
+    expect(el.channel2).toBe("#plateau");
 
     pub.param0.set(0.99);
     await new Promise((r) => setTimeout(r, 0));
@@ -138,4 +166,13 @@ describe("sonic-webgpu", () => {
     expect(parseBackendPrefer("webgl2")).toBe("webgl2");
     expect(parseBackendPrefer("nope")).toBe("auto");
   });
+
+  it("expose getFrameCanvas + frameSeq (SonicFrameSource)", () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-webgpu></sonic-webgpu>`,
+      true,
+    )[0] as SonicWebGpu;
+    expect(typeof el.getFrameCanvas).toBe("function");
+    expect(typeof el.frameSeq).toBe("number");
+  });
 });

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

@@ -3,6 +3,10 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
+import {
+  lookupLiveElement,
+  FrameConsumerRegistry,
+} from "@supersoniks/concorde/core/utils/mediaRef";
 import { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 import { formBind } from "./form-bind";
 import { WebGl2FallbackRuntime } from "./gl-fallback";
@@ -150,6 +154,7 @@ export class SonicWebGpu extends LitElement {
   private resizeObserver: ResizeObserver | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
   private rebuildToken = 0;
+  private frameConsumers = new FrameConsumerRegistry();
   ready = false;
   /** Évite deux boots concurrents (IO + rAF) qui disposent le fallback. */
   private boot: Promise<void> | null = null;
@@ -204,6 +209,7 @@ export class SonicWebGpu extends LitElement {
     this.removeEventListener("pointerenter", this.onPointerEnter);
     this.unbindFormProvider();
     this.revokeFrameUrl();
+    this.frameConsumers.clear();
     this.frameOutSeq++;
     this.frameOutBusy = false;
     this.resizeObserver?.disconnect();
@@ -404,6 +410,10 @@ export class SonicWebGpu extends LitElement {
       }
 
       this.runtime = runtime;
+      const maybeGl2 = this.runtime as unknown as {
+        setElementResolver?: (fn: (key: string) => Element | null) => void;
+      };
+      maybeGl2.setElementResolver?.((key) => this.lookupElement(key));
       const backend = runtime.backend as SonicWebGpuBackend;
       this.activeBackend = backend;
       let notice = "";
@@ -475,6 +485,21 @@ export class SonicWebGpu extends LitElement {
     return canvas;
   }
 
+  /** Résout `#id` dans getRootNode() puis document ; clés live `__sonic_frame_`. */
+  private lookupElement(key: string): Element | null {
+    if (!key.startsWith("#")) return null;
+    const live = lookupLiveElement(key);
+    if (live) return live;
+    const id = key.slice(1);
+    if (!id || id.startsWith("__sonic_frame_")) return null;
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      const el = root.getElementById(id);
+      if (el) return el;
+    }
+    return typeof document !== "undefined" ? document.getElementById(id) : null;
+  }
+
   private releaseRuntime() {
     this.stopLoop();
     this.ready = false;
@@ -486,6 +511,14 @@ export class SonicWebGpu extends LitElement {
     this.canvasEl = null;
   }
 
+  /** Enregistre les producteurs live pour play-offscreen auto. */
+  private syncFrameConsumers() {
+    const keys = [this.channel0, this.channel1, this.channel2, this.channel3];
+    this.frameConsumers.sync(
+      keys.filter((k) => k.startsWith("#")).map((k) => this.lookupElement(k)),
+    );
+  }
+
   private async rebuild() {
     if (!this.runtime) return;
     const token = ++this.rebuildToken;
@@ -509,6 +542,7 @@ export class SonicWebGpu extends LitElement {
         ]);
       }
       if (token !== this.rebuildToken) return;
+      this.syncFrameConsumers();
       this.errorMessage = "";
       this.ready = true;
       this.syncSize();
@@ -589,6 +623,9 @@ export class SonicWebGpu extends LitElement {
             if (!this.startTime) this.startTime = now;
             const time = (now - this.startTime) / 1000;
             this.applyRemoteMouse();
+            if (this.runtime instanceof WebGpuRuntime) {
+              this.runtime.updateLiveChannels((key) => this.lookupElement(key));
+            }
             this.runtime.draw({
               width: w,
               height: h,
@@ -662,7 +699,8 @@ export type {
 } from "./types";
 export { parseBackendPrefer, parseKernel, WebGpuCompileError } from "./types";
 export { buildWgslSource, DEFAULT_MAIN_IMAGE } from "./wgsl-prelude";
-export { WebGpuRuntime } from "./gpu-runtime";
+export { WebGpuRuntime, channelTextureNeedsRecreate } from "./gpu-runtime";
 export { WebGl2FallbackRuntime } from "./gl-fallback";
 export { Canvas2dFallbackRuntime } from "./canvas2d-fallback";
 export { ParticlesRuntime } from "./particles-runtime";
+export { channelFormValue } from "./helpers";

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;