@invisibleloop/pulse 0.6.2 → 0.7.1

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/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/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.6.2",
+  "version": "0.7.1",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.6.2
+0.7.1

package/scripts/build.js

@@ -145,7 +145,38 @@ function isInsideString(source, pos) {
       if (c === '"' || c === "'" || c === '`') { stack.push(c); i++; continue }
       i++; continue
     }
-    // top-level
+    // Top level — handle comments and regex literals before string delimiters.
+    // Without this, a `"` inside a regex literal (e.g. /"/g) or a comment would
+    // be mistaken for an opening string delimiter, causing all subsequent keys to
+    // be treated as "inside a string" and never stripped.
+    if (c === '/') {
+      if (source[i + 1] === '/') {          // line comment — skip to end of line
+        while (i < pos && source[i] !== '\n') i++
+        continue
+      }
+      if (source[i + 1] === '*') {           // block comment — skip to */
+        const end = source.indexOf('*/', i + 2)
+        i = end < 0 ? pos : end + 2
+        continue
+      }
+      // Regex literal heuristic: / is a regex when not preceded by ) ] or alnum.
+      // Division (a / b) always follows one of those; regex follows operators, keywords, etc.
+      let prev = ''
+      for (let k = i - 1; k >= 0; k--) {
+        if (source[k] !== ' ' && source[k] !== '\t') { prev = source[k]; break }
+      }
+      if (!/[a-zA-Z0-9_$)\]]/.test(prev)) {
+        i++  // skip opening /
+        while (i < pos) {
+          if (source[i] === '\\') { i += 2; continue }
+          if (source[i] === '/') { i++; break }   // closing /
+          if (source[i] === '\n') break            // regex can't span lines
+          i++
+        }
+        while (i < pos && /[gimsuy]/.test(source[i])) i++  // skip flags
+        continue
+      }
+    }
     if (c === '"' || c === "'" || c === '`') { stack.push(c) }
     i++
   }
@@ -379,7 +410,15 @@ const NAVIGATE_PATH = new URL('../src/runtime/navigate.js', import.meta.url).pat
 
 const PAGES_DIR = path.join(ROOT, 'src', 'pages')
 
