@hyperframes/studio 0.7.99 → 0.7.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.99",
+  "version": "0.7.101",
   "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.101",
+    "@hyperframes/player": "0.7.101",
+    "@hyperframes/parsers": "0.7.101",
+    "@hyperframes/sdk": "0.7.101",
+    "@hyperframes/studio-server": "0.7.101"
   },
   "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.101"
   },
   "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/components/sidebar/LeftSidebar.storage.test.ts

@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+
+import { afterEach, expect, it, vi } from "vitest";
+import { getPersistedTab } from "./LeftSidebar";
+
+vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const originalDescriptor = Object.getOwnPropertyDescriptor(globalThis, "localStorage");
+
+afterEach(() => {
+  if (originalDescriptor) Object.defineProperty(globalThis, "localStorage", originalDescriptor);
+});
+
+it("falls back to the default tab when localStorage is blocked", () => {
+  // Chrome throws on the property read itself when site data is blocked for
+  // the document. This runs as a useState initializer, so throwing here takes
+  // Studio to the crash boundary.
+  Object.defineProperty(globalThis, "localStorage", {
+    configurable: true,
+    get() {
+      throw new Error(
+        "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",
+      );
+    },
+  });
+
+  expect(getPersistedTab()).toBe("compositions");
+});

package/src/components/sidebar/LeftSidebar.tsx

@@ -10,6 +10,7 @@ import {
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
+import { safeLocalStorage } from "../../utils/safeStorage";
 import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
 import { FileTree } from "../editor/FileTree";
 import { Tooltip } from "../ui";
@@ -23,8 +24,18 @@ export interface LeftSidebarHandle {
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
 
-function getPersistedTab(): SidebarTab {
-  const stored = localStorage.getItem(STORAGE_KEY);
+// Both the `localStorage` reference and `getItem` itself can throw when the
+// browsing context is partitioned or site data is blocked — the same case
+// telemetry/config.ts documents. This runs as a `useState` initializer, so an
+// unguarded throw here takes the whole editor to the crash boundary rather
+// than losing one remembered tab.
+export function getPersistedTab(): SidebarTab {
+  let stored: string | null = null;
+  try {
+    stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
+  } catch {
+    /* storage unavailable — fall back to the default tab */
+  }
   if (stored === "assets") return "assets";
   if (stored === "code") return "code";
   if (stored === "blocks") return "blocks";
@@ -104,7 +115,11 @@ export const LeftSidebar = memo(
 
     const selectTab = useCallback((t: SidebarTab) => {
       setTab(t);
-      localStorage.setItem(STORAGE_KEY, t);
+      try {
+        safeLocalStorage()?.setItem(STORAGE_KEY, t);
+      } catch {
+        /* storage unavailable — the tab just won't be remembered */
+      }
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
 

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/gsapKeyframeCacheHelpers.test.ts

@@ -1,12 +1,16 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
 import {
   clearKeyframeCacheForElement,
+  elementCacheKeys,
   pruneKeyframeCacheToFiles,
   replaceKeyframeCacheForFile,
   updateKeyframeCacheFromParsed,
 } from "./gsapKeyframeCacheHelpers";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
 const entry = (): KeyframeCacheEntry => ({
   format: "percentage",
@@ -30,6 +34,48 @@ const animWithKeyframes = (id: string): GsapAnimation => ({
 
 beforeEach(() => {
   usePlayerStore.setState({ keyframeCache: new Map(), gsapAnimations: new Map(), elements: [] });
+  vi.mocked(trackStudioEvent).mockClear();
+});
+
+describe("non-string cache keys", () => {
+  // `s.indexOf is not a function` in pruneKeyframeCacheToFiles, decoded from the
+  // released 0.7.90 bundle. Some producer reaches elementCacheKeys with a
+  // non-string id; the bare-id key was written through raw, so both maps ended
+  // up holding a key that prune's `key.indexOf("#")` cannot handle.
+  const badId = 42 as unknown as string;
+
+  it("keeps every written key a string", () => {
+    expect(elementCacheKeys("comp.html", badId).every((k) => typeof k === "string")).toBe(true);
+  });
+
+  it("reports the offending value instead of swallowing it", () => {
+    elementCacheKeys("comp.html", badId);
+
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "cache_key_non_string",
+      expect.objectContaining({
+        value_type: "number",
+        constructor_name: "Number",
+        source_file: "comp.html",
+      }),
+    );
+  });
+
+  it("stays silent on the normal string path", () => {
+    elementCacheKeys("comp.html", "box");
+
+    expect(trackStudioEvent).not.toHaveBeenCalled();
+  });
+
+  it("survives a prune after a write with a non-string id", () => {
+    replaceKeyframeCacheForFile(
+      "stale.html",
+      new Map([[badId, entry()]]),
+      new Map([[badId, [animWithKeyframes("box")]]]),
+    );
+
+    expect(() => pruneKeyframeCacheToFiles(["kept.html"])).not.toThrow();
+  });
 });
 
 describe("clearKeyframeCacheForElement", () => {

package/src/hooks/gsapKeyframeCacheHelpers.ts

@@ -4,6 +4,7 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
+import { trackStudioEvent } from "../utils/studioTelemetry";
 import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
 import {
   deduplicateKeyframes,
@@ -226,11 +227,38 @@ export function scopedElementKey(element: {
   return `${element.sourceFile || "index.html"}#${element.id}`;
 }
 
-/** Every cache key a write for this element sets, in read-preference order. */
+/**
+ * The one gate every cache write passes through, so it is also the one place
+ * that can guarantee `keyframeCache` / `gsapAnimations` really are keyed by
+ * string the way their types claim.
+ *
+ * Two of the three keys are template literals, which coerce on their own. The
+ * bare-id key was passed through raw, so a non-string `elementId` reaching here
+ * put a non-string key in both maps — and `pruneKeyframeCacheToFiles` then threw
+ * `s.indexOf is not a function` on it, taking Studio to the crash boundary.
+ *
+ * Which caller supplies a non-string id is still unknown: every writer traced
+ * from here produces a string. So this coerces rather than guesses, and reports
+ * the offending value's shape instead of swallowing it — the next occurrence
+ * names its own producer.
+ */
 export function elementCacheKeys(sourceFile: string, elementId: string): string[] {
+  const id = typeof elementId === "string" ? elementId : coerceCacheKeyId(elementId, sourceFile);
   return sourceFile === "index.html"
-    ? [`index.html#${elementId}`, elementId]
-    : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
+    ? [`index.html#${id}`, id]
+    : [`${sourceFile}#${id}`, `index.html#${id}`, id];
+}
+
+function coerceCacheKeyId(elementId: unknown, sourceFile: string): string {
+  trackStudioEvent("cache_key_non_string", {
+    value_type: typeof elementId,
+    // An Element lands here as "HTMLDivElement", a boxed id as "Number" — enough
+    // to name the producer without shipping user content to telemetry.
+    constructor_name: (elementId as { constructor?: { name?: string } })?.constructor?.name ?? null,
+    is_array: Array.isArray(elementId),
+    source_file: sourceFile,
+  });
+  return String(elementId);
 }
 
 /** Replace one file's complete cache snapshot with one atomic store publish. */