@invisibleloop/pulse 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",
@@ -57,7 +57,7 @@
   "scripts": {
     "dev": "node --watch src/cli/dev.js",
     "build": "node scripts/build.js",
-    "test": "node src/spec/schema.test.js && node src/runtime/runtime.test.js && node src/runtime/morph.test.js && node src/runtime/ssr.test.js && node src/runtime/image.test.js && node src/server/server.test.js && node src/cli/cli.test.js && node src/ui/ui.test.js && node src/testing/testing.test.js && node src/store/store.test.js",
+    "test": "node src/spec/schema.test.js && node src/runtime/runtime.test.js && node src/runtime/morph.test.js && node src/runtime/ssr.test.js && node src/runtime/image.test.js && node src/server/server.test.js && node src/cli/cli.test.js && node src/ui/ui.test.js && node src/testing/testing.test.js && node src/store/store.test.js && node src/md/md.test.js && node scripts/strip-server.test.js",
     "typecheck": "tsc --noEmit",
     "docs": "node --watch src/cli/dev.js --root docs --port 4000",
     "docs:start": "node docs/server.js"

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.6.1
+0.7.0

package/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/scripts/build.js

@@ -38,6 +38,7 @@ const SERVER_ONLY_KEYS = ['server', 'meta', 'guard', 'serverTimeout', 'contentTy
  * Pulse subpath exports that are server-only (use Node built-ins).
  * Imports from these paths are removed from client bundles along with any
  * top-level variable declarations whose right-hand side calls the imported names.
+ * All `node:*` built-ins are also stripped automatically via the import regex.
  */
 const SERVER_ONLY_IMPORTS = ['@invisibleloop/pulse/md']
 
@@ -54,46 +55,60 @@ function stripServerOnlyKeys(source) {
 }
 
 /**
- * Strip import statements for known server-only modules and any top-level
- * variable declarations that called those imported functions.
+ * Strip import statements for server-only modules and any top-level
+ * variable declarations whose right-hand side calls the imported names.
  *
- * Handles patterns like:
- *   import { md } from '@invisibleloop/pulse/md'
- *   const fetchPost = md('src/content/blog/:slug.md')
+ * Strips:
+ *   - All `node:*` built-in imports (fs, path, url, crypto, …)
+ *   - Named entries in SERVER_ONLY_IMPORTS (@invisibleloop/pulse/md, …)
+ *
+ * Also removes associated top-level declarations, e.g.:
+ *   import fs   from 'node:fs'          → removed
+ *   import { md } from '@invisibleloop/pulse/md'  → removed
+ *   const fetchPost = md('src/content/blog.md')   → removed
  */
 function stripServerOnlyImports(source) {
-  for (const mod of SERVER_ONLY_IMPORTS) {
-    const escaped = mod.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    const importRe = new RegExp(
-      `^[ \\t]*import\\s+(?:\\{[^}]*\\}|[\\w*]+(?:\\s+as\\s+\\w+)?)\\s+from\\s+['"]${escaped}['"]\\s*;?[ \\t]*\\n?`,
-      'gm'
-    )
-
-    // Collect imported binding names before removing the statement
-    const importedNames = new Set()
-    for (const m of source.matchAll(importRe)) {
-      const named = m[0].match(/\{\s*([^}]*)\s*\}/)
-      if (named) {
-        for (const part of named[1].split(',')) {
-          const name = part.trim().split(/\s+as\s+/).pop().trim()
-          if (name) importedNames.add(name)
-        }
+  // Match any import whose specifier starts with `node:` OR is in SERVER_ONLY_IMPORTS.
+  // Covers: default imports, named imports, namespace imports.
+  const importRe =
+    /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"](?:node:[^'"]+|__SERVER_ONLY__)['"]\s*;?[ \t]*\n?/gm
+
+  // Build a combined pattern for SERVER_ONLY_IMPORTS entries
+  const extraPattern = SERVER_ONLY_IMPORTS
+    .map(m => m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|')
+
+  // Single regex covering node:* and every listed server-only module
+  const combinedRe = new RegExp(
+    importRe.source.replace('__SERVER_ONLY__', extraPattern),
+    'gm'
+  )
+
+  // Collect all imported binding names before stripping
+  const importedNames = new Set()
+  for (const m of source.matchAll(combinedRe)) {
+    const named = m[0].match(/\{\s*([^}]*)\s*\}/)
+    if (named) {
+      for (const part of named[1].split(',')) {
+        const name = part.trim().split(/\s+as\s+/).pop().trim()
+        if (name) importedNames.add(name)
       }
-      const def = m[0].match(/import\s+([\w]+)\s+from/)
-      if (def) importedNames.add(def[1])
     }
+    const def = m[0].match(/import\s+([\w]+)\s+from/)
+    if (def) importedNames.add(def[1])
+  }
 
-    source = source.replace(importRe, '')
+  source = source.replace(combinedRe, '')
 
-    // Remove top-level: const/let/var X = importedFn(...)
-    for (const name of importedNames) {
-      const declRe = new RegExp(
-        `^[ \\t]*(?:const|let|var)\\s+\\w+\\s*=\\s*${name}\\s*\\([^\\n]*\\)\\s*;?[ \\t]*\\n?`,
-        'gm'
-      )
-      source = source.replace(declRe, '')
-    }
+  // Remove top-level: const/let/var X = importedName... (call, method call, or property)
+  for (const name of importedNames) {
+    const declRe = new RegExp(
+      `^[ \\t]*(?:const|let|var)\\s+\\w+\\s*=\\s*${name}\\b[^\\n]*;?[ \\t]*\\n?`,
+      'gm'
+    )
+    source = source.replace(declRe, '')
   }
+
   return source
 }
 
@@ -130,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++
   }
@@ -364,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)
@@ -389,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

@@ -16,32 +16,32 @@ function stripServerOnlyKeys(source) {
 }
 
 function stripServerOnlyImports(source) {
-  for (const mod of SERVER_ONLY_IMPORTS) {
-    const escaped = mod.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    const importRe = new RegExp(
-      `^[ \\t]*import\\s+(?:\\{[^}]*\\}|[\\w*]+(?:\\s+as\\s+\\w+)?)\\s+from\\s+['"]${escaped}['"]\\s*;?[ \\t]*\\n?`,
-      'gm'
-    )
-    const importedNames = new Set()
-    for (const m of source.matchAll(importRe)) {
-      const named = m[0].match(/\{\s*([^}]*)\s*\}/)
-      if (named) {
-        for (const part of named[1].split(',')) {
-          const name = part.trim().split(/\s+as\s+/).pop().trim()
-          if (name) importedNames.add(name)
-        }
+  const extraPattern = SERVER_ONLY_IMPORTS
+    .map(m => m.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|')
+  const combinedRe = new RegExp(
+    `^[ \\t]*import\\s+(?:\\{[^}]*\\}|[\\w*]+(?:\\s+as\\s+\\w+)?)\\s+from\\s+['"](?:node:[^'"]+|${extraPattern})['"]\\s*;?[ \\t]*\\n?`,
+    'gm'
+  )
+  const importedNames = new Set()
+  for (const m of source.matchAll(combinedRe)) {
+    const named = m[0].match(/\{\s*([^}]*)\s*\}/)
+    if (named) {
+      for (const part of named[1].split(',')) {
+        const name = part.trim().split(/\s+as\s+/).pop().trim()
+        if (name) importedNames.add(name)
       }
-      const def = m[0].match(/import\s+([\w]+)\s+from/)
-      if (def) importedNames.add(def[1])
-    }
-    source = source.replace(importRe, '')
-    for (const name of importedNames) {
-      const declRe = new RegExp(
-        `^[ \\t]*(?:const|let|var)\\s+\\w+\\s*=\\s*${name}\\s*\\([^\\n]*\\)\\s*;?[ \\t]*\\n?`,
-        'gm'
-      )
-      source = source.replace(declRe, '')
     }
+    const def = m[0].match(/import\s+([\w]+)\s+from/)
+    if (def) importedNames.add(def[1])
+  }
+  source = source.replace(combinedRe, '')
+  for (const name of importedNames) {
+    const declRe = new RegExp(
+      `^[ \\t]*(?:const|let|var)\\s+\\w+\\s*=\\s*${name}\\b[^\\n]*;?[ \\t]*\\n?`,
+      'gm'
+    )
+    source = source.replace(declRe, '')
   }
   return source
 }
@@ -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}`
@@ -293,6 +320,82 @@ test('does not strip non-server imports',
   `import { nav, footer } from '@invisibleloop/pulse/ui'\nexport default {\n  view: () => nav({})\n}`
 )
 
+test('strips node:fs default import',
+  `import fs from 'node:fs'\nexport default {\n  server: { data: async () => fs.readFileSync('x') },\n  view: () => ''\n}`,
+  `export default {\n  view: () => ''\n}`
+)
+
+test('strips node:fs/promises named import',
+  `import { readFile } from 'node:fs/promises'\nexport default {\n  server: { data: async () => readFile('x') },\n  view: () => ''\n}`,
+  `export default {\n  view: () => ''\n}`
+)
+
+test('strips node:path and node:url together',
+  `import path from 'node:path'\nimport { fileURLToPath } from 'node:url'\nexport default {\n  server: { data: async (ctx) => path.join('a', 'b') },\n  view: () => ''\n}`,
+  `export default {\n  view: () => ''\n}`
+)
+
+test('strips node:fs default import and top-level const using it',
+  `import fs from 'node:fs'\nconst DIR = fs.readdirSync('.')\nexport default {\n  view: () => ''\n}`,
+  `export default {\n  view: () => ''\n}`
+)
+
+// ---------------------------------------------------------------------------
+// Dev-mode node:* import stripping (same regex used in src/cli/dev.js serveFile)
+// ---------------------------------------------------------------------------
+
+console.log('\nDev-mode node:* import stripping\n')
+
+const DEV_NODE_RE = /^[ \t]*import\s+(?:\{[^}]*\}|[\w*]+(?:\s+as\s+\w+)?)\s+from\s+['"]node:[^'"]+['"]\s*;?[ \t]*\n?/gm
+
+function devStrip(source) {
+  return source.replace(DEV_NODE_RE, '')
+}
+
+function devTest(label, input, expected) {
+  const got = devStrip(input).trim()
+  const exp = expected.trim()
+  if (got === exp) {
+    console.log('  \u2713 ' + label)
+    pass++
+  } else {
+    console.log('  \u2717 ' + label)
+    console.log('    expected: ' + JSON.stringify(exp))
+    console.log('    got:      ' + JSON.stringify(got))
+    fail++
+  }
+}
+
+devTest('strips default import (node:fs)',
+  `import fs from 'node:fs'\nconst DIR = '/journal'\nexport default { view: () => '' }`,
+  `const DIR = '/journal'\nexport default { view: () => '' }`
+)
+
+devTest('strips named import (node:path)',
+  `import { join, resolve } from 'node:path'\nexport default { view: () => '' }`,
+  `export default { view: () => '' }`
+)
+
+devTest('strips multiple node: imports',
+  `import fs from 'node:fs'\nimport path from 'node:path'\nexport default { view: () => '' }`,
+  `export default { view: () => '' }`
+)
+
+devTest('strips node:fs/promises named import',
+  `import { readFile } from 'node:fs/promises'\nexport default { view: () => '' }`,
+  `export default { view: () => '' }`
+)
+
+devTest('does not strip non-node imports',
+  `import { nav } from '@invisibleloop/pulse/ui'\nexport default { view: () => '' }`,
+  `import { nav } from '@invisibleloop/pulse/ui'\nexport default { view: () => '' }`
+)
+
+devTest('leaves module-level constants intact',
+  `import fs from 'node:fs'\nconst JOURNAL_DIR = '/Users/andy/journal'\nexport default { view: () => '' }`,
+  `const JOURNAL_DIR = '/Users/andy/journal'\nexport default { view: () => '' }`
+)
+
 // ---------------------------------------------------------------------------
 
 console.log(`\n${pass + fail} tests: ${pass} passed, ${fail} failed\n`)

package/src/cli/dev.js

@@ -187,11 +187,18 @@ 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.
+      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,
+        ''
+      )
       res.writeHead(200, {
         'Content-Type':  'application/javascript',
         'Cache-Control': 'no-store',
       })
-      fs.createReadStream(filePath).pipe(res)
+      res.end(content)
       return true
     }
 

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/mcp/validate-worker.js

@@ -36,6 +36,19 @@ if (!valid) {
 
 // Render the view and run additional HTML checks
 const warnings = [...schemaWarnings]
+
+// Raw-response specs (contentType + render) produce non-HTML output —
+// skip all view rendering and HTML-specific checks for them.
+const isRawResponse = typeof spec.render === 'function' ||
+  (spec.contentType && !spec.contentType.startsWith('text/html'))
+
+if (isRawResponse) {
+  process.stdout.write(warnings.length > 0
+    ? 'Valid ✓ — but fix these issues:\n' + warnings.map(w => `  ⚠ ${w}`).join('\n')
+    : 'Valid ✓')
+  process.exit(0)
+}
+
 try {
   // Pass null for every declared server key so views that check `=== null`
   // degrade gracefully (showing error branches) rather than throwing on

package/src/md/browser-stub.js

@@ -0,0 +1,11 @@
+/**
+ * Browser stub for @invisibleloop/pulse/md
+ *
+ * In dev mode, spec files are served raw to the browser for hydration. Any
+ * top-level import of @invisibleloop/pulse/md must resolve to something — but
+ * the server fetchers that actually call md()/parseMd() never run in the
+ * browser. This stub satisfies the import without pulling in node:fs/path/url.
+ */
+
+export const md      = () => async () => ({ html: '', frontmatter: {} })
+export const parseMd = ()       =>       ({ html: '', frontmatter: {} })

package/src/md/index.js

@@ -245,8 +245,18 @@ function renderBlocks(blocks) {
         return '<hr>'
       case 'blockquote':
         return `<blockquote>${markdownToHtml(block.content)}</blockquote>`
-      case 'ul':
-        return `<ul>\n${block.items.map(item => `<li>${renderListItem(item)}</li>`).join('\n')}\n</ul>`
+      case 'ul': {
+        const isTaskList = block.items.some(item => /^\[[ xX]\] /.test(item))
+        const items = block.items.map(item => {
+          const task = item.match(/^\[([ xX])\] (.*)/)
+          if (task) {
+            const checked = task[1].toLowerCase() === 'x' ? ' checked' : ''
+            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>`
+        })
+        return `<ul${isTaskList ? ' class="contains-task-list"' : ''}>\n${items.join('\n')}\n</ul>`
+      }
       case 'ol':
         return `<ol>\n${block.items.map(item => `<li>${renderListItem(item)}</li>`).join('\n')}\n</ol>`
       case 'table':

