@invisibleloop/pulse 0.20.8 → 0.20.10

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; }
 
@@ -1755,14 +1719,14 @@ hr.ui-divider {
 .ui-code-window-filename {
   font-size:   .75rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: .35rem;
 }
 
 .ui-code-window-lang {
   font-size:   .7rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: auto;
 }
 

package/docs/public/theme.css

@@ -24,22 +24,22 @@
   --border-subtle: #ece7d9;
   --text:          var(--brut-ink);
   --muted:         var(--brut-muted);
-  --muted-2:       #8a8272;
-  --accent:        var(--brut-gold-deep);
+  --muted-2:       #736b5c;
+  --accent:        #8a6300;
   --accent-text:   var(--brut-ink);
-  --accent-hover:  #a97f00;
+  --accent-hover:  #7a5700;
   --accent-dim:    rgba(201, 151, 0, 0.12);
   --green:         #166534;
   --red:           #b91c1c;
 
   /* Syntax tokens — dark-on-light, tuned for contrast on --surface-2 */
   --tok-kw:    #7c3aed;
-  --tok-str:   #15803d;
-  --tok-cmt:   #78716c;
-  --tok-num:   #c2410c;
+  --tok-str:   #166534;
+  --tok-cmt:   #5c574f;
+  --tok-num:   #9a3412;
   --tok-fn:    #1d4ed8;
-  --tok-prop:  #a16207;
-  --tok-op:    #0891b2;
+  --tok-prop:  #854d0e;
+  --tok-op:    #0e6280;
   --tok-punct: #57534e;
 
   /* Sticky header background — replaces the hardcoded rgba(13,13,16,.9) */

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/docs/src/pages/templates.js

@@ -13,20 +13,26 @@ function esc(s) {
 }
 
 function statPill(label, value) {
-  return `<span style="display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.72rem;font-weight:500;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.55)">
-    <span style="color:#7c3aed">●</span> ${esc(label)}: <strong style="color:rgba(255,255,255,0.85);font-weight:600">${esc(String(value))}</strong>
+  return `<span style="display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.72rem;font-weight:500;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.7)">
+    <span style="color:#a78bfa">●</span> ${esc(label)}: <strong style="color:#fff;font-weight:600">${esc(String(value))}</strong>
   </span>`
 }
 
 function templateCard({ name, route, description, tags = [], stats = {}, preview = '' }) {
   const tagHtml = tags.map(t =>
-    `<span style="display:inline-block;padding:0.2rem 0.6rem;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:4px;font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.55)">${esc(t)}</span>`
+    `<span style="display:inline-block;padding:0.2rem 0.6rem;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);border-radius:4px;font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.7)">${esc(t)}</span>`
   ).join('')
 
   const statHtml = Object.entries(stats).map(([k, v]) => statPill(k, v)).join('')
 
+  // This card is a deliberately dark, self-contained surface (macOS-style
+  // preview window + dark body) regardless of the page's own theme — it
+  // mirrors the code-window pattern elsewhere. Uses a real dark background
+  // (not a translucent white tint over the page background), so it reads
+  // correctly on both the light and dark docs themes and keeps the
+  // white-tinted text/borders it was designed with at proper contrast.
   return `
-    <div style="border:1px solid rgba(255,255,255,0.1);border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;background:rgba(255,255,255,0.03)">
+    <div style="border:1px solid rgba(255,255,255,0.1);border-radius:0.875rem;overflow:hidden;display:flex;flex-direction:column;background:#171512">
 
       <a href="${esc(route)}" aria-label="Open ${esc(name)} template" style="display:block;background:#0d0d12;border-bottom:1px solid rgba(255,255,255,0.08);text-decoration:none;overflow:hidden">
         <div style="padding:0.5rem 0.75rem;background:#16161e;display:flex;align-items:center;gap:0.375rem;border-bottom:1px solid rgba(255,255,255,0.06)">
@@ -40,13 +46,13 @@ function templateCard({ name, route, description, tags = [], stats = {}, preview
         </div>
       </a>
 
-      <div style="padding:1.25rem 1.25rem 1rem;flex:1;display:flex;flex-direction:column;gap:0.875rem">
+      <div style="padding:1.25rem 1.25rem 1rem;flex:1;display:flex;flex-direction:column;gap:0.875rem;color:#fff">
         <div>
           <div style="display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
-            <h2 style="margin:0;font-size:1rem;font-weight:700;line-height:1.3">${esc(name)}</h2>
+            <h2 style="margin:0;font-size:1rem;font-weight:700;line-height:1.3;color:#fff">${esc(name)}</h2>
             ${tagHtml}
           </div>
-          <p style="margin:0;font-size:0.85rem;line-height:1.6;opacity:0.65">${esc(description)}</p>
+          <p style="margin:0;font-size:0.85rem;line-height:1.6;color:rgba(255,255,255,0.7)">${esc(description)}</p>
         </div>
         <div style="display:flex;flex-wrap:wrap;gap:0.3rem;padding-top:0.625rem;border-top:1px solid rgba(255,255,255,0.08)">${statHtml}</div>
       </div>

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; }
 
@@ -1755,14 +1719,14 @@ hr.ui-divider {
 .ui-code-window-filename {
   font-size:   .75rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: .35rem;
 }
 
 .ui-code-window-lang {
   font-size:   .7rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: auto;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.20.8",
+  "version": "0.20.10",
   "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.10

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; }
 
@@ -1755,14 +1719,14 @@ hr.ui-divider {
 .ui-code-window-filename {
   font-size:   .75rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: .35rem;
 }
 
 .ui-code-window-lang {
   font-size:   .7rem;
   font-family: var(--ui-mono);
-  color:       #9898b2;
+  color:       var(--ui-muted);
   margin-left: auto;
 }
 

package/scripts/build.js

@@ -502,7 +502,7 @@ const result = await esbuild.build({
   platform:    'browser',
   outdir:      OUT_DIR,
   entryNames:  '[name]-[hash]',
-  chunkNames:  'runtime-[hash]',
+  chunkNames:  'chunk-[hash]',
   splitting:   true,
   minify:      true,
   metafile:    true,
@@ -520,13 +520,25 @@ const result = await esbuild.build({
 
 const manifest = {}
 
+// Identify the real Pulse framework runtime chunk (the one containing mount())
+// by which auto-split chunks actually import RUNTIME_PATH — not by filename
+// prefix, since chunkNames now applies to every generic shared chunk esbuild
+// splits out (app-level shared code included), not just the framework runtime.
+const RUNTIME_ABS = path.resolve(RUNTIME_PATH)
+const realRuntimeChunk = Object.entries(result.metafile.outputs).find(([outFile, meta]) => {
+  if (meta.entryPoint) return false
+  // meta.inputs keys are relative to process.cwd() — resolve to compare reliably
+  return Object.keys(meta.inputs).some(input => path.resolve(input) === RUNTIME_ABS)
+})?.[0]
+
 for (const [outFile, meta] of Object.entries(result.metafile.outputs)) {
   // outFile is relative to process.cwd(), not ROOT — use path.resolve to get the
   // true absolute path before computing the URL-relative bundle path.
   const bundlePath = '/' + path.relative(path.join(ROOT, 'public'), path.resolve(outFile))
 
-  // Shared runtime chunk — esbuild generates this via splitting, no entryPoint
-  if (!meta.entryPoint && path.basename(outFile).startsWith('runtime-')) {
+  // Shared runtime chunk — esbuild generates this via splitting, no entryPoint.
+  // Identified by containing the actual runtime/index.js source, not by name.
+  if (!meta.entryPoint && outFile === realRuntimeChunk) {
     manifest['_runtime'] = bundlePath
     continue
   }

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/runtime/index.js

@@ -7,12 +7,28 @@
  * No framework. No virtual DOM. No dependencies.
  */
 
-import { initClientStore, getStoreState, subscribe, updateStore, registerStoreMutations, dispatchStoreMutation, initLiveStore } from './store.js'
 import { trustedHTML, trustedScriptURL } from './tt.js'
 
 // Toast is lazy-loaded on first use — pages that never use _toast pay zero bytes
 const showToast = (opts) => import('./toast.js').then(m => m.showToast(opts))
 
+// store.js is lazy-loaded only by pages that declare spec.store — pages that
+// never subscribe to the global store pay zero bytes for it (same pattern as
+// showToast above). updateStore is needed synchronously inside runAction()
+// for _storeUpdate (any page can push to the store from an action, even one
+// that doesn't itself subscribe), so it is loaded the same lazy way on first
+// use and cached in _storeModule for subsequent calls.
+let _storeModule = null
+const loadStore = () => _storeModule
+  ? Promise.resolve(_storeModule)
+  : import('./store.js').then(m => { _storeModule = m; return m })
+
+// data-store-event is wired via event delegation at bindEvents() time, before
+// spec.store is known to be involved (a page can carry a data-store-event
+// button without declaring spec.store itself) — load store.js on first fire.
+const dispatchStoreMutationLazy = (name, payload) =>
+  loadStore().then(({ dispatchStoreMutation }) => dispatchStoreMutation(name, payload))
+
 // ---------------------------------------------------------------------------
 // Mount
 // ---------------------------------------------------------------------------
@@ -29,37 +45,85 @@ export function mount(spec, el, serverState = {}, options = {}) {
     throw new Error('[Pulse] mount: spec must have a view')
   }
   // Spec is validated server-side at startup — no need to re-validate in the browser
-  // Initialise the client store from SSR data (no-op after the first page mount).
-  // window.__PULSE_STORE__ is serialised by the server when a store is registered.
-  if (typeof window !== 'undefined') {
-    initClientStore(window.__PULSE_STORE__ || {})
-    // Register store mutations so data-store-event bindings can dispatch them.
-    // No-op on subsequent mounts — mutations persist across client navigations.
-    if (options.store?.mutations) {
-      registerStoreMutations(options.store.mutations)
-    }
-  }
-
   // Separate page-level server state from store keys so they can be tracked
   // independently — store values come from the live singleton, not the snapshot.
   const _storeKeys = new Set(spec.store || [])
 
-  // Live store push — connect to the server's SSE channel, but only when this
-  // page actually subscribes to store keys. Singleton: survives navigations,
-  // repeat mounts are no-ops. Pages without store keys never open a connection.
-  if (typeof window !== 'undefined' && window.__PULSE_LIVE__ && _storeKeys.size > 0) {
-    initLiveStore(window.__PULSE_LIVE__)
+  // store.js (initClientStore, registerStoreMutations, subscribe, initLiveStore,
+  // getStoreState, updateStore, dispatchStoreMutation) is lazy-loaded — only pages
+  // that actually touch the store pay for it. Two independent triggers load it:
+  //   1. spec.store is non-empty (this page reads store data / needs live reactivity)
+  //   2. a data-store-event fires, or an action returns _storeUpdate (this page
+  //      pushes to the store without necessarily subscribing to it)
+  // Both paths funnel through loadStore(), which caches the resolved module so a
+  // second trigger on the same page is a no-op re-await, not a second fetch.
+  //
+  // initClientStore is safe to defer: it is only ever read via getStoreState(),
+  // which is only called from getEffectiveServerState() below, itself gated on
+  // _storeKeys.size — so a page with no spec.store never needs the store singleton
+  // initialised at all. window.__PULSE_STORE__ is also re-serialised fresh by the
+  // server on every navigation (see ssr.js buildStoreScript / navigate.js's
+  // window.__updatePulseStore__), so there is no cross-navigation dependency on an
+  // eager initClientStore call from a page that didn't declare spec.store.
+  // Populated once store.js resolves and this page subscribes — destroy() reads
+  // it at call time, so a destroy() that races the import still unsubscribes
+  // correctly (it just runs the .then() below first, since both are microtasks
+  // queued off the same import; destroy() itself is only ever called later, from
+  // user code or client navigation, well after mount() has returned).
+  let _unsubStore = null
+  let _destroyed  = false
+
+  // NOTE: subscribe() below is intentionally not gated on `typeof window` — this
+  // matches the pre-lazy behaviour, where store subscription worked in any
+  // environment (including Node test environments with no `window` global) as
+  // long as spec.store was non-empty. Only the window-derived inputs
+  // (window.__PULSE_STORE__, window.__PULSE_LIVE__) are individually guarded.
+  if (_storeKeys.size > 0) {
+    loadStore().then(({ initClientStore, registerStoreMutations, initLiveStore, subscribe }) => {
+      if (_destroyed) return
+      if (typeof window !== 'undefined') {
+        // window.__PULSE_STORE__ is serialised by the server when a store is registered.
+        initClientStore(window.__PULSE_STORE__ || {})
+        // Register store mutations so data-store-event bindings can dispatch them.
+        // No-op on subsequent mounts — mutations persist across client navigations.
+        if (options.store?.mutations) {
+          registerStoreMutations(options.store.mutations)
+        }
+        // Live store push — connect to the server's SSE channel, but only when this
+        // page actually subscribes to store keys. Singleton: survives navigations,
+        // repeat mounts are no-ops. Pages without store keys never open a connection.
+        if (window.__PULSE_LIVE__) {
+          initLiveStore(window.__PULSE_LIVE__)
+        }
+      }
+      // Subscribe to global store — re-render whenever store keys this page uses
+      // change. Wired here (after the async import resolves) rather than
+      // synchronously in mount() — see the module-level comment on loadStore.
+      _unsubStore = subscribe(() => render())
+    })
   }
   const _pageServerState = {}
   for (const [k, v] of Object.entries(serverState)) {
     if (!_storeKeys.has(k)) _pageServerState[k] = v
   }
 
+  // Snapshot of the store keys as SSR handed them to mount() — used as a
+  // fallback for renders that happen before store.js's lazy import resolves
+  // (initial render, and any dispatch that fires in that window). This keeps
+  // first paint identical to the pre-lazy behaviour: the SSR-seeded values are
+  // available immediately. Once store.js loads, getEffectiveServerState()
+  // switches over to the live singleton (getStoreState()), which is required
+  // for correctness after any store mutation.
+  const _storeSnapshot = {}
+  for (const k of _storeKeys) {
+    if (serverState[k] !== undefined) _storeSnapshot[k] = serverState[k]
+  }
+
   // Build the server state the view sees: fresh store slice + page-level data.
   // Page-level keys always win over store keys with the same name.
   function getEffectiveServerState() {
     if (!_storeKeys.size) return _pageServerState
-    const storeState = getStoreState()
+    const storeState = _storeModule ? _storeModule.getStoreState() : _storeSnapshot
     const slice = {}
     for (const key of _storeKeys) {
       if (storeState[key] !== undefined) slice[key] = storeState[key]
@@ -109,7 +173,7 @@ export function mount(spec, el, serverState = {}, options = {}) {
     try {
       html = resolveView(spec, state, getEffectiveServerState())
     } catch (err) {
-      console.error('[Pulse] View error:', err)
+      console.error('[Pulse] view error:', err)
       const serverState = getEffectiveServerState()
       html = spec.onViewError
         ? spec.onViewError(err, state, serverState)
@@ -120,6 +184,24 @@ export function mount(spec, el, serverState = {}, options = {}) {
     morph(el, html)
   }
 
+  // ---------------------------------------------------------------------------
+  // Result application — shared by every mutation/action lifecycle step.
+  // Handles the side-channel keys (_toast, _storeUpdate), merges the rest of
+  // `raw` into state via constraints, and re-renders only if state actually
+  // changed. Used by dispatch() and every stage of runAction().
+  // ---------------------------------------------------------------------------
+
+  function applyResult(raw) {
+    const { _toast, _storeUpdate, ...partial } = raw ?? {}
+    // store.js may not be loaded yet on a page that doesn't itself declare
+    // spec.store but still pushes via _storeUpdate — load it on demand.
+    if (_storeUpdate) loadStore().then(({ updateStore }) => updateStore(_storeUpdate))
+    if (_toast)       showToast(_toast)
+    const prev = state
+    state = applyConstraints({ ...state, ...partial }, spec.constraints)
+    if (shallowChanged(prev, state)) render()
+  }
+
   // ---------------------------------------------------------------------------
   // Dispatch — the single entry point for all state changes
   // ---------------------------------------------------------------------------
@@ -128,12 +210,8 @@ export function mount(spec, el, serverState = {}, options = {}) {
     // Mutation
     if (spec.mutations?.[type]) {
       const raw = spec.mutations[type](state, payload)
-      if (raw?._toast) showToast(raw._toast)
-      const { _toast, ...partial } = raw ?? {}
-      const prev = state
-      state = applyConstraints({ ...state, ...partial }, spec.constraints)
+      applyResult(raw)
       persist()
-      if (shallowChanged(prev, state)) render()
       return
     }
 
@@ -143,7 +221,7 @@ export function mount(spec, el, serverState = {}, options = {}) {
       return
     }
 
-    console.warn(`[Pulse] No mutation or action found for "${type}"`)
+    console.warn(`[Pulse] no mutation/action "${type}"`)
   }
 
   // ---------------------------------------------------------------------------
@@ -153,25 +231,15 @@ export function mount(spec, el, serverState = {}, options = {}) {
   async function runAction(name, action, currentState, payload) {
     // Optimistic update before async work
     if (action.onStart) {
-      const raw = action.onStart(currentState, payload)
-      if (raw?._toast) showToast(raw._toast)
-      const { _toast, ...partial } = raw ?? {}
-      const prev = state
-      state = applyConstraints({ ...state, ...partial }, spec.constraints)
-      if (shallowChanged(prev, state)) render()
+      applyResult(action.onStart(currentState, payload))
     }
 
     // Validate before running if requested
     if (action.validate) {
       const errors = validateFields(state, spec.validation)
       if (errors.length > 0) {
-        console.warn(`[Pulse] Validation failed for action "${name}":`, errors)
-        const raw = action.onError?.(state, { validation: errors }) ?? {}
-        if (raw._toast) showToast(raw._toast)
-        const { _toast, ...partial } = raw
-        const prev = state
-        state = applyConstraints({ ...state, ...partial }, spec.constraints)
-        if (shallowChanged(prev, state)) render()
+        console.warn(`[Pulse] Validation failed: "${name}"`, errors)
+        applyResult(action.onError?.(state, { validation: errors }))
         return
       }
     }
@@ -179,23 +247,10 @@ export function mount(spec, el, serverState = {}, options = {}) {
     try {
       // Pass fresh effective server state (includes live store values)
       const result = await action.run(state, getEffectiveServerState(), payload)
-      const raw    = action.onSuccess(state, result) ?? {}
-
-      // _storeUpdate — push changes to the global store and notify all subscribers
-      if (raw._storeUpdate) updateStore(raw._storeUpdate)
-      if (raw._toast)       showToast(raw._toast)
-      const { _storeUpdate: _su, _toast: _t, ...partial } = raw
-      const prev = state
-      state = applyConstraints({ ...state, ...partial }, spec.constraints)
-      if (shallowChanged(prev, state)) render()
+      applyResult(action.onSuccess(state, result))
     } catch (error) {
-      console.error(`[Pulse] Action "${name}" failed:`, error)
-      const raw = action.onError(state, error) ?? {}
-      if (raw._toast) showToast(raw._toast)
-      const { _toast, ...partial } = raw
-      const prev = state
-      state = applyConstraints({ ...state, ...partial }, spec.constraints)
-      if (shallowChanged(prev, state)) render()
+      console.error(`[Pulse] action "${name}" failed:`, error)
+      applyResult(action.onError(state, error))
     }
 
     persist()
@@ -210,9 +265,6 @@ export function mount(spec, el, serverState = {}, options = {}) {
   const _eventAbort = new AbortController()
   bindEvents(el, dispatch, _eventAbort.signal)
 
-  // Subscribe to global store — re-render whenever store keys this page uses change.
-  const _unsubStore = _storeKeys.size > 0 ? subscribe(() => render()) : null
-
   // If the element was server-rendered, skip the initial render to avoid
   // touching existing DOM — this preserves the early LCP paint from SSR.
   // Morph on first mutation will diff from whatever SSR left in the DOM.
@@ -235,7 +287,7 @@ export function mount(spec, el, serverState = {}, options = {}) {
     refresh: render,
 
     /** Tear down — remove event listeners, unsubscribe from store, clear element */
-    destroy: () => { _unsubStore?.(); _eventAbort.abort(); el.innerHTML = trustedHTML('') }
+    destroy: () => { _destroyed = true; _unsubStore?.(); _eventAbort.abort(); el.innerHTML = trustedHTML('') }
   }
 }
 
@@ -291,7 +343,7 @@ function bindEvents(el, dispatch, signal) {
     const storeTarget = e.target?.closest?.('[data-store-event]')
     if (storeTarget) {
       const [sType, sName] = parseEventAttr(storeTarget.dataset.storeEvent)
-      if (sType === 'click') { e.preventDefault(); dispatchStoreMutation(sName, e) }
+      if (sType === 'click') { e.preventDefault(); dispatchStoreMutationLazy(sName, e) }
       return
     }
 
@@ -334,7 +386,7 @@ function bindEvents(el, dispatch, signal) {
     const storeTarget = e.target?.closest?.('[data-store-event]')
     if (storeTarget) {
       const [sType, sName] = parseEventAttr(storeTarget.dataset.storeEvent)
-      if (sType === 'change') dispatchStoreMutation(sName, e)
+      if (sType === 'change') dispatchStoreMutationLazy(sName, e)
       return
     }
     const target = e.target?.closest?.('[data-event]')
@@ -348,7 +400,7 @@ function bindEvents(el, dispatch, signal) {
     const storeTarget = e.target?.closest?.('[data-store-event]')
     if (storeTarget) {
       const [sType, sName] = parseEventAttr(storeTarget.dataset.storeEvent)
-      if (sType === 'input') dispatchStoreMutation(sName, e)
+      if (sType === 'input') dispatchStoreMutationLazy(sName, e)
       return
     }
     const target = e.target?.closest?.('[data-event]')

package/src/runtime/runtime.test.js

@@ -598,7 +598,7 @@ test('dispatchStoreMutation warns on unknown mutation', () => {
   assert(warnings.some(w => w.includes('doesNotExist')), 'Expected warning for unknown store mutation')
 })
 
-test('dispatchStoreMutation notifies subscribed pages', () => {
+await testAsync('dispatchStoreMutation notifies subscribed pages', async () => {
   updateStore({ counter: 0 })
   const el = new FakeElement()
   const spec = {
@@ -608,6 +608,12 @@ test('dispatchStoreMutation notifies subscribed pages', () => {
     view: (state, server) => `<span>${server.counter ?? 0}</span>`,
   }
   mount(spec, el, { counter: 0 })
+  // store.js is lazy-loaded by mount() when spec.store is non-empty — its
+  // subscription is wired up after the dynamic import() resolves. Resolving
+  // a dynamic import is scheduled as a macrotask even for an already-cached
+  // module (verified empirically — microtask-only yields are not enough),
+  // so a setTimeout(0) tick-yield is required here, not just Promise.resolve().
+  await new Promise(r => setTimeout(r, 0))
   const before = el.innerHTML
   dispatchStoreMutation('inc')
   assert(el.innerHTML !== before, `Page should re-render after store mutation`)
@@ -623,7 +629,7 @@ test('registerStoreMutations is a no-op after first call', () => {
 
 console.log('\nLive store push (client)\n')
 
-test('initLiveStore connects once, merges SSE store events, survives bad frames', () => {
+await testAsync('initLiveStore connects once, merges SSE store events, survives bad frames', async () => {
   const instances = []
   globalThis.EventSource = class {
     constructor(url) { this.url = url; this._listeners = {}; instances.push(this) }
@@ -638,6 +644,9 @@ test('initLiveStore connects once, merges SSE store events, survives bad frames'
   // A store event merges into the client store and notifies subscribers
   const el = new FakeElement()
   mount({ route: '/stock', store: ['stock'], state: {}, view: (s, server) => `<b>${server.stock ?? '—'}</b>` }, el, {})
+  // store.js is lazy-loaded when spec.store is non-empty — wait for the dynamic
+  // import to resolve before the subscription (wired inside it) is live.
+  await new Promise(r => setTimeout(r, 0))
   instances[0]._listeners.store({ data: JSON.stringify({ stock: 7 }) })
   assert(getStoreState().stock === 7, `Expected stock 7, got ${getStoreState().stock}`)
   assert(el.innerHTML.includes('7'), `Subscribed page should re-render: ${el.innerHTML}`)
@@ -650,6 +659,41 @@ test('initLiveStore connects once, merges SSE store events, survives bad frames'
   delete globalThis.EventSource
 })
 
+console.log('\nLazy store loading (through mount())\n')
+
+await testAsync('mount() with spec.store lazy-loads store.js and wires reactivity end to end', async () => {
+  updateStore({ counter: 100 })
+  const el = new FakeElement()
+  const spec = {
+    route: '/lazy-store',
+    store: ['counter'],
+    state: {},
+    view: (state, server) => `<span>${server.counter ?? 0}</span>`,
+  }
+
+  const instance = mount(spec, el, { counter: 100 })
+
+  // mount() returns synchronously, before store.js's dynamic import has resolved —
+  // the view renders with the page-level serverState snapshot passed to mount()
+  // (not yet the live store slice), and store-driven reactivity is not wired yet.
+  assert(el.innerHTML.includes('100'), `Expected initial render to use the snapshot: ${el.innerHTML}`)
+
+  // Yield a macrotask so the lazy import('./store.js') resolves. This is the
+  // "one microtask/tick later" cost documented for the lazy-loading change —
+  // after this point store subscription, registerStoreMutations, and (when
+  // window.__PULSE_LIVE__ is set) initLiveStore have all been wired up.
+  await new Promise(r => setTimeout(r, 0))
+
+  // Store-driven re-render now works correctly end to end through mount():
+  // a mutation dispatched on the singleton reaches this page's subscription.
+  const before = el.innerHTML
+  dispatchStoreMutation('inc')
+  assert(el.innerHTML !== before, 'Page should re-render once store.js has loaded and subscribed')
+  assert(el.innerHTML.includes('101'), `Expected counter 101 in HTML, got: ${el.innerHTML}`)
+
+  instance.destroy()
+})
+
 // ---------------------------------------------------------------------------
 
 console.log('\nDebounce / throttle\n')

package/src/runtime/ssr.js

@@ -313,6 +313,32 @@ export function buildHydrateScript(spec, storeDef, nonce) {
  * @param {Object}  [options.timing]     - Server-Timing values
  * @returns {string}
  */
+// Third-party stylesheets (e.g. Google Fonts) pay a DNS+TLS round trip before
+// the request can even start — preconnect warms that connection up in
+// parallel with the document request instead of after the browser parses the
+// stylesheet link. Relative URLs (same-origin) don't need this — the
+// connection to the page's own origin is already open. Shared by wrapDocument
+// (non-streaming render) and the streaming response head in server/index.js,
+// which builds its <head> independently rather than calling wrapDocument.
+export function buildStylePreconnects(styles = []) {
+  const styleOrigins = [...new Set(
+    styles
+      .map(href => { try { return new URL(href).origin } catch { return null } })
+      .filter(Boolean)
+  )]
+  return styleOrigins
+    .flatMap(origin => {
+      const links = [`<link rel="preconnect" href="${esc(origin)}">`]
+      // Google Fonts serves the CSS from fonts.googleapis.com but the actual
+      // font files from fonts.gstatic.com — preconnect to both up front.
+      if (origin === 'https://fonts.googleapis.com') {
+        links.push('<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>')
+      }
+      return links
+    })
+    .join('\n  ')
+}
+
 export function wrapDocument({ content, spec = {}, serverState = {}, storeState = null, storeDef = null, timing = {}, extraBody = '', extraHead = '', nonce = '', runtimeBundle = '', faviconHref = '', livePath = '' }) {
   const meta  = spec.meta  || {}
   const title = meta.title || 'Pulse'
@@ -328,6 +354,8 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
     meta.ogImage     ? `<meta property="og:image" content="${esc(meta.ogImage)}">` : '',
   ].filter(Boolean).join('\n  ')
 
+  const stylePreconnects = buildStylePreconnects(meta.styles || [])
+
   const stylePreloads = (meta.styles || [])
     .map(href => `<link rel="preload" as="style" href="${esc(href)}">`)
     .join('\n  ')
@@ -381,6 +409,7 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="${faviconHref || 'data:,'}">
   <title>${esc(title)}</title>
+  ${stylePreconnects}
   ${stylePreloads}
   ${runtimePreload}
   ${extraHead}

package/src/server/index.js

@@ -21,7 +21,7 @@ import { createRequire } from 'module'
 
 const _require = createRequire(import.meta.url)
 export const version = _require('../../package.json').version
-import { renderToString, renderToStream, renderToNavStream, wrapDocument, resolveServerState, buildStoreScript, buildHydrateScript } from '../runtime/ssr.js'
+import { renderToString, renderToStream, renderToNavStream, wrapDocument, resolveServerState, buildStoreScript, buildHydrateScript, buildStylePreconnects } from '../runtime/ssr.js'
 import { validateSpec } from '../spec/schema.js'
 import { validateStore, resolveStoreState } from '../store/index.js'
 
@@ -1322,6 +1322,8 @@ async function handleStreamResponse(spec, ctx, req, res, extraBody = '', dev = f
     try { res.writeEarlyHints({ link: earlyLinks }) } catch {}
   }
 
+  const stylePreconnects = buildStylePreconnects(meta.styles || [])
+
   const stylePreloads = (meta.styles || [])
     .map(href => `  <link rel="preload" as="style" href="${escHtml(href)}">`)
     .join('\n')
@@ -1358,7 +1360,7 @@ async function handleStreamResponse(spec, ctx, req, res, extraBody = '', dev = f
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="${faviconPath || 'data:,'}">
   <title>${escHtml(title)}</title>
-${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload + '\n' : ''}${dev ? devImportMap(nonce) + '\n' : ''}${metaTags}
+${stylePreconnects ? stylePreconnects + '\n' : ''}${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload + '\n' : ''}${dev ? devImportMap(nonce) + '\n' : ''}${metaTags}
 </head>
 <body${bodyAttr}>
   <div id="pulse-root">`

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(' ')