Deep links from dataset cards: ?class= / &item=, thumbs, class-aware note

- ?class=<class>[&item=<id>] opens a tab (and item) directly; the URL is kept in sync as tabs change so any view is shareable.
- thumbs/<dataset>.jpg: one hero screenshot per dataset, referenced by the dataset cards' 'Open in Lab' banners.
- The static-class 'Take it home' note was scene-only copy; it now describes USD physics vs GLB preview for non-scene static classes.
- README: table of which dataset backs each tab, plus the deep-link syntax.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

.gitattributes

@@ -1 +1,4 @@
 *.glb filter=lfs diff=lfs merge=lfs -text
+thumbs/warehouse-manipulation-and-states.jpg filter=lfs diff=lfs merge=lfs -text
+thumbs/articulated-storage-and-appliances.jpg filter=lfs diff=lfs merge=lfs -text
+thumbs/industrial-parts-and-packaging.jpg filter=lfs diff=lfs merge=lfs -text

README.md

@@ -25,3 +25,15 @@ come from each class's public dataset (`assets/<class>/<vid>/<vid>.glb`); the
 joint metadata is served alongside as `viewer/<class>.json`. three.js from
 CDN — no build step, no backend.
 
+## Datasets behind each tab
+
+| Tab(s) | Dataset |
+| --- | --- |
+| Boxes · Cages · Pallet Boxes | [warehouse-manipulation-and-states](https://huggingface.co/datasets/projectsim/warehouse-manipulation-and-states) |
+| Desks · Ovens · Wardrobes | [articulated-storage-and-appliances](https://huggingface.co/datasets/projectsim/articulated-storage-and-appliances) |
+| Gas Cylinders · Pallet Racking | [industrial-parts-and-packaging](https://huggingface.co/datasets/projectsim/industrial-parts-and-packaging) |
+| Scenes | [scenes-and-worlds](https://huggingface.co/datasets/projectsim/scenes-and-worlds) |
+
+Deep links: `?class=<class>` opens a tab (e.g. `?class=logistics_cage`),
+`&item=<id>` selects an item. The header's **Dataset** button always points at
+the active class's folder in its dataset.

index.html

@@ -220,7 +220,7 @@ body:not(.class-static) #scene-links { display: none; }
       <a id="scene-usd-link" href="#" target="_blank" rel="noopener">Full USD (with Gaussian splat) on Hugging Face →</a>
       <a id="scene-glb-link" href="#" target="_blank" rel="noopener">This scene as GLB →</a>
       <a id="scene-dataset-link" href="https://huggingface.co/datasets/projectsim/scenes-and-worlds" target="_blank" rel="noopener">Browse the scenes-and-worlds dataset →</a>
-      <div class="note">USD ships the full room including the Gaussian splat backdrop; the GLB is a lightweight preview (splat dropped, textures baked).</div>
+      <div class="note" id="scene-note">USD ships the full room including the Gaussian splat backdrop; the GLB is a lightweight preview (splat dropped, textures baked).</div>
     </div>
   </aside>
 </main>
@@ -603,6 +603,9 @@ async function loadItem(cls, item) {
       ? "Full USD (with Gaussian splat) on Hugging Face \u2192"
       : "Full USD on Hugging Face \u2192";
     document.getElementById("scene-glb-link").textContent = "This " + (isScene ? "scene" : "asset") + " as GLB \u2192";
+    document.getElementById("scene-note").textContent = isScene
+      ? "USD ships the full room including the Gaussian splat backdrop; the GLB is a lightweight preview (splat dropped, textures baked)."
+      : "USD carries the sim physics (mass, inertia, colliders) and per-zone PBR maps; the GLB is a static textured preview.";
     document.getElementById("scene-dataset-link").href = `${HFDS}/${cls.dataset}/tree/main/${cls.items_dir || ("assets/" + cls.class)}`;
     document.getElementById("scene-dataset-link").textContent = `Browse ${cls.class} in the ${cls.dataset} dataset \u2192`;
   }
@@ -746,6 +749,11 @@ fetch("classes.json")
     dslink.href = `${HFDS}/${cls.dataset}/tree/main/${dsDir}`;
     dslink.textContent = `Dataset \u00b7 ${cls.class}`;
     dslink.title = `projectsim/${cls.dataset} \u2192 ${dsDir}`;
+    if (!LOCAL_BASE) {
+      const q = new URLSearchParams(location.search);
+      q.set("class", cls.class); q.delete("item");
+      history.replaceState(null, "", `?${q}`);
+    }
     document.body.classList.toggle("class-static", !!cls.static);
     list.innerHTML = "";
     cls.items.forEach((item, i) => {
@@ -773,7 +781,15 @@ fetch("classes.json")
     t.onclick = () => selectClass(cls);
     tabs.appendChild(t);
   }
-  selectClass(catalog[0]);
+  // ?class=<class>[&item=<id>] deep-links into a tab (used by the dataset
+  // cards' "Open in Lab" links). The URL is kept in sync on tab change.
+  const want = new URLSearchParams(location.search);
+  const startCls = catalog.find(c => c.class === want.get("class")) || catalog[0];
+  selectClass(startCls);
+  if (want.get("item")) {
+    const idx = startCls.items.findIndex(it => it.id === want.get("item"));
+    if (idx > 0) list.children[idx]?.click();
+  }
   resize();
   tick();
 });