@vibes.diy/prompts 0.1.1

package/llms/web-audio.json

@@ -0,0 +1,8 @@
+{
+  "name": "web-audio",
+  "label": "Web Audio API",
+  "module": "web-audio",
+  "description": "Web Audio fundamentals; echo/delay with effects in the feedback path; mic monitoring with a metronome; audio‑clock scheduling; timing design for multi‑channel drum machines and MIDI synths with accurate voice overlap.",
+  "importModule": "web-audio",
+  "importName": "WebAudioAPI"
+}

package/llms/web-audio.txt

@@ -0,0 +1,220 @@
+# Web Audio API: Fundamentals, Echo with FX-in-Feedback, Mic Monitoring + Metronome, and Timing Architecture
+
+Authoritative source: Issue #228 research threads — comments 3192681700, 3192696052, 3192806626.
+
+## 1) Fundamentals and Core Nodes
+
+- AudioContext — master interface and clock (`audioCtx.currentTime`). Resume on a user gesture.
+- OscillatorNode — synthesis; set `type` and `frequency`.
+- AudioBufferSourceNode — decoded-file playback; schedule with `.start(when, offset?, duration?)`.
+- GainNode — volume control and envelopes.
+- BiquadFilterNode — EQ/tonal shaping (`type`, `frequency`, `Q`, etc.).
+- AnalyserNode — FFT/time-domain visualization.
+
+Examples
+
+```js
+// 1) Context (user gesture required in many browsers)
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// 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
+});
+
+// 2) Simple tone
+const osc = audioCtx.createOscillator();
+osc.type = 'sine';
+osc.frequency.value = 440;
+osc.connect(audioCtx.destination);
+osc.start();
+osc.stop(audioCtx.currentTime + 1);
+
+// 3) Load/decode and play a file
+const buf = await fetch('/path/audio.mp3').then(r => r.arrayBuffer()).then(b => audioCtx.decodeAudioData(b));
+const src = audioCtx.createBufferSource();
+src.buffer = buf;
+src.connect(audioCtx.destination);
+src.start();
+
+// 4) Gain and Filter in series
+const gain = audioCtx.createGain();
+gain.gain.value = 0.5;
+const filter = audioCtx.createBiquadFilter();
+filter.type = 'lowpass';
+filter.frequency.value = 1000;
+osc.disconnect();
+osc.connect(filter).connect(gain).connect(audioCtx.destination);
+```
+
+Practical: clean up disconnected nodes; check browser support; use headphones to avoid feedback when monitoring.
+
+## 2) Echo/Delay with Effects Inside the Feedback Loop
+
+Graph (node names are exact):
+
+- Dry: `source → dryGain:GainNode → destination`
+- Wet: `source → delay:DelayNode → wetGain:GainNode → destination`
+- Feedback loop with FX: `delay → filter:BiquadFilterNode → distortion:WaveShaperNode → reverb:ConvolverNode → feedbackGain:GainNode → delay`
+
+Parameters to expose
+
+- `delay.delayTime` (s), `feedbackGain.gain` (0–1, keep < 1.0)
+- `filter.type`, `filter.frequency`
+- `distortion.curve` (Float32Array)
+- `convolver.buffer` (IR AudioBuffer)
+- `wetGain.gain`, `dryGain.gain`
+
+Notes: Prevent runaway by capping feedback below 1.0; `ConvolverNode` requires a loaded impulse response; zero-delay cycles are disallowed.
+
+```js
+const delay = audioCtx.createDelay(5.0);
+const feedbackGain = audioCtx.createGain();
+const filter = audioCtx.createBiquadFilter();
+const distortion = audioCtx.createWaveShaper();
+const reverb = audioCtx.createConvolver();
+const wetGain = audioCtx.createGain();
+const dryGain = audioCtx.createGain();
+
+delay.delayTime.value = 0.35;
+feedbackGain.gain.value = 0.5;      // < 1.0
+filter.type = 'lowpass';
+filter.frequency.value = 8000;
+// distortion.curve = yourFloat32Curve;
+// reverb.buffer = yourImpulseResponseAudioBuffer;
+wetGain.gain.value = 0.4;
+dryGain.gain.value = 1.0;
+
+// Dry and wet
+source.connect(dryGain).connect(audioCtx.destination);
+source.connect(delay);
+delay.connect(wetGain).connect(audioCtx.destination);
+
+// Feedback with FX
+delay.connect(filter);
+filter.connect(distortion);
+distortion.connect(reverb);
+reverb.connect(feedbackGain);
+feedbackGain.connect(delay);
+```
+
+Helper (load IR):
+
+```js
+async function loadImpulseResponse(url) {
+  const res = await fetch(url, { mode: 'cors' });
+  if (!res.ok) throw new Error(`Failed to fetch IR ${url}: ${res.status} ${res.statusText}`);
+  const ab = await res.arrayBuffer();
+  try {
+    return await audioCtx.decodeAudioData(ab);
+  } catch (err) {
+    console.error('decodeAudioData failed for IR', url, err);
+    throw err; // Surface decoding/CORS-related failures clearly
+  }
+}
+```
+
+## 3) Microphone Monitoring + Metronome Overlay
+
+Mic capture: request permission with `navigator.mediaDevices.getUserMedia({ audio: { echoCancellation, noiseSuppression, autoGainControl } })`. Create `MediaStreamAudioSourceNode` and route to a `GainNode` → destination.
+
+Metronome: synthesize a short click (e.g., square/sine burst through a gain envelope). Schedule by audio clock at `AudioContext.currentTime` with lookahead.
+
+Mix graph: `micGain + metronomeGain → master → destination`.
+
+```js
+const master = audioCtx.createGain();
+master.connect(audioCtx.destination);
+const micGain = audioCtx.createGain();
+const metronomeGain = audioCtx.createGain();
+micGain.connect(master);
+metronomeGain.connect(master);
+
+async function initMic() {
+  const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: false } });
+  const micSrc = audioCtx.createMediaStreamSource(stream);
+  micSrc.connect(micGain);
+}
+
+function scheduleClick(atTime, downbeat = false) {
+  const osc = audioCtx.createOscillator();
+  const env = audioCtx.createGain();
+  osc.type = 'square';
+  osc.frequency.setValueAtTime(downbeat ? 2000 : 1600, atTime);
+  env.gain.setValueAtTime(0.0001, atTime);
+  env.gain.exponentialRampToValueAtTime(1.0, atTime + 0.001);
+  env.gain.exponentialRampToValueAtTime(0.0001, atTime + 0.03);
+  osc.connect(env).connect(metronomeGain);
+  osc.start(atTime);
+  osc.stop(atTime + 0.05);
+  // Cleanup to avoid accumulating nodes during long sessions
+  osc.onended = () => {
+    try { osc.disconnect(); } catch {}
+    try { env.disconnect(); } catch {}
+  };
+}
+
+function startMetronome({ bpm = 120, beatsPerBar = 4 } = {}) {
+  const spb = 60 / bpm; // seconds per beat
+  let next = audioCtx.currentTime + 0.1;
+  let beat = 0;
+  const lookaheadMs = 25, ahead = 0.2;
+  const id = setInterval(() => {
+    while (next < audioCtx.currentTime + ahead) {
+      scheduleClick(next, beat % beatsPerBar === 0);
+      next += spb; beat = (beat + 1) % beatsPerBar;
+    }
+  }, lookaheadMs);
+  return () => clearInterval(id);
+}
+```
+
+Latency and safety: start/resume on user gesture; clean up per-tick nodes after `ended` to prevent buildup in long-running metronomes; use headphones while monitoring; mobile devices have higher base latency.
+
+## 4) Time Synchronization and Scheduling Model
+
+Clocks/time domains
+
+- Master: `AudioContext.currentTime` — sample-accurate; schedule everything on this timeline.
+- UI/high-res: `performance.now()` — for UI timers and Web MIDI timestamps.
+- Mapping: capture `(tPerf0 = performance.now(), tAudio0 = audioCtx.currentTime)`, convert MIDI/perf timestamps with `tAudio = tAudio0 + (timeStamp - tPerf0)/1000`.
+- Hints: `audioCtx.baseLatency`, `audioCtx.getOutputTimestamp?.()` — estimate DAC/output delay if aligning to “heard” time.
+
+Scheduling primitives
+
+- `AudioBufferSourceNode.start(when, offset?, duration?)` for one-shots/loops.
+- `AudioParam` automation (`setValueAtTime`, `linearRampToValueAtTime`, `setTargetAtTime`, `setValueCurveAtTime`).
+- Avoid `requestAnimationFrame`/`setTimeout` for timing; use an AudioWorklet for custom DSP/tight jitter when needed.
+
+Tempo transport and lookahead
+
+- Tempo mapping: `secondsPerBeat = 60 / bpm`; compute bars:beats:ticks → seconds on the audio clock (choose PPQ, e.g., 480/960).
+- Lookahead window: maintain ~50–200 ms rolling schedule; enqueue with absolute `when` times in audio seconds.
+
+Multi‑channel drum machine
+
+- Pre‑decode all samples; never decode on hit.
+- Per hit: create a fresh `AudioBufferSourceNode` and call `.start(when)`.
+- For phase‑aligned layers (kick+clap, etc.), schedule all sources with the same `when` to guarantee sample‑accurate overlap.
+- Routing: per‑track `GainNode`/optional FX → master bus; allow overlapping retriggers; compute flams as small `when` offsets.
+- Pattern changes: compute the next bar boundary on the audio clock and enqueue new pattern hits relative to that time.
+
+MIDI synth playback
+
+- Live input: map `MIDIMessageEvent.timeStamp` (perf.now domain) → audio clock as above; buffer a short lookahead (5–20 ms) to reduce jitter.
+- SMF playback: convert PPQ ticks using the tempo map; schedule noteOn/noteOff separately; sustain (CC64) defers noteOff until pedal release.
+- Voice management: one voice per active note; allow overlapping envelopes; define voice‑steal policy if a polyphony cap is hit.
+
+External sync and drift
+
+- For MIDI Clock/MTC, derive BPM/phase from incoming ticks, convert to audio time, and drive the transport. Correct small phase error between beats with bounded micro‑nudges—avoid discontinuities.
+
+## 5) Practical Notes
+
+- User gesture required to start/resume `AudioContext` and to access the mic.
+- 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.
+
+— End —

