@vibes.diy/prompts 6.2.2 → 6.2.4

package/llms/calendar.md

@@ -7,6 +7,13 @@ add more. This is a `backend.js` feature (see the backend docs for the general
 handler contract); this page is the recipe that makes subscriptions actually
 work on real devices.
 
+The subscription is a **live feed the phone re-fetches**: a `webcal://` link
+backed by a `backend.js` that keeps serving each user's current items as they
+add more. So this feature is always three pieces working together — a
+`backend.js` (the `scheduled` tick + `fetch` handler in "Complete backend.js"
+below), a per-user token, and a `webcal://` link in the UI. Emit all three and
+the calendar stays in sync on the user's device automatically.
+
 ## The architecture (each piece is load-bearing)
 
 Calendar clients (iPhone, Google) refresh subscriptions with **anonymous

package/llms/three-js.md

@@ -2,6 +2,89 @@
 
 _Essential classes, methods, and patterns for Three.js development_
 
+Any request for a 3D scene, model viewer, solar system, globe, spinning
+product, or game is a Three.js app: a `THREE.Scene`, a `THREE.PerspectiveCamera`,
+and a `THREE.WebGLRenderer`, driven from a single `useEffect(() => {…}, [])` and
+disposed on unmount. Three.js gives you real depth, lighting, and a moving
+camera for free.
+
+## Complete starter — the shell every Three.js vibe begins from
+
+This is a full, runnable `App.jsx`. Start here and grow it: the engine lives in
+one `useEffect([])`, the animation loop is a `requestAnimationFrame`, resize
+keeps the camera aspect correct, and the cleanup disposes geometry, material,
+and renderer so remounts don't leak GPU memory.
+
+App.jsx
+
+```jsx
+import React from "react";
+import * as THREE from "three";
+
+export default function App() {
+  const mountRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const mount = mountRef.current;
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0b0f1a);
+
+    const camera = new THREE.PerspectiveCamera(60, mount.clientWidth / mount.clientHeight, 0.1, 1000);
+    camera.position.set(0, 1.2, 4);
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(mount.clientWidth, mount.clientHeight);
+    mount.appendChild(renderer.domElement);
+
+    scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+    const key = new THREE.DirectionalLight(0xffffff, 1.2);
+    key.position.set(3, 5, 2);
+    scene.add(key);
+
+    const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
+    const material = new THREE.MeshStandardMaterial({ color: 0x4f8cff, roughness: 0.4, metalness: 0.1 });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    let raf = 0;
+    const clock = new THREE.Clock();
+    const animate = () => {
+      const dt = clock.getDelta();
+      cube.rotation.x += dt * 0.6;
+      cube.rotation.y += dt * 0.9;
+      renderer.render(scene, camera);
+      raf = requestAnimationFrame(animate);
+    };
+    animate();
+
+    const onResize = () => {
+      if (!mount) return;
+      camera.aspect = mount.clientWidth / mount.clientHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(mount.clientWidth, mount.clientHeight);
+    };
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResize);
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      if (renderer.domElement.parentNode === mount) mount.removeChild(renderer.domElement);
+    };
+  }, []);
+
+  return <div ref={mountRef} className="w-full h-screen" />;
+}
+```
+
+The reference below is the API surface you draw on to grow that shell — swap the
+cube for real geometry, add `OrbitControls` or your own camera rig, load models,
+etc. — but the lifecycle above (one `useEffect`, one loop, dispose on unmount)
+stays the spine of every Three.js vibe.
+
 ## Core Setup
 
 ### Scene Graph Hierarchy

package/llms/voxel.md

@@ -18,9 +18,12 @@ shared world reset. Every pattern below is pulled from them.
 ## Project shape: an engine in a React shell, split across a few flat files
 
 A voxel game is one big imperative Three.js engine wrapped in a thin React
-shell. Build the engine **once** inside a `useEffect(() => {...}, [])` that owns
-the renderer, the world model, and the animation loop; expose a few methods on
-a mutable `state` object (`engineRef.current`) so React can call in. React
+shell. Render with Three.js/WebGL: a block world runs on real 3D depth, per-face
+lighting, and a first-person perspective camera, all of which come straight from
+the `THREE.*` classes in the Three.js docs. Build the engine **once** inside a
+`useEffect(() => {...}, [])` that owns the renderer, the world model, and the
+animation loop; expose a few methods on a mutable `state` object
+(`engineRef.current`) so React can call in. React
 renders only the HUD, the hotbar, and overlays as normal DOM on top of the
 `<canvas>`. Never re-create the engine on re-render, and never drive
 per-frame values through React state — read live values through refs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "6.2.2",
+  "version": "6.2.4",
   "type": "module",
   "main": "./index.js",
   "description": "",
@@ -24,9 +24,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "^6.2.2",
-    "@vibes.diy/identity": "^6.2.2",
-    "@vibes.diy/use-vibes-types": "^6.2.2",
+    "@vibes.diy/call-ai-v2": "^6.2.4",
+    "@vibes.diy/identity": "^6.2.4",
+    "@vibes.diy/use-vibes-types": "^6.2.4",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.2"
   },