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

package/src/core/utils/positioning.spec.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect } from "vitest";
+import {
+  computeFloatingPosition,
+  FloatingBounds,
+  FloatingSide,
+} from "./positioning";
+
+type Rect = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+type Size = { width: number; height: number };
+
+const rect = (left: number, top: number, width: number, height: number) => ({
+  left,
+  top,
+  width,
+  height,
+  right: left + width,
+  bottom: top + height,
+});
+
+/**
+ * Ancien Pop.computePosition, étape par étape, sur un contenu simulé dont
+ * chaque déplacement appliqué se retrouve tel quel dans la mesure suivante.
+ */
+function legacyPopPosition(
+  thisRect: Rect,
+  size: Size,
+  placement: string,
+  { minX, minY, maxX, maxY }: FloatingBounds,
+) {
+  const [placementBase, placementSec] = placement.split(" ");
+  const x0 = thisRect.left;
+  const y0 = thisRect.top;
+  let x = x0,
+    y = y0;
+  const yTop = y0 - size.height;
+  const xLeft = x0 - size.width;
+  const xRight = x0 + thisRect.width;
+  const yBottom = y0 + thisRect.height;
+  const xCenter = x0 + (thisRect.width - size.width) * 0.5;
+  const yCenter = y0 + (thisRect.height - size.height) * 0.5;
+  switch (placementBase) {
+    case "bottom":
+      y = yBottom;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "top":
+      y = yTop;
+      if (placementSec == "center") x = xCenter;
+      break;
+    case "left":
+      x = xLeft;
+      if (placementSec == "center") y = yCenter;
+      break;
+    case "right":
+      x = xRight;
+      if (placementSec == "center") y = yCenter;
+      break;
+  }
+
+  let contentX = x;
+  let contentY = y;
+  if (contentX < minX && placementBase == "left") x = xRight;
+  if (contentY < minY && placementBase == "top") y = yBottom;
+  if (contentX + size.width > maxX && placementBase == "right") x = xLeft;
+  if (contentY + size.height > maxY && placementBase == "bottom") y = yTop;
+
+  contentX = x;
+  contentY = y;
+  if (contentX < minX) contentX = minX;
+  if (contentY < minY) contentY = minY;
+  if (contentX + size.width > maxX) contentX = maxX - size.width;
+  if (contentY + size.height > maxY) contentY = maxY - size.height;
+
+  return { x: contentX, y: contentY };
+}
+
+function popPosition(
+  anchor: Rect,
+  floating: Size,
+  placement: string,
+  bounds: FloatingBounds,
+) {
+  const [side, secondary] = placement.split(" ");
+  const { x, y } = computeFloatingPosition({
+    anchor,
+    floating,
+    side: side as FloatingSide,
+    align: secondary == "center" ? "center" : "start",
+    bounds,
+  });
+  return { x, y };
+}
+
+const bounds: FloatingBounds = { minX: 5, minY: 5, maxX: 795, maxY: 595 };
+
+describe("computeFloatingPosition", () => {
+  describe("reproduit l'ancien positionnement de sonic-pop", () => {
+    const placements = [
+      "bottom",
+      "top",
+      "right",
+      "left",
+      "bottom center",
+      "top center",
+      "right center",
+      "left center",
+      "unknown",
+    ];
+    const anchors = {
+      "au centre": rect(380, 280, 40, 30),
+      "coin haut gauche": rect(0, 0, 40, 30),
+      "coin bas droit": rect(760, 570, 40, 30),
+      "bord gauche": rect(2, 300, 40, 30),
+      "bord droit": rect(780, 300, 40, 30),
+      "bord haut": rect(400, 2, 40, 30),
+      "bord bas": rect(400, 590, 40, 30),
+    };
+    const sizes = {
+      petit: { width: 120, height: 80 },
+      "plus grand que la zone": { width: 900, height: 700 },
+    };
+
+    for (const placement of placements) {
+      for (const [anchorName, anchor] of Object.entries(anchors)) {
+        for (const [sizeName, size] of Object.entries(sizes)) {
+          it(`${placement} / ${anchorName} / contenu ${sizeName}`, () => {
+            expect(popPosition(anchor, size, placement, bounds)).toEqual(
+              legacyPopPosition(anchor, size, placement, bounds),
+            );
+          });
+        }
+      }
+    }
+  });
+
+  describe("placements du tooltip", () => {
+    const anchor = rect(380, 280, 40, 30);
+    const floating = { width: 100, height: 20 };
+    const place = (side: FloatingSide, align?: "start" | "center" | "end") =>
+      computeFloatingPosition({
+        anchor,
+        floating,
+        side,
+        align,
+        gap: 4,
+        bounds,
+      });
+
+    it("centre par défaut", () => {
+      expect(place("top")).toEqual({ side: "top", x: 350, y: 256 });
+      expect(place("right")).toEqual({ side: "right", x: 424, y: 285 });
+    });
+
+    it("aligne start / end", () => {
+      expect(place("bottom", "start")).toMatchObject({ x: 380, y: 314 });
+      expect(place("bottom", "end")).toMatchObject({ x: 320, y: 314 });
+      expect(place("left", "end")).toMatchObject({ x: 276, y: 290 });
+    });
+
+    it("bascule sur le côté opposé quand il déborde", () => {
+      const nearTop = rect(380, 10, 40, 30);
+      expect(
+        computeFloatingPosition({
+          anchor: nearTop,
+          floating,
+          side: "top",
+          gap: 4,
+          bounds,
+        }),
+      ).toEqual({ side: "bottom", x: 350, y: 44 });
+    });
+  });
+});