package/load-docs.d.ts

@@ -0,0 +1,5 @@
+import { CoerceURI, Result, loadAsset } from "@adviser/cement";
+export declare function loadDocs(localPath: string, fallBackUrl: CoerceURI, deps?: {
+    pathOps: import("@adviser/cement").PathOps;
+    loadAsset: typeof loadAsset;
+}): Promise<Result<string>>;

package/load-docs.js

@@ -0,0 +1,28 @@
+import { pathOps, loadAsset } from "@adviser/cement";
+function needLocalLlmPath(localPath, pathOpsRef = pathOps) {
+    const dirPart = pathOpsRef.dirname(localPath).replace(/^[./]+/, "");
+    if (dirPart.startsWith("llms") || localPath.startsWith("llms/")) {
+        return "";
+    }
+    return "llms";
+}
+export async function loadDocs(localPath, fallBackUrl, deps = { pathOps, loadAsset }) {
+    return deps.loadAsset(localPath, {
+        fallBackUrl,
+        basePath: () => import.meta.url,
+        pathCleaner: (base, localPath, mode) => {
+            switch (mode) {
+                case "normal": {
+                    const llmPath = needLocalLlmPath(localPath, deps.pathOps);
+                    if (llmPath === "") {
+                        return deps.pathOps.join(base, localPath);
+                    }
+                    return deps.pathOps.join(base, llmPath, localPath);
+                }
+                case "fallback":
+                    return localPath;
+            }
+        },
+    });
+}
+//# sourceMappingURL=load-docs.js.map

