@vibes.diy/prompts 14.3.202 → 14.3.204

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

@@ -1,20 +1,20 @@
-# Pouf Music
+# Music
 
 A player screen for a short list of tracks: a band's demos, a choir's rehearsal parts, a podcast's episodes, a class's listening list. Reach for it whenever the app's core is picking something from a queue and moving through it with play, skip and a scrubber. The track list stays inline in the code and playback lives in the page; each like is its own document per person and track, so a visitor's favourites are still marked on the next visit and on every device, and the like count is real.
 
-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: choose a track and move through it. A `Card` holds the player: a decorative `orange` `Blob` as the cover, a `Badge` for the transport's state (`up` playing, `idle` paused), the title as the `Heading` with the artist and like count in muted `Text`, a quiet heart `IconButton` to like the track, a `Slider` scrubber with numeric elapsed and total times, and the transport row of quiet `IconButton`s (previous, play/pause, next). The scrubber's filled range is the view's one lead mark: `Slider` always paints its range in the lead colour and takes no `tone`, so every button beside it stays quiet. Nothing plays until the person presses play, and the example carries no audio of its own: the track list is placeholder metadata and the scrubber is driven by a timer, ready to be wired to the app's own files. Under the player an `Eyebrow` heads the queue, one clickable `RowCard` per track with its title and artist in `Text`, a heart `Icon` on the visitor's liked tracks and the length in numeric muted `Text`. Liking waits on its `can` verdict from `useVibe("music")`, the database the likes live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, the heart wired to `useViewer().requestLogin()` with the label `Sign in to like` for a visitor who has not signed in, and a sentence in the app's own words when likes are closed; unliking waits on `can.delete` of the visitor's own like.
+One view with one job: choose a track and move through it. A `Card` holds the player: a decorative `orange` `IconTile` as the cover, a `Badge` for the transport's state (`up` playing, `idle` paused), the title as the `Heading` with the artist and like count in muted `Text`, a quiet heart `IconButton` to like the track, a `Slider` scrubber with numeric elapsed and total times, and the transport row of quiet `IconButton`s (previous, play/pause, next). The scrubber's filled range is the view's one lead mark: `Slider` always paints its range in the lead colour and takes no `tone`, so every button beside it stays quiet. Nothing plays until the person presses play, and the example carries no audio of its own: the track list is placeholder metadata and the scrubber is driven by a timer, ready to be wired to the app's own files. Under the player an `Eyebrow` heads the queue, one clickable `RowCard` per track with its title and artist in `Text`, a heart `Icon` on the visitor's liked tracks and the length in numeric muted `Text`. Liking waits on its `can` verdict from `useVibe("music")`, the database the likes live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, the heart wired to `useViewer().requestLogin()` with the label `Sign in to like` for a visitor who has not signed in, and a sentence in the app's own words when likes are closed; unliking waits on `can.delete` of the visitor's own like.
 
 ### `App.jsx`
 ```jsx
 import React, { useEffect, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Blob, Card, Eyebrow, Heading, Icon, IconButton, Row, RowCard, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
-import { Slider } from "@vibes.diy/pouf/interactive";
+import { Badge, IconTile, Card, Eyebrow, Heading, Icon, IconButton, Row, RowCard, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
+import { Slider } from "@vibes.diy/ui/interactive";
 
 // Placeholder metadata: swap in the app's own tracks. No audio ships with this example.
 const QUEUE = [
@@ -110,7 +110,7 @@ export default function App() {
         <Card>
           <Stack gap={5}>
             <Row justify="between" align="top">
-              <Blob icon="music" tone="orange" size="lg" />
+              <IconTile icon="music" tone="orange" size="lg" />
               <Badge tone={playing ? "up" : "idle"}>{playing ? "Playing" : "Paused"}</Badge>
             </Row>
             <Row justify="between" align="top" wrap={false}>

package/llms/ui-onboarding.d.ts

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

package/llms/ui-onboarding.js

@@ -0,0 +1,7 @@
+export const uiOnboardingConfig = {
+    name: "ui-onboarding",
+    aliases: ["pouf-onboarding"],
+    label: "Onboarding block",
+    description: "Step-by-step setup wizard with progress; answers saved on finish",
+};
+//# sourceMappingURL=ui-onboarding.js.map

package/llms/ui-onboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-onboarding.js","sourceRoot":"","sources":["../../jsr/llms/ui-onboarding.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,CAAC,iBAAiB,CAAC;IAC5B,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,kEAAkE;CAChF,CAAC"}

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

@@ -1,8 +1,8 @@
-# Pouf Onboarding
+# Onboarding
 
 A short setup wizard that walks a newcomer through a few questions, one at a time: a study group's "who are you and which team", a freelance tool's business name and plan, a club's first-visit questions. Reach for it whenever the app needs a handful of answers before it is useful and they read better as steps than as one long form. The answers persist as the person's own document, so a finished setup stays finished and can be revisited and changed later.
 
-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 `Card` with one job per step. An `Eyebrow` names the step ("Step 2 of 3 · W
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Button, Card, Eyebrow, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
-import { Progress, RadioGroup, Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { Button, Card, Eyebrow, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
+import { Progress, RadioGroup, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const STEPS = ["About you", "Workspace", "How you'll use it"];
 const PLANS = [
@@ -208,7 +208,7 @@ export default function App() {
           </form>
         )}
       </Card>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-pricing.d.ts

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

package/llms/ui-pricing.js

@@ -0,0 +1,7 @@
+export const uiPricingConfig = {
+    name: "ui-pricing",
+    aliases: ["pouf-pricing"],
+    label: "Pricing block",
+    description: "Pricing plans with a billing-cycle toggle; records plan requests, no payment",
+};
+//# sourceMappingURL=ui-pricing.js.map

package/llms/ui-pricing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-pricing.js","sourceRoot":"","sources":["../../jsr/llms/ui-pricing.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,8EAA8E;CAC5F,CAAC"}

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

@@ -1,8 +1,8 @@
-# Pouf Pricing
+# Pricing
 
 A plans page that compares a few tiers and lets someone ask for one: a yoga studio's memberships, a tutor's packages, a club's season passes, a freelancer's retainers. Reach for it whenever the app's core is "here is what each option costs, pick one". The plans themselves stay inline in the code. Picking a paid plan saves a request document, so the person sees what they asked for on the next visit and the app keeps a record of who asked for what; the owner's view of those requests is a short addition sketched under Adapting. It takes no payment and pretends to take none: settling up is arranged after the request, or by a separate payment integration.
 
-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: compare and choose. An `Eyebrow` and a `Heading` with one
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Button, Card, Eyebrow, Grid, Heading, Highlight, Icon, Row, Segmented, Skeleton, Stack, Text } from "@vibes.diy/pouf";
-import { Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Eyebrow, Grid, Heading, Highlight, Icon, Row, Segmented, Skeleton, Stack, Text } from "@vibes.diy/ui";
+import { Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const PLANS = [
   { id: "taster", name: "Taster", monthly: 0, blurb: "Try a class before you choose.", features: ["Your first class free", "Mat hire included"] },
@@ -174,7 +174,7 @@ export default function App() {
           No card needed here. Choosing a plan sends us a request, and we arrange payment with you before it starts.
         </Text>
       </Stack>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-profile.d.ts

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

package/llms/ui-profile.js

@@ -0,0 +1,7 @@
+export const uiProfileConfig = {
+    name: "ui-profile",
+    aliases: ["pouf-profile"],
+    label: "Profile block",
+    description: "Public profile page with stats, tabs and a saved follow button",
+};
+//# sourceMappingURL=ui-profile.js.map

package/llms/ui-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-profile.js","sourceRoot":"","sources":["../../jsr/llms/ui-profile.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,gEAAgE;CAC9E,CAAC"}

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

@@ -1,8 +1,8 @@
-# Pouf Profile
+# Profile
 
 A public page about one maker, coach or group that visitors can follow: an illustrator's page, a running coach's profile, a band's home, a club captain's corner. Reach for it whenever the app's core is "who is this, what have they made, and how do I keep up". The profile's own words and posts stay inline in the code; each follow is its own document, so the follower count is real, it survives the next visit, and two people following at once both count.
 
-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: get to know the person, then follow. A `Card` holds the h
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Button, Card, Empty, Eyebrow, Heading, Metric, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
-import { Avatar, Tabs } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Empty, Eyebrow, Heading, Metric, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/ui";
+import { Avatar, Tabs } from "@vibes.diy/ui/interactive";
 
 const PROFILE = {
   name: "Mira Okafor",

package/llms/ui-quiz.d.ts

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

package/llms/ui-quiz.js

@@ -0,0 +1,7 @@
+export const uiQuizConfig = {
+    name: "ui-quiz",
+    aliases: ["pouf-quiz"],
+    label: "Quiz block",
+    description: "Multiple-choice quiz with instant feedback, a scored result and saved attempts",
+};
+//# sourceMappingURL=ui-quiz.js.map

package/llms/ui-quiz.js.map

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

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

@@ -1,20 +1,20 @@
-# Pouf Quiz
+# Quiz
 
 A short multiple-choice quiz that keeps score: an astronomy club's star-chart check, a refresher round before a test, a pub quiz warm-up, a training check for new staff. Reach for it when the app asks a handful of questions one at a time, says right or wrong after each answer, ends on a score and lets people come back to beat it. Each finished attempt someone saves is its own document, so their past scores are there on the next visit and on any 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
 
-One view with one job: answer the questions, then keep the score. A `Heading` and a muted line open the page. The quiz sits on a `Card`: an `Eyebrow` with the question number beside an `info` `Badge` counting correct answers so far (it steps aside on the result, which states the score once), and a `Progress` (`info`) across the top. Each question is a `Heading level={2}` over a `RadioGroup`; `Check answer` is the view's one lead, then the answer shows as a `Badge` (`up` right, `down` wrong) with the right option in muted `Text`, and the lead becomes `Next question`. The result swaps in a `Blob` (`up` for a pass, `warn` otherwise), the score and a recap of every question with its own `up` or `down` `Badge`. `Save score` is then the lead, with `loading` while the write lands, beside a quiet `Play again`. A signed-in person's earlier attempts sit below as `RowCard`s, newest first, each with a `Badge` toned by how it went. Saving waits on its `can` verdict from `useVibe("quiz")`, the database the attempts live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to save your score` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when saving is closed. Anyone can take the quiz without signing in; the attempt lives only in the page until it is saved, and the copy says so.
+One view with one job: answer the questions, then keep the score. A `Heading` and a muted line open the page. The quiz sits on a `Card`: an `Eyebrow` with the question number beside an `info` `Badge` counting correct answers so far (it steps aside on the result, which states the score once), and a `Progress` (`info`) across the top. Each question is a `Heading level={2}` over a `RadioGroup`; `Check answer` is the view's one lead, then the answer shows as a `Badge` (`up` right, `down` wrong) with the right option in muted `Text`, and the lead becomes `Next question`. The result swaps in an `IconTile` (`up` for a pass, `warn` otherwise), the score and a recap of every question with its own `up` or `down` `Badge`. `Save score` is then the lead, with `loading` while the write lands, beside a quiet `Play again`. A signed-in person's earlier attempts sit below as `RowCard`s, newest first, each with a `Badge` toned by how it went. Saving waits on its `can` verdict from `useVibe("quiz")`, the database the attempts live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to save your score` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when saving is closed. Anyone can take the quiz without signing in; the attempt lives only in the page until it is saved, and the copy says so.
 
 ### `App.jsx`
 ```jsx
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Blob, Button, Card, Eyebrow, Heading, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
-import { Progress, RadioGroup } from "@vibes.diy/pouf/interactive";
+import { Badge, IconTile, Button, Card, Eyebrow, Heading, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/ui";
+import { Progress, RadioGroup } from "@vibes.diy/ui/interactive";
 
 const QUIZ_ID = "houseplants";
 const QUESTIONS = [
@@ -177,7 +177,7 @@ export default function App() {
             {done ? (
               <Stack gap={4}>
                 <Row gap={3} wrap={false}>
-                  <Blob icon={passed ? "trophy" : "flame"} tone={passed ? "up" : "warn"} />
+                  <IconTile icon={passed ? "trophy" : "flame"} tone={passed ? "up" : "warn"} />
                   <Stack gap={1}>
                     <Heading level={2}>{score === TOTAL ? "Perfect score!" : passed ? "Nice work" : "Keep practising"}</Heading>
                     <Text muted>

package/llms/ui-settings.d.ts

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

package/llms/ui-settings.js

@@ -0,0 +1,7 @@
+export const uiSettingsConfig = {
+    name: "ui-settings",
+    aliases: ["pouf-settings"],
+    label: "Settings block",
+    description: "Per-person settings with tabs, switches and a save bar",
+};
+//# sourceMappingURL=ui-settings.js.map

package/llms/ui-settings.js.map

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

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

@@ -1,8 +1,8 @@
-# Pouf Settings
+# Settings
 
 A settings screen for each person's own preferences: the display name in a sleep log, reminder emails for a reading log, a compact or comfortable layout, how loud an alert should be. Reach for it whenever the app lets someone tune how it treats them and expects those choices to stick. Each person's settings persist as their own document, so a choice made on the phone is there on the laptop.
 
-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: change your settings and save them. An `Eyebrow`, the `He
 import React, { useEffect, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Badge, Button, Card, Eyebrow, Field, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
-import { RadioGroup, Separator, Slider, Switch, Tabs, Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Eyebrow, Field, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/ui";
+import { RadioGroup, Separator, Slider, Switch, Tabs, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const DEFAULTS = { name: "", bio: "", density: "comfortable", emailNotif: true, pushNotif: false, volume: 60 };
 const KEYS = Object.keys(DEFAULTS);
@@ -201,7 +201,7 @@ export default function App() {
         // Re-keyed when the saved copy first arrives, so the form starts from it.
         <SettingsForm key={saved ? "saved" : "new"} saved={saved} database={database} can={can} me={me} />
       )}
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-storefront.d.ts

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

package/llms/ui-storefront.js

@@ -0,0 +1,7 @@
+export const uiStorefrontConfig = {
+    name: "ui-storefront",
+    aliases: ["pouf-storefront"],
+    label: "Storefront block",
+    description: "Product grid with filters, a shopping bag and checkout, no payments",
+};
+//# sourceMappingURL=ui-storefront.js.map

package/llms/ui-storefront.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-storefront.js","sourceRoot":"","sources":["../../jsr/llms/ui-storefront.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,CAAC,iBAAiB,CAAC;IAC5B,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,qEAAqE;CACnF,CAAC"}

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

@@ -1,12 +1,12 @@
-# Pouf Storefront
+# Storefront
 
 A small shop: product cards to browse, a category filter and a search, a bag that adds things up, and a checkout that places the order. It fits a potter's ceramics, a bakery's preorders, a club's merch table or a school fair's stall. Reach for it whenever the app's core is a short catalogue that people pick from and then order. The catalogue stays inline in the code, and the bag lives in the page while someone shops. Each placed order persists as its own document, so the shop can see what to make and the buyer can see what they ordered. It records orders only; taking payment is a separate integration this block does not pretend to do.
 
-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: fill the bag and place the order. A `Navbar` carries the brand and a quiet bag button with a live count, and the `Heading` puts an `orange` `Highlight` on one word beside a muted line. A `Segmented` category filter (`tone="info"`) and a search `Input` in a `Field` sit above a `Grid cols="sidebar"`: on the main side a two-column grid of product `Card`s, each with a decorative `orange` `Blob`, an `info` `Badge` for "New" or "Bestseller", the price in numeric `Text` and a quiet `Add to bag` (an `Empty` stands in when nothing matches); on the side the bag's `Card`, one line per product with its total and `IconButton`s to take one away or add one, then the subtotal, shipping and total. `Place order` is the view's one lead; it shows `loading` while the write lands, and the bag empties only after it does. An order is one document holding a snapshot of each line's name, price and quantity, the totals and the buyer's handle, so a later price change never rewrites an order already placed; the person's own orders list under the bag, each with a `Badge` for its status (`info` received, `warn` ready to collect, `up` collected). Checkout waits on its `can` verdict from `useVibe("shop")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a sentence in the app's own words when ordering is closed, and for a visitor who has not signed in a `Sign in to place your order` lead wired to `useViewer().requestLogin()`, with the bag they filled kept in place. Sign-in is required here, unlike a local-first note, because a signed-out write stays on the device until sign-in: an order placed that way would never reach the shop.
+One view with one job: fill the bag and place the order. A `Navbar` carries the brand and a quiet bag button with a live count, and the `Heading` puts an `orange` `Highlight` on one word beside a muted line. A `Segmented` category filter (`tone="info"`) and a search `Input` in a `Field` sit above a `Grid cols="sidebar"`: on the main side a two-column grid of product `Card`s, each with a decorative `orange` `IconTile`, an `info` `Badge` for "New" or "Bestseller", the price in numeric `Text` and a quiet `Add to bag` (an `Empty` stands in when nothing matches); on the side the bag's `Card`, one line per product with its total and `IconButton`s to take one away or add one, then the subtotal, shipping and total. `Place order` is the view's one lead; it shows `loading` while the write lands, and the bag empties only after it does. An order is one document holding a snapshot of each line's name, price and quantity, the totals and the buyer's handle, so a later price change never rewrites an order already placed; the person's own orders list under the bag, each with a `Badge` for its status (`info` received, `warn` ready to collect, `up` collected). Checkout waits on its `can` verdict from `useVibe("shop")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a sentence in the app's own words when ordering is closed, and for a visitor who has not signed in a `Sign in to place your order` lead wired to `useViewer().requestLogin()`, with the bag they filled kept in place. Sign-in is required here, unlike a local-first note, because a signed-out write stays on the device until sign-in: an order placed that way would never reach the shop.
 
 ### `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,
@@ -34,8 +34,8 @@ import {
   Spacer,
   Stack,
   Text,
-} from "@vibes.diy/pouf";
-import { Separator, Toaster, toast } from "@vibes.diy/pouf/interactive";
+} from "@vibes.diy/ui";
+import { Separator, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const PRODUCTS = [
   { id: "mug", name: "Speckled mug", blurb: "Holds a generous coffee, glazed oatmeal.", price: 28, category: "table", icon: "drop", badge: "Bestseller" },
@@ -133,7 +133,7 @@ export default function App() {
         <Navbar
           brand={
             <Row gap={2} wrap={false}>
-              <Blob icon="sparkle" tone="orange" size="sm" />
+              <IconTile icon="sparkle" tone="orange" size="sm" />
               <Text>Kiln &amp; Co.</Text>
             </Row>
           }
@@ -171,7 +171,7 @@ export default function App() {
                 <Card key={p.id}>
                   <Stack gap={3}>
                     <Row justify="between" align="top">
-                      <Blob icon={p.icon} tone="orange" />
+                      <IconTile icon={p.icon} tone="orange" />
                       {p.badge && <Badge tone="info">{p.badge}</Badge>}
                     </Row>
                     <Stack gap={1}>
@@ -274,7 +274,7 @@ export default function App() {
           </div>
         </Grid>
       </Stack>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-support.d.ts

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

package/llms/ui-support.js

@@ -0,0 +1,7 @@
+export const uiSupportConfig = {
+    name: "ui-support",
+    aliases: ["pouf-support"],
+    label: "Support block",
+    description: "Support desk to log tickets, filter the queue, reply, resolve",
+};
+//# sourceMappingURL=ui-support.js.map

package/llms/ui-support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-support.js","sourceRoot":"","sources":["../../jsr/llms/ui-support.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,+DAA+D;CAC7E,CAAC"}

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

@@ -1,8 +1,8 @@
-# Pouf Support
+# Support
 
 A help desk where questions come in as tickets and get answered, chased and closed: a small shop's customer questions, an IT volunteer queue, a landlord's repair requests, a club's member help. Reach for it whenever the app's core is requests that each carry a status (open, waiting on the asker, solved) and get worked through by replying. Tickets, their status and every reply persist, so the queue is where it was left on the next visit and for everyone working it.
 
-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 queue opens with the `Heading` and a muted count of
 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, Row, RowCard, Skeleton, Spacer, Stack, Text, Textarea } from "@vibes.diy/pouf";
-import { Checkbox, Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+import { Badge, Button, Card, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Spacer, Stack, Text, Textarea } from "@vibes.diy/ui";
+import { Checkbox, Dialog, Select, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const STATUS = {
   open: { label: "Open", tone: "info" },
@@ -313,7 +313,7 @@ export default function App() {
           )}
         </Stack>
       )}
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-testimonials.d.ts

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

package/llms/ui-testimonials.js

@@ -0,0 +1,7 @@
+export const uiTestimonialsConfig = {
+    name: "ui-testimonials",
+    aliases: ["pouf-testimonials"],
+    label: "Testimonials block",
+    description: "Testimonials section with category filter, story carousel and reported outcomes",
+};
+//# sourceMappingURL=ui-testimonials.js.map

package/llms/ui-testimonials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-testimonials.js","sourceRoot":"","sources":["../../jsr/llms/ui-testimonials.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,CAAC,mBAAmB,CAAC;IAC9B,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,iFAAiF;CAC/F,CAAC"}

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

@@ -1,18 +1,18 @@
-# Pouf Testimonials
+# Testimonials
 
 A section of client stories: the reviews on a cleaning business's site, quotes from a design studio's clients, what students said about a course, thank-you notes for a wedding band. Reach for it when the app shows a handful of quotes the owner has gathered, one at a time with the outcome each person reported, and lets the reader filter them by kind of work and step through them. The stories are written into the page by the owner, so the block keeps nothing; `## Adapting` covers collecting new ones from visitors.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof.
 
 ## The block
 
-One view with one job: read what clients say. An `Eyebrow`, the `Heading` and a muted story count open it, then a `Segmented` filter (`tone="info"`) narrows the stories by service and returns to the first. `Grid cols="sidebar"` sets the quote beside its outcome. The story sits on a tilted `Card`, its quote and attribution inside a polite live region so a screen reader hears each new story (the step buttons stay outside it): a decorative `orange` `Blob` and an `info` `Badge` for the service, the quote as a `Heading level={2}`, the client as an `Avatar` (decorative `orange`, initials) with their name and role in `Text`, and two `IconButton`s to step back and forward. `Next story` is the view's one lead (`variant="solid"`); `Previous story` stays quiet. Beside it, the reported outcome is a `Stat` toned `up`, and a row of `Dot`s marks the reader's place (`info` for the current story, `idle` for the rest) above a muted "2 of 4". Nothing is written: the filter and position are page state.
+One view with one job: read what clients say. An `Eyebrow`, the `Heading` and a muted story count open it, then a `Segmented` filter (`tone="info"`) narrows the stories by service and returns to the first. `Grid cols="sidebar"` sets the quote beside its outcome. The story sits on a tilted `Card`, its quote and attribution inside a polite live region so a screen reader hears each new story (the step buttons stay outside it): a decorative `orange` `IconTile` and an `info` `Badge` for the service, the quote as a `Heading level={2}`, the client as an `Avatar` (decorative `orange`, initials) with their name and role in `Text`, and two `IconButton`s to step back and forward. `Next story` is the view's one lead (`variant="solid"`); `Previous story` stays quiet. Beside it, the reported outcome is a `Stat` toned `up`, and a row of `Dot`s marks the reader's place (`info` for the current story, `idle` for the rest) above a muted "2 of 4". Nothing is written: the filter and position are page state.
 
 ### `App.jsx`
 ```jsx
 import React, { useState } from "react";
-import { Badge, Blob, Card, Dot, Eyebrow, Grid, Heading, Icon, IconButton, Row, Segmented, Stack, Stat, Text } from "@vibes.diy/pouf";
-import { Avatar } from "@vibes.diy/pouf/interactive";
+import { Badge, IconTile, Card, Dot, Eyebrow, Grid, Heading, Icon, IconButton, Row, Segmented, Stack, Stat, Text } from "@vibes.diy/ui";
+import { Avatar } from "@vibes.diy/ui/interactive";
 
 // The owner's own collection of quotes, written into the page.
 const STORIES = [
@@ -99,7 +99,7 @@ export default function App() {
               <div aria-live="polite" aria-atomic="true">
                 <Stack gap={5}>
                   <Row justify="between" wrap={false}>
-                    <Blob icon="comment" tone="orange" />
+                    <IconTile icon="comment" tone="orange" />
                     <Badge tone="info">{serviceLabel(story.service)}</Badge>
                   </Row>
                   <blockquote className="m-0">

package/llms/ui-todo.d.ts

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

package/llms/ui-todo.js

@@ -0,0 +1,7 @@
+export const uiTodoConfig = {
+    name: "ui-todo",
+    aliases: ["pouf-todo"],
+    label: "Todo block",
+    description: "Checklist UI to add, filter, tick off and clear tasks",
+};
+//# sourceMappingURL=ui-todo.js.map

package/llms/ui-todo.js.map

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

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

@@ -1,8 +1,8 @@
-# Pouf Todo
+# Todo
 
 A checklist the person adds to, filters and ticks off: a beekeeper's hive inspection steps, a seed-swap shelf's restock run, today's errands, a quilting circle's supply checklist. Reach for it whenever the app's core is a list of short items that are either done or not. The tasks persist, so the list is still there 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`.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
 
 ## The block
 
@@ -27,8 +27,8 @@ import {
   Skeleton,
   Stack,
   Text,
-} from "@vibes.diy/pouf";
-import { Checkbox, Confirm, Toaster, toast } from "@vibes.diy/pouf/interactive";
+} from "@vibes.diy/ui";
+import { Checkbox, Confirm, Toaster, toast } from "@vibes.diy/ui/interactive";
 
 const FILTERS = [
   { value: "all", label: "All" },
@@ -160,7 +160,7 @@ export default function App() {
           </Stack>
         )}
       </Stack>
-      <div className="pouf-toasts">
+      <div className="ui-toasts">
         <Toaster />
       </div>
     </main>

package/llms/ui-weather.d.ts

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

package/llms/ui-weather.js

@@ -0,0 +1,7 @@
+export const uiWeatherConfig = {
+    name: "ui-weather",
+    aliases: ["pouf-weather"],
+    label: "Weather block",
+    description: "Weather card with city and unit pickers, hourly strip and forecast",
+};
+//# sourceMappingURL=ui-weather.js.map

package/llms/ui-weather.js.map

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

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

@@ -1,17 +1,17 @@
-# Pouf Weather
+# Weather
 
 A weather card for a few places someone cares about: the cities a remote team works from, the allotment and the cabin, the stops on a trip, the towns a delivery round covers. Reach for it when the app shows conditions and a short forecast and lets the person switch place, units and day. The example runs on a small sample forecast written into the page, labelled as a sample on screen, so it renders the same everywhere with no key and no network call; `## Adapting` shows where real forecasts come from.
 
-Built from @vibes.diy/pouf components; persisted state lives in Fireproof.
+Built from @vibes.diy/ui components; persisted state lives in Fireproof.
 
 ## The block
 
-One view with one job: read the weather for a place. A `Heading` names the place under an `Eyebrow`, with an `idle` `Badge` saying the figures are a sample. Two `Segmented` pickers (`tone="info"`) switch the place and the units (°C with km/h, or °F with mph, so temperature and wind always change together). The chosen day's high is a `Stat` (`info`, its icon from the day's condition), with the condition and the low in muted `Text` and three `Metric`s for that day's humidity, wind and UV. An hourly strip on a tight `Card` shows six times of day, each a muted time, an `Icon` and a numeric `Text`. The five-day forecast is one clickable `RowCard` per day with a decorative `orange` `Blob`; the chosen day is the `selected` row, and that selected row is the view's one lead, so nothing else wears the lead tone. Picking a place swaps every figure and returns to today; picking a day moves the high, the condition, all three readings and the hourly strip to that day. Nothing is written: the place, units and day are page state.
+One view with one job: read the weather for a place. A `Heading` names the place under an `Eyebrow`, with an `idle` `Badge` saying the figures are a sample. Two `Segmented` pickers (`tone="info"`) switch the place and the units (°C with km/h, or °F with mph, so temperature and wind always change together). The chosen day's high is a `Stat` (`info`, its icon from the day's condition), with the condition and the low in muted `Text` and three `Metric`s for that day's humidity, wind and UV. An hourly strip on a tight `Card` shows six times of day, each a muted time, an `Icon` and a numeric `Text`. The five-day forecast is one clickable `RowCard` per day with a decorative `orange` `IconTile`; the chosen day is the `selected` row, and that selected row is the view's one lead, so nothing else wears the lead tone. Picking a place swaps every figure and returns to today; picking a day moves the high, the condition, all three readings and the hourly strip to that day. Nothing is written: the place, units and day are page state.
 
 ### `App.jsx`
 ```jsx
 import React, { useState } from "react";
-import { Badge, Blob, Card, Eyebrow, Heading, Icon, Metric, Row, RowCard, Segmented, Stack, Stat, Text } from "@vibes.diy/pouf";
+import { Badge, IconTile, Card, Eyebrow, Heading, Icon, Metric, Row, RowCard, Segmented, Stack, Stat, Text } from "@vibes.diy/ui";
 
 // A sample forecast, written into the page and labelled as one on screen. Real figures come
 // from the app's backend (see Adapting); the shape below is the shape those documents keep.
@@ -150,7 +150,7 @@ export default function App() {
               <RowCard key={i} selected={i === dayIndex} onClick={() => setDayIndex(i)}>
                 <Row justify="between" wrap={false}>
                   <Row gap={3} wrap={false}>
-                    <Blob icon={d.icon} tone="orange" size="sm" />
+                    <IconTile icon={d.icon} tone="orange" size="sm" />
                     <Stack gap={1}>
                       <Text>{dayName(i)}</Text>
                       <Text size="sm" muted>

package/llms/use-vibe.md

@@ -22,7 +22,7 @@ The same order carries a creator-only line. Check `ready` first and the founder
 
 ```jsx
 import { useVibe } from "use-vibes";
-import { Button, Skeleton, Text } from "@vibes.diy/pouf";
+import { Button, Skeleton, Text } from "@vibes.diy/ui";
 
 function InviteRow({ guild, onInvite }) {
   const { can, me, ready } = useVibe("quiltGuilds");
@@ -47,7 +47,7 @@ Gate every write affordance on `can.*`. Hold it while `pending`, and write your
 ```jsx
 import { useState } from "react";
 import { useVibe } from "use-vibes";
-import { Button, Field, Input, Row, Skeleton, Text } from "@vibes.diy/pouf";
+import { Button, Field, Input, Row, Skeleton, Text } from "@vibes.diy/ui";
 
 function PromptBar({ database }) {
   const { can, me } = useVibe("aestheticBoard");
@@ -103,7 +103,7 @@ if (url.pathname === "/setup" && request.method === "GET") {
 
 ```jsx
 // App.jsx — one hook, one surface, the verdict decides what each person sees
-// (imports: useEffect, useRef, useState from react; apiFetch from use-vibes; pouf components)
+// (imports: useEffect, useRef, useState from react; apiFetch from use-vibes; UI components)
 function useSetup() {
   const [setup, setSetup] = useState(null);
   const latest = useRef(0);
@@ -157,7 +157,7 @@ export default function App() {
 }
 ```
 
-Not the same thing: a *visitor's* first-run answers — who are you, which team — are per-person onboarding (the pouf onboarding block), saved as that person's own document, and stay as they are. Owner setup is the app's, done once, and lives on the Setup surface.
+Not the same thing: a *visitor's* first-run answers — who are you, which team — are per-person onboarding (the onboarding block), saved as that person's own document, and stay as they are. Owner setup is the app's, done once, and lives on the Setup surface.
 
 ## The server is still the authority