feat: adicionar browser e fallback do notebook

app/components/story/NotebookFallback.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { portfolio } from "@/lib/portfolio-data";
+import NotebookFallback from "./NotebookFallback";
+import { selectNotebookProjects } from "./notebookProjects";
+
+const projects = selectNotebookProjects(portfolio.projects);
+
+describe("NotebookFallback", () => {
+  it("keeps project content and controls in normal document flow", () => {
+    const { container } = render(<NotebookFallback projects={projects} />);
+
+    expect(screen.getByTestId("notebook-fallback")).toBeInTheDocument();
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    expect(screen.getByRole("tabpanel")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: /abrir projeto/i }),
+    ).toBeInTheDocument();
+    expect(container.querySelector("canvas")).not.toBeInTheDocument();
+  });
+
+  it("allows manual tab changes without an animated stage", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<NotebookFallback projects={projects} />);
+
+    await user.click(screen.getAllByRole("tab")[2]);
+
+    expect(screen.getByRole("tabpanel")).toHaveAccessibleName(
+      /SEV Moda Íntima/i,
+    );
+    expect(container.querySelector("canvas")).not.toBeInTheDocument();
+  });
+
+  it("respects the requested initial project", () => {
+    render(<NotebookFallback initialIndex={3} projects={projects} />);
+
+    expect(screen.getByRole("tabpanel")).toHaveAccessibleName(/AS Serviços/i);
+    expect(screen.getAllByRole("tab")[3]).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+});