@hyperframes/studio 0.8.59 → 0.8.61

package/src/styles/studio.css

@@ -202,7 +202,76 @@ body {
 .timeline-clip {
   background-color: var(--clip-bg);
   border: 1px solid var(--clip-border);
+  border-radius: var(--timeline-clip-radius);
+  box-shadow:
+    inset 0 1px 0 var(--timeline-clip-highlight),
+    var(--timeline-clip-shadow);
+}
+
+.timeline-transition {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 30;
+}
+
+.timeline-transition__zone {
+  position: absolute;
+  left: calc(var(--timeline-transition-zone-width) / -2);
+  top: -21px;
+  width: var(--timeline-transition-zone-width);
+  height: 42px;
   border-radius: 8px;
+  overflow: hidden;
+  background: var(--timeline-transition-zone);
+  filter: blur(2.5px);
+  opacity: 0.95;
+}
+
+.timeline-transition__image {
+  position: absolute;
+  inset: -4px;
+  background-position: center;
+  background-size: cover;
+}
+
+.timeline-transition__image--out {
+  mask-image: linear-gradient(90deg, black 0%, transparent 100%);
+}
+
+.timeline-transition__image--in {
+  mask-image: linear-gradient(90deg, transparent 0%, black 100%);
+}
+
+.timeline-transition__badge {
+  position: absolute;
+  left: -14px;
+  top: -14px;
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid color-mix(in srgb, var(--timeline-transition-badge-ink) 22%, transparent);
+  border-radius: 999px;
+  background: var(--timeline-transition-badge);
+  box-shadow: 0 2px 5px var(--timeline-playhead-shadow);
+}
+
+.timeline-transition__badge svg {
+  width: 17px;
+  height: 17px;
+}
+.timeline-transition__frame,
+.timeline-transition__frame--out,
+.timeline-transition__frame--in {
+  fill: none;
+  stroke: var(--timeline-transition-badge-ink);
+  stroke-width: 1.5;
+}
+.timeline-transition__intersection {
+  fill: var(--timeline-transition-badge-ink);
+  opacity: 0.7;
 }
 
 .timeline-clip::before {
@@ -227,16 +296,37 @@ body {
    accented visual clips — so the audio zone at the bottom is visually separate
    at a glance (the timeline's kinds: visual on top, audio below). */
 .timeline-clip.is-audio {
-  background-color: rgba(167, 139, 250, 0.16);
-  border-color: rgba(167, 139, 250, 0.4);
+  background-color: var(--timeline-clip-audio-bg);
+  border-color: var(--timeline-clip-audio-border);
+  border-radius: var(--timeline-clip-audio-radius);
 }
 
 .timeline-clip.is-audio.is-hovered {
-  background-color: rgba(167, 139, 250, 0.24);
+  background-color: var(--timeline-clip-audio-bg-hover);
 }
 
 .timeline-clip.is-audio.is-dragging {
-  background-color: rgba(60, 52, 84, 0.96);
+  box-shadow:
+    inset 0 0 0 999px var(--timeline-clip-audio-bg-dragging),
+    0 8px 24px var(--timeline-clip-shadow-dragging);
+}
+
+/* Mute greys the pill in place. Hot path: no transition. */
+.timeline-clip.is-audio[data-clip-hidden="true"],
+.timeline-clip.is-audio[data-audio-muted="true"] {
+  background-color: var(--timeline-clip-audio-muted-bg);
+  transition: none;
+}
+
+.timeline-audio-link {
+  position: absolute;
+  z-index: 4;
+  top: -9px;
+  left: 50%;
+  width: 1px;
+  height: 10px;
+  background: var(--timeline-audio-link);
+  pointer-events: none;
 }
 
 .timeline-clip.is-hovered {
@@ -248,53 +338,56 @@ body {
 }
 
 .timeline-clip.is-selected {
-  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
+  outline: 1.5px solid var(--timeline-clip-selection);
+  outline-offset: -1.5px;
 }
 
-.timeline-clip[data-active].is-selected {
-  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
-}
-
-.timeline-clip.is-dragging {
-  /* Solid background so the picked-up clip reads clearly while dragging — audio
-     clips (waveform drawn on a separate layer) would otherwise look transparent. */
-  background-color: var(--clip-bg-dragging);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+.timeline-clip.is-selected::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--timeline-clip-selection-highlight);
+  pointer-events: none;
 }
 
-/* Keep the white selection outline while dragging (a plain box-shadow alone gets
-   overridden by .is-dragging's drop shadow, so re-state both together). */
-.timeline-clip.is-selected.is-dragging {
-  box-shadow:
-    0 0 0 1.5px rgba(255, 255, 255, 0.85),
-    0 8px 24px rgba(0, 0, 0, 0.4);
+.timeline-clip[data-active].is-selected {
+  outline: 1.5px solid var(--timeline-clip-selection);
+  outline-offset: -1.5px;
 }
 
-.timeline-clip[data-active].is-selected.is-dragging {
+.timeline-clip.is-dragging {
+  /* Veil is a shadow, not background-color, so drop does not fade the hover fill. */
   box-shadow:
-    0 0 0 1.5px rgba(255, 255, 255, 0.85),
-    0 8px 24px rgba(0, 0, 0, 0.4);
+    inset 0 0 0 999px var(--clip-bg-dragging),
+    0 8px 24px var(--timeline-clip-shadow-dragging);
 }
 
 .timeline-clip__label {
   position: absolute;
-  top: 6px;
-  left: 12px;
-  right: 10px;
+  top: 5px;
+  left: 6px;
   z-index: 6;
+  width: fit-content;
+  max-width: calc(100% - 22px);
   overflow: hidden;
-  color: rgba(255, 255, 255, 0.5);
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--timeline-clip-chip-bg);
+  color: var(--timeline-clip-chip-text);
   font-size: 10px;
   font-weight: 500;
-  line-height: 1;
+  line-height: 16px;
   pointer-events: none;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.timeline-clip[data-active] .timeline-clip__label {
-  color: rgba(232, 255, 247, 0.95);
+.timeline-clip.is-audio .timeline-clip__label {
+  top: 11px;
+  left: 9px;
+  background: var(--timeline-clip-chip-audio-bg);
 }
 
 .timeline-clip__timecode {
@@ -302,7 +395,7 @@ body {
   bottom: 6px;
   left: 12px;
   overflow: hidden;
-  color: rgba(255, 255, 255, 0.34);
+  color: var(--timeline-tick-text);
   font-family: var(--font-mono);
   font-size: 9px;
   font-variant-numeric: tabular-nums;
@@ -313,20 +406,7 @@ body {
 
 @media (prefers-reduced-motion: no-preference) {
   .timeline-clip {
-    transition:
-      background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      color 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .timeline-clip::before {
-    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  .timeline-clip__label {
-    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
+    transition: background-color 120ms ease-out;
   }
 
   .timeline-clip__handle-bar {

package/src/styles/theme.css

@@ -62,6 +62,46 @@
   --timeline-tick-major: rgba(255, 255, 255, 0.1);
   --timeline-tick-minor: rgba(255, 255, 255, 0.06);
   --timeline-clip-bg: rgba(255, 255, 255, 0.12);
+  --timeline-clip-label-active: rgba(232, 255, 247, 0.95);
+  --timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
+  --timeline-clip-audio-bg: rgba(167, 139, 250, 0.16);
+  --timeline-clip-audio-border: rgba(167, 139, 250, 0.4);
+  --timeline-clip-audio-bg-hover: rgba(167, 139, 250, 0.24);
+  --timeline-clip-audio-bg-dragging: rgba(60, 52, 84, 0.96);
+  --timeline-clip-audio-muted-bg: rgb(72, 74, 78);
+  --timeline-audio-link: #a0aaa4;
+  --timeline-clip-selection: rgba(255, 255, 255, 0.85);
+  --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
+  --timeline-clip-radius: 8px;
+  --timeline-clip-audio-radius: 21px;
+  --timeline-clip-highlight: rgb(255 255 255 / 0.08);
+  --timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
+  --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
+  --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
+  --timeline-clip-chip-text: #ffffff;
+  --timeline-shortcut-bg: rgba(17, 23, 35, 0.84);
+  --timeline-thumbnail-shimmer: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.02) 0%,
+    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+  --timeline-thumbnail-label-gradient: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.85) 0%,
+    rgba(0, 0, 0, 0.4) 60%,
+    transparent 100%
+  );
+  --timeline-thumbnail-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
+  --timeline-waveform-bar-rgb: 245, 237, 255;
+  --timeline-waveform-muted-rgb: 236, 238, 242;
+  --timeline-waveform-baseline-rgb: 226, 216, 238;
+  --timeline-waveform-error: repeating-linear-gradient(
+    90deg,
+    rgba(245, 237, 255, 0.35) 0 2px,
+    transparent 2px 5px
+  );
+  --timeline-waveform-label-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
   --timeline-clip-bg-active: rgba(60, 230, 172, 0.2);
   --timeline-clip-bg-hover: rgba(255, 255, 255, 0.16);
   --timeline-clip-bg-dragging: rgba(38, 42, 52, 0.96);
@@ -78,6 +118,43 @@
   --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
   --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
   --timeline-track-label: rgba(255, 255, 255, 0.5);
+  --timeline-border-strong: rgba(255, 255, 255, 0.2);
+  --timeline-group-member-tint: rgba(255, 255, 255, 0.035);
+  --timeline-overlay-text: rgba(255, 255, 255, 0.8);
+  --timeline-accent: #3ce6ac;
+  --timeline-accent-soft: rgba(60, 230, 172, 0.18);
+  --timeline-accent-faint: rgba(60, 230, 172, 0.055);
+  --timeline-accent-fill: rgba(60, 230, 172, 0.1);
+  --timeline-accent-glow: rgba(60, 230, 172, 0.5);
+  --timeline-accent-border: rgba(60, 230, 172, 0.7);
+  --timeline-accent-rail: rgba(60, 230, 172, 0.35);
+  --timeline-accent-hover: rgba(60, 230, 172, 0.25);
+  --timeline-accent-button-bg: rgba(60, 230, 172, 0.15);
+  --timeline-danger: rgba(239, 68, 68, 0.7);
+  --timeline-info-bg: rgba(59, 130, 246, 0.12);
+  --timeline-info-border: rgba(59, 130, 246, 0.4);
+  --timeline-dialog-bg: #1b1b1f;
+  --timeline-diamond-bg: #171717;
+  --timeline-diamond-border: rgba(255, 255, 255, 0.14);
+  --timeline-text-solid: #ffffff;
+  --timeline-text-faint: rgba(255, 255, 255, 0.35);
+  --timeline-text-dim: rgba(255, 255, 255, 0.4);
+  --timeline-text-soft: rgba(255, 255, 255, 0.75);
+  --timeline-text-bright: rgba(255, 255, 255, 0.7);
+  --timeline-snap-guide: rgba(255, 255, 255, 0.6);
+  --timeline-overlay-bg: rgba(0, 0, 0, 0.8);
+  --timeline-overlay-bg-strong: rgba(0, 0, 0, 0.85);
+  --timeline-input-bg: rgba(0, 0, 0, 0.3);
+  --timeline-automation-rail: rgba(255, 255, 255, 0.08);
+  --timeline-automation-point-muted: rgba(0, 0, 0, 0.5);
+  --timeline-diamond-muted: #a3a3a3;
+  --timeline-beat: rgb(34, 197, 94);
+  --timeline-clip-shadow-dragging: rgba(0, 0, 0, 0.4);
+  --timeline-playhead-glow: rgba(60, 230, 172, 0.14);
+  --timeline-playhead-shadow: rgba(0, 0, 0, 0.55);
+  --timeline-transition-zone: rgba(255, 255, 255, 0.2);
+  --timeline-transition-badge: rgba(237, 244, 239, 0.98);
+  --timeline-transition-badge-ink: rgba(36, 56, 45, 0.96);
 
   /* -------------------------------------------------------------- geometry */
 
@@ -146,7 +223,14 @@
   --duration-press: 120ms;
   --duration-hover: 150ms;
   --duration-expand: 160ms;
-  --duration-open: 180ms;
+  /* Menus, popovers, and dropdowns. Open is ease-out; close is shorter and ease-in. */
+  --duration-open: 120ms;
+  --duration-close: 90ms;
+  /* Tooltips use the same enter shape on a shorter open. */
+  --duration-tooltip: 100ms;
+  /* Visible on the first frame. Never enter from scale 0 or opacity 0. */
+  --popup-enter-opacity: 0.8;
+  --popup-enter-scale: 0.97;
 
   /* ------------------------------------------------------------------ icon */
 
@@ -264,6 +348,34 @@
   --color-white: #fff;
 }
 
+/* One paper block. A host sets data-theme="paper" on the document element. */
+:root[data-theme="paper"] {
+  --timeline-shell-bg: #f4f6f3;
+  --timeline-row-bg: #edf0ed;
+  --timeline-clip-bg: #c9d1cb;
+  --timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
+  --timeline-clip-highlight: rgb(255 255 255 / 0.08);
+  --timeline-clip-selection: #0f766e;
+  --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
+  --timeline-clip-chip-bg: rgba(15, 22, 18, 0.73);
+  --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
+  --timeline-clip-chip-text: #ffffff;
+  --timeline-clip-audio-bg: rgb(150, 128, 180);
+  --timeline-clip-audio-bg-hover: rgb(135, 109, 170);
+  --timeline-clip-audio-bg-dragging: rgb(232, 224, 242);
+  --timeline-clip-audio-border: rgba(113, 80, 155, 0.45);
+  --timeline-clip-audio-muted-bg: rgb(156, 161, 157);
+  --timeline-audio-link: #626d66;
+  --timeline-waveform-bar-rgb: 20, 12, 32;
+  --timeline-waveform-muted-rgb: 24, 28, 26;
+  --timeline-waveform-baseline-rgb: 76, 62, 88;
+  --timeline-waveform-error: repeating-linear-gradient(
+    90deg,
+    rgba(20, 12, 32, 0.35) 0 2px,
+    transparent 2px 5px
+  );
+}
+
 /* Motion durations as utilities, since Tailwind has no `--duration-*`
  * namespace. Each one zeroes itself under `prefers-reduced-motion`, so a
  * caller cannot forget the reduced-motion case. */

package/src/styles/theme.test.ts

@@ -109,6 +109,15 @@ describe("studio theme", () => {
     expect(vars.get("--text-lg")).toBe("1.125rem");
   });
 
+  it("opens menus from a visible shape and closes them faster", () => {
+    expect(declaredValue("--duration-open")).toBe("120ms");
+    expect(declaredValue("--duration-close")).toBe("90ms");
+    expect(declaredValue("--duration-tooltip")).toBe("100ms");
+    expect(declaredValue("--popup-enter-opacity")).toBe("0.8");
+    expect(declaredValue("--popup-enter-scale")).toBe("0.97");
+    expect(declaredValue("--duration-hover")).toBe("150ms");
+  });
+
   it("compiles a motion-duration utility with a reduced-motion variant", async () => {
     const css = await build("studio.css", ["duration-press", "duration-open"]);
 

package/src/utils/audioMeterVisibility.ts

@@ -1,12 +1,12 @@
 import { create } from "zustand";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "./studioUiPreferences";
 
-/** Whether the audio meter strip is shown; persisted, on unless the user hid it. */
+/** Whether the audio meter strip is shown; persisted, off unless the user showed it. */
 export const useAudioMetersVisible = create<{
   visible: boolean;
   setVisible: (visible: boolean) => void;
 }>((set) => ({
-  visible: readStudioUiPreferences().audioMetersVisible ?? true,
+  visible: readStudioUiPreferences().audioMetersVisible ?? false,
   setVisible: (visible) => {
     writeStudioUiPreferences({ audioMetersVisible: visible });
     set({ visible });

package/src/utils/sdkCutover.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   shouldUseSdkCutover,
   sdkCutoverPersist,
@@ -14,6 +14,7 @@ import {
 import { openComposition } from "@hyperframes/sdk";
 import { createMemoryAdapter } from "@hyperframes/sdk/adapters/memory";
 import type { PatchOperation } from "./sourcePatcher";
+import { StudioSaveNetworkError } from "./studioSaveDiagnostics";
 
 vi.mock("../components/editor/manualEditingAvailability", () => ({
   STUDIO_SDK_CUTOVER_ENABLED: true,
@@ -1404,3 +1405,103 @@ gsap.timeline().to('[data-hf-id="hf-layer"]', { duration: 1, x: 100 });
     expect(written).toContain("gsap.timeline()");
   });
 });
+
+describe("sdk_cutover_failed classification (error_kind)", () => {
+  const makeDeps = (overrides: Partial<Parameters<typeof sdkCutoverPersist>[5]> = {}) => ({
+    editHistory: { recordEdit: vi.fn().mockResolvedValue(undefined) },
+    writeProjectFile: vi.fn().mockResolvedValue(undefined),
+    reloadPreview: vi.fn(),
+    ...candidateTestDeps(),
+    ...overrides,
+  });
+
+  const makeSession = () =>
+    ({
+      getElement: vi.fn().mockReturnValue({ inlineStyles: {} }),
+      dispatch: vi.fn(),
+      serialize: vi
+        .fn()
+        .mockReturnValueOnce("<html>before</html>")
+        .mockReturnValue("<html></html>"),
+      batch: vi.fn((fn: () => void) => fn()),
+    }) as unknown as Parameters<typeof sdkCutoverPersist>[4];
+
+  beforeEach(() => {
+    vi.mocked(trackStudioEvent).mockClear();
+  });
+
+  // The production gate event this fix exists for: a bare `TypeError` from an
+  // UNWRAPPED raw fetch (`readProjectFile`'s implementation in
+  // useProjectFileWriter.ts, or writeProjectFile's own preflight — neither
+  // wraps as StudioSaveNetworkError). Without the message-based fallback in
+  // `cutoverErrorKind`, this files as `error_kind: "sdk"` and trips the
+  // cutover-failure rollback gate on a network blip the SDK never owned.
+  it("classifies a bare fetch TypeError from readProjectFile as network", async () => {
+    const deps = makeDeps({
+      readProjectFile: vi.fn().mockRejectedValue(new TypeError("Failed to fetch")),
+    });
+    const session = makeSession();
+    const sel = { hfId: "hf-abc" } as never;
+
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/path.html",
+      session,
+      deps,
+    );
+
+    expect(result.status).toBe("failed");
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "sdk_cutover_failed",
+      expect.objectContaining({ family: "dom", error_kind: "network" }),
+    );
+  });
+
+  it("classifies StudioSaveNetworkError from writeProjectFile as network", async () => {
+    const deps = makeDeps({
+      writeProjectFile: vi.fn().mockRejectedValue(new StudioSaveNetworkError("Failed to save")),
+    });
+    const session = makeSession();
+    const sel = { hfId: "hf-abc" } as never;
+
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/path.html",
+      session,
+      deps,
+    );
+
+    expect(result.status).toBe("failed");
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "sdk_cutover_failed",
+      expect.objectContaining({ family: "dom", error_kind: "network" }),
+    );
+  });
+
+  it("classifies a plain error as an sdk defect, not network", async () => {
+    const deps = makeDeps({
+      writeProjectFile: vi.fn().mockRejectedValue(new Error("disk full")),
+    });
+    const session = makeSession();
+    const sel = { hfId: "hf-abc" } as never;
+
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/path.html",
+      session,
+      deps,
+    );
+
+    expect(result.status).toBe("failed");
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "sdk_cutover_failed",
+      expect.objectContaining({ family: "dom", error_kind: "sdk" }),
+    );
+  });
+});

package/src/utils/sdkCutover.ts

@@ -11,8 +11,8 @@ import {
   shouldDeclineTextCutoverForTarget,
 } from "./sdkCutoverEligibility";
 import {
-  asCutoverError,
   declinedCutover,
+  failedCutover,
   persistSdkCandidateMutation,
   type CutoverDeps,
   type CutoverOptions,
@@ -45,12 +45,13 @@ function sdkFamilyEnabled(family: StudioSdkOperationFamily): boolean {
 
 function trackCutoverResult(
   result: CutoverResult,
+  family: StudioSdkOperationFamily,
   context: { hfId?: string | null; opCount: number },
 ): void {
   if (result.status === "committed") {
-    trackStudioEvent("sdk_cutover_success", context);
+    trackStudioEvent("sdk_cutover_success", { ...context, family });
   } else if (result.status === "failed") {
-    trackStudioEvent("sdk_cutover_failed", { ...context, error: result.error.message });
+    failedCutover(result.error, family, context);
   }
 }
 
@@ -106,7 +107,7 @@ export async function sdkCutoverPersist(
     },
     options,
   );
-  trackCutoverResult(result, { hfId, opCount: ops.length });
+  trackCutoverResult(result, "dom", { hfId, opCount: ops.length });
   return result;
 }
 
@@ -148,12 +149,10 @@ export async function sdkTimingPersist(
       options,
       serializedBefore,
     );
-    trackCutoverResult(result, { hfId, opCount: 1 });
+    trackCutoverResult(result, "timing", { hfId, opCount: 1 });
     return result;
   } catch (error) {
-    const failed = { status: "failed", error: asCutoverError(error) } as const;
-    trackStudioEvent("sdk_cutover_failed", { hfId, error: failed.error.message });
-    return failed;
+    return failedCutover(error, "timing", { hfId, opCount: 1 });
   }
 }
 
@@ -202,24 +201,22 @@ export async function sdkTimingBatchPersist(
       serializedBefore,
     );
     if (result.status === "failed") {
-      trackStudioEvent("sdk_cutover_failed", {
+      return failedCutover(result.error, "timing", {
         hfId: changes[0]?.hfId ?? null,
-        error: result.error.message,
+        opCount: changes.length,
       });
-      return result;
     }
     trackStudioEvent("sdk_cutover_success", {
       hfId: changes[0]?.hfId ?? null,
       opCount: changes.length,
+      family: "timing",
     });
     return result;
   } catch (error) {
-    const failed = { status: "failed", error: asCutoverError(error) } as const;
-    trackStudioEvent("sdk_cutover_failed", {
+    return failedCutover(error, "timing", {
       hfId: changes[0]?.hfId ?? null,
-      error: failed.error.message,
+      opCount: changes.length,
     });
-    return failed;
   }
 }
 
@@ -321,15 +318,13 @@ async function dispatchGsapOpAndPersist(
       serializedBefore,
     );
     if (result.status === "committed") {
-      trackStudioEvent("sdk_cutover_success", { opCount: 1 });
+      trackStudioEvent("sdk_cutover_success", { opCount: 1, family });
     } else if (result.status === "failed") {
-      trackStudioEvent("sdk_cutover_failed", { error: result.error.message });
+      return failedCutover(result.error, family, { opCount: 1 });
     }
     return result;
   } catch (error) {
-    const failed = { status: "failed", error: asCutoverError(error) } as const;
-    trackStudioEvent("sdk_cutover_failed", { error: failed.error.message });
-    return failed;
+    return failedCutover(error, family, { opCount: 1 });
   }
 }
 
@@ -595,6 +590,6 @@ export async function sdkDeletePersist(
     (session) => session.removeElement(hfId),
     { label: "Delete element" },
   );
-  trackCutoverResult(result, { hfId, opCount: 1 });
+  trackCutoverResult(result, "lifecycle", { hfId, opCount: 1 });
   return result;
 }