@hyperframes/studio 0.7.99 → 0.7.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.99",
+  "version": "0.7.100",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.7.99",
-    "@hyperframes/core": "0.7.99",
-    "@hyperframes/sdk": "0.7.99",
-    "@hyperframes/player": "0.7.99",
-    "@hyperframes/studio-server": "0.7.99"
+    "@hyperframes/core": "0.7.100",
+    "@hyperframes/player": "0.7.100",
+    "@hyperframes/sdk": "0.7.100",
+    "@hyperframes/studio-server": "0.7.100",
+    "@hyperframes/parsers": "0.7.100"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -67,7 +67,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.99"
+    "@hyperframes/producer": "0.7.100"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -399,7 +399,7 @@ export function StudioApp() {
   } = useInspectorState(
     panelLayout.rightPanelTab,
     panelLayout.rightInspectorPanes,
-    panelLayout.rightCollapsed,
+    panelLayout.effectiveRightCollapsed,
     isPlaying,
     domEditSession.domEditSelection,
     gestureState === "recording",
@@ -512,7 +512,7 @@ export function StudioApp() {
                       />
                     }
                     right={
-                      panelLayout.rightCollapsed ? null : (
+                      panelLayout.effectiveRightCollapsed ? null : (
                         <StudioRightPanel
                           designPanelActive={designPanelActive}
                           activeBlockParams={activeBlockParams}

package/src/components/StudioHeader.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { shouldOpenInspector } from "./StudioHeader";
+
+describe("shouldOpenInspector", () => {
+  it("opens when the panel is hidden", () => {
+    expect(shouldOpenInspector(true, false)).toBe(true);
+  });
+
+  it("opens when a non-inspector tab is showing", () => {
+    expect(shouldOpenInspector(false, false)).toBe(true);
+  });
+
+  it("closes when the inspector is genuinely on screen", () => {
+    expect(shouldOpenInspector(false, true)).toBe(false);
+  });
+
+  it("opens when the window railed the panel away", () => {
+    // The regression this guards: the button used to branch on the raw
+    // rightCollapsed intent, which is still `false` while the window has the
+    // panel railed. That took the close branch, wrote rightCollapsed=true, and
+    // since that value is synced into the shareable Studio URL, a click that
+    // did nothing visible rewrote the link.
+    const userIntentIsOpen = false;
+    const windowRailedItAway = true;
+    expect(shouldOpenInspector(windowRailedItAway, true)).toBe(true);
+    expect(shouldOpenInspector(userIntentIsOpen, true)).toBe(false);
+  });
+});

package/src/components/StudioHeader.tsx

@@ -196,6 +196,21 @@ export function ViewModeToggle() {
   );
 }
 
+/**
+ * Does the header's Inspector button open the panel, or close it?
+ *
+ * Takes the EFFECTIVE collapse state, so a panel the window has railed away
+ * counts as closed even though the user's stored intent still says open. The
+ * argument name is the guard: passing raw intent here is the bug this exists
+ * to keep out.
+ */
+export function shouldOpenInspector(
+  effectiveRightCollapsed: boolean,
+  inspectorPanelActive: boolean,
+): boolean {
+  return effectiveRightCollapsed || !inspectorPanelActive;
+}
+
 // fallow-ignore-next-line complexity
 export function StudioHeader({
   captureFrameHref,
@@ -208,7 +223,11 @@ export function StudioHeader({
   onExport,
 }: StudioHeaderProps) {
   const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
-  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  // effectiveRightCollapsed, not the raw intent: in the auto-railed state the
+  // intent is still "open" while the panel is hidden, so branching on intent
+  // made this button write rightCollapsed=true — and that value is synced into
+  // the shareable Studio URL, so a dead click would rewrite a link.
+  const { effectiveRightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
 
   return (
@@ -328,7 +347,7 @@ export function StudioHeader({
           <button
             type="button"
             onClick={() => {
-              if (rightCollapsed || !inspectorPanelActive) {
+              if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
                 trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
                 setRightPanelTab("design");
                 setRightCollapsed(false);

package/src/components/StudioLeftSidebar.tsx

@@ -36,7 +36,7 @@ export function StudioLeftSidebar({
   onAddCompositionToTimeline,
 }: StudioLeftSidebarProps) {
   const {
-    leftCollapsed,
+    effectiveLeftCollapsed,
     leftWidth,
     adjustPanelWidth,
     toggleLeftSidebar,
@@ -71,7 +71,7 @@ export function StudioLeftSidebar({
     [renderQueue, waitForPendingDomEditSaves],
   );
 
-  if (leftCollapsed) {
+  if (effectiveLeftCollapsed) {
     return (
       <div className="mr-0.5 flex w-10 flex-shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1">
         <button

package/src/components/nle/NLEContext.tsx

@@ -11,7 +11,7 @@ import { useTimelinePlayer, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
 import type { CompositionLevel } from "./CompositionBreadcrumb";
 import { useCompositionStack } from "./useCompositionStack";
-import { MIN_TIMELINE_H, MIN_PREVIEW_H } from "./TimelineResizeDivider";
+import { MIN_TIMELINE_H, fitTimelineHeight } from "../../utils/fitPanels";
 import { setCompositionSourceMap } from "../editor/domEditingDom";
 import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
@@ -273,13 +273,22 @@ export function NLEProvider({
   }, []);
   const containerRef = useRef<HTMLDivElement>(null);
   // A height persisted on a tall window can exceed this window's container and
-  // collapse the flex-1 preview to 0px — clamp once the container is measurable
-  // (the drag/keyboard paths already clamp; the restore path must too).
+  // collapse the flex-1 preview to 0px. Observing the container rather than
+  // clamping once at mount is what makes a window RESIZED after load behave the
+  // same as one loaded at that size: dragging 760 -> 520 tall used to leave the
+  // timeline at its stored 429px and the preview at 47px.
   useEffect(() => {
-    const containerH = containerRef.current?.getBoundingClientRect().height;
-    if (!containerH) return;
-    const max = containerH - MIN_PREVIEW_H;
-    setTimelineH((prev) => (prev > max ? Math.max(MIN_TIMELINE_H, max) : prev));
+    const element = containerRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const reconcile = () => {
+      const containerH = element.getBoundingClientRect().height;
+      if (!containerH) return;
+      setTimelineH((prev) => fitTimelineHeight(containerH, prev));
+    };
+    reconcile();
+    const observer = new ResizeObserver(reconcile);
+    observer.observe(element);
+    return () => observer.disconnect();
   }, []);
 
   const hasLoadedOnceRef = useRef(false);

package/src/components/nle/TimelineResizeDivider.tsx

@@ -1,7 +1,5 @@
 import { useCallback, useRef } from "react";
-
-export const MIN_TIMELINE_H = 100;
-export const MIN_PREVIEW_H = 120;
+import { MIN_PREVIEW_H, MIN_TIMELINE_H, fitTimelineHeight } from "../../utils/fitPanels";
 
 /**
  * Horizontal drag/keyboard-resizable divider between the preview and the
@@ -41,12 +39,7 @@ export function TimelineResizeDivider({
       if (!isDragging.current || !containerRef.current) return;
       const rect = containerRef.current.getBoundingClientRect();
       const mouseY = e.clientY - rect.top;
-      const containerH = rect.height;
-      const newTimelineH = Math.max(
-        MIN_TIMELINE_H,
-        Math.min(containerH - MIN_PREVIEW_H, containerH - mouseY),
-      );
-      setTimelineH(newTimelineH);
+      setTimelineH(fitTimelineHeight(rect.height, rect.height - mouseY));
     },
     [disabled, containerRef, setTimelineH],
   );
@@ -61,10 +54,10 @@ export function TimelineResizeDivider({
       if (disabled) return;
       if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
       e.preventDefault();
-      const containerH = containerRef.current?.getBoundingClientRect().height ?? Infinity;
+      const containerH = containerRef.current?.getBoundingClientRect().height ?? 0;
       const delta = e.key === "ArrowUp" ? 16 : -16;
       setTimelineH((prev) => {
-        const next = Math.max(MIN_TIMELINE_H, Math.min(containerH - MIN_PREVIEW_H, prev + delta));
+        const next = fitTimelineHeight(containerH, prev + delta);
         persistTimelineH(next);
         return next;
       });

package/src/contexts/PanelLayoutContext.tsx

@@ -17,9 +17,10 @@ export function PanelLayoutProvider({
     rightWidth,
     adjustPanelWidth,
     leftCollapsed,
-    setLeftCollapsed,
     rightCollapsed,
     setRightCollapsed,
+    effectiveLeftCollapsed,
+    effectiveRightCollapsed,
     rightPanelTab,
     setRightPanelTab,
     rightInspectorPanes,
@@ -41,9 +42,10 @@ export function PanelLayoutProvider({
       rightWidth,
       adjustPanelWidth,
       leftCollapsed,
-      setLeftCollapsed,
       rightCollapsed,
       setRightCollapsed,
+      effectiveLeftCollapsed,
+      effectiveRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
       rightInspectorPanes,
@@ -59,9 +61,10 @@ export function PanelLayoutProvider({
       rightWidth,
       adjustPanelWidth,
       leftCollapsed,
-      setLeftCollapsed,
       rightCollapsed,
       setRightCollapsed,
+      effectiveLeftCollapsed,
+      effectiveRightCollapsed,
       rightPanelTab,
       setRightPanelTab,
       rightInspectorPanes,

package/src/hooks/gsapEditOutcome.ts

@@ -3,7 +3,25 @@ import { editabilityForProvenance, type GsapAnimation } from "@hyperframes/core/
 export type GsapEditBlockReason = "no-selector" | "unroll-required" | "source-uneditable";
 
 export type GsapEditOutcome =
-  | { status: "persisted" }
+  | {
+      status: "persisted";
+      /**
+       * Whether this edit already accounted for where the gesture left the
+       * element, so the caller must not persist the drag offset on top.
+       *
+       * The scale route needs it: a committed scale renders around the element
+       * centre rather than the dragged corner, so it measures the difference
+       * and writes the position itself. Every other route moves nothing the
+       * caller has not already been told about, and the caller owns the offset.
+       *
+       * It has to be reported rather than inferred. The caller used to guess
+       * from "does this element have a scale-group tween", which is true for an
+       * element whose scale is an instant hold — but that resize commits
+       * width/height, not scale, so the guess withheld an offset nobody wrote
+       * and the element snapped back to its authored position on every drag.
+       */
+      ownsDragOffset?: boolean;
+    }
   | { status: "blocked"; reason: GsapEditBlockReason };
 
 const COPY: Record<GsapEditBlockReason, string> = {

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -0,0 +1,289 @@
+// @vitest-environment happy-dom
+/**
+ * What the resize COMMITS, checked as geometry rather than as structure.
+ *
+ * The structural sweep beside this one proves a resize never addresses a
+ * missing animation and never leaves a tween spanning two property groups.
+ * Neither says the box ends up the size the user dragged it to, which is the
+ * thing they are actually looking at.
+ *
+ * The invariant is split by who owns the drop point, because the two halves are
+ * genuinely different jobs:
+ *
+ *   - The committed size or scale must reproduce the RENDERED box the user
+ *     dropped, whatever rotation is on the element. This is the resize's job in
+ *     every route.
+ *   - When the resize reports `ownsDragOffset`, the box must also land on the
+ *     drop POINT, because it has taken responsibility for the position. When it
+ *     does not, position is the drag's job and is not asserted here.
+ *
+ * Rotation is the reason this exists. The committed scale is worked out from
+ * the element's CSS box, and a rotated element's rendered box is not its CSS
+ * box — so the two are only equal if the drafted size is in CSS-box terms all
+ * the way through. A sweep across rotations is what tells us it is.
+ */
+import { afterEach, expect, it, vi } from "vitest";
+import { classifyTweenPropertyGroup } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { usePlayerStore } from "../player/store/playerStore";
+import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  document.body.innerHTML = "";
+});
+
+const LAYOUT = { left: 120, top: 520 };
+
+interface Pose {
+  box: { w: number; h: number };
+  pos: { x: number; y: number };
+  scale: { x: number; y: number };
+}
+
+/** The AABB a browser reports for `translate() rotate() scale()` about the centre. */
+function renderRect(pose: Pose, rotationDeg: number) {
+  const rad = (rotationDeg * Math.PI) / 180;
+  const [cos, sin] = [Math.abs(Math.cos(rad)), Math.abs(Math.sin(rad))];
+  const [sw, sh] = [pose.box.w * pose.scale.x, pose.box.h * pose.scale.y];
+  const w = sw * cos + sh * sin;
+  const h = sw * sin + sh * cos;
+  const cx = LAYOUT.left + pose.box.w / 2 + pose.pos.x;
+  const cy = LAYOUT.top + pose.box.h / 2 + pose.pos.y;
+  return { x: cx - w / 2, y: cy - h / 2, w, h };
+}
+
+type Props = Record<string, number>;
+
+function tween(id: string, properties: Props, duration: number): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#el",
+    propertyGroup: classifyTweenPropertyGroup(properties),
+    method: "to",
+    properties,
+    position: 0,
+    resolvedStart: 0,
+    duration,
+    ...(duration === 0 ? { extras: { immediateRender: "__raw:true" } } : {}),
+  } as unknown as GsapAnimation;
+}
+
+interface Case {
+  name: string;
+  /** The element's untransformed CSS box. */
+  box: { w: number; h: number };
+  /** Where it sat, and at what scale, before the gesture. */
+  base: { x: number; y: number };
+  liveScale: { x: number; y: number };
+  rotation: number;
+  /** The box the user dragged to, and where the draft put it. */
+  drop: { w: number; h: number; x: number; y: number };
+  animations: () => GsapAnimation[];
+  /** Whether this route takes responsibility for where the box lands. */
+  settles: boolean;
+}
+
+const ROTATIONS = [0, -8, 45, -47, 90, 180];
+
+/**
+ * The routes a resize can take, and whether each SETTLES the drop point.
+ *
+ * Only a committed scale moves the box: it renders about the element centre
+ * rather than the dragged corner, so the route measures the difference and
+ * writes the position. Every other route commits width and height and moves
+ * nothing, which leaves the anchor to the drag. An element whose scale is an
+ * instant hold has a scale tween and still commits size, so it belongs with
+ * the size routes here however it looks from the animation list.
+ */
+const ROUTES = {
+  "scale tween": { animations: () => [tween("#el-scale", { scale: 1 }, 2)], settles: true },
+  "scale longhands": {
+    animations: () => [tween("#el-scale", { scaleX: 1, scaleY: 1 }, 2)],
+    settles: true,
+  },
+  "scale instant hold": { animations: () => [tween("#el-scale", { scale: 1 }, 0)], settles: false },
+  "size tween": {
+    animations: () => [tween("#el-size", { width: 630, height: 408 }, 2)],
+    settles: false,
+  },
+  "size instant hold": {
+    animations: () => [tween("#el-size", { width: 630, height: 408 }, 0)],
+    settles: false,
+  },
+} as const;
+
+function buildCases(): Case[] {
+  const cases: Case[] = [];
+  for (const [routeName, route] of Object.entries(ROUTES)) {
+    for (const rotation of ROTATIONS) {
+      for (const [dropName, drop] of Object.entries({
+        shrink: { w: 326, h: 213, x: 60, y: 40 },
+        grow: { w: 980, h: 640, x: -120, y: -90 },
+        "near zero": { w: 12, h: 8, x: 200, y: 160 },
+        "aspect flip": { w: 900, h: 90, x: 10, y: 10 },
+      })) {
+        cases.push({
+          name: `${routeName} / rotation ${rotation} / ${dropName}`,
+          box: { w: 630, h: 408 },
+          base: { x: 40, y: 25 },
+          liveScale: { x: 1, y: 1 },
+          rotation,
+          drop,
+          animations: route.animations,
+          settles: route.settles,
+        });
+      }
+    }
+  }
+  return cases;
+}
+
+const CASES = buildCases();
+
+/** The scale and size the run committed, read at the playhead. */
+function committed(calls: unknown[][]) {
+  let scale: { x: number; y: number } | null = null;
+  let size: { w: number; h: number } | null = null;
+  const take = (source: Props | undefined) => {
+    if (!source) return;
+    const sx = source.scaleX ?? source.scale;
+    const sy = source.scaleY ?? source.scale;
+    if (sx != null && sy != null) scale = { x: sx, y: sy };
+    if (source.width != null && source.height != null) {
+      size = { w: source.width, h: source.height };
+    }
+  };
+  for (const call of calls) {
+    const mutation = call[1] as {
+      properties?: Props;
+      percentage?: number;
+      keyframes?: Array<{ percentage: number; properties: Props }>;
+    };
+    if (mutation.keyframes) {
+      for (const frame of mutation.keyframes) if (frame.percentage === 0) take(frame.properties);
+      continue;
+    }
+    if (mutation.percentage != null && mutation.percentage !== 0) continue;
+    take(mutation.properties);
+  }
+  return { scale, size };
+}
+
+/** The element as the gesture leaves it: drafted box, base pose, live pose. */
+function mountCase(testCase: Case, live: Pose) {
+  const el = document.createElement("div");
+  el.id = "el";
+  el.setAttribute("data-hf-studio-original-box-width", String(testCase.box.w));
+  el.setAttribute("data-hf-studio-original-box-height", String(testCase.box.h));
+  el.setAttribute("data-hf-drag-gsap-base-x", String(testCase.base.x));
+  el.setAttribute("data-hf-drag-gsap-base-y", String(testCase.base.y));
+  el.setAttribute("data-hf-studio-box-size", "true");
+  el.style.width = `${testCase.drop.w}px`;
+  el.style.height = `${testCase.drop.h}px`;
+  document.body.append(el);
+
+  el.getBoundingClientRect = () => {
+    const w = Number.parseFloat(el.style.width) || live.box.w;
+    const h = Number.parseFloat(el.style.height) || live.box.h;
+    const rect = renderRect({ ...live, box: { w, h } }, testCase.rotation);
+    return { ...rect, width: rect.w, height: rect.h } as unknown as DOMRect;
+  };
+  const gsap = {
+    set: (_target: Element, vars: Props) => {
+      if (vars.x != null) live.pos.x = vars.x;
+      if (vars.y != null) live.pos.y = vars.y;
+      if (vars.scaleX != null) live.scale.x = vars.scaleX;
+      if (vars.scaleY != null) live.scale.y = vars.scaleY;
+    },
+    getProperty: (_target: Element, prop: string) =>
+      ({
+        scaleX: live.scale.x,
+        scaleY: live.scale.y,
+        x: live.pos.x,
+        y: live.pos.y,
+        rotation: testCase.rotation,
+      })[prop] ?? 0,
+  };
+  Object.assign(window, { gsap });
+  const iframe = {
+    contentWindow: { gsap, __timelines: { main: { getChildren: () => [] } } },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  return { el, iframe };
+}
+
+/** One run: mount the case, drive the intercept, hand the result to the judge. */
+async function runCase(testCase: Case): Promise<string[]> {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  const live: Pose = {
+    box: { ...testCase.box },
+    pos: { x: testCase.drop.x, y: testCase.drop.y },
+    scale: { ...testCase.liveScale },
+  };
+  const { el, iframe } = mountCase(testCase, live);
+  const dropped = el.getBoundingClientRect();
+  const animations = testCase.animations();
+  const commitMutation = vi.fn();
+
+  const outcome = await tryGsapResizeIntercept(
+    { id: "el", selector: "#el", element: el } as DomEditSelection,
+    { width: testCase.drop.w, height: testCase.drop.h },
+    animations,
+    iframe,
+    commitMutation as never,
+    async () => animations,
+  );
+
+  const { scale, size } = committed(commitMutation.mock.calls);
+  const settled = renderRect(
+    { box: size ?? testCase.box, pos: { ...live.pos }, scale: scale ?? testCase.liveScale },
+    testCase.rotation,
+  );
+  const owns = outcome.status === "persisted" && outcome.ownsDragOffset === true;
+  return judge(testCase, dropped, settled, owns);
+}
+
+/**
+ * What the run got wrong, if anything. 1px: position rounds to whole pixels and
+ * scale keeps three decimals.
+ */
+function judge(
+  testCase: Case,
+  dropped: DOMRect,
+  settled: { x: number; y: number; w: number; h: number },
+  owns: boolean,
+): string[] {
+  const off = (a: number, b: number) => Math.abs(a - b) > 1;
+  if (off(settled.w, dropped.width) || off(settled.h, dropped.height)) {
+    return [
+      `${testCase.name} — box ${settled.w.toFixed(1)}x${settled.h.toFixed(1)}` +
+        `, dropped ${dropped.width.toFixed(1)}x${dropped.height.toFixed(1)}`,
+    ];
+  }
+  // Claiming the drop point is only honest for the routes that settle it. The
+  // size routes commit width and height and move nothing, so the drag still owns
+  // the anchor — and a run that claims otherwise makes the caller withhold an
+  // offset nobody writes. The position check below cannot see that on its own:
+  // the fixture's live pose starts at the drop, which is where the gesture
+  // leaves it, so a size route trivially "lands" there.
+  if (owns !== testCase.settles) {
+    return [`${testCase.name} — ownsDragOffset ${owns}, expected ${testCase.settles}`];
+  }
+  if (owns && (off(settled.x, dropped.x) || off(settled.y, dropped.y))) {
+    return [
+      `${testCase.name} — landed ${settled.x.toFixed(1)},${settled.y.toFixed(1)}` +
+        `, dropped ${dropped.x.toFixed(1)},${dropped.y.toFixed(1)}`,
+    ];
+  }
+  return [];
+}
+
+it(`sweeps ${CASES.length} rotations and drops for the box the user dropped`, async () => {
+  const failures: string[] = [];
+  for (const testCase of CASES) failures.push(...(await runCase(testCase)));
+  expect(failures).toEqual([]);
+});

package/src/hooks/gsapResizeIntercept.test.ts

@@ -98,7 +98,7 @@ it("updates a duration-zero size hold in place instead of converting it to keyfr
     commitMutation,
   );
 
-  expect(handled).toEqual({ status: "persisted" });
+  expect(handled).toMatchObject({ status: "persisted" });
   expect(commitMutation).toHaveBeenCalledTimes(1);
   expect(commitMutation.mock.calls[0]![1]).toEqual({
     type: "update-properties",
@@ -246,7 +246,7 @@ async function runResize(
     commitMutation as never,
     async () => [keyframedScaleFixture()],
   );
-  expect(handled).toEqual({ status: "persisted" });
+  expect(handled).toMatchObject({ status: "persisted" });
   return committed;
 }