@invisibleloop/pulse 0.20.5 → 0.20.6

package/src/agent/checklist.md

@@ -31,9 +31,8 @@ Before finishing any spec, verify every point below. Fix anything that fails.
   - Hero sections → `hero({ title, subtitle, actions, image, ... })`
   - Product/service cards → `card({ title, body, image, footer, ... })`
   - Image + text two-column layouts → `media({ image, content, reverse })`
-  - Horizontal strips/banners → `banner({ content, variant })`
   - Feature tiles → `feature({ icon, title, description })`
-  - Testimonials → `testimonial({ quote, name, role, src })`
+  - Testimonials → `card({ content, footer })` with quote + avatar/name in the content slot
   - CTAs → `cta({ title, subtitle, actions })`
   - Navigation → `nav({ logo, links, actions })`
   - Footers → `footer({ logo, links, columns, legal, ... })`

package/src/agent/guide-components.md

@@ -10,7 +10,7 @@ import { nav, hero, feature, button, card, stat, grid, section, container, iconZ
 meta: { styles: ['/pulse-ui.css', '/app.css'] }
 ```
 
-Interactive components (carousel, tooltip) also need `/pulse-ui.js` in `meta.scripts`. Modal is handled natively by the Pulse runtime — no extra script needed.
+Interactive components (tooltip) also need `/pulse-ui.js` in `meta.scripts`. Modal is handled natively by the Pulse runtime — no extra script needed.
 
 ### Component root CSS classes
 
@@ -37,8 +37,6 @@ Use these when writing tests (`.get('.ui-card')`) or custom CSS overrides. The r
 | `stack` | `.ui-stack` | |
 | `cluster` | `.ui-cluster` | |
 | `feature` | `.ui-feature` | |
-| `testimonial` | `.ui-testimonial` | |
-| `pricing` | `.ui-pricing` | |
 | `accordion` | `.ui-accordion` | |
 | `cta` | `.ui-cta` | |
 | `footer` | `.ui-footer` | |
@@ -47,24 +45,11 @@ Use these when writing tests (`.get('.ui-card')`) or custom CSS overrides. The r
 | `progress` | `.ui-progress` | |
 | `breadcrumbs` | `.ui-breadcrumbs` | |
 | `stepper` | `.ui-stepper` | |
-| `timeline` | `.ui-timeline` | |
-| `carousel` | `.ui-carousel` | |
 | `tooltip` | `.ui-tooltip` | |
 | `appBadge` | `.ui-app-badge` | |
-| `banner` | `.ui-banner` | |
 | `uiImage` | `.ui-image` | |
-| `gallery` | `.ui-gallery` | |
-| `photoCard` | `.ui-photo-card` | |
-| `marquee` | `.ui-marquee` | |
-| `decorate` | `.ui-decorate` | Inline SVG — parent needs `position: relative` |
-| `codeWindow` | `.ui-code-window` | |
 | `segmented` | `.ui-segmented` | |
 | `rating` | `.ui-rating` | |
-| `entryList` | `.ui-entry-list` | Editorial — tabular list with metadata |
-| `displayHeading` | `.ui-display-heading` | Editorial — large typographic heading |
-| `sectionLabel` | `.ui-section-label` | Editorial — eyebrow + h2 + rule |
-| `dropCap` | `.ui-drop-cap` | Editorial — first-letter treatment |
-| `colophon` | `.ui-colophon` | Editorial — minimal footer |
 
 
 
@@ -73,7 +58,7 @@ Use these when writing tests (`.get('.ui-card')`) or custom CSS overrides. The r
 Server-rendered SVG charts — no JS, no dependencies. Drop into any card, section, or grid.
 
 ```js
-import { barChart, lineChart, donutChart, sparkline } from '@invisibleloop/pulse/ui'
+import { barChart, lineChart, donutChart, sparkline } from '@invisibleloop/pulse/charts'
 
 barChart({
   data: [{ label: 'Jan', value: 42 }, { label: 'Feb', value: 78 }],
@@ -178,85 +163,76 @@ To add a missing icon: copy a Lucide path (MIT) into `src/ui/icons.js` using `s(
 | `breadcrumbs` | `items` ([{label,href}] — last item has no href), `separator` |
 | `stepper` | `steps` (array of label strings), `current` (0-based) |
 | `uiImage` | `src`, `alt`, `caption`, `ratio`, `rounded`, `pill`, `width`, `height`, `maxWidth` |
-| `gallery` | `images` ([{src,alt,caption?,href?}]), `layout` (grid/strip/masonry), `cols` (1–4), `gap` (sm/md/lg), `rounded`, `ratio` — responsive image grid |
-| `photoCard` | `src`, `alt`, `caption`, `tilt` (CSS rotate degrees, e.g. 2 or -1.5), `rounded`, `ratio` — polaroid-style card with optional tilt |
-| `marquee` | `items` (array of HTML strings), `speed` (seconds, default 30), `gap`, `direction` (left/right), `pause` (hover pause), `fade` — CSS-only infinite scroll strip. Ideal for logos, trust badges |
-| `decorate` | `pattern` (dots/grid/lines/zigzag/cross), `color`, `opacity`, `size` — inline SVG overlay. Parent needs `position: relative` (add class `u-relative`) |
 | `pullquote` | `quote`, `cite`, `size` (md/lg) |
-| `timeline` | `direction` (vertical/horizontal), `items` ([{dot,dotColor,label,content}]) |
-| `timelineItem` | `content`, `label`, `dot`, `dotColor` (accent/success/warning/error/muted) |
+
+Image galleries, photo grids, logo/trust marquees, and timelines have no dedicated component — build them with `grid()` / `stack()` + `uiImage()` and raw HTML (creative override), or a CSS-only scrolling strip for marquee-style content.
 
 ### Typography components
 
 | Component | Key props |
 |-----------|-----------|
 | `heading` | `level` (1–6), `text`, `size` (xs–4xl, overrides level default), `color` (default/muted/accent), `balance` (true — prevents orphaned words) |
-| `list` | `items` (array of HTML strings), `ordered`, `gap` (xs/sm/md) |
 | `prose` | `content` (raw HTML — not escaped), `size` (sm/base/lg) — for CMS/markdown content you don't control |
 
-**Never write raw `<h1>`–`<h6>` or `<ul>`/`<ol>` without styling.** Use `heading()` and `list()` instead. *(Mode A only — in a creative override, raw headings styled directly with utility classes or custom CSS are correct. The `heading()` component adds wrapper markup that can fight custom layouts.)*
+**Never write raw `<h1>`–`<h6>` without styling.** Use `heading()` instead. *(Mode A only — in a creative override, raw headings styled directly with utility classes or custom CSS are correct. The `heading()` component adds wrapper markup that can fight custom layouts.)* There is no dedicated list component — write `<ul>`/`<ol>` directly, styled with utility classes or `app.css`.
 
-**Heading order across components.** `card`, `feature`, `section`, `pricing`, `cta`, and `modal` all accept a `level` prop. Use it to keep the document outline correct without changing visual style. For example, if a page has an h2 section title and each card inside it has a title, pass `level: 3` on the cards (the default) — but if the cards are the first heading on the page, pass `level: 2`. The CSS class stays the same (`ui-card-title` etc.) so appearance is unaffected.
+**Heading order across components.** `card`, `feature`, `section`, `cta`, and `modal` all accept a `level` prop. Use it to keep the document outline correct without changing visual style. For example, if a page has an h2 section title and each card inside it has a title, pass `level: 3` on the cards (the default) — but if the cards are the first heading on the page, pass `level: 2`. The CSS class stays the same (`ui-card-title` etc.) so appearance is unaffected.
 
 **`balance: true`** on `heading()` prevents orphaned words. Apply to any heading the verification orphan check flags.
 
-Use `prose()` for HTML from external sources (CMS, markdown). Use `heading()`/`list()` when writing content yourself.
-
-### Editorial components
-
-Editorial/typographic primitives for non-SaaS layouts: paperback books, vintage magazines, editorial sites, portfolio pages. These complement the landing-page-focused components (hero, feature, cta) when the design needs structure that's tabular, asymmetric, or typography-led.
-
-| Component | Key props | Use for |
-|-----------|-----------|---------|
-| `entryList` | `items` ([{meta, title, description}]), `metaLabel` (accessible name for meta column — e.g. "Year") | Backlists, release notes, changelogs, project archives, talk logs |
-| `displayHeading` | `text`, `level` (1–6), `maxWidth` (ch units, default 20), `balance` (true), `tracking` ('tight'\|'normal'\|'wide') | Hero titles, chapter openings, large typographic moments |
-| `sectionLabel` | `eyebrow`, `heading`, `level` (1–6, default 2), `rule` (true — show horizontal rule), `align` ('left'\|'center') | Section dividers, chapter labels, content blocks |
-| `dropCap` | `letter` (the drop cap letter or word), `content` (rest of paragraph), `lines` (height in lines, default 3) | First-paragraph treatment, editorial openings |
-| `colophon` | `content` (HTML slot), `align` ('center'\|'left') | Paperback-style footer — minimal, tight type, no columns |
+Use `prose()` for HTML from external sources (CMS, markdown). Use `heading()` when writing headings yourself.
 
-#### When to use editorial components
+### Editorial / typographic layouts
 
-Use these when the design direction is **editorial**, **retro**, **brutalist**, or **paper** vibe, or when the content structure is naturally tabular (list of books, releases, projects). They're shaped for asymmetry and typography-first layouts, not centred hero + three-column features.
+There is no dedicated editorial component family — for non-SaaS layouts (paperback books, vintage magazines, editorial sites, portfolio pages) needing structure that's tabular, asymmetric, or typography-led, compose from `heading()`, `prose()`, `pullquote()`, `divider()`, and raw HTML styled with utility classes or `app.css` (creative override).
 
-**Example: Book backlist**
+**Example: Book backlist** — a tabular list of items, built with raw HTML inside `stack()`:
 ```js
-entryList({
-  metaLabel: 'Year',
-  items: [
-    { meta: '2023', title: 'The Argent Ghost', description: 'A tale of time-travel and lost identity.' },
-    { meta: '2021', title: 'Signal Drift',      description: 'First contact from a dead civilization.' },
-    { meta: '2019', title: 'Cold Equations',    description: 'Survival at the edge of known space.' },
-  ],
+stack({
+  gap: 'md',
+  content: books.map(b => `
+    <div class="book-entry">
+      <span class="book-entry-year">${b.year}</span>
+      <div>
+        <h3>${b.title}</h3>
+        <p>${b.description}</p>
+      </div>
+    </div>
+  `).join(''),
 })
 ```
 
-**Example: Editorial hero**
+**Example: Editorial hero** — a large display title with a custom-styled heading, and a first-paragraph drop-cap treatment via CSS (`::first-letter`) rather than a component:
 ```js
-${displayHeading({ text: 'In Search of Lost Code', level: 1, tracking: 'tight' })}
-${dropCap({ letter: 'T', content: 'he first computers were humans, pencil-wielding calculators in windowless rooms, computing artillery trajectories by hand...' })}
+${heading({ level: 1, text: 'In Search of Lost Code', class: 'display-heading' })}
+<p class="drop-cap">The first computers were humans, pencil-wielding calculators in windowless rooms, computing artillery trajectories by hand...</p>
 ```
 
-**Example: Section divider**
+**Example: Section divider** — an eyebrow + heading + rule, built directly:
 ```js
-sectionLabel({ eyebrow: 'Chapter 3', heading: 'The Rise of Symbolic Logic', rule: true })
+`<div class="section-label">
+  <p class="section-label-eyebrow">Chapter 3</p>
+  ${heading({ level: 2, text: 'The Rise of Symbolic Logic' })}
+  ${divider()}
+</div>`
 ```
 
-**Example: Minimal footer for an editorial page**
+**Example: Minimal footer for an editorial page** — plain HTML rather than `footer()`, when the page wants a tight, columnless colophon:
 ```js
-colophon({
-  content: `<p>© 2025 Alden Press • Set in Lyon Text and Atlas Grotesk</p>
-  <p><a href="/about">About</a> • <a href="/contact">Contact</a></p>`,
-})
+`<footer class="colophon">
+  <p>© 2025 Alden Press • Set in Lyon Text and Atlas Grotesk</p>
+  <p><a href="/about">About</a> • <a href="/contact">Contact</a></p>
+</footer>`
 ```
 
-**Composition:** Editorial components work inside `section()` + `container()` like any other Pulse component. Use `prose()` for body text, `sectionLabel()` for section breaks, `entryList()` for tabular content, `displayHeading()` for large type moments, and `colophon()` instead of `footer()` for editorial pages.
+**Composition:** These layouts work inside `section()` + `container()` like any other Pulse component. Use `prose()` for body text, `heading()` for large type moments, and custom CSS classes (defined in `app.css` with tokens from `theme.css`) for editorial-specific presentation.
 
 #### When components feel restrictive
 
 **Symptom:** You're fighting a component's wrapper styles (padding, max-width, centering) in your CSS overrides.
 
 **Solutions:**
-1. **Use the right component for your design.** If the page is editorial/typographic, use the editorial components (`displayHeading`, `sectionLabel`, `entryList`, `colophon`) instead of trying to force `hero()`, `feature()`, `cta()` into an editorial shape.
+1. **Use the right approach for your design.** If the page is editorial/typographic, compose from `heading()`, `prose()`, and raw HTML (creative override) instead of trying to force `hero()`, `feature()`, `cta()` into an editorial shape.
 2. **Write custom markup for structural differences.** Components provide sensible defaults for common patterns. When your design structure diverges significantly (asymmetric grid, full-bleed sections, custom positioning), write the HTML directly — that's permitted for layouts. Use components for the UI primitives (`button`, `card`, `input`, `badge`), but write the outer structure yourself.
 3. **Override with higher specificity.** Component wrappers use single class names (`.ui-hero`, `.ui-cta`). Override with a more specific selector in your `app.css`:
    ```css
@@ -276,9 +252,9 @@ For example:
 - `hero()` with `vibe: 'editorial'` still renders eyebrow + title + subtitle + actions (SaaS structure)
 - The vibe adjusts the font sizes, tracking, and spacing, but the component HTML is unchanged
 
-**If you need different HTML structure for an editorial design** — e.g., a large display title + asymmetric layout + drop cap instead of eyebrow/subtitle/actions — use the editorial components (`displayHeading`, `dropCap`, `sectionLabel`) or write custom markup. Do not expect `hero()` to become structurally editorial when `vibe: 'editorial'` is set.
+**If you need different HTML structure for an editorial design** — e.g., a large display title + asymmetric layout + drop cap instead of eyebrow/subtitle/actions — write custom markup styled with `heading()`/`prose()` plus utility classes or `app.css`. Do not expect `hero()` to become structurally editorial when `vibe: 'editorial'` is set.
 
-This is by design: vibes are a paint job, not a structural transformation. Components stay predictable and testable. When the design structure itself differs from the SaaS patterns (centred hero, three-column features, pricing cards), reach for the editorial components or custom layout instead of trying to force `hero()` / `feature()` / `cta()` into shapes they weren't designed for.
+This is by design: vibes are a paint job, not a structural transformation. Components stay predictable and testable. When the design structure itself differs from the SaaS patterns (centred hero, three-column features, pricing cards), reach for custom layout instead of trying to force `hero()` / `feature()` / `cta()` into shapes they weren't designed for.
 
 ### Landing page components
 
@@ -288,12 +264,12 @@ This is by design: vibes are a paint job, not a structural transformation. Compo
 | `hero` | `eyebrow`, `title`, `subtitle`, `actions` (HTML slot), `image` (HTML slot — activates image layout), `imageAlign` (right/left), `align` (center/left), `size` (md/sm), `layout` (split/asymmetric/overlap — when image provided: 'split'=50/50, 'asymmetric'=60/40 text-heavy, 'overlap'=image fills section with text overlay), `gradient` (true/false or preset: 'purple'\|'blue'\|'green'\|'rose'\|'orange'), `background` (any CSS value), `eyebrowColor` |
 | `phoneFrame` | `content` (HTML slot — rendered inside the phone screen), `animate` (boolean, default `false` — enables a gentle 3-D tilt on hover). Pure CSS phone mockup with dynamic island, side buttons, home indicator. Use as the `image` slot in `hero()` for app landing pages. Add `animate: true` whenever the phone is a prominent hero element. |
 | `feature` | `image` (HTML slot — rendered above icon), `icon` (HTML slot), `title`, `level` (1–6, default 3), `description` (or `body` as alias), `center` |
-| `testimonial` | `quote`, `name`, `role`, `src`, `rating` (1–5) |
-| `pricing` | `name`, `level` (1–6, default 3), `price`, `period`, `features` ([strings]), `action` (HTML slot), `highlighted` |
 | `accordion` | `items` ([{question,answer}]) — native `<details>`, no JS |
 | `appBadge` | `store` (apple/google), `href` — **always use this for App Store / Google Play download buttons. Never write a raw `<a>` with an SVG badge image.** Designed to sit in a `hero()` `actions` slot or anywhere a download CTA is needed. |
 | `cta` | `eyebrow`, `title`, `level` (1–6, default 2), `subtitle` (or `body` as alias), `actions` (HTML slot), `align` (center/left) |
 
+There is no dedicated `testimonial` or `pricing` component. Build a testimonial with `card({ content, footer })` — the quote in `content`, an `avatar()` + name/role in `footer`. Build a pricing table with `grid()` of `card({ title, content, footer })` tiles — one card per plan, `variant: 'elevated'` on the highlighted plan.
+
 ### Layout components
 
 | Component | Key props |
@@ -304,11 +280,11 @@ This is by design: vibes are a paint job, not a structural transformation. Compo
 | `stack` | `content`, `gap` (xs–xl), `align` — flex column |
 | `cluster` | `content`, `gap`, `justify`, `align` — flex row with wrap |
 | `divider` | `label` |
-| `banner` | `content`, `variant` |
 | `media` | `image` (HTML slot), `content` (HTML slot), `reverse` — two-column image + text |
-| `codeWindow` | `content` (highlighted code HTML), `filename`, `lang` |
 | `footer` | `logo`, `logoHref`, `links` (flat: `[{label,href}]`), `legal`, `background`, `color` — **Rich layout:** add `columns: [{title, links:[{label,href}]}]` to switch to multi-column mode; also accepts `subscribe` (HTML slot), `wordmark` (giant display text) |
 
+There is no dedicated `banner` (thin announcement strip) or `codeWindow` (syntax-highlighted code frame) component. Build a banner as a small raw `<div>` strip styled with utility classes. Build a code window with a raw `<pre><code>` block (creative override), styled via `app.css`.
+
 ### Modal / dialog
 
 Use `modal()` + `modalTrigger()` (or `data-dialog-open`). **Never use `state.modalOpen` or conditional rendering** — this destroys the dialog element on every render, breaking focus, animation, and native ESC.

package/src/agent/guide-design-gallery.md

@@ -10,9 +10,9 @@ A curated catalogue of ready-to-use design patterns. Each entry names the live t
 **Route:** `/templates/local-business`  
 **Vibe:** `warm`  **Theme:** `light`  **CSS:** `lumio.css`
 
-Warm cream background, hand-crafted feel. Photo-forward hero with a split layout (text left, dog/product image right). Earthy greens and amber for CTAs. Services grid of 6 cards with price footers. Two-column about section with credentials checklist. Three-column testimonials. Contact section with location/hours sidebar and inline booking form. Stat strip showing social proof numbers.
+Warm cream background, hand-crafted feel. Photo-forward hero with a split layout (text left, dog/product image right). Earthy greens and amber for CTAs. Services grid of 6 cards with price footers. Two-column about section with credentials checklist. Three-column testimonials (built with `card`). Contact section with location/hours sidebar and inline booking form. Stat strip showing social proof numbers.
 
-**Key components:** `hero({ layout:'split' })`, `section`, `container`, `grid`, `card` (with `footer`), `stat`, `testimonial`, `cta`, `badge`
+**Key components:** `hero({ layout:'split' })`, `section`, `container`, `grid`, `card` (with `footer`), `stat`, `cta`, `badge`
 
 **Distinguishing moves:**
 - Gradient hero `linear-gradient(135deg, #fdf6ee, #fdebd0)` with `color:#3d2b1e` — define these hex values as tokens in `public/theme.css` and reference them via `var()`; the lint hook blocks raw hex in any other stylesheet
@@ -47,14 +47,14 @@ Dark, editorial, high-contrast. Works grid with cover images (fluid fill via `fl
 **Route:** `/templates/event`  
 **Vibe:** `bold`  **Theme:** `dark`  **CSS:** *(none extra — dark theme built-in)*
 
-Dark navy with violet/purple gradient CTAs. Centred hero with countdown-style stats strip. Sponsor logo marquee. Speaker portrait grid (4 columns, `flush:true` square images). Schedule as an accordion (3 day items, each with time/stage timetable). Venue section with two-column layout (map + details). Ticket pricing highlight.
+Dark navy with violet/purple gradient CTAs. Centred hero with countdown-style stats strip. Sponsor logo strip (raw HTML, CSS-only scroll animation). Speaker portrait grid (4 columns, `flush:true` square images). Schedule as an accordion (3 day items, each with time/stage timetable). Venue section with two-column layout (map + details). Ticket pricing highlight.
 
-**Key components:** `hero`, `section`, `container`, `grid({ cols:4 })`, `card({ flush:true })`, `accordion`, `marquee`, `badge`, `stat`, `cta`
+**Key components:** `hero`, `section`, `container`, `grid({ cols:4 })`, `card({ flush:true })`, `accordion`, `badge`, `stat`, `cta`
 
 **Distinguishing moves:**
 - Speaker cards: `aspect-ratio:1/1` square portrait images + name/role/quote below
 - Accordion items: `{ question: 'Day 1 — ...', answer: '<div>...timetable rows...</div>' }`
-- Marquee for sponsor logos: `marquee({ items: [...], gap:'xl', speed:'slow' })`
+- Sponsor logo strip: raw HTML `cluster()` of logos, or a CSS `@keyframes` scroll animation for an infinite marquee effect (creative override — no dedicated component)
 - Stats strip: `section({ variant:'alt', padding:'sm' })` + `grid({ cols:4 })`
 
 **Best for:** Conference, hackathon, festival, product launch, awards ceremony, summit
@@ -83,9 +83,9 @@ Dark with serif headline typography. Featured article hero with byline, read-tim
 **Route:** `/templates/mobile-app`  
 **Vibe:** `bold` or `minimal`  **Theme:** `dark`  **CSS:** *(dark theme built-in)*
 
-Hero with phone-frame mockup, feature grid, pricing section, testimonials, and App Store badges. The centrepiece is a `phoneFrame` component wrapping a screenshot or animated mockup.
+Hero with phone-frame mockup, feature grid, pricing section, testimonials, and App Store badges. The centrepiece is a `phoneFrame` component wrapping a screenshot or animated mockup. Pricing tiers and testimonials are built from `grid()` of `card()` tiles (no dedicated `pricing`/`testimonial` component).
 
-**Key components:** `hero`, `phoneFrame`, `feature`, `pricing`, `testimonial`, `appBadge`, `cta`
+**Key components:** `hero`, `phoneFrame`, `feature`, `grid`, `card`, `appBadge`, `cta`
 
 **Best for:** iOS/Android app, SaaS with mobile client, consumer product launch
 
@@ -174,14 +174,15 @@ section({
 })
 ```
 
-### Sponsor Marquee
+### Sponsor Logo Strip
+No dedicated marquee component — use `cluster()` for a static wrapped row, or raw HTML with a CSS `@keyframes` scroll animation for an infinite marquee effect (creative override):
 ```js
-marquee({
-  items: ['Acme Corp', 'Globex', 'Initech', 'Umbrella', 'Hooli'].map(
+cluster({
+  gap:     'xl',
+  justify: 'center',
+  content: ['Acme Corp', 'Globex', 'Initech', 'Umbrella', 'Hooli'].map(
     name => `<span class="u-font-semibold u-text-lg u-opacity-60">${name}</span>`
-  ),
-  speed: 'slow',
-  gap:   'xl',
+  ).join(''),
 })
 ```
 
@@ -251,7 +252,6 @@ The most common mistakes when writing templates. These will silently produce emp
 | `card` | `body:` | `content:` |
 | `card` | `image:` *(unsupported)* | Put `<img>` inside `content:` |
 | `card` | `href:` *(unsupported)* | Wrap title in `<a>` inside `content:` |
-| `testimonial` | `author:` | `name:` |
 | `pullquote` | `author:` | `cite:` |
 | `accordion` items | `title:` | `question:` |
 | `accordion` items | `content:` | `answer:` |

package/src/agent/guide-design-references.md

@@ -14,8 +14,8 @@ When you choose a design direction, tell the user which one you're using and why
 **Geometry:** tight radius (2–6px), mono grids, generous whitespace  
 **Typography:** geometric sans, tight tracking on headings, strong size contrast  
 **Palette pattern:** near-black bg + single accent (indigo / blue / violet)  
-**Signature moves:** bento grid, floating nav on scroll, stat bar, code window  
-**Components to lead with:** `hero(layout:'centered')`, `grid`, `stat`, `codeWindow`, `feature`
+**Signature moves:** bento grid, floating nav on scroll, stat bar, code window (raw `<pre><code>`, creative override)  
+**Components to lead with:** `hero(layout:'centered')`, `grid`, `stat`, `feature`
 
 ---
 
@@ -25,8 +25,8 @@ When you choose a design direction, tell the user which one you're using and why
 **Geometry:** large radius (14–20px), soft card shadows, rounded buttons  
 **Typography:** humanist sans (inter, nunito), comfortable line-height  
 **Palette pattern:** earthy warm — terracotta / sage / cream / warm off-white  
-**Signature moves:** real photo hero, services grid with icons, "meet the team", hours + map, handwritten accent (SVG underline via decorate)  
-**Components to lead with:** `hero(layout:'split')`, `photoCard`, `gallery`, `section(variant:'alt')`, `footer` with address
+**Signature moves:** real photo hero, services grid with icons, "meet the team", hours + map, handwritten accent (SVG underline, raw HTML)  
+**Components to lead with:** `hero(layout:'split')`, `uiImage`, `grid`, `section(variant:'alt')`, `footer` with address
 
 ---
 
@@ -53,8 +53,8 @@ When you choose a design direction, tell the user which one you're using and why
 **Geometry:** medium radius (6–10px), oversized type, dramatic section transitions  
 **Typography:** heavy condensed sans (Black weight), massive heading, strong contrast  
 **Palette pattern:** black bg + vivid single colour (yellow / red / lime) for accents  
-**Signature moves:** work case-study grid, client logo marquee, big number stats, diagonal section, full-bleed hero  
-**Components to lead with:** `hero(layout:'poster')`, `marquee`, `gallery(layout:'masonry')`, `section(variant:'diagonal')`, `stat`
+**Signature moves:** work case-study grid, client logo strip (raw HTML, CSS scroll animation), big number stats, diagonal section, full-bleed hero  
+**Components to lead with:** `hero(layout:'poster')`, `grid`, `uiImage`, `section(variant:'diagonal')`, `stat`
 
 ---
 
@@ -67,12 +67,12 @@ When you choose a design direction, tell the user which one you're using and why
 **Signature moves (use these, not 3-col feature grids):**
 - **Full-colour section blocks** — each section has its own bg colour (yellow stats strip, cyan testimonials, hot-pink CTA). Palette is structure, not accent.
 - **Oversized hero element** — the product's key visual (a game board, an illustration, an icon) fills most of the hero viewport. `phoneFrame` is one option, not the default.
-- **Marquee strip** — giant repeated icon-library glyphs, brand marks, or product icons scrolling across the page between sections (`marquee` component). Use icons from `src/ui/icons.js`, not emoji — emoji are banned in UI output (not accessible, not theme-aware).
-- **Tilted `photoCard`s** — testimonial or feature cards at ±2–4° with `photoCard` or CSS `transform: rotate()`
-- **Memphis-style geometric shapes** between sections — use `decorate(pattern:'circles')` or CSS background shapes
-- **Social proof as ticker** — a `marquee` of short quotes or star ratings, not a 3-col grid
+- **Scrolling strip** — giant repeated icon-library glyphs, brand marks, or product icons scrolling across the page between sections (raw HTML + CSS `@keyframes` animation, creative override — no dedicated component). Use icons from `src/ui/icons.js`, not emoji — emoji are banned in UI output (not accessible, not theme-aware).
+- **Tilted cards** — testimonial or feature cards at ±2–4° with `card` + CSS `transform: rotate()`
+- **Memphis-style geometric shapes** between sections — raw inline SVG or CSS background shapes (creative override)
+- **Social proof as ticker** — a CSS scrolling strip of short quotes or star ratings, not a 3-col grid
 
-**Components to lead with:** `hero`, `appBadge`, `marquee`, `photoCard`, `section` with flat-colour backgrounds, `stat`  
+**Components to lead with:** `hero`, `appBadge`, `card`, `section` with flat-colour backgrounds, `stat`  
 **What NOT to do:** 3-column `feature()` grids, centred hero + three columns, phone mockup when the product is a game/board/visual thing
 
 ---
@@ -84,7 +84,7 @@ When you choose a design direction, tell the user which one you're using and why
 **Typography:** light weight body, all-caps labels, large work titles  
 **Palette pattern:** white or near-black + single neutral accent  
 **Signature moves:** work grid (no card chrome), simple text navigation, contact via plain `<a href="mailto:...">`, no footer clutter  
-**Components to lead with:** `gallery(layout:'grid')`, `grid`, `container(size:'sm')`, `heading`, minimal `footer`
+**Components to lead with:** `grid`, `uiImage`, `container(size:'sm')`, `heading`, minimal `footer`
 
 ---
 
@@ -105,8 +105,8 @@ When you choose a design direction, tell the user which one you're using and why
 **Geometry:** medium radius (8px), textured backgrounds, thick borders  
 **Typography:** slab serif (Rockwell / Courier), mixed cases, stamp-style labels  
 **Palette pattern:** amber / cream / dark brown / forest green  
-**Signature moves:** `decorate(pattern:'dots')` background, thick divider lines, badge-style eyebrows, stacked text hierarchy  
-**Components to lead with:** `hero(layout:'stacked')`, `section(variant:'alt')`, `decorate`, `badge`, `card`
+**Signature moves:** dotted-pattern background (inline SVG or CSS `radial-gradient`, creative override), thick divider lines, badge-style eyebrows, stacked text hierarchy  
+**Components to lead with:** `hero(layout:'stacked')`, `section(variant:'alt')`, `badge`, `card`
 
 ---
 
@@ -117,7 +117,7 @@ When you choose a design direction, tell the user which one you're using and why
 **Typography:** system-ui or clean sans, no display serif, professional  
 **Palette pattern:** navy / corporate blue + white + grey  
 **Signature moves:** trust logos, security/compliance badges, case study cards, feature table, partner logos  
-**Components to lead with:** `hero(layout:'centered')`, `grid`, `feature`, `stat`, `testimonial` with company name
+**Components to lead with:** `hero(layout:'centered')`, `grid`, `feature`, `stat`, `card` (testimonial with company name in the footer slot)
 
 ---
 
@@ -128,7 +128,7 @@ When you choose a design direction, tell the user which one you're using and why
 **Typography:** impact / black weight / giant, sometimes rotated via CSS transform  
 **Palette pattern:** black + white + ONE violent accent (red / lime / hot pink)  
 **Signature moves:** asymmetric grid, oversized section numbers, text-only nav, full bleed images bleeding into sections, no visual fluff  
-**Components to lead with:** raw `section`, `container`, `heading`, `gallery` (no rounded), `decorate(pattern:'noise')`
+**Components to lead with:** raw `section`, `container`, `heading`, `uiImage` (no rounded), CSS noise texture (creative override)
 
 ---
 
@@ -138,8 +138,8 @@ When you choose a design direction, tell the user which one you're using and why
 **Geometry:** sharp (2–4px), glowing borders, glassmorphism  
 **Typography:** monospace or geometric sans, colour gradient on headings  
 **Palette pattern:** very dark bg (#0a0a0f) + neon accent (cyan / green / magenta)  
-**Signature moves:** blurred glow backgrounds, animated grid lines (CSS), terminal code window, token/protocol stats  
-**Components to lead with:** `hero` with gradient, `codeWindow`, `stat`, `section(variant:'spotlight')`, `grid`
+**Signature moves:** blurred glow backgrounds, animated grid lines (CSS), terminal code window (raw `<pre><code>`, creative override), token/protocol stats  
+**Components to lead with:** `hero` with gradient, `stat`, `section(variant:'spotlight')`, `grid`
 
 ---
 
@@ -166,7 +166,7 @@ When you choose a design direction, tell the user which one you're using and why
 ## Cross-cutting rules
 
 - Never default to centered hero + feature grid + pricing + FAQ without checking if a different layout suits the product better.
-- The `marquee` component is great for trust logos, client names, and tech stack badges — use it on agency/corporate/SaaS directions.
-- The `photoCard` and `gallery` components are underused — deploy them whenever the product has visual appeal (food, fitness, places, products).
-- `decorate` backgrounds (dots, grid, noise, lines) add texture without images — especially useful on retro, brutalist, and paper directions.
+- A CSS-only scrolling strip (raw HTML + `@keyframes`, creative override) is great for trust logos, client names, and tech stack badges — use it on agency/corporate/SaaS directions.
+- Photo-forward layouts (`uiImage` inside `grid`) are underused — deploy them whenever the product has visual appeal (food, fitness, places, products).
+- Subtle background textures (dot-grid, noise, lines via inline SVG or CSS gradients, creative override) add texture without images — especially useful on retro, brutalist, and paper directions.
 - `section(variant:'diagonal')` → bold / agency; `section(variant:'paper')` → warm / retro; `section(variant:'spotlight')` → dark tech / neon.

package/src/agent/guide-styles.md

@@ -3,7 +3,7 @@
 - meta.styles — array of CSS paths loaded as <link rel="stylesheet">. Always include '/app.css'.
 - meta.scripts — array of JS paths loaded as <script defer>. Required for interactive UI components.
 
-Interactive Pulse UI components (carousel, modal, accordion, tooltip) require BOTH:
+Interactive Pulse UI components (tooltip) require BOTH:
 ```js
 meta: {
   styles: ['/app.css', '/pulse-ui.css'],
@@ -125,7 +125,7 @@ meta: {
 |---|---|---|
 | `warm` | radius 14px, softer letter-spacing | rounded photo cards, `section: paper`, warm palette |
 | `editorial` | radius 0, serif display font, tight letter-spacing | `hero layout: overlap`, `section: diagonal`, `pullquote` |
-| `playful` | radius 22px, neutral letter-spacing | `gallery` with rounded images, `marquee`, bright accent |
+| `playful` | radius 22px, neutral letter-spacing | rounded image grid, scrolling strip (creative override), bright accent |
 | `minimal` | radius 2px, open letter-spacing, no shadows | left-aligned hero, `section: spotlight`, monochrome |
 | `bold` | radius 6px, very tight letter-spacing | `section: dark`, large `stat` components, gradient hero |
 

package/src/agent/guide-templates.md

@@ -36,9 +36,9 @@ When the vibe is **playful, bold, brutalist, retro, or neon**, run `pulse_sketch
 **What this means in practice for expressive vibes:**
 
 - The template tells you *what to include* (a hero, features, social proof, CTA). It does **not** tell you how to arrange them or what shape they take.
-- Full-colour section blocks, oversized typography heroes, marquee strips, dense grids, and palette-as-structure are all fair game.
+- Full-colour section blocks, oversized typography heroes, CSS-only scrolling strips, dense grids, and palette-as-structure are all fair game.
 - The `phoneFrame` in Mobile App Landing is **not mandatory** — a full-bleed game board, an oversized illustration, or a typography-only hero may serve the brief better.
-- `feature()` in a 3-column grid is the most predictable layout on the web. If the brief is "fun and bold", use a marquee strip of features, a zigzag alternating layout, or full-bleed feature sections instead.
+- `feature()` in a 3-column grid is the most predictable layout on the web. If the brief is "fun and bold", use a scrolling strip of features (raw HTML + CSS `@keyframes`, creative override), a zigzag alternating layout, or full-bleed feature sections instead.
 
 ---
 
@@ -115,8 +115,8 @@ Record the intake answers. If the user provides palette hex values, note which a
 | Hero | `hero` (split layout) with `phoneFrame` mockup |
 | Stats bar | `stat` × 4 in a `grid` |
 | Features | `feature` × 6 in a `grid` |
-| Testimonials | `testimonial` × 3 in a `grid` |
-| Pricing | `pricing` × 3 (Free / Pro / Family) in a `grid` |
+| Testimonials | `card({ content, footer })` × 3 in a `grid` |
+| Pricing | `card({ title, content, footer })` × 3 (Free / Pro / Family) in a `grid` |
 | FAQ | `accordion` |
 | Download CTA | `cta` with `appBadge` |
 | Footer | `footer` with logo, links, legal |
@@ -326,7 +326,7 @@ Do NOT set `meta.theme: 'light'` on dark templates — the default pulse-ui them
 | Stats strip | `stat` × 4 in `grid` — clients, rating, years, availability |
 | Services | `card` × 6 in `grid` with name, description, and price |
 | About | Two-column: photo + team bio with trust badges |
-| Reviews | `testimonial` × 3 in `grid` |
+| Reviews | `card({ content, footer })` × 3 in `grid` |
 | Contact / Hours | Two-column: address/phone/hours + booking form |
 | CTA banner | `cta` with offer (e.g. 10% off first visit) |
 | Footer | `footer` with address in `legal` |
@@ -394,7 +394,7 @@ Portfolio templates rarely need a separate theme CSS — the default dark palett
 | Nav | `nav` with event logo, links, Get Tickets CTA |
 | Hero | `hero(size:'xl', align:'center')` with gradient background |
 | Stats strip | `stat` × 4 — days, speakers, attendees, tracks |
-| Sponsor logos | `marquee` with sponsor names/logos |
+| Sponsor logos | `cluster()` row, or raw HTML + CSS `@keyframes` scrolling strip (creative override) with sponsor names/logos |
 | Speakers | `card` × 8 in `grid` with photo, name, role, topic |
 | Schedule | `accordion` — one item per day with time/session/location |
 | Venue | Two-column: venue info + photo |

package/src/agent/identity.md

@@ -45,7 +45,7 @@ The component rules marked *(Mode A)* below are suspended under a declared creat
 - Use inline `style=""` attributes. Use utility classes or `var(--ui-*)` tokens in a stylesheet. *Exception:* structural image styles with no utility-class equivalent (`aspect-ratio`, `object-fit`) are permitted inline — these are layout facts, not theming, and the design gallery uses them this way.
 - Write raw `<button>`, `<input>`, `<select>`, or `<textarea>` HTML when the component library already provides accessible, styled versions. *(Mode A — under a creative override, functional atoms should still come from components unless there is a specific design reason.)*
 - Write raw `<h1>`–`<h6>` without styling. Use `heading({ level, text })` instead. *(Mode A — under a creative override, raw headings styled with utility classes or custom CSS are correct; `heading()` adds wrapper markup that fights custom layouts.)*
-- Write raw `<ul>` or `<ol>` without styling. Use `list({ items })` instead. *(Mode A — under a creative override, raw lists are permitted when the component markup would interfere with the layout.)*
+- Write raw `<ul>` or `<ol>` without visible styling. There is no dedicated list component — style lists with utility classes or `app.css` tokens rather than leaving default browser markers unstyled.
 - Output CMS or database HTML without a `prose()` wrapper. Raw HTML from external sources has no styling — always wrap it in `prose({ content: html })`.
 - Use `data-event` on text inputs. Re-rendering on every keystroke destroys focus. Use uncontrolled inputs and read values from `FormData` in `action.onStart` or `action.run`.
 - Skip `onError` in an action. It is required. Always handle failure.

package/src/agent/workflow.md

@@ -154,9 +154,8 @@ Or use the guide-components table. Never write these patterns from scratch in Mo
 - Hero section → `hero()`
 - Product/service cards → `card()`
 - Image + text layouts → `media()`
-- Horizontal strips → `banner()`
 - Feature tiles → `feature()`
-- Testimonials → `testimonial()`
+- Testimonials → `card({ content, footer })` with quote + avatar/name in the footer slot
 - CTAs → `cta()`
 
 If you're about to type `class="hero"` or `class="product-card"` in Mode A, stop — use the component instead.