@window-splitter/state 1.1.4 → 1.1.5--canary.b95ee23.0

package/dist/esm/test-utils.d.ts

@@ -6,5 +6,5 @@ export interface Actor {
         current: State;
     };
 }
-export declare function createActor(input: Partial<GroupMachineContextValue>, onChange?: (context: GroupMachineContextValue) => void): Actor;
+export declare function createActor(input: Partial<GroupMachineContextValue>, onChange?: (context: GroupMachineContextValue) => void, getGroupElement?: () => HTMLElement | null): Actor;
 //# sourceMappingURL=test-utils.d.ts.map

package/dist/esm/test-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../src/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,wBAAwB,EACxB,MAAM,EACN,KAAK,EACN,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,wBAAwB,CAAC;IAChC,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;CAC3B;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,GACrD,KAAK,CAQP"}
+{"version":3,"file":"test-utils.d.ts","sourceRoot":"","sources":["../../src/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,wBAAwB,EACxB,MAAM,EACN,KAAK,EACN,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,wBAAwB,CAAC;IAChC,KAAK,EAAE;QAAE,OAAO,EAAE,KAAK,CAAA;KAAE,CAAC;CAC3B;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,OAAO,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,EACtD,eAAe,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GACzC,KAAK,CAYP"}

package/dist/esm/test-utils.js

@@ -1,6 +1,6 @@
 import { groupMachine, } from "./index.js";
-export function createActor(input, onChange) {
-    const [context, send, state] = groupMachine(input, onChange);
+export function createActor(input, onChange, getGroupElement) {
+    const [context, send, state] = groupMachine(input, onChange, getGroupElement);
     return {
         send,
         value: context,

package/dist/esm/test-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-utils.js","sourceRoot":"","sources":["../../src/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,GAIb,MAAM,YAAY,CAAC;AAQpB,MAAM,UAAU,WAAW,CACzB,KAAwC,EACxC,QAAsD;IAEtD,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE7D,OAAO;QACL,IAAI;QACJ,KAAK,EAAE,OAAO;QACd,KAAK;KACN,CAAC;AACJ,CAAC","sourcesContent":["import {\n  groupMachine,\n  GroupMachineContextValue,\n  SendFn,\n  State,\n} from \"./index.js\";\n\nexport interface Actor {\n  send: SendFn;\n  value: GroupMachineContextValue;\n  state: { current: State };\n}\n\nexport function createActor(\n  input: Partial<GroupMachineContextValue>,\n  onChange?: (context: GroupMachineContextValue) => void\n): Actor {\n  const [context, send, state] = groupMachine(input, onChange);\n\n  return {\n    send,\n    value: context,\n    state,\n  };\n}\n"]}
+{"version":3,"file":"test-utils.js","sourceRoot":"","sources":["../../src/test-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,GAIb,MAAM,YAAY,CAAC;AAQpB,MAAM,UAAU,WAAW,CACzB,KAAwC,EACxC,QAAsD,EACtD,eAA0C;IAE1C,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,YAAY,CACzC,KAAK,EACL,QAAQ,EACR,eAAe,CAChB,CAAC;IAEF,OAAO;QACL,IAAI;QACJ,KAAK,EAAE,OAAO;QACd,KAAK;KACN,CAAC;AACJ,CAAC","sourcesContent":["import {\n  groupMachine,\n  GroupMachineContextValue,\n  SendFn,\n  State,\n} from \"./index.js\";\n\nexport interface Actor {\n  send: SendFn;\n  value: GroupMachineContextValue;\n  state: { current: State };\n}\n\nexport function createActor(\n  input: Partial<GroupMachineContextValue>,\n  onChange?: (context: GroupMachineContextValue) => void,\n  getGroupElement?: () => HTMLElement | null\n): Actor {\n  const [context, send, state] = groupMachine(\n    input,\n    onChange,\n    getGroupElement\n  );\n\n  return {\n    send,\n    value: context,\n    state,\n  };\n}\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@window-splitter/state",
   "sideEffects": false,
-  "version": "1.1.4",
+  "version": "1.1.5--canary.b95ee23.0",
   "description": "A state machine for a WAI-ARIA compliant window splitter",
   "homepage": "https://react-window-splitter-six.vercel.app",
   "repository": {
@@ -29,7 +29,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@internal/eslint-config": "1.1.4",
+    "@internal/eslint-config": "1.1.5--canary.b95ee23.0",
     "@testing-library/react": "^16.0.0",
     "@types/big.js": "^6.2.2",
     "@vitest/browser": "catalog:",
@@ -77,5 +77,5 @@
     "window"
   ],
   "types": "./dist/commonjs/index.d.ts",
-  "gitHead": "df18ce3b7488d52f8d91ae7000f5dcaec65f6bdd"
+  "gitHead": "b95ee239cfc6749ef5619a24971ec4e6031b659f"
 }

package/src/index.ts

@@ -1827,7 +1827,15 @@ let groupId = 0;
 
 export function groupMachine(
   input: Partial<GroupMachineContextValue>,
-  onUpdate?: (context: GroupMachineContextValue) => void
+  onUpdate?: (context: GroupMachineContextValue) => void,
+  /**
+   * A lazy getter for the group's DOM element. When provided and it returns
+   * an element, `applyDelta` frames during collapse/expand animations write
+   * the grid template directly to the DOM and skip `onUpdate` — avoiding a
+   * full reactive re-render per animation frame. Other events still call
+   * `onUpdate` as usual.
+   */
+  getGroupElement?: () => HTMLElement | null
 ) {
   const abortController = new AbortController();
   const state = {
@@ -2013,7 +2021,7 @@ export function groupMachine(
     },
   };
 
-  function transition(to: State) {
+  function transition(to: State): boolean {
     // exit
     switch (state.current) {
       case "dragging":
@@ -2023,6 +2031,7 @@ export function groupMachine(
     }
 
     // enter
+    let skipOnUpdate = false;
     switch (to) {
       case "idle":
         actions.onAutosave();
@@ -2033,15 +2042,39 @@ export function groupMachine(
       case "togglingCollapse":
         actions.prepare();
         actions.clearLastKnownSize();
+        // Write post-prepare template to DOM instead of routing through React.
+        // `prepare()` converts % to px (same rendered width) — committing
+        // through React fires a Layout pass before the raf loop starts,
+        // producing a visible hitch on frame 0. Callers propagate the
+        // returned flag into send()'s skipOnUpdate so the trailing onUpdate
+        // there is suppressed too.
+        if (getGroupElement) {
+          const el = getGroupElement();
+          if (el) {
+            const template = buildTemplate(context);
+            if (context.orientation === "horizontal") {
+              el.style.gridTemplateColumns = template;
+            } else {
+              el.style.gridTemplateRows = template;
+            }
+            skipOnUpdate = true;
+          }
+        }
         break;
     }
 
     state.current = to;
 
-    onUpdate?.(context);
+    if (!skipOnUpdate) {
+      onUpdate?.(context);
+    }
+
+    return skipOnUpdate;
   }
 
   function send(event: GroupMachineEvent) {
+    let skipOnUpdate = false;
+
     switch (event.type) {
       case "lockGroup":
         locked = true;
@@ -2183,6 +2216,15 @@ export function groupMachine(
         actions.onAutosave();
         break;
       case "setActualItemsSize": {
+        // During direct-DOM animations the machine writes grid-template to the
+        // DOM each frame, which causes panel sizes to change, which fires the
+        // ResizeObserver in measureGroupChildren, which sends this event.
+        // Ignore it so we don't trigger an onUpdate and re-render mid-animation.
+        if (state.current === "togglingCollapse" && getGroupElement) {
+          skipOnUpdate = true;
+          break;
+        }
+
         const withLastKnownSize = context.items.map((i) => {
           if (!isPanelData(i)) return i;
           const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
@@ -2290,7 +2332,7 @@ export function groupMachine(
             const panel = getPanelWithId(context, event.panelId);
 
             if (!panel.collapsed) {
-              transition("togglingCollapse");
+              if (transition("togglingCollapse")) skipOnUpdate = true;
               abortController.abort();
               animationActor(context, event, send, abortController).then(
                 (output) => {
@@ -2313,7 +2355,7 @@ export function groupMachine(
             const panel = getPanelWithId(context, event.panelId);
 
             if (panel.collapsed) {
-              transition("togglingCollapse");
+              if (transition("togglingCollapse")) skipOnUpdate = true;
               abortController.abort();
               animationActor(context, event, send, abortController).then(
                 (output) => {
@@ -2365,11 +2407,28 @@ export function groupMachine(
             })
           );
           actions.onResize();
+
+          if (getGroupElement) {
+            const el = getGroupElement();
+
+            if (el) {
+              const template = buildTemplate(context);
+
+              if (context.orientation === "horizontal") {
+                el.style.gridTemplateColumns = template;
+              } else {
+                el.style.gridTemplateRows = template;
+              }
+              skipOnUpdate = true;
+            }
+          }
           break;
       }
     }
 
-    onUpdate?.(context);
+    if (!skipOnUpdate) {
+      onUpdate?.(context);
+    }
   }
 
   return [context, send, state] as const;

package/src/machine.test.ts

@@ -10,6 +10,7 @@ import {
   getPanelGroupPixelSizes,
   getPanelPercentageSize,
   getPanelPixelSize,
+  GroupMachineContextValue,
   GroupMachineEvent,
   initializePanel,
   initializePanelHandleData,
@@ -537,6 +538,262 @@ describe("constraints", () => {
     await waitForIdle(actor);
   });
 
+  describe("direct-DOM animation path (getGroupElement)", () => {
+    function setupCollapsibleActor(
+      groupEl: HTMLElement,
+      onUpdate?: (context: GroupMachineContextValue) => void
+    ) {
+      return createActor(
+        { groupId: "group" },
+        onUpdate,
+        () => groupEl
+      );
+    }
+
+    function registerCollapsibleLayout(actor: Actor) {
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "100px",
+            default: "200px",
+            collapseAnimation: {
+              easing: "ease-in-out",
+              duration: 5000, // Long animation so we can intercept mid-flight
+            },
+          }),
+        },
+      ]);
+
+      initializeSizes(actor, { width: 500, height: 200 });
+    }
+
+    test("applyDelta writes grid template directly to the DOM element when getGroupElement is provided", async () => {
+      const groupEl = document.createElement("div");
+      groupEl.style.display = "grid";
+      document.body.appendChild(groupEl);
+
+      const actor = setupCollapsibleActor(groupEl);
+      registerCollapsibleLayout(actor);
+
+      const templateBefore = groupEl.style.gridTemplateColumns;
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(actor.state.current).toBe("togglingCollapse");
+
+      const templateAfter = groupEl.style.gridTemplateColumns;
+      expect(templateAfter).toBeTruthy();
+      expect(templateAfter).not.toEqual(templateBefore);
+
+      await waitForIdle(actor);
+      document.body.removeChild(groupEl);
+    });
+
+    test("onUpdate is NOT called during applyDelta when getGroupElement returns an element", async () => {
+      const groupEl = document.createElement("div");
+      document.body.appendChild(groupEl);
+
+      let updateCount = 0;
+      const actor = setupCollapsibleActor(groupEl, () => {
+        updateCount++;
+      });
+      registerCollapsibleLayout(actor);
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(actor.state.current).toBe("togglingCollapse");
+      // The collapsePanel event itself fires onUpdate (transition + prepare),
+      // but the per-frame applyDelta events do NOT.
+      const updatesAfterAnimationStarted = updateCount;
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      expect(actor.state.current).toBe("togglingCollapse");
+      expect(updateCount).toBe(updatesAfterAnimationStarted);
+
+      await waitForIdle(actor);
+      document.body.removeChild(groupEl);
+    });
+
+    test("collapsePanel does not fire onUpdate when getGroupElement is provided (frame-0 hitch)", async () => {
+      const groupEl = document.createElement("div");
+      groupEl.style.display = "grid";
+      document.body.appendChild(groupEl);
+
+      let updateCount = 0;
+      const actor = setupCollapsibleActor(groupEl, () => {
+        updateCount++;
+      });
+      registerCollapsibleLayout(actor);
+
+      const updatesBeforeCollapse = updateCount;
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+
+      expect(actor.state.current).toBe("togglingCollapse");
+      // Neither transition() nor send()'s trailing onUpdate should fire —
+      // otherwise React commits + Layout runs before frame 1 of the animation.
+      expect(updateCount).toBe(updatesBeforeCollapse);
+
+      // DOM template must be written synchronously so the animation actor
+      // starts against pixel-form values.
+      expect(groupEl.style.gridTemplateColumns).toBeTruthy();
+
+      await waitForIdle(actor);
+      document.body.removeChild(groupEl);
+    });
+
+    test("onUpdate IS called after animation ends (final sync)", async () => {
+      const groupEl = document.createElement("div");
+      document.body.appendChild(groupEl);
+
+      let updateCount = 0;
+      const actor = setupCollapsibleActor(groupEl, () => {
+        updateCount++;
+      });
+
+      // Short animation so it completes quickly
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "100px",
+            default: "200px",
+            collapseAnimation: {
+              easing: "linear",
+              duration: 50,
+            },
+          }),
+        },
+      ]);
+      initializeSizes(actor, { width: 500, height: 200 });
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+      await waitForIdle(actor);
+
+      expect(actor.state.current).toBe("idle");
+      expect(updateCount).toBeGreaterThan(0);
+
+      document.body.removeChild(groupEl);
+    });
+
+    test("behavior unchanged when getGroupElement is omitted (onUpdate fires per frame)", async () => {
+      let updateCount = 0;
+      const actor = createActor({ groupId: "group" }, () => {
+        updateCount++;
+      });
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "100px",
+            default: "200px",
+            collapseAnimation: {
+              easing: "ease-in-out",
+              duration: 5000,
+            },
+          }),
+        },
+      ]);
+      initializeSizes(actor, { width: 500, height: 200 });
+
+      const updatesBeforeAnimation = updateCount;
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(actor.state.current).toBe("togglingCollapse");
+      expect(updateCount).toBeGreaterThan(updatesBeforeAnimation);
+
+      await waitForIdle(actor);
+    });
+
+    test("onResize still fires each frame during applyDelta", async () => {
+      const groupEl = document.createElement("div");
+      document.body.appendChild(groupEl);
+
+      let resizeCount = 0;
+      const actor = createActor(
+        { groupId: "group" },
+        () => {},
+        () => groupEl
+      );
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-1",
+          }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "100px",
+            default: "200px",
+            collapseAnimation: {
+              easing: "ease-in-out",
+              duration: 5000,
+            },
+            onResize: {
+              current: () => {
+                resizeCount++;
+              },
+            },
+          }),
+        },
+      ]);
+      initializeSizes(actor, { width: 500, height: 200 });
+
+      actor.send({ type: "collapsePanel", panelId: "panel-2" });
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(actor.state.current).toBe("togglingCollapse");
+      expect(resizeCount).toBeGreaterThan(0);
+
+      await waitForIdle(actor);
+      document.body.removeChild(groupEl);
+    });
+  });
 
   test("overflow measurements should not collapse panels during animation", async () => {
     const actor = createActor({ groupId: "group" });

package/src/test-utils.ts

@@ -13,9 +13,14 @@ export interface Actor {
 
 export function createActor(
   input: Partial<GroupMachineContextValue>,
-  onChange?: (context: GroupMachineContextValue) => void
+  onChange?: (context: GroupMachineContextValue) => void,
+  getGroupElement?: () => HTMLElement | null
 ): Actor {
-  const [context, send, state] = groupMachine(input, onChange);
+  const [context, send, state] = groupMachine(
+    input,
+    onChange,
+    getGroupElement
+  );
 
   return {
     send,