@vibes.diy/prompts 2.2.12 → 2.2.13-dev.2

package/json-docs.d.ts

@@ -10,6 +10,7 @@ export interface JsonDocs {
     "fireproof.json": JsonDoc;
     "image-gen.json": JsonDoc;
     "three-js.json": JsonDoc;
+    "use-viewer.json": JsonDoc;
     "web-audio.json": JsonDoc;
     [key: string]: 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;AAsB7C,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;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"}

package/llms/index.d.ts

@@ -4,5 +4,6 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.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];
+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];

package/llms/index.js

@@ -4,11 +4,21 @@ import { imageGenConfig } from "./image-gen.js";
 import { webAudioConfig } from "./web-audio.js";
 import { d3Config } from "./d3.js";
 import { threeJsConfig } from "./three-js.js";
+import { useViewerConfig } from "./use-viewer.js";
 export { callaiConfig } from "./callai.js";
 export { fireproofConfig } from "./fireproof.js";
 export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
-export const allConfigs = [callaiConfig, imageGenConfig, webAudioConfig, d3Config, threeJsConfig, fireproofConfig];
+export { useViewerConfig } from "./use-viewer.js";
+export const allConfigs = [
+    callaiConfig,
+    imageGenConfig,
+    webAudioConfig,
+    d3Config,
+    threeJsConfig,
+    fireproofConfig,
+    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;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;AAI9C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,CAAU,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,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"}

package/llms/use-viewer.d.ts

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

package/llms/use-viewer.js

@@ -0,0 +1,9 @@
+export const useViewerConfig = {
+    name: "use-viewer",
+    label: "Viewer Identity",
+    module: "use-vibes",
+    description: "Get the current viewer's identity and capability gates",
+    importModule: "use-vibes",
+    importName: "useViewer",
+};
+//# sourceMappingURL=use-viewer.js.map

package/llms/use-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewer.js","sourceRoot":"","sources":["../../jsr/llms/use-viewer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,WAAW;IACnB,WAAW,EAAE,wDAAwD;IACrE,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/use-viewer.md

@@ -0,0 +1,107 @@
+# useViewer Hook
+
+Get the current viewer's identity and capabilities. Use it to render avatars, names, and gate UI on what the viewer can do.
+
+## Basic Usage
+
+```jsx
+import { useViewer } from "use-vibes";
+
+function App() {
+  const { viewer, can } = useViewer();
+  if (!viewer) return <p>Sign in to use this app.</p>;
+  return (
+    <header>
+      <img src={viewer.avatarUrl} alt={viewer.userSlug} />
+      <span>{viewer.displayName ?? viewer.userSlug}</span>
+    </header>
+  );
+}
+```
+
+## What you get
+
+- `viewer` — `{ userSlug, displayName?, avatarUrl }` or `null` for anonymous visitors. `avatarUrl` is a stable opaque URL — just use it in `<img src>`, don't construct it yourself.
+- `can(action, dbName?)` — `true`/`false` for `"read"`, `"write"`, `"delete"`. Pass a `dbName` for multi-db apps; omit for single-db apps. Use it to hide forms when the viewer can't post.
+
+## Gating UI
+
+```jsx
+function CommentForm() {
+  const { viewer, can } = useViewer();
+  if (!viewer) return <p>Sign in to comment.</p>;
+  if (!can("write", "comments")) return <p>Contact the owner to request write access so you can post.</p>;
+  return <form>...</form>;
+}
+```
+
+## Tagging content with the viewer (write/render pattern)
+
+When one user writes content others will see (comments, posts, messages), **stamp the viewer's identity onto the doc at write time**. Then any user can render the author info from the doc itself — no extra lookup. The `avatarUrl` is a stable indirection URL so it keeps working when the author later changes their avatar.
+
+```jsx
+import { useFireproof } from "use-fireproof";
+import { useViewer } from "use-vibes";
+
+function CommentThread() {
+  const { viewer, can } = useViewer();
+  const { useLiveQuery, database } = useFireproof("comments");
+  const { docs: comments } = useLiveQuery("createdAt");
+  const [body, setBody] = useState("");
+
+  async function post() {
+    if (!viewer || !body.trim()) return;
+    await database.put({
+      body: body.trim(),
+      createdAt: Date.now(),
+      // Stamp the viewer's identity at write time. Other users will
+      // render from these fields — no need to look anything up later.
+      authorUserSlug: viewer.userSlug,
+      authorDisplayName: viewer.displayName ?? viewer.userSlug,
+      authorAvatarUrl: viewer.avatarUrl,
+    });
+    setBody("");
+  }
+
+  return (
+    <div>
+      <ul>
+        {comments.map((c) => (
+          <li key={c._id}>
+            <img src={c.authorAvatarUrl} alt={c.authorUserSlug} className="avatar" />
+            <strong>{c.authorDisplayName}</strong>
+            <p>{c.body}</p>
+          </li>
+        ))}
+      </ul>
+
+      {!viewer ? (
+        <p>Sign in to comment.</p>
+      ) : !can("write", "comments") ? (
+        <p>Contact the owner to request write access so you can post.</p>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            post();
+          }}
+        >
+          <input value={body} onChange={(e) => setBody(e.target.value)} />
+          <button type="submit">Post</button>
+        </form>
+      )}
+    </div>
+  );
+}
+```
+
+Key points:
+
+- **Write-time stamping** — the doc carries the author info, not a foreign-key lookup. Old comments keep working even if the author later deletes their account.
+- **`avatarUrl` is stable** — if the author changes their avatar tomorrow, every historical comment shows the new image because the URL stays the same, the bytes change.
+- **One source of identity** — never store the viewer's user ID, only `userSlug` + `displayName` + `avatarUrl`. The trio is everything a renderer needs.
+
+## Notes
+
+- Never use Clerk user IDs. Only `userSlug` crosses into vibe code.
+- Avatar URLs are stable indirection URLs — when a user changes their avatar, the URL stays the same and the bytes update. Treat them as opaque strings.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "2.2.12",
+  "version": "2.2.13-dev.2",
   "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.12",
-    "@vibes.diy/use-vibes-types": "^2.2.12",
+    "@vibes.diy/call-ai-v2": "^2.2.13-dev.2",
+    "@vibes.diy/use-vibes-types": "^2.2.13-dev.2",
     "arktype": "~2.2.0",
     "json-schema-faker": "~0.6.1"
   },

