@vibes.diy/prompts 14.3.202 → 14.3.204

package/llms/richtext.md

@@ -10,8 +10,8 @@ in Fireproof, saves after typing pauses, loads a document without echoing it
 back as a save, and styles the written text with Tailwind on the host.
 
 The sibling boundary: a short field (a title, a comment, a caption) is
-pouf's `Textarea` in a `Field`; a feed of posts is `pouf-feed`; a pipeline
-of stories with stages is `pouf-editorial`. Rich text is the right call when
+the UI's `Textarea` in a `Field`; a feed of posts is `ui-feed`; a pipeline
+of stories with stages is `ui-editorial`. Rich text is the right call when
 the person is writing a page.
 
 The worked examples below were built and measured for this doc (Chromium,
@@ -165,7 +165,7 @@ export function createEditor(host, { content = EMPTY_DOC, placeholder = "Start w
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe, useViewer } from "use-vibes";
-import { Badge, Button, Card, Heading, IconButton, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Card, Heading, IconButton, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { EMPTY_DOC, createEditor, titleOf } from "./lib/editor.js";
 
 // The written page is styled from the host: Tailwind reaches into the editor with arbitrary
@@ -471,7 +471,7 @@ through Tailwind's arbitrary variants**: `[&_h1]:text-2xl`,
 `[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]`.
 The JSX stays class-only and the theme tokens (`text-primary`,
 `text-muted-foreground`, `bg-muted`) carry the owner's restyle into the
-written page. Measured: the pouf lint passes a host carrying these classes.
+written page. Measured: the design lint passes a host carrying these classes.
 
 ## Commands and the toolbar
 
@@ -553,7 +553,7 @@ export function createEditor(host, { content = EMPTY_DOC, placeholder = "Start w
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe, useViewer } from "use-vibes";
-import { Badge, Button, Card, Heading, Row, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Card, Heading, Row, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { EMPTY_DOC, createEditor } from "./lib/editor.js";
 
 const PAGE_ID = "page:home";

package/llms/spotify.md

@@ -325,7 +325,7 @@ function artistRow(a) {
 ```jsx app=spotify-browser
 import React, { useEffect, useRef, useState } from "react";
 import { apiFetch } from "use-vibes";
-import { Badge, Button, Field, Heading, Input, Row, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Field, Heading, Input, Row, Stack, Text } from "@vibes.diy/ui";
 
 // The setup verdict, read on mount and again whenever the app comes back into view: the owner
 // sets the pair in another tab and returns, and search unlocks without a reload.

package/llms/stripe-subscriptions.md

@@ -683,7 +683,7 @@ export function club(doc, oldDoc, user, ctx) {
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { apiFetch, useViewer } from "use-vibes";
-import { Badge, Button, Heading, Row, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Heading, Row, Stack, Text } from "@vibes.diy/ui";
 
 // The setup verdict, read on mount and again whenever the app comes back into view: the owner
 // connects Stripe or saves the portal in another tab and returns, and the Join buttons unlock

package/llms/stripe.md

@@ -570,7 +570,7 @@ export function orders(doc, oldDoc, user, ctx) {
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { apiFetch, useVibe } from "use-vibes";
-import { Badge, Button, Heading, Row, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Heading, Row, Stack, Text } from "@vibes.diy/ui";
 
 // The setup verdict, read on mount and again whenever the app comes back into view: the owner
 // connects Stripe in another tab and returns, and the Pay buttons unlock without a reload.
@@ -1184,8 +1184,8 @@ export function checks(doc, oldDoc, user, ctx) {
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { apiFetch } from "use-vibes";
-import { Badge, Button, Field, Figure, Heading, Input, Metric, Row, Segmented, Stack, Text } from "@vibes.diy/pouf";
-import { Checkbox } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Field, Figure, Heading, Input, Metric, Row, Segmented, Stack, Text } from "@vibes.diy/ui";
+import { Checkbox } from "@vibes.diy/ui/interactive";
 
 const money = (cents) => `$${(cents / 100).toFixed(2)}`;
 const post = (body) => ({ method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });

package/llms/strudel.md

@@ -207,7 +207,7 @@ with every write gated on `can`.
 import React, { useEffect, useMemo, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { callAI, useVibe, useViewer } from "use-vibes";
-import { Badge, Button, Card, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Card, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { EXAMPLES, onPatternError, play, stop } from "./lib/strudel.js";
 import { rewritePrompt } from "./lib/pattern-prompt.js";
 
@@ -446,8 +446,8 @@ A groovebox whose lights follow the music, built on the same module:
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe, useViewer } from "use-vibes";
-import { Badge, Button, Card, Field, Heading, Icon, IconButton, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
-import { Slider } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Field, Heading, Icon, IconButton, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
+import { Slider } from "@vibes.diy/ui/interactive";
 import { gridToCode, play, stop } from "./lib/strudel.js";
 
 const ROWS = ["bd", "sd", "hh", "cp"];

package/llms/three-js.md

@@ -1258,7 +1258,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useFireproof } from "use-fireproof";
 import * as THREE from "three";
 import { useWorldControls } from "use-vibes";
-import { Card, Heading, IconButton, Stack, Text } from "@vibes.diy/pouf";
+import { Card, Heading, IconButton, Stack, Text } from "@vibes.diy/ui";
 
 export default function SkyGlider() {
   const { database, useLiveQuery } = useFireproof("skyGliderScores");
@@ -1705,8 +1705,8 @@ import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
 import { HalftonePass } from "three/addons/postprocessing/HalftonePass.js";
-import { Button, Card, Field, Heading, Input, RowCard, Stack, Text } from "@vibes.diy/pouf";
-import { Checkbox, Select, Separator, Slider } from "@vibes.diy/pouf/interactive";
+import { Button, Card, Field, Heading, Input, RowCard, Stack, Text } from "@vibes.diy/ui";
+import { Checkbox, Select, Separator, Slider } from "@vibes.diy/ui/interactive";
 
 export default function HalftoneArtStudio() {
   const { database, useLiveQuery } = useFireproof("halftoneStudio");
@@ -2061,7 +2061,7 @@ export default function HalftoneArtStudio() {
     <div className="relative h-dvh w-full overflow-hidden bg-background text-foreground font-sans">
       <canvas ref={canvasRef} className="absolute inset-0 select-none touch-none" />
 
-      {/* One control panel. The pouf `Card` IS the panel — it takes no className,
+      {/* One control panel. The UI's `Card` IS the panel — it takes no className,
           so a plain wrapper carries its placement; the cushion, corner and ink are its own. */}
       <div className="absolute inset-y-4 left-4 w-80 overflow-y-auto">
         <Card>

package/llms/touch-games.js

@@ -2,7 +2,7 @@ export const touchGamesConfig = {
     name: "touch-games",
     label: "Touch games",
     description: "Phone-first controls for anything played or steered in real time — load it beside three-js, voxel, " +
-        "physics, p5, worlds or pouf-game for every game, 3D scene you move through, or canvas toy: the play area " +
+        "physics, p5, worlds or ui-game for every game, 3D scene you move through, or canvas toy: the play area " +
         "is the controller (select-none touch-none surface, Pointer Events with pointer capture), swipes that fire " +
         "mid-move with chaining, tap vs swipe on one surface, a floating ghost stick under the thumb, hold-to-boost " +
         "with drag steering, pull-back-and-release aiming, gesture trails and feedback, keyboard twins for desktop, " +

package/llms/touch-games.js.map

@@ -1 +1 @@
-{"version":3,"file":"touch-games.js","sourceRoot":"","sources":["../../jsr/llms/touch-games.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,aAAa;IACpB,WAAW,EACT,qGAAqG;QACrG,2GAA2G;QAC3G,4GAA4G;QAC5G,6GAA6G;QAC7G,6GAA6G;QAC7G,iHAAiH;QACjH,2DAA2D;QAC3D,uGAAuG;QACvG,mEAAmE;IAKrE,IAAI,EAAE;QACJ,OAAO;QACP,gBAAgB;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,aAAa;QACb,cAAc;QACd,aAAa;QACb,UAAU;QACV,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,OAAO;QACP,SAAS;QACT,YAAY;QACZ,gBAAgB;QAChB,SAAS;QACT,aAAa;QACb,aAAa;QACb,OAAO;QACP,SAAS;QACT,WAAW;QACX,SAAS;QACT,WAAW;QACX,UAAU;QACV,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,cAAc;QACd,aAAa;QACb,SAAS;KACV;CACF,CAAC"}
+{"version":3,"file":"touch-games.js","sourceRoot":"","sources":["../../jsr/llms/touch-games.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,aAAa;IACpB,WAAW,EACT,qGAAqG;QACrG,yGAAyG;QACzG,4GAA4G;QAC5G,6GAA6G;QAC7G,6GAA6G;QAC7G,iHAAiH;QACjH,2DAA2D;QAC3D,uGAAuG;QACvG,mEAAmE;IAKrE,IAAI,EAAE;QACJ,OAAO;QACP,gBAAgB;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,aAAa;QACb,cAAc;QACd,aAAa;QACb,UAAU;QACV,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,OAAO;QACP,SAAS;QACT,YAAY;QACZ,gBAAgB;QAChB,SAAS;QACT,aAAa;QACb,aAAa;QACb,OAAO;QACP,SAAS;QACT,WAAW;QACX,SAAS;QACT,WAAW;QACX,UAAU;QACV,QAAQ;QACR,YAAY;QACZ,cAAc;QACd,cAAc;QACd,aAAa;QACb,SAAS;KACV;CACF,CAAC"}

package/llms/touch-games.md

@@ -1,7 +1,7 @@
 # Touch games — the play area is the controller
 
 Load this beside whatever draws the game — `three-js`, `voxel`, `physics`, `p5`, `worlds`,
-`pouf-game`, a plain `<canvas>` — whenever the app is something you play or steer in real time:
+`ui-game`, a plain `<canvas>` — whenever the app is something you play or steer in real time:
 a runner, a racer, a flyer, a shooter, a snake, a launcher, a platformer, a pinball table, a
 marble maze, a 3D scene you move through, a toy you drag around. Most people open a vibe on a
 phone, one-handed. The game that feels great there is the one where the thumb rests **on the
@@ -208,7 +208,7 @@ orbits, a click is `onTap`, a right-click is `onHold`, and the wheel zooms.
 import React from "react";
 import * as THREE from "three";
 import { useWorldControls } from "use-vibes";
-import { Button, Card, Heading, IconButton, Stack, Text } from "@vibes.diy/pouf";
+import { Button, Card, Heading, IconButton, Stack, Text } from "@vibes.diy/ui";
 
 const VIEWS = ["Free cam", "First person", "Shoulder view"];
 const HINT = {
@@ -407,7 +407,7 @@ snake by changing what `move()` does.
 ### `App.jsx`
 ```jsx
 import React from "react";
-import { Card, Heading, IconButton, Stack, Text } from "@vibes.diy/pouf";
+import { Card, Heading, IconButton, Stack, Text } from "@vibes.diy/ui";
 
 const TUNE = {
   swipePx: 26, // travel from the anchor before a swipe fires (raise to 30–34 if a resting thumb misfires)

package/llms/ui-blog.d.ts

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

package/llms/ui-blog.js

@@ -0,0 +1,7 @@
+export const uiBlogConfig = {
+    name: "ui-blog",
+    aliases: ["pouf-blog"],
+    label: "Blog block",
+    description: "Blog with a featured post, category filter, pages and a writer",
+};
+//# sourceMappingURL=ui-blog.js.map

package/llms/ui-blog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-blog.js","sourceRoot":"","sources":["../../jsr/llms/ui-blog.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,CAAC,WAAW,CAAC;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,gEAAgE;CAC9E,CAAC"}

package/llms/{pouf-blog.md → ui-blog.md}

@@ -1,12 +1,12 @@
-# Pouf Blog
+# Blog
 
 A blog with a front page and a reading view: a bakery's recipe notes, a travel journal, a club's match reports, a studio's news. Reach for it whenever the app's core is posts written by a few people and read by many, newest first, sorted into a handful of categories. Each post is its own document, so the blog is there on the next visit and on every device, and a new post appears for every reader as soon as it is published.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
-Two views, one job each. The front page opens with an `Eyebrow`, the `Heading` and a muted post count beside a `Write a post` button, the front page's one lead, which opens a `Dialog` with the writing form (title, category, body, each in its own `Field` with its own error). The newest post leads on a `Card` laid out with `Grid cols="sidebar"` beside a decorative `orange` `Blob`; under it a `Segmented` category filter (`tone="info"`) narrows a two-column `Grid` of post `Card`s, each with an `info` category `Badge`, the title, an excerpt in muted `Text`, the writer as a `ViewerTag` with a muted date, and a quiet `Read` button; `Pagination` pages through them and an `Empty` stands in when a category has nothing. Opening a post swaps in the reading view: a quiet `IconButton` back, the title as the `Heading`, the byline and the body as `Text` paragraphs, with a quiet `Delete post` (toned `down`) behind a `Confirm` wearing `tone="down"`, both showing `loading` while the delete lands. Every write waits on its `can` verdict from `useVibe("blog")`, the database the posts live in: the write button gives way to a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves, to a quiet `Sign in to write` wired to `useViewer().requestLogin()` for a visitor who has not signed in, and to a sentence in the app's own words when writing is closed; `Delete post` renders only where `can.delete(post).ok`.
+Two views, one job each. The front page opens with an `Eyebrow`, the `Heading` and a muted post count beside a `Write a post` button, the front page's one lead, which opens a `Dialog` with the writing form (title, category, body, each in its own `Field` with its own error). The newest post leads on a `Card` laid out with `Grid cols="sidebar"` beside a decorative `orange` `IconTile`; under it a `Segmented` category filter (`tone="info"`) narrows a two-column `Grid` of post `Card`s, each with an `info` category `Badge`, the title, an excerpt in muted `Text`, the writer as a `ViewerTag` with a muted date, and a quiet `Read` button; `Pagination` pages through them and an `Empty` stands in when a category has nothing. Opening a post swaps in the reading view: a quiet `IconButton` back, the title as the `Heading`, the byline and the body as `Text` paragraphs, with a quiet `Delete post` (toned `down`) behind a `Confirm` wearing `tone="down"`, both showing `loading` while the delete lands. Every write waits on its `can` verdict from `useVibe("blog")`, the database the posts live in: the write button gives way to a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves, to a quiet `Sign in to write` wired to `useViewer().requestLogin()` for a visitor who has not signed in, and to a sentence in the app's own words when writing is closed; `Delete post` renders only where `can.delete(post).ok`.
 
 ### `App.jsx`
 ```jsx
@@ -15,7 +15,7 @@ import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
 import {
   Badge,
-  Blob,
+  IconTile,
   Button,
   Card,
   Empty,
@@ -33,8 +33,8 @@ import {
   Stack,
   Text,
   Textarea,
-} from "@vibes.diy/pouf";
-import { Confirm, Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+} from "@vibes.diy/ui";
+import { Confirm, Dialog, Select, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const CATEGORIES = [
   { value: "recipes", label: "Recipes" },
@@ -164,7 +164,7 @@ export default function App() {
             </Row>
           )}
         </Stack>
-        <div className="pouf-toasts">
+        <div className="ui-toasts">
           <Toaster />
         </div>
       </main>
@@ -246,7 +246,7 @@ export default function App() {
                     </Button>
                   </Row>
                 </Stack>
-                <Blob icon="sparkle" tone="orange" size="lg" />
+                <IconTile icon="sparkle" tone="orange" size="lg" />
               </Grid>
             </Card>
 
@@ -286,7 +286,7 @@ export default function App() {
           </>
         )}
       </Stack>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>
@@ -298,7 +298,7 @@ export default function App() {
 
 - Swap `CATEGORIES` for the blog's own sections; the filter and the form's `Select` both read from it, so a new section appears in both. Keep the category `Badge`s on one neutral tone (`info`): a category is a label, not a verdict.
 - Keep one document per post with its `authorHandle`; the byline is always a `ViewerTag`, never a typed name.
-- A cover photo is a `_files` attachment on the post, shown with `Figure` in place of the featured `Blob`; drafts that aren't ready yet are a `status` field filtered out of the front page (the editorial block walks posts through that pipeline).
+- A cover photo is a `_files` attachment on the post, shown with `Figure` in place of the featured `IconTile`; drafts that aren't ready yet are a `status` field filtered out of the front page (the editorial block walks posts through that pipeline).
 - Editing a post is the same form, prefilled, writing behind `can.edit(post)`; keep `Delete post` quiet and behind its `Confirm`.
 - 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.
 

package/llms/ui-booking.d.ts

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

package/llms/ui-booking.js

@@ -0,0 +1,7 @@
+export const uiBookingConfig = {
+    name: "ui-booking",
+    aliases: ["pouf-booking"],
+    label: "Booking block",
+    description: "Appointment booking: pick a service, day and free slot, confirm",
+};
+//# sourceMappingURL=ui-booking.js.map

package/llms/ui-booking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-booking.js","sourceRoot":"","sources":["../../jsr/llms/ui-booking.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,CAAC,cAAc,CAAC;IACzB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,iEAAiE;CAC/E,CAAC"}

package/llms/{pouf-booking.md → ui-booking.md}

@@ -1,12 +1,12 @@
-# Pouf Booking
+# Booking
 
 An appointment booker: pick a service, a day and a free time, add a name, review, confirm. It fits a massage practice's sessions, a tutor's lessons, a studio's portrait slots or a repair café's drop-in times. Reach for it whenever the app's core is people claiming time slots that only one person can hold. Every booking persists as its own document and availability is worked out from them, so a taken time disappears for everyone and the booker finds their sessions on every visit.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
-Two cards beside each other in a `Grid cols="sidebar"`. The main side opens with an `Eyebrow`, the `Heading` and a muted promise, then the person's own bookings on a `Card`. Each booking shows a `Badge`: `up` when confirmed, `warn` when someone else got the time first. Each one has a quiet `Cancel` behind a `Confirm` wearing `tone="down"`, offered only where `can.delete(booking).ok`. The side holds the wizard, one step at a time under an `Eyebrow` and a `Progress` bar (`tone="info"`): each service is a clickable `RowCard` with a decorative `orange` `Blob`; the day is a `Segmented` (`tone="info"`) and the time a `RadioGroup` of only the free times, with a muted line when a day is full; the details are a name `Input` in a `Field` with its own error (nothing private, because every booking is readable so free times can be worked out); and the review ends in `Confirm booking`, that step's one lead, which shows `loading` while the write lands. Each booking is its own document, never a flag on a shared calendar document. Two people can confirm the same time at once, and sync keeps both documents, so availability is derived: a slot belongs to its earliest booking (by `createdAt`, then `_id`). A later one is shown to its booker as a clash, with a `Pick another time` button that removes it and keeps their details. Confirming waits on its `can` verdict from `useVibe("bookings")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, and a sentence in the app's own words when booking is closed. For a visitor who has not signed in, the lead is `Sign in to confirm`, wired to `useViewer().requestLogin()`, and their choices stay in place. Sign-in is required here, unlike a local-first note, because a signed-out write stays on the device until sign-in: a booking made that way would never reach the practice or hold the slot against anyone else. Between the write and the live query catching up, the wizard shows a confirming `Skeleton` rather than the review again, so the lead can't book twice; cancelling the booking just made resets the wizard.
+Two cards beside each other in a `Grid cols="sidebar"`. The main side opens with an `Eyebrow`, the `Heading` and a muted promise, then the person's own bookings on a `Card`. Each booking shows a `Badge`: `up` when confirmed, `warn` when someone else got the time first. Each one has a quiet `Cancel` behind a `Confirm` wearing `tone="down"`, offered only where `can.delete(booking).ok`. The side holds the wizard, one step at a time under an `Eyebrow` and a `Progress` bar (`tone="info"`): each service is a clickable `RowCard` with a decorative `orange` `IconTile`; the day is a `Segmented` (`tone="info"`) and the time a `RadioGroup` of only the free times, with a muted line when a day is full; the details are a name `Input` in a `Field` with its own error (nothing private, because every booking is readable so free times can be worked out); and the review ends in `Confirm booking`, that step's one lead, which shows `loading` while the write lands. Each booking is its own document, never a flag on a shared calendar document. Two people can confirm the same time at once, and sync keeps both documents, so availability is derived: a slot belongs to its earliest booking (by `createdAt`, then `_id`). A later one is shown to its booker as a clash, with a `Pick another time` button that removes it and keeps their details. Confirming waits on its `can` verdict from `useVibe("bookings")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, and a sentence in the app's own words when booking is closed. For a visitor who has not signed in, the lead is `Sign in to confirm`, wired to `useViewer().requestLogin()`, and their choices stay in place. Sign-in is required here, unlike a local-first note, because a signed-out write stays on the device until sign-in: a booking made that way would never reach the practice or hold the slot against anyone else. Between the write and the live query catching up, the wizard shows a confirming `Skeleton` rather than the review again, so the lead can't book twice; cancelling the booking just made resets the wizard.
 
 ### `App.jsx`
 ```jsx
@@ -15,7 +15,7 @@ import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
 import {
   Badge,
-  Blob,
+  IconTile,
   Button,
   Card,
   Empty,
@@ -31,8 +31,8 @@ import {
   Spacer,
   Stack,
   Text,
-} from "@vibes.diy/pouf";
-import { Confirm, Progress, RadioGroup, Toaster, toast } from "@vibes.diy/pouf/interactive";
+} from "@vibes.diy/ui";
+import { Confirm, Progress, RadioGroup, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const SERVICES = [
   { id: "relax", name: "Relaxation massage", blurb: "A slow, full-body session to unwind.", minutes: 60, price: 80, icon: "sparkle" },
@@ -227,7 +227,7 @@ export default function App() {
                 }}
               >
                 <Row gap={3} wrap={false} align="top">
-                  <Blob icon={s.icon} tone="orange" size="sm" />
+                  <IconTile icon={s.icon} tone="orange" size="sm" />
                   <Stack gap={1}>
                     <Text>{s.name}</Text>
                     <Text size="sm" muted>
@@ -378,7 +378,7 @@ export default function App() {
         </Stack>
         <Card>{wizard}</Card>
       </Grid>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-calendar.d.ts

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

package/llms/ui-calendar.js

@@ -0,0 +1,7 @@
+export const uiCalendarConfig = {
+    name: "ui-calendar",
+    aliases: ["pouf-calendar"],
+    label: "Calendar block",
+    description: "Calendar agenda/month view UI: month grid, day timeline, saved events",
+};
+//# sourceMappingURL=ui-calendar.js.map

package/llms/ui-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-calendar.js","sourceRoot":"","sources":["../../jsr/llms/ui-calendar.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,CAAC,eAAe,CAAC;IAC1B,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,uEAAuE;CACrF,CAAC"}

package/llms/{pouf-calendar.md → ui-calendar.md}

@@ -1,8 +1,8 @@
-# Pouf Calendar
+# Calendar
 
 An on-screen calendar of timed events: a studio's class timetable, a family's appointments, a club's practice schedule, a shared room's bookings for the week. Reach for it when the app shows a month at a glance and one day's agenda in time order, with the free gaps between events and a line where "now" falls, and lets people add and remove events. This is the calendar people look at inside the app; a subscribable phone-calendar feed (webcal or `.ics`) is a different job, served from the backend. Each event is its own document, so everyone who opens the app sees the same schedule.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
@@ -13,8 +13,8 @@ One view with one job: see what is on and add to it. The `Heading` and a muted l
 import React, { useEffect, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Button, Card, Empty, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
-import { Confirm, Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Empty, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/ui";
+import { Confirm, Dialog, Select, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const pad = (n) => String(n).padStart(2, "0");
 // Dates are kept as local YYYY-MM-DD strings, so an event never drifts a day across time zones.
@@ -332,7 +332,7 @@ export default function App() {
           </Stack>
         </Card>
       </Stack>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-chat.d.ts

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

package/llms/ui-chat.js

@@ -0,0 +1,7 @@
+export const uiChatConfig = {
+    name: "ui-chat",
+    aliases: ["pouf-chat"],
+    label: "Chat block",
+    description: "Group chat with rooms, live message threads and a composer",
+};
+//# sourceMappingURL=ui-chat.js.map

package/llms/ui-chat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-chat.js","sourceRoot":"","sources":["../../jsr/llms/ui-chat.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,CAAC,WAAW,CAAC;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,4DAA4D;CAC1E,CAAC"}

package/llms/{pouf-chat.md → ui-chat.md}

@@ -1,8 +1,8 @@
-# Pouf Chat
+# Chat
 
 A group conversation split into rooms: a crew's chat with a room per trip, a band's thread per song, a household's rooms for groceries and plans, a class's channel per project. Reach for it whenever the app's core is people sending each other short messages that read top to bottom as they arrive. Rooms and messages persist and arrive live, so everyone in the app sees a new message as soon as it is sent, on every device.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
@@ -13,8 +13,8 @@ Two views, one job each. The room list opens with the `Heading` and a muted coun
 import React, { useEffect, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Button, Card, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
-import { ScrollArea } from "@vibes.diy/pouf/interactive";
+import { Button, Card, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/ui";
+import { ScrollArea } from "@vibes.diy/ui/interactive";
 
 const when = (ms) => new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 

package/llms/ui-contact.d.ts

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

package/llms/ui-contact.js

@@ -0,0 +1,7 @@
+export const uiContactConfig = {
+    name: "ui-contact",
+    aliases: ["pouf-contact"],
+    label: "Contact block",
+    description: "Contact form with validation that saves each message for the team",
+};
+//# sourceMappingURL=ui-contact.js.map

package/llms/ui-contact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-contact.js","sourceRoot":"","sources":["../../jsr/llms/ui-contact.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,CAAC,cAAc,CAAC;IACzB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,mEAAmE;CACjF,CAAC"}

package/llms/{pouf-contact.md → ui-contact.md}

@@ -1,20 +1,20 @@
-# Pouf Contact
+# Contact
 
 A get-in-touch section where someone leaves their name, email, a topic and a message for the people behind the app: a photography studio's enquiry form, a community garden's question box, a band's booking request. Reach for it whenever the app's job is to collect a note and say clearly that it arrived. Every message persists as its own document, so the team can read and answer them later (the inbox block is the reading side).
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
-One view with one job: send a note. A `Grid cols="sidebar"` puts the pitch beside the form: an `info` `Badge` with the reply time, an `Eyebrow`, the `Heading` and a muted line, then two tight `Card`s that tilt, each fronted by a small `Blob` (`info` mail, `idle` clock). The form sits on its own `Card`: name and email `Input`s, a topic `Select` and a message `Textarea`, each in a `Field`. It is checked in plain state on submit, with each error on its own `Field`, its control `invalid` and focus moved to the first one. `Send message` is the view's one lead and shows `loading` while the write lands. Each message is one document, stamped with the sender's handle when they are signed in. The form waits on its `can` verdict from `useVibe("contact")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to send a message` lead wired to `requestLogin()` when sending is closed to a signed-out visitor, and a sentence in the app's own words when it is closed to someone already signed in. Where `access.js` lets a signed-out visitor write, they can still send; their note is kept on this device until they sign in. So their confirmation says that honestly (`Your note is waiting`), and its lead is `Sign in to send it`, wired to `useViewer().requestLogin()`. A signed-in sender sees `Message sent` in an `Empty`, with a quiet `Send another message`.
+One view with one job: send a note. A `Grid cols="sidebar"` puts the pitch beside the form: an `info` `Badge` with the reply time, an `Eyebrow`, the `Heading` and a muted line, then two tight `Card`s that tilt, each fronted by a small `IconTile` (`info` mail, `idle` clock). The form sits on its own `Card`: name and email `Input`s, a topic `Select` and a message `Textarea`, each in a `Field`. It is checked in plain state on submit, with each error on its own `Field`, its control `invalid` and focus moved to the first one. `Send message` is the view's one lead and shows `loading` while the write lands. Each message is one document, stamped with the sender's handle when they are signed in. The form waits on its `can` verdict from `useVibe("contact")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to send a message` lead wired to `requestLogin()` when sending is closed to a signed-out visitor, and a sentence in the app's own words when it is closed to someone already signed in. Where `access.js` lets a signed-out visitor write, they can still send; their note is kept on this device until they sign in. So their confirmation says that honestly (`Your note is waiting`), and its lead is `Sign in to send it`, wired to `useViewer().requestLogin()`. A signed-in sender sees `Message sent` in an `Empty`, with a quiet `Send another message`.
 
 ### `App.jsx`
 ```jsx
 import React, { useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Blob, Button, Card, Empty, Eyebrow, Field, Grid, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
-import { Select } from "@vibes.diy/pouf/interactive";
+import { Badge, IconTile, Button, Card, Empty, Eyebrow, Field, Grid, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/ui";
+import { Select } from "@vibes.diy/ui/interactive";
 
 const TOPICS = [
   { value: "booking", label: "Book a shoot" },
@@ -194,7 +194,7 @@ export default function App() {
           </Stack>
           <Card variant="tight" motion="tilt-left">
             <Row gap={3} wrap={false} align="top">
-              <Blob icon="mail" tone="info" size="sm" />
+              <IconTile icon="mail" tone="info" size="sm" />
               <Stack gap={1}>
                 <Text>Prefer email?</Text>
                 <Text size="sm" muted>
@@ -205,7 +205,7 @@ export default function App() {
           </Card>
           <Card variant="tight" motion="tilt-right">
             <Row gap={3} wrap={false} align="top">
-              <Blob icon="clock" tone="idle" size="sm" />
+              <IconTile icon="clock" tone="idle" size="sm" />
               <Stack gap={1}>
                 <Text>Read by a person</Text>
                 <Text size="sm" muted>

package/llms/ui-course.d.ts

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

package/llms/ui-course.js

@@ -0,0 +1,7 @@
+export const uiCourseConfig = {
+    name: "ui-course",
+    aliases: ["pouf-course"],
+    label: "Course block",
+    description: "Course outline with lessons to complete and a progress bar",
+};
+//# sourceMappingURL=ui-course.js.map

package/llms/ui-course.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-course.js","sourceRoot":"","sources":["../../jsr/llms/ui-course.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,CAAC,aAAa,CAAC;IACxB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,4DAA4D;CAC1E,CAAC"}

package/llms/{pouf-course.md → ui-course.md}

@@ -1,12 +1,12 @@
-# Pouf Course
+# Course
 
 A course outline someone works through lesson by lesson: a beginner pottery class, new staff training at a café, a study plan for an exam, a coding bootcamp's first week. Reach for it whenever the app's core is an ordered set of lessons, each with a rough length, that a person marks complete while a bar shows how far along they are. The lessons and each person's completions persist, so progress is waiting on the next visit and on every device, and every learner keeps their own.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
-Two views, one job each. The outline opens with the `Heading` and a muted count beside a quiet `Add lesson` button that opens a `Dialog` with the lesson form. A `Card` holds the person's progress: a `Progress` bar toned `up`, the percent and minutes left in `Text`, a `Blob` (`info` target while lessons remain, `up` trophy once they are all done) and a `Continue` button, the outline's one lead, that opens the next unfinished lesson. Each lesson is a clickable `RowCard` with a small `Blob`, a muted line for its kind and length, its title and a `Badge` (`up` done, `idle` to do); an `Empty` stands in before the first lesson. Opening a lesson swaps in the lesson view: a quiet `IconButton` to go back, the kind as an `info` `Badge`, the title as the `Heading`, `Metric`s for the time and the lesson's place in the course, and `Mark complete` as that view's lead (or, once done, a quiet `Mark not done` beside a `Next lesson` lead). A completion is its own document with a deterministic `_id` per lesson and person, so each learner's progress is theirs and marking twice lands on one document. Every write waits on its `can` verdict from `useVibe("course")`: the lesson form and the completion buttons 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. Progress belongs to a person, so a visitor who has not signed in sees a `Sign in to track progress` button wired to `useViewer().requestLogin()` instead of the completion buttons.
+Two views, one job each. The outline opens with the `Heading` and a muted count beside a quiet `Add lesson` button that opens a `Dialog` with the lesson form. A `Card` holds the person's progress: a `Progress` bar toned `up`, the percent and minutes left in `Text`, an `IconTile` (`info` target while lessons remain, `up` trophy once they are all done) and a `Continue` button, the outline's one lead, that opens the next unfinished lesson. Each lesson is a clickable `RowCard` with a small `IconTile`, a muted line for its kind and length, its title and a `Badge` (`up` done, `idle` to do); an `Empty` stands in before the first lesson. Opening a lesson swaps in the lesson view: a quiet `IconButton` to go back, the kind as an `info` `Badge`, the title as the `Heading`, `Metric`s for the time and the lesson's place in the course, and `Mark complete` as that view's lead (or, once done, a quiet `Mark not done` beside a `Next lesson` lead). A completion is its own document with a deterministic `_id` per lesson and person, so each learner's progress is theirs and marking twice lands on one document. Every write waits on its `can` verdict from `useVibe("course")`: the lesson form and the completion buttons 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. Progress belongs to a person, so a visitor who has not signed in sees a `Sign in to track progress` button wired to `useViewer().requestLogin()` instead of the completion buttons.
 
 ### `App.jsx`
 ```jsx
@@ -15,7 +15,7 @@ import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
 import {
   Badge,
-  Blob,
+  IconTile,
   Button,
   Card,
   Empty,
@@ -32,8 +32,8 @@ import {
   Spacer,
   Stack,
   Text,
-} from "@vibes.diy/pouf";
-import { Dialog, Progress, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+} from "@vibes.diy/ui";
+import { Dialog, Progress, Select, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const KINDS = [
   { value: "Lesson", label: "Lesson" },
@@ -247,7 +247,7 @@ export default function App() {
                     </Row>
                   )}
                 </Stack>
-                <Blob icon={finished ? "trophy" : "target"} tone={finished ? "up" : "info"} size="md" />
+                <IconTile icon={finished ? "trophy" : "target"} tone={finished ? "up" : "info"} size="md" />
               </Row>
             </Card>
           )}
@@ -263,7 +263,7 @@ export default function App() {
                 return (
                   <RowCard key={lesson._id} onClick={() => setOpenId(lesson._id)}>
                     <Row gap={3} wrap={false}>
-                      <Blob icon={done ? "ok" : lesson.kind === "Quiz" ? "wand" : "play"} tone={done ? "up" : "idle"} size="sm" />
+                      <IconTile icon={done ? "ok" : lesson.kind === "Quiz" ? "wand" : "play"} tone={done ? "up" : "idle"} size="sm" />
                       <Stack gap={1}>
                         <Text size="sm" muted>
                           {lesson.kind} · {MINUTES.format(lesson.minutes)}
@@ -280,7 +280,7 @@ export default function App() {
           )}
         </Stack>
       )}
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-crm.d.ts

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

package/llms/ui-crm.js

@@ -0,0 +1,7 @@
+export const uiCrmConfig = {
+    name: "ui-crm",
+    aliases: ["pouf-crm"],
+    label: "Crm block",
+    description: "Customer list with stages, account details and notes per contact",
+};
+//# sourceMappingURL=ui-crm.js.map

package/llms/ui-crm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-crm.js","sourceRoot":"","sources":["../../jsr/llms/ui-crm.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,CAAC,UAAU,CAAC;IACrB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,kEAAkE;CAChF,CAAC"}