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

package/src/docs/example/docs-3d-form.ts

@@ -1,95 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-import { set } from "@supersoniks/concorde/utils";
-import "../../core/components/functional/3d/3d";
-import "../../core/components/ui/form/input/input";
-import "../../core/components/ui/form/checkbox/checkbox";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Entrées form uniquement. */
-const formKey = new DataProviderKey<{
-  exposure: number;
-  fov: number;
-  minDistance: number;
-  maxDistance: number;
-  autoRotate: string | boolean | null;
-}>("docs3dForm");
-
-/**
- * Auto-bind form → viewer (exposure / fov / autoRotate).
- */
-@customElement("docs-3d-form-demo")
-export class Docs3dFormDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    set(formKey, {
-      exposure: 1,
-      fov: 45,
-      minDistance: 1,
-      maxDistance: 8,
-      autoRotate: "true",
-    });
-  }
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-3" formDataProvider=${formKey.path}>
-        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 max-w-2xl">
-          <sonic-input
-            name="exposure"
-            type="number"
-            label="Exposure"
-            step="0.1"
-          ></sonic-input>
-          <sonic-input
-            name="fov"
-            type="number"
-            label="FOV"
-            step="1"
-          ></sonic-input>
-          <sonic-input
-            name="minDistance"
-            type="number"
-            label="Min distance"
-            step="0.1"
-          ></sonic-input>
-          <sonic-input
-            name="maxDistance"
-            type="number"
-            label="Max distance"
-            step="0.5"
-          ></sonic-input>
-          <div class="flex items-end pb-2">
-            <sonic-checkbox
-              name="autoRotate"
-              unique
-              checked
-              value="true"
-              label="Auto-rotate"
-            ></sonic-checkbox>
-          </div>
-        </div>
-
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          pick
-          play
-          dataProvider=${formKey.path}
-          out-data-provider="docs3dFormOut"
-          aspect-ratio="16/10"
-        ></sonic-3d>
-
-        <p class="text-sm text-neutral-500">
-          Form → viewer : <code>exposure</code>, <code>fov</code>,
-          <code>minDistance</code>, <code>maxDistance</code>,
-          <code>autoRotate</code>. Zoom molette borné par min/max.
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-orbit.ts

@@ -1,44 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import "../../core/components/functional/3d/3d";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-@customElement("docs-3d-orbit-demo")
-export class Docs3dOrbitDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  @state() private hit = "";
-
-  private onPick = (e: Event) => {
-    const detail = (e as CustomEvent<{ objectId: string }>).detail;
-    this.hit = detail?.objectId ?? "";
-  };
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          auto-rotate
-          pick
-          play
-          min-distance="1"
-          max-distance="10"
-          min-polar="10"
-          max-polar="170"
-          aspect-ratio="16/10"
-          @pick=${this.onPick}
-        ></sonic-3d>
-        <p class="text-sm text-neutral-500">
-          DamagedHelmet (CDN) — glisser = orbiter · molette = zoom · clic droit =
-          pan · survol = highlight · double-clic = recentrer
-          ${this.hit
-            ? html` · pick: <code>${this.hit}</code>`
-            : null}
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-out.ts

