@invisibleloop/pulse 0.20.4 → 0.20.6

package/docs/public/retrowheels.css

@@ -327,6 +327,29 @@ h1, h2, h3, h4, h5, h6,
   margin-bottom: var(--ui-space-4);
 }
 
+/* Review cards — replaces the removed testimonial() component */
+.rw-review-stars {
+  display: flex;
+  gap: 2px;
+  color: var(--rw-orange-dark);
+  margin-bottom: var(--ui-space-3);
+}
+
+.rw-review-quote {
+  font-style: italic;
+  color: var(--ui-text);
+}
+
+.rw-review-name {
+  font-family: var(--ui-font-display);
+  font-weight: 900;
+}
+
+.rw-review-role {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-muted);
+}
+
 .rw-service-price {
   font-family: 'Courier New', monospace;
   font-size: var(--ui-text-sm);

package/docs/public/shop.css

@@ -41,7 +41,7 @@ body {
   padding: var(--ui-space-16) var(--ui-space-6) var(--ui-space-8);
 }
 
-.product-display .ui-display-heading {
+.product-display .product-display-title {
   font-size: clamp(3rem, 10vw, 8rem);
   line-height: 1;
   letter-spacing: -0.04em;
@@ -49,6 +49,40 @@ body {
   color: var(--ui-text);
 }
 
+/* Section eyebrow + rule — replaces the removed sectionLabel() component */
+.shop-section-label {
+  margin-bottom: var(--ui-space-6);
+}
+.shop-section-label-eyebrow {
+  font-size: var(--ui-text-sm);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--ui-color-muted);
+  margin-bottom: var(--ui-space-2);
+}
+.shop-section-label-heading {
+  margin-bottom: var(--ui-space-3);
+}
+.shop-section-label-rule {
+  border: none;
+  border-top: 1px solid var(--ui-border);
+}
+
+/* End-of-page metadata — replaces the removed colophon() component */
+.shop-colophon {
+  padding: var(--ui-space-8) var(--ui-space-6);
+  text-align: center;
+  border-top: 1px solid var(--ui-border);
+}
+.shop-colophon-inner {
+  font-size: var(--ui-text-sm);
+  color: var(--ui-color-muted);
+}
+.shop-colophon-inner a {
+  color: inherit;
+}
+
 .product-display .product-tagline {
   margin-top: var(--ui-space-4);
   font-size: var(--ui-text-xl);

package/docs/public/sparkys.css

@@ -41,17 +41,23 @@ body {
 }
 
 /* ── Top utility strip ─────────────────────────────────────────────────── */
-/* top-strip rendered via topStrip() component — background/color set inline */
-.ui-top-strip {
-  max-width: none;
-  padding-inline: var(--ui-space-6);
+/* raw two-column bar — replaces the removed topStrip() component */
+.top-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-4);
+  padding: var(--ui-space-2) var(--ui-space-6);
+  background: var(--brand-navy-deep);
+  color: var(--brand-white);
+  font-size: var(--ui-text-sm);
 }
-.ui-top-strip a {
+.top-strip a {
   color: inherit;
   text-decoration: none;
   font-weight: 600;
 }
-.ui-top-strip a:hover { text-decoration: underline; }
+.top-strip a:hover { text-decoration: underline; }
 
 /* ── Hero ──────────────────────────────────────────────────────────────── */
 .hero-split {
@@ -105,10 +111,23 @@ body {
   color: var(--ui-muted);
   font-weight: 600;
 }
-/* trustList() inside trust slot — override default small size */
-.hero-split__trust .ui-trust-list-item {
+/* trust-inline list — replaces the removed trustList() component */
+.trust-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-5);
+  list-style: none;
+}
+.trust-inline__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
   font-weight: 600;
 }
+.trust-inline__icon {
+  display: inline-flex;
+  color: var(--brand-amber);
+}
 
 .hero-split__panel {
   background: linear-gradient(160deg, var(--ui-accent) 0%, var(--brand-navy-deep) 100%);
@@ -198,22 +217,29 @@ body {
   color: var(--ui-muted);
 }
 
-/* ── Services grid — serviceCard() component ───────────────────────────── */
-.services {
+/* ── Services grid — card() component with a bordered service-card look ─── */
+.service-card {
+  border: 1px solid var(--ui-border);
+  box-shadow: none;
+}
+.service-card .ui-service-card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-accent-dim);
+  color: var(--ui-accent);
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-5);
+  place-items: center;
+  margin-bottom: var(--ui-space-4);
 }
-/* serviceCard() title size override */
-.services .ui-service-card-title {
+.service-card .ui-service-card-title {
   font-size: var(--ui-text-xl);
   font-weight: 700;
+  margin-bottom: var(--ui-space-2);
 }
-.services .ui-service-card-desc {
+.service-card .ui-service-card-desc {
   font-size: var(--ui-text-base);
-}
-.services .ui-service-card--linked:hover {
-  transform: translateY(-2px);
+  color: var(--ui-muted);
 }
 
 /* ── Why grid ──────────────────────────────────────────────────────────── */
@@ -295,17 +321,24 @@ body {
   flex-direction: column;
   gap: var(--ui-space-3);
 }
-.contact-strip__details .ui-contact-row {
+/* contact-inline list — replaces the removed contactRow() component */
+.contact-inline {
+  display: flex;
   flex-direction: column;
+  gap: var(--ui-space-3);
+  list-style: none;
 }
-.contact-strip__details .ui-contact-row-item {
+.contact-inline__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
   color: var(--brand-white);
   font-weight: 600;
   font-size: var(--ui-text-lg);
 }
-.contact-strip__details .ui-contact-row-item a { color: var(--brand-white); }
-.contact-strip__details .ui-contact-row-item a:hover { color: var(--brand-amber-strong); }
-.contact-strip__details .ui-contact-row-icon {
+.contact-inline__item a { color: var(--brand-white); text-decoration: none; }
+.contact-inline__item a:hover { color: var(--brand-amber-strong); }
+.contact-inline__icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;

package/docs/server.js

@@ -76,7 +76,6 @@ await createServer(
     new URL('./src/pages/components/button.js',      import.meta.url),
     new URL('./src/pages/components/card.js',        import.meta.url),
     new URL('./src/pages/components/checkbox.js',    import.meta.url),
-    new URL('./src/pages/components/carousel.js',    import.meta.url),
     new URL('./src/pages/components/charts.js',      import.meta.url),
     new URL('./src/pages/components/empty.js',       import.meta.url),
     new URL('./src/pages/components/fieldset.js',    import.meta.url),
@@ -84,12 +83,8 @@ await createServer(
     new URL('./src/pages/components/heading.js',     import.meta.url),
     new URL('./src/pages/components/icons.js',       import.meta.url),
     new URL('./src/pages/components/image.js',       import.meta.url),
-    new URL('./src/pages/components/gallery.js',     import.meta.url),
     new URL('./src/pages/components/input.js',       import.meta.url),
-    new URL('./src/pages/components/list.js',        import.meta.url),
-    new URL('./src/pages/components/marquee.js',     import.meta.url),
     new URL('./src/pages/components/modal.js',       import.meta.url),
-    new URL('./src/pages/components/photo-card.js',  import.meta.url),
     new URL('./src/pages/components/progress.js',    import.meta.url),
     new URL('./src/pages/components/prose.js',       import.meta.url),
     new URL('./src/pages/components/pullquote.js',   import.meta.url),
@@ -104,7 +99,6 @@ await createServer(
     new URL('./src/pages/components/stepper.js',     import.meta.url),
     new URL('./src/pages/components/table.js',       import.meta.url),
     new URL('./src/pages/components/textarea.js',    import.meta.url),
-    new URL('./src/pages/components/timeline.js',    import.meta.url),
     new URL('./src/pages/components/toggle.js',      import.meta.url),
     new URL('./src/pages/components/tooltip.js',     import.meta.url),
     // Landing Components
@@ -115,8 +109,6 @@ await createServer(
     new URL('./src/pages/components/hero.js',        import.meta.url),
     new URL('./src/pages/components/nav.js',         import.meta.url),
     new URL('./src/pages/components/phone-frame.js', import.meta.url),
-    new URL('./src/pages/components/pricing.js',     import.meta.url),
-    new URL('./src/pages/components/testimonial.js', import.meta.url),
     // Templates
     new URL('./src/pages/templates.js',                     import.meta.url),
     new URL('./src/pages/templates/mobile-app.js',          import.meta.url),
@@ -131,11 +123,8 @@ await createServer(
     new URL('./src/pages/templates/journey.js',             import.meta.url),
     new URL('./src/pages/templates/shop.js',                import.meta.url),
     // Layout Components
-    new URL('./src/pages/components/banner.js',      import.meta.url),
     new URL('./src/pages/components/cluster.js',     import.meta.url),
-    new URL('./src/pages/components/code-window.js', import.meta.url),
     new URL('./src/pages/components/container.js',   import.meta.url),
-    new URL('./src/pages/components/decorate.js',    import.meta.url),
     new URL('./src/pages/components/divider.js',     import.meta.url),
     new URL('./src/pages/components/footer.js',      import.meta.url),
     new URL('./src/pages/components/grid.js',        import.meta.url),

package/docs/src/lib/nav.js

@@ -84,7 +84,6 @@ export const NAV = [
       { label: 'Button',      href: '/components/button'      },
       { label: 'Card',        href: '/components/card'        },
       { label: 'Checkbox',    href: '/components/checkbox'    },
-      { label: 'Carousel',    href: '/components/carousel'    },
       { label: 'Charts',      href: '/components/charts'      },
       { label: 'Empty',       href: '/components/empty'       },
       { label: 'Fieldset',    href: '/components/fieldset'    },
@@ -92,12 +91,8 @@ export const NAV = [
       { label: 'Heading',     href: '/components/heading'     },
       { label: 'Icons',       href: '/components/icons'       },
       { label: 'Image',       href: '/components/image'       },
-      { label: 'Gallery',     href: '/components/gallery'     },
       { label: 'Input',       href: '/components/input'       },
-      { label: 'List',        href: '/components/list'        },
-      { label: 'Marquee',     href: '/components/marquee'     },
       { label: 'Modal',       href: '/components/modal'       },
-      { label: 'Photo Card',  href: '/components/photo-card'  },
       { label: 'Progress',    href: '/components/progress'    },
       { label: 'Prose',       href: '/components/prose'       },
       { label: 'Pullquote',   href: '/components/pullquote'   },
@@ -112,7 +107,6 @@ export const NAV = [
       { label: 'Stepper',     href: '/components/stepper'     },
       { label: 'Table',       href: '/components/table'       },
       { label: 'Textarea',    href: '/components/textarea'    },
-      { label: 'Timeline',    href: '/components/timeline'    },
       { label: 'Toggle',      href: '/components/toggle'      },
       { label: 'Tooltip',     href: '/components/tooltip'     },
     ],
@@ -127,18 +121,13 @@ export const NAV = [
       { label: 'Hero',        href: '/components/hero'        },
       { label: 'Nav',         href: '/components/nav'         },
       { label: 'Phone Frame', href: '/components/phone-frame' },
-      { label: 'Pricing',     href: '/components/pricing'     },
-      { label: 'Testimonial', href: '/components/testimonial' },
     ],
   },
   {
     section: 'Layout Components',
     items: [
-      { label: 'Banner',      href: '/components/banner'      },
       { label: 'Cluster',     href: '/components/cluster'     },
-      { label: 'Code Window', href: '/components/code-window' },
       { label: 'Container',   href: '/components/container'   },
-      { label: 'Decorate',    href: '/components/decorate'    },
       { label: 'Divider',     href: '/components/divider'     },
       { label: 'Footer',      href: '/components/footer'      },
       { label: 'Grid',        href: '/components/grid'        },

package/docs/src/pages/components/charts.js

@@ -1,7 +1,8 @@
 import { renderComponentPage, demo } from '../../lib/component-page.js'
 import { prevNext } from '../../lib/nav.js'
 import { table } from '../../lib/layout.js'
-import { barChart, lineChart, donutChart, sparkline, stat, card, grid } from '../../../../src/ui/index.js'
+import { stat, card, grid } from '../../../../src/ui/index.js'
+import { barChart, lineChart, donutChart, sparkline } from '../../../../src/ui/charts.js'
 
 const { prev, next } = prevNext('/components/charts')
 

package/docs/src/pages/components/grid.js

@@ -1,7 +1,7 @@
 import { renderComponentPage, demo } from '../../lib/component-page.js'
 import { prevNext } from '../../lib/nav.js'
 import { table } from '../../lib/layout.js'
-import { grid, card, stat, feature, testimonial } from '../../../../src/ui/index.js'
+import { grid, card, stat, feature } from '../../../../src/ui/index.js'
 
 const { prev, next } = prevNext('/components/grid')
 
@@ -96,18 +96,22 @@ export default {
       )}
 
       <h3 class="doc-h3">Testimonial grid</h3>
+      <p>There is no dedicated <code>testimonial</code> component — build one with <code>card()</code>: the quote in <code>content</code>, the name and role in <code>footer</code>.</p>
       ${demo(
         grid({
           cols: 3,
           content: [
-            testimonial({ quote: 'Shipped our redesign in a weekend. No boilerplate, no config hell.', name: 'Alex Morgan',   role: 'CTO at Launchpad', rating: 5 }),
-            testimonial({ quote: 'The streaming SSR makes our pages feel instant. Lighthouse is happy.', name: 'Sara Kim',    role: 'Lead Engineer, Orbit', rating: 5 }),
-            testimonial({ quote: 'Finally a UI kit that doesn\'t fight the platform. Just HTML.', name: 'Dan Okafor', role: 'Founder, Stackly', rating: 5 }),
+            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;Shipped our redesign in a weekend. No boilerplate, no config hell.&rdquo;</p>`, footer: `<strong>Alex Morgan</strong><br><span style="color:var(--muted)">CTO at Launchpad</span>` }),
+            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;The streaming SSR makes our pages feel instant. Lighthouse is happy.&rdquo;</p>`, footer: `<strong>Sara Kim</strong><br><span style="color:var(--muted)">Lead Engineer, Orbit</span>` }),
+            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;Finally a UI kit that doesn\'t fight the platform. Just HTML.&rdquo;</p>`, footer: `<strong>Dan Okafor</strong><br><span style="color:var(--muted)">Founder, Stackly</span>` }),
           ].join(''),
         }),
         `grid({
   cols: 3,
-  content: testimonials.map(t => testimonial(t)).join(''),
+  content: testimonials.map(t => card({
+    content: \`<p>\${t.quote}</p>\`,
+    footer:  \`<strong>\${t.name}</strong><br>\${t.role}\`,
+  })).join(''),
 })`
       )}
 

package/docs/src/pages/components.js

@@ -94,8 +94,6 @@ export default {
           ['<a href="/components/hero">hero</a>',             'Full-width hero section with eyebrow, title, and actions.'],
           ['<a href="/components/app-badge">appBadge</a>',    'App Store / Google Play download badge.'],
           ['<a href="/components/feature">feature</a>',       'Icon + title + description block for feature grids.'],
-          ['<a href="/components/testimonial">testimonial</a>', 'Customer quote with avatar and star rating.'],
-          ['<a href="/components/pricing">pricing</a>',       'Plan card with feature list and CTA. Supports highlighted state.'],
           ['<a href="/components/accordion">accordion</a>',   'Collapsible FAQ items — no JS, native <code>&lt;details&gt;</code>.'],
           ['<a href="/components/cta">cta</a>',               'Call-to-action block with eyebrow, heading, body, and actions slot.'],
         ]
@@ -111,9 +109,7 @@ export default {
           ['<a href="/components/stack">stack</a>',         'Flex column with consistent vertical gap.'],
           ['<a href="/components/cluster">cluster</a>',     'Flex row with wrapping — for badges, buttons, etc.'],
           ['<a href="/components/divider">divider</a>',     'Horizontal rule, optionally with centred label.'],
-          ['<a href="/components/banner">banner</a>',       'Full-width announcement bar above the nav.'],
           ['<a href="/components/media">media</a>',             'Two-column image + text layout, stacks on mobile.'],
-          ['<a href="/components/code-window">codeWindow</a>', 'macOS window chrome around a code block. Accepts pre-highlighted HTML.'],
           ['<a href="/components/footer">footer</a>',          'Site footer with logo, nav links, and legal text. Stacks on mobile.'],
         ]
       )}

package/docs/src/pages/home.js

@@ -2,9 +2,24 @@
 import { highlight }                                        from '../lib/highlight.js'
 import { iconZap, iconShield, iconSettings }               from '../../../src/ui/icons.js'
 import { metricsStore }  from '../lib/metrics-store.js'
-import { codeWindow }    from '../../../src/ui/code-window.js'
 import pkg from '../../../package.json' with { type: 'json' }
 
+// macOS-style code window chrome — raw HTML (creative override), replacing
+// the removed codeWindow() component. Reuses the same .ui-code-window*
+// CSS classes still defined in pulse-ui.css.
+const codeWindow = ({ content = '', filename = '', lang = '' }) => `
+  <div class="ui-code-window" role="region"${filename ? ` aria-label="${filename}"` : ''}>
+    <div class="ui-code-window-chrome" aria-hidden="true">
+      <span class="ui-code-window-dot"></span>
+      <span class="ui-code-window-dot"></span>
+      <span class="ui-code-window-dot"></span>
+      ${filename ? `<span class="ui-code-window-filename">${filename}</span>` : ''}
+      ${lang     ? `<span class="ui-code-window-lang">${lang}</span>` : ''}
+    </div>
+    <pre class="ui-code-window-pre"><code class="ui-code-window-code">${content}</code></pre>
+  </div>
+`
+
 const { version } = pkg
 
 const exampleSpec = highlight(`export default {

package/docs/src/pages/how-it-works.js

@@ -1,67 +1,73 @@
 import { renderLayout, h1, lead, section, callout } from '../lib/layout.js'
 import { prevNext } from '../lib/nav.js'
-import { timeline, card } from '../../../src/ui/index.js'
+import { card } from '../../../src/ui/index.js'
 
 const { prev, next } = prevNext('/how-it-works')
 
-const agentFlow = timeline({
-  items: [
+// Numbered vertical flow diagram — raw HTML (creative override), replacing
+// the removed timeline()/timelineItem() components. Styled via .hiw-flow*
+// classes in docs.css.
+const flowStep = ({ dot, label, content }) => `
+  <li class="hiw-flow-item">
+    <div class="hiw-flow-side">
+      <div class="hiw-flow-connector hiw-flow-connector--before"></div>
+      <div class="hiw-flow-dot" aria-hidden="true">${dot}</div>
+      <div class="hiw-flow-connector hiw-flow-connector--after"></div>
+    </div>
+    <div class="hiw-flow-main">
+      <span class="hiw-flow-label">${label}</span>
+      <div class="hiw-flow-body">${content}</div>
+    </div>
+  </li>
+`
+
+const agentFlow = `<ol class="hiw-flow">${[
     {
       dot: '1',
-      dotColor: 'accent',
       label: 'Understand',
       content: card({ content: `<strong style="color:var(--ui-text)">Read the guide and inspect the project</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent fetches <code>pulse://workflow</code> and the relevant <code>pulse://guide/*</code> sections, then calls <code>pulse_list_structure</code> to see every existing page, component, and store. Ambiguities are surfaced before any files are touched.</p>` }),
     },
     {
       dot: '2',
-      dotColor: 'accent',
       label: 'Plan',
       content: card({ content: `<strong style="color:var(--ui-text)">Present a plan — wait for confirmation</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Before writing anything the agent describes what it intends to build: the route, state shape, server data, interactions, and any components or integrations it will use. The task does not proceed until you confirm.</p>` }),
     },
     {
       dot: '3',
-      dotColor: 'accent',
       label: 'Build',
       content: card({ content: `<strong style="color:var(--ui-text)">Write the spec and any supporting files</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The spec is written as a plain JS object: route, state, server data, mutations, actions, view. The guide constrains every decision — where state lives, how validation is wired, how the view is structured.</p>` }),
     },
     {
       dot: '4',
-      dotColor: 'accent',
       label: 'Validate',
       content: card({ content: `<strong style="color:var(--ui-text)">Call <code>pulse_validate</code> — fix all errors and warnings</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The spec is checked against the Pulse schema. Every error and warning is resolved before moving on — missing hydrate, heading order violations, missing escaping, structural mistakes. A clean output is the gate to the next phase.</p>` }),
     },
     {
       dot: '5',
-      dotColor: 'accent',
       label: 'Browser',
       content: card({ content: `<strong style="color:var(--ui-text)">Screenshot + Lighthouse — desktop and mobile</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent navigates to the route, takes a screenshot to confirm the rendered output, then runs Lighthouse on both desktop and mobile. Accessibility, Best Practices, and SEO must all be 100. Any failure is fixed and re-verified before continuing.</p>` }),
     },
     {
       dot: '6',
-      dotColor: 'accent',
       label: 'Tests',
       content: card({ content: `<strong style="color:var(--ui-text)">Write tests, run them, fix failures</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Unit tests cover any pure logic extracted from the spec. View tests use <code>renderSync</code> / <code>render</code> to assert HTML output. All tests must pass. When fixing a bug, a failing test is written first to pin the behaviour.</p>` }),
     },
     {
       dot: '7',
-      dotColor: 'accent',
       label: 'Review',
       content: card({ content: `<strong style="color:var(--ui-text)">Call <code>pulse_review</code> — only after phases 4–6 all pass</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent switches into reviewer mode — reading the source and rendered output against the full spec checklist. Accessibility, empty states, error handling, component usage, and security are all checked. The review agent is always last.</p>` }),
     },
     {
       dot: '8',
-      dotColor: 'accent',
       label: 'Fix and re-verify',
       content: card({ content: `<strong style="color:var(--ui-text)">Fix every review issue — re-run affected gates</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Every issue raised in review is resolved. Validate, Lighthouse, and tests are re-run to confirm all gates still pass. The task is complete only when every phase clears cleanly.</p>` }),
     },
     {
       dot: '✓',
-      dotColor: 'success',
       label: 'Done',
       content: card({ content: `<strong style="color:var(--ui-text)">The spec is the source of truth</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Validate clean. Lighthouse 100. Tests passing. Review clear. When all four gates pass, the page is done.</p>` }),
     },
-  ],
-})
+  ].map(flowStep).join('')}</ol>`
 
 export default {
   route: '/how-it-works',