feat: adicionar browser e fallback do notebook

app/components/story/NotebookFallback.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import NotebookBrowser from "./NotebookBrowser";
+import type { NotebookProject } from "./notebookProjects";
+
+export type NotebookFallbackProps = {
+  projects: NotebookProject[];
+  initialIndex?: number;
+};
+
+function clampIndex(index: number, length: number): number {
+  if (length < 1) return -1;
+  return Math.min(Math.max(index, 0), length - 1);
+}
+
+export default function NotebookFallback({
+  projects,
+  initialIndex = 0,
+}: NotebookFallbackProps) {
+  const [activeIndex, setActiveIndex] = useState(() =>
+    clampIndex(initialIndex, projects.length),
+  );
+
+  return (
+    <div className="notebook-fallback" data-testid="notebook-fallback">
+      <div className="notebook-fallback-intro">
+        <span className="notebook-fallback-kicker">Interface em produção</span>
+        <p>
+          Navegue pelos projetos com as abas abaixo. A experiência permanece
+          completa sem movimento ou WebGL.
+        </p>
+      </div>
+      <NotebookBrowser
+        activeIndex={activeIndex}
+        frame={{
+          cursorClicking: false,
+          cursorVisible: false,
+          cursorX: 0,
+          cursorY: 0,
+        }}
+        onSelectTab={setActiveIndex}
+        projects={projects}
+      />
+    </div>
+  );
+}