@vibes.diy/prompts 2.4.4 → 2.4.5

package/llms/use-viewer.md

@@ -10,12 +10,16 @@ The contract: **every write surface (form, submit button, edit input, delete but
 import { useViewer } from "use-vibes";
 
 function App() {
-  const { viewer, can } = useViewer();
-  if (!viewer) return <p>Sign in to use this app.</p>;
+  const { viewer, isViewerPending, can, ViewerTag } = useViewer();
+
+  // isViewerPending is true until the platform has resolved the viewer identity.
+  // Gate on it to avoid flashing the anonymous state on first render.
+  if (isViewerPending) return null;
+
   return (
     <header>
-      <img src={viewer.avatarUrl} alt={viewer.userSlug} />
-      <span>{viewer.displayName ?? viewer.userSlug}</span>
+      {/* ViewerTag renders a "Sign in" button when logged out, a user pill when logged in */}
+      <ViewerTag />
     </header>
   );
 }
@@ -24,16 +28,30 @@ function App() {
 ## 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.
+- `isViewerPending` — `true` while the platform is still resolving the viewer identity (e.g. on first render before the parent shell has pushed the identity update). **Gate any auth-dependent UI on `!isViewerPending`** to avoid flashing the wrong state. Once it becomes `false`, `viewer` is either populated or definitively `null`.
 - `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.
+- `ViewerTag` — ready-made user pill; see the ViewerTag section below.
 
 ## 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>;
+  const { viewer, isViewerPending, can, ViewerTag } = useViewer();
+  if (isViewerPending) return null;
+
+  return (
+    <div>
+      {/* Always rendered: "Sign in" button when anonymous, identity pill when signed in.
+          The label only appears once viewer is known so it doesn't flash. */}
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        {viewer && <span style={{ fontSize: 13, color: "var(--muted, #888)" }}>commenting as</span>}
+        <ViewerTag />
+      </div>
+
+      {viewer && !can("write", "comments") && <p>Contact the owner to request write access so you can post.</p>}
+      {viewer && can("write", "comments") && <form>...</form>}
+    </div>
+  );
 }
 ```
 
@@ -46,7 +64,7 @@ import { useFireproof } from "use-fireproof";
 import { useViewer } from "use-vibes";
 
 function CommentThread() {
-  const { viewer, can } = useViewer();
+  const { viewer, isViewerPending, can, ViewerTag } = useViewer();
   const { useLiveQuery, database } = useFireproof("comments");
   const { docs: comments } = useLiveQuery("createdAt");
   const [body, setBody] = useState("");
@@ -77,20 +95,25 @@ function CommentThread() {
         ))}
       </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>
+      {!isViewerPending && (
+        <div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {viewer && <span style={{ fontSize: 13, color: "var(--muted, #888)" }}>commenting as</span>}
+            <ViewerTag />
+          </div>
+          {viewer && !can("write", "comments") && <p>Contact the owner to request write access so you can post.</p>}
+          {viewer && can("write", "comments") && (
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                post();
+              }}
+            >
+              <input value={body} onChange={(e) => setBody(e.target.value)} />
+              <button type="submit">Post</button>
+            </form>
+          )}
+        </div>
       )}
     </div>
   );

package/package.json

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