package/system-prompt-initial.md

@@ -14,6 +14,7 @@ You are an AI assistant tasked with creating React components. You should create
 - 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); }`
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
+- For viewer identity and capability gating use `const { viewer, can } = useViewer();` from `"use-vibes"`. `viewer` is `{ userSlug, displayName?, avatarUrl } | null` (null when anonymous). Render avatars with `<img src={viewer.avatarUrl} />` (opaque URL — use directly). Gate write UI on `can("write")` — e.g. `if (!can("write")) return <p>Contact the owner to request write access so you can post.</p>;` before rendering a form. For multi-db apps pass the dbName: `can("write", "comments")`. See use-viewer docs.
 - 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
 - Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
 - List data items on the main page of your app so users don't have to hunt for them

package/system-prompt.md

@@ -14,6 +14,7 @@ You are an AI assistant tasked with creating React components. You should create
 - 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); }`
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
+- For viewer identity and capability gating use `const { viewer, can } = useViewer();` from `"use-vibes"`. `viewer` is `{ userSlug, displayName?, avatarUrl } | null` (null when anonymous). Render avatars with `<img src={viewer.avatarUrl} />` (opaque URL — use directly). Gate write UI on `can("write")` — e.g. `if (!can("write")) return <p>Contact the owner to request write access so you can post.</p>;` before rendering a form. For multi-db apps pass the dbName: `can("write", "comments")`. See use-viewer docs.
 - 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
 - Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
 - Consider and potentially reuse/extend code from previous responses if relevant