-const bootstrapFiles = pages.map(({ filePath }) => {
+const bootstrapFiles = pages.flatMap(({ filePath }) => {
+  // Strip server-only keys/imports to check what's left for the client.
+  // Skip specs with no view — these are API routes or raw content specs
+  // (using render: instead of view:) that have no client-side code. Including
+  // them in the bundle fragments the shared runtime chunk unnecessarily.
+  const source   = fs.readFileSync(filePath, 'utf8')
+  const stripped = stripServerOnlyImports(stripServerOnlyKeys(source))
+  if (!/\bview\s*:/.test(stripped)) return []
+
   // Use the path relative to src/pages/ so nested pages get unique names.
   // e.g. src/pages/api/products.js → 'api--products' (not 'products')
   const relToPages    = path.relative(PAGES_DIR, filePath)
@@ -404,7 +443,7 @@ if (root && !root.dataset.pulseMounted) {
 export default spec
 `)
 
-  return { filePath, bootstrapPath, name }
+  return [{ filePath, bootstrapPath, name }]
 })
 
 // ---------------------------------------------------------------------------

package/scripts/strip-server.test.js

@@ -73,6 +73,18 @@ function isInsideString(source, pos) {
       if (c === '"' || c === "'" || c === '`') { stack.push(c); i++; continue }
       i++; continue
     }
+    if (c === '/') {
+      if (source[i + 1] === '/') { while (i < pos && source[i] !== '\n') i++; continue }
+      if (source[i + 1] === '*') { const end = source.indexOf('*/', i + 2); i = end < 0 ? pos : end + 2; continue }
+      let prev = ''
+      for (let k = i - 1; k >= 0; k--) { if (source[k] !== ' ' && source[k] !== '\t') { prev = source[k]; break } }
+      if (!/[a-zA-Z0-9_$)\]]/.test(prev)) {
+        i++
+        while (i < pos) { if (source[i] === '\\') { i += 2; continue } if (source[i] === '/') { i++; break } if (source[i] === '\n') break; i++ }
+        while (i < pos && /[gimsuy]/.test(source[i])) i++
+        continue
+      }
+    }
     if (c === '"' || c === "'" || c === '`') { stack.push(c) }
     i++
   }
@@ -257,6 +269,21 @@ test('server: inside a double-quoted string is not stripped',
   'export default {\n  route: \'/docs\',\n  view: () => "<pre>server: { data: async () => {} }</pre>"\n}'
 )
 
+test('server/meta not fooled by regex literal containing double quote (/"/g)',
+  'const esc = s => s.replace(/"/g, \'&quot;\')\nexport default {\n  meta: { title: \'Page\', description: \'Desc\' },\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'const esc = s => s.replace(/"/g, \'&quot;\')\nexport default {\n  view: () => \'\'\n}'
+)
+
+test('server not fooled by line comment containing double quote',
+  'export default {\n  // server: "comment"\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'export default {\n  // server: "comment"\n  view: () => \'\'\n}'
+)
+
+test('server not fooled by block comment containing double quote',
+  'export default {\n  /* server: "comment" */\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'export default {\n  /* server: "comment" */\n  view: () => \'\'\n}'
+)
+
 test('meta object is stripped (client runtime never reads spec.meta)',
   `export default {\n  route: '/blog',\n  meta: {\n    title: async (ctx) => fetchPost(ctx).frontmatter.title,\n    styles: ['/pulse-ui.css'],\n  },\n  view: () => ''\n}`,
   `export default {\n  route: '/blog',\n  view: () => ''\n}`

package/src/cli/scaffold.js

@@ -95,6 +95,9 @@ ${port !== 3000 ? `  port: ${port},\n` : ''}}
 
   // settings.json — hooks that enforce correct agent behaviour
   write(targetDir, '.claude/settings.json', JSON.stringify({
+    enabledPlugins: {
+      'frontend-design@claude-plugins-official': true,
+    },
     hooks: {
       SessionStart: [
         {
@@ -346,6 +349,19 @@ public/app.css   ← global stylesheet
 
 The MCP guide is the single source of truth. Follow it for all technical decisions, component usage, and the mandatory verification workflow.
 
+## Design — do this before writing any HTML
+
+Before planning any new page or component, use the \`frontend-design\` plugin to establish the visual direction:
+
+1. Call the plugin's design tools with the page brief (what it does, who it's for, the tone)
+2. The plugin will return decisions — colour palette, typography, spacing scale, component variants, layout approach
+3. **Apply those decisions as CSS custom property overrides in \`public/app.css\`** — not as inline styles or class hacks
+4. Document the chosen tokens at the top of \`public/app.css\` so every page stays consistent
+
+The plugin informs *what* to build visually. The Pulse component library is *how* you build it. Use both — the plugin gives direction, the components implement it.
+
+**Do not default to stock component styles.** If the design plugin gives you a colour, use it. If it suggests a layout pattern, follow it. Every page should reflect deliberate design decisions, not the component library defaults.
+
 ## Before writing any code
 
 **Always present a plan and wait for the user to confirm before writing a single line of code.**

package/src/md/index.js

@@ -251,7 +251,7 @@ function renderBlocks(blocks) {
           const task = item.match(/^\[([ xX])\] (.*)/)
           if (task) {
             const checked = task[1].toLowerCase() === 'x' ? ' checked' : ''
-            return `<li class="task-list-item"><input type="checkbox" disabled${checked}> ${renderListItem(task[2])}</li>`
+            return `<li class="task-list-item"><label class="ui-checkbox ui-checkbox--disabled"><input type="checkbox" class="ui-checkbox-input" disabled${checked}><span class="ui-checkbox-box" aria-hidden="true"></span><span class="ui-checkbox-label">${renderListItem(task[2])}</span></label></li>`
           }
           return `<li>${renderListItem(item)}</li>`
         })

package/src/md/md.test.js

@@ -30,18 +30,18 @@ console.log('\nTask list (checkbox) rendering\n')
 
 test('unchecked item renders disabled checkbox', () => {
   const { html } = parseMd('- [ ] Buy milk')
-  assert(html.includes('<input type="checkbox" disabled>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled>'), `Got: ${html}`)
   assert(html.includes('Buy milk'), `Got: ${html}`)
 })
 
 test('checked item renders checked disabled checkbox', () => {
   const { html } = parseMd('- [x] Done')
-  assert(html.includes('<input type="checkbox" disabled checked>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled checked>'), `Got: ${html}`)
 })
 
 test('uppercase X is also treated as checked', () => {
   const { html } = parseMd('- [X] Done')
-  assert(html.includes('<input type="checkbox" disabled checked>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled checked>'), `Got: ${html}`)
 })
 
 test('task list items get task-list-item class', () => {
@@ -49,6 +49,14 @@ test('task list items get task-list-item class', () => {
   assert(html.includes('class="task-list-item"'), `Got: ${html}`)
 })
 
+test('task item checkbox is wrapped in a label for accessibility', () => {
+  const { html } = parseMd('- [ ] Buy milk')
+  assert(html.includes('class="ui-checkbox ui-checkbox--disabled"'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled>'), `Got: ${html}`)
+  assert(html.includes('<span class="ui-checkbox-box" aria-hidden="true">'), `Got: ${html}`)
+  assert(html.includes('<span class="ui-checkbox-label">Buy milk</span>'), `Got: ${html}`)
+})
+
 test('task list ul gets contains-task-list class', () => {
   const { html } = parseMd('- [ ] Item one\n- [x] Item two')
   assert(html.includes('class="contains-task-list"'), `Got: ${html}`)
@@ -73,8 +81,8 @@ test('task item label text is rendered as inline markdown', () => {
 
 test('multiple items preserve checked state independently', () => {
   const { html } = parseMd('- [ ] Unchecked\n- [x] Checked\n- [ ] Also unchecked')
-  const checkedCount   = (html.match(/checked>/g) || []).length
-  const uncheckedCount = (html.match(/<input type="checkbox" disabled>/g) || []).length
+  const checkedCount   = (html.match(/disabled checked>/g) || []).length
+  const uncheckedCount = (html.match(/disabled>/g) || []).length
   assert(checkedCount === 1,   `Expected 1 checked, got ${checkedCount}`)
   assert(uncheckedCount === 2, `Expected 2 unchecked, got ${uncheckedCount}`)
 })

package/src/runtime/ssr.js

@@ -327,7 +327,9 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
   // 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>`
+    : spec.hydrate
+      ? `<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>

package/src/server/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 cached pages (no spec.server, no spec.store) are only cached
+ * when they have no spec.hydrate — so no inline nonce scripts are present.
  * @param {Record<string,string[]>} [ext]  Extra sources to merge in per directive.
  */
 function buildCachedCsp(ext = {}) {
@@ -1004,7 +1005,9 @@ ${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload +
   // 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>`
+    : spec.hydrate
+      ? `\n  <script nonce="${nonce}">window.__PULSE_NONCE__='${nonce}';</script>`
+      : ''
 
   const docClose = `
   </div>

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'