package/src/core/utils/positioning.ts

@@ -0,0 +1,164 @@
+import HTML, { SearchableDomElement } from "./HTML";
+
+export type FloatingSide = "top" | "right" | "bottom" | "left";
+export type FloatingAlign = "start" | "center" | "end";
+
+export type FloatingBounds = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+};
+
+type Rect = Pick<DOMRect, "left" | "top" | "right" | "bottom" | "width" | "height">;
+type Size = Pick<DOMRect, "width" | "height">;
+
+export const supportsPopover = "popover" in HTMLElement.prototype;
+
+const OPPOSITE_SIDE: Record<FloatingSide, FloatingSide> = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left",
+};
+
+/**
+ * Zone dans laquelle un élément flottant doit rester visible :
+ * le viewport, restreint par le premier ancêtre qui scrolle ou clippe `node`.
+ */
+export function getFloatingBounds(
+  node: SearchableDomElement,
+  padding = 0,
+): FloatingBounds {
+  const clipRect = (
+    HTML.getScrollableAncestor(node) as HTMLElement | null
+  )?.getBoundingClientRect();
+
+  // `||` et non `??` : un bord à 0 (ancêtre non rendu) retombe sur le viewport, comme historiquement dans sonic-pop.
+  return {
+    minX: Math.max(0, clipRect?.left || 0) + padding,
+    minY: Math.max(0, clipRect?.top || 0) + padding,
+    maxX:
+      Math.min(window.innerWidth, clipRect?.right || window.innerWidth) -
+      padding,
+    maxY:
+      Math.min(window.innerHeight, clipRect?.bottom || window.innerHeight) -
+      padding,
+  };
+}
+
+function alignOnAxis(
+  start: number,
+  length: number,
+  floatingLength: number,
+  align: FloatingAlign,
+) {
+  if (align === "start") return start;
+  if (align === "end") return start + length - floatingLength;
+  return start + (length - floatingLength) / 2;
+}
+
+function placeOnSide(
+  anchor: Rect,
+  floating: Size,
+  side: FloatingSide,
+  align: FloatingAlign,
+  gap: number,
+) {
+  switch (side) {
+    case "top":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.top - floating.height - gap,
+      };
+    case "bottom":
+      return {
+        x: alignOnAxis(anchor.left, anchor.width, floating.width, align),
+        y: anchor.bottom + gap,
+      };
+    case "left":
+      return {
+        x: anchor.left - floating.width - gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    case "right":
+      return {
+        x: anchor.right + gap,
+        y: alignOnAxis(anchor.top, anchor.height, floating.height, align),
+      };
+    default:
+      return { x: anchor.left, y: anchor.top };
+  }
+}
+
+function overflowsSide(
+  position: { x: number; y: number },
+  floating: Size,
+  side: FloatingSide,
+  bounds: FloatingBounds,
+) {
+  switch (side) {
+    case "top":
+      return position.y < bounds.minY;
+    case "bottom":
+      return position.y + floating.height > bounds.maxY;
+    case "left":
+      return position.x < bounds.minX;
+    case "right":
+      return position.x + floating.width > bounds.maxX;
+    default:
+      return false;
+  }
+}
+
+/**
+ * Position (coordonnées viewport) d'un élément flottant accolé à `anchor` :
+ * bascule sur le côté opposé s'il déborde, puis le contraint dans `bounds`.
+ * S'il est plus grand que `bounds`, c'est le bord bas / droit qui l'emporte.
+ */
+export function computeFloatingPosition({
+  anchor,
+  floating,
+  side,
+  align = "center",
+  gap = 0,
+  bounds,
+}: {
+  anchor: Rect;
+  floating: Size;
+  side: FloatingSide;
+  align?: FloatingAlign;
+  gap?: number;
+  bounds: FloatingBounds;
+}) {
+  let placedSide = side;
+  let position = placeOnSide(anchor, floating, placedSide, align, gap);
+
+  if (overflowsSide(position, floating, placedSide, bounds)) {
+    placedSide = OPPOSITE_SIDE[placedSide];
+    position = placeOnSide(anchor, floating, placedSide, align, gap);
+  }
+
+  return {
+    side: placedSide,
+    x: Math.min(
+      Math.max(position.x, bounds.minX),
+      bounds.maxX - floating.width,
+    ),
+    y: Math.min(
+      Math.max(position.y, bounds.minY),
+      bounds.maxY - floating.height,
+    ),
+  };
+}
+
+/** Appelle `callback` à chaque frame ; renvoie la fonction d'arrêt. */
+export function startFrameLoop(callback: () => void) {
+  let frame = 0;
+  const tick = () => {
+    callback();
+    frame = requestAnimationFrame(tick);
+  };
+  tick();
+  return () => cancelAnimationFrame(frame);
+}