package/load-docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-docs.js","sourceRoot":"","sources":["../jsr/load-docs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAU,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAExE,SAAS,gBAAgB,CAAC,SAAiB,EAAE,UAAU,GAAG,OAAO,EAAU;IACzE,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACpE,IAAI,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QAChE,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC;AAAA,CACf;AAED,MAAM,CAAC,KAAK,UAAU,QAAQ,CAC5B,SAAiB,EACjB,WAAsB,EACtB,IAAI,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EACJ;IACzB,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;QAC/B,WAAW;QACX,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;QAC/B,WAAW,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;YACtC,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ,EAAE,CAAC;oBACd,MAAM,OAAO,GAAG,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;oBAC1D,IAAI,OAAO,KAAK,EAAE,EAAE,CAAC;wBAEnB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;oBAC5C,CAAC;oBACD,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC;gBACD,KAAK,UAAU;oBACb,OAAO,SAAS,CAAC;YACrB,CAAC;QAAA,CACF;KACF,CAAC,CAAC;AAAA,CACJ"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@vibes.diy/prompts",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "",
+  "keywords": [
+    "ai",
+    "dom",
+    "micro-app",
+    "generator",
+    "web",
+    "esm",
+    "typescript"
+  ],
+  "contributors": [
+    "J Chris Anderson",
+    "Meno Abels"
+  ],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@adviser/cement": "^0.4.30",
+    "@fireproof/core-types-base": "^0.23.13",
+    "call-ai": "^0.1.1",
+    "use-vibes": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@fireproof/core-cli": "^0.23.13",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.36.0"
+  },
+  "scripts": {
+    "build": "core-cli tsc",
+    "test": "vitest run"
+  }
+}

