@vibes.diy/prompts 14.3.35 → 14.3.37

package/llms/webxr.draft.md

@@ -0,0 +1,159 @@
+# Babylon.js WebXR — the first draft: a lit scene with a door into VR
+
+A WebXR app's first draft is the page around the scene (title, copy, a card
+holding the canvas) with one real Babylon.js scene running inside it: a lit
+box turning above a ground plane. The VR half is shown honestly: an "Enter
+VR" Button that lights up when the browser reports an immersive headset and
+opens the session through `scene.createDefaultXRExperienceAsync`, and reads
+"VR needs a headset browser" everywhere else. Hit testing, anchors, hand
+tracking, particles and shaders are the next pass. What the draft owes that
+pass is the skeleton: the engine and scene are built once in one effect with a
+full cleanup, the ground mesh the XR floor needs already exists, and the scene
+lives in a ref so the next pass adds features to this file rather than
+rewriting it.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import * as BABYLON from "@babylonjs/core";
+import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
+
+export default function App() {
+  const { useLiveQuery } = useFireproof("floatingRoom");
+  const { docs: rooms } = useLiveQuery("type", { key: "room" });
+  const room = rooms[0];
+  const canvasRef = useRef(null);
+  const sceneRef = useRef(null);
+  const [vrReady, setVrReady] = useState(false);
+  const [inVr, setInVr] = useState(false);
+
+  // The engine, built once: scene, camera, lights, ground, one box, render loop, resize, cleanup.
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+    const scene = new BABYLON.Scene(engine);
+    scene.clearColor = new BABYLON.Color4(0.06, 0.08, 0.14, 1);
+
+    const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.7, -5), scene);
+    camera.setTarget(new BABYLON.Vector3(0, 1, 0));
+    camera.attachControl(canvas, true);
+
+    const ambient = new BABYLON.HemisphericLight("ambient", new BABYLON.Vector3(0, 1, 0), scene);
+    ambient.intensity = 0.5;
+    const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-1, -2, -1), scene);
+    sun.position = new BABYLON.Vector3(5, 10, 5);
+    sun.intensity = 0.8;
+
+    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 12, height: 12 }, scene);
+    const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
+    groundMat.diffuseColor = new BABYLON.Color3(0.22, 0.3, 0.26);
+    ground.material = groundMat;
+
+    const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
+    box.position.y = 1.2;
+    const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
+    boxMat.diffuseColor = new BABYLON.Color3(0.95, 0.55, 0.25);
+    box.material = boxMat;
+
+    scene.onBeforeRenderObservable.add(() => {
+      const dt = engine.getDeltaTime() / 1000;
+      box.rotation.y += dt * 0.8;
+      box.rotation.x += dt * 0.3;
+    });
+
+    sceneRef.current = { scene, ground };
+    engine.runRenderLoop(() => scene.render());
+    const onResize = () => engine.resize();
+    window.addEventListener("resize", onResize);
+
+    // Ask the browser once whether an immersive headset session is on offer.
+    let alive = true;
+    if (navigator.xr) {
+      navigator.xr
+        .isSessionSupported("immersive-vr")
+        .then((ok) => { if (alive) setVrReady(ok); })
+        .catch(() => { if (alive) setVrReady(false); });
+    }
+
+    return () => {
+      alive = false;
+      sceneRef.current = null;
+      window.removeEventListener("resize", onResize);
+      engine.stopRenderLoop();
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []);
+
+  const enterVr = async () => {
+    const current = sceneRef.current;
+    if (!current) return;
+    const xr = await current.scene.createDefaultXRExperienceAsync({ floorMeshes: [current.ground], disableDefaultUI: true });
+    xr.baseExperience.onStateChangedObservable.add((state) => setInVr(state === BABYLON.WebXRState.IN_XR));
+    await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <h1 className="text-3xl font-bold">{room?.name ?? "Floating Room"}</h1>
+      <p className="mt-1 text-muted-foreground">{room?.tagline ?? "A quiet room with one bright box. Drag to look around, or step inside with a headset."}</p>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>The room</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <canvas ref={canvasRef} className="block aspect-video w-full rounded-lg outline-none touch-none" />
+          {/* TODO(next pass): hit testing, anchors, hand tracking, particles and shaders inside this same scene */}
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            {vrReady ? (
+              <Button onClick={enterVr}>Enter VR</Button>
+            ) : (
+              <Button disabled variant="outline">VR needs a headset browser</Button>
+            )}
+            <Badge variant="secondary">{inVr ? "In VR" : "On screen"}</Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "floatingRoom": [
+    { "key": "room", "type": "room", "name": "Floating Room", "tagline": "A quiet room with one bright box. Drag to look around, or step inside with a headset." }
+  ]
+}
+```
+
+Draft note: the next pass adds hit testing, anchors, hand tracking, particles and shaders to the same scene.
+
+## What stays the same in a WebXR draft
+
+- **The import is `import * as BABYLON from "@babylonjs/core"`**, never the
+  legacy `babylonjs` package, and every engine class is reached through the
+  `BABYLON.` namespace.
+- **The engine is built once** in `useEffect(() => {...}, [])`: `Engine`,
+  `Scene`, camera, lights, ground, mesh and `engine.runRenderLoop` all inside
+  it, per-frame motion in `scene.onBeforeRenderObservable`, and the scene kept
+  in a ref for the few calls React makes in.
+- **The cleanup is complete**: it removes the resize listener, stops the render
+  loop, disposes the scene and disposes the engine.
+- **Sizing**: the canvas is `block aspect-video w-full` inside a Card, and
+  `window` resize calls `engine.resize()`.
+- **The hello is one lit box on a ground plane** under a hemispheric light and
+  a directional light, turning on the engine's delta time. The ground doubles
+  as the XR floor mesh.
+- **VR is shown, never hidden**: `navigator.xr.isSessionSupported("immersive-vr")`
+  is checked in the effect and stored in state; a supported browser gets an
+  "Enter VR" Button that awaits `createDefaultXRExperienceAsync` with
+  `disableDefaultUI` and then `enterXRAsync("immersive-vr", "local-floor")`,
+  and every other browser sees a disabled Button reading "VR needs a headset
+  browser".
+- **What waits for the next pass** is named in the `TODO(next pass)` comment
+  and the draft note: hit testing, anchors, hand tracking, particles, shaders.
+  The draft draws none of it.

package/llms/webxr.js

@@ -19,6 +19,7 @@ export const webxrConfig = {
         "quest",
         "vision pro",
     ],
+    draftVariant: true,
     importModule: "@babylonjs/core",
     importName: "BABYLON",
     importType: "namespace",

package/llms/webxr.js.map

@@ -1 +1 @@
-{"version":3,"file":"webxr.js","sourceRoot":"","sources":["../../jsr/llms/webxr.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,kBAAkB;IACzB,WAAW,EACT,gFAAgF;QAChF,4FAA4F;QAC5F,kFAAkF;QAClF,sFAAsF;QACtF,uDAAuD;IACzD,IAAI,EAAE;QACJ,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,iBAAiB;QACjB,mBAAmB;QACnB,SAAS;QACT,WAAW;QACX,eAAe;QACf,SAAS;QACT,OAAO;QACP,YAAY;KACb;IACD,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,WAAW;CACxB,CAAC"}
+{"version":3,"file":"webxr.js","sourceRoot":"","sources":["../../jsr/llms/webxr.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,kBAAkB;IACzB,WAAW,EACT,gFAAgF;QAChF,4FAA4F;QAC5F,kFAAkF;QAClF,sFAAsF;QACtF,uDAAuD;IACzD,IAAI,EAAE;QACJ,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,iBAAiB;QACjB,mBAAmB;QACnB,SAAS;QACT,WAAW;QACX,eAAe;QACf,SAAS;QACT,OAAO;QACP,YAAY;KACb;IAGD,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/youtube.draft.md

@@ -0,0 +1,183 @@
+# YouTube channel stats — the first draft: the whole dashboard on sample rows
+
+A YouTube dashboard's first draft is the finished page, painted from seeded
+documents shaped exactly like the rows the real backend returns: the channel
+header with its name and handle, three stat tiles (subscribers, views, videos),
+the recent uploads with their published date and view count, and the setup card
+that walks the owner through getting a YouTube Data API v3 key. A Badge on the
+header reads "sample data until the key is set", so the capability is on screen
+and honestly labeled from the first paint.
+
+The next pass writes `backend.js`: it reads `YOUTUBE_API_KEY` from the vibe's
+secrets, resolves the channel from its handle, reads the uploads playlist, and
+saves a daily snapshot. What the draft owes that pass is the row shape: the
+`channel` document carries the same fields `loadChannel` returns (`channelId`,
+`title`, `handle`, `subscribers`, `subscribersHidden`, `views`, `videoCount`)
+and each `video` document carries the same fields `loadVideos` returns (`id`,
+`title`, `published`, `views`, `likes`, `comments`), so the next pass swaps the
+source and keeps every component. The draft writes no `backend.js`, makes no
+network call, reads no secret, and never asks a visitor for a token: the key is
+the owner's, set once in the vibe's settings.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@vibes.diy/look";
+
+// The owner's one-time trip to Google, carried in the app because the owner is the one who reads it.
+const SETUP_STEPS = [
+  "Open the Google Cloud console and create or select a project.",
+  "In APIs & Services, open Library and enable YouTube Data API v3.",
+  "In Credentials, choose Create credentials, then API key.",
+  "Restrict the key to YouTube Data API v3.",
+  "Set it on this vibe as YOUTUBE_API_KEY in the vibe's settings page.",
+];
+const SECRET_NAME = "YOUTUBE_API_KEY";
+
+const formatCount = (n) => (n == null ? "hidden" : Number(n).toLocaleString());
+const formatDay = (iso) => new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+
+function StatCard({ label, value, caption }) {
+  return (
+    <Card>
+      <CardHeader>
+        <p className="text-muted-foreground">{label}</p>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-bold">{value}</p>
+        {caption && <p className="mt-1 text-muted-foreground">{caption}</p>}
+      </CardContent>
+    </Card>
+  );
+}
+
+function VideoCard({ video }) {
+  return (
+    <Card>
+      <CardContent>
+        <p className="font-semibold">{video.title}</p>
+        <div className="mt-2 flex flex-wrap items-center gap-3 text-muted-foreground">
+          <span>{formatDay(video.published)}</span>
+          <span className="font-medium text-foreground">{formatCount(video.views)} views</span>
+          <span>{formatCount(video.likes)} likes</span>
+          <span>{formatCount(video.comments)} comments</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function App() {
+  const { useLiveQuery } = useFireproof("youtubeDashboard");
+  const { docs: channels } = useLiveQuery("type", { key: "channel" });
+  const { docs: videos } = useLiveQuery("type", { key: "video" });
+  const [sortBy, setSortBy] = useState("newest");
+  const channel = channels[0];
+
+  const sorted = videos
+    .slice()
+    .sort((a, b) => (sortBy === "views" ? b.views - a.views : b.published.localeCompare(a.published)));
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <div className="flex flex-wrap items-center gap-3">
+        <h1 className="text-3xl font-bold">{channel?.title ?? "Your channel"}</h1>
+        <Badge variant="secondary">sample data until the key is set</Badge>
+      </div>
+      <p className="mt-1 text-muted-foreground">{channel?.handle} · how the channel is doing, at a glance</p>
+
+      <div className="mt-6 grid gap-4 sm:grid-cols-3">
+        <StatCard
+          label="Subscribers"
+          value={channel?.subscribersHidden ? "hidden by the channel" : formatCount(channel?.subscribers)}
+          caption="YouTube rounds public subscriber counts."
+        />
+        <StatCard label="Views" value={formatCount(channel?.views)} />
+        <StatCard label="Videos" value={formatCount(channel?.videoCount)} />
+      </div>
+
+      <div className="mt-8 flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-xl font-semibold">Recent uploads</h2>
+        <div className="flex gap-2">
+          <Button size="sm" variant={sortBy === "newest" ? "default" : "outline"} onClick={() => setSortBy("newest")}>Newest</Button>
+          <Button size="sm" variant={sortBy === "views" ? "default" : "outline"} onClick={() => setSortBy("views")}>Most viewed</Button>
+        </div>
+      </div>
+      <div className="mt-4 grid gap-3">
+        {sorted.map((video) => (
+          <VideoCard key={video.id} video={video} />
+        ))}
+      </div>
+      {/* TODO(next pass): the server handler reads YOUTUBE_API_KEY, resolves the channel from its handle, reads the uploads playlist, and saves a daily snapshot these same components render */}
+
+      <Card className="mt-8">
+        <CardHeader>
+          <CardTitle>Show your live numbers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Five minutes in the Google Cloud console, once, and this page fills with your channel.</p>
+          <ol className="mt-3 grid list-decimal gap-2 pl-5">
+            {SETUP_STEPS.map((step) => (
+              <li key={step}>{step}</li>
+            ))}
+          </ol>
+          <p className="mt-3">
+            The secret is named <code className="rounded bg-muted px-1">{SECRET_NAME}</code> and stays on the server.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle>From YouTube Analytics</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">
+            Watch time, revenue, impressions, traffic sources and demographics live in YouTube Analytics with your own
+            sign-in. Not available with an API key.
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "youtubeDashboard": [
+    { "key": "channel", "type": "channel", "channelId": "UCq8x2Tn4Lm0bVfKe7RdPw3A", "title": "Tidepool Kitchen", "handle": "@tidepoolkitchen", "subscribers": 48200, "subscribersHidden": false, "views": 3915422, "videoCount": 214 },
+    { "key": "v1", "type": "video", "id": "k3Jd9sLq2Xw", "title": "Sourdough on a camp stove (it worked!)", "published": "2026-09-24T15:00:00Z", "views": 18430, "likes": 1204, "comments": 187 },
+    { "key": "v2", "type": "video", "id": "Pz7tR1mVb8c", "title": "Five-minute miso butter, three ways", "published": "2026-09-17T15:00:00Z", "views": 42911, "likes": 3310, "comments": 402 },
+    { "key": "v3", "type": "video", "id": "aQ4nW6yHe0s", "title": "Foraging sea beans at low tide", "published": "2026-09-10T15:00:00Z", "views": 27604, "likes": 2188, "comments": null },
+    { "key": "v4", "type": "video", "id": "Lm2cX8oTf5u", "title": "The pantry tour everyone asked for", "published": "2026-09-03T15:00:00Z", "views": 61378, "likes": null, "comments": 955 }
+  ]
+}
+```
+
+Draft note: the next pass adds backend.js, which reads `YOUTUBE_API_KEY`, resolves the channel from its handle, reads the uploads playlist and saves a daily snapshot, so the same tiles and cards show live numbers and a chart of change over time.
+
+## What stays the same in a YouTube draft
+
+- **The whole dashboard paints on the first draft**: header, the three stat
+  tiles, the upload list, the setup card and the Analytics label. Nothing
+  waits behind a loading state or an empty section.
+- **Seeded rows mirror the backend's rows field for field**: the `channel`
+  document is `loadChannel`'s shape and each `video` document is `loadVideos`'
+  shape, counts as numbers, `published` as an ISO string, so the next pass
+  changes the source and keeps every component.
+- **The capability is labeled, never hidden**: a Badge on the header reads
+  "sample data until the key is set", and the setup card names YouTube Data API
+  v3 and `YOUTUBE_API_KEY` in so many words.
+- **The key is the owner's**: the setup steps are for the owner, once. No input
+  asks a visitor for a key or a token, and no visitor is sent to a console. An
+  app where each visitor sees their own channel is a connection, not this.
+- **Honest numbers**: a hidden subscriber count reads "hidden by the channel",
+  a missing like or comment count reads "hidden", and the subscriber tile
+  carries the rounding caption. Nothing unknown renders as zero.
+- **What waits for the next pass** is named in the `TODO(next pass)` comment and
+  the draft note: `backend.js`, reading the secret, resolving the handle, the
+  uploads playlist, daily snapshots and the chart. The draft writes no
+  `backend.js`, makes no network call and reads no secret.