package/src/md/md.test.js

@@ -0,0 +1,181 @@
+/**
+ * Markdown parser tests — run with: node src/md/md.test.js
+ */
+import { parseMd } from './index.js'
+
+let passed = 0
+let failed = 0
+
+function test(label, fn) {
+  try {
+    fn()
+    console.log(`  ✓ ${label}`)
+    passed++
+  } catch (e) {
+    console.log(`  ✗ ${label}`)
+    console.log(`    ${e.message}`)
+    failed++
+  }
+}
+
+function assert(condition, msg) {
+  if (!condition) throw new Error(msg || 'Assertion failed')
+}
+
+// ---------------------------------------------------------------------------
+// Task lists (GFM checkboxes)
+// ---------------------------------------------------------------------------
+
+console.log('\nTask list (checkbox) rendering\n')
+
+test('unchecked item renders disabled checkbox', () => {
+  const { html } = parseMd('- [ ] Buy milk')
+  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" 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" class="ui-checkbox-input" disabled checked>'), `Got: ${html}`)
+})
+
+test('task list items get task-list-item class', () => {
+  const { html } = parseMd('- [ ] Item')
+  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}`)
+})
+
+test('mixed task and regular items — ul gets contains-task-list class', () => {
+  const { html } = parseMd('- [ ] Task\n- Regular item')
+  assert(html.includes('class="contains-task-list"'), `Got: ${html}`)
+})
+
+test('regular list has no task-list classes', () => {
+  const { html } = parseMd('- Apple\n- Banana')
+  assert(!html.includes('contains-task-list'), `Got: ${html}`)
+  assert(!html.includes('task-list-item'), `Got: ${html}`)
+  assert(!html.includes('checkbox'), `Got: ${html}`)
+})
+
+test('task item label text is rendered as inline markdown', () => {
+  const { html } = parseMd('- [ ] Read **important** docs')
+  assert(html.includes('<strong>important</strong>'), `Got: ${html}`)
+})
+
+test('multiple items preserve checked state independently', () => {
+  const { html } = parseMd('- [ ] Unchecked\n- [x] Checked\n- [ ] Also unchecked')
+  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}`)
+})
+
+// ---------------------------------------------------------------------------
+// Frontmatter
+// ---------------------------------------------------------------------------
+
+console.log('\nFrontmatter\n')
+
+test('extracts frontmatter key/value pairs', () => {
+  const { frontmatter } = parseMd('---\ntitle: Hello World\ndate: 2026-01-01\n---\nBody text')
+  assert(frontmatter.title === 'Hello World', `Got: ${JSON.stringify(frontmatter)}`)
+  assert(frontmatter.date === '2026-01-01', `Got: ${JSON.stringify(frontmatter)}`)
+})
+
+test('body is parsed without frontmatter block', () => {
+  const { html } = parseMd('---\ntitle: Test\n---\n# Heading')
+  assert(html.includes('<h1'), `Got: ${html}`)
+  assert(!html.includes('title:'), `Got: ${html}`)
+})
+
+test('no frontmatter — returns empty object', () => {
+  const { frontmatter } = parseMd('# Just a heading')
+  assert(Object.keys(frontmatter).length === 0, `Got: ${JSON.stringify(frontmatter)}`)
+})
+
+// ---------------------------------------------------------------------------
+// Core inline / block rendering
+// ---------------------------------------------------------------------------
+
+console.log('\nInline and block rendering\n')
+
+test('bold', () => {
+  const { html } = parseMd('**bold**')
+  assert(html.includes('<strong>bold</strong>'), `Got: ${html}`)
+})
+
+test('italic', () => {
+  const { html } = parseMd('*italic*')
+  assert(html.includes('<em>italic</em>'), `Got: ${html}`)
+})
+
+test('strikethrough', () => {
+  const { html } = parseMd('~~strike~~')
+  assert(html.includes('<del>strike</del>'), `Got: ${html}`)
+})
+
+test('inline code', () => {
+  const { html } = parseMd('Use `foo()` here')
+  assert(html.includes('<code>foo()</code>'), `Got: ${html}`)
+})
+
+test('heading levels', () => {
+  const { html } = parseMd('# H1\n## H2\n### H3')
+  assert(html.includes('<h1'), `Got: ${html}`)
+  assert(html.includes('<h2'), `Got: ${html}`)
+  assert(html.includes('<h3'), `Got: ${html}`)
+})
+
+test('heading gets id from text', () => {
+  const { html } = parseMd('## My Section')
+  assert(html.includes('id="my-section"'), `Got: ${html}`)
+})
+
+test('ordered list', () => {
+  const { html } = parseMd('1. First\n2. Second')
+  assert(html.includes('<ol>'), `Got: ${html}`)
+  assert(html.includes('<li>First</li>'), `Got: ${html}`)
+})
+
+test('blockquote', () => {
+  const { html } = parseMd('> A quote')
+  assert(html.includes('<blockquote>'), `Got: ${html}`)
+})
+
+test('horizontal rule', () => {
+  const { html } = parseMd('---')
+  assert(html.includes('<hr>'), `Got: ${html}`)
+})
+
+test('link', () => {
+  const { html } = parseMd('[Pulse](https://example.com)')
+  assert(html.includes('<a href="https://example.com">Pulse</a>'), `Got: ${html}`)
+})
+
+test('HTML is escaped in inline text', () => {
+  const { html } = parseMd('A <script>alert(1)</script> here')
+  assert(!html.includes('<script>'), `Got: ${html}`)
+  assert(html.includes('&lt;script&gt;'), `Got: ${html}`)
+})
+
+// ---------------------------------------------------------------------------
+
+console.log(`\n${passed + failed} tests: ${passed} passed, ${failed} failed\n`)
+if (failed > 0) process.exit(1)

