@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-inbox.md

@@ -0,0 +1,317 @@
+# Pouf Inbox
+
+A shared mailbox of notes that people send in and a few people read, answer and file away: a residents' committee inbox, workshop feedback, a club's suggestion box, a family's requests for the weekend. Reach for it whenever the app's core is messages that arrive one at a time, each with a subject, and get opened, replied to and archived. Notes and replies persist, so the inbox, what has been read and what has been archived are the same on the next visit and for everyone who opens it.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+Two views, one job each. The list opens with the `Heading` and a muted unread count, a `Write a note` button (the list's one lead) that opens a `Dialog` with the compose form, a search `Input` in a `Field`, and a `Segmented` (`tone="info"`) between the inbox and the archive. Each note is a clickable `RowCard` with its subject, a muted time, a muted first line of its body and a `Dot tone="info"` while unread; an `Empty` stands in when nothing matches. Opening a note marks it read and swaps in the reading view: a quiet `IconButton` to go back, the subject as the `Heading`, the sender as a `ViewerTag` (kept out of the clickable row, which is itself a button) and the time, the body, each reply on a `Card`, and a reply form whose `Send reply` is that view's lead, beside a quiet archive button and a quiet delete button inside a `Confirm` wearing `tone="down"`; finished actions say so with a `toast`. Every write waits on its `can` verdict from `useVibe("inbox")`: the compose and reply forms show a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when that write is closed to this visitor; marking read and archiving happen only when `can.edit(note).ok`; and delete renders only where `can.delete(note).ok`.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Button, Card, Dot, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Segmented, Skeleton, Spacer, Stack, Text, Textarea } from "@vibes.diy/pouf";
+import { Confirm, Dialog, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const BOXES = [
+  { value: "inbox", label: "Inbox" },
+  { value: "archive", label: "Archived" },
+];
+
+const when = (ms) => new Date(ms).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+
+function Author({ handle }) {
+  const { ViewerTag } = useViewer();
+  return handle ? <ViewerTag userHandle={handle} /> : <Text>A guest</Text>;
+}
+
+/** Three states for any create form: resolving, closed to this visitor, open. */
+function Gate({ verdict, closed, children }) {
+  if (verdict.pending)
+    return (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>{closed}</Text>;
+  return children;
+}
+
+function Reader({ note, replies, database, can, me, onBack }) {
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState(undefined);
+  const canReply = can.create({ type: "reply", noteId: note._id, authorHandle: me?.userHandle });
+  const canFile = can.edit(note).ok;
+
+  async function sendReply(e) {
+    e.preventDefault();
+    const text = draft.trim();
+    if (text === "") {
+      setError("Write a reply first.");
+      return;
+    }
+    setError(undefined);
+    await database.put({ type: "reply", noteId: note._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    // Cleared only once the write lands, so a local failure keeps the typed words.
+    setDraft("");
+    toast.success("Reply sent");
+  }
+
+  async function toggleArchive() {
+    await database.put({ ...note, archived: !note.archived });
+    toast(note.archived ? "Moved back to the inbox" : "Archived");
+    onBack();
+  }
+
+  async function remove() {
+    const gone = [note, ...replies].filter((d) => can.delete(d).ok);
+    await Promise.all(gone.map((d) => database.del(d._id)));
+    toast.success("Note deleted");
+    onBack();
+  }
+
+  return (
+    <Stack gap={5}>
+      <Row gap={2} wrap={false}>
+        <IconButton size="sm" onClick={onBack} label="Back to the inbox" icon={<Icon name="prev" size="sm" />} />
+        <Heading level={1}>{note.subject}</Heading>
+      </Row>
+
+      <Card>
+        <Stack gap={3}>
+          <Row gap={2} wrap={false}>
+            <Author handle={note.authorHandle} />
+            <Spacer />
+            <Text size="sm" muted>
+              {when(note.createdAt)}
+            </Text>
+          </Row>
+          <Text>{note.body}</Text>
+          <Row gap={2}>
+            {canFile && (
+              <Button size="sm" variant="quiet" onClick={toggleArchive}>
+                {note.archived ? "Move to inbox" : "Archive"}
+              </Button>
+            )}
+            {can.delete(note).ok && (
+              <Confirm
+                title="Delete this note?"
+                body="The note and its replies are removed for everyone. This can't be undone."
+                confirmLabel="Delete note"
+                cancelLabel="Keep it"
+                tone="down"
+                onConfirm={remove}
+              >
+                <Button size="sm" variant="quiet">
+                  Delete
+                </Button>
+              </Confirm>
+            )}
+          </Row>
+        </Stack>
+      </Card>
+
+      {replies.map((r) => (
+        <Card key={r._id} variant="tight">
+          <Stack gap={2}>
+            <Row gap={2} wrap={false}>
+              <Author handle={r.authorHandle} />
+              <Spacer />
+              <Text size="sm" muted>
+                {when(r.createdAt)}
+              </Text>
+            </Row>
+            <Text>{r.text}</Text>
+          </Stack>
+        </Card>
+      ))}
+
+      <Gate verdict={canReply} closed="Replies open up once you're on the committee.">
+        <form onSubmit={sendReply} noValidate>
+          <Stack gap={3}>
+            <Field label="Your reply" error={error}>
+              {(id, describedBy) => (
+                <Textarea
+                  id={id}
+                  describedBy={describedBy}
+                  value={draft}
+                  onChange={(value) => {
+                    setDraft(value);
+                    if (error) setError(undefined);
+                  }}
+                  rows={3}
+                  invalid={error !== undefined}
+                />
+              )}
+            </Field>
+            <Row justify="end">
+              <Button type="submit">Send reply</Button>
+            </Row>
+          </Stack>
+        </form>
+      </Gate>
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("inbox");
+  const { can, me } = useVibe("inbox");
+  const { docs: noteDocs } = useLiveQuery("type", { key: "note" });
+  const { docs: replies } = useLiveQuery("type", { key: "reply" });
+  const notes = [...noteDocs].sort((a, b) => b.createdAt - a.createdAt);
+
+  const [box, setBox] = useState("inbox");
+  const [query, setQuery] = useState("");
+  const [openId, setOpenId] = useState(undefined);
+  const [composing, setComposing] = useState(false);
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc sendNote writes, carrying the same fields it stamps.
+  const canSend = can.create({ type: "note", authorHandle: me?.userHandle });
+
+  const needle = query.trim().toLowerCase();
+  const shown = notes.filter(
+    (n) => Boolean(n.archived) === (box === "archive") && (needle === "" || `${n.subject} ${n.body}`.toLowerCase().includes(needle))
+  );
+  const unread = notes.filter((n) => !n.read && !n.archived).length;
+  const current = notes.find((n) => n._id === openId);
+
+  function open(note) {
+    setOpenId(note._id);
+    if (!note.read && can.edit(note).ok) database.put({ ...note, read: true });
+  }
+
+  async function sendNote(e) {
+    e.preventDefault();
+    const found = {
+      subject: subject.trim() === "" ? "Give the note a subject." : undefined,
+      body: body.trim() === "" ? "Write a few words." : undefined,
+    };
+    setErrors(found);
+    if (found.subject || found.body) return;
+    await database.put({
+      type: "note",
+      subject: subject.trim(),
+      body: body.trim(),
+      read: false,
+      archived: false,
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setSubject("");
+    setBody("");
+    setComposing(false);
+    toast.success("Note sent");
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {current ? (
+        <Reader
+          note={current}
+          replies={replies.filter((r) => r.noteId === current._id).sort((a, b) => a.createdAt - b.createdAt)}
+          database={database}
+          can={can}
+          me={me}
+          onBack={() => setOpenId(undefined)}
+        />
+      ) : (
+        <Stack gap={5}>
+          <Row justify="between" align="top">
+            <Stack gap={1}>
+              <Heading level={1}>Committee inbox</Heading>
+              <Text muted>{unread === 1 ? "1 unread note" : `${unread} unread notes`}</Text>
+            </Stack>
+            <Dialog
+              title="Write to the committee"
+              open={composing}
+              onOpenChange={setComposing}
+              trigger={<Button>Write a note</Button>}
+            >
+              <Gate verdict={canSend} closed="Sending notes opens up once you've signed in as a resident.">
+                <form onSubmit={sendNote} noValidate>
+                  <Stack gap={3}>
+                    <Field label="Subject" error={errors.subject}>
+                      {(id, describedBy) => (
+                        <Input
+                          id={id}
+                          describedBy={describedBy}
+                          value={subject}
+                          onChange={setSubject}
+                          placeholder="Bike shed lock"
+                          invalid={errors.subject !== undefined}
+                        />
+                      )}
+                    </Field>
+                    <Field label="Message" error={errors.body}>
+                      {(id, describedBy) => (
+                        <Textarea id={id} describedBy={describedBy} value={body} onChange={setBody} rows={4} invalid={errors.body !== undefined} />
+                      )}
+                    </Field>
+                    <Row justify="end">
+                      <Button type="submit">Send note</Button>
+                    </Row>
+                  </Stack>
+                </form>
+              </Gate>
+            </Dialog>
+          </Row>
+
+          <Stack gap={3}>
+            <Field label="Search notes">
+              {(id, describedBy) => (
+                <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Subject or words" inputMode="search" />
+              )}
+            </Field>
+            <Segmented label="Show" tone="info" value={box} onChange={setBox} options={BOXES} />
+          </Stack>
+
+          {shown.length === 0 ? (
+            <Empty icon={needle ? "search" : "mail"} title={needle ? "No matches" : "Nothing here"}>
+              {needle ? "Try other words, or look in the other box." : "New notes land here as they arrive."}
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {shown.map((n) => (
+                <RowCard key={n._id} onClick={() => open(n)}>
+                  <Stack gap={1}>
+                    <Row gap={2} wrap={false}>
+                      {!n.read && <Dot tone="info" />}
+                      <Text truncate>{n.subject}</Text>
+                      <Spacer />
+                      <Text size="sm" muted>
+                        {when(n.createdAt)}
+                      </Text>
+                    </Row>
+                    <Text size="sm" muted truncate>
+                      {n.body}
+                    </Text>
+                  </Stack>
+                </RowCard>
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      )}
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename notes to the app's own noun (`request`, `suggestion`, `feedback`) in the `type` key, the headings and the copy; keep one document per note and one per reply, linked by `noteId`.
+- Read and archived are fields on the note, shared by everyone who answers the inbox; read state that belongs to each person is a `read:<note>:<person>` document instead.
+- A label or folder is one more field and one more `Segmented` option (or a `Select` once there are more than four).
+- Senders and repliers are always `ViewerTag` with the stored handle; never type a name.
+- A new write surface gets its own verdict: `can.create(draft)` with the fields the write stamps, `can.edit(doc)` or `can.delete(doc)` on the document it changes, always on `useVibe` of the database it writes.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/inbox.json

package/llms/pouf-inventory.d.ts

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

package/llms/pouf-inventory.js

@@ -0,0 +1,6 @@
+export const poufInventoryConfig = {
+    name: "pouf-inventory",
+    label: "Pouf inventory block",
+    description: "Stock list with low-stock alerts, receiving and per-item details",
+};
+//# sourceMappingURL=pouf-inventory.js.map

package/llms/pouf-inventory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-inventory.js","sourceRoot":"","sources":["../../jsr/llms/pouf-inventory.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,mBAAmB,GAAc;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,kEAAkE;CAChF,CAAC"}

package/llms/pouf-inventory.md

@@ -0,0 +1,345 @@
+# Pouf Inventory
+
+A stock list that says what is ready to sell and what needs reordering: a candle shop's shelves, a food pantry's cupboard, a makerspace's supplies, a café's dry goods. Reach for it whenever the app's core is items counted on hand, each with a level at which it should be restocked, and deliveries that bring the counts back up. Items and every delivery persist, so the stockroom reads the same on the next visit and for everyone keeping it.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+One view with one job: know the stock and top it up. The `Heading` and a muted line open the page beside a quiet `Add item` button that opens a `Dialog` with the intake form. Three `Stat`s give the headline figures, each toned by meaning (`info` stock value, `warn` running low, `down` out of stock). A search `Input` in a `Field` and a `Segmented` stock filter (`tone="info"`) sit above a `Grid cols="sidebar"`: a sortable `Table` on a flush `Card` whose rows open an item, and the item's `Card` with its status `Badge` (`up` in stock, `warn` low, `down` out), its `Metric`s and a receive form whose `Receive` button is the view's one lead. Every write waits on its `can` verdict from `useVibe("inventory")`: the intake form shows a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when adding is closed to this visitor, and the receive form follows the same three states on `can.create` of the delivery it writes. Stock is never a number rewritten in place: each delivery is its own `movement` document, and on hand is the item's opening count plus the sum of its movements, so two people receiving at once both land.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useVibe } from "use-vibes";
+import {
+  Badge,
+  Button,
+  Card,
+  Empty,
+  Field,
+  Grid,
+  Heading,
+  Input,
+  Metric,
+  NumberInput,
+  Row,
+  Segmented,
+  Skeleton,
+  Stack,
+  Stat,
+  Table,
+  Text,
+} from "@vibes.diy/pouf";
+import { Dialog, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const NUMBER = new Intl.NumberFormat();
+const MONEY = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" });
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "low", label: "Low" },
+  { value: "out", label: "Out" },
+];
+
+const EMPTY_FORM = { name: "", sku: "", opening: "0", reorderAt: "5", price: "" };
+
+function level(stock, reorderAt) {
+  if (stock <= 0) return { key: "out", label: "Out of stock", tone: "down" };
+  if (stock <= reorderAt) return { key: "low", label: "Low stock", tone: "warn" };
+  return { key: "ok", label: "In stock", tone: "up" };
+}
+
+/** A whole number of zero or more from a NumberInput string, or undefined. */
+function count(text) {
+  const n = Number(text);
+  return text.trim() !== "" && Number.isInteger(n) && n >= 0 ? n : undefined;
+}
+
+/** Three states for any write surface: resolving, closed to this visitor, open. */
+function Gate({ verdict, closed, children }) {
+  if (verdict.pending)
+    return (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>{closed}</Text>;
+  return children;
+}
+
+function ItemCard({ item, stock, database, can, me }) {
+  const [qty, setQty] = useState("12");
+  const [error, setError] = useState(undefined);
+  const [saving, setSaving] = useState(false);
+  const status = level(stock, item.reorderAt);
+  // The delivery this form writes: one document per movement, never a rewrite of a count.
+  const movementDraft = { type: "movement", itemId: item._id, authorHandle: me?.userHandle };
+
+  async function receive(e) {
+    e.preventDefault();
+    const n = count(qty);
+    if (n === undefined || n === 0) {
+      setError("Enter how many arrived.");
+      return;
+    }
+    setError(undefined);
+    setSaving(true);
+    try {
+      await database.put({ ...movementDraft, qty: n, createdAt: Date.now() });
+      toast.success(`Received ${NUMBER.format(n)} × ${item.name}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Card>
+      <Stack gap={4}>
+        <Row justify="between" align="top">
+          <Stack gap={1}>
+            <Text size="sm" muted mono>
+              {item.sku || "No SKU"}
+            </Text>
+            <Heading level={2}>{item.name}</Heading>
+          </Stack>
+          <Badge tone={status.tone}>{status.label}</Badge>
+        </Row>
+        <Row gap={4}>
+          <Metric label="On hand" value={NUMBER.format(stock)} />
+          <Metric label="Reorder at" value={NUMBER.format(item.reorderAt)} />
+          <Metric label="Unit price" value={MONEY.format(item.price)} />
+        </Row>
+        <Gate verdict={can.create(movementDraft)} closed="Receiving deliveries is for the people who keep this stockroom.">
+          <form onSubmit={receive} noValidate>
+            <Stack gap={3}>
+              <Field label="Units arrived" error={error}>
+                {(id, describedBy) => (
+                  <NumberInput
+                    id={id}
+                    describedBy={describedBy}
+                    value={qty}
+                    onChange={(value) => {
+                      setQty(value);
+                      if (error) setError(undefined);
+                    }}
+                    min={1}
+                    invalid={error !== undefined}
+                  />
+                )}
+              </Field>
+              <Button type="submit" block loading={saving}>
+                Receive
+              </Button>
+            </Stack>
+          </form>
+        </Gate>
+      </Stack>
+    </Card>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("inventory");
+  const { can, me } = useVibe("inventory");
+  const { docs } = useLiveQuery("type", { key: "item" });
+  const { docs: movements } = useLiveQuery("type", { key: "movement" });
+  const items = [...docs].sort((a, b) => a.name.localeCompare(b.name));
+  // On hand = the count the item was added with, plus every delivery (and minus every use) since.
+  const moved = {};
+  for (const m of movements) moved[m.itemId] = (moved[m.itemId] ?? 0) + m.qty;
+  const onHand = (item) => item.opening + (moved[item._id] ?? 0);
+  const levelOf = (item) => level(onHand(item), item.reorderAt);
+
+  const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState("all");
+  const [selectedId, setSelectedId] = useState(undefined);
+  const [adding, setAdding] = useState(false);
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc addItem writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "item", authorHandle: me?.userHandle });
+
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  const needle = query.trim().toLowerCase();
+  const visible = items.filter(
+    (item) =>
+      (filter === "all" || levelOf(item).key === filter) && (needle === "" || `${item.name} ${item.sku}`.toLowerCase().includes(needle))
+  );
+  const selected = visible.find((item) => item._id === selectedId) ?? visible[0];
+  const lowCount = items.filter((item) => levelOf(item).key === "low").length;
+  const outCount = items.filter((item) => levelOf(item).key === "out").length;
+  const value = items.reduce((sum, item) => sum + Math.max(onHand(item), 0) * item.price, 0);
+
+  async function addItem(e) {
+    e.preventDefault();
+    const price = Number(form.price);
+    const found = {
+      name: form.name.trim() === "" ? "Name the item." : undefined,
+      opening: count(form.opening) === undefined ? "Enter a whole number of zero or more." : undefined,
+      reorderAt: count(form.reorderAt) === undefined ? "Enter a whole number of zero or more." : undefined,
+      price: form.price.trim() === "" || !(price >= 0) ? "Enter a price of zero or more." : undefined,
+    };
+    setErrors(found);
+    if (Object.values(found).some(Boolean)) return;
+    const { id } = await database.put({
+      type: "item",
+      name: form.name.trim(),
+      sku: form.sku.trim(),
+      opening: count(form.opening),
+      reorderAt: count(form.reorderAt),
+      price,
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setForm(EMPTY_FORM);
+    setAdding(false);
+    // Clear the search and filter so the new item is on screen, then open it.
+    setQuery("");
+    setFilter("all");
+    setSelectedId(id);
+    toast.success("Item added");
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8">
+      <Stack gap={5}>
+        <Row justify="between" align="top">
+          <Stack gap={1}>
+            <Heading level={1}>Stockroom</Heading>
+            <Text muted>What's ready to sell and what needs reordering.</Text>
+          </Stack>
+          <Dialog
+            title="Add an item"
+            open={adding}
+            onOpenChange={setAdding}
+            trigger={
+              <Button variant="quiet" size="sm">
+                Add item
+              </Button>
+            }
+          >
+            <Gate verdict={canAdd} closed="Adding items opens up once you're keeping this stockroom.">
+              <form onSubmit={addItem} noValidate>
+                <Stack gap={3}>
+                  <Field label="Name" error={errors.name}>
+                    {(id, describedBy) => (
+                      <Input id={id} describedBy={describedBy} value={form.name} onChange={set("name")} invalid={errors.name !== undefined} />
+                    )}
+                  </Field>
+                  <Field label="SKU" hint="Optional, for your own labels.">
+                    {(id, describedBy) => <Input id={id} describedBy={describedBy} value={form.sku} onChange={set("sku")} mono />}
+                  </Field>
+                  <Field label="On hand now" hint="The count you start from; deliveries add to it." error={errors.opening}>
+                    {(id, describedBy) => (
+                      <NumberInput
+                        id={id}
+                        describedBy={describedBy}
+                        value={form.opening}
+                        onChange={set("opening")}
+                        min={0}
+                        invalid={errors.opening !== undefined}
+                      />
+                    )}
+                  </Field>
+                  <Field label="Reorder at" hint="Flagged low at or below this count." error={errors.reorderAt}>
+                    {(id, describedBy) => (
+                      <NumberInput
+                        id={id}
+                        describedBy={describedBy}
+                        value={form.reorderAt}
+                        onChange={set("reorderAt")}
+                        min={0}
+                        invalid={errors.reorderAt !== undefined}
+                      />
+                    )}
+                  </Field>
+                  <Field label="Unit price" error={errors.price}>
+                    {(id, describedBy) => (
+                      <NumberInput
+                        id={id}
+                        describedBy={describedBy}
+                        value={form.price}
+                        onChange={set("price")}
+                        min={0}
+                        step={0.5}
+                        invalid={errors.price !== undefined}
+                      />
+                    )}
+                  </Field>
+                  <Row justify="end">
+                    <Button type="submit">Save item</Button>
+                  </Row>
+                </Stack>
+              </form>
+            </Gate>
+          </Dialog>
+        </Row>
+
+        <Grid cols={3} gap={3}>
+          <Stat label="Stock value" value={MONEY.format(value)} icon="card" tone="info" />
+          <Stat label="Running low" value={NUMBER.format(lowCount)} icon="warn" tone="warn" />
+          <Stat label="Out of stock" value={NUMBER.format(outCount)} icon="fail" tone="down" />
+        </Grid>
+
+        <Stack gap={3}>
+          <Field label="Search stock">
+            {(id, describedBy) => (
+              <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Item name or SKU" inputMode="search" />
+            )}
+          </Field>
+          <Segmented label="Stock status" tone="info" value={filter} onChange={setFilter} options={FILTERS} />
+        </Stack>
+
+        {visible.length === 0 ? (
+          <Empty icon="search" title={items.length === 0 ? "Nothing in stock yet" : "No items match"}>
+            {items.length === 0 ? "Add the first item to start counting." : "Try another search or stock filter."}
+          </Empty>
+        ) : (
+          <Grid cols="sidebar" gap={4}>
+            <Card variant="flush">
+              <Table
+                rows={visible}
+                getKey={(item) => item._id}
+                onRowClick={(item) => setSelectedId(item._id)}
+                getRowLabel={(item) => `Open ${item.name}`}
+                columns={[
+                  { key: "name", header: "Item", truncate: true, render: (item) => item.name, sort: (a, b) => a.name.localeCompare(b.name) },
+                  { key: "sku", header: "SKU", mono: true, render: (item) => item.sku },
+                  {
+                    key: "status",
+                    header: "Status",
+                    render: (item) => <Badge tone={levelOf(item).tone}>{levelOf(item).label}</Badge>,
+                  },
+                  {
+                    key: "stock",
+                    header: "On hand",
+                    align: "right",
+                    render: (item) => NUMBER.format(onHand(item)),
+                    sort: (a, b) => onHand(a) - onHand(b),
+                  },
+                ]}
+              />
+            </Card>
+            <ItemCard key={selected._id} item={selected} stock={onHand(selected)} database={database} can={can} me={me} />
+          </Grid>
+        )}
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename items to the app's own noun (`product`, `supply`, `ingredient`) in the `type` key, the headings and the copy; keep one document per item and one per movement, linked by `itemId`.
+- Tone the status by meaning: `up` in stock, `warn` at or below the reorder level, `down` out; the `Stat`s above follow the same tones.
+- Selling or using stock is one more `movement` with a negative `qty`, written by a second form behind the same `can.create(movementDraft)` verdict; never rewrite a count on the item, because sync keeps only the last write and a concurrent delivery would vanish.
+- A category is one more `Field` and property, filtered with a `Select` beside the search, not a second database.
+- A new write surface gets its own verdict: `can.create(draft)` with the fields the write stamps, `can.edit(doc)` or `can.delete(doc)` on the document it changes, always on `useVibe` of the database it writes.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/inventory.json

package/llms/pouf-kanban.d.ts

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