@invisibleloop/pulse 0.20.8 → 0.20.9

package/docs/public/pulse-ui.css

@@ -852,42 +852,6 @@ hr.ui-divider {
 .ui-hero { padding: 5rem 1.5rem; text-align: center; }
 .ui-hero--left { text-align: left; }
 .ui-hero--sm   { padding-top: 2.5rem; padding-bottom: 0; }
-.ui-hero--gradient,
-.ui-hero--gradient--purple {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #2d1b6e 0%, #1a0f45 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #1c1060 0%, transparent 65%),
-    #0d0a1e;
-}
-
-.ui-hero--gradient--blue {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0e2d6b 0%, #071840 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #0a1f5c 0%, transparent 65%),
-    #060d1e;
-}
-
-.ui-hero--gradient--green {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0d3d28 0%, #052218 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #083020 0%, transparent 65%),
-    #020e09;
-}
-
-.ui-hero--gradient--rose {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b0e35 0%, #400720 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c0a2a 0%, transparent 65%),
-    #1e0610;
-}
-
-.ui-hero--gradient--orange {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b2e0e 0%, #401807 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c2208 0%, transparent 65%),
-    #1e0e04;
-}
-
 .ui-hero-inner { max-width: 720px; margin: 0 auto; }
 .ui-hero--left .ui-hero-inner { margin: 0; }
 

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

@@ -40,28 +40,28 @@ export default {
         card({
           flush:   true,
           content: `
-            <div class="u-rounded-md u-overflow-hidden" style="height:180px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;">
-              <span style="font-size:3rem">🌄</span>
+            <div class="u-overflow-hidden" style="height:180px;border-radius:var(--ui-radius) var(--ui-radius) 0 0">
+              <img src="/img/heic1501a.jpg" alt="The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope" style="width:100%;height:100%;object-fit:cover;display:block">
             </div>
             <div class="u-p-5">
-              <p class="u-font-semibold u-mb-2" style="margin-top:0">Mountain retreat</p>
-              <p class="u-text-muted u-text-sm" style="margin:0">A peaceful escape in the highlands. Three nights, all-inclusive.</p>
+              <p class="u-font-semibold u-mb-2" style="margin-top:0">Deep field</p>
+              <p class="u-text-muted u-text-sm" style="margin:0">The Pillars of Creation, imaged by the Hubble Space Telescope.</p>
             </div>
           `,
-          footer: button({ label: 'Book now', href: '#', variant: 'primary', size: 'sm' }),
+          footer: button({ label: 'View gallery', href: '#', variant: 'primary', size: 'sm' }),
         }),
         `card({
   flush: true,
   content: \`
-    <div class="u-rounded-md u-overflow-hidden" style="height:180px;background:...">
-      <img src="/img/retreat.jpg" alt="Mountain retreat" style="width:100%;height:100%;object-fit:cover">
+    <div class="u-overflow-hidden" style="height:180px;border-radius:var(--ui-radius) var(--ui-radius) 0 0">
+      <img src="/img/nebula.jpg" alt="The Pillars of Creation in the Eagle Nebula" style="width:100%;height:100%;object-fit:cover">
     </div>
     <div class="u-p-5">
-      <p class="u-font-semibold u-mb-2">Mountain retreat</p>
-      <p class="u-text-muted u-text-sm">A peaceful escape in the highlands.</p>
+      <p class="u-font-semibold u-mb-2">Deep field</p>
+      <p class="u-text-muted u-text-sm">The Pillars of Creation, imaged by the Hubble Space Telescope.</p>
     </div>
   \`,
-  footer: button({ label: 'Book now', href: '/book', variant: 'primary', size: 'sm' }),
+  footer: button({ label: 'View gallery', href: '/gallery', variant: 'primary', size: 'sm' }),
 })`
       )}
 

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