@@ -1,56 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-import "../../core/components/functional/3d/3d";
-import "../../core/components/functional/value/value";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Sorties télémétrie (séparé du form). */
-const outKey = new DataProviderKey("docs3dOut");
-
-@customElement("docs-3d-out-demo")
-export class Docs3dOutDemo extends LitElement {
-  static styles = [tailwind, DEMO_3D_STYLES];
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-3d
-          src=${HELMET_GLB}
-          camera="orbit"
-          auto-rotate
-          play
-          pick
-          out-data-provider=${outKey.path}
-          aspect-ratio="16/10"
-        ></sonic-3d>
-        <div class="flex flex-wrap gap-4 text-sm tabular-nums text-neutral-600">
-          <span>
-            ready:
-            <sonic-value dataProvider=${outKey.path} key="ready"></sonic-value>
-          </span>
-          <span>
-            distance:
-            <sonic-value
-              dataProvider=${outKey.path}
-              key="distance"
-            ></sonic-value>
-          </span>
-          <span>
-            yaw:
-            <sonic-value dataProvider=${outKey.path} key="yaw"></sonic-value>
-          </span>
-          <span>
-            frame:
-            <sonic-value dataProvider=${outKey.path} key="frame"></sonic-value>
-          </span>
-        </div>
-        <p class="text-sm text-neutral-500">
-          Sorties → <code>out-data-provider</code> via
-          <code>sonic-value key="…"</code> (pas <code>name</code>).
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-shader-live-demo.ts

@@ -1,98 +0,0 @@
-/**
- * Démo pont live : sonic-3d → sonic-shader via channel0="#plateau"
- * (copie canvas chaque frame, sans JPEG frame-out).
- */
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { tailwind } from "../tailwind";
-import "../../core/components/functional/3d/3d";
-import "../../core/components/functional/shader/shader";
-import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
-
-/** Aberration chromatique + bords neon — bien visible vs le 3d brut. */
-const LIVE_POST = `
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 c = uv - 0.5;
-  float aber = 0.004 + clamp(uParam0, 0.0, 1.0) * 0.028;
-  aber *= 1.0 + 0.35 * sin(iTime * 2.2);
-
-  float r = texture(iChannel0, uv + c * aber).r;
-  float g = texture(iChannel0, uv).g;
-  float b = texture(iChannel0, uv - c * aber).b;
-  vec3 col = vec3(r, g, b);
-
-  // Contours sobel légers (luma)
-  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
-  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
-  float edge = length(vec2(tr + br - tl - bl, tl + tr - bl - br));
-  col += vec3(0.15, 0.85, 1.0) * smoothstep(0.08, 0.45, edge);
-
-  // Scanlines + vignette
-  col *= 0.88 + 0.12 * sin(uv.y * iResolution.y * 1.2);
-  float vig = smoothstep(1.15, 0.35, length(c));
-  col *= vig;
-
-  fragColor = vec4(col, 1.0);
-}
-`;
-
-@customElement("docs-3d-shader-live-demo")
-export class Docs3dShaderLiveDemo extends LitElement {
-  static styles = [
-    tailwind,
-    DEMO_3D_STYLES,
-    css`
-      .grid {
-        display: grid;
-        gap: 0.75rem;
-        grid-template-columns: 1fr;
-      }
-      @media (min-width: 720px) {
-        .grid {
-          grid-template-columns: 1fr 1fr;
-        }
-      }
-      sonic-3d,
-      sonic-shader {
-        width: 100%;
-        border-radius: 0.5rem;
-        overflow: hidden;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <div class="grid">
-          <sonic-3d
-            id="plateau"
-            src=${HELMET_GLB}
-            camera="orbit"
-            auto-rotate
-            play
-            min-distance="1"
-            max-distance="10"
-            aspect-ratio="16/10"
-          ></sonic-3d>
-          <sonic-shader
-            play
-            channel0="#plateau"
-            image=${LIVE_POST}
-            param0="0.7"
-            aspect-ratio="16/10"
-          ></sonic-shader>
-        </div>
-        <p class="text-sm text-neutral-500">
-          Live bridge: <code>channel0="#plateau"</code> (no JPEG). Left = raw
-          <code>sonic-3d</code>, right = chromatic aberration + neon edges +
-          scanlines. Slider-ready via <code>param0</code> (aberration strength).
-        </p>
-      </div>
-    `;
-  }
-}

package/src/docs/example/docs-3d-shared.ts

@@ -1,15 +0,0 @@
-import { css } from "lit";
-
-/**
- * DamagedHelmet — Khronos Sample Assets (CC BY 4.0 / CC BY-NC original).
- * Servi via jsDelivr (CDN).
- */
-export const HELMET_GLB =
-  "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb";
-
-export const DEMO_3D_STYLES = css`
-  sonic-3d {
-    border-radius: 0.5rem;
-    --sonic-3d-ar: 16 / 10;
-  }
-`;