package/src/runtime/ssr.js

@@ -323,9 +323,11 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
   // 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_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}';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>

package/src/runtime/toast.js

@@ -80,6 +80,9 @@ function injectStyles() {
   if (_stylesInjected) return
   _stylesInjected = true
   const style = document.createElement('style')
+  // Apply the page nonce so the style tag passes the style-src CSP directive.
+  const nonce = typeof window !== 'undefined' && window.__PULSE_NONCE__
+  if (nonce) style.setAttribute('nonce', nonce)
   style.textContent = TOAST_CSS
   document.head.appendChild(style)
 }

package/src/server/index.js

@@ -79,7 +79,11 @@ function serializeCsp(directives) {
  * @param {Record<string,string[]>} [ext]  Extra sources to merge in per directive.
  */
 function buildCsp(nonce, ext = {}) {
-  const d = { ...BASE_CSP, 'script-src': ["'self'", `'nonce-${nonce}'`] }
+  const d = {
+    ...BASE_CSP,
+    'script-src': ["'self'", `'nonce-${nonce}'`],
+    'style-src':  ["'self'", `'nonce-${nonce}'`],  // allows toast's runtime-injected <style nonce>
+  }
   for (const [k, sources] of Object.entries(ext)) {
     d[k] = [...(d[k] || []), ...sources]
   }
@@ -317,7 +321,8 @@ function devImportMap(nonce) {
 {
   "imports": {
     "@invisibleloop/pulse/image": "/@pulse/runtime/image.js",
-    "@invisibleloop/pulse/ui": "/@pulse/ui/index.js"
+    "@invisibleloop/pulse/ui": "/@pulse/ui/index.js",
+    "@invisibleloop/pulse/md": "/@pulse/md/browser-stub.js"
   }
 }
 </script>`
@@ -499,7 +504,10 @@ export async function createServer(entries, options = {}) {
 
   // Validate all specs upfront — fail at startup, not at request time
   for (const spec of specs) {
-    const { valid, errors } = validateSpec(spec)
+    // Strip framework-injected `hydrate` before validation — the check for manually-set
+    // hydrate only makes sense on raw source files (MCP validate tool), not here.
+    const { hydrate: _h, ...specToValidate } = spec
+    const { valid, errors } = validateSpec(specToValidate)
     const routeErrors = []
     if (!spec.route || typeof spec.route !== 'string') {
       routeErrors.push('spec.route is required and must be a string (e.g. "/contact")')
@@ -992,9 +1000,11 @@ ${stylePreloads ? stylePreloads + '\n' : ''}${runtimePreload ? runtimePreload +
 
   // 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_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}';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>

package/src/spec/schema.js

@@ -410,7 +410,11 @@ export function validateSpec(spec) {
  * @throws {Error}
  */
 export function assertValidSpec(spec) {
-  const { valid, errors, warnings } = validateSpec(spec)
+  // Strip framework-injected `hydrate` before validating — the hydrate check is only
+  // meaningful on raw source files (MCP validate tool). At render time hydrate is always
+  // set by the framework, so validating it here produces a false positive warning.
+  const { hydrate: _h, ...specToValidate } = spec
+  const { valid, errors, warnings } = validateSpec(specToValidate)
   if (!valid) {
     throw new Error(
       `Invalid Pulse spec${spec?.route ? ` for route "${spec.route}"` : ''}:\n` +

package/src/spec/schema.test.js

@@ -1,7 +1,7 @@
 /**
  * Spec schema tests — run with: node src/spec/schema.test.js
  */
-import { validateSpec, getStreamOrder, getViewSegments } from './schema.js'
+import { validateSpec, assertValidSpec, getStreamOrder, getViewSegments } from './schema.js'
 
 let passed = 0
 let failed = 0
@@ -345,6 +345,45 @@ test('rejects guard that is an object', () => {
   )
 })
 
+// ---------------------------------------------------------------------------
+// assertValidSpec — framework-injected hydrate must not produce a warning
+// ---------------------------------------------------------------------------
+
+console.log('\nassertValidSpec\n')
+
+test('does not warn when hydrate is framework-injected', () => {
+  // The server injects hydrate onto specs that need it. assertValidSpec is called
+  // on every render — it must not print a false-positive warning about hydrate.
+  const warnings = []
+  const orig = console.warn
+  console.warn = (...args) => warnings.push(args.join(' '))
+  try {
+    assertValidSpec({
+      route:    '/entry',
+      hydrate:  '/src/pages/entry.js',
+      state:    { editing: false },
+      view:     () => '<main id="main-content"></main>',
+      mutations: { startEdit: () => ({ editing: true }) },
+      meta:     { title: 'Entry', description: 'A page' },
+    })
+  } finally {
+    console.warn = orig
+  }
+  const hydrateWarning = warnings.some(w => w.includes('hydrate'))
+  assert(!hydrateWarning, `Unexpected hydrate warning: ${warnings.join('; ')}`)
+})
+
+test('validateSpec still warns when hydrate is set manually in source', () => {
+  // validateSpec (used by the MCP tool on raw source files) should still warn.
+  const { warnings } = validateSpec({
+    route:   '/entry',
+    hydrate: '/src/pages/entry.js',
+    view:    () => '<main id="main-content"></main>',
+    meta:    { title: 'Entry', description: 'A page' },
+  })
+  assert(warnings.some(w => w.includes('hydrate')), 'Expected hydrate warning from validateSpec')
+})
+
 // ---------------------------------------------------------------------------
 
 console.log(`\n${passed + failed} tests: ${passed} passed, ${failed} failed\n`)