package/src/directives.ts

@@ -1,6 +1,5 @@
 import * as directives from "@supersoniks/concorde/core/directives/DataProvider";
 import {dp as pubDp, dataProvider as pubDataProvider, get as pubGet, set as pubSet} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import type {DirectiveResult} from "lit/async-directive.js";
 
 import {ConcordeWindow} from "./core/_types/types";
 /**
@@ -11,8 +10,8 @@ export const dp = pubDp;
  * @deprecated @see pubDataProvider
  */
 export const dataProvider = pubDataProvider;
-export const subscribe = directives.subscribe as DirectiveResult;
-export const sub = directives.sub as DirectiveResult;
+export const subscribe = directives.subscribe;
+export const sub = directives.sub;
 
 /**
  * @deprecated @see pubGet

package/src/docs/_core-concept/dataFlow.md

@@ -15,12 +15,10 @@ Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, d
 | HTTP GET | `@get` + `Endpoint`, or `sonic-list` / `sonic-queue` with `fetch` |
 | HTTP POST (body from store) | `@post` + `Endpoint` + body `DataProviderKey` |
 | HTTP PUT / PATCH (body from store) | `@put` / `@patch` — same model as `@post` |
-| Forms | `formDataProvider` + `name` on fields |
+| Forms | `formDataProvider` + `name` on fields (no Subscriber on form elements) |
 | Derived / aggregate (JSONata) | `derive()` or `sonic-jsonata` — [Jsonata](#core/components/functional/jsonata/jsonata.md/jsonata) |
 | Offline doc demos | `serviceURL="/docs-mock-api"` — [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) |
 
-Opt-in addons (HF / shader / WebGPU): [Visual stack](#docs/_misc/visual-stack.md/visual-stack).
-
 Skill: `concorde-get-set-dp` in the package `ai/` folder.
 
 ## DataProviderKey

package/src/docs/_getting-started/create-a-component.md

@@ -113,7 +113,7 @@ This leads to the creation of more components and thus raises questions about th
 
 To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.
 
-In the case where it can be directly used in a page, it should also be globally referenced. Heavy / optional features (3d, shader, webgpu, hugging-face) use **CDN addon bundles** — see [CDN addons](#docs/_getting-started/cdn-addons.md/cdn-addons) — and must **not** be added to `functional.ts` / `ui.ts`.
+In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of **specific bundles** in the future.
 
 Here's where we add imports based on the component's location inside concorde as an example
 

package/{docs/src → src}/docs/_misc/formelement-subscriber-removal.md

@@ -112,4 +112,4 @@ rg -l 'formDataProvider' concorde/src | while read f; do rg -q 'dataProvider\s*=
 
 ## Non-regression (Concorde docs)
 
-Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, input-autocomplete, queue + `dataFilterProvider`, submit, validation / sameValueAs.
+Smoke form demos: input, textarea, select, checkbox (incl. check-all), radio, switch, button form modes, queue + `dataFilterProvider`, submit, validation / sameValueAs, input-autocomplete.

package/src/docs/_misc/html-integration.md

@@ -2,6 +2,8 @@
 
 Some hosts (legacy PHP pages, static HTML) embed Concorde components **without** a Lit build step. They can use HTML attributes such as **`data-bind`**, **`dataProvider`**, and **`formDataProvider`** on tags directly in the page.
 
+**Form fields** (`sonic-input`, checkbox, select, …) bind only via **`formDataProvider` + `name`**. They do not autofill from ancestor `dataProvider` (Subscriber was removed from FormElement — see [FormElement without Subscriber](#docs/_misc/formelement-subscriber-removal.md/formelement-subscriber-removal)).
+
 That style is **not** what we demonstrate in this doc site: live examples are **Lit components** under `src/docs/example/`, registered once and reused from Markdown via tags like `<docs-joke-search-demo>`.
 
 | Goal | Use |