feat(story): build procedural notebook animation

app/components/story/NotebookBrowser.test.tsx

@@ -126,18 +126,29 @@ describe("NotebookBrowser", () => {
     const { container } = renderBrowser({
       frame: { ...frame, cursorClicking: true },
     });
+    const cursor = container.querySelector(".notebook-cursor");
 
-    expect(container.querySelector(".notebook-cursor")).toHaveAttribute(
-      "aria-hidden",
-      "true",
+    expect(cursor).toHaveAttribute("aria-hidden", "true");
+    expect(cursor).toHaveStyle({ left: "40%", top: "60%" });
+    expect(cursor?.closest(".notebook-browser")).toBe(
+      container.querySelector(".notebook-browser"),
     );
-    expect(container.querySelector(".notebook-cursor")).toHaveStyle({
-      left: "40%",
-      top: "60%",
-    });
     expect(container.querySelector("iframe")).not.toBeInTheDocument();
   });
 
+  it("marks only the selected tab as pressed by the choreographed cursor", () => {
+    const { container } = renderBrowser({
+      activeIndex: 1,
+      frame: { ...frame, cursorClicking: true },
+    });
+    const tabs = container.querySelectorAll(".notebook-tab");
+
+    expect(tabs[1]).toHaveAttribute("data-cursor-clicking", "true");
+    expect(tabs[0]).toHaveAttribute("data-cursor-clicking", "false");
+    expect(tabs[2]).toHaveAttribute("data-cursor-clicking", "false");
+    expect(tabs[3]).toHaveAttribute("data-cursor-clicking", "false");
+  });
+
   it("uses the selected tab to label the panel and screenshot", () => {
     renderBrowser({ activeIndex: 2 });