@johnmorrisdotca/kazoku-ui 0.15.0 → 0.15.2

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ## [Unreleased]
 
+## [0.15.2] - 2026-11-04
+
+The embed panel no longer scrolls the page.
+
+- The family `templates/AGENTS.md` has the rules that keep every `main` green (all of a release's checks before a push; a red main fixed or reverted within the hour; a flaky test ticketed and fixed; a shared file tried in every repo's CI first; machine1's daily check), from KAZOKU-UI-41. A repo takes them with the rest of the family part when it next replaces everything above the marker.
+- **Fixed: every draw of the embed panel's picker scrolled the page to the panel.** The picker kept the pressed button in view with `scrollIntoView`, which scrolls the page too, so a page with the panel below the fold jumped to it on load and again each time the language changed. Only the picker's own list scrolls now. New test in `e2e/embed-panel.demo.mjs`.
+
+## [0.15.1] - 2026-11-04
+
+The embed panel asks for one frame at a time.
+
+- **Fixed: the embed panel cancelled its fit frame and asked again**, so a page that counts animation frames (wakusei-planets' freeze test) saw several asked-for frames at once. The panel now asks for one frame and keeps it, reading the choices when it runs. New test in `e2e/embed-panel.demo.mjs`: no frame at rest, and never more than one pending, whatever is pressed.
+
 ## [0.15.0] - 2026-11-03
 
 One "Put it in your page" panel for every package of the family.

package/dist/embed-panel/element.js

@@ -580,8 +580,9 @@ export class EmbedPanelElement extends HTMLElement {
     #fit() {
         if (!this.#built || this.hasAttribute("no-preview"))
             return;
+        // One frame at a time, never cancelled: a frame already asked for reads the choices as they are when it runs.
         if (this.#frame !== 0)
-            cancelAnimationFrame(this.#frame);
+            return;
         this.#frame = requestAnimationFrame(() => {
             this.#frame = 0;
             const el = this.#el;
@@ -675,7 +676,16 @@ export class EmbedPanelElement extends HTMLElement {
             return button;
         }));
         box.querySelector(".none").textContent = shown.length === 0 ? words.none : "";
-        list.querySelector('[aria-pressed="true"]')?.scrollIntoView?.({ block: "nearest" });
+        // Only the list scrolls to the pressed button: scrollIntoView would also scroll the page to the panel each time it draws.
+        const pressed = list.querySelector('[aria-pressed="true"]');
+        if (pressed !== null) {
+            const room = list.getBoundingClientRect();
+            const at = pressed.getBoundingClientRect();
+            if (at.top < room.top)
+                list.scrollTop -= room.top - at.top;
+            else if (at.bottom > room.bottom)
+                list.scrollTop += at.bottom - room.bottom;
+        }
     }
     #dispatch(reason) {
         this.dispatchEvent(new CustomEvent(EVENT, { detail: { kind: this.#kind, size: this.#size, value: this.#value, code: this.#code, reason }, bubbles: true, composed: true }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kazoku-ui",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Kazoku UI 家族, the family's shared interface parts as their own versioned package: view controls for any 3D or zoomable view (angle, tilt, auto-turn, zoom about the pointer, pan, touch, address state) a light, dark and auto theme switch, a language picker, choices kept in the address, a save-as-image button and one set of speed buttons (0.5×, 1×, 2× or your own steps) and the \"Put it in your page\" embed panel (a compact picker, sizes, HTML, ES module, React, Vue, Angular, Svelte and iframe tabs, a picture that fits its box, Copy), each a framework-free custom element and a plain controller. Zero dependencies; the shared 3D renderer takes three.js as an optional peer.",
   "keywords": [
     "view-controls",