@invisibleloop/pulse 0.7.0 → 0.7.2

package/docs/.claude/pulse-checklist.md

@@ -4,6 +4,20 @@ Before finishing any spec, verify every point below. Fix anything that fails.
 
 ### Critical
 
+- **`meta` must be a plain object — never a function.** Individual fields (`title`, `description`, `styles`) can be `async (ctx) => value` functions, but `meta` itself is always `{}`.
+
+  ```js
+  // WRONG — meta is not a function factory
+  meta: async (ctx) => ({ title: '...', styles: [...] })
+
+  // CORRECT — meta is a plain object; individual fields are functions
+  meta: {
+    title:       async (ctx) => (await post(ctx)).frontmatter.title,
+    description: async (ctx) => (await post(ctx)).frontmatter.description,
+    styles:      ['/pulse-ui.css', '/app.css'],
+  }
+  ```
+
 - **Do not set `hydrate` in specs.** It is auto-derived by the framework from the URL entry passed to `createServer`. Specs with `mutations`, `actions`, or `persist` are hydrated automatically. Purely server-rendered specs get zero JavaScript — no configuration needed.
 
 ### Components first

package/docs/public/.pulse-ui-version

@@ -1 +1 @@
-0.5.0
+0.7.0

package/docs/public/menu.js

@@ -52,8 +52,10 @@
     }
   }
 
-  // After client-side navigation — sidebar DOM is replaced, so re-query and re-centre
+  // After client-side navigation — #pulse-root is replaced, so the original
+  // navSidebar reference is detached. Re-query for the fresh sidebar element.
   document.addEventListener('pulse:navigate', function () {
+    navSidebar = document.querySelector('.docs-sidebar')
     var newActive = navSidebar && navSidebar.querySelector('.nav-link.active')
     centerNavLink(newActive)
   })

package/docs/public/pulse-ui.css

@@ -2729,6 +2729,8 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
 .ui-prose ul { list-style-type: disc;    }
 .ui-prose ol { list-style-type: decimal; }
 .ui-prose ul ul { list-style-type: circle; }
+.ui-prose ul.contains-task-list { list-style: none; padding-left: 0; }
+.ui-prose li.task-list-item input[type="checkbox"] { margin-right: .4em; }
 .ui-prose li { margin-bottom: .375em; }
 .ui-prose li > ul,
 .ui-prose li > ol { margin-top: .375em; margin-bottom: .375em; }

package/docs/src/lib/layout.js

@@ -14,7 +14,7 @@ let _manifest = {}
 export function initLayoutManifest(m) { _manifest = m }
 const asset = href => _manifest[href] || href
 