package/prompts.d.ts

@@ -0,0 +1,36 @@
+import { Mocks } from "call-ai";
+import type { HistoryMessage, UserSettings } from "./settings.js";
+import { CoerceURI } from "@adviser/cement";
+import { LlmCatalogEntry } from "./json-docs.js";
+export declare function defaultCodingModel(): Promise<string>;
+export declare function normalizeModelId(id: unknown): string | undefined;
+export declare function isPermittedModelId(id: unknown): id is string;
+export declare function resolveEffectiveModel(settingsDoc?: {
+    model?: string;
+}, vibeDoc?: {
+    selectedModel?: string;
+}): Promise<string>;
+export interface LlmSelectionDecisions {
+    selected: string[];
+    instructionalText: boolean;
+    demoData: boolean;
+}
+export interface LlmSelectionOptions {
+    readonly appMode?: "test" | "production";
+    readonly callAiEndpoint?: CoerceURI;
+    readonly fallBackUrl?: CoerceURI;
+    readonly getAuthToken?: () => Promise<string>;
+    readonly mock?: Mocks;
+}
+export type LlmSelectionWithFallbackUrl = Omit<Omit<LlmSelectionOptions, "fallBackUrl">, "callAiEndpoint"> & {
+    readonly fallBackUrl: CoerceURI;
+    readonly callAiEndpoint?: CoerceURI;
+};
+export declare function selectLlmsAndOptions(model: string, userPrompt: string, history: HistoryMessage[], iopts: LlmSelectionOptions): Promise<LlmSelectionDecisions>;
+export declare function generateImportStatements(llms: LlmCatalogEntry[]): string;
+export declare function makeBaseSystemPrompt(model: string, sessionDoc: Partial<UserSettings> & LlmSelectionOptions, onAiDecisions?: (decisions: {
+    selected: string[];
+}) => void): Promise<string>;
+export declare const RESPONSE_FORMAT: {
+    structure: string[];
+};

package/prompts.js

