@window-splitter/state 1.1.3 → 1.1.5--canary.f61d2d9.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.3",
+  "version": "1.1.5--canary.f61d2d9.0",
   "description": "A state machine for a WAI-ARIA compliant window splitter",
   "homepage": "https://react-window-splitter-six.vercel.app",
   "repository": {
@@ -19,21 +19,29 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "scripts": {
+    "build": "tshy",
+    "dev": "tshy -w",
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:browser": "vitest",
+    "clean": "rm -rf dist .turbo .tshy .tshy-build"
+  },
   "license": "MIT",
   "devDependencies": {
-    "@internal/eslint-config": "1.1.3",
+    "@internal/eslint-config": "1.1.5--canary.f61d2d9.0",
     "@testing-library/react": "^16.0.0",
     "@types/big.js": "^6.2.2",
-    "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-istanbul": "^3.1.2",
-    "eslint": "^9.9.0",
+    "@vitest/browser": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "eslint": "catalog:",
     "framer-motion": "^11.3.28",
     "jsdom": "^24.1.1",
-    "playwright": "^1.46.0",
+    "playwright": "catalog:",
     "tiny-cookie": "^2.5.1",
-    "tshy": "^3.0.2",
-    "typescript": "^5.5.4",
-    "vitest": "^3.1.2"
+    "tshy": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
   },
   "dependencies": {
     "big.js": "^6.2.1"
@@ -69,13 +77,5 @@
     "window"
   ],
   "types": "./dist/commonjs/index.d.ts",
-  "gitHead": "0fae9dff0a45d9423c1327667de042b70774b8bc",
-  "scripts": {
-    "build": "tshy",
-    "dev": "tshy -w",
-    "lint": "eslint .",
-    "test": "vitest",
-    "test:browser": "vitest",
-    "clean": "rm -rf dist .turbo .tshy .tshy-build"
-  }
-}
+  "gitHead": "f61d2d9e76797f8d8a4061be8952e8ad6ca2f7be"
+}

package/src/index.ts

@@ -1638,7 +1638,7 @@ function handleOverflow(context: GroupMachineContextValue) {
   const totalSize = pixelItems.reduce((acc, i) => acc.add(i), new Big(0));
   const overflow = totalSize.abs().sub(groupSize);
 
-  if (overflow.eq(0) || groupSize.eq(0)) {
+  if (overflow.abs().lt(1) || groupSize.eq(0)) {
     return context;
   }
 
@@ -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 = {
@@ -2042,6 +2050,8 @@ export function groupMachine(
   }
 
   function send(event: GroupMachineEvent) {
+    let skipOnUpdate = false;
+
     switch (event.type) {
       case "lockGroup":
         locked = true;
@@ -2183,6 +2193,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;
@@ -2216,7 +2235,7 @@ export function groupMachine(
           context.items = withLastKnownSize;
         } else if (
           totalSize > getGroupSize(context) &&
-          state.current !== "dragging"
+          state.current === "idle"
         ) {
           context.items = handleOverflow({
             ...context,
@@ -2365,11 +2384,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,308 @@ 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("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" });
+
+    sendAll(actor, [
+      {
+        type: "registerPanel",
+        data: initializePanel({
+          id: "panel-1",
+          collapsible: true,
+          collapsedSize: "60px",
+          default: "140px",
+        }),
+      },
+      {
+        type: "registerPanelHandle",
+        data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({
+          id: "panel-2",
+          collapsible: true,
+          default: "140px",
+          collapseAnimation: {
+            easing: "ease-in-out",
+            duration: 500,
+          },
+        }),
+      },
+    ]);
+
+    actor.send({
+      type: "setSize",
+      size: { width: 300, height: 200 },
+    });
+    actor.send({
+      type: "setActualItemsSize",
+      childrenSizes: {
+        "panel-1": { width: 140, height: 200 },
+        "panel-2": { width: 140, height: 200 },
+      },
+    });
+
+    const panelBefore = actor.value.items.find(
+      (item) => isPanelData(item) && item.id === "panel-1"
+    );
+    expect(panelBefore?.collapsed).toBe(false);
+
+    actor.send({
+      type: "collapsePanel",
+      panelId: "panel-2",
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(actor.state.current).toBe("togglingCollapse");
+
+    actor.send({
+      type: "setActualItemsSize",
+      childrenSizes: {
+        "panel-1": { width: 200, height: 200 },
+        "panel-2": { width: 200, height: 200 },
+      },
+    });
+
+    const panelAfter = actor.value.items.find(
+      (item) => isPanelData(item) && item.id === "panel-1"
+    );
+    expect(panelAfter?.collapsed).toBe(false);
+
+    await waitForIdle(actor);
+  });
+
   test("supports 1 panel being collapsed with another panel expanding to fill", () => {
     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,

package/.turbo/turbo-lint.log

@@ -1,18 +0,0 @@
-
-
-> @window-splitter/state@1.1.0 lint /Users/alisowski/Documents/react-window-splitter/packages/state
-> eslint .
-
-=============
-
-WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.
-
-You may find that it works just fine, or you may not.
-
-SUPPORTED TYPESCRIPT VERSIONS: >=4.7.4 <5.6.0
-
-YOUR TYPESCRIPT VERSION: 5.8.3
-
-Please only submit bug reports when using the officially supported version.
-
-=============

package/LICENSE

@@ -1,7 +0,0 @@
-Copyright 2025 Andrew Lisowski
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.