@vibes.diy/prompts 2.6.3 → 2.6.5

package/json-docs.d.ts

@@ -6,6 +6,7 @@ export interface JsonDoc<T = LlmConfig> {
 }
 export interface JsonDocs {
     "callai.json": JsonDoc;
+    "create-vibe.json": JsonDoc;
     "d3.json": JsonDoc;
     "fireproof.json": JsonDoc;
     "image-gen.json": JsonDoc;

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;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"}
+{"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;AAyB7C,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/create-vibe.d.ts

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

package/llms/create-vibe.js

@@ -0,0 +1,8 @@
+export const createVibeConfig = {
+    name: "create-vibe",
+    label: "createVibe",
+    description: "Hand off to the builder to generate a second, personalized vibe (interviewer / meta-vibes)",
+    importModule: "use-vibes",
+    importName: "createVibe",
+};
+//# sourceMappingURL=create-vibe.js.map

package/llms/create-vibe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-vibe.js","sourceRoot":"","sources":["../../jsr/llms/create-vibe.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,4FAA4F;IACzG,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,YAAY;CACzB,CAAC"}

package/llms/create-vibe.md

@@ -0,0 +1,146 @@
+# createVibe — meta-vibes (a vibe that builds another vibe)
+
+`createVibe(prompt)` hands off to the Vibes builder to generate a **new,
+personalized vibe** from a prompt you construct at runtime. It is the primitive
+behind **meta-vibes**: a vibe whose output is *another* vibe.
+
+The motivating shape is an **interviewer vibe**. The first vibe is *process* — it
+runs a short, adaptive conversation (often with `callAI`) to gather what it needs.
+When it has enough, it calls `createVibe(richPrompt)` with a fully-specified,
+opinionated prompt built from the answers. The user lands in a second vibe that is
+**personalized from birth** — a pitch deck that already knows their company, a
+course outline already filled with their topic, a workout plan already matching
+their goals — instead of a blank generic tool.
+
+Use this skill only when the app's job is to *produce another app*. A normal app
+that just stores and shows data does not need it.
+
+## The one rule: call it from a click
+
+`createVibe()` opens the builder in a **new tab**, leaving the interviewer open
+behind it. Browsers only allow opening a tab from inside a real user gesture, so
+**always call `createVibe()` from an `onClick` (or other direct interaction)** —
+never automatically from an effect, a timer, or straight out of an async `callAI`
+resolution. Gate it behind an explicit "Create my ___" button the user presses
+when they're ready.
+
+```jsx
+import React from "react";
+import { createVibe } from "use-vibes";
+
+export default function App() {
+  const c = { btn: "min-h-[44px] px-5 rounded-xl bg-[#0f172a] text-white" };
+  // `ready` + `spec` come from the interview (see the full example below).
+  return (
+    <button
+      className={c.btn}
+      disabled={!ready}
+      onClick={() => createVibe(spec)}   // ← user gesture: the new tab is allowed
+    >
+      Create my pitch deck
+    </button>
+  );
+}
+```
+
+## Build a rich, opinionated prompt — not a one-liner
+
+The whole point is that the second vibe arrives already specific. Construct a
+detailed prompt from the interview: what to build, the sections/screens it needs,
+and the user's actual content baked in. Treat it like a brief you'd hand a
+designer, not a search query.
+
+```js
+const spec = `Build a pitch deck app for ${company}, a ${stage} startup in ${market}.
+Pre-populate these slides with the content below — do not leave them blank:
+1. Problem: ${problem}
+2. Solution: ${solution}
+3. Market size: ${marketSize}
+4. Team: ${team}
+5. The ask: ${ask}
+Let the user edit each slide inline and present full-screen.`;
+```
+
+## Full pattern — interview, then hand off
+
+```jsx
+import React from "react";
+import { callAI } from "call-ai";
+import { createVibe } from "use-vibes";
+
+export default function App() {
+  const [answers, setAnswers] = React.useState({});
+  const [spec, setSpec] = React.useState("");
+  const [building, setBuilding] = React.useState(false);
+
+  // ... interview UI fills `answers` via callAI-driven questions ...
+
+  async function finish() {
+    setBuilding(true);
+    try {
+      // Use callAI to turn the raw answers into a rich, opinionated brief.
+      const spec = await callAI(
+        `Write a detailed builder prompt for a pitch deck app, baking in: ${JSON.stringify(answers)}`
+      );
+      setSpec(spec);
+    } finally {
+      setBuilding(false);
+    }
+  }
+
+  const c = { btn: "min-h-[44px] px-5 rounded-xl bg-[#0f172a] text-white" };
+  return (
+    <main id="app">
+      {/* ...interview... */}
+      {!spec ? (
+        <button className={c.btn} disabled={building} onClick={finish}>
+          {building ? "Preparing…" : "I'm ready"}
+        </button>
+      ) : (
+        // Prompt is prepared; THIS click opens the builder (user gesture).
+        <button className={c.btn} onClick={() => createVibe(spec)}>
+          Create my pitch deck
+        </button>
+      )}
+    </main>
+  );
+}
+```
+
+Note the two-step flow: the async work (`callAI` building the brief) happens
+first, and the **final `createVibe()` runs in its own click**. Don't call
+`createVibe()` inside the `await` chain — by then the user's gesture has expired
+and the new tab will be blocked.
+
+## API
+
+- `createVibe(prompt)` → `Window | null`. Opens the builder in a new tab;
+  returns the opened window, or `null` if the popup was blocked. The builder
+  origin is chosen automatically — you don't pass one.
+- `buildCreateVibeUrl(prompt)` → `string`. The hand-off URL without navigating —
+  use it for a fallback link. **Import it alongside `createVibe`** —
+  `import { createVibe, buildCreateVibeUrl } from "use-vibes"` — it is not
+  included automatically.
+
+Very long prompts (a verbose brief over a few thousand characters) make a long
+URL; `createVibe()` warns in the console when it crosses a safe threshold but
+still proceeds. Keep the brief focused. If `createVibe()` returns `null` (popup
+blocked), offer a fallback link so the hand-off still works:
+
+```jsx
+import { createVibe, buildCreateVibeUrl } from "use-vibes";
+
+function HandoffButton({ spec }) {
+  const [blocked, setBlocked] = React.useState(false);
+  return blocked ? (
+    <a href={buildCreateVibeUrl(spec)} target="_blank" rel="noopener noreferrer">
+      Open the builder
+    </a>
+  ) : (
+    <button onClick={() => setBlocked(!createVibe(spec))}>Create my pitch deck</button>
+  );
+}
+```
+
+The hand-off always lands on the public vibes.diy builder (or, when the vibe is
+running under a PR preview, that preview). You don't choose the destination.

package/llms/index.d.ts

@@ -7,5 +7,6 @@ export { threeJsConfig } from "./three-js.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
 export { useVibeConfig } from "./use-vibe.js";
+export { createVibeConfig } from "./create-vibe.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, 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, import("./types.js").LlmConfig, import("./types.js").LlmConfig];

package/llms/index.js

@@ -7,6 +7,7 @@ import { threeJsConfig } from "./three-js.js";
 import { webxrConfig } from "./webxr.js";
 import { useViewerConfig } from "./use-viewer.js";
 import { useVibeConfig } from "./use-vibe.js";
+import { createVibeConfig } from "./create-vibe.js";
 export { callaiConfig } from "./callai.js";
 export { fireproofConfig } from "./fireproof.js";
 export { imageGenConfig } from "./image-gen.js";
@@ -16,6 +17,7 @@ export { threeJsConfig } from "./three-js.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
 export { useVibeConfig } from "./use-vibe.js";
+export { createVibeConfig } from "./create-vibe.js";
 export const allConfigs = [
     callaiConfig,
     imageGenConfig,
@@ -26,5 +28,6 @@ export const allConfigs = [
     webxrConfig,
     useViewerConfig,
     useVibeConfig,
+    createVibeConfig,
 ];
 //# 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,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,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;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;CACL,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;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,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;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIpD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;CACR,CAAC"}

package/llms/web-audio.md

@@ -4,6 +4,18 @@ Authoritative source: Issue #228 research threads — comments 3192681700, 31926
 
 > **Web Audio is a browser built-in.** Use `window.AudioContext` (with the
 > `window.webkitAudioContext` fallback) directly, gated on a user gesture as shown below.
+>
+> **iOS Safari: unlock audio synchronously inside the gesture.** WebKit requires
+> playback to *directly result* from a trusted handler (`pointerdown`, `touchend`,
+> `click`, `keydown`). Inside that handler you must, synchronously and before any
+> async work: create-or-resume the `AudioContext` **and start at least one real
+> sound** (a ~10ms blip at `gain ≈ 0.0001` is enough). A resume/start that runs
+> from a downstream `setTimeout`, `Promise.then`, `await`, `requestAnimationFrame`,
+> a React state-update→effect, a worker/scheduler task, or a media
+> `canplay`/`canplaythrough` callback **does not count** and will stay silent on
+> iOS. Once the context is `running`, all of those are fine for scheduling. iOS
+> also suspends audio after backgrounding/lock, so **re-check `audioCtx.state` on
+> every gesture** and resume again if needed. See the `unlockAudio()` gate in §1.
 
 ## 1) Fundamentals and Core Nodes
 
@@ -17,15 +29,40 @@ Authoritative source: Issue #228 research threads — comments 3192681700, 31926
 Examples
 
 ```js
-// 1) Context (user gesture required in many browsers)
-const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+// 1) Context + iOS-safe unlock gate.
+let audioCtx;
+function unlockAudio() {
+  audioCtx ||= new (window.AudioContext || window.webkitAudioContext)();
+  // Re-check every gesture — iOS suspends audio after backgrounding/lock.
+  if (audioCtx.state !== "running") {
+    audioCtx.resume();
+    // Start one real (silent) sound synchronously, inside the gesture, so WebKit
+    // actually unlocks output. This is the part a resume()-alone often misses.
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    gain.gain.value = 0.0001;
+    osc.connect(gain).connect(audioCtx.destination);
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.01);
+  }
+  return audioCtx;
+}
 
-// Start/resume only in direct response to a user gesture (e.g., a Play button)
-document.querySelector("#start-audio")?.addEventListener("click", async () => {
-  if (audioCtx.state !== "running") await audioCtx.resume();
-  // now safe to create/start nodes
+// Call unlockAudio() FIRST, synchronously, in a trusted gesture — before any
+// app/audio logic. After it returns, the context is running and timers,
+// requestAnimationFrame, sequencers, and workers are all safe to schedule with.
+document.querySelector("#start-audio")?.addEventListener("pointerdown", () => {
+  unlockAudio();
+  // now safe to create/start nodes, kick off the transport, etc.
 });
 
+// ✗ What breaks on iOS — the unlock does NOT count if audio first starts from a
+// downstream callback, because it no longer "directly results" from the gesture:
+//   el.addEventListener("click", () => requestAnimationFrame(() => audioCtx.resume()));  // risky
+//   setTimeout(...), Promise.then(...), await fetch(...), await import(...),
+//   a React state update then effect, a scheduler/task-queue callback, or a
+//   media canplay/canplaythrough callback — all too late. Unlock in the handler.
+
 // 2) Simple tone
 const osc = audioCtx.createOscillator();
 osc.type = "sine";
@@ -225,7 +262,12 @@ External sync and drift
 
 ## 5) Practical Notes
 
-- User gesture required to start/resume `AudioContext` and to access the mic.
+- User gesture required to start/resume `AudioContext` and to access the mic. On
+  iOS Safari the unlock must be **synchronous inside the gesture and start one
+  real sound** (the `unlockAudio()` gate in §1); a resume from a downstream
+  timer/promise/`await`/rAF/effect/media callback is too late. Re-check
+  `audioCtx.state` on every gesture, since iOS suspends audio after
+  backgrounding/lock.
 - Convolver IRs: host with CORS if cross‑origin; decode before use.
 - Latency budget: device `baseLatency` + your lookahead + any Worklet buffering.
 - Headphones recommended for monitoring to avoid acoustic feedback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "type": "module",
   "main": "./index.js",
   "description": "",
@@ -30,9 +30,9 @@
     "@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.6.3",
-    "@vibes.diy/identity": "^2.6.3",
-    "@vibes.diy/use-vibes-types": "^2.6.3",
+    "@vibes.diy/call-ai-v2": "^2.6.5",
+    "@vibes.diy/identity": "^2.6.5",
+    "@vibes.diy/use-vibes-types": "^2.6.5",
     "arktype": "~2.2.1",
     "json-schema-faker": "~0.6.2"
   },