@@ -0,0 +1,307 @@
+import { callAI } from "call-ai";
+import { Lazy, runtimeFn, URI } from "@adviser/cement";
+import { getJsonDocs, getLlmCatalog, getLlmCatalogNames, } from "./json-docs.js";
+import { getDefaultDependencies } from "./catalog.js";
+import { getTexts } from "./txt-docs.js";
+export async function defaultCodingModel() {
+    return "anthropic/claude-sonnet-4";
+}
+function normalizeModelIdInternal(id) {
+    if (typeof id !== "string")
+        return undefined;
+    const trimmed = id.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+}
+export function normalizeModelId(id) {
+    return normalizeModelIdInternal(id);
+}
+export function isPermittedModelId(id) {
+    return typeof normalizeModelIdInternal(id) === "string";
+}
+export async function resolveEffectiveModel(settingsDoc, vibeDoc) {
+    const sessionChoice = normalizeModelIdInternal(vibeDoc?.selectedModel);
+    if (sessionChoice)
+        return sessionChoice;
+    const globalChoice = normalizeModelIdInternal(settingsDoc?.model);
+    if (globalChoice)
+        return globalChoice;
+    return defaultCodingModel();
+}
+function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+const llmImportRegexes = Lazy((fallBackUrl) => {
+    return getJsonDocs(fallBackUrl).then((docs) => Object.values(docs)
+        .map((d) => d.obj)
+        .filter((l) => l.importModule && l.importName)
+        .map((l) => {
+        const mod = escapeRegExp(l.importModule);
+        const name = escapeRegExp(l.importName);
+        const importType = l.importType || "named";
+        return {
+            name: l.name,
+            named: new RegExp(`import\\s*\\{[^}]*\\b${name}\\b[^}]*\\}\\s*from\\s*['\\"]${mod}['\\"]`),
+            def: new RegExp(`import\\s+${name}\\s+from\\s*['\\"]${mod}['\\"]`),
+            namespace: new RegExp(`import\\s*\\*\\s*as\\s+${name}\\s+from\\s*['\\"]${mod}['\\"]`),
+            importType,
+        };
+    }));
+});
+async function detectModulesInHistory(history, opts) {
+    const detected = new Set();
+    if (!Array.isArray(history))
+        return detected;
+    for (const msg of history) {
+        const content = msg?.content || "";
+        if (!content || typeof content !== "string")
+            continue;
+        for (const { name, named, def, namespace } of await llmImportRegexes(opts.fallBackUrl)) {
+            if (named.test(content) || def.test(content) || namespace.test(content)) {
+                detected.add(name);
+            }
+        }
+    }
+    return detected;
+}
+const warnOnce = Lazy(() => console.warn("auth_token is not support on node"));
+function defaultGetAuthToken(fn) {
+    if (typeof fn === "function") {
+        return () => fn();
+    }
+    const rn = runtimeFn();
+    if (rn.isBrowser) {
+        return () => Promise.resolve(localStorage.getItem("auth_token") || "");
+    }
+    return () => {
+        warnOnce();
+        return Promise.resolve("Unsupported.JWT-Token");
+    };
+}
+async function sleepReject(ms) {
+    return new Promise((_, rj) => setTimeout(rj, ms));
+}
+export async function selectLlmsAndOptions(model, userPrompt, history, iopts) {
+    const opts = {
+        appMode: "production",
+        ...iopts,
+        callAiEndpoint: iopts.callAiEndpoint ? iopts.callAiEndpoint : undefined,
+        fallBackUrl: URI.from(iopts.fallBackUrl ?? "https://esm.sh/use-vibes/prompt-catalog/llms").toString(),
+        getAuthToken: defaultGetAuthToken(iopts.getAuthToken),
+    };
+    const llmsCatalog = await getLlmCatalog(opts.fallBackUrl);
+    const catalog = llmsCatalog.map((l) => ({
+        name: l.name,
+        description: l.description || "",
+    }));
+    const payload = {
+        catalog,
+        userPrompt: userPrompt || "",
+        history: history || [],
+    };
+    const messages = [
+        {
+            role: "system",
+            content: 'You select which library modules from a catalog should be included AND whether to include instructional UI text and a demo-data button. First analyze if the user prompt describes specific look & feel requirements. For instructional text and demo data: include them only when asked for. Read the JSON payload and return JSON with properties: "selected" (array of catalog "name" strings), "instructionalText" (boolean), and "demoData" (boolean). Only choose modules from the catalog. Include any libraries already used in history. Respond with JSON only.',
+        },
+        { role: "user", content: JSON.stringify(payload) },
+    ];
+    const options = {
+        chatUrl: opts.callAiEndpoint
+            ? opts.callAiEndpoint.toString().replace(/\/+$/, "")
+            : undefined,
+        apiKey: "sk-vibes-proxy-managed",
+        model,
+        schema: {
+            name: "module_and_options_selection",
+            properties: {
+                selected: { type: "array", items: { type: "string" } },
+                instructionalText: { type: "boolean" },
+                demoData: { type: "boolean" },
+            },
+        },
+        max_tokens: 2000,
+        headers: {
+            "HTTP-Referer": "https://vibes.diy",
+            "X-Title": "Vibes DIY",
+            "X-VIBES-Token": await opts.getAuthToken?.(),
+        },
+        mock: opts.mock,
+    };
+    try {
+        const withTimeout = (p, ms = 4000) => Promise.race([
+            sleepReject(ms).then((val) => {
+                console.warn("Module/options selection: API call timed out after", ms, "ms");
+                return val;
+            }),
+            p
+                .then((val) => {
+                return val;
+            })
+                .catch((err) => {
+                console.warn("Module/options selection: API call failed with error:", err);
+                throw err;
+            }),
+        ]);
+        const raw = (await withTimeout(callCallAI(options)(messages, options)));
+        if (raw === undefined || raw === null) {
+            console.warn("Module/options selection: call-ai returned undefined with schema present");
+            console.warn("This is a known issue in the prompts package environment");
+            return { selected: [], instructionalText: true, demoData: true };
+        }
+        const parsed = JSON.parse(raw) ?? {};
+        const selected = Array.isArray(parsed?.selected)
+            ? parsed.selected.filter((v) => typeof v === "string")
+            : [];
+        const instructionalText = typeof parsed?.instructionalText === "boolean"
+            ? parsed.instructionalText
+            : true;
+        const demoData = typeof parsed?.demoData === "boolean" ? parsed.demoData : true;
+        return { selected, instructionalText, demoData };
+    }
+    catch (err) {
+        console.warn("Module/options selection call failed:", err);
+        return { selected: [], instructionalText: true, demoData: true };
+    }
+}
+function callCallAI(option) {
+    return option.mock?.callAI || callAI;
+}
+export function generateImportStatements(llms) {
+    const seen = new Set();
+    return llms
+        .slice()
+        .sort((a, b) => a.importModule.localeCompare(b.importModule))
+        .filter((l) => l.importModule && l.importName)
+        .filter((l) => {
+        const key = `${l.importModule}:${l.importName}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    })
+        .map((l) => {
+        const importType = l.importType || "named";
+        switch (importType) {
+            case "namespace":
+                return `\nimport * as ${l.importName} from "${l.importModule}"`;
+            case "default":
+                return `\nimport ${l.importName} from "${l.importModule}"`;
+            case "named":
+            default:
+                return `\nimport { ${l.importName} } from "${l.importModule}"`;
+        }
+    })
+        .join("");
+}
+export async function makeBaseSystemPrompt(model, sessionDoc, onAiDecisions) {
+    const userPrompt = sessionDoc?.userPrompt || "";
+    const history = Array.isArray(sessionDoc?.history)
+        ? sessionDoc.history
+        : [];
+    const useOverride = !!sessionDoc?.dependenciesUserOverride;
+    let selectedNames = [];
+    let includeInstructional = true;
+    let includeDemoData = true;
+    const llmsCatalog = await getLlmCatalog(sessionDoc.fallBackUrl);
+    const llmsCatalogNames = await getLlmCatalogNames(sessionDoc.fallBackUrl);
+    if (useOverride && Array.isArray(sessionDoc?.dependencies)) {
+        selectedNames = sessionDoc.dependencies
+            .filter((v) => typeof v === "string")
+            .filter((name) => llmsCatalogNames.has(name));
+    }
+    else {
+        const decisions = await selectLlmsAndOptions(model, userPrompt, history, sessionDoc);
+        includeInstructional = decisions.instructionalText;
+        includeDemoData = decisions.demoData;
+        const detected = await detectModulesInHistory(history, sessionDoc);
+        const finalNames = new Set([...decisions.selected, ...detected]);
+        selectedNames = Array.from(finalNames);
+        if (selectedNames.length === 0)
+            selectedNames = [...(await getDefaultDependencies())];
+        onAiDecisions?.({ selected: selectedNames });
+    }
+    if (typeof sessionDoc?.instructionalTextOverride === "boolean") {
+        includeInstructional = sessionDoc.instructionalTextOverride;
+    }
+    if (typeof sessionDoc?.demoDataOverride === "boolean") {
+        includeDemoData = sessionDoc.demoDataOverride;
+    }
+    const chosenLlms = llmsCatalog.filter((l) => selectedNames.includes(l.name));
+    let concatenatedLlmsTxt = "";
+    for (const llm of chosenLlms) {
+        const text = await getTexts(llm.name, sessionDoc.fallBackUrl);
+        if (!text) {
+            console.warn("Failed to load raw LLM text for:", llm.name, sessionDoc.fallBackUrl);
+            continue;
+        }
+        concatenatedLlmsTxt += `
+<${llm.label}-docs>
+${text || ""}
+</${llm.label}-docs>
+`;
+    }
+    const defaultStylePrompt = `Create a UI theme inspired by the Memphis Group and Studio Alchimia from the 1980s. Incorporate bold, playful geometric shapes (squiggles, triangles, circles), vibrant primary colors (red, blue, yellow) with contrasting pastels (pink, mint, lavender), and asymmetrical layouts. Use quirky patterns like polka dots, zigzags, and terrazzo textures. Ensure a retro-futuristic vibe with a mix of matte and glossy finishes, evoking a whimsical yet functional design. Secretly name the theme 'Memphis Alchemy' to reflect its roots in Ettore Sotsass’s vision and global 1980s influences. Make sure the app background has some kind of charming patterned background using memphis styled dots or squiggly lines. Use thick "neo-brutalism" style borders for style to enhance legibility. Make sure to retain high contrast in your use of colors. Light background are better than dark ones. Use these colors: #70d6ff #ff70a6 #ff9770 #ffd670 #e9ff70 #242424 #ffffff Never use white text.`;
+    const stylePrompt = sessionDoc?.stylePrompt || defaultStylePrompt;
+    const instructionalLine = includeInstructional
+        ? "- In the UI, include a vivid description of the app's purpose and detailed instructions how to use it, in italic text.\n"
+        : "";
+    const demoDataLines = includeDemoData
+        ? `- If your app has a function that uses callAI with a schema to save data, include a Demo Data button that calls that function with an example prompt. Don't write an extra function, use real app code so the data illustrates what it looks like to use the app.\n- Never have have an instance of callAI that is only used to generate demo data, always use the same calls that are triggered by user actions in the app.\n`
+        : "";
+    return `
+You are an AI assistant tasked with creating React components. You should create components that:
+- Use modern React practices and follow the rules of hooks
+- Don't use any TypeScript, just use JavaScript
+- Use Tailwind CSS for mobile-first accessible styling
+- Don't use words from the style prompt in your copy: ${stylePrompt}
+- For dynamic components, like autocomplete, don't use external libraries, implement your own
+- Avoid using external libraries unless they are essential for the component to function
+- Always import the libraries you need at the top of the file
+- Use Fireproof for data persistence
+- Use \`callAI\` to fetch AI (set \`stream: true\` to enable streaming), use Structured JSON Outputs like this: \`callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } })\` and save final responses as individual Fireproof documents.
+- For file uploads use drag and drop and store using the \`doc._files\` API
+- Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
+- Consider and potentially reuse/extend code from previous responses if relevant
+- Always output the full component code, keep the explanation short and concise
+- Never also output a small snippet to change, just the full component code
+- Keep your component file as short as possible for fast updates
+- Keep the database name stable as you edit the code
+- The system can send you crash reports, fix them by simplifying the affected code
+- If you get missing block errors, change the database name to a new name
+- List data items on the main page of your app so users don't have to hunt for them
+- If you save data, make sure it is browseable in the app, eg lists should be clickable for more details
+${instructionalLine}${demoDataLines}
+
+${concatenatedLlmsTxt}
+
+## ImgGen Component
+
+You should use this component in all cases where you need to generate or edit images. It is a React component that provides a UI for image generation and editing. Make sure to pass the database prop to the component. If you generate images, use a live query to list them (with type 'image') in the UI. The best usage is to save a document with a string field called \`prompt\` (which is sent to the generator) and an optional \`doc._files.original\` image and pass the \`doc._id\` to the component via the  \`_id\` prop. It will handle the rest.
+
+${userPrompt
+        ? `${userPrompt}
+
+`
+        : ""}IMPORTANT: You are working in one JavaScript file, use tailwind classes for styling. Remember to use brackets like bg-[#242424] for custom colors.
+
+Provide a title and brief explanation followed by the component code. The component should demonstrate proper Fireproof integration with real-time updates and proper data persistence. Follow it with a short description of the app's purpose and instructions how to use it (with occasional bold or italic for emphasis). Then suggest some additional features that could be added to the app.
+
+Begin the component with the import statements. Use react and the following libraries:
+
+\`\`\`js
+import React, { ... } from "react"${generateImportStatements(chosenLlms)}
+
+// other imports only when requested
+\`\`\`
+
+`;
+}
+export const RESPONSE_FORMAT = {
+    structure: [
+        "Brief explanation",
+        "Component code with proper Fireproof integration",
+        "Real-time updates",
+        "Data persistence",
+    ],
+};
+//# sourceMappingURL=prompts.js.map