package/llms/youtube.js

@@ -2,6 +2,7 @@ export const youtubeConfig = {
     name: "youtube",
     label: "YouTube channel stats",
     description: "YouTube channel dashboards on the owner's own YouTube Data API v3 key: the setup steps the app shows when the key is missing, keeping the key in backend.js, resolving a channel from a handle or URL, reading videos through the uploads playlist instead of the 100-unit search endpoint, daily snapshots to chart change over time, and labeling the numbers an API key cannot see",
+    draftVariant: true,
     cues: [
         "youtube",
         "my channel",

package/llms/youtube.js.map

@@ -1 +1 @@
-{"version":3,"file":"youtube.js","sourceRoot":"","sources":["../../jsr/llms/youtube.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EACT,uXAAuX;IACzX,IAAI,EAAE;QACJ,SAAS;QACT,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,eAAe;QACf,mBAAmB;KACpB;CACF,CAAC"}
+{"version":3,"file":"youtube.js","sourceRoot":"","sources":["../../jsr/llms/youtube.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EACT,uXAAuX;IAGzX,YAAY,EAAE,IAAI;IAClB,IAAI,EAAE;QACJ,SAAS;QACT,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,eAAe;QACf,mBAAmB;KACpB;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.35",
+  "version": "14.3.37",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -37,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.3.35",
-    "@vibes.diy/identity": "14.3.35",
-    "@vibes.diy/use-vibes-types": "14.3.35",
+    "@vibes.diy/call-ai-v2": "14.3.37",
+    "@vibes.diy/identity": "14.3.37",
+    "@vibes.diy/use-vibes-types": "14.3.37",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },