@vibes.diy/prompts 14.3.58 → 14.3.59

package/llms/p5.draft.md

@@ -1,179 +0,0 @@
-# p5.js — the first draft: a small seeded sketch that moves
-
-A p5 app's first draft is the whole page around the piece — the title, the
-card that frames it, the button that re-seeds it, the seeded document it reads
-— with one small generative sketch actually running inside the card: a handful
-of dots wandering on Perlin noise, each leaving a soft trail, seeded from the
-document so the same seed always draws the same drift. The real piece (the
-flow field, the kaleidoscope, the thousand-particle study), saving still
-renders, palettes and drawing with a finger are the next pass. What the draft
-owes that pass is the right skeleton: the pinned import, instance mode with a
-sketch factory that receives its host element, the canvas sized from the host,
-`pixelDensity` set, the seed read through a ref, and `instance.remove()` on
-cleanup — so the next pass grows `makeSketch` rather than rewriting the file.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef } from "react";
-import { useFireproof } from "use-fireproof";
-import p5 from "https://esm.sh/p5@1.11.13";
-import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
-
-const WANDERERS = 7;
-
-// Canvas pixels cannot follow a CSS variable, so resolve a theme token to a
-// concrete color once per mount. The fallback covers an app with no theme.
-function cssColor(host, token, fallback) {
-  const probe = document.createElement("span");
-  probe.style.display = "none";
-  probe.style.color = `var(${token}, ${fallback})`;
-  host.appendChild(probe);
-  const resolved = window.getComputedStyle(probe).color;
-  probe.remove();
-  return resolved || fallback;
-}
-
-// The sketch is a pure function of its host and the seed it reads. The host is
-// passed in; the current seed arrives through seedRef, so a new seed restarts
-// the drift without rebuilding the instance.
-function makeSketch({ host, seedRef }) {
-  return (p) => {
-    let w = 0;
-    let h = 0;
-    let seed = null;
-    let t = 0;
-    let dots = [];
-    let bg = null;
-    let fade = null;
-    let ink = null;
-
-    const start = () => {
-      seed = seedRef.current;
-      p.randomSeed(seed);
-      p.noiseSeed(seed);
-      t = 0;
-      dots = Array.from({ length: WANDERERS }, (_, i) => ({ x: p.random(w), y: p.random(h), r: 6 + i * 2, off: p.random(1000) }));
-      p.background(bg);
-    };
-
-    p.setup = () => {
-      w = Math.max(120, host.clientWidth || 320);
-      h = Math.max(120, host.clientHeight || 320);
-      const c = p.createCanvas(w, h);
-      c.elt.style.display = "block";
-      p.pixelDensity(Math.min(window.devicePixelRatio || 1, 2));
-      bg = p.color(cssColor(host, "--card", "#fdfaf4"));
-      fade = p.color(cssColor(host, "--card", "#fdfaf4"));
-      fade.setAlpha(24);
-      ink = p.color(cssColor(host, "--primary", "#3b5bdb"));
-      ink.setAlpha(170);
-      p.noStroke();
-      start();
-    };
-
-    p.draw = () => {
-      if (seedRef.current !== seed) start(); // the button wrote a new seed
-      t += 0.004;
-      p.fill(fade); // trails: dim what is there instead of erasing it
-      p.rect(0, 0, w, h);
-      p.fill(ink);
-      for (const d of dots) {
-        d.x = p.noise(d.off, t) * w;
-        d.y = p.noise(d.off + 50, t) * h;
-        p.circle(d.x, d.y, d.r);
-      }
-    };
-
-    p.windowResized = () => {
-      w = Math.max(120, host.clientWidth);
-      h = Math.max(120, host.clientHeight);
-      p.resizeCanvas(w, h);
-      p.background(bg);
-    };
-  };
-}
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("driftStudio");
-  const { docs: pieces } = useLiveQuery("type", { key: "piece" });
-  const piece = pieces[0];
-  const hostRef = useRef(null);
-  const seedRef = useRef(piece?.seed ?? 1234);
-
-  // The sketch reads the seed from the ref on its next frame.
-  useEffect(() => {
-    if (piece) seedRef.current = piece.seed;
-  }, [piece?.seed]);
-
-  // The instance, built once into the host element, removed on unmount.
-  useEffect(() => {
-    const node = hostRef.current;
-    if (!node) return undefined;
-    const instance = new p5(makeSketch({ host: node, seedRef }), node);
-    return () => instance.remove();
-  }, []);
-
-  const reseed = () => {
-    if (!piece) return;
-    database.put({ ...piece, seed: Math.floor(Math.random() * 100000), reseededAt: Date.now() });
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{piece?.title ?? "Drift"}</h1>
-      <p className="mt-1 text-muted-foreground">Seven dots wander on Perlin noise. Every seed is its own dance, and the same seed always plays it again.</p>
-
-      <Card className="mt-6 max-w-xl">
-        <CardHeader>
-          <CardTitle>{piece?.subtitle ?? "Study no. 1"}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div ref={hostRef} className="aspect-square w-full overflow-hidden rounded-lg border border-border touch-none" />
-          <div className="mt-4 flex items-center gap-3">
-            <Button onClick={reseed}>New seed</Button>
-            <Badge variant="secondary">seed {piece?.seed ?? "…"}</Badge>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* TODO(next pass): grow makeSketch into the real piece, save still renders of a seed, palette picker, drawing with a finger */}
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "driftStudio": [
-    { "key": "drift", "type": "piece", "title": "Drift", "subtitle": "Study no. 1 — seven wanderers", "seed": 4417 }
-  ]
-}
-```
-
-Draft note: the next pass adds the real generative piece, saving still renders of a favourite seed, a palette picker, and drawing into the sketch with a finger.
-
-## What stays the same in a p5 draft
-
-- **The import is pinned**: `import p5 from "https://esm.sh/p5@1.11.13"`,
-  exactly — never a bare `"p5"`, which resolves to the 2.x line.
-- **Instance mode, built once**: `new p5(makeSketch({ host, ... }), host)`
-  inside `useEffect(() => {...}, [])`, and the cleanup returns
-  `instance.remove()` so a remount never leaves a second draw loop running.
-  Every hook is assigned on `p` (`p.setup`, `p.draw`, `p.windowResized`).
-- **The host is passed in and sizes the canvas**: `createCanvas` reads
-  `host.clientWidth`/`clientHeight`, the host is an `aspect-square` (or
-  `aspect-video`) box inside a Card, and `p.pixelDensity(Math.min(devicePixelRatio, 2))`
-  is set in setup.
-- **The seed lives in a document and reaches the sketch through a ref**:
-  the button writes a new `seed` with `database.put`, an effect copies it into
-  `seedRef`, and `draw` notices the change and restarts with
-  `randomSeed`/`noiseSeed`, so the instance is never rebuilt for a new seed and
-  a seed always redraws the same piece.
-- **The colors come from the theme**: `cssColor` resolves `--card` and
-  `--primary` into canvas colors; the page itself uses semantic classes.
-- **The hello is small and visibly generative**: a few noise-driven dots with
-  a soft trail, never a blank canvas and never a placeholder picture.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: the real piece, still renders, palettes, touch drawing.
-  The draft draws none of it.

package/llms/spotify.draft.md

@@ -1,179 +0,0 @@
-# Spotify catalog — the first draft: search that works on sample tracks
-
-A Spotify catalog page's first draft is the finished page, painted from seeded
-`track` documents shaped like the rows the real search route returns: a search
-box and button that filter those tracks right in the browser by track name,
-artist or album, result cards with the fields a real row carries, and the setup
-card that walks the owner through registering a Spotify app. A Badge on the
-header reads "sample data until the key is set", so searching works from the
-first paint and the page says plainly where the live catalog comes from.
-
-The next pass writes `backend.js`: it mints a client-credentials token from
-`SPOTIFY_CLIENT_ID` and `SPOTIFY_CLIENT_SECRET`, holds it in memory, and
-searches the catalog through the app's own `/_api/search` route. What the draft
-owes that pass is the row shape: each `track` document carries the fields
-`trackRow` returns (`id`, `name`, `artists` as one joined string, `album`,
-`image`, `url`) plus `durationMs`, so the next pass swaps the filter for the
-route and keeps every card. The draft writes no `backend.js`, makes no network
-call, reads no secret, and never asks a visitor for a token: the credentials
-are 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, Input } from "@vibes.diy/look";
-
-// The owner's one-time trip to the Spotify developer dashboard, carried in the app.
-const SETUP_STEPS = [
-  "Open the Spotify developer dashboard and log in with a Spotify account.",
-  "Create an app with any name and description; put this page's URL in if the form asks for a redirect URI.",
-  "Open the app's settings and copy the Client ID.",
-  "Reveal and copy the Client secret.",
-  "Set both on this vibe as SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET in the vibe's settings page.",
-];
-const SECRET_NAMES = ["SPOTIFY_CLIENT_ID", "SPOTIFY_CLIENT_SECRET"];
-
-function formatDuration(ms) {
-  const total = Math.round(ms / 1000);
-  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
-}
-
-function matches(track, terms) {
-  const haystack = `${track.name} ${track.artists} ${track.album ?? ""}`.toLowerCase();
-  return terms.every((t) => haystack.includes(t));
-}
-
-function TrackCard({ track }) {
-  return (
-    <Card>
-      <CardContent>
-        <div className="flex items-center gap-4">
-          {track.image ? (
-            <img src={track.image} alt="" className="h-16 w-16 rounded-md object-cover" />
-          ) : (
-            <div className="flex h-16 w-16 items-center justify-center rounded-md bg-muted text-2xl font-bold text-muted-foreground">
-              {track.name.charAt(0)}
-            </div>
-          )}
-          <div className="min-w-0 flex-1">
-            <p className="truncate font-semibold">
-              {track.url ? <a href={track.url} target="_blank" rel="noreferrer" className="underline">{track.name}</a> : track.name}
-            </p>
-            <p className="truncate text-muted-foreground">{track.artists}</p>
-            <p className="truncate text-muted-foreground">{track.album}</p>
-          </div>
-          <span className="tabular-nums text-muted-foreground">{formatDuration(track.durationMs)}</span>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function App() {
-  const { useLiveQuery } = useFireproof("spotifyCatalog");
-  const { docs: tracks } = useLiveQuery("type", { key: "track" });
-  const [query, setQuery] = useState("");
-  const [applied, setApplied] = useState("");
-
-  const terms = applied.toLowerCase().split(/\s+/).filter(Boolean);
-  const results = terms.length === 0 ? tracks : tracks.filter((t) => matches(t, terms));
-  const search = () => setApplied(query.trim());
-
-  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">Crate Digger</h1>
-        <Badge variant="secondary">sample data until the key is set</Badge>
-      </div>
-      <p className="mt-1 text-muted-foreground">Search Spotify's catalog by song, artist or album.</p>
-
-      <form
-        className="mt-6 flex gap-2"
-        onSubmit={(e) => {
-          e.preventDefault();
-          search();
-        }}
-      >
-        <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Try “harbor” or “Juniper Static”" />
-        <Button type="submit">Search</Button>
-      </form>
-      {/* TODO(next pass): the server handler mints the client-credentials token from SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET and searches the catalog through /_api/search; these cards render its rows */}
-
-      <p className="mt-4 text-muted-foreground">
-        {applied ? `${results.length} tracks for “${applied}”` : `${results.length} tracks to explore`}
-      </p>
-      <div className="mt-3 grid gap-3">
-        {results.map((track) => (
-          <TrackCard key={track.id} track={track} />
-        ))}
-      </div>
-      {applied && results.length === 0 && (
-        <p className="mt-3 text-muted-foreground">Try a different word from a song, artist or album.</p>
-      )}
-
-      <Card className="mt-8">
-        <CardHeader>
-          <CardTitle>Search the whole Spotify catalog</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-muted-foreground">Register a Spotify app once, and this search reaches every track on Spotify.</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">
-            Both secrets, {SECRET_NAMES.map((name, i) => (
-              <span key={name}>
-                {i > 0 && " and "}
-                <code className="rounded bg-muted px-1">{name}</code>
-              </span>
-            ))}, stay on the server.
-          </p>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "spotifyCatalog": [
-    { "key": "t1", "type": "track", "id": "4kXq0sample1Harbor", "name": "Harbor Lights at Low Tide", "artists": "Juniper Static", "album": "Saltwater Radio", "image": null, "url": null, "durationMs": 214000 },
-    { "key": "t2", "type": "track", "id": "7bRt2sample2Tangerine", "name": "Tangerine Freeway", "artists": "The Velvet Hours, Mara Quill", "album": "Summer in Reverse", "image": null, "url": null, "durationMs": 187500 },
-    { "key": "t3", "type": "track", "id": "2mPz9sample3Lantern", "name": "Lantern Song", "artists": "Juniper Static", "album": "Saltwater Radio", "image": null, "url": null, "durationMs": 243800 },
-    { "key": "t4", "type": "track", "id": "9cWe4sample4Paper", "name": "Paper Planets", "artists": "Odessa Bloom", "album": "Small Weather", "image": null, "url": null, "durationMs": 198200 },
-    { "key": "t5", "type": "track", "id": "1hVn6sample5Midnight", "name": "Midnight Laundromat", "artists": "Kit Arden", "album": "Quarters", "image": null, "url": null, "durationMs": 226400 }
-  ]
-}
-```
-
-Draft note: the next pass adds backend.js, which mints the client-credentials token from `SPOTIFY_CLIENT_ID` and `SPOTIFY_CLIENT_SECRET` and searches the public catalog, so the same cards show live tracks with album art and Spotify links.
-
-## What stays the same in a Spotify draft
-
-- **The whole page paints on the first draft**: header, search, result cards
-  and the setup card. Searching already works, filtering the seeded tracks in
-  the browser by track name, artist and album.
-- **Seeded rows mirror the backend's rows**: each `track` document carries
-  `trackRow`'s fields (`id`, `name`, `artists` joined into one string, `album`,
-  `image`, `url`) plus `durationMs`, so the next pass swaps the source and keeps
-  every card. A card handles a missing `image` or `url` gracefully.
-- **The capability is labeled, never hidden**: a Badge on the header reads
-  "sample data until the key is set", and the setup card names the Spotify
-  developer dashboard, `SPOTIFY_CLIENT_ID` and `SPOTIFY_CLIENT_SECRET` in so
-  many words.
-- **The credentials are the owner's**: the setup steps are for the owner, once.
-  No input asks a visitor for a token, and no visitor is sent to a developer
-  console.
-- **The page reads the public catalog**: search, artists, albums and tracks. A
-  listener's own top tracks, playlists and saved songs belong to their own
-  Spotify account, which is a connection and not this flow, so the draft draws
-  no section for them.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment and
-  the draft note: `backend.js`, the client-credentials token held in memory, the
-  `/_api/search` route and its refusal reasons. The draft writes no
-  `backend.js`, makes no network call and reads no secret.