@@ -15,23 +15,7 @@ export default {
   },
   state: {},
   view: () => {
-    const placeholderImg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" style="width:100%;height:auto;border-radius:var(--ui-radius,8px);display:block" role="img" aria-label="Placeholder image">
-  <rect width="600" height="400" fill="#111116" rx="8"/>
-  <rect x="24" y="24" width="552" height="32" rx="6" fill="#1a1a22"/>
-  <circle cx="44" cy="40" r="6" fill="#ff5f57"/><circle cx="64" cy="40" r="6" fill="#febc2e"/><circle cx="84" cy="40" r="6" fill="#28c840"/>
-  <rect x="24" y="72" width="552" height="200" rx="6" fill="#1a1a22"/>
-  <rect x="40" y="92" width="200" height="12" rx="3" fill="#2a2a35"/>
-  <rect x="40" y="116" width="300" height="8" rx="3" fill="#222228"/>
-  <rect x="40" y="132" width="260" height="8" rx="3" fill="#222228"/>
-  <rect x="40" y="148" width="280" height="8" rx="3" fill="#222228"/>
-  <rect x="40" y="176" width="120" height="32" rx="6" fill="#9b8dff" opacity=".9"/>
-  <rect x="24" y="288" width="264" height="88" rx="6" fill="#1a1a22"/>
-  <rect x="312" y="288" width="264" height="88" rx="6" fill="#1a1a22"/>
-  <rect x="40" y="304" width="100" height="8" rx="3" fill="#2a2a35"/>
-  <rect x="40" y="320" width="140" height="6" rx="3" fill="#222228"/>
-  <rect x="328" y="304" width="100" height="8" rx="3" fill="#2a2a35"/>
-  <rect x="328" y="320" width="120" height="6" rx="3" fill="#222228"/>
-</svg>`
+    const placeholderImg = `<img src="/img/heic1501a.jpg" alt="The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope" style="width:100%;height:100%;object-fit:cover;border-radius:var(--ui-radius,8px);display:block">`
     return renderComponentPage({
     currentHref: '/components/hero',
     prev,
@@ -93,18 +77,6 @@ export default {
         { bleed: true }
       )}
 
-      ${demo(
-        `<div style="display:flex;flex-direction:column;gap:0">` +
-          hero({ eyebrow: 'Purple (default)', title: 'gradient: true', gradient: 'purple', size: 'sm' }) +
-          hero({ eyebrow: 'Blue',             title: "gradient: 'blue'",   gradient: 'blue',   size: 'sm' }) +
-          hero({ eyebrow: 'Green',            title: "gradient: 'green'",  gradient: 'green',  size: 'sm' }) +
-          hero({ eyebrow: 'Rose',             title: "gradient: 'rose'",   gradient: 'rose',   size: 'sm' }) +
-          hero({ eyebrow: 'Orange',           title: "gradient: 'orange'", gradient: 'orange', size: 'sm' }) +
-        `</div>`,
-        `hero({ title: 'Headline', gradient: 'purple' })  // or 'blue' | 'green' | 'rose' | 'orange'`,
-        { bleed: true }
-      )}
-
       ${demo(
         `<div style="display:flex;flex-direction:column;gap:0">` +
           hero({ eyebrow: 'Solid colour', title: 'background: color', background: '#0f172a', size: 'sm' }) +
@@ -142,8 +114,7 @@ hero({ title: 'Headline', background: 'linear-gradient(135deg, #1e1b4b, #312e81)
           ['<code>imageAlign</code>',  'string',        "'right'",    "'right' (text left) or 'left' (text right) — only applies when image is set"],
           ['<code>align</code>',       'string',        "'center'",   "'center' or 'left' — text alignment when no image"],
           ['<code>size</code>',        'string',        "'md'",       "'md' (5rem padding) or 'sm' (2.5rem top, no bottom) — use sm for inner-page headers"],
-          ['<code>gradient</code>',    "boolean | 'purple' | 'blue' | 'green' | 'rose' | 'orange'", 'false', 'Named gradient preset. true and \'purple\' are identical.'],
-          ['<code>background</code>', 'string',        '—',          'Any CSS background value — solid colour or custom gradient. Overrides gradient preset.'],
+          ['<code>background</code>', 'string',        '—',          'Any CSS background value — solid colour or custom gradient.'],
         ]
       )}
     `,

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

@@ -24,31 +24,31 @@ export default {
       <h2 class="doc-h2" id="ratio">With aspect ratio</h2>
       <p>Set <code>ratio</code> to constrain the image to a fixed aspect ratio. The image fills the crop area with <code>object-fit: cover</code>.</p>
       ${demo(
-        uiImage({ src: '/img/placeholder-landscape.svg', alt: 'Mountain landscape at dusk', ratio: '16/9' }),
-        `uiImage({ src: '/img/photo.jpg', alt: 'Mountain landscape at dusk', ratio: '16/9' })`,
+        uiImage({ src: '/img/heic1501a.jpg', alt: 'The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope', ratio: '16/9' }),
+        `uiImage({ src: '/img/nebula.jpg', alt: 'The Pillars of Creation in the Eagle Nebula', ratio: '16/9' })`,
         { col: true }
       )}
 
       <h2 class="doc-h2" id="rounded">Square and rounded</h2>
       ${demo(
-        `<div style="max-width:200px;margin:0 auto">${uiImage({ src: '/img/placeholder-square.svg', alt: 'Profile photo', ratio: '1/1', rounded: true })}</div>`,
-        `uiImage({ src: '/img/avatar.jpg', alt: 'Profile photo', ratio: '1/1', rounded: true })`,
+        `<div style="max-width:200px;margin:0 auto">${uiImage({ src: '/img/heic1501a.jpg', alt: 'The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope', ratio: '1/1', rounded: true })}</div>`,
+        `uiImage({ src: '/img/nebula.jpg', alt: 'The Pillars of Creation in the Eagle Nebula', ratio: '1/1', rounded: true })`,
         { col: true }
       )}
 
       <h2 class="doc-h2" id="caption">With caption</h2>
       ${demo(
         uiImage({
-          src:     '/img/placeholder-tall.svg',
-          alt:     'Aerial view of a coastal town',
+          src:     '/img/heic1501a.jpg',
+          alt:     'The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope',
           ratio:   '4/3',
-          caption: 'Aerial view of Porto, Portugal. Photo by João Silva.',
+          caption: 'The Pillars of Creation, Eagle Nebula. Photo: NASA, ESA, Hubble Heritage Team.',
         }),
         `uiImage({
-  src:     '/img/photo.jpg',
-  alt:     'Aerial view of a coastal town',
+  src:     '/img/nebula.jpg',
+  alt:     'The Pillars of Creation in the Eagle Nebula',
   ratio:   '4/3',
-  caption: 'Aerial view of Porto, Portugal. Photo by João Silva.',
+  caption: 'The Pillars of Creation, Eagle Nebula. Photo: NASA, ESA, Hubble Heritage Team.',
 })`,
         { col: true }
       )}

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

@@ -22,7 +22,7 @@ export default {
     content: `
       ${demo(
         media({
-          image:   `<div style="background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:8px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--ui-muted);font-size:.875rem">Screenshot</div>`,
+          image:   `<img src="/img/heic1501a.jpg" alt="The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope" style="width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block">`,
           content: stack({ gap: 'md', content: '<h3 style="font-size:1.25rem;font-weight:700;color:var(--ui-text);margin:0">One-tap controls</h3><p style="color:var(--ui-muted);margin:0">Tap to flap. Chippy Bird takes seconds to learn and a lifetime to conquer.</p>' + button({ label: 'Download', href: '#' }) }),
         }),
         `media({

package/examples/public/pulse-ui.css

@@ -852,42 +852,6 @@ hr.ui-divider {
 .ui-hero { padding: 5rem 1.5rem; text-align: center; }
 .ui-hero--left { text-align: left; }
 .ui-hero--sm   { padding-top: 2.5rem; padding-bottom: 0; }
-.ui-hero--gradient,
-.ui-hero--gradient--purple {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #2d1b6e 0%, #1a0f45 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #1c1060 0%, transparent 65%),
-    #0d0a1e;
-}
-
-.ui-hero--gradient--blue {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0e2d6b 0%, #071840 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #0a1f5c 0%, transparent 65%),
-    #060d1e;
-}
-
-.ui-hero--gradient--green {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0d3d28 0%, #052218 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #083020 0%, transparent 65%),
-    #020e09;
-}
-
-.ui-hero--gradient--rose {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b0e35 0%, #400720 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c0a2a 0%, transparent 65%),
-    #1e0610;
-}
-
-.ui-hero--gradient--orange {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b2e0e 0%, #401807 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c2208 0%, transparent 65%),
-    #1e0e04;
-}
-
 .ui-hero-inner { max-width: 720px; margin: 0 auto; }
 .ui-hero--left .ui-hero-inner { margin: 0; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.20.8",
+  "version": "0.20.9",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.20.8
+0.20.9

package/public/pulse-ui.css

@@ -852,42 +852,6 @@ hr.ui-divider {
 .ui-hero { padding: 5rem 1.5rem; text-align: center; }
 .ui-hero--left { text-align: left; }
 .ui-hero--sm   { padding-top: 2.5rem; padding-bottom: 0; }
-.ui-hero--gradient,
-.ui-hero--gradient--purple {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #2d1b6e 0%, #1a0f45 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #1c1060 0%, transparent 65%),
-    #0d0a1e;
-}
-
-.ui-hero--gradient--blue {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0e2d6b 0%, #071840 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #0a1f5c 0%, transparent 65%),
-    #060d1e;
-}
-
-.ui-hero--gradient--green {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #0d3d28 0%, #052218 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #083020 0%, transparent 65%),
-    #020e09;
-}
-
-.ui-hero--gradient--rose {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b0e35 0%, #400720 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c0a2a 0%, transparent 65%),
-    #1e0610;
-}
-
-.ui-hero--gradient--orange {
-  background:
-    radial-gradient(ellipse 70% 80% at 75% 50%, #6b2e0e 0%, #401807 45%, transparent 75%),
-    radial-gradient(ellipse 60% 60% at 20% 80%, #5c2208 0%, transparent 65%),
-    #1e0e04;
-}
-
 .ui-hero-inner { max-width: 720px; margin: 0 auto; }
 .ui-hero--left .ui-hero-inner { margin: 0; }
 

package/src/mcp/server.js

@@ -1856,7 +1856,7 @@ export default {
         { label: 'Features', href: '#features' },
         { label: 'Pricing',  href: '#pricing'  },
       ], actions: button({ label: 'Get started', size: 'sm' }) })}
-      \${hero({ title: 'Your headline here', subtitle: 'Supporting copy that explains the value.', gradient: 'purple',
+      \${hero({ title: 'Your headline here', subtitle: 'Supporting copy that explains the value.',
         actions: button({ label: 'Get started', size: 'lg' }) })}
       \${section({ id: 'features', content: container({ content: \`
         \${grid({ cols: 3, content:

package/src/ui/hero.js

@@ -17,8 +17,7 @@
  *   'split' (default): 50/50 columns.
  *   'asymmetric': 60/40 text-heavy columns.
  *   'overlap': image fills the section background, text overlaid with dark gradient.
- * @param {boolean|'purple'|'blue'|'green'|'rose'|'orange'} opts.gradient
- * @param {string}  opts.background    - Arbitrary CSS background value — overrides gradient preset
+ * @param {string}  opts.background    - Arbitrary CSS background value
  * @param {string}  opts.backgroundImage - CSS background-image value (url, gradient, etc) — enables full-bleed mode
  * @param {boolean|number} opts.overlay - Dark overlay opacity for backgroundImage mode (0–1, or true for 0.4 default)
  * @param {string}  opts.eyebrowColor  - Overrides eyebrow text colour
@@ -27,8 +26,7 @@
 
 import { escHtml as e } from '../html.js'
 
-const GRADIENT_PRESETS = new Set(['purple', 'blue', 'green', 'rose', 'orange'])
-const LAYOUTS          = new Set(['split', 'asymmetric', 'overlap'])
+const LAYOUTS = new Set(['split', 'asymmetric', 'overlap'])
 
 export function hero({
   eyebrow     = '',
@@ -40,7 +38,6 @@ export function hero({
   align       = 'center',
   size        = 'md',
   layout      = 'split',
-  gradient     = false,
   background   = '',
   backgroundImage = '',
   overlay      = false,
@@ -52,13 +49,6 @@ export function hero({
   const hasBackgroundImage = Boolean(backgroundImage)
   const safeLayout  = (hasImage && LAYOUTS.has(layout)) ? layout : 'split'
 
-  // Resolve gradient class
-  const gradientClass = gradient
-    ? (gradient === true || gradient === 'purple')
-      ? 'ui-hero--gradient'
-      : GRADIENT_PRESETS.has(gradient) ? `ui-hero--gradient--${gradient}` : ''
-    : ''
-
   const classes = [
     'ui-hero',
     !hasImage && !hasBackgroundImage && align === 'left' && 'ui-hero--left',
@@ -66,7 +56,6 @@ export function hero({
     hasImage && safeLayout !== 'overlap' && imageAlign === 'left' && 'ui-hero--media-left',
     hasBackgroundImage && 'ui-hero--bg-image',
     size === 'sm' && 'ui-hero--sm',
-    gradientClass,
     cls,
   ].filter(Boolean).join(' ')