@vibes.diy/prompts 14.3.203 → 14.3.204

package/llms/motion.md

@@ -14,7 +14,7 @@ stops when the component goes away.
 
 The sibling boundary: a list whose items fade and rise as they enter uses
 the house flourish, the `starting:` Tailwind classes, with no engine at all;
-a canvas that redraws every frame is `p5`, `worlds` or `physics`; pouf
+a canvas that redraws every frame is `p5`, `worlds` or `physics`; the UI's
 components carry their own motion (a `Card` with `motion="lift"`, the
 toasts, the sheets). Motion is the right call when something on the page
 responds to scroll, to time, or to touch.
@@ -52,8 +52,8 @@ before the engine lands cancels the setup (measured: a `move` stopped during
 the load moved nothing). `motionScope()` is the collector.
 
 **Every helper reads the reduced-motion setting when it runs** and lands on
-the end state instead of animating. Pouf's own reduced-motion rule is scoped
-to pouf's elements, so an animation the app authors gets no safety net from
+the end state instead of animating. The UI's own reduced-motion rule is scoped
+to the UI's elements, so an animation the app authors gets no safety net from
 it; the helpers are the net (measured with the media feature emulated: lists
 land visible, reveals leave everything visible, the count shows its final
 number, the press does nothing, scroll progress still reports).