package/llms/three-js.draft.md

@@ -1,161 +0,0 @@
-# Three.js — the first draft: one lit object turning in a viewport
-
-A Three.js app's first draft is the whole page around the scene (title, copy,
-a card holding the viewport, a control row) with one real, lit object turning
-inside it. The seeded document names the scene and holds its color, and the
-control row repaints the object live. Loading models, physics, particles,
-camera controls and textures are the next pass. What the draft owes that pass
-is the platform's own engine skeleton: the renderer, scene, camera, lights and
-loop are built once inside one effect, sized to their host, and fully disposed
-on unmount, and React talks to the running scene through a ref, so the next
-pass adds meshes and systems to this file rather than rewriting it.
-
-### `App.jsx`
-```jsx
-import React, { useEffect, useRef } from "react";
-import { useFireproof } from "use-fireproof";
-import * as THREE from "three";
-import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
-
-// The finishes the control row offers, named once for the buttons and the material.
-const FINISHES = [
-  { label: "Lagoon", color: "#3fa7d6" },
-  { label: "Marigold", color: "#f4b942" },
-  { label: "Orchid", color: "#c86bd8" },
-  { label: "Moss", color: "#6fae5b" },
-];
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("spinStudio");
-  const { docs: scenes } = useLiveQuery("type", { key: "scene" });
-  const scene = scenes[0];
-  const hostRef = useRef(null);
-  // The running engine reads the color from here each frame, so a change never rebuilds it.
-  const colorRef = useRef(scene?.color ?? FINISHES[0].color);
-
-  useEffect(() => {
-    if (scene?.color) colorRef.current = scene.color;
-  }, [scene?.color]);
-
-  // The engine, built once: renderer, scene, camera, lights, one mesh, loop, resize, cleanup.
-  useEffect(() => {
-    const host = hostRef.current;
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    renderer.setSize(host.clientWidth, host.clientHeight);
-    host.appendChild(renderer.domElement);
-
-    const world = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(50, host.clientWidth / host.clientHeight, 0.1, 100);
-    camera.position.set(0, 1.2, 4.2);
-    camera.lookAt(0, 0, 0);
-
-    world.add(new THREE.HemisphereLight(0xffffff, 0x445066, 0.8));
-    const sun = new THREE.DirectionalLight(0xffffff, 1.4);
-    sun.position.set(3, 5, 2);
-    world.add(sun);
-
-    const geometry = new THREE.BoxGeometry(1.4, 1.4, 1.4);
-    const material = new THREE.MeshStandardMaterial({ color: colorRef.current, roughness: 0.35, metalness: 0.15 });
-    const mesh = new THREE.Mesh(geometry, material);
-    world.add(mesh);
-
-    const onResize = () => {
-      const w = host.clientWidth;
-      const h = host.clientHeight;
-      if (w === 0 || h === 0) return;
-      renderer.setSize(w, h);
-      camera.aspect = w / h;
-      camera.updateProjectionMatrix();
-    };
-    const observer = new window.ResizeObserver(onResize); // follows the host, not just the window
-    observer.observe(host);
-
-    const clock = new THREE.Clock();
-    let raf = 0;
-    const animate = () => {
-      const dt = Math.min(clock.getDelta(), 0.05);
-      mesh.rotation.x += dt * 0.5;
-      mesh.rotation.y += dt * 0.8;
-      material.color.set(colorRef.current);
-      renderer.render(world, camera);
-      raf = requestAnimationFrame(animate);
-    };
-    animate();
-
-    return () => {
-      cancelAnimationFrame(raf);
-      observer.disconnect();
-      geometry.dispose();
-      material.dispose();
-      renderer.dispose();
-      if (renderer.domElement.parentNode === host) host.removeChild(renderer.domElement);
-    };
-  }, []);
-
-  const paint = (color) => {
-    colorRef.current = color;
-    if (scene) database.put({ ...scene, color });
-  };
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">{scene?.name ?? "Spin Studio"}</h1>
-      <p className="mt-1 text-muted-foreground">A little object on a turntable. Pick a finish and watch it catch the light.</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Turntable</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div ref={hostRef} className="aspect-video w-full rounded-lg overflow-hidden bg-muted" />
-          {/* TODO(next pass): load a GLTF model, orbit controls, textures, particles and physics into this same scene */}
-          <div className="mt-4 flex flex-wrap items-center gap-2">
-            {FINISHES.map((f) => (
-              <Button key={f.label} size="sm" variant={f.color === scene?.color ? "default" : "outline"} onClick={() => paint(f.color)}>
-                {f.label}
-              </Button>
-            ))}
-            <Badge variant="secondary" className="ml-auto">{FINISHES.find((f) => f.color === scene?.color)?.label ?? "Lagoon"}</Badge>
-          </div>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "spinStudio": [
-    { "key": "turntable", "type": "scene", "name": "Spin Studio", "color": "#3fa7d6" }
-  ]
-}
-```
-
-Draft note: the next pass adds loaded models, orbit controls, textures, particles and physics to the same scene.
-
-## What stays the same in a Three.js draft
-
-- **The engine is built once** in `useEffect(() => {...}, [])`: renderer,
-  scene, camera, lights, mesh and `requestAnimationFrame` loop all inside it.
-  React never rebuilds it; values React changes reach the loop through a ref
-  (`colorRef`), never through the effect's dependency list.
-- **The cleanup is complete**: it cancels the frame, disconnects the resize
-  observer, disposes every geometry and material it made, disposes the
-  renderer, and removes the canvas from its host.
-- **The viewport sizes to its host**, not the window: a `div` with a fixed
-  aspect (`aspect-video w-full rounded-lg overflow-hidden`) inside a Card, a
-  resize handler that updates the renderer size and the camera aspect, and
-  `setPixelRatio(Math.min(window.devicePixelRatio, 2))`.
-- **The hello is one lit object**: a `BoxGeometry` with a
-  `MeshStandardMaterial` under a hemisphere light and a directional light,
-  turning on a clock delta. Standard materials need light; the draft always
-  ships both.
-- **The page is complete around it**: title, a sentence of friendly copy, the
-  Card, and a control row of Buttons whose choice saves to the seeded
-  Fireproof document and shows up in the scene on the next frame.
-- **What waits for the next pass** is named in the `TODO(next pass)` comment
-  and the draft note: models, controls, textures, particles, physics. The
-  draft draws none of it and imports nothing beyond `three` itself.