@hyperframes/studio 0.8.56 → 0.8.57

package/src/hooks/useCompositionDimensions.test.tsx

@@ -3,6 +3,7 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { expect, it } from "vitest";
 import { useCompositionDimensions } from "./useCompositionDimensions";
+import { usePreviewIframeStore } from "../player/store/previewIframeStore";
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
@@ -45,3 +46,40 @@ it("accepts only the current preview frame and rejects foreign or missing sender
     foreign.remove();
   }
 });
+
+it("re-reads the size from the promoted iframe's document", () => {
+  const host = document.createElement("div");
+  const a = document.createElement("iframe");
+  const b = document.createElement("iframe");
+  document.body.append(host, a, b);
+  const ref = { current: a };
+  const root = createRoot(host);
+  const setRoot = (frame: HTMLIFrameElement, width: number, height: number) => {
+    const el = frame.contentDocument!.createElement("div");
+    el.setAttribute("data-composition-id", "main");
+    el.setAttribute("data-width", String(width));
+    el.setAttribute("data-height", String(height));
+    frame.contentDocument!.body.append(el);
+  };
+  setRoot(a, 1920, 1080);
+  setRoot(b, 1080, 1920);
+  function Harness() {
+    return JSON.stringify(useCompositionDimensions(ref));
+  }
+  try {
+    act(() => usePreviewIframeStore.getState().setIframe(a));
+    act(() => root.render(<Harness />));
+    expect(host.textContent).toBe('{"width":1920,"height":1080}');
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    expect(host.textContent).toBe('{"width":1080,"height":1920}');
+  } finally {
+    act(() => root.unmount());
+    usePreviewIframeStore.setState({ iframe: null });
+    host.remove();
+    a.remove();
+    b.remove();
+  }
+});

package/src/hooks/useCompositionDimensions.ts

@@ -1,4 +1,6 @@
-import { useState, type RefObject } from "react";
+import { useEffect, useState, type RefObject } from "react";
+import { useLivePreviewIframe } from "../player/store/previewIframeStore";
+import { readPreviewCompositionSize } from "../utils/previewCompositionSize";
 import { useMountEffect } from "./useMountEffect";
 import type { CompositionDimensions } from "../components/renders/RenderQueue";
 import { acceptStudioRuntimeMessage } from "../player/lib/runtimeProtocol";
@@ -34,6 +36,20 @@ export function useCompositionDimensions(iframeRef: RefObject<HTMLIFrameElement
     null,
   );
 
