Overhaul cookbook-v2: homepage, GL inspector, navigation, docs

packages/cookbook-v2/package.json

@@ -12,49 +12,49 @@
         "lint:fix": "eslint . --ext ts,tsx --fix"
     },
     "dependencies": {
-        "@heroicons/react": "^2.1.1",
+        "@heroicons/react": "^2.2.0",
         "gl-react": "^5.2.0",
         "gl-react-dom": "^5.2.1",
         "gl-shader": "^4.2.1",
         "gl-texture2d": "^2.1.0",
         "gl-transitions": "^1.43.0",
         "hoist-non-react-statics": "^3.3.2",
         "invariant": "^2.2.4",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.23",
         "ndarray": "^1.0.19",
         "ndarray-ops": "^1.2.2",
         "prism-theme-one-dark": "^1.0.0",
-        "prismjs": "^1.29.0",
+        "prismjs": "^1.30.0",
         "prop-types": "^15.8.1",
-        "query-string": "^9.1.0",
+        "query-string": "^9.3.1",
         "raf": "^3.4.1",
         "react": "^19.0.0",
         "react-color": "^2.19.3",
         "react-dom": "^19.0.0",
         "react-gl-transition": "^1.19.2",
         "react-json2d": "^0.3.0",
-        "react-motion": "^0.5.0",
+        "react-motion": "^0.5.2",
         "react-router-dom": "^6.28.0"
     },
     "devDependencies": {
         "@babel/core": "^7.29.0",
         "@babel/preset-react": "^7.28.5",
         "@playwright/test": "^1.58.2",
         "@types/babel__core": "^7",
-        "@types/lodash": "^4.17.0",
-        "@types/prismjs": "^1.26.3",
+        "@types/lodash": "^4.17.24",
+        "@types/prismjs": "^1.26.6",
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.15.0",
-        "@typescript-eslint/parser": "^8.15.0",
-        "@vitejs/plugin-react": "^4.3.3",
-        "autoprefixer": "^10.4.20",
+        "@typescript-eslint/eslint-plugin": "^8.57.1",
+        "@typescript-eslint/parser": "^8.57.1",
+        "@vitejs/plugin-react": "^4.7.0",
+        "autoprefixer": "^10.4.27",
         "eslint": "^9.15.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.14",
-        "postcss": "^8.4.49",
+        "postcss": "^8.5.8",
         "tailwindcss": "^3.4.15",
-        "typescript": "^5.6.3",
-        "vite": "^6.0.1"
+        "typescript": "^5.9.3",
+        "vite": "^6.4.1"
     }
 }

packages/cookbook-v2/src/components/Breadcrumb.tsx

@@ -0,0 +1,47 @@
+import { Link, useNavigate } from "react-router-dom";
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
+import { examples } from "../examples";
+
+const categories = [...new Set(examples.map((e) => e.category))];
+const grouped = categories.map((cat) => ({
+  label: cat,
+  items: examples.filter((e) => e.category === cat),
+}));
+
+export function Breadcrumb({ exampleId }: { exampleId?: string }) {
+  const navigate = useNavigate();
+  const current = exampleId
+    ? examples.find((e) => e.id === exampleId)
+    : undefined;
+
+  return (
+    <nav className="flex items-center text-sm gap-1">
+      <Link
+        to="/examples"
+        className="text-gray-500 hover:text-gray-900 font-medium"
+      >
+        Examples
+      </Link>
+      {current && (
+        <>
+          <ChevronRightIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+          <select
+            value={current.id}
+            onChange={(e) => navigate(`/examples/${e.target.value}`)}
+            className="bg-transparent text-gray-900 font-medium border-none outline-none cursor-pointer hover:text-primary-600 pr-5 -mr-2"
+          >
+            {grouped.map((group) => (
+              <optgroup key={group.label} label={group.label}>
+                {group.items.map((ex) => (
+                  <option key={ex.id} value={ex.id}>
+                    {ex.title}
+                  </option>
+                ))}
+              </optgroup>
+            ))}
+          </select>
+        </>
+      )}
+    </nav>
+  );
+}