@vibes.diy/prompts 2.2.17 → 2.2.19

package/README.md

@@ -1,5 +1,5 @@
 [![Join our
-  Discord](https://discord-badge.selem.workers.dev/i/tzMUkwFK.svg)](https://discord.gg/tzMUkwFK)
+  Discord](https://discord-badge.selem.workers.dev/i/weSgWt684k.svg)](https://discord.gg/weSgWt684k)
 
 # ✨ Build Mini Apps with AI Magic
 

package/json-docs.d.ts

@@ -12,6 +12,7 @@ export interface JsonDocs {
     "three-js.json": JsonDoc;
     "use-viewer.json": JsonDoc;
     "web-audio.json": JsonDoc;
+    "webxr.json": JsonDoc;
     [key: string]: JsonDoc;
 }
 export declare function getLlmCatalogNames(): Promise<Set<string>>;

package/json-docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-docs.js","sourceRoot":"","sources":["../jsr/json-docs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAuB7C,MAAM,UAAU,kBAAkB;IAChC,OAAO,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACjC,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,IAAuB,EAAE;IAC5D,MAAM,CAAC,GAAa,EAAc,CAAC;IAGnC,KAAK,MAAM,MAAM,IAAI,UAAU,EAAE,CAAC;QAChC,MAAM,QAAQ,GAAG,GAAG,MAAM,CAAC,IAAI,OAAO,CAAC;QACvC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;IAChD,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC,CAAC,CAAC"}
+{"version":3,"file":"json-docs.js","sourceRoot":"","sources":["../jsr/json-docs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAwB7C,MAAM,UAAU,kBAAkB;IAChC,OAAO,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACjC,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,IAAuB,EAAE;IAC5D,MAAM,CAAC,GAAa,EAAc,CAAC;IAGnC,KAAK,MAAM,MAAM,IAAI,UAAU,EAAE,CAAC;QAChC,MAAM,QAAQ,GAAG,GAAG,MAAM,CAAC,IAAI,OAAO,CAAC;QACvC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;IAChD,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC,CAAC,CAAC"}

package/llms/index.d.ts

@@ -4,6 +4,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
 export type { LlmConfig } from "./types.js";
-export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
+export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];

package/llms/index.js

@@ -4,6 +4,7 @@ import { imageGenConfig } from "./image-gen.js";
 import { webAudioConfig } from "./web-audio.js";
 import { d3Config } from "./d3.js";
 import { threeJsConfig } from "./three-js.js";
+import { webxrConfig } from "./webxr.js";
 import { useViewerConfig } from "./use-viewer.js";
 export { callaiConfig } from "./callai.js";
 export { fireproofConfig } from "./fireproof.js";
@@ -11,6 +12,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
 export const allConfigs = [
     callaiConfig,
@@ -19,6 +21,7 @@ export const allConfigs = [
     d3Config,
     threeJsConfig,
     fireproofConfig,
+    webxrConfig,
     useViewerConfig,
 ];
 //# sourceMappingURL=index.js.map

package/llms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,eAAe;IACf,eAAe;CACP,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,eAAe;IACf,WAAW;IACX,eAAe;CACP,CAAC"}

package/llms/three-js.js

@@ -2,7 +2,7 @@ export const threeJsConfig = {
     name: "three-js",
     label: "Three.js",
     module: "three-js",
-    description: "Three.js 3D graphics library for WebGL 3D rendering, mesh geometry, materials, lighting, animation, scenes, cameras, textures, shaders, models, WebXR, physics, particle systems, post-processing, visual effects, 3js",
+    description: "Three.js 3D graphics library for WebGL rendering: mesh geometry, materials, lighting, animation, cameras, textures, GLSL shaders, GLTF/OBJ/FBX model loading, physics, particle systems, post-processing, visual effects, 3js",
     importModule: "three",
     importName: "THREE",
     importType: "namespace",

package/llms/three-js.js.map

@@ -1 +1 @@
-{"version":3,"file":"three-js.js","sourceRoot":"","sources":["../../jsr/llms/three-js.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,UAAU;IAClB,WAAW,EACT,wNAAwN;IAC1N,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}
+{"version":3,"file":"three-js.js","sourceRoot":"","sources":["../../jsr/llms/three-js.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,UAAU;IAClB,WAAW,EACT,+NAA+N;IACjO,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/webxr.d.ts

@@ -0,0 +1,2 @@
+import type { LlmConfig } from "./types.js";
+export declare const webxrConfig: LlmConfig;

package/llms/webxr.js

@@ -0,0 +1,14 @@
+export const webxrConfig = {
+    name: "webxr",
+    label: "Babylon.js WebXR",
+    module: "webxr",
+    description: "Babylon.js 3D engine with first-class WebXR: immersive VR and AR passthrough, " +
+        "hit-testing, surface anchors, particle systems, SolidParticleSystem, custom GLSL shaders, " +
+        "controller and hand-tracking events, PBR materials, Quest performance patterns. " +
+        "babylon, babylonjs, WebXR, VR, AR, spatial computing, immersive, mixed reality, xr, " +
+        "augmented reality, virtual reality, Quest, Vision Pro",
+    importModule: "@babylonjs/core",
+    importName: "BABYLON",
+    importType: "namespace",
+};
+//# sourceMappingURL=webxr.js.map

package/llms/webxr.js.map

@@ -0,0 +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,MAAM,EAAE,OAAO;IACf,WAAW,EACT,gFAAgF;QAChF,4FAA4F;QAC5F,kFAAkF;QAClF,sFAAsF;QACtF,uDAAuD;IACzD,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/webxr.md

@@ -0,0 +1,751 @@
+# Babylon.js WebXR Reference for Coding Agents
+
+_Babylon.js is a full-featured 3D engine with first-class WebXR support. Import it as a bare specifier — the platform resolves it via esm.sh._
+
+## Import
+
+```javascript
+import * as BABYLON from "@babylonjs/core";
+```
+
+## Core Setup
+
+```javascript
+const canvas = document.getElementById("renderCanvas");
+const engine = new BABYLON.Engine(canvas, true, {
+  preserveDrawingBuffer: true,
+  stencil: true,
+});
+
+const scene = new BABYLON.Scene(engine);
+
+// Required resize handler
+window.addEventListener("resize", () => engine.resize());
+
+// Render loop — put your per-frame logic in scene.onBeforeRenderObservable
+engine.runRenderLoop(() => scene.render());
+```
+
+### Minimal Scene with Lighting
+
+```javascript
+// Camera (required even in VR — sets the non-XR fallback view)
+const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.7, -5), scene);
+camera.setTarget(BABYLON.Vector3.Zero());
+camera.attachControl(canvas, true);
+
+// Lights
+const ambient = new BABYLON.HemisphericLight("ambient", new BABYLON.Vector3(0, 1, 0), scene);
+ambient.intensity = 0.4;
+
+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;
+```
+
+---
+
+## VR Mode
+
+```javascript
+// createDefaultXRExperienceAsync is async — always await it
+const xrHelper = await scene.createDefaultXRExperienceAsync({
+  floorMeshes: [ground], // meshes user can teleport onto
+  disableTeleportation: false, // set true to disable built-in teleport
+});
+
+// Access the base XR session
+const sessionManager = xrHelper.baseExperience.sessionManager;
+
+// Check if currently in XR
+if (xrHelper.baseExperience.state === BABYLON.WebXRState.IN_XR) {
+  console.log("In VR");
+}
+
+// React to entering/leaving XR
+xrHelper.baseExperience.onStateChangedObservable.add((state) => {
+  if (state === BABYLON.WebXRState.IN_XR) {
+    // User entered VR — hide 2D UI, etc.
+  }
+  if (state === BABYLON.WebXRState.NOT_IN_XR) {
+    // User exited VR
+  }
+});
+```
+
+### VR Button
+
+`createDefaultXRExperienceAsync` adds the "Enter VR" button automatically. To add it manually:
+
+```javascript
+const vrButton = BABYLON.WebXRDefaultExperience.CreateAsync(scene, {
+  uiOptions: { sessionMode: "immersive-vr" },
+});
+```
+
+---
+
+## AR Mode (Passthrough)
+
+AR mode requires HTTPS. The Quest Browser and Chrome on Android support it. Safari/Vision Pro does not yet support AR passthrough via WebXR.
+
+```javascript
+const xrHelper = await scene.createDefaultXRExperienceAsync({
+  uiOptions: {
+    sessionMode: "immersive-ar",
+    referenceSpaceType: "local-floor",
+  },
+  optionalFeatures: true, // enables hit-test, anchors if supported
+});
+```
+
+### Hit Testing (Tap to Place)
+
+```javascript
+const hitTest = xrHelper.featuresManager.enableFeature(BABYLON.WebXRHitTest, "latest");
+
+// Reusable indicator mesh (a thin ring)
+const indicator = BABYLON.MeshBuilder.CreateTorus(
+  "indicator",
+  {
+    diameter: 0.3,
+    thickness: 0.01,
+    tessellation: 32,
+  },
+  scene
+);
+indicator.isPickable = false;
+
+hitTest.onHitTestResultObservable.add((results) => {
+  if (results.length > 0) {
+    indicator.isVisible = true;
+    results[0].transformationMatrix.decompose(undefined, indicator.rotationQuaternion, indicator.position);
+  } else {
+    indicator.isVisible = false;
+  }
+});
+```
+
+### Anchors (Persist Placed Objects)
+
+```javascript
+const anchors = xrHelper.featuresManager.enableFeature(BABYLON.WebXRAnchorSystem, "latest");
+
+// Place an object anchored to a real-world surface
+async function placeAnchor(hitTestResult) {
+  const anchor = await anchors.addAnchorPointUsingHitTestResultAsync(hitTestResult);
+  const mesh = BABYLON.MeshBuilder.CreateSphere("orb", { diameter: 0.15 }, scene);
+  anchor.attachedNode = mesh; // mesh follows the anchor
+}
+```
+
+### Plane Detection
+
+```javascript
+const planes = xrHelper.featuresManager.enableFeature(BABYLON.WebXRPlaneDetector, "latest");
+
+planes.onPlaneAddedObservable.add((plane) => {
+  // plane.xrPlane.polygon — array of DOMPointReadOnly vertices
+  // plane.mesh — auto-generated Babylon mesh for the detected plane
+  plane.mesh.material = planeMaterial;
+});
+```
+
+---
+
+## Generative Art Patterns
+
+### Particle System (Billboarded Sprites)
+
+```javascript
+const particles = new BABYLON.ParticleSystem("stars", 3000, scene);
+
+// Texture — use a built-in or a canvas texture
+particles.particleTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/flare.png", scene);
+
+particles.emitter = new BABYLON.Vector3(0, 1, 0); // world position
+particles.minEmitBox = new BABYLON.Vector3(-5, -5, -5);
+particles.maxEmitBox = new BABYLON.Vector3(5, 5, 5);
+
+particles.color1 = new BABYLON.Color4(0.3, 0.8, 1, 1);
+particles.color2 = new BABYLON.Color4(1, 0.3, 0.8, 0.8);
+particles.colorDead = new BABYLON.Color4(0, 0, 0, 0);
+
+particles.minSize = 0.02;
+particles.maxSize = 0.08;
+particles.minLifeTime = 2;
+particles.maxLifeTime = 6;
+particles.emitRate = 200;
+particles.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
+particles.gravity = new BABYLON.Vector3(0, -0.1, 0);
+particles.minAngularSpeed = -Math.PI;
+particles.maxAngularSpeed = Math.PI;
+
+particles.start();
+```
+
+### Solid Particle System (Performant Many-Mesh)
+
+Use `SolidParticleSystem` when you need 3D geometry (not billboards) for thousands of instances:
+
+```javascript
+const sps = new BABYLON.SolidParticleSystem("sps", scene);
+const sphere = BABYLON.MeshBuilder.CreateSphere("tmp", { diameter: 0.1 }, scene);
+sps.addShape(sphere, 500); // 500 sphere instances
+sphere.dispose();
+
+const mesh = sps.buildMesh();
+
+// Position particles on init
+sps.initParticles = () => {
+  for (let i = 0; i < sps.nbParticles; i++) {
+    const p = sps.particles[i];
+    p.position.x = (Math.random() - 0.5) * 10;
+    p.position.y = (Math.random() - 0.5) * 10;
+    p.position.z = (Math.random() - 0.5) * 10;
+    p.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), 1);
+  }
+};
+
+sps.initParticles();
+sps.setParticles();
+
+// Animate each frame
+scene.onBeforeRenderObservable.add(() => {
+  const t = performance.now() / 1000;
+  for (let i = 0; i < sps.nbParticles; i++) {
+    const p = sps.particles[i];
+    p.rotation.y += 0.01;
+    p.position.y += Math.sin(t + i * 0.1) * 0.001;
+  }
+  sps.setParticles();
+});
+```
+
+### Procedural Geometry
+
+```javascript
+// Primitives via MeshBuilder
+const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
+const sphere = BABYLON.MeshBuilder.CreateSphere("s", { diameter: 1, segments: 32 }, scene);
+const torus = BABYLON.MeshBuilder.CreateTorus("t", { diameter: 2, thickness: 0.3 }, scene);
+const ribbon = BABYLON.MeshBuilder.CreateRibbon("r", { pathArray: paths }, scene);
+const tube = BABYLON.MeshBuilder.CreateTube("tube", { path: points, radius: 0.1 }, scene);
+
+// Custom vertex data
+const positions = new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0]);
+const indices = new Uint32Array([0, 1, 2]);
+const normals = [];
+const vertexData = new BABYLON.VertexData();
+vertexData.positions = positions;
+vertexData.indices = indices;
+BABYLON.VertexData.ComputeNormals(positions, indices, normals);
+vertexData.normals = normals;
+const customMesh = new BABYLON.Mesh("custom", scene);
+vertexData.applyToMesh(customMesh);
+```
+
+### Custom GLSL Shaders
+
+```javascript
+BABYLON.Effect.ShadersStore["colorCycleVertexShader"] = `
+  precision highp float;
+  attribute vec3 position;
+  attribute vec2 uv;
+  uniform mat4 worldViewProjection;
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = worldViewProjection * vec4(position, 1.0);
+  }
+`;
+
+BABYLON.Effect.ShadersStore["colorCycleFragmentShader"] = `
+  precision highp float;
+  varying vec2 vUv;
+  uniform float time;
+  uniform float hueShift;
+  vec3 hsl2rgb(float h, float s, float l) {
+    float c = (1.0 - abs(2.0 * l - 1.0)) * s;
+    float x = c * (1.0 - abs(mod(h / 60.0, 2.0) - 1.0));
+    float m = l - c / 2.0;
+    vec3 rgb;
+    if (h < 60.0)       rgb = vec3(c, x, 0.0);
+    else if (h < 120.0) rgb = vec3(x, c, 0.0);
+    else if (h < 180.0) rgb = vec3(0.0, c, x);
+    else if (h < 240.0) rgb = vec3(0.0, x, c);
+    else if (h < 300.0) rgb = vec3(x, 0.0, c);
+    else                rgb = vec3(c, 0.0, x);
+    return rgb + m;
+  }
+  void main() {
+    float hue = mod(hueShift + vUv.x * 120.0 + time * 30.0, 360.0);
+    vec3 color = hsl2rgb(hue, 0.8, 0.5 + sin(time + vUv.y * 6.28) * 0.15);
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
+
+const shaderMat = new BABYLON.ShaderMaterial("colorCycle", scene, "colorCycle", {
+  attributes: ["position", "uv"],
+  uniforms: ["worldViewProjection", "time", "hueShift"],
+});
+shaderMat.setFloat("hueShift", 0);
+
+// Update uniforms each frame
+const startTime = performance.now();
+scene.onBeforeRenderObservable.add(() => {
+  shaderMat.setFloat("time", (performance.now() - startTime) / 1000);
+});
+```
+
+---
+
+## Controller & Hand Tracking
+
+### Motion Controllers
+
+```javascript
+const xrInput = xrHelper.input;
+
+xrInput.onControllerAddedObservable.add((controller) => {
+  controller.onMotionControllerInitObservable.add((motionController) => {
+    const triggerComponent = motionController.getComponent(BABYLON.WebXRControllerComponent.TRIGGER_TYPE);
+    if (triggerComponent) {
+      triggerComponent.onButtonStateChangedObservable.add((component) => {
+        if (component.pressed) {
+          console.log("Trigger pressed on", motionController.handedness);
+        }
+      });
+    }
+
+    // Controller mesh position/rotation
+    const grip = controller.grip; // the physical grip space
+    // grip.position, grip.rotationQuaternion update every frame
+  });
+});
+```
+
+### Hand Tracking
+
+```javascript
+const handTracking = xrHelper.featuresManager.enableFeature(BABYLON.WebXRHandTracking, "latest", { xrInput: xrHelper.input });
+
+handTracking.onHandAddedObservable.add((hand) => {
+  // Get index fingertip position every frame
+  scene.onBeforeRenderObservable.add(() => {
+    const tip = hand.getJointMesh(BABYLON.WebXRHandJoint.INDEX_FINGER_TIP);
+    if (tip) {
+      // tip.position is the world-space fingertip position
+    }
+  });
+});
+```
+
+---
+
+## Materials & PBR
+
+```javascript
+// Standard PBR material
+const pbr = new BABYLON.PBRMaterial("pbr", scene);
+pbr.albedoColor = new BABYLON.Color3(0.2, 0.6, 1.0);
+pbr.metallic = 0.8;
+pbr.roughness = 0.2;
+
+// Emissive glow
+pbr.emissiveColor = new BABYLON.Color3(0.1, 0.4, 0.9);
+pbr.emissiveIntensity = 1.5;
+
+// Glass
+const glass = new BABYLON.PBRMaterial("glass", scene);
+glass.alpha = 0.3;
+glass.metallic = 0;
+glass.roughness = 0;
+glass.subSurface.isRefractionEnabled = true;
+glass.subSurface.refractionIntensity = 0.8;
+
+// Unlit (good for AR overlays — no lighting calculation)
+const unlit = new BABYLON.StandardMaterial("unlit", scene);
+unlit.emissiveColor = new BABYLON.Color3(1, 0.5, 0);
+unlit.disableLighting = true;
+```
+
+---
+
+## Performance in VR
+
+- Target **72 fps on Quest** — keep draw calls under ~100 per frame
+- Use `mesh.freezeWorldMatrix()` for any mesh that never moves
+- Use `scene.freezeMaterials()` after all materials are set up
+- Prefer `SolidParticleSystem` over individual meshes for 100+ repeated objects
+- Use `BABYLON.InstancedMesh` for identical geometry:
+
+```javascript
+const source = BABYLON.MeshBuilder.CreateSphere("source", { diameter: 0.1 }, scene);
+source.isVisible = false;
+
+for (let i = 0; i < 200; i++) {
+  const instance = source.createInstance(`orb_${i}`);
+  instance.position.set((Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10);
+}
+```
+
+---
+
+## Common Gotchas
+
+- **Import from `@babylonjs/core`, not `babylonjs`** — the legacy `babylonjs` package times out on esm.sh; the scoped package resolves correctly. `import * as BABYLON from "@babylonjs/core"` gives the same `BABYLON.*` namespace.
+- **`createDefaultXRExperienceAsync` is async** — always `await` it or chain `.then()`. Calling it without await silently skips XR setup.
+- **AR requires HTTPS** — `localhost` works for dev; plain `http://` will fail on device.
+- **Quest AR setting** — `immersive-ar` may require "WebXR Passthrough" enabled in Quest Browser settings (about://flags).
+- **Apple Vision Pro** — `immersive-vr` works via visionOS Safari WebXR; AR passthrough is not yet available.
+- **Always call `engine.resize()`** on window resize AND when XR display geometry changes.
+- **`rotationQuaternion` vs `rotation`** — once Babylon sets `rotationQuaternion` on a mesh (e.g. via XR tracking), `rotation` is ignored. Use `rotationQuaternion` consistently.
+- **Dispose properly** — call `scene.dispose()` and `engine.dispose()` on React component unmount to prevent memory leaks.
+
+---
+
+## Real-World Example 1: VR Generative Art — Particle Galaxy
+
+A floating galaxy of 2000 particles with a custom-shader core sphere, navigable in VR. Session data stored in Fireproof.
+
+```javascript
+import * as BABYLON from "@babylonjs/core";
+import React, { useEffect, useRef } from "react";
+import { useFireproof } from "use-fireproof";
+
+// ── Pure Babylon functions (no React, no Fireproof) ────────────────────────
+
+function buildScene(canvas) {
+  const engine = new BABYLON.Engine(canvas, true);
+  const scene = new BABYLON.Scene(engine);
+  scene.clearColor = new BABYLON.Color4(0, 0, 0.02, 1);
+
+  const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.7, -8), scene);
+  camera.setTarget(BABYLON.Vector3.Zero());
+  camera.attachControl(canvas, true);
+
+  new BABYLON.HemisphericLight("amb", new BABYLON.Vector3(0, 1, 0), scene).intensity = 0.1;
+
+  engine.runRenderLoop(() => scene.render());
+  return { engine, scene };
+}
+
+function buildGalaxy(scene) {
+  const galaxy = new BABYLON.ParticleSystem("galaxy", 2000, scene);
+  galaxy.particleTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/flare.png", scene);
+  galaxy.emitter = new BABYLON.Vector3(0, 0, 0);
+  galaxy.minEmitBox = new BABYLON.Vector3(-6, -0.5, -6);
+  galaxy.maxEmitBox = new BABYLON.Vector3(6, 0.5, 6);
+  galaxy.color1 = new BABYLON.Color4(0.4, 0.7, 1, 1);
+  galaxy.color2 = new BABYLON.Color4(1, 0.4, 0.8, 0.6);
+  galaxy.colorDead = new BABYLON.Color4(0, 0, 0, 0);
+  galaxy.minSize = 0.03;
+  galaxy.maxSize = 0.12;
+  galaxy.minLifeTime = 4;
+  galaxy.maxLifeTime = 10;
+  galaxy.emitRate = 80;
+  galaxy.blendMode = BABYLON.ParticleSystem.BLENDMODE_ADD;
+  galaxy.gravity = new BABYLON.Vector3(0, 0, 0);
+  galaxy.minAngularSpeed = -0.5;
+  galaxy.maxAngularSpeed = 0.5;
+  galaxy.start();
+  return galaxy;
+}
+
+function buildCoreShader(scene) {
+  if (!BABYLON.Effect.ShadersStore["galaxyCoreVertexShader"]) {
+    BABYLON.Effect.ShadersStore["galaxyCoreVertexShader"] = `
+    precision highp float;
+    attribute vec3 position; attribute vec2 uv;
+    uniform mat4 worldViewProjection;
+    varying vec2 vUv;
+    void main() { vUv = uv; gl_Position = worldViewProjection * vec4(position, 1.0); }
+  `;
+    BABYLON.Effect.ShadersStore["galaxyCoreFragmentShader"] = `
+    precision highp float;
+    varying vec2 vUv; uniform float time;
+    void main() {
+      vec2 p = vUv - 0.5;
+      float r = length(p);
+      float glow = 0.05 / max(r, 0.01);
+      float hue = mod(atan(p.y, p.x) / 6.283 + time * 0.1, 1.0) * 360.0;
+      float c = mod(hue / 60.0, 2.0) - 1.0;
+      vec3 col = vec3(
+        step(hue, 60.0) * (1.0 - abs(c)) + step(300.0, hue),
+        step(60.0, hue) * step(hue, 180.0) * (1.0 - abs(mod(hue / 60.0, 2.0) - 1.0)),
+        step(180.0, hue) * step(hue, 300.0) * (1.0 - abs(mod(hue / 60.0, 2.0) - 1.0))
+      );
+      gl_FragColor = vec4(col * glow * 2.0, min(glow, 1.0));
+    }
+  `;
+  }
+  const mat = new BABYLON.ShaderMaterial("galaxyCore", scene, "galaxyCore", {
+    attributes: ["position", "uv"],
+    uniforms: ["worldViewProjection", "time"],
+  });
+  mat.backFaceCulling = false;
+  mat.alphaMode = BABYLON.Constants.ALPHA_ADD;
+
+  const sphere = BABYLON.MeshBuilder.CreateSphere("core", { diameter: 1.5, segments: 32 }, scene);
+  sphere.material = mat;
+
+  const t0 = performance.now();
+  scene.onBeforeRenderObservable.add(() => {
+    mat.setFloat("time", (performance.now() - t0) / 1000);
+  });
+  return sphere;
+}
+
+async function enableVR(scene) {
+  const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 20, height: 20 }, scene);
+  ground.isVisible = false;
+  return scene.createDefaultXRExperienceAsync({ floorMeshes: [ground] });
+}
+
+// ── React container component ──────────────────────────────────────────────
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("galaxy-sessions");
+  const canvasRef = useRef(null);
+  const { docs: sessions } = useLiveQuery("type", { key: "session" });
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const { engine, scene } = buildScene(canvasRef.current);
+    const onResize = () => engine.resize();
+    window.addEventListener("resize", onResize);
+    buildGalaxy(scene);
+    buildCoreShader(scene);
+    enableVR(scene).then(() => {
+      database.put({ type: "session", startedAt: Date.now() });
+    });
+    return () => {
+      window.removeEventListener("resize", onResize);
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []);
+
+  return (
+    <div className="relative w-full h-screen bg-black">
+      <canvas ref={canvasRef} className="w-full h-full" />
+      <div className="absolute top-4 left-4 text-white text-sm opacity-70">Sessions: {sessions.length}</div>
+    </div>
+  );
+}
+```
+
+---
+
+## Real-World Example 2: AR Passthrough — Tap to Place Glowing Orbs
+
+Tap a real-world surface to plant a pulsing orb anchored in place. Orb positions are stored in Fireproof so they survive page reload.
+
+On devices without AR support (desktop, unsupported browsers) the app automatically enters **fixture mode**: a background photo stands in for the passthrough feed, and mouse clicks place orbs via ray-picking. The 3D scene is identical in both modes — only the background source differs.
+
+```javascript
+import * as BABYLON from "@babylonjs/core";
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+
+const FIXTURE_BG = "https://picsum.photos/seed/indoor-room/1456/816";
+
+// ── Pure Babylon functions ─────────────────────────────────────────────────
+
+// Always alpha:true so orbs composite over AR passthrough or fixture img
+function buildScene(canvas) {
+  const engine = new BABYLON.Engine(canvas, true, { alpha: true });
+  const scene = new BABYLON.Scene(engine);
+  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+
+  const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.6, 0), scene);
+  camera.minZ = 0.01;
+  camera.setTarget(new BABYLON.Vector3(0, 1.6, 3));
+
+  engine.runRenderLoop(() => scene.render());
+  return { engine, scene, camera };
+}
+
+function makeOrbMaterial(scene) {
+  if (!BABYLON.Effect.ShadersStore["orbVertexShader"]) {
+    BABYLON.Effect.ShadersStore["orbVertexShader"] = `
+      precision highp float;
+      attribute vec3 position; attribute vec2 uv;
+      uniform mat4 worldViewProjection;
+      varying vec2 vUv;
+      void main() { vUv = uv; gl_Position = worldViewProjection * vec4(position, 1.0); }
+    `;
+    BABYLON.Effect.ShadersStore["orbFragmentShader"] = `
+      precision highp float;
+      varying vec2 vUv; uniform float time; uniform vec3 baseColor;
+      void main() {
+        vec2 p = vUv - 0.5;
+        float r = length(p);
+        float rim = smoothstep(0.5, 0.35, r) - smoothstep(0.35, 0.2, r);
+        float core = smoothstep(0.2, 0.0, r);
+        float pulse = 0.7 + 0.3 * sin(time * 3.0);
+        vec3 col = baseColor * (rim * 0.6 + core * 2.0) * pulse;
+        gl_FragColor = vec4(col, (rim + core) * 0.9);
+      }
+    `;
+  }
+  const mat = new BABYLON.ShaderMaterial("orb", scene, "orb", {
+    attributes: ["position", "uv"],
+    uniforms: ["worldViewProjection", "time", "baseColor"],
+  });
+  mat.backFaceCulling = false;
+  mat.alphaMode = BABYLON.Constants.ALPHA_ADD;
+  return mat;
+}
+
+function spawnOrb(scene, position, orbMat) {
+  const mesh = BABYLON.MeshBuilder.CreateSphere("orb", { diameter: 0.15, segments: 16 }, scene);
+  mesh.position.copyFrom(position);
+  const mat = orbMat.clone("orbInst_" + Date.now());
+  const hue = Math.random();
+  mat.setVector3("baseColor", new BABYLON.Vector3(hue, 0.5, 1 - hue));
+  mesh.material = mat;
+  return mesh;
+}
+
+// Fixture mode: ray-pick through mouse click, place orb 3m along ray
+function enableFixtureClicks(scene, camera, onPlace) {
+  scene.onPointerObservable.add((pointerInfo) => {
+    if (pointerInfo.type !== BABYLON.PointerEventTypes.POINTERDOWN) return;
+    const ray = scene.createPickingRay(scene.pointerX, scene.pointerY, BABYLON.Matrix.Identity(), camera);
+    onPlace(ray.origin.add(ray.direction.scale(3)));
+  });
+}
+
+async function enableAR(scene, onPlace) {
+  const xrHelper = await scene.createDefaultXRExperienceAsync({
+    uiOptions: { sessionMode: "immersive-ar", referenceSpaceType: "local-floor" },
+    optionalFeatures: true,
+  });
+
+  const hitTest = xrHelper.featuresManager.enableFeature(BABYLON.WebXRHitTest, "latest");
+
+  const indicator = BABYLON.MeshBuilder.CreateTorus("indicator", { diameter: 0.25, thickness: 0.008, tessellation: 32 }, scene);
+  const indicatorMat = new BABYLON.StandardMaterial("indMat", scene);
+  indicatorMat.emissiveColor = new BABYLON.Color3(0.4, 1, 0.8);
+  indicatorMat.disableLighting = true;
+  indicator.material = indicatorMat;
+  indicator.isVisible = false;
+
+  let latestHit = null;
+  hitTest.onHitTestResultObservable.add((results) => {
+    if (results.length > 0) {
+      indicator.isVisible = true;
+      latestHit = results[0];
+      results[0].transformationMatrix.decompose(
+        undefined,
+        indicator.rotationQuaternion || (indicator.rotationQuaternion = new BABYLON.Quaternion()),
+        indicator.position
+      );
+    } else {
+      indicator.isVisible = false;
+      latestHit = null;
+    }
+  });
+
+  scene.onPointerObservable.add((pointerInfo) => {
+    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN && latestHit) {
+      onPlace(indicator.position.clone());
+    }
+  });
+
+  return xrHelper;
+}
+
+// ── React container ────────────────────────────────────────────────────────
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("ar-orbs");
+  const canvasRef = useRef(null);
+  const sceneRef = useRef(null);
+  const orbMatRef = useRef(null);
+  const spawnedIdsRef = useRef(new Set());
+  const [orbCount, setOrbCount] = useState(0);
+  const [mode, setMode] = useState("checking"); // checking | ar | fixture
+  const [arError, setArError] = useState(null);
+  const { docs: savedOrbs } = useLiveQuery("type", { key: "orb" });
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    let engine, scene, camera;
+
+    const onResize = () => engine?.resize();
+    window.addEventListener("resize", onResize);
+
+    async function init() {
+      const arSupported = await navigator.xr?.isSessionSupported("immersive-ar").catch(() => false);
+      ({ engine, scene, camera } = buildScene(canvasRef.current));
+      sceneRef.current = scene;
+      orbMatRef.current = makeOrbMaterial(scene);
+
+      const t0 = performance.now();
+      scene.onBeforeRenderObservable.add(() => {
+        const t = (performance.now() - t0) / 1000;
+        scene.meshes.forEach((m) => {
+          if (m.material?.getClassName?.() === "ShaderMaterial" && m.name.startsWith("orb")) {
+            m.material.setFloat("time", t);
+          }
+        });
+      });
+
+      const handlePlace = async (pos) => {
+        spawnOrb(scene, pos, orbMatRef.current);
+        setOrbCount((n) => n + 1);
+        const { id } = await database.put({ type: "orb", x: pos.x, y: pos.y, z: pos.z, ts: Date.now() });
+        spawnedIdsRef.current.add(id);
+      };
+
+      if (arSupported) {
+        setMode("ar");
+        try {
+          await enableAR(scene, handlePlace);
+        } catch (e) {
+          setArError(e?.message ?? String(e));
+        }
+      } else {
+        setMode("fixture");
+        enableFixtureClicks(scene, camera, handlePlace);
+      }
+    }
+
+    init();
+    return () => {
+      window.removeEventListener("resize", onResize);
+      scene?.dispose();
+      engine?.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!sceneRef.current || !orbMatRef.current || savedOrbs.length === 0) return;
+    savedOrbs.forEach((doc) => {
+      if (spawnedIdsRef.current.has(doc._id)) return;
+      spawnedIdsRef.current.add(doc._id);
+      spawnOrb(sceneRef.current, new BABYLON.Vector3(doc.x, doc.y, doc.z), orbMatRef.current);
+    });
+  }, [savedOrbs.length]);
+
+  return (
+    <div className="relative w-full h-screen overflow-hidden">
+      {mode === "fixture" && <img src={FIXTURE_BG} className="absolute inset-0 w-full h-full object-cover" alt="" />}
+      <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ background: "transparent" }} />
+      <div className="absolute top-4 left-4 bg-black/40 text-white px-3 py-2 rounded-lg text-sm">
+        {mode === "checking" && "Checking AR support…"}
+        {mode === "ar" && `Tap a surface to place an orb · ${orbCount} placed`}
+        {mode === "fixture" && `Desktop preview — click to place orbs · ${orbCount} placed`}
+      </div>
+      {arError && (
+        <div className="absolute bottom-4 left-4 right-4 bg-red-900/80 text-white px-3 py-2 rounded-lg text-sm">
+          AR error: {arError}
+        </div>
+      )}
+    </div>
+  );
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "2.2.17",
+  "version": "2.2.19",
   "type": "module",
   "main": "./index.js",
   "description": "",
@@ -30,8 +30,8 @@
     "@fireproof/core-types-base": "~0.24.19",
     "@fireproof/core-types-protocols-cloud": "~0.24.19",
     "@fireproof/use-fireproof": "~0.24.19",
-    "@vibes.diy/call-ai-v2": "^2.2.17",
-    "@vibes.diy/use-vibes-types": "^2.2.17",
+    "@vibes.diy/call-ai-v2": "^2.2.19",
+    "@vibes.diy/use-vibes-types": "^2.2.19",
     "arktype": "~2.2.0",
     "json-schema-faker": "~0.6.1"
   },

package/prompts.d.ts

@@ -38,11 +38,11 @@ export declare const preAllocSchema: {
         };
         readonly iconDescription: {
             readonly type: "string";
-            readonly description: "A short, vivid one-line description of what an icon for this app should depict \u2014 what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing \u2014 those are added separately by the renderer.";
+            readonly description: "A short, vivid one-line description of what an icon for this app should depict — what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing — those are added separately by the renderer.";
         };
         readonly theme: {
             readonly type: "string";
-            readonly description: "Theme slug from the theme catalog above. Pick the one whose mood best fits the app \u2014 playful apps lean playful themes, focus/utility apps lean clean themes, retro apps lean retro themes, etc. Always pick something rather than leaving empty; the catalog is broad enough to cover most app moods. Only omit if the request is so abstract that every theme would feel arbitrary.";
+            readonly description: "Theme slug from the theme catalog above. Pick the one whose mood best fits the app — playful apps lean playful themes, focus/utility apps lean clean themes, retro apps lean retro themes, etc. Always pick something rather than leaving empty; the catalog is broad enough to cover most app moods. Only omit if the request is so abstract that every theme would feel arbitrary.";
         };
         readonly enrichedPrompt: {
             readonly type: "string";

package/system-prompt.md

@@ -9,7 +9,7 @@ You are an AI assistant tasked with creating React components. You should create
 - Avoid using external libraries unless they are essential for the component to function
 - Always use ES module imports at the top of the file (e.g. `import React, { useState } from "react"`). Never reference React or other libraries as globals.
 - Your file MUST use `export default function App()` — the runtime loads it as an ES module and imports the default export.
-- Structure your component code in this order: (1) hooks and document shapes, (2) event handlers, (3) classNames object, (4) JSX return. ClassNames go right before JSX so they are close to where they are used.
+- Structure your component code in this order: (1) hooks and document shapes, (2) event handlers, (3) classNames object, (4) JSX return. ClassNames go right before JSX so they are close to where they are used. Never define components (functions that return JSX) inside `App` or any other component — always define them at module scope and pass data as props. Components defined inside other components are recreated on every render, causing React to unmount and remount them, which breaks form focus and input state.
 - Use Fireproof for data persistence
 - Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
 - Always show loading states during any async operation (callAI, fetch, database queries): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`