@@ -212,7 +212,7 @@ export function pressSquash(target, { scale = 0.94 } = {}) {
 ### `App.jsx`
 ```jsx app=story
 import React, { useEffect, useRef } from "react";
-import { Button, Card, Heading, Row, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Button, Card, Heading, Row, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { countUp, motionScope, onEnter, pressSquash, reveal, scrollProgress, sequence, staggerIn } from "./lib/motion.js";
 
 const CHAPTERS = [
@@ -297,7 +297,7 @@ export default function App() {
 ```
 
 The JSX stays class-only: positions, sizes and colours are Tailwind classes
-and pouf props, and Motion writes transforms and opacity onto the elements
+and component props, and Motion writes transforms and opacity onto the elements
 through refs and selectors. The one place a style is set in the app's own
 code is the progress bar's `transform` inside the scroll callback, through
 its ref, which is what a scroll binding is for.
@@ -434,7 +434,7 @@ export function pressSquash(target, { scale = 0.94 } = {}) {
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe, useViewer } from "use-vibes";
-import { Button, Card, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Button, Card, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { motionScope, move, pressSquash } from "./lib/motion.js";
 
 export default function App() {
@@ -544,7 +544,7 @@ is the baseline and animates nothing, every later snapshot's ids are
 remembered, and only a top note nobody has seen springs in, so a board that
 loaded with twenty notes stands still and a reorder moves nothing. (A board
 that is empty when it opens treats its first note as the baseline too; the
-second note is the first to spring.) Pouf's `Card motion="lift"` carries
+second note is the first to spring.) The UI's `Card motion="lift"` carries
 the hover, so the app writes none of its own.
 
 ## Mobile

package/llms/p5.md

@@ -24,7 +24,7 @@ the instance so remounts do not leak a second draw loop.
 ```jsx
 import React from "react";
 import p5 from "https://esm.sh/p5@1.11.13";
-import { Button, Row, Stack } from "@vibes.diy/pouf";
+import { Button, Row, Stack } from "@vibes.diy/ui";
 
 const TAU = Math.PI * 2;
 

package/llms/physics.md

@@ -225,7 +225,7 @@ from the pieces so the next drop replays the last one exactly.
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe, useViewer } from "use-vibes";
-import { Badge, Button, Card, Field, Heading, Input, Row, Segmented, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Badge, Button, Card, Field, Heading, Input, Row, Segmented, Skeleton, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { createWorld } from "./lib/physics.js";
 
 const WIDTH = 360;
@@ -495,7 +495,7 @@ button that applies a force to every body.
 ### `App.jsx`
 ```jsx app=tumble
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Field, Heading, Input, Row, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Button, Field, Heading, Input, Row, Spacer, Stack, Text } from "@vibes.diy/ui";
 import { Matter, createWorld, cssColor } from "./lib/physics.js";
 
 const { Bodies, Body, Composite } = Matter;

package/llms/reskin.md

@@ -7,8 +7,8 @@ the app keeps its look's components, its logic and its Look tab, and wears that
 appearance on top of them. Every `Card`, `Button`, `RowCard` and `Heading`
 stays exactly where it is; what changes is how they are drawn.
 
-This works on every look that shares the component surface (pouf today, and the
-looks built on its API): the same tokens, the same hook classes, the same
+This works on every look that shares the component surface (the default look today,
+and the looks built on its API): the same tokens, the same hook classes, the same
 technique.
 
 - Colour, a catalogue font or spacing alone is the Look tab (`set_app_style`);
@@ -30,24 +30,24 @@ so the wrapper's values are the ones every component reads.
 The tokens: `--bg --surface --ink --text-secondary --purple --on-accent
 --orange --info --up --down --idle --warn` (colour), `--r-card --r-control
 --r-pill` (corners), `--lip --lip-row` (the cushion's edge), `--font-family`,
-`--s1` … `--s7` (spacing), and the composite surfaces `--pouf-card --pouf-row
---pouf-control --pouf-control-active --pouf-field --pouf-field-focus`. A
+`--s1` … `--s7` (spacing), and the composite surfaces `--ui-card --ui-row
+--ui-control --ui-control-active --ui-field --ui-field-focus`. A
 composite is resolved where it is declared, so a skin that changes the shadows
 or the edge re-declares those composites on the wrapper too (`none` for a flat
 skin).
 
 **2. The look's parts are styled through their hook classes, from the wrapper.**
-Every component carries a stable class: `.pouf-h1 .pouf-h2 .pouf-h3 .pouf-card
-.pouf-rowcard .pouf-btn .pouf-blob .pouf-empty .pouf-stat .pouf-eyebrow
-.pouf-grid .pouf-input .pouf-field .pouf-badge .pouf-tabs .pouf-dialog`, and the
-rest of the package's `pouf-*` names. Write the skin as `[data-reskin] .pouf-card
+Every component carries a stable class: `.ui-h1 .ui-h2 .ui-h3 .ui-card
+.ui-rowcard .ui-btn .ui-blob .ui-empty .ui-stat .ui-eyebrow
+.ui-grid .ui-input .ui-field .ui-badge .ui-tabs .ui-dialog`, and the
+rest of the package's `ui-*` names. Write the skin as `[data-reskin] .ui-card
 { … }`. The components themselves take no `className` and no `style`: they keep
 their props (`tone`, `size`, `variant`), and the skin reaches them by class.
 
 **Portaled parts stay in the skin.** `Dialog`, `Select`, `Popover`, `Tooltip`
 and `AlertDialog` render their open content under `<body>`, outside the
 wrapper. So the token block is declared on `[data-reskin], body:has([data-reskin])`,
-and a rule for a portaled part is written `body:has([data-reskin]) .pouf-dialog
+and a rule for a portaled part is written `body:has([data-reskin]) .ui-dialog
 { … }`. `body` sits below `:root`, so its tokens win for the whole page, the
 open modal and dropdown included.
 
@@ -83,7 +83,7 @@ cushions, Chicago-like bitmap type (`Silkscreen`) over a plain grotesk body
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe } from "use-vibes";
-import { Button, Card, Empty, Field, Heading, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Button, Card, Empty, Field, Heading, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/ui";
 
 const SKIN = `
 @import url('https://fonts.googleapis.com/css2?family=Silkscreen&family=Space+Grotesk:wght@400;600&display=swap');
@@ -92,8 +92,8 @@ const SKIN = `
   --purple: #000000; --on-accent: #ffffff;
   --r-card: 0px; --r-control: 0px; --r-pill: 0px; --lip: 0px; --lip-row: 0px;
   --font-family: 'Space Grotesk', system-ui, sans-serif;
-  --pouf-card: none; --pouf-row: none; --pouf-control: none; --pouf-control-active: none;
-  --pouf-field: inset 0 0 0 1px #000000; --pouf-field-focus: inset 0 0 0 2px #000000;
+  --ui-card: none; --ui-row: none; --ui-control: none; --ui-control-active: none;
+  --ui-field: inset 0 0 0 1px #000000; --ui-field-focus: inset 0 0 0 2px #000000;
   min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-family);
 }
 [data-reskin] .menubar { background: #ffffff; border-bottom: 1px solid #000000; padding: 2px 12px; font-family: 'Silkscreen', monospace; }
@@ -101,12 +101,12 @@ const SKIN = `
 [data-reskin] .titlebar { height: 20px; border-bottom: 1px solid #000000; text-align: center; font-family: 'Silkscreen', monospace; font-size: 12px; line-height: 20px;
   background: repeating-linear-gradient(#ffffff 0 1px, #000000 1px 2px); }
 [data-reskin] .titlebar span { background: #ffffff; padding: 0 8px; }
-[data-reskin] .pouf-h1, [data-reskin] .pouf-h2 { font-family: 'Silkscreen', monospace; letter-spacing: 0; }
-[data-reskin] .pouf-card, [data-reskin] .pouf-rowcard { border: 1px solid #000000; }
-[data-reskin] .pouf-btn { border: 1px solid #000000; background: #ffffff; color: #000000; border-radius: 6px; }
-[data-reskin] .pouf-btn:active { background: #000000; color: #ffffff; }
-[data-reskin] .pouf-empty { border: 1px dashed #000000; }
-body:has([data-reskin]) .pouf-dialog { border: 1px solid #000000; border-radius: 0; box-shadow: 2px 2px 0 #000000; }
+[data-reskin] .ui-h1, [data-reskin] .ui-h2 { font-family: 'Silkscreen', monospace; letter-spacing: 0; }
+[data-reskin] .ui-card, [data-reskin] .ui-rowcard { border: 1px solid #000000; }
+[data-reskin] .ui-btn { border: 1px solid #000000; background: #ffffff; color: #000000; border-radius: 6px; }
+[data-reskin] .ui-btn:active { background: #000000; color: #ffffff; }
+[data-reskin] .ui-empty { border: 1px dashed #000000; }
+body:has([data-reskin]) .ui-dialog { border: 1px solid #000000; border-radius: 0; box-shadow: 2px 2px 0 #000000; }
 `;
 
 export default function App() {
@@ -232,7 +232,7 @@ let the components edit it.
 
 ```jsx
 import React, { useState } from "react";
-import { Button, Field, Input, Stack } from "@vibes.diy/pouf";
+import { Button, Field, Input, Stack } from "@vibes.diy/ui";
 
 const SKIN = `
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;1,400&display=swap');
@@ -289,7 +289,7 @@ example.
 Name the five things a stranger would recognise and set each one:
 
 - **Ground and surfaces:** `--bg`, `--surface`, `--ink`, `--text-secondary`.
-- **Type:** one display face for `.pouf-h1`/`.pouf-h2`/`.pouf-eyebrow`, one body
+- **Type:** one display face for `.ui-h1`/`.ui-h2`/`.ui-eyebrow`, one body
   face on `--font-family`, the heading scale and tracking.
 - **Edges:** corners (`--r-card`, `--r-control`, `--r-pill`), borders on the
   hook classes, and the composite surfaces (`none` for flat, a hard offset for
@@ -302,5 +302,5 @@ Name the five things a stranger would recognise and set each one:
 A newspaper is a cream ground, black ink, a serif masthead over a rule, column
 grids and no shadows; a terminal is black, one phosphor green, a mono face and
 a blinking cursor that starts lit; Y2K is chrome gradients, pill corners and a
-glossy highlight on `.pouf-btn`. The words on screen stay the app's own: the
+glossy highlight on `.ui-btn`. The words on screen stay the app's own: the
 style is borrowed, the names and logos of whoever made it famous are not.

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"}