@vibes.diy/prompts 14.3.78 → 14.3.80

package/llms/access.md

@@ -79,18 +79,17 @@ App.jsx — the checkbox is the consent call; the picker is a doc write:
 const { can } = useVibe("logs"); // the write gate is always the server's own verdict
 
 // checking is the consent preflight; unchecking is the off switch. Never one verb for both edges.
-<label>
-  <input
-    type="checkbox"
+<Row gap={2} align="center">
+  <Checkbox
+    label="Shared with followers"
     checked={followersEnabled}
-    onChange={(e) => (e.target.checked ? requestFollowersAccess() : setVisibility("private"))}
+    onChange={(checked) => (checked === true ? requestFollowersAccess() : setVisibility("private"))}
   />
-  Shared with{" "}
-  <button type="button" onClick={() => setShowFollowers(true)}>
-    followers
-  </button>
-</label>
-{showFollowers && <ul>{followers.map((f) => <li key={f.handle}>{f.handle}</li>)}</ul>}
+  <Button type="button" size="sm" variant="quiet" onClick={() => setShowFollowers(true)}>
+    See followers
+  </Button>
+</Row>
+{showFollowers && <Stack gap={1}>{followers.map((f) => <Text key={f.handle}>{f.handle}</Text>)}</Stack>}
 
 {/* the app's own list — one share doc per person picked */}
 {can.create({ type: "share", authorHandle: me?.userHandle, buddyHandle: "x" }).ok && (
@@ -550,9 +549,15 @@ import { useVibe } from "use-vibes";
         {docs.map((doc) => (
           <li key={doc._id}>
             {doc.text}
-            <button onClick={() => database.put({ ...doc, favorite: !doc.favorite })}>
-              {doc.favorite ? "★" : "☆"}
-            </button>
+            <IconButton
+              size="sm"
+              variant={doc.favorite ? "solid" : "quiet"}
+              tone="warn"
+              aria-pressed={Boolean(doc.favorite)}
+              label={doc.favorite ? "Unfavorite" : "Favorite"}
+              icon={<Icon name="star" size="sm" />}
+              onClick={() => database.put({ ...doc, favorite: !doc.favorite })}
+            />
           </li>
         ))}
       </ul>
@@ -564,7 +569,7 @@ import { useVibe } from "use-vibes";
 >>>>>>> REPLACE
 ```
 
-The AI agent writes the access function (so it knows the role names) and writes the UI (so it knows which roles gate which components). The `access` object is the bridge — it lets the UI reflect server-enforced permissions without duplicating the logic.
+The AI agent writes the access function (so it knows the role names) and writes the UI (so it knows which roles gate which components). The `access` object is the link between them — it lets the UI reflect server-enforced permissions without duplicating the logic.
 
 The access function is the single source of truth for permissions. Gate write surfaces with `useVibe(dbName).can`, which runs this same access function. The `access` object (`access.hasRole(name)`, `access.hasChannel(name)`) reflects the viewer's resolved roles/channels for DISPLAY — role badges, showing/hiding read-only sections — not as the write gate.
 
@@ -636,12 +641,12 @@ App.jsx — `useVibe().can` gates every write surface (posts AND owner-only mana
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Button, Textarea } from "@vibes.diy/look";
+import { Button, Field, RowCard, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
 
 export default function App() {
   const { viewer, isViewerPending, ViewerTag } = useViewer();
   const { database, useLiveQuery, access } = useFireproof("announcements");
-  const { can } = useVibe("announcements");
+  const { can, ready } = useVibe("announcements");
 
   const { docs: posts } = useLiveQuery("type", { key: "post" });
   const [draft, setDraft] = React.useState("");
@@ -654,7 +659,9 @@ export default function App() {
   // ctx.requireRole("owner"), so this verdict is false for everyone but the owner.
   const canGrant = can.create({ type: "roleGrant", role: "poster", userHandle: "newUser" });
 
-  if (isViewerPending) return null;
+  // Hold the page while identity and the access function resolve: every verdict
+  // reads pending until then, so the write surface waits on a quiet checking state.
+  if (isViewerPending || !ready) return <Skeleton />;
 
   async function submitPost() {
     if (!draft.trim() || !viewer) return;
@@ -669,7 +676,7 @@ export default function App() {
   }
 
   return (
-    <div>
+    <Stack gap={4}>
       {/* No current-user pill / sign-in button here — that's system chrome in the
           Vibes Switch (the panel the logo opens). ViewerTag below renders post authors. */}
 
@@ -681,32 +688,34 @@ export default function App() {
             submitPost();
           }}
         >
-          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className="w-full" />
-          <Button type="submit">Post</Button>
+          <Stack gap={3}>
+            <Field label="Announcement">{(id, describedBy) => <Textarea id={id} describedBy={describedBy} value={draft} onChange={setDraft} />}</Field>
+            <Button type="submit">Post</Button>
+          </Stack>
         </form>
       ) : (
-        viewer && <p className="text-muted-foreground">{canPost.reason}</p>
+        viewer && <Text muted>Posting opens up once the owner adds you as a poster.</Text>
       )}
 
       {/* owner-only management — gated on can.* */}
       {canGrant.ok && (
-        <Button variant="secondary" onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
+        <Button type="button" variant="quiet" onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
           Grant poster role
         </Button>
       )}
 
       {posts.map((p) => (
-        <div key={p._id}>
+        <RowCard key={p._id}>
           <ViewerTag userHandle={p.authorHandle} />
-          <p>{p.body}</p>
+          <Text>{p.body}</Text>
           {can.delete(p).ok && (
-            <Button variant="destructive" size="sm" onClick={() => database.del(p._id)}>
+            <Button type="button" variant="quiet" tone="down" size="sm" onClick={() => database.del(p._id)}>
               Delete
             </Button>
           )}
-        </div>
+        </RowCard>
       ))}
-    </div>
+    </Stack>
   );
 }
 ```
@@ -722,12 +731,12 @@ const canRevoke = can.delete(grantDoc);
 {(canAppoint.ok || canRevoke.ok) && (
   <ModeratorPanel>
     {canAppoint.ok && (
-      <Button onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</Button>
+      <Button type="button" onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</Button>
     )}
     {canRevoke.ok ? (
-      <Button variant="destructive" onClick={() => database.del(grantDoc._id)}>Revoke</Button>
+      <Button type="button" variant="quiet" tone="down" onClick={() => database.del(grantDoc._id)}>Revoke</Button>
     ) : (
-      <p>{canRevoke.reason}</p>
+      <Text muted>{canRevoke.reason}</Text>
     )}
   </ModeratorPanel>
 )}
@@ -792,7 +801,7 @@ App.jsx — `access.hasChannel()` filters which channels are visible (display);
 =======
       {/* filter to channels the viewer can see — use _id as channel identifier (display only) */}
       {channels.filter((ch) => access.hasChannel(ch._id)).map((ch) => (
-        <button key={ch._id} onClick={() => setChannel(ch._id)}>{ch.name}</button>
+        <Button key={ch._id} type="button" size="sm" variant={ch._id === channel ? "solid" : "quiet"} tone="info" onClick={() => setChannel(ch._id)}>{ch.name}</Button>
       ))}
 
       {/* gate the write surface on useVibe().can */}
@@ -863,18 +872,18 @@ App.jsx — `access.hasChannel()` shows only the lists the viewer belongs to; `u
 
 ```jsx
 <<<<<<< SEARCH
-      {viewer && <button onClick={addNote}>+ note</button>}
+      {viewer && <Button type="button" onClick={addNote}>Add a note</Button>}
 =======
       {/* create list — any signed-in visitor can start their own */}
       {can.create({ type: "list", author: me?.userHandle }).ok && (
-        <button onClick={() => database.put({ type: "list", author: me.userHandle, name: "new list" })}>
-          + new list
-        </button>
+        <Button type="button" onClick={() => database.put({ type: "list", author: me.userHandle, name: "new list" })}>
+          New list
+        </Button>
       )}
 
       {visible.map((list) => (
         <section key={list._id}>
-          <h3>{list.name}</h3>
+          <Heading level={2}>{list.name}</Heading>
           {/* add-item form is shown only when the access fn would accept the write */}
           {canAddItem(list) && <AddItemForm listId={list._id} />}
           {/* invite peer — only shown to members of this list */}
@@ -987,7 +996,7 @@ App.jsx — the same board list serves the creator and the invited recipient. `B
 ```jsx partial
 function BoardWorkspace({ ensureDefaultBoard }) {
   const { useLiveQuery } = useFireproof("boards");
-  const { me, can } = useVibe("boards");
+  const { me, can, ready } = useVibe("boards");
   const [pickedBoardId, setPickedBoardId] = React.useState();
   const { docs: boards } = useLiveQuery("type", { key: "board" });
   const ownBoardId = me?.userHandle ? `default-${me.userHandle}` : undefined;
@@ -1002,15 +1011,21 @@ function BoardWorkspace({ ensureDefaultBoard }) {
     boards[0];
   return (
     <section>
-      {ownBoardId && !boards.some((board) => board._id === ownBoardId) && can.create(ownBoard).ok && (
-        <button onClick={createOwnBoard}>Create my board</button>
+      {ownBoardId && !boards.some((board) => board._id === ownBoardId) && (!ready || can.create(ownBoard).ok) && (
+        <Button type="button" onClick={createOwnBoard} disabled={!ready}>Create my board</Button>
       )}
-      <label>
-        Board
-        <select value={board?._id ?? ""} onChange={(event) => setPickedBoardId(event.target.value)} disabled={boards.length === 0}>
-          {boards.map((board) => <option key={board._id} value={board._id}>{board.name ?? board._id}</option>)}
-        </select>
-      </label>
+      <Field label="Board">
+        {(id, describedBy) => (
+          <Select
+            id={id}
+            describedBy={describedBy}
+            value={board?._id ?? ""}
+            onChange={setPickedBoardId}
+            disabled={boards.length === 0}
+            options={boards.map((board) => ({ value: board._id, label: board.name ?? board._id }))}
+          />
+        )}
+      </Field>
       {board && <BoardContents board={board} />}
     </section>
   );
@@ -1028,11 +1043,11 @@ const sharedWithMe = boards.filter((board) => board.creatorHandle !== me?.userHa
 // …
 {sharedWithMe.length > 0 && (
   <section>
-    <h2>Shared with you</h2>
+    <Heading level={2}>Shared with you</Heading>
     {sharedWithMe.map((board) => (
-      <button key={board._id} type="button" onClick={() => setPickedBoardId(board._id)}>
-        {board.name ?? board._id} <ViewerTag userHandle={board.creatorHandle} />
-      </button>
+      <RowCard key={board._id} onClick={() => setPickedBoardId(board._id)}>
+        <Text>{board.name ?? board._id}</Text> <ViewerTag userHandle={board.creatorHandle} />
+      </RowCard>
     ))}
   </section>
 )}
@@ -1137,13 +1152,13 @@ App.jsx — show only channels the viewer is in (`access.hasChannel`), gate the
       {viewer && <Compose onSend={send} />}
 =======
       {/* sidebar lists only the channels the viewer is in */}
-      <nav>{myChannels.map((ch) => <button key={ch._id} onClick={() => setChannelId(ch._id)}>{ch.name}</button>)}</nav>
+      <nav>{myChannels.map((ch) => <Button key={ch._id} type="button" size="sm" variant={ch._id === channelId ? "solid" : "quiet"} tone="info" onClick={() => setChannelId(ch._id)}>{ch.name}</Button>)}</nav>
 
       {/* compose is shown only when the viewer is a member of the selected channel */}
       {channelId && canPost.ok ? (
         <Compose onSend={(text) => database.put({ type: "message", channelId, userHandle: me.userHandle, text })} />
       ) : (
-        <p>{canPost.reason || "Pick a channel"}</p>
+        <Text muted>{canPost.reason || "Pick a channel"}</Text>
       )}
 
       {/* any member of this channel may invite a peer */}
@@ -1203,7 +1218,7 @@ App.jsx — anonymous-friendly submit form, owner-only config panel, role-gated
 
 ```jsx
 <<<<<<< SEARCH
-      <input value={answer} onChange={(e) => setAnswer(e.target.value)} />
+      <Field label="Your answer">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={answer} onChange={setAnswer} />}</Field>
 =======
       {/* anyone (signed in OR anonymous) can submit — only stamp authorHandle when present */}
       {canSubmit.ok ? (
@@ -1211,10 +1226,10 @@ App.jsx — anonymous-friendly submit form, owner-only config panel, role-gated
           e.preventDefault();
           database.put({ type: "survey-response", question: "q1", answer, ...(me && { authorHandle: me.userHandle }) });
         }}>
-          <input value={answer} onChange={(e) => setAnswer(e.target.value)} />
-          <button type="submit">Submit</button>
+          <Field label="Your answer">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={answer} onChange={setAnswer} />}</Field>
+          <Button type="submit">Submit</Button>
         </form>
-      ) : <p>{canSubmit.reason}</p>}
+      ) : <Text muted>{canSubmit.reason}</Text>}
 
       {/* owner-only admin to wire up the feedback-team role */}
       {canConfigure.ok && <ConfigPanel />}
@@ -1242,8 +1257,38 @@ export function guestbook(doc, oldDoc, user, ctx) {
 
 In `App.jsx`, gate the form on `useVibe("guestbook").can.create({ type: "entry" }).ok` (true for anon here) and stamp `authorHandle: me?.userHandle` only when signed in. Without `allowAnonymous: true` the runtime rejects the null-user write even though the function didn't throw — so the guestbook would silently require login, the exact miss to avoid.
 
+The app before the edit, a note form wrapped in a sign-in wall:
+
+```jsx
+import { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Field, Input, Stack } from "@vibes.diy/pouf";
+import { SignInGate } from "./SignInGate.jsx";
+
+export default function App() {
+  const { database } = useFireproof("notes");
+  const [message, setMessage] = useState("");
+  return (
+    <Stack>
+      <SignInGate>
+        <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} />}</Field>
+      </SignInGate>
+    </Stack>
+  );
+}
+```
+
 App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true even when nobody is signed in:
 
+```jsx
+<<<<<<< SEARCH
+import { Field, Input, Stack } from "@vibes.diy/pouf";
+=======
+import { Button, Field, Input, RowCard, Stack, Text } from "@vibes.diy/pouf";
+import { useVibe } from "use-vibes";
+>>>>>>> REPLACE
+```
+
 ```jsx
 <<<<<<< SEARCH
   const { database } = useFireproof("notes");
@@ -1260,7 +1305,7 @@ App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true e
 ```jsx
 <<<<<<< SEARCH
       <SignInGate>
-        <input value={message} onChange={(e) => setMessage(e.target.value)} />
+        <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} />}</Field>
       </SignInGate>
 =======
       {canSign.ok ? (
@@ -1270,11 +1315,11 @@ App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true e
           database.put({ type: "entry", message, createdAt: Date.now(), ...(me && { authorHandle: me.userHandle }) });
           setMessage("");
         }}>
-          <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Leave a note" />
-          <button type="submit">Sign</button>
+          <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} placeholder="Leave a note" />}</Field>
+          <Button type="submit">Sign</Button>
         </form>
-      ) : <p>{canSign.reason}</p>}
+      ) : <Text muted>{canSign.reason}</Text>}
 
-      {entries.map((e) => <li key={e._id}>{e.message} — {e.authorHandle || "anonymous"}</li>)}
+      {entries.map((e) => <RowCard key={e._id}><Text>{e.message} — {e.authorHandle || "anonymous"}</Text></RowCard>)}
 >>>>>>> REPLACE
 ```

package/llms/backend.js

@@ -1,7 +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; reads a web page, feed or API the person names and hands it to the page through /_api; sends a record on to another service through a Zapier Catch Hook when the person asks for Zapier",
-    cues: ["zapier", "catch hook"],
+    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; reads a web page, feed or API the person names and hands it to the page through /_api; emails, notifies and reminds people through ctx.notify by handle — a weekly digest, a summary for the owner, a Monday email to the manager — and invites a recipient who is not in the app yet; and sends a record to a tool the person names (Slack, Google Sheets, a CRM, Zapier) through a Zapier Catch Hook the owner connects",
+    cues: ["email", "notify", "remind", "digest", "zapier", "catch hook", "webhook", "slack", "sheets", "crm"],
 };
 //# sourceMappingURL=backend.js.map

package/llms/backend.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,uXAAuX;IAOzX,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,ylBAAylB;IAO3lB,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;CAC3G,CAAC"}

package/llms/backend.md

@@ -24,7 +24,9 @@ create or mention `backend.js`.
   "form POST", "Stripe/GitHub/Sonos sends us…". Something **external → us**.
 - **`onChange`** — "when X is created", "after a write", "notify", "send an
   email", "aggregate", "moderate", "sync to…". An **internal write → a side
-  effect**.
+  effect**: `ctx.notify` for every person the app emails, notifies or reminds,
+  and a Zapier Catch Hook for a tool the person names (Slack, Google Sheets, a
+  CRM).
 - **`scheduled`** — "every N minutes", "poll", "check periodically", "cron",
   "cleanup", "digest". **Timer-driven**, no user in the loop.
 
@@ -308,32 +310,38 @@ 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.
+    **Emailing, notifying or reminding a person is `ctx.notify`.**
+    `ctx.notify` reaches a person in the app by handle — the owner, a member, a
+    manager — on their bell, their push and their email, so "email the manager
+    every Monday", "email me a weekly digest" and "send the owner a summary" are
+    each a `scheduled` handler that calls `ctx.notify`. A recipient who is not in
+    the app yet joins it through the app's invite: the person picker takes their
+    handle, or takes their email address and mails them an invite, and once they
+    arrive every notification reaches them. Keep the record in the app too, so the app's
+    own screen shows what went out.
+
+    **A Catch Hook carries a record to a tool the person names.** When the ask
+    names Slack, Google Sheets, a CRM, Airtable, Notion, Clio, HubSpot or Zapier
+    itself, `hooks.zapier.com` is on the curated list for a `POST` to a Catch Hook, so
+    the app hands the new record to that tool without holding its 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, so it stays in the secret, out of every document and response
+    body. Write that path gated on the secret
+    (`if (!ctx.secrets.ZAPIER_HOOK_URL) return;`), so the app works fully before
+    any Zap exists, and say in your reply that connecting a Zap to the hook turns
+    that delivery on. 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.
 
     ```js
     export async function onChange(event, ctx) {
       const doc = event.doc;
       if (event.deleted || doc.type !== "intake" || doc.sentToZapier) return;
+      if (!ctx.secrets.ZAPIER_HOOK_URL) return; // no Zap connected yet: the record stays in the app
       const res = await ctx.fetch(ctx.secrets.ZAPIER_HOOK_URL, {
         method: "POST",
         headers: { "content-type": "application/json" },
@@ -589,7 +597,7 @@ export async function scheduled(event, ctx) {
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
-import { Badge, Card, CardContent } from "@vibes.diy/look";
+import { Badge, Heading, RowCard, Stack, Text } from "@vibes.diy/pouf";
 
 export default function App() {
   const { useLiveQuery } = useFireproof("nodeReleases");
@@ -600,26 +608,26 @@ export default function App() {
 
   return (
     <main className="min-h-screen bg-background text-foreground font-sans mx-auto max-w-2xl p-6">
-      <h1 className="text-3xl font-bold">Node.js releases</h1>
-      {status?.state === "egress-denied" && (
-        <Badge variant="secondary" role="status" className="my-4">
-          showing saved data — live refresh unavailable
-        </Badge>
-      )}
-      <ul className="mt-6 space-y-3">
-        {releases.map((release) => (
-          <li key={release._id}>
-            <Card>
-              <CardContent>
-                <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
-                  {release.title}
-                </a>
-                <time className="ml-3 text-muted-foreground">{release.publishedAt.slice(0, 10)}</time>
-              </CardContent>
-            </Card>
-          </li>
-        ))}
-      </ul>
+      <Stack gap={5}>
+        <Heading level={1}>Node.js releases</Heading>
+        {status?.state === "egress-denied" && (
+          <div role="status">
+            <Badge tone="info">showing saved data — live refresh unavailable</Badge>
+          </div>
+        )}
+        <Stack gap={3}>
+          {releases.map((release) => (
+            <RowCard key={release._id}>
+              <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
+                {release.title}
+              </a>
+              <Text size="sm" muted>
+                {release.publishedAt.slice(0, 10)}
+              </Text>
+            </RowCard>
+          ))}
+        </Stack>
+      </Stack>
     </main>
   );
 }

package/llms/bluesky.md

@@ -264,6 +264,7 @@ account of the visitor's involved.
 ### `App.jsx`
 ```jsx app=bluesky-browser
 import React, { useState } from "react";
+import { Button, Field, Input, Row, RowCard, Stack } from "@vibes.diy/pouf";
 
 export default function App() {
   const [handle, setHandle] = useState("bsky.app");
@@ -296,8 +297,10 @@ export default function App() {
 
   return (
     <div>
-      <input value={handle} onChange={(e) => setHandle(e.target.value)} placeholder="alice.bsky.social" />
-      <button onClick={() => load()}>Look up</button>
+      <Row gap={2} align="top">
+        <Field label="Bluesky handle">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={handle} onChange={setHandle} placeholder="alice.bsky.social" />}</Field>
+        <Button type="button" onClick={() => load()}>Look up</Button>
+      </Row>
       {problem && <p role="alert">{problem}</p>}
 
       {profile && (
@@ -314,20 +317,19 @@ export default function App() {
 
       <section>
         <h3>Following</h3>
-        <ul>
+        <Stack gap={2}>
           {people.map((person) => (
-            <li key={person.did}>
-              <button
-                onClick={() => {
-                  setHandle(person.handle);
-                  load(person.handle);
-                }}
-              >
-                {person.displayName} (@{person.handle})
-              </button>
-            </li>
+            <RowCard
+              key={person.did}
+              onClick={() => {
+                setHandle(person.handle);
+                load(person.handle);
+              }}
+            >
+              {person.displayName} (@{person.handle})
+            </RowCard>
           ))}
-        </ul>
+        </Stack>
       </section>
 
       <section>

package/llms/board-games.d.ts

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

package/llms/board-games.js

@@ -0,0 +1,29 @@
+export const boardGamesConfig = {
+    name: "board-games",
+    label: "Board, tile and card games",
+    description: "Board, tile and card games played one tap, guess or card at a time: bingo cards dealt per player from a shared pool, " +
+        "daily word guesses with an on-screen keyboard and a share grid, crosswords, word searches, grouping puzzles, letter hives, " +
+        "sudoku, minesweeper, 2048, checkers, chess, go, hex, mancala, solitaire and other card games with hidden hands, trivia rooms " +
+        "and dice scoresheets with house rules. Covers SVG boards in the app's theme tokens (square, hex, ring, graph and stacked " +
+        "shapes), seeded deals and daily seeds, win-line detection, turns, undo, AI opponents, and who sees what — public tables, " +
+        "private hands, members-only clubs.",
+    cues: [
+        "bingo",
+        "word game",
+        "wordle",
+        "crossword",
+        "word search",
+        "sudoku",
+        "chess",
+        "checkers",
+        "solitaire",
+        "card game",
+        "board game",
+        "deck of cards",
+        "puzzle board",
+        "minesweeper",
+        "mancala",
+        "tic-tac-toe",
+    ],
+};
+//# sourceMappingURL=board-games.js.map

package/llms/board-games.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-games.js","sourceRoot":"","sources":["../../jsr/llms/board-games.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,4BAA4B;IACnC,WAAW,EACT,uHAAuH;QACvH,6HAA6H;QAC7H,+HAA+H;QAC/H,2HAA2H;QAC3H,2HAA2H;QAC3H,oCAAoC;IACtC,IAAI,EAAE;QACJ,OAAO;QACP,WAAW;QACX,QAAQ;QACR,WAAW;QACX,aAAa;QACb,QAAQ;QACR,OAAO;QACP,UAAU;QACV,WAAW;QACX,WAAW;QACX,YAAY;QACZ,eAAe;QACf,cAAc;QACd,aAAa;QACb,SAAS;QACT,aAAa;KACd;CACF,CAAC"}