@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-crm.md

@@ -0,0 +1,330 @@
+# Pouf CRM
+
+A customer list that remembers where every relationship stands: a design studio's clients, a bakery's wholesale accounts, a freelancer's leads, a nonprofit's donors. Reach for it whenever the app's core is people or companies the person keeps in touch with, each carrying a stage (a lead, active, at risk), a few account details and a running trail of notes. Customers, their stage and every note persist, so the list is where it was left on the next visit and for everyone working the accounts.
+
+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 customer list opens with the `Heading` and a muted count, an `Add customer` button (the list's one lead) that opens a `Dialog` with the intake form, a search `Input` in a `Field` and a `Segmented` stage filter (`tone="info"`). Each customer is a clickable `RowCard` with the name, the company in muted `Text` and the stage as a `Badge` toned by meaning (`info` lead, `up` active, `warn` at risk); an `Empty` stands in when nothing matches. Opening a customer swaps in the customer view: a quiet `IconButton` to go back, the name as the `Heading`, a `Card` of `Metric`s (account value, email, added), the stage as a `Select` in a `Field`, then the notes, each on a `Card` with its author as a `ViewerTag`, and a note form whose `Save note` is that view's lead. Every write waits on its `can` verdict from `useVibe("crm")`: the intake and note 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, and the stage `Select` is disabled unless `can.edit(customer).ok`, explaining why in its hint only once the verdict has resolved to a denial.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import {
+  Badge,
+  Button,
+  Card,
+  Empty,
+  Field,
+  Heading,
+  Icon,
+  IconButton,
+  Input,
+  Metric,
+  NumberInput,
+  Row,
+  RowCard,
+  Segmented,
+  Skeleton,
+  Spacer,
+  Stack,
+  Text,
+  Textarea,
+} from "@vibes.diy/pouf";
+import { Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const STAGES = {
+  lead: { label: "Lead", tone: "info" },
+  active: { label: "Active", tone: "up" },
+  "at-risk": { label: "At risk", tone: "warn" },
+};
+const STAGE_OPTIONS = Object.entries(STAGES).map(([value, s]) => ({ value, label: s.label }));
+const FILTERS = [{ value: "all", label: "All" }, ...STAGE_OPTIONS];
+
+const money = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+const day = (ms) => new Date(ms).toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" });
+
+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 StageBadge({ stage }) {
+  return <Badge tone={STAGES[stage].tone}>{STAGES[stage].label}</Badge>;
+}
+
+function CustomerView({ customer, notes, database, can, me, onBack }) {
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState(undefined);
+  const canNote = can.create({ type: "note", customerId: customer._id, authorHandle: me?.userHandle });
+  // Kept whole: `pending` (still resolving) and a real denial read differently.
+  const canEdit = can.edit(customer);
+
+  async function changeStage(stage) {
+    await database.put({ ...customer, stage });
+    toast.success(`Moved to ${STAGES[stage].label.toLowerCase()}`);
+  }
+
+  async function saveNote(e) {
+    e.preventDefault();
+    const text = draft.trim();
+    if (text === "") {
+      setError("Write the note first.");
+      return;
+    }
+    setError(undefined);
+    await database.put({ type: "note", customerId: customer._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    // Cleared only once the write lands, so a local failure keeps the typed words.
+    setDraft("");
+  }
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={2}>
+        <Row gap={2} wrap={false}>
+          <IconButton size="sm" onClick={onBack} label="Back to customers" icon={<Icon name="prev" size="sm" />} />
+          <Heading level={1}>{customer.name}</Heading>
+        </Row>
+        <Row gap={2}>
+          <Text muted>{customer.company || "No company yet"}</Text>
+          <StageBadge stage={customer.stage} />
+        </Row>
+      </Stack>
+
+      <Card variant="tight">
+        <Row gap={4}>
+          <Metric label="Account value" value={money.format(customer.value)} />
+          <Metric label="Email" value={customer.email || undefined} num={false} />
+          <Metric label="Added" value={day(customer.createdAt)} num={false} />
+        </Row>
+      </Card>
+
+      <Field label="Stage" hint={!canEdit.pending && !canEdit.ok ? "Only people who manage this account can move it." : undefined}>
+        {(id, describedBy) => (
+          <Select id={id} describedBy={describedBy} value={customer.stage} onChange={changeStage} options={STAGE_OPTIONS} disabled={!canEdit.ok} />
+        )}
+      </Field>
+
+      <Stack gap={3}>
+        <Heading level={2}>Notes</Heading>
+        {notes.length === 0 && <Text muted>No notes yet. Capture the next step below.</Text>}
+        {notes.map((n) => (
+          <Card key={n._id} variant="tight">
+            <Stack gap={2}>
+              <Row gap={2} wrap={false}>
+                <Author handle={n.authorHandle} />
+                <Spacer />
+                <Text size="sm" muted>
+                  {day(n.createdAt)}
+                </Text>
+              </Row>
+              <Text>{n.text}</Text>
+            </Stack>
+          </Card>
+        ))}
+        <Gate verdict={canNote} closed="Notes open up once you're on the accounts team.">
+          <form onSubmit={saveNote} noValidate>
+            <Stack gap={3}>
+              <Field label="Add a note" error={error}>
+                {(id, describedBy) => (
+                  <Textarea
+                    id={id}
+                    describedBy={describedBy}
+                    value={draft}
+                    onChange={(value) => {
+                      setDraft(value);
+                      if (error) setError(undefined);
+                    }}
+                    placeholder="Sent the proposal, follow up Friday"
+                    rows={3}
+                    invalid={error !== undefined}
+                  />
+                )}
+              </Field>
+              <Row justify="end">
+                <Button type="submit">Save note</Button>
+              </Row>
+            </Stack>
+          </form>
+        </Gate>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("crm");
+  const { can, me } = useVibe("crm");
+  const { docs: customerDocs } = useLiveQuery("type", { key: "customer" });
+  const { docs: notes } = useLiveQuery("type", { key: "note" });
+  const customers = [...customerDocs].sort((a, b) => a.name.localeCompare(b.name));
+
+  const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState("all");
+  const [openId, setOpenId] = useState(undefined);
+  const [adding, setAdding] = useState(false);
+  const [form, setForm] = useState({ name: "", company: "", email: "", value: "", stage: "lead" });
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc addCustomer writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "customer", authorHandle: me?.userHandle });
+
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  const needle = query.trim().toLowerCase();
+  const shown = customers.filter(
+    (c) =>
+      (filter === "all" || c.stage === filter) &&
+      (needle === "" || `${c.name} ${c.company} ${c.email}`.toLowerCase().includes(needle))
+  );
+  const current = customers.find((c) => c._id === openId);
+
+  async function addCustomer(e) {
+    e.preventDefault();
+    const value = form.value.trim() === "" ? 0 : Number(form.value);
+    const found = {
+      name: form.name.trim() === "" ? "Add a name." : undefined,
+      value: Number.isFinite(value) && value >= 0 ? undefined : "Enter an amount of zero or more.",
+    };
+    setErrors(found);
+    if (found.name || found.value) return;
+    await database.put({
+      type: "customer",
+      name: form.name.trim(),
+      company: form.company.trim(),
+      email: form.email.trim(),
+      value,
+      stage: form.stage,
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setForm({ name: "", company: "", email: "", value: "", stage: "lead" });
+    setAdding(false);
+    toast.success("Customer added");
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {current ? (
+        <CustomerView
+          customer={current}
+          notes={notes.filter((n) => n.customerId === 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}>Customers</Heading>
+              <Text muted>{customers.length === 1 ? "1 customer" : `${customers.length} customers`}</Text>
+            </Stack>
+            <Dialog title="Add a customer" open={adding} onOpenChange={setAdding} trigger={<Button>Add customer</Button>}>
+              <Gate verdict={canAdd} closed="Adding customers opens up once you're on the accounts team.">
+                <form onSubmit={addCustomer} 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="Company">
+                      {(id, describedBy) => <Input id={id} describedBy={describedBy} value={form.company} onChange={set("company")} />}
+                    </Field>
+                    <Field label="Email">
+                      {(id, describedBy) => (
+                        <Input id={id} describedBy={describedBy} value={form.email} onChange={set("email")} type="email" inputMode="email" />
+                      )}
+                    </Field>
+                    <Field label="Account value" hint="In dollars a year." error={errors.value}>
+                      {(id, describedBy) => (
+                        <NumberInput
+                          id={id}
+                          describedBy={describedBy}
+                          value={form.value}
+                          onChange={set("value")}
+                          min={0}
+                          step={100}
+                          invalid={errors.value !== undefined}
+                        />
+                      )}
+                    </Field>
+                    <Field label="Stage">
+                      {(id, describedBy) => (
+                        <Select id={id} describedBy={describedBy} value={form.stage} onChange={set("stage")} options={STAGE_OPTIONS} />
+                      )}
+                    </Field>
+                    <Row justify="end">
+                      <Button type="submit">Save customer</Button>
+                    </Row>
+                  </Stack>
+                </form>
+              </Gate>
+            </Dialog>
+          </Row>
+
+          <Stack gap={3}>
+            <Field label="Search customers">
+              {(id, describedBy) => (
+                <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Name, company or email" inputMode="search" />
+              )}
+            </Field>
+            <Segmented label="Stage" tone="info" value={filter} onChange={setFilter} options={FILTERS} />
+          </Stack>
+
+          {shown.length === 0 ? (
+            <Empty icon="users" title={customers.length === 0 ? "No customers yet" : "No customers found"}>
+              {customers.length === 0 ? "Add the first one to start the list." : "Try a broader search or another stage."}
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {shown.map((c) => (
+                <RowCard key={c._id} onClick={() => setOpenId(c._id)}>
+                  <Row gap={3} wrap={false}>
+                    <Stack gap={1}>
+                      <Text truncate>{c.name}</Text>
+                      <Text size="sm" muted truncate>
+                        {c.company || "No company yet"}
+                      </Text>
+                    </Stack>
+                    <Spacer />
+                    <StageBadge stage={c.stage} />
+                  </Row>
+                </RowCard>
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      )}
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename customers to the app's own noun (`client`, `account`, `donor`) in the `type` key, the headings and the copy; keep one document per customer and one per note, linked by `customerId`.
+- Keep the stage on the customer document and tone its `Badge` by meaning: `info` for a lead, `up` for active, `warn` for at risk, `idle` for a lost or paused account; a new stage is one more entry in `STAGES`.
+- An account owner is a `HandleInput` from `useViewer()` writing an `ownerHandle`, shown on the customer view as a `ViewerTag`.
+- A pipeline total is a `Stat` above the list summing `value` over the active customers, with its own meaning tone.
+- 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/crm.json

package/llms/pouf-dashboard.d.ts

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

package/llms/pouf-dashboard.js

@@ -0,0 +1,6 @@
+export const poufDashboardConfig = {
+    name: "pouf-dashboard",
+    label: "Pouf dashboard block",
+    description: "Sales dashboard with figures, a range chart and a sortable table",
+};
+//# sourceMappingURL=pouf-dashboard.js.map

package/llms/pouf-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-dashboard.js","sourceRoot":"","sources":["../../jsr/llms/pouf-dashboard.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-dashboard.md

@@ -0,0 +1,269 @@
+# Pouf Dashboard
+
+An overview page that turns the records an app keeps into a few headline figures, a chart and a table: a candle shop's sales, a bake sale's takings, a market stall's week, a club's ticket sales. Reach for it whenever the app's core is "how are we doing", answered from things people log. The figures are never typed in by hand: each sale is its own document, and every number, bar and row on the page is computed from those documents when it renders, so the dashboard is current on the next visit and on every device that opens the app.
+
+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: read the business at a glance. The `Heading` and a muted line open the page, beside a `Segmented` range picker (`tone="info"`) that scopes the money taken, the sales count, the chart and the table. Three `Stat`s follow in a `Grid`, each toned by meaning (`up` for money taken, `info` for a plain count, `warn` for sales still waiting on payment); the unpaid count ignores the range on purpose, because a sale still owed does not stop being owed when it scrolls out of the week. Under them a `Card` holds the `AreaChart` from `@vibes.diy/pouf/charts`, one bucket per day, week or month, its one series toned `up` like the money-taken `Stat` it breaks down. The `Grid cols="sidebar"` below puts the range's latest sales in a `Table` on the main side (sortable columns, the status as a `Badge` read from the stored field: `up` paid, `warn` awaiting payment) and the `Record a sale` form on the side, whose button is the view's one lead and shows `loading` while the write lands. A sale still awaiting payment gets a quiet `Mark paid` in its row, showing `loading` until its write lands. Every write waits on its `can` verdict from `useVibe("sales")`, the database the sales live in: the form shows a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves, a `Sign in to record sales` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when recording is closed to a signed-in visitor; `Mark paid` renders only where `can.edit(sale).ok`.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import {
+  Badge,
+  Button,
+  Card,
+  Empty,
+  Field,
+  Grid,
+  Heading,
+  Input,
+  NumberInput,
+  Row,
+  Segmented,
+  Skeleton,
+  Stack,
+  Stat,
+  Table,
+  Text,
+} from "@vibes.diy/pouf";
+import { Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { AreaChart } from "@vibes.diy/pouf/charts";
+
+const MONEY = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" });
+const RANGES = [
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" },
+  { value: "year", label: "Year" },
+];
+const STATES = [
+  { value: "paid", label: "Paid" },
+  { value: "pending", label: "Awaiting payment" },
+];
+const STATE_BADGE = { paid: { label: "Paid", tone: "up" }, pending: { label: "Awaiting payment", tone: "warn" } };
+// Sorting the status column puts what still needs chasing first.
+const STATE_RANK = { pending: 0, paid: 1 };
+const plural = (n, one, many) => (n === 1 ? `1 ${one}` : `${n} ${many}`);
+
+/** The chart's buckets for a range: 7 days, the last 4 weeks, or the last 12 months, oldest first. */
+function bucketsFor(range, now) {
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+  if (range === "year") {
+    return Array.from({ length: 12 }, (_, i) => {
+      const start = new Date(today.getFullYear(), today.getMonth() - 11 + i, 1);
+      const end = new Date(today.getFullYear(), today.getMonth() - 10 + i, 1);
+      return { label: start.toLocaleDateString(undefined, { month: "short" }), start: start.getTime(), end: end.getTime() };
+    });
+  }
+  const size = range === "week" ? 1 : 7;
+  const count = range === "week" ? 7 : 4;
+  return Array.from({ length: count }, (_, i) => {
+    const start = new Date(today);
+    start.setDate(today.getDate() - (count - 1 - i) * size - (size - 1));
+    const end = new Date(start);
+    end.setDate(start.getDate() + size);
+    const label =
+      range === "week" ? start.toLocaleDateString(undefined, { weekday: "short" }) : start.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    return { label, start: start.getTime(), end: end.getTime() };
+  });
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("sales");
+  const { docs: sales } = useLiveQuery("type", { key: "sale" });
+  const { can, me } = useVibe("sales");
+  const { requestLogin } = useViewer();
+
+  const [range, setRange] = useState("week");
+  const [item, setItem] = useState("");
+  const [amount, setAmount] = useState("");
+  const [state, setState] = useState("paid");
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  // The sale whose Mark paid write is in flight, so its button can't fire twice.
+  const [markingId, setMarkingId] = useState(undefined);
+
+  // Every figure below is derived from the sale documents; nothing is stored as a total.
+  const buckets = bucketsFor(range, Date.now());
+  const from = buckets[0].start;
+  const to = buckets[buckets.length - 1].end;
+  const inRange = sales.filter((s) => s.createdAt >= from && s.createdAt < to);
+  const takings = inRange.filter((s) => s.state === "paid").reduce((n, s) => n + s.amount, 0);
+  const awaiting = sales.filter((s) => s.state === "pending");
+  const chart = buckets.map((b) => ({
+    label: b.label,
+    total: sales.filter((s) => s.state === "paid" && s.createdAt >= b.start && s.createdAt < b.end).reduce((n, s) => n + s.amount, 0),
+  }));
+  const recent = [...inRange].sort((a, b) => b.createdAt - a.createdAt).slice(0, 8);
+
+  // The verdict for the doc recordSale writes, carrying the same fields it stamps.
+  const canRecord = can.create({ type: "sale", authorHandle: me?.userHandle });
+
+  async function recordSale(e) {
+    e.preventDefault();
+    const next = {};
+    const value = Number(amount);
+    if (item.trim() === "") next.item = "Say what sold.";
+    if (amount.trim() === "" || !Number.isFinite(value) || value <= 0) next.amount = "Enter an amount above zero.";
+    setErrors(next);
+    if (Object.keys(next).length > 0) return;
+    setSaving(true);
+    try {
+      await database.put({ type: "sale", item: item.trim(), amount: value, state, authorHandle: me?.userHandle, createdAt: Date.now() });
+      // Cleared only once the write lands, so a local failure keeps what was typed.
+      setItem("");
+      setAmount("");
+      setState("paid");
+      toast.success("Sale recorded");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function markPaid(sale) {
+    setMarkingId(sale._id);
+    try {
+      await database.put({ ...sale, state: "paid" });
+    } finally {
+      setMarkingId(undefined);
+    }
+  }
+
+  let form;
+  if (canRecord.pending)
+    form = (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  else if (!me)
+    form = (
+      <Card>
+        <Stack gap={3}>
+          <Text muted>Sign in to log a sale, so it reaches everyone on the shop's team.</Text>
+          <Button block onClick={requestLogin}>
+            Sign in to record sales
+          </Button>
+        </Stack>
+      </Card>
+    );
+  else if (!canRecord.ok) form = <Text muted>You're seeing the shop's numbers. Recording sales opens up once you're on the team.</Text>;
+  else
+    form = (
+      <Card>
+        <form onSubmit={recordSale} noValidate>
+          <Stack gap={3}>
+            <Heading level={2}>Record a sale</Heading>
+            <Field label="What sold" error={errors.item}>
+              {(id, describedBy) => (
+                <Input id={id} describedBy={describedBy} value={item} onChange={setItem} placeholder="Fig & cedar candle" autoComplete="off" invalid={errors.item !== undefined} />
+              )}
+            </Field>
+            <Field label="Amount" error={errors.amount}>
+              {(id, describedBy) => (
+                <NumberInput id={id} describedBy={describedBy} value={amount} onChange={setAmount} min={0} step={1} placeholder="24" invalid={errors.amount !== undefined} />
+              )}
+            </Field>
+            <Field label="Payment">
+              {(id, describedBy) => <Select id={id} describedBy={describedBy} value={state} onChange={setState} options={STATES} />}
+            </Field>
+            <Button type="submit" block loading={saving}>
+              Record sale
+            </Button>
+          </Stack>
+        </form>
+      </Card>
+    );
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-8">
+      <Stack gap={5}>
+        <Row justify="between">
+          <Stack gap={1}>
+            <Heading level={1}>Shop overview</Heading>
+            <Text muted>{plural(sales.length, "sale", "sales")} recorded</Text>
+          </Stack>
+          <Segmented label="Range" tone="info" value={range} onChange={setRange} options={RANGES} />
+        </Row>
+
+        <Grid cols={3}>
+          <Stat label="Taken" value={MONEY.format(takings)} icon="up" tone="up" />
+          <Stat label="Sales" value={String(inRange.length)} icon="cart" tone="info" />
+          <Stat label="Awaiting payment" value={String(awaiting.length)} icon="clock" tone="warn" />
+        </Grid>
+
+        <Card>
+          <Stack gap={4}>
+            <Heading level={2}>Money taken</Heading>
+            <AreaChart data={chart} dataKey="label" height={220} series={[{ key: "total", label: "Taken", tone: "up" }]} />
+          </Stack>
+        </Card>
+
+        <Grid cols="sidebar">
+          <Card>
+            <Stack gap={4}>
+              <Heading level={2}>Latest sales</Heading>
+              {recent.length === 0 ? (
+                <Empty icon="cart" title={sales.length === 0 ? "No sales yet" : "No sales in this range"}>
+                  {sales.length === 0 ? "Record the first one and the figures above fill in." : "Pick a longer range to see earlier sales."}
+                </Empty>
+              ) : (
+                <Table
+                  rows={recent}
+                  getKey={(s) => s._id}
+                  columns={[
+                    { key: "item", header: "Item", render: (s) => <Text truncate>{s.item}</Text>, sort: (a, b) => a.item.localeCompare(b.item) },
+                    {
+                      key: "amount",
+                      header: "Amount",
+                      align: "right",
+                      mono: true,
+                      render: (s) => <Text num>{MONEY.format(s.amount)}</Text>,
+                      sort: (a, b) => a.amount - b.amount,
+                    },
+                    {
+                      key: "state",
+                      header: "Status",
+                      align: "right",
+                      render: (s) => (
+                        <Row gap={2} justify="end" wrap={false}>
+                          <Badge tone={STATE_BADGE[s.state]?.tone ?? "warn"}>{STATE_BADGE[s.state]?.label ?? "Awaiting payment"}</Badge>
+                          {s.state === "pending" && can.edit(s).ok && (
+                            <Button size="sm" variant="quiet" loading={markingId === s._id} onClick={() => markPaid(s)}>
+                              Mark paid
+                            </Button>
+                          )}
+                        </Row>
+                      ),
+                      sort: (a, b) => (STATE_RANK[a.state] ?? 0) - (STATE_RANK[b.state] ?? 0),
+                    },
+                  ]}
+                />
+              )}
+            </Stack>
+          </Card>
+          {form}
+        </Grid>
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename the record to the app's own noun (`order`, `ticket`, `donation`) in the `type` key, the form and the copy; keep one document per event and let every figure, bucket and row be computed from them, never a stored running total that two devices could overwrite.
+- A new figure is one more `Stat` with a meaning tone (`up` for good news, `down` for refunds or losses, `warn` for things to chase) and a reducer over the same documents; keep three or four in the `Grid`, and never repeat a figure the chart or a badge already shows.
+- More series on the chart are more entries in `series`, each with an explicit tone and a matching field on every `chart` row; switch to `BarChart` for counts or `LineChart` for a trend without a fill.
+- Sales hold who sold what, so `access.js` and the app's sharing decide who can read them: keep the figures team-only if they are private, and keep customer names or emails off these documents altogether.
+- 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/dashboard.json

package/llms/pouf-editorial.d.ts

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

package/llms/pouf-editorial.js

@@ -0,0 +1,6 @@
+export const poufEditorialConfig = {
+    name: "pouf-editorial",
+    label: "Pouf editorial block",
+    description: "Story pipeline moving drafts through scheduled to published",
+};
+//# sourceMappingURL=pouf-editorial.js.map

package/llms/pouf-editorial.js.map

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