@vibes.diy/prompts 14.1.1 → 14.1.3

package/llms/backend.js

@@ -1,6 +1,7 @@
 export const backendConfig = {
     name: "backend",
     label: "backend-js",
-    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules",
+    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules; sends a record on to another service through a Zapier Catch Hook when the person asks for Zapier",
+    cues: ["zapier", "catch hook"],
 };
 //# sourceMappingURL=backend.js.map

package/llms/backend.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,8LAA8L;CACjM,CAAC"}
+{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,gSAAgS;IAMlS,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;CAC/B,CAAC"}

package/llms/backend.md

@@ -231,12 +231,17 @@ const gh = await ctx.github.fetch("/repos/acme/site/issues", { method: "POST", b
   reads it unfiltered, anonymous callers included, and owes the authorization
   check itself. Nothing changes for writes, or for any lane or database you
   didn't name.
-- `ctx.secrets` carries the owner's per-vibe secrets, set in the vibe's settings
-  page or with `vibes-diy secrets set KEY`. Use it to verify inbound credentials —
-  a webhook's shared secret or token — or to authenticate outbound calls
-  (`Authorization: Bearer ${ctx.secrets.KEY}` to an admitted API). Never write a
-  value anywhere users can read it (a doc, a response body). Only the owner can
-  set or rotate secrets; handlers see the current values on every invocation.
+- `ctx.secrets` carries the **owner's own** per-vibe secrets, set in the vibe's
+  settings page or with `vibes-diy secrets set KEY`. Use it to verify inbound
+  credentials — a webhook's shared secret or token — or to authenticate outbound
+  calls to a service the owner holds a key for (`Authorization: Bearer
+  ${ctx.secrets.KEY}` to an admitted API). Never write a value anywhere users
+  can read it (a doc, a response body). Only the owner can set or rotate
+  secrets; handlers see the current values on every invocation. **A visitor's
+  own account (their GitHub, Threads, Instagram) is never a secret and never a
+  pasted token — it is a connection**: declare it in `config.connections`, let
+  the platform hold the credential, and read it through `@vibes.diy/social` or
+  `ctx.connections` (the `connections` skill).
 - **Make every outbound HTTP call with `ctx.fetch(...)`, never a bare `fetch(...)`.**
   It takes the same arguments as the web `fetch` and returns a `Response`. Why not
   bare `fetch`: a backend that exports a `fetch` handler creates a module-scoped
@@ -268,6 +273,45 @@ const gh = await ctx.github.fetch("/repos/acme/site/issues", { method: "POST", b
     CORS headers (`api.github.com` is seeded; additions are a PR to the platform
     repo).
 
+    **Sending a record to another service goes through Zapier.**
+    `hooks.zapier.com` is on that list for a `POST` to a Catch Hook, so an app can
+    hand a new record to any tool Zapier reaches — Clio, Slack, Google Sheets,
+    email — without holding that tool's credentials. The owner makes a Zap whose
+    trigger is "Webhooks by Zapier → Catch Hook", saves the hook URL as a secret
+    (`vibes-diy secrets set ZAPIER_HOOK_URL ...`), and the backend posts JSON to
+    `ctx.secrets.ZAPIER_HOOK_URL`. The URL **is** the credential: never write it
+    into a document or a response body. Treat any 2xx as accepted and mark the
+    record sent; on anything else **throw** — a handler that returns normally has
+    acknowledged the event, so the platform will not call it again for that write,
+    while a thrown `onChange` is re-delivered with backoff (a handful of tries over
+    a few minutes) and a run that never succeeds lands in the app's logs.
+
+    **Zapier is the last door, never the first.**
+    Reach for it only when the person names Zapier — a Zap, a Catch Hook, a hook URL
+    they already made — or when the destination has no other admitted door. A public
+    read, a CORS-open endpoint, the connected GitHub repo, or simply keeping the
+    record in this app and showing it on the owner's screen all come first, and a
+    record the app already holds needs no hook at all. On a build that was just made,
+    say what the app does on its own and leave the Zap as a next step the owner can
+    ask for.
+
+    ```js
+    export async function onChange(event, ctx) {
+      const doc = event.doc;
+      if (event.deleted || doc.type !== "intake" || doc.sentToZapier) return;
+      const res = await ctx.fetch(ctx.secrets.ZAPIER_HOOK_URL, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ type: doc.type, name: doc.name, email: doc.email }),
+      });
+      if (!res.ok) {
+        ctx.log("warn", "zapier hook refused", { status: res.status });
+        throw new Error(`zapier hook ${res.status}`); // re-delivered with backoff
+      }
+      await ctx.db.put({ ...doc, sentToZapier: true }, { db: event.dbName });
+    }
+    ```
+
   A call outside all three returns
   `403 {"vibesEgressDenied":true,"gate":"floor"|"owner-blocked"|"cors"|"read-rate"|"rate-limit","host":...}`,
   and `gate` says which lane refused: `cors` is a write or a credentialed call to

package/llms/connections.d.ts

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

package/llms/connections.js

@@ -0,0 +1,23 @@
+export const connectionsConfig = {
+    name: "connections",
+    label: "Connections",
+    description: "Connect a visitor's own GitHub, Threads or Instagram account with one click and read it from backend.js — config.connections, useConnection, @vibes.diy/social",
+    cues: [
+        "connect my",
+        "sign in with github",
+        "sign in with instagram",
+        "sign in with threads",
+        "my instagram",
+        "my threads",
+        "my github",
+        "my posts",
+        "my followers",
+        "social media login",
+        "instagram",
+        "threads",
+        "github account",
+    ],
+    importModule: "use-vibes",
+    importName: "useConnection",
+};
+//# sourceMappingURL=connections.js.map

package/llms/connections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connections.js","sourceRoot":"","sources":["../../jsr/llms/connections.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,aAAa;IACpB,WAAW,EACT,gKAAgK;IAClK,IAAI,EAAE;QACJ,YAAY;QACZ,qBAAqB;QACrB,wBAAwB;QACxB,sBAAsB;QACtB,cAAc;QACd,YAAY;QACZ,WAAW;QACX,UAAU;QACV,cAAc;QACd,oBAAoB;QACpB,WAAW;QACX,SAAS;QACT,gBAAgB;KACjB;IACD,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,eAAe;CAC5B,CAAC"}

package/llms/connections.md

@@ -0,0 +1,151 @@
+# Connections — a visitor's own account, spent by your app
+
+A **connection** lets a visitor link their own third-party account (GitHub,
+Threads, Instagram) to your app in one click, and lets your `backend.js` read
+from that account as them. The platform shows the consent screen, runs the
+sign-in, holds the credential, refreshes it, and warns the person before it
+expires. Your app contains **no** client id, secret, redirect route, token
+field, or refresh code.
+
+**A visitor's account is never a pasted token, a `ctx.secrets` value, or a
+document — the platform holds the credential and your code never sees it.**
+`ctx.secrets` is for the _owner's own_ API keys (a weather API, a webhook
+shared secret). Anything that belongs to the person using the app is a
+connection. Never render an input that asks for an access token, and never
+send anyone to a developer console to mint one — that is the flow this exists
+to replace.
+
+## When to use it — signal words
+
+"connect my Instagram", "sign in with GitHub", "my Threads posts", "show my
+profile from …", "which of my videos got the most likes", "my followers on …".
+A request that names one of the providers below and wants **their** data is a
+connection. A request for public data nobody has to log in for (a public feed,
+a public profile) is an ordinary `ctx.fetch` and needs no connection.
+
+## The three moving parts
+
+**Declare the provider in `config.connections`, render the Connect button from
+`useConnection`, and read the account through `@vibes.diy/social` or
+`ctx.connections` in `backend.js`.** All three, every time.
+
+### 1. Declare it — `backend.js`
+
+```js
+export const config = {
+  connections: [
+    {
+      provider: "instagram",
+      scopes: ["instagram_business_basic"],
+      why: "Rank your recent posts by likes and comments.",
+    },
+  ],
+};
+```
+
+`provider` and `scopes` are checked when the app is pushed; an unknown value
+refuses the push. `why` is **required** and is shown to the visitor verbatim on
+the consent card, quoted as the app's own words — write it for them ("Show your
+GitHub profile next to your entries."), never as a note to yourself.
+
+| provider    | scope                      | what it buys (read-only)                                    |
+| ----------- | -------------------------- | ----------------------------------------------------------- |
+| `github`    | `read:user`                | the account's profile (`github(ctx).me()`)                  |
+| `threads`   | `threads_basic`            | the account's profile and its own posts                     |
+| `instagram` | `instagram_business_basic` | the account's profile and its own media with like/comment counts |
+
+Every connection is **read-only today**: nothing posts, replies, or writes on
+the person's behalf, and there is no scope for that. Instagram views and plays
+(the `insights` edge) are not available yet either. Build the app around what
+the table gives you; do not add a token field for the rest.
+
+### 2. Ask for it — `App.jsx`
+
+```jsx
+import { useConnection } from "use-vibes";
+
+function ConnectInstagram() {
+  const { state, consented, accountLabel, link, refresh } = useConnection("instagram");
+  if (state === "pending") return null; // still resolving — never flash a Connect button
+  if (state === "absent" || !consented)
+    return <button onClick={link}>Connect Instagram</button>;
+  if (state === "dead") return <p>Your Instagram connection expired. Reconnect it in Settings.</p>;
+  return <p>Connected as {accountLabel}</p>;
+}
+```
+
+`useConnection(provider)` returns `state` (`pending` | `absent` | `live` |
+`expiring` | `dead`), `consented` (whether _this_ app has been approved — a
+`live` account with `consented: false` is a one-click ask, not a full
+sign-in), `accountLabel` and `expiresAt` for display, `link()` to open the
+platform's consent card, and `refresh()` to re-read. `link()` resolves when the
+flow **starts**, not when it finishes — poll `refresh()` a few times while the
+surface is visible if you want to react to completion. Disconnecting lives in
+the platform's Settings page, not in your app.
+
+### 3. Read it — `backend.js`
+
+```js
+import { instagram, connectionState } from "@vibes.diy/social";
+
+export async function fetch(request, ctx) {
+  const url = new URL(request.url);
+  if (url.pathname.endsWith("/top-posts")) {
+    const conn = await connectionState(ctx, "instagram");
+    if (conn.state !== "live") return Response.json({ connection: conn.state }, { status: 409 });
+    const ig = instagram(ctx);
+    const page = await ig.media({ limit: 50 });
+    const ranked = [...page.items].sort((a, b) => (b.likeCount ?? 0) - (a.likeCount ?? 0));
+    return Response.json({ posts: ranked.slice(0, 10) });
+  }
+  return new Response("not found", { status: 404 });
+}
+```
+
+`@vibes.diy/social` is the only import a `backend.js` can make. It wraps every
+provider call as a typed request with a typed response, so there is no
+`fields=` string to get wrong and no JSON key to guess:
+
+- `connectionState(ctx, provider)` → `{ state: "live" | "needs_consent" | "dead" | "error" }`.
+  Spends nothing. `needs_consent` means render the Connect button; `dead` means
+  tell the person to reconnect in Settings; `error` carries a `reason`.
+- `github(ctx).me()` → `{ id, login, name, bio, avatarUrl, htmlUrl }`.
+- `threads(ctx).me()` → `{ id, username }`; `threads(ctx).posts({ limit, cursor })` →
+  `{ items: [{ id, text, permalink, timestamp, mediaType }], cursor? }`.
+- `instagram(ctx).me()` → `{ id, username }`; `instagram(ctx).media({ limit, cursor })` →
+  `{ items: [{ id, caption, mediaType, permalink, timestamp, likeCount, commentsCount }], cursor? }`
+  (`likeCount` is `null` when the person hides likes, never `0`).
+
+Page with `cursor` until it is absent. A provider error surfaces as a thrown
+`ProviderResponseError` with `status`; a connection problem surfaces as a
+thrown error with `reason` (`needs_consent`, `connection_dead`,
+`provider_not_declared`, …) — branch on `reason`, never on the message text.
+
+Underneath the library sit the raw primitives, for a path the library does not
+wrap: `await ctx.connections.fetch(provider, path)` returns a normal `Response`
+with the credential attached by the platform, and
+`await ctx.connections.status(provider)` returns
+`{ state, consented, expiresAt?, accountLabel? }` without spending a call.
+
+**Whose account?** In a `fetch` handler it is the signed-in visitor who called
+the route; in `scheduled` it is the app owner's. A `scheduled` tick can only
+ever read the owner's connection — an app that ranks _each visitor's_ posts
+does that work in `fetch`, when they are there.
+
+## Ticks that have nothing to do
+
+**A `scheduled` handler that finds nothing to do says so with `ctx.log`, so an
+idle tick is never silent.** A tick that ranks posts every 15 minutes but has
+no connection yet should log `"instagram not connected, nothing to rank"` and
+return — 155 silent ticks look identical to 155 working ones, and nobody can
+tell the app is waiting.
+
+## What not to build
+
+- No token, API key, password or "paste your login" input, for any provider.
+- No `ctx.secrets.INSTAGRAM_TOKEN`-style keys for a visitor's account.
+- No OAuth redirect route, no `client_id`, no `refresh_access_token` loop —
+  the platform owns all of it.
+- No `Authorization: Bearer …` header built in app code; `ctx.connections`
+  attaches the credential.
+- No posting: `POST`/`PUT`/`DELETE` through `ctx.connections` is refused.

package/llms/index.d.ts

@@ -12,5 +12,6 @@ export { useViewerConfig } from "./use-viewer.js";
 export { useVibeConfig } from "./use-vibe.js";
 export { createVibeConfig } from "./create-vibe.js";
 export { accessConfig } from "./access.js";
+export { connectionsConfig } from "./connections.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, 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, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];

package/llms/index.js

@@ -12,6 +12,7 @@ import { useViewerConfig } from "./use-viewer.js";
 import { useVibeConfig } from "./use-vibe.js";
 import { createVibeConfig } from "./create-vibe.js";
 import { accessConfig } from "./access.js";
+import { connectionsConfig } from "./connections.js";
 export { backendConfig } from "./backend.js";
 export { calendarConfig } from "./calendar.js";
 export { callaiConfig } from "./callai.js";
@@ -26,6 +27,7 @@ export { useViewerConfig } from "./use-viewer.js";
 export { useVibeConfig } from "./use-vibe.js";
 export { createVibeConfig } from "./create-vibe.js";
 export { accessConfig } from "./access.js";
+export { connectionsConfig } from "./connections.js";
 export const allConfigs = [
     callaiConfig,
     imageGenConfig,
@@ -41,5 +43,6 @@ export const allConfigs = [
     backendConfig,
     calendarConfig,
     accessConfig,
+    connectionsConfig,
 ];
 //# 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,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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,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;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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,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;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;CACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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,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;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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,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;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,iBAAiB;CACT,CAAC"}

package/llms/three-js.md

@@ -361,12 +361,21 @@ function onPointerDown(event) {
 ## Importing three
 
 A bare package name at the top of the file resolves through the platform's esm.sh
-map, and a full esm.sh URL loads too — either form also works with
-`await import()`. The bare form follows whatever version the platform serves,
-which moves as esm.sh publishes; a version-pinned URL such as
+map, and a full esm.sh URL loads too. The bare form follows whatever version the
+platform serves, which moves as esm.sh publishes; a version-pinned URL such as
 `https://esm.sh/three@0.160.0` is the lever for holding a scene on one release of
 the library.
 
+`await import()` defers a library until it is needed. Give it a full esm.sh URL,
+which the browser resolves on its own — for a third-party library like three,
+that is the form that both resolves and defers.
+
+A bare specifier resolves through the page's import map, which carries the
+packages the platform serves plus the ones your files import at the top. So a
+bare name loads on demand for a platform package; for three, a name your file
+also imports at the top is already loaded by the time the call runs, and a name
+that appears only inside `await import()` has nothing to resolve through.
+
 ## Animation System
 
 ### Animation Mixer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.1.1",
+  "version": "14.1.3",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -34,9 +34,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.1.1",
-    "@vibes.diy/identity": "14.1.1",
-    "@vibes.diy/use-vibes-types": "14.1.1",
+    "@vibes.diy/call-ai-v2": "14.1.3",
+    "@vibes.diy/identity": "14.1.3",
+    "@vibes.diy/use-vibes-types": "14.1.3",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/system-prompt-initial-oneshot.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - 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 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.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - 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.
 - Use Fireproof for data persistence

package/system-prompt-initial.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - 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 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.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - 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.
 - Use Fireproof for data persistence

package/system-prompt.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - 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 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.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - 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. 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