-const { version } = pkg
+const version = typeof pkg !== 'undefined' ? (pkg?.version ?? '') : ''
 
 function esc(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')

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

@@ -1,6 +1,7 @@
 import { renderComponentPage, demo } from '../../lib/component-page.js'
 import { prevNext } from '../../lib/nav.js'
 import { table } from '../../lib/layout.js'
+import { modal } from '../../../../src/ui/index.js'
 import {
   button, feature,
   iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowDown,
@@ -17,8 +18,12 @@ import {
   iconPhone, iconGamepad,
   iconHandPointUp, iconHandPointDown, iconHandPointLeft, iconHandPointRight,
   iconGlobe, iconShield, iconZap, iconTrendingUp, iconTrendingDown, iconLoader, iconGrid, iconBug,
-  iconMapPin,
-  iconSun, iconMoon,
+  iconMapPin, iconSun, iconMoon,
+  iconShoppingCart, iconShoppingBag, iconCreditCard, iconPackage, iconGift,
+  iconWallet, iconTruck, iconReceipt, iconStore, iconPercent, iconTicket, iconBanknote,
+  iconUtensils, iconCoffee, iconPizza, iconApple, iconCarrot,
+  iconWine, iconCakeSlice, iconFish, iconCherry, iconEgg,
+  iconCookie, iconIceCream, iconCroissant, iconSalad, iconWheat,
 } from '../../../../src/ui/index.js'
 
 const { prev, next } = prevNext('/components/icons')
@@ -92,11 +97,11 @@ const ICONS = [
     { name: 'iconTag',      fn: iconTag      },
   ]},
   { group: 'Media & Rating', icons: [
-    { name: 'iconPlay',  fn: iconPlay  },
-    { name: 'iconPause', fn: iconPause },
+    { name: 'iconPlay',   fn: iconPlay   },
+    { name: 'iconPause',  fn: iconPause  },
     { name: 'iconVolume', fn: iconVolume },
-    { name: 'iconStar',  fn: iconStar  },
-    { name: 'iconHeart', fn: iconHeart },
+    { name: 'iconStar',   fn: iconStar   },
+    { name: 'iconHeart',  fn: iconHeart  },
   ]},
   { group: 'Devices', icons: [
     { name: 'iconPhone',   fn: iconPhone   },
@@ -122,22 +127,117 @@ const ICONS = [
     { name: 'iconSun',  fn: iconSun  },
     { name: 'iconMoon', fn: iconMoon },
   ]},
+  { group: 'Ecommerce', icons: [
+    { name: 'iconShoppingCart', fn: iconShoppingCart },
+    { name: 'iconShoppingBag',  fn: iconShoppingBag  },
+    { name: 'iconCreditCard',   fn: iconCreditCard   },
+    { name: 'iconPackage',      fn: iconPackage      },
+    { name: 'iconGift',         fn: iconGift         },
+    { name: 'iconWallet',       fn: iconWallet       },
+    { name: 'iconTruck',        fn: iconTruck        },
+    { name: 'iconReceipt',      fn: iconReceipt      },
+    { name: 'iconStore',        fn: iconStore        },
+    { name: 'iconPercent',      fn: iconPercent      },
+    { name: 'iconTicket',       fn: iconTicket       },
+    { name: 'iconBanknote',     fn: iconBanknote     },
+  ]},
+  { group: 'Food & Drink', icons: [
+    { name: 'iconUtensils',  fn: iconUtensils  },
+    { name: 'iconCoffee',    fn: iconCoffee    },
+    { name: 'iconPizza',     fn: iconPizza     },
+    { name: 'iconApple',     fn: iconApple     },
+    { name: 'iconCarrot',    fn: iconCarrot    },
+    { name: 'iconWine',      fn: iconWine      },
+    { name: 'iconCakeSlice', fn: iconCakeSlice },
+    { name: 'iconFish',      fn: iconFish      },
+    { name: 'iconCherry',    fn: iconCherry    },
+    { name: 'iconEgg',       fn: iconEgg       },
+    { name: 'iconCookie',    fn: iconCookie    },
+    { name: 'iconIceCream',  fn: iconIceCream  },
+    { name: 'iconCroissant', fn: iconCroissant },
+    { name: 'iconSalad',     fn: iconSalad     },
+    { name: 'iconWheat',     fn: iconWheat     },
+  ]},
 ]
 
+// Safe ID from icon name: iconArrowLeft → arrow-left
+const safeId = name => name.replace(/^icon/, '').replace(/([A-Z])/g, m => '-' + m.toLowerCase()).replace(/^-/, '')
+
+const PREVIEW_SIZES  = [12, 16, 20, 24, 32, 48]
+const PREVIEW_COLORS = [
+  { label: 'Default', style: ''                              },
+  { label: 'Accent',  style: 'color:var(--accent)'          },
+  { label: 'Green',   style: 'color:var(--color-green,#4ade80)'  },
+  { label: 'Yellow',  style: 'color:var(--color-yellow,#facc15)' },
+  { label: 'Red',     style: 'color:var(--color-red,#f87171)'    },
+  { label: 'Muted',   style: 'color:var(--muted)'           },
+]
+
+function iconPreviewModal({ name, fn }) {
+  const id = `icon-modal-${safeId(name)}`
+
+  const sizesHtml = PREVIEW_SIZES.map(size => `
+    <div style="display:flex;flex-direction:column;align-items:center;gap:4px">
+      ${fn({ size })}
+      <span style="font-size:0.6rem;color:var(--muted);font-family:var(--mono,monospace)">${size}</span>
+    </div>
+  `).join('')
+
+  const colorsHtml = PREVIEW_COLORS.map(({ label, style }) => `
+    <div style="display:flex;flex-direction:column;align-items:center;gap:4px;${style}">
+      ${fn({ size: 28 })}
+      <span style="font-size:0.6rem;color:var(--muted);font-family:var(--mono,monospace)">${label}</span>
+    </div>
+  `).join('')
+
+  const bgHtml =
+    ['circle', 'square'].map(shape =>
+      ['accent', 'success', 'warning', 'error', 'muted'].map(bgColor =>
+        fn({ size: 20, bg: shape, bgColor })
+      ).join('')
+    ).join('<br style="display:block;margin:.5rem 0">')
+
+  return modal({
+    id,
+    title: name,
+    size:  'md',
+    content: `
+      <div style="display:flex;flex-direction:column;gap:1.5rem">
+        <div>
+          <p style="font-size:.75rem;color:var(--muted);margin:0 0 .75rem">Sizes</p>
+          <div style="display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap">${sizesHtml}</div>
+        </div>
+        <div>
+          <p style="font-size:.75rem;color:var(--muted);margin:0 0 .75rem">Colours</p>
+          <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">${colorsHtml}</div>
+        </div>
+        <div>
+          <p style="font-size:.75rem;color:var(--muted);margin:0 0 .75rem">Backgrounds</p>
+          <div style="display:flex;align-items:center;gap:.5rem;flex-wrap:wrap">${bgHtml}</div>
+        </div>
+      </div>
+    `,
+  })
+}
+
 function iconGrid_() {
   return ICONS.map(({ group, icons }) => `
     <h3 class="doc-h3" style="margin-top:2rem">${group}</h3>
     <div class="icon-grid">
       ${icons.map(({ name, fn }) => `
-        <div class="icon-grid-item">
+        <button type="button" class="icon-grid-item" style="cursor:pointer;font:inherit;color:inherit" data-dialog-open="icon-modal-${safeId(name)}" aria-label="Preview ${name}">
           <div class="icon-grid-preview">${fn({ size: 20 })}</div>
           <span class="icon-grid-name">${name}</span>
-        </div>
+        </button>
       `).join('')}
     </div>
   `).join('')
 }
 
+function iconModals_() {
+  return ICONS.flatMap(({ icons }) => icons).map(iconPreviewModal).join('')
+}
+
 export default {
   route: '/components/icons',
   meta: {
@@ -150,7 +250,7 @@ export default {
     prev,
     next,
     name: 'icons',
-    description: '55 curated icons. All are pure functions returning an SVG string — no external library, no DOM dependency, tree-shakeable. Style: 24×24 viewBox, <code>stroke="currentColor"</code>, compatible with any colour token.',
+    description: '100 curated icons. All are pure functions returning an SVG string — no external library, no DOM dependency, tree-shakeable. Style: 24×24 viewBox, <code>stroke="currentColor"</code>, compatible with any colour token.',
     content: `
 
       <h2 class="doc-h2" id="usage">Usage</h2>
@@ -266,10 +366,12 @@ feature({ icon: iconCode({   size: 22, bg: 'square', bgColor: 'muted'   }), titl
       )}
 
       <h2 class="doc-h2" id="all-icons">All icons</h2>
-      <p>Click any icon name to copy the import.</p>
+      <p>Click any icon to preview sizes, colours, and backgrounds.</p>
 
       ${iconGrid_()}
 
+      ${iconModals_()}
+
       ${table(
         ['Prop', 'Type', 'Default', 'Description'],
         [
@@ -279,6 +381,8 @@ feature({ icon: iconCode({   size: 22, bg: 'square', bgColor: 'muted'   }), titl
           ['<code>bgColor</code>', 'string', "'accent'", "'accent' · 'success' · 'warning' · 'error' · 'muted'"],
         ]
       )}
+
+      <p style="margin-top:2rem;font-size:.8rem;color:var(--muted)">SVG paths derived from <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer">Lucide</a> (ISC License, Copyright © 2022 Lucide Contributors) and <a href="https://feathericons.com" target="_blank" rel="noopener noreferrer">Feather Icons</a> (MIT License, Copyright © 2013–2017 Cole Bemis). Phosphor hand-pointer icons MIT License, Copyright © 2020 Phosphor Icons.</p>
     `,
   }),
 }

package/package.json

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

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.7.0
+0.7.2

package/scripts/build.js

@@ -476,7 +476,9 @@ const result = await esbuild.build({
 const manifest = {}
 
 for (const [outFile, meta] of Object.entries(result.metafile.outputs)) {
-  const bundlePath = '/' + path.relative(path.join(ROOT, 'public'), path.join(ROOT, outFile))
+  // 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-')) {

package/src/cli/dev.js

@@ -187,11 +187,14 @@ const { updateSpecs } = createServer(specs, {
 
     const serveFile = (filePath) => {
       if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) return false
-      // Strip node:* imports — they don't resolve in the browser. Server-only imports
-      // are only used inside spec.server functions which the client runtime never calls.
+      // Strip server-only imports that can't resolve in the browser:
+      //   - node:* built-ins (fs, path, etc.)
+      //   - JSON files imported with `with { type: 'json' }` (e.g. package.json for version)
+      // These are only used inside spec.server functions or module-level server init;
+      // the client runtime never calls those code paths.
       let content = fs.readFileSync(filePath, 'utf-8')
       content = content.replace(
-        /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"]node:[^'"]+['"]\s*;?[ \t]*\n?/gm,
+        /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"](?:node:[^'"]+|[^'"]*\.json)['"]\s*(?:with\s*\{[^}]*\})?\s*;?[ \t]*\n?/gm,
         ''
       )
       res.writeHead(200, {

package/src/runtime/ssr.js

@@ -258,9 +258,48 @@ export function renderToNavStream(spec, ctx = {}, resolvedMeta = {}) {
 }
 
 // ---------------------------------------------------------------------------
-// Page HTML wrapper
+// Page HTML wrapper — shared script builders
 // ---------------------------------------------------------------------------
 
+/**
+ * Build the inline script that exposes window.__PULSE_NONCE__ and (optionally)
+ * window.__PULSE_STORE__ to the client runtime.
+ *
+ * Only emitted for hydrated pages. Purely server-rendered pages have no JS to
+ * read these globals, and omitting the inline script keeps cached HTML nonce-free
+ * so it can be served with a nonce-free CSP without a CSP violation.
+ */
+export function buildStoreScript(spec, storeState, nonce) {
+  if (!spec.hydrate) return ''
+  if (storeState && Object.keys(storeState).length > 0) {
+    return `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(storeState)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
+  }
+  return `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
+}
+
+/**
+ * Build the hydration <script> tag that mounts the spec client-side.
+ *
+ * Bundle paths (/dist/) → a single external <script type="module" src="..."> tag.
+ * Dev source paths       → an inline module block with explicit imports (nonce required).
+ */
+export function buildHydrateScript(spec, storeDef, nonce) {
+  if (!spec.hydrate) return ''
+  if (isBundle(spec.hydrate)) {
+    return `<script type="module" src="${esc(spec.hydrate)}"></script>`
+  }
+  const storeImport = storeDef?.hydrate ? `\n  import store from '${esc(storeDef.hydrate)}'` : ''
+  const storeArg    = storeDef?.hydrate ? ', { ssr: true, store }' : ', { ssr: true }'
+  return `<script type="module" nonce="${nonce}">
+  import spec from '${esc(spec.hydrate)}'
+  import { mount } from '/@pulse/runtime/index.js'
+  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
+  const root = document.getElementById('pulse-root')
+  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
+  initNavigation(root, mount)
+</script>`
+}
+
 /**
  * Wrap rendered content in a full HTML document.
  *
@@ -320,38 +359,8 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
     ? `<script nonce="${nonce}">window.__PULSE_SERVER__ = ${JSON.stringify(serverState)};</script>`
     : ''
 
-  // Serialise store state so the client store singleton can be initialised.
-  // Also exposes window.__updatePulseStore__ so navigate.js can refresh the
-  // singleton with fresh server data on client-side navigations.
-  // window.__PULSE_NONCE__ lets the toast runtime inject a nonce'd <style> tag
-  // to satisfy the style-src CSP directive.
-  const storeStateScript = storeState && Object.keys(storeState).length > 0
-    ? `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(storeState)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
-    : `<script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
-
-  // Hydration bootstrap — makes the server-rendered HTML interactive.
-  // When hydrate points to a self-executing bundle (/dist/…) a single <script>
-  // tag is enough; the bundle imports spec + runtime and calls mount() itself.
-  // In dev mode (source file path) we emit the explicit inline import block.
-  const storeImport  = spec.hydrate && !isBundle(spec.hydrate) && storeDef?.hydrate
-    ? `\n  import store from '${esc(storeDef.hydrate)}'`
-    : ''
-  const storeArg     = spec.hydrate && !isBundle(spec.hydrate) && storeDef?.hydrate
-    ? ', { ssr: true, store }'
-    : ', { ssr: true }'
-
-  const hydrateScript = spec.hydrate
-    ? isBundle(spec.hydrate)
-      ? `<script type="module" src="${esc(spec.hydrate)}"></script>`
-      : `<script type="module" nonce="${nonce}">
-  import spec from '${esc(spec.hydrate)}'
-  import { mount } from '/@pulse/runtime/index.js'
-  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
-  const root = document.getElementById('pulse-root')
-  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
-  initNavigation(root, mount)
-</script>`
-    : ''
+  const storeStateScript = buildStoreScript(spec, storeState, nonce)
+  const hydrateScript    = buildHydrateScript(spec, storeDef, nonce)
 
   // Server-Timing header value (caller is responsible for setting the header)
   const serverTimingValue = timing.total !== undefined

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 } from '../runtime/ssr.js'
+import { renderToString, renderToStream, renderToNavStream, wrapDocument, resolveServerState, buildStoreScript, buildHydrateScript } from '../runtime/ssr.js'
 import { validateSpec } from '../spec/schema.js'
 import { validateStore, resolveStoreState } from '../store/index.js'
 
@@ -92,7 +92,8 @@ function buildCsp(nonce, ext = {}) {
 
 /**
  * Build the nonce-free CSP for cached responses.
- * Safe because cached pages have no inline scripts.
+ * Safe because isCacheablePage() only returns true when spec.server, spec.store,
+ * and spec.hydrate are all absent — guaranteeing no inline nonce scripts in the HTML.
  * @param {Record<string,string[]>} [ext]  Extra sources to merge in per directive.
  */
 function buildCachedCsp(ext = {}) {
@@ -304,6 +305,26 @@ function pageCacheTtl(spec, dev, defaultCache) {
   return cfg?.maxAge || 0
 }
 
+/** Build the in-process page cache key scoped to route + request parameters. */
+function buildCacheKey(spec, ctx) {
+  return spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
+}
+
+/**
+ * True when a page's rendered HTML is safe to cache in-process.
+ *
+ * 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)
+ *
+ * In all three 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
+}
+
 // ---------------------------------------------------------------------------
 // Dev import map — lets browser resolve @invisibleloop/pulse/* bare specifiers
 // ---------------------------------------------------------------------------
@@ -349,8 +370,7 @@ async function cachedRenderToString(spec, ctx, dev) {
     return renderToString(spec, ctx)
   }
 
-  // Build a cache key scoped to this route + request parameters
-  const key = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
+  const key = buildCacheKey(spec, ctx)
 
   const cached = serverDataCache.get(key)
   if (cached) return cached
@@ -840,9 +860,8 @@ async function handleNavStreamResponse(spec, ctx, req, res) {
  * Checks the in-process page cache before rendering; stores result after.
  */
 async function handleStringResponse(spec, ctx, req, res, extraBody = '', dev = false, canonicalBase = '', nonce = '', runtimeBundle = '', defaultCache = null, store = null, csp = {}, faviconPath = null) {
-  const cacheKey = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
-  // Pages with server data or store data embed a nonce'd __PULSE_SERVER__ script — don't cache them
-  const ttl      = (!spec.server && !spec.store?.length) ? pageCacheTtl(spec, dev, defaultCache) : 0
+  const cacheKey = buildCacheKey(spec, ctx)
+  const ttl      = isCacheablePage(spec) ? pageCacheTtl(spec, dev, defaultCache) : 0
 
   let html, serverTimingValue, fromCache = false
 
@@ -891,9 +910,8 @@ async function handleStringResponse(spec, ctx, req, res, extraBody = '', dev = f
  */
 async function handleStreamResponse(spec, ctx, req, res, extraBody = '', dev = false, canonicalBase = '', nonce = '', runtimeBundle = '', defaultCache = null, store = null, csp = {}, faviconPath = null) {
   // Serve from in-process page cache when available — skip streaming overhead.
-  // Pages with spec.server or spec.store embed a nonce'd __PULSE_SERVER__ script so are never cached.
-  const cacheKey = spec.route + '\0' + JSON.stringify(ctx.params) + '\0' + JSON.stringify(ctx.query)
-  const ttl      = (!spec.server && !spec.store?.length) ? pageCacheTtl(spec, dev, defaultCache) : 0
+  const cacheKey = buildCacheKey(spec, ctx)
+  const ttl      = isCacheablePage(spec) ? pageCacheTtl(spec, dev, defaultCache) : 0
   const cached   = ttl > 0 ? pageHtmlCache.get(cacheKey) : null
 
   if (cached) {
@@ -972,43 +990,19 @@ ${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload +
 <body${bodyAttr}>
   <div id="pulse-root">`
 
-  const storeImport  = !spec.hydrate?.startsWith('/dist/') && store?.hydrate
-    ? `\n  import store from '${escHtml(store.hydrate)}'`
-    : ''
-  const storeArg     = !spec.hydrate?.startsWith('/dist/') && store?.hydrate
-    ? ', { ssr: true, store }'
-    : ', { ssr: true }'
-
-  const hydrateScript = spec.hydrate
-    ? spec.hydrate.startsWith('/dist/')
-      ? `\n  <script type="module" src="${escHtml(spec.hydrate)}"></script>`
-      : `\n  <script type="module" nonce="${nonce}">
-  import spec from '${escHtml(spec.hydrate)}'
-  import { mount } from '/@pulse/runtime/index.js'
-  import { initNavigation } from '/@pulse/runtime/navigate.js'${storeImport}
-  const root = document.getElementById('pulse-root')
-  mount(spec, root, window.__PULSE_SERVER__ || {}${storeArg})
-  initNavigation(root, mount)
-</script>`
-    : ''
-
-  const scriptTags = (meta.scripts || [])
+  const scriptTags    = (meta.scripts || [])
     .map(src => `  <script src="${escHtml(src)}" defer></script>`)
     .join('\n')
+  const storeScript   = buildStoreScript(spec, ctx.store || null, nonce)
+  const hydrateScript = buildHydrateScript(spec, store, nonce)
 
   const resolvedExtraBody = typeof extraBody === 'function' ? extraBody(nonce) : extraBody
 
-  // Emit window.__PULSE_STORE__ so the client store singleton can be initialised.
-  // Also exposes __updatePulseStore__ for navigate.js to refresh store on navigation.
-  // window.__PULSE_NONCE__ lets the toast runtime inject a nonce'd <style> tag to
-  // satisfy the style-src CSP directive (which disallows uninonce'd inline styles).
-  const storeScript = ctx.store && Object.keys(ctx.store).length > 0
-    ? `\n  <script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';window.__PULSE_STORE__=${JSON.stringify(ctx.store)};window.__updatePulseStore__=function(s){window.__PULSE_STORE__=Object.assign(window.__PULSE_STORE__||{},s);};</script>`
-    : `\n  <script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
-
   const docClose = `
   </div>
-  ${scriptTags}${storeScript}${hydrateScript}
+  ${scriptTags}
+  ${storeScript}
+  ${hydrateScript}
   ${resolvedExtraBody}
 </body>
 </html>`

package/src/ui/icons.js

@@ -1,7 +1,20 @@
 /**
  * Pulse UI — Icon set
  *
- * ~55 curated icons. All are pure functions returning an SVG string.
+ * SVG paths are derived from Lucide (https://lucide.dev) and Feather Icons.
+ *
+ * Lucide is licensed under the ISC License:
+ *   Copyright (c) 2022 Lucide Contributors
+ *   Permission to use, copy, modify, and/or distribute this software for any
+ *   purpose with or without fee is hereby granted, provided that the above
+ *   copyright notice and this permission notice appear in all copies.
+ *
+ * Portions derived from Feather Icons, licensed under the MIT License:
+ *   Copyright (c) 2013-2017 Cole Bemis
+ *
+ * Phosphor hand-pointer icons (MIT): Copyright (c) 2020 Phosphor Icons
+ *
+ * Icon functions are pure functions returning an SVG string.
  * Style: 24×24 viewBox, stroke="currentColor", 2px stroke-width (Lucide-compatible).
  *
  * Usage:
@@ -159,3 +172,36 @@ export const iconLoader         = (o) => s('<line x1="12" y1="2" x2="12" y2="6"/
 export const iconGrid           = (o) => s('<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>', opts(o))
 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))
+
+// ─── 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))
+export const iconShoppingBag  = (o) => s('<path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/>', opts(o))
+export const iconCreditCard   = (o) => s('<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>', opts(o))
+export const iconPackage      = (o) => s('<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><path d="m7.5 4.27 9 5.15"/><polyline points="3.29 7 12 12 20.71 7"/>', opts(o))
+export const iconGift         = (o) => s('<path d="M12 7v14"/><path d="M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"/><path d="M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"/><rect x="3" y="7" width="18" height="4" rx="1"/>', opts(o))
+export const iconWallet       = (o) => s('<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>', opts(o))
+export const iconTruck        = (o) => s('<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/>', opts(o))
+export const iconReceipt      = (o) => s('<path d="M12 17V7"/><path d="M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8"/><path d="M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z"/>', opts(o))
+export const iconStore        = (o) => s('<path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5"/><path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244"/><path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05"/>', opts(o))
+export const iconPercent      = (o) => s('<line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/>', opts(o))
+export const iconTicket       = (o) => s('<path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/>', opts(o))
+export const iconBanknote     = (o) => s('<rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/>', opts(o))
+
+// ─── Food & Drink ─────────────────────────────────────────────────────────────
+
+export const iconUtensils  = (o) => s('<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>', opts(o))
+export const iconCoffee    = (o) => s('<path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/>', opts(o))
+export const iconPizza     = (o) => s('<path d="m12 14-1 1"/><path d="m13.75 18.25-1.25 1.42"/><path d="M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12"/><path d="M18.8 9.3a1 1 0 0 0 2.1 7.7"/><path d="M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z"/>', opts(o))
+export const iconApple     = (o) => s('<path d="M12 6.528V3a1 1 0 0 1 1-1h0"/><path d="M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21"/>', opts(o))
+export const iconCarrot    = (o) => s('<path d="M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46"/><path d="M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z"/><path d="M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z"/>', opts(o))
+export const iconWine      = (o) => s('<path d="M8 22h8"/><path d="M7 10h10"/><path d="M12 15v7"/><path d="M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z"/>', opts(o))
+export const iconCakeSlice = (o) => s('<path d="M16 13H3"/><path d="M16 17H3"/><path d="m7.2 7.9-3.388 2.5A2 2 0 0 0 3 12.01V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8.654c0-2-2.44-6.026-6.44-8.026a1 1 0 0 0-1.082.057L10.4 5.6"/><circle cx="9" cy="7" r="2"/>', opts(o))
+export const iconFish      = (o) => s('<path d="M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z"/><path d="M18 12v.5"/><path d="M16 17.93a9.77 9.77 0 0 1 0-11.86"/><path d="M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33"/><path d="M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4"/><path d="m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98"/>', opts(o))
+export const iconCherry    = (o) => s('<path d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"/><path d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"/><path d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12"/><path d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z"/>', opts(o))
+export const iconEgg       = (o) => s('<path d="M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12"/>', opts(o))
+export const iconCookie    = (o) => s('<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/>', opts(o))
+export const iconIceCream  = (o) => s('<path d="m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11"/><path d="M17 7A5 5 0 0 0 7 7"/><path d="M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4"/>', opts(o))
+export const iconCroissant = (o) => s('<path d="M10.2 18H4.774a1.5 1.5 0 0 1-1.352-.97 11 11 0 0 1 .132-6.487"/><path d="M18 10.2V4.774a1.5 1.5 0 0 0-.97-1.352 11 11 0 0 0-6.486.132"/><path d="M18 5a4 3 0 0 1 4 3 2 2 0 0 1-2 2 10 10 0 0 0-5.139 1.42"/><path d="M5 18a3 4 0 0 0 3 4 2 2 0 0 0 2-2 10 10 0 0 1 1.42-5.14"/><path d="M8.709 2.554a10 10 0 0 0-6.155 6.155 1.5 1.5 0 0 0 .676 1.626l9.807 5.42a2 2 0 0 0 2.718-2.718l-5.42-9.807a1.5 1.5 0 0 0-1.626-.676"/>', opts(o))
+export const iconSalad     = (o) => s('<path d="M7 21h10"/><path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z"/><path d="M11.38 12a2.4 2.4 0 0 1-.4-4.77 2.4 2.4 0 0 1 3.2-2.77 2.4 2.4 0 0 1 3.47-.63 2.4 2.4 0 0 1 3.37 3.37 2.4 2.4 0 0 1-1.1 3.7 2.51 2.51 0 0 1 .03 1.1"/><path d="m13 12 4-4"/><path d="M10.9 7.25A3.99 3.99 0 0 0 4 10c0 .73.2 1.41.54 2"/>', opts(o))
+export const iconWheat     = (o) => s('<path d="M2 22 16 8"/><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"/><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"/><path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"/><path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"/><path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"/>', opts(o))

package/src/ui/index.js

@@ -86,4 +86,9 @@ export {
   iconHandPointUp, iconHandPointDown, iconHandPointLeft, iconHandPointRight,
   iconGlobe, iconShield, iconZap, iconTrendingUp, iconTrendingDown, iconLoader, iconGrid, iconBug, iconMapPin,
   iconSun, iconMoon,
+  iconShoppingCart, iconShoppingBag, iconCreditCard, iconPackage, iconGift,
+  iconWallet, iconTruck, iconReceipt, iconStore, iconPercent, iconTicket, iconBanknote,
+  iconUtensils, iconCoffee, iconPizza, iconApple, iconCarrot,
+  iconWine, iconCakeSlice, iconFish, iconCherry, iconEgg,
+  iconCookie, iconIceCream, iconCroissant, iconSalad, iconWheat,
 } from './icons.js'