@invisibleloop/pulse 0.9.0 → 0.10.0

package/scripts/build.js

@@ -617,9 +617,13 @@ async function purgeCssStep(pages, manifest, root, outDir) {
   // Scan pulse UI package source — class names generated by UI components
   // (breadcrumbs, avatar, container, etc.) only appear in the package source,
   // not in the project's own pages, so they'd otherwise be purged.
+  // Also scan the parent src/ui in case root is a subdirectory (e.g. docs/) that
+  // imports UI components via relative paths from the parent project.
   const scanUiDirs = [
-    path.join(root, 'src', 'ui'),  // pulse2 own source
-    path.join(root, 'node_modules', '@invisibleloop', 'pulse', 'src', 'ui'),  // installed package
+    path.join(root, 'src', 'ui'),          // project's own source
+    path.join(root, '..', 'src', 'ui'),    // parent project source (e.g. pulse2/src/ui when root=docs)
+    path.join(root, 'node_modules', '@invisibleloop', 'pulse', 'src', 'ui'),        // installed package
+    path.join(root, '..', 'node_modules', '@invisibleloop', 'pulse', 'src', 'ui'), // parent node_modules
   ]
   for (const dir of scanUiDirs) {
     if (!fs.existsSync(dir)) continue

package/src/agent/guide-components.md

@@ -146,8 +146,9 @@ Use `prose()` for HTML from external sources (CMS, markdown). Use `heading()`/`l
 
 | Component | Key props |
 |-----------|-----------|
-| `nav` | `logo` (HTML slot), `logoHref`, `links` ([{label,href}]), `action` (HTML slot), `sticky` |
-| `hero` | `eyebrow`, `title`, `subtitle`, `actions` (HTML slot), `align` (center/left), `size` (md/sm) |
+| `nav` | `logo` (HTML slot), `logoHref`, `links` ([{label,href}]), `action` (HTML slot), `sticky`, `background` (any CSS value — overrides default surface colour), `color` (foreground colour — set when custom background doesn't contrast with default muted text) |
+| `hero` | `eyebrow`, `title`, `subtitle`, `actions` (HTML slot), `image` (HTML slot — activates split layout), `imageAlign` (right/left), `align` (center/left), `size` (md/sm), `gradient` (true/false or preset: 'purple'\|'blue'\|'green'\|'rose'\|'orange'), `background` (any CSS value — solid colour or custom gradient, overrides gradient preset), `eyebrowColor` (overrides eyebrow text colour — always set when using a custom background to ensure WCAG contrast) |
+| `phoneFrame` | `content` (HTML slot — rendered inside the phone screen). Pure CSS phone mockup with dynamic island, side buttons, home indicator. Use as the `image` slot in `hero()` for app landing pages. |
 | `feature` | `icon` (HTML slot), `title`, `level` (1–6, default 3), `description`, `center` |
 | `testimonial` | `quote`, `name`, `role`, `src`, `rating` (1–5) |
 | `pricing` | `name`, `level` (1–6, default 3), `price`, `period`, `features` ([strings]), `action` (HTML slot), `highlighted` |

package/src/runtime/index.js

@@ -8,7 +8,7 @@
  */
 
 import { initClientStore, getStoreState, subscribe, updateStore, registerStoreMutations, dispatchStoreMutation } from './store.js'
-import { trustedHTML } from './tt.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))
@@ -456,7 +456,13 @@ function morphKeyed(cur, nxtEls) {
 
 function morphAttrs(cur, nxt) {
   for (const { name, value } of Array.from(nxt.attributes)) {
-    if (cur.getAttribute(name) !== value) cur.setAttribute(name, value)
+    if (cur.getAttribute(name) !== value) {
+      // Trusted Types: script[src] is a TrustedScriptURL sink
+      const safeValue = (cur.tagName === 'SCRIPT' && name === 'src')
+        ? trustedScriptURL(value)
+        : value
+      cur.setAttribute(name, safeValue)
+    }
   }
   for (const { name } of Array.from(cur.attributes)) {
     if (!nxt.hasAttribute(name)) cur.removeAttribute(name)

package/src/runtime/tt.js

@@ -8,6 +8,16 @@
 
 let _policy = null
 
+function getPolicy() {
+  if (!_policy) {
+    _policy = window.trustedTypes.createPolicy('pulse', {
+      createHTML:      s => s,
+      createScriptURL: s => s,
+    })
+  }
+  return _policy
+}
+
 /**
  * Return a TrustedHTML object (Chromium) or the raw string (all other browsers).
  * @param {string} html
@@ -15,6 +25,16 @@ let _policy = null
  */
 export function trustedHTML(html) {
   if (typeof window === 'undefined' || !window.trustedTypes) return html
-  if (!_policy) _policy = window.trustedTypes.createPolicy('pulse', { createHTML: s => s })
-  return _policy.createHTML(html)
+  return getPolicy().createHTML(html)
+}
+
+/**
+ * Return a TrustedScriptURL object (Chromium) or the raw string (all other browsers).
+ * Used when setting the `src` attribute on <script> elements during DOM morphing.
+ * @param {string} url
+ * @returns {TrustedScriptURL|string}
+ */
+export function trustedScriptURL(url) {
+  if (typeof window === 'undefined' || !window.trustedTypes) return url
+  return getPolicy().createScriptURL(url)
 }

package/src/server/index.js

@@ -317,14 +317,17 @@ function buildCacheKey(spec, ctx) {
  *
  * A page is NOT cacheable if it has any of:
  *   - spec.server  — embeds a nonce'd __PULSE_SERVER__ inline script
- *   - spec.store   — same
- *   - spec.hydrate — embeds a nonce'd __PULSE_NONCE__ inline script (for toasts)
+ *   - spec.store              — same
+ *   - spec.hydrate            — embeds a nonce'd __PULSE_NONCE__ inline script (for toasts)
+ *   - spec.stream.deferred    — deferred segments inject content via inline <script nonce="...">
+ *                               tags; caching bakes in one nonce while subsequent CSP headers
+ *                               carry a different nonce, causing a violation
  *
- * In all three cases the cached HTML would contain a nonce that doesn't match
+ * In all these cases the cached HTML would contain a nonce that doesn't match
  * the nonce-free CSP used for cached responses, causing a CSP violation.
  */
 function isCacheablePage(spec) {
-  return !spec.server && !spec.store?.length && !spec.hydrate
+  return !spec.server && !spec.store?.length && !spec.hydrate && !spec.stream?.deferred?.length
 }
 
 // ---------------------------------------------------------------------------

package/src/ui/hero.js

@@ -13,11 +13,19 @@
  * @param {'right'|'left'} opts.imageAlign - Which side the image sits on (default: 'right')
  * @param {'center'|'left'} opts.align    - Text alignment when no image (default: 'center')
  * @param {'md'|'sm'} opts.size           - Vertical padding: 'md' (default, 5rem) or 'sm' (2.5rem)
+ * @param {boolean|'purple'|'blue'|'green'|'rose'|'orange'} opts.gradient
+ *   Gradient background preset. true/'purple' = deep indigo, 'blue' = navy,
+ *   'green' = forest, 'rose' = crimson, 'orange' = amber. (default: false)
+ * @param {string}  opts.background    - Arbitrary CSS background value — overrides gradient preset.
+ *   Accepts any valid CSS: solid colours ('#1a1a2e'), gradients ('linear-gradient(...)'), etc.
+ * @param {string}  opts.eyebrowColor  - Overrides the eyebrow text colour — use when the default accent colour lacks contrast against a custom background
  * @param {string}  opts.class
  */
 
 import { escHtml as e } from '../html.js'
 
+const GRADIENT_PRESETS = new Set(['purple', 'blue', 'green', 'rose', 'orange'])
+
 export function hero({
   eyebrow     = '',
   title       = '',
@@ -27,25 +35,46 @@ export function hero({
   imageAlign  = 'right',
   align       = 'center',
   size        = 'md',
-  class: cls  = '',
+  gradient     = false,
+  background   = '',
+  eyebrowColor = '',
+  color        = '',
+  class: cls   = '',
 } = {}) {
   const split = Boolean(image)
+
+  // Resolve gradient class — true/'purple' share the base class; others get their own modifier
+  const gradientClass = gradient
+    ? (gradient === true || gradient === 'purple')
+      ? 'ui-hero--gradient'
+      : GRADIENT_PRESETS.has(gradient) ? `ui-hero--gradient--${gradient}` : ''
+    : ''
+
   const classes = [
     'ui-hero',
     split ? 'ui-hero--split' : align === 'left' && 'ui-hero--left',
     split && imageAlign === 'left' && 'ui-hero--media-left',
     size === 'sm' && 'ui-hero--sm',
+    gradientClass,
     cls,
   ].filter(Boolean).join(' ')
 
+  // Inline style — strip quotes to prevent attribute injection
+  const styles = [
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")};--ui-muted:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const bgStyle = styles ? ` style="${styles}"` : ''
+
+  const eyebrowStyle = eyebrowColor ? ` style="color:${eyebrowColor.replace(/"/g, "'")}"` : ''
   const content = `
-    ${eyebrow  ? `<p class="ui-hero-eyebrow">${e(eyebrow)}</p>` : ''}
+    ${eyebrow  ? `<p class="ui-hero-eyebrow"${eyebrowStyle}>${e(eyebrow)}</p>` : ''}
     ${title    ? `<h1 class="ui-hero-title">${e(title)}</h1>` : ''}
     ${subtitle ? `<p class="ui-hero-subtitle">${e(subtitle)}</p>` : ''}
     ${actions  ? `<div class="ui-hero-actions">${actions}</div>` : ''}`
 
   if (split) {
-    return `<section class="${e(classes)}">
+    return `<section class="${e(classes)}"${bgStyle}>
   <div class="ui-hero-inner">
     <div class="ui-hero-content">${content}
     </div>
@@ -54,7 +83,7 @@ export function hero({
 </section>`
   }
 
-  return `<section class="${e(classes)}">
+  return `<section class="${e(classes)}"${bgStyle}>
   <div class="ui-hero-inner">${content}
   </div>
 </section>`

package/src/ui/icons.js

@@ -173,6 +173,16 @@ export const iconGrid           = (o) => s('<rect x="3" y="3" width="7" height="
 export const iconBug            = (o) => s('<rect x="8" y="6" width="8" height="14" rx="4"/><path d="m19 7-3 2"/><path d="m5 7 3 2"/><path d="m19 19-3-2"/><path d="m5 19 3-2"/><path d="M20 13h-4"/><path d="M4 13h4"/><path d="m10 4 1 2"/><path d="m14 4-1 2"/>', opts(o))
 export const iconMapPin         = (o) => s('<path d="M20 10c0 6-8 13-8 13s-8-7-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>', opts(o))
 
+// ─── AI & Data ───────────────────────────────────────────────────────────────
+
+export const iconAi       = (o) => s('<path d="M12 2a2 2 0 012 2v1a7 7 0 017 7 7 7 0 01-7 7v1a2 2 0 01-4 0v-1A7 7 0 012 12a7 7 0 017-7V4a2 2 0 012-2z"/><circle cx="12" cy="12" r="2"/>', opts(o))
+export const iconSmile    = (o) => s('<circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>', opts(o))
+export const iconBarChart = (o) => s('<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>', opts(o))
+
+// ─── Writing ─────────────────────────────────────────────────────────────────
+
+export const iconFeather      = (o) => s('<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"/><line x1="16" y1="8" x2="2" y2="22"/><line x1="17.5" y1="15" x2="9" y2="15"/>', opts(o))
+
 // ─── Ecommerce ───────────────────────────────────────────────────────────────
 
 export const iconShoppingCart = (o) => s('<circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>', opts(o))

package/src/ui/index.js

@@ -32,6 +32,7 @@ export { avatar }      from './avatar.js'
 export { empty }       from './empty.js'
 export { table }       from './table.js'
 export { hero }        from './hero.js'
+export { phoneFrame }  from './phone-frame.js'
 export { testimonial } from './testimonial.js'
 export { feature }     from './feature.js'
 export { pricing }     from './pricing.js'
@@ -86,6 +87,8 @@ export {
   iconHandPointUp, iconHandPointDown, iconHandPointLeft, iconHandPointRight,
   iconGlobe, iconShield, iconZap, iconTrendingUp, iconTrendingDown, iconLoader, iconGrid, iconBug, iconMapPin,
   iconSun, iconMoon,
+  iconFeather,
+  iconAi, iconSmile, iconBarChart,
   iconShoppingCart, iconShoppingBag, iconCreditCard, iconPackage, iconGift,
   iconWallet, iconTruck, iconReceipt, iconStore, iconPercent, iconTicket, iconBanknote,
   iconUtensils, iconCoffee, iconPizza, iconApple, iconCarrot,

package/src/ui/nav.js

@@ -24,6 +24,8 @@
  * @param {string}  opts.action     - Raw HTML slot — typically a button()
  * @param {boolean} opts.sticky     - Position sticky with backdrop blur
  * @param {'right'|'left'} opts.burgerAlign - Mobile burger position (default: 'right')
+ * @param {string}  opts.background - Any CSS background value — overrides the default surface colour
+ * @param {string}  opts.color     - Foreground colour for links and text — use when background has low contrast with defaults
  * @param {string}  opts.class
  */
 
@@ -79,10 +81,17 @@ export function nav({
   action        = '',
   sticky        = false,
   burgerAlign   = 'right',
+  background    = '',
+  color         = '',
   class: cls    = '',
 } = {}) {
   const id      = `ui-nav-${++_navId}`
   const classes = ['ui-nav', sticky && 'ui-nav--sticky', burgerAlign === 'left' && 'ui-nav--burger-left', cls].filter(Boolean).join(' ')
+  const styles  = [
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")};--ui-muted:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const bgStyle = styles ? ` style="${styles}"` : ''
 
   const linksHtml       = links.map((l, i) => renderLink(l, id, i)).join('')
   const mobileLinksHtml = links.map(renderMobileLink).join('')
@@ -98,7 +107,7 @@ export function nav({
     <nav>${mobileLinksHtml}</nav>
   </div>` : ''
 
-  return `<header class="${e(classes)}">
+  return `<header class="${e(classes)}"${bgStyle}>
   <div class="ui-nav-inner">
     <a href="${e(logoHref)}" class="ui-nav-logo">${logo}</a>
     ${links.length ? `<nav class="ui-nav-links" aria-label="Site navigation">${linksHtml}</nav>` : ''}

package/src/ui/phone-frame.js

@@ -0,0 +1,39 @@
+/**
+ * Pulse UI — Phone Frame
+ *
+ * A realistic CSS mobile phone frame. Pass screen content in the `content` slot.
+ * Renders the phone body, dynamic island, side buttons, and home indicator.
+ * No images — pure CSS/HTML.
+ *
+ * @param {object} opts
+ * @param {string} opts.content  - HTML to render inside the screen area
+ * @param {string} opts.class
+ */
+
+export function phoneFrame({ content = '', class: cls = '' } = {}) {
+  const classes = ['ui-phone', cls].filter(Boolean).join(' ')
+
+  return `<div class="${classes}" role="img" aria-label="Phone screen preview">
+  <!-- Left buttons: volume up, volume down, mute -->
+  <div class="ui-phone-btn ui-phone-btn--vol-up"   aria-hidden="true"></div>
+  <div class="ui-phone-btn ui-phone-btn--vol-down"  aria-hidden="true"></div>
+  <div class="ui-phone-btn ui-phone-btn--mute"      aria-hidden="true"></div>
+  <!-- Right button: power -->
+  <div class="ui-phone-btn ui-phone-btn--power"     aria-hidden="true"></div>
+
+  <div class="ui-phone-inner">
+    <!-- Dynamic island -->
+    <div class="ui-phone-island" aria-hidden="true">
+      <span class="ui-phone-camera"></span>
+    </div>
+
+    <!-- Screen -->
+    <div class="ui-phone-screen">
+      ${content}
+    </div>
+
+    <!-- Home indicator -->
+    <div class="ui-phone-home" aria-hidden="true"></div>
+  </div>
+</div>`
+}