+  const livePreviewIframe = useLivePreviewIframe();
+
+  // The runtime posts stage-size once per document, so a promoted reload's message was sent
+  // before this listener could accept it. The size is authored on the document: read it there.
+  useEffect(() => {
+    const dimensions = readPreviewCompositionSize(livePreviewIframe);
+    if (!dimensions) return;
+    setCompositionDimensions((prev) =>
+      prev && prev.width === dimensions.width && prev.height === dimensions.height
+        ? prev
+        : dimensions,
+    );
+  }, [livePreviewIframe]);
+
   useMountEffect(() => {
     const handleMessage = (e: MessageEvent) => {
       if (!e.source || e.source !== iframeRef.current?.contentWindow) return;

package/src/hooks/useDomEditAttributeCommits.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { resolveOptimisticAttributeValue } from "./useDomEditAttributeCommits";
+
+describe("resolveOptimisticAttributeValue", () => {
+  it("removes an HTML boolean attribute when the value is the literal string false", () => {
+    expect(resolveOptimisticAttributeValue("loop", "false")).toBeNull();
+    expect(resolveOptimisticAttributeValue("muted", "false")).toBeNull();
+  });
+
+  it("keeps the literal string false for a non-boolean attribute, matching what persist() writes", () => {
+    expect(resolveOptimisticAttributeValue("data-example", "false")).toBe("false");
+  });
+
+  it("always removes on null regardless of attribute", () => {
+    expect(resolveOptimisticAttributeValue("loop", null)).toBeNull();
+    expect(resolveOptimisticAttributeValue("data-example", null)).toBeNull();
+  });
+
+  it("passes any other value through unchanged", () => {
+    expect(resolveOptimisticAttributeValue("data-example", "true")).toBe("true");
+    expect(resolveOptimisticAttributeValue("loop", "true")).toBe("true");
+  });
+});

package/src/hooks/useDomEditAttributeCommits.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import type { PatchOperation } from "../utils/sourcePatcher";
+import { HTML_BOOLEAN_ATTRIBUTES, type PatchOperation } from "../utils/sourcePatcher";
 import {
   findElementForSelection,
   getDomEditTargetKey,
@@ -55,6 +55,14 @@ function resolveFullAttrName(attr: string, prefixData: boolean | undefined): str
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
 }
 
+// Matches sourcePatcher's own boolean handling: "false" means "remove" only
+// for HTML_BOOLEAN_ATTRIBUTES (loop, muted, ...), so the live preview node
+// ends up holding what persist() actually writes to disk.
+export function resolveOptimisticAttributeValue(attr: string, value: string | null): string | null {
+  if (value === null) return null;
+  return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
+}
+
 function setOrRemovePreviewAttribute(
   el: HTMLElement,
   fullAttr: string,
@@ -393,8 +401,11 @@ export function useDomEditAttributeCommits({
         },
         apply: () => {
           if (!editedElement) return;
-          const nextValue = value === null || value === "false" ? null : value;
-          setOrRemovePreviewAttribute(editedElement, attr, nextValue);
+          setOrRemovePreviewAttribute(
+            editedElement,
+            attr,
+            resolveOptimisticAttributeValue(attr, value),
+          );
         },
         persist: () =>
           persistDomEditOperations(domEditSelection, [op], {

package/src/hooks/useFileTree.test.tsx

@@ -5,6 +5,12 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useFileTree } from "./useFileTree";
 
+vi.mock("../components/feedback/projectProvenance", () => ({
+  captureProjectProvenance: vi.fn(),
+}));
+
+import { captureProjectProvenance } from "../components/feedback/projectProvenance";
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 let root: Root | null = null;
@@ -52,6 +58,56 @@ async function renderHarness(projectId: string): Promise<{ current: Handle | nul
   return handleRef;
 }
 
+describe("useFileTree unresolved project", () => {
+  const provenance = vi.mocked(captureProjectProvenance);
+
+  afterEach(() => {
+    provenance.mockClear();
+  });
+
+  /** Render the tree for `projectId` against one canned response. */
+  async function renderWithResponse(
+    projectId: string,
+    build: () => Response,
+  ): Promise<{ current: Handle | null }> {
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => build());
+    const handleRef = await renderHarness(projectId);
+    fetchSpy.mockRestore();
+    return handleRef;
+  }
+
+  const notFound = () =>
+    new Response(JSON.stringify({ error: "not found" }), {
+      status: 404,
+      headers: { "content-type": "application/json" },
+    });
+  const emptyListing = () =>
+    new Response(JSON.stringify({ files: [], compositions: [] }), { status: 200 });
+
+  // An unresolvable project answers 404 with a JSON body. Without an `r.ok`
+  // check that parsed cleanly and took the SUCCESS branch, recording an empty
+  // tree and an empty provenance snapshot for a project that was never read —
+  // so a bug report filed from that tab described a project that does not
+  // exist. The tree itself stays empty either way; the provenance lie is the
+  // part that leaves the browser.
+  it("does not snapshot provenance for a project the server could not resolve", async () => {
+    const handleRef = await renderWithResponse("gone-project", notFound);
+
+    expect(handleRef.current?.compositions).toEqual([]);
+    expect(provenance).not.toHaveBeenCalled();
+  });
+
+  // The counterpart, and the reason the check above cannot be collapsed into
+  // "skip provenance whenever the tree is empty": a project with no
+  // compositions yet is a real, successful read and must still be snapshotted.
+  it("still snapshots provenance when a resolved project has no compositions", async () => {
+    const handleRef = await renderWithResponse("empty-project", emptyListing);
+
+    expect(handleRef.current?.compositions).toEqual([]);
+    expect(provenance).toHaveBeenCalledWith("empty-project", [], []);
+  });
+});
+
 describe("useFileTree.refreshFileTree", () => {
   it("updates compositions, not just the raw file list, on refresh", async () => {
     let call = 0;

package/src/hooks/useFileTree.ts

@@ -39,7 +39,14 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
     let cancelled = false;
     setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
     fetch(buildProjectApiPath(projectId))
-      .then((r) => r.json())
+      // An unresolvable project answers 404 with a JSON body, so without this
+      // the error path parsed cleanly and the success branch below recorded an
+      // empty tree — and an empty provenance snapshot — for a project that was
+      // never read. Throwing hands it to the catch instead.
+      .then((r) => {
+        if (!r.ok) throw new Error(`tree fetch failed: ${r.status}`);
+        return r.json();
+      })
       .then((data: { files?: string[]; dir?: string; compositions?: string[] }) => {
         if (cancelled) return;
         setFetched({

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -147,6 +147,86 @@ describe("useSdkSession ownership", () => {
   });
 });
 
+describe("useSdkSession unreachable project", () => {
+  beforeEach(() => {
+    openComposition.mockReset();
+    trackMock.mockClear();
+    class FakeEventSource {
+      addEventListener(): void {}
+      close(): void {}
+    }
+    vi.stubGlobal("EventSource", FakeEventSource);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function probeHandle(projectId: string) {
+    const captured: { handle: SdkSessionHandle | null } = { handle: null };
+    function HandleProbe() {
+      captured.handle = useSdkSession(projectId, "index.html");
+      return null;
+    }
+    return { captured, HandleProbe };
+  }
+
+  const failedRead = (status: number) => async () =>
+    ({ ok: false, status, json: async () => ({}) }) as Response;
+
+  /** Render the hook for `projectId` against a stubbed read and let it settle. */
+  async function readOutcome(
+    projectId: string,
+    read: () => Promise<Response>,
+  ): Promise<{ captured: { handle: SdkSessionHandle | null }; unmount: () => Promise<void> }> {
+    vi.stubGlobal("fetch", vi.fn(read));
+    const { captured, HandleProbe } = probeHandle(projectId);
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<HandleProbe />));
+    await flushAsyncEffects();
+    return { captured, unmount: () => act(async () => root.unmount()) };
+  }
+
+  // A 404 on the composition read is the one failure that says something about
+  // the PROJECT rather than the request: under the CLI host it means this
+  // Studio serves a different one. Every edit then fails silently, so the UI
+  // needs the id to explain that.
+  it("names the project when the read is a 404", async () => {
+    const { captured, unmount } = await readOutcome("gone-project", failedRead(404));
+
+    expect(captured.handle?.unreachableProject).toBe("gone-project");
+    await unmount();
+  });
+
+  // A 500 says the request failed, not that the project is elsewhere. Claiming
+  // otherwise would tell a user their tab is pointed at the wrong project when
+  // the server is merely unwell.
+  it("stays quiet on a failure that says nothing about the project", async () => {
+    const { captured, unmount } = await readOutcome("project-a", failedRead(500));
+
+    expect(captured.handle?.unreachableProject).toBeNull();
+    await unmount();
+  });
+
+  it("clears the state once the project resolves", async () => {
+    const { captured, unmount } = await readOutcome("gone-project", failedRead(404));
+    expect(captured.handle?.unreachableProject).toBe("gone-project");
+
+    openComposition.mockResolvedValue(fakeSession());
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => response("PROJECT_A")),
+    );
+    await act(async () => {
+      captured.handle?.forceReload();
+    });
+    await flushAsyncEffects();
+
+    expect(captured.handle?.unreachableProject).toBeNull();
+    await unmount();
+  });
+});
+
 describe("useSdkSession unavailable telemetry", () => {
   beforeEach(() => {
     openComposition.mockReset();

package/src/hooks/useSdkSession.ts

@@ -25,6 +25,34 @@ type ProjectFileReadFailure =
 
 type ProjectFileReadResult = { ok: true; content: string } | ProjectFileReadFailure;
 
+/**
+ * Record a read that produced no usable content, and answer which project — if
+ * any — the failure identifies as unreachable.
+ *
+ * No SDK session follows a failed read, so EVERY cutover chokepoint takes the
+ * server path and emits nothing — the shadow never runs either. A broken read
+ * would otherwise be a silent, total SDK bypass, which is why this is recorded
+ * at all.
+ *
+ * Only a 404 identifies the *project*: the server answered, and its answer was
+ * that it does not serve this id. A 5xx, a dropped request, an unexpected body
+ * and an empty file all say nothing about which project the server serves, so
+ * none of them claim it. See `unreachableProject` on the handle.
+ *
+ * A function rather than three more conditions inline: the read callback it is
+ * called from is a long pre-existing async body already near the complexity
+ * threshold, and this branch is one coherent unit.
+ */
+function reportReadFailure(read: ProjectFileReadFailure, projectId: string): string | null {
+  trackStudioEvent("sdk_session_unavailable", {
+    stage: "read",
+    reason: read.reason,
+    ...(read.reason === "http_error" ? { status: read.status } : {}),
+  });
+  if (read.reason !== "http_error") return null;
+  return read.status === 404 ? projectId : null;
+}
+
 /**
  * Read a project file's content (optional read — a missing file is not an
  * error). Replaces the removed SDK http adapter's `read()` — the only thing
@@ -96,6 +124,19 @@ export interface SdkSessionHandle {
    * side of that path is covered by usePersistentEditHistory.test.ts.
    */
   forceReload: () => void;
+  /**
+   * Set when this server answered the composition read with a 404 for the
+   * project it was asked to open. In the CLI-embedded host — the only host
+   * that reports telemetry at all (`telemetry/policy.ts` suppresses Vite dev)
+   * — that does not mean the project is gone. It means this Studio is serving
+   * a *different* one; the project is untouched on disk. Either way every edit
+   * in this tab fails, and until now it failed silently.
+   *
+   * `null` for every other failure: a 500 or a dropped request says nothing
+   * about which project the server serves, and `absent_or_empty` /
+   * `missing_content` say nothing about the project at all.
+   */
+  unreachableProject: string | null;
 }
 
 interface SdkSessionOwner {
@@ -173,6 +214,7 @@ export function useSdkSession(
   const [reloadToken, setReloadToken] = useState(0);
   const reloadTokenRef = useRef(reloadToken);
   reloadTokenRef.current = reloadToken;
+  const [unreachableProject, setUnreachableProject] = useState<string | null>(null);
 
   useEffect(
     () =>
@@ -195,6 +237,7 @@ export function useSdkSession(
     if (previous) disposeSdkSession(previous.session);
 
     if (!projectId || !activeCompPath) {
+      setUnreachableProject(null);
       return () => {
         cancelled = true;
       };
@@ -211,17 +254,10 @@ export function useSdkSession(
       .then(async (read) => {
         if (cancelled) return;
         if (!read.ok) {
-          // No SDK session follows, so EVERY cutover chokepoint below takes the
-          // server path and emits nothing — the shadow never runs either. This
-          // is the only place a missing session can originate, so a broken read
-          // would otherwise be a silent, total SDK bypass.
-          trackStudioEvent("sdk_session_unavailable", {
-            stage: "read",
-            reason: read.reason,
-            ...(read.reason === "http_error" ? { status: read.status } : {}),
-          });
+          setUnreachableProject(reportReadFailure(read, projectId));
           return;
         }
+        setUnreachableProject(null);
         const content = read.content;
         // No persist queue: Studio's writeProjectFile (via sdkCutover's
         // persistSdkSerialize) is the SINGLE writer. Wiring the SDK persist
@@ -316,5 +352,5 @@ export function useSdkSession(
     ownedSession.reloadToken === reloadToken
       ? ownedSession.session
       : null;
-  return { session, publish, forceReload };
+  return { session, publish, forceReload, unreachableProject };
 }