@hyperframes/studio 0.8.17 → 0.8.18

package/package.json

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

package/src/components/nle/useCompositionStack.test.tsx

@@ -42,3 +42,72 @@ describe("useCompositionStack — project scoping", () => {
     });
   }
 });
+
+describe("useCompositionStack — activating a composition by path", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  function mountStack(activeCompositionPath: string | null) {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const seen: { stack: ReturnType<typeof useCompositionStack>["compositionStack"] } = {
+      stack: [],
+    };
+
+    function Harness(props: { activeCompositionPath: string | null }) {
+      seen.stack = useCompositionStack({ projectId: "p", ...props }).compositionStack;
+      return null;
+    }
+
+    return { root, seen, Harness, activeCompositionPath };
+  }
+
+  // The root stays on the master level; everything else pushes a second level.
+  for (const path of [
+    "compositions/scene-a.html",
+    "parts/part-1.html",
+    "chapter-2.html",
+    "a/b/c/deep.html",
+  ]) {
+    it(`pushes a level for ${path}`, async () => {
+      const { root, seen, Harness } = mountStack(path);
+
+      await act(async () => {
+        root.render(<Harness activeCompositionPath={path} />);
+      });
+
+      expect(seen.stack).toHaveLength(2);
+      expect(seen.stack[1]?.id).toBe(path);
+      expect(seen.stack[1]?.previewUrl).toBe(`/api/projects/p/preview/comp/${path}`);
+
+      act(() => root.unmount());
+    });
+  }
+
+  it("labels a non-compositions/ path without mangling it", async () => {
+    const { root, seen, Harness } = mountStack("parts/part-1.html");
+
+    await act(async () => {
+      root.render(<Harness activeCompositionPath="parts/part-1.html" />);
+    });
+
+    expect(seen.stack[1]?.label).toBe("parts/part-1");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps the master alone for the root composition", async () => {
+    const { root, seen, Harness } = mountStack("index.html");
+
+    await act(async () => {
+      root.render(<Harness activeCompositionPath="index.html" />);
+    });
+
+    expect(seen.stack).toHaveLength(1);
+    expect(seen.stack[0]?.id).toBe("master");
+
+    act(() => root.unmount());
+  });
+});

package/src/components/nle/useCompositionStack.ts

@@ -108,7 +108,13 @@ export function useCompositionStack({
     if (activeCompositionPath === "index.html") {
       usePlayerStore.getState().setElements([]);
       updateCompositionStack([master]);
-    } else if (activeCompositionPath && activeCompositionPath.startsWith("compositions/")) {
+    } else if (activeCompositionPath) {
+      // Any composition file that isn't the root, wherever it lives. Gating
+      // this on a `compositions/` prefix meant a project laying its comps out
+      // anywhere else (`parts/part-1.html`, generated multi-part builds) hit
+      // no branch at all: the stack kept the master mounted while the Comps
+      // panel highlighted the row, so the canvas and timeline stayed on
+      // index.html and edits landed in the root file.
       const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
       const previewUrl = `/api/projects/${projectId}/preview/comp/${encodePreviewPath(activeCompositionPath)}`;
       usePlayerStore.getState().setElements([]);
@@ -116,7 +122,7 @@ export function useCompositionStack({
         if (prev[prev.length - 1]?.id === activeCompositionPath) return prev;
         return [master, { id: activeCompositionPath, label, previewUrl }];
       });
-    } else if (!activeCompositionPath) {
+    } else {
       usePlayerStore.getState().setElements([]);
       updateCompositionStack([master]);
     }

package/src/webmcp/useStudioAgentTools.test.tsx

@@ -149,16 +149,16 @@ describe("useStudioAgentTools", () => {
     expect(signal?.aborted).toBe(true);
   });
 
-  it("registers nothing when the browser has no WebMCP", async () => {
+  it("boots cleanly when the browser has no native WebMCP", async () => {
     removeModelContext();
 
     await act(async () => {
       mountTools({ getSnapshot: () => snapshot() });
     });
 
-    // The assertion is that mounting did not throw; a browser without the API
-    // must still boot Studio.
-    expect(document).not.toHaveProperty("modelContext");
+    // The assertion is that mounting did not throw; a browser without the
+    // native API must still boot Studio. The polyfill may install
+    // document.modelContext as a fallback — that is expected.
   });
 
   it("registers nothing when the preference is turned off", async () => {