@invisibleloop/pulse 0.5.1 → 0.6.1

package/CLAUDE.md

@@ -448,6 +448,42 @@ Pulse views are plain JS template literals, not JSX. These React patterns are **
 
 Also: mutations must be pure (no fetch, no DOM access). Only `actions` can be async.
 
+## Markdown
+
+Pulse has a built-in markdown parser. Use it for blog posts, docs pages, and any static content written in `.md` files. Import from `@invisibleloop/pulse/md`. All parsing is server-side — zero browser JS.
+
+```js
+import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+// Static path
+const page = md('content/about.md')
+
+// Dynamic route — :param resolved from ctx.params
+const post = md('content/blog/:slug.md')
+
+export default {
+  route: '/blog/:slug',
+  meta: {
+    title:       async (ctx) => (await post(ctx)).frontmatter.title,
+    description: async (ctx) => (await post(ctx)).frontmatter.description,
+  },
+  server: { post },
+  view: (state, { post }) => `
+    <main id="main-content">
+      ${prose({ content: post.html })}
+    </main>
+  `,
+  onViewError: () => `<main id="main-content"><p>Post not found.</p></main>`,
+}
+```
+
+- `md(path)` returns an async fetcher — call it in both `meta` and `server`, the file is read only once per request
+- Result is `{ html, frontmatter }` — `html` goes into `prose()`, `frontmatter` holds the `---` key/value pairs
+- Missing file throws `{ status: 404 }` — always add `onViewError` on dynamic markdown routes
+- For markdown from a database/API use `parseMd(source)` directly: `import { parseMd } from '@invisibleloop/pulse/md'`
+- Use `new URL('./content/file.md', import.meta.url)` to resolve relative to the spec file rather than `process.cwd()`
+
 ## Check Components Before Building
 
 Before writing any UI HTML by hand, check `src/ui/index.js` — there are 50+ components available. Use them. Do not reinvent `button`, `card`, `alert`, `modal`, `spinner`, `badge`, `input`, etc.

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

@@ -4,11 +4,7 @@ Before finishing any spec, verify every point below. Fix anything that fails.
 
 ### Critical
 
-- **`hydrate` is set on every interactive page.** Without it, `data-event` / `data-action` bindings do nothing, `persist` never runs, and client-side navigation cannot re-mount the page. Every spec with `mutations`, `actions`, or `persist` must include:
-  ```js
-  hydrate: '/src/pages/my-page.js',  // browser-importable path to this file
-  ```
-  Omit `hydrate` only for purely server-rendered pages with zero client interactivity.
+- **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
 
@@ -81,6 +77,12 @@ Before finishing any spec, verify every point below. Fix anything that fails.
   ```
   Supported selectors: `tag`, `.class`, `#id`, `[attr]`, `[attr="value"]`, and combinations (`button.primary[disabled]`).
 
+### Markdown
+
+- **Use `md()` from `@invisibleloop/pulse/md` for `.md` file content.** Never read and parse markdown manually. Pass the result's `html` to `prose()`.
+- **Call the same `md()` fetcher in both `meta` and `server`** — it caches on `ctx._mdCache` so the file is only read once per request. Do not create two separate fetchers for the same file.
+- **Always add `onViewError` on dynamic markdown routes** (routes with `:param` segments loading `.md` files). A missing file throws `{ status: 404 }` which must be caught gracefully.
+
 ### View error handling
 
 - **Define `onViewError` on any page where the view could throw due to bad or missing data.** Without it, a runtime view error returns a 500 on the server and shows a generic inline message on the client. With it, the server returns 200 with your fallback HTML instead of a 500, and the client renders your fallback:

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

@@ -1 +1 @@
-0.2.14
+0.5.0

package/docs/public/pulse-ui.css

@@ -2806,6 +2806,26 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
   color:         var(--ui-text);
 }
 
+/* ─── Syntax highlighting tokens ────────────────────────────────────────────
+   Used by ui-prose pre code blocks rendered via @invisibleloop/pulse/md.
+   Dark theme defaults; light theme overrides below.                          */
+:root {
+  --tok-kw:    #c792ea;
+  --tok-str:   #c3e88d;
+  --tok-cmt:   #7a8a9a;
+  --tok-num:   #f78c6c;
+  --tok-fn:    #82aaff;
+  --tok-op:    #89ddff;
+  --tok-punct: #7e8899;
+}
+.tok-kw    { color: var(--tok-kw);    }
+.tok-str   { color: var(--tok-str);   }
+.tok-cmt   { color: var(--tok-cmt);   font-style: italic; }
+.tok-num   { color: var(--tok-num);   }
+.tok-fn    { color: var(--tok-fn);    }
+.tok-op    { color: var(--tok-op);    }
+.tok-punct { color: var(--tok-punct); }
+
 /* ─── Light theme ────────────────────────────────────────────────────────────
    Apply to any ancestor element: <body data-theme="light"> or .ui-theme-light
    All --ui-* tokens are overridden; component markup stays identical.        */
@@ -2829,4 +2849,11 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
   --ui-blue:            #1e40af;
   --ui-blue-dim:        rgba( 30,  64, 175, .12);
   --ui-nav-sticky-bg:   rgba(255, 255, 255, .85);
+  --tok-kw:             #7c3aed;
+  --tok-str:            #15803d;
+  --tok-cmt:            #6b7280;
+  --tok-num:            #c2410c;
+  --tok-fn:             #1d4ed8;
+  --tok-op:             #0891b2;
+  --tok-punct:          #6b7280;
 }

package/docs/server.js

@@ -33,6 +33,7 @@ await createServer(
     new URL('./src/pages/persist.js',           import.meta.url),
     // Server
     new URL('./src/pages/server-data.js',       import.meta.url),
+    new URL('./src/pages/markdown.js',          import.meta.url),
     new URL('./src/pages/store.js',             import.meta.url),
     new URL('./src/pages/routing.js',           import.meta.url),
     new URL('./src/pages/streaming.js',         import.meta.url),

package/docs/src/lib/highlight.js

@@ -1,299 +1,2 @@
-/**
- * Pulse Docs — Server-side syntax highlighter
- *
- * Character-by-character tokeniser. No dependencies, no client JS.
- * Returns an HTML string of <span> elements ready to drop inside <code>.
- */
-
-const KEYWORDS = new Set([
-  'export', 'default', 'import', 'from', 'as',
-  'async', 'await', 'const', 'let', 'var',
-  'return', 'if', 'else', 'for', 'while', 'of', 'in',
-  'true', 'false', 'null', 'undefined',
-  'function', 'class', 'new', 'this', 'typeof', 'instanceof',
-  'try', 'catch', 'finally', 'throw',
-])
-
-function esc(s) {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-function span(cls, text) {
-  return `<span class="${cls}">${esc(text)}</span>`
-}
-
-export function highlight(code, lang = 'js') {
-  if (lang === 'bash') return highlightBash(code)
-  if (lang === 'html') return highlightHtml(code)
-  return highlightJs(code)
-}
-
-// ---------------------------------------------------------------------------
-// JavaScript tokeniser
-// ---------------------------------------------------------------------------
-
-function highlightJs(code) {
-  let out = ''
-  let i = 0
-  const n = code.length
-
-  while (i < n) {
-    const ch  = code[i]
-    const ch2 = code[i + 1]
-
-    // Single-line comment
-    if (ch === '/' && ch2 === '/') {
-      const end = code.indexOf('\n', i)
-      const tok = end === -1 ? code.slice(i) : code.slice(i, end)
-      out += span('tok-cmt', tok)
-      i += tok.length
-      continue
-    }
-
-    // Block comment
-    if (ch === '/' && ch2 === '*') {
-      const end = code.indexOf('*/', i + 2)
-      const tok = end === -1 ? code.slice(i) : code.slice(i, end + 2)
-      out += span('tok-cmt', tok)
-      i += tok.length
-      continue
-    }
-
-    // Template literal
-    if (ch === '`') {
-      let tok = '`'
-      i++
-      let depth = 0
-      while (i < n) {
-        if (code[i] === '\\') {
-          tok += code[i] + (code[i + 1] || '')
-          i += 2
-          continue
-        }
-        if (code[i] === '$' && code[i + 1] === '{') {
-          tok += '${'
-          i += 2
-          depth++
-          continue
-        }
-        if (code[i] === '}' && depth > 0) {
-          tok += '}'
-          i++
-          depth--
-          continue
-        }
-        if (code[i] === '`' && depth === 0) {
-          tok += '`'
-          i++
-          break
-        }
-        tok += code[i++]
-      }
-      out += span('tok-str', tok)
-      continue
-    }
-
-    // Single or double quoted string
-    if (ch === '"' || ch === "'") {
-      let tok = ch
-      i++
-      while (i < n && code[i] !== ch && code[i] !== '\n') {
-        if (code[i] === '\\') {
-          tok += code[i] + (code[i + 1] || '')
-          i += 2
-          continue
-        }
-        tok += code[i++]
-      }
-      if (i < n && code[i] === ch) tok += code[i++]
-      out += span('tok-str', tok)
-      continue
-    }
-
-    // Number
-    if (/\d/.test(ch) && (i === 0 || !/\w/.test(code[i - 1]))) {
-      let tok = ''
-      while (i < n && /[\d.xXa-fA-F]/.test(code[i])) tok += code[i++]
-      out += span('tok-num', tok)
-      continue
-    }
-
-    // Identifier / keyword
-    if (/[a-zA-Z_$]/.test(ch)) {
-      let tok = ''
-      while (i < n && /[\w$]/.test(code[i])) tok += code[i++]
-
-      if (KEYWORDS.has(tok)) {
-        out += span('tok-kw', tok)
-      } else {
-        // Look ahead: followed by ( → function call
-        let j = i
-        while (j < n && code[j] === ' ') j++
-        if (code[j] === '(') {
-          out += span('tok-fn', tok)
-        } else {
-          out += esc(tok)
-        }
-      }
-      continue
-    }
-
-    // Operators
-    if (/[=!<>|&?.]/.test(ch)) {
-      let tok = ch
-      // Grab two-char operators
-      if (/[=!<>|&?]/.test(ch) && /[=|&>?]/.test(ch2)) {
-        tok = code.slice(i, i + 2)
-        // Three-char: ===, !==, ...
-        if (code[i + 2] === '=') tok = code.slice(i, i + 3)
-      }
-      out += span('tok-op', tok)
-      i += tok.length
-      continue
-    }
-
-    // Punctuation
-    if (/[{}()[\],;:]/.test(ch)) {
-      out += span('tok-punct', ch)
-      i++
-      continue
-    }
-
-    // Everything else (whitespace, newlines, etc.)
-    out += esc(ch)
-    i++
-  }
-
-  return out
-}
-
-// ---------------------------------------------------------------------------
-// Bash tokeniser (minimal)
-// ---------------------------------------------------------------------------
-
-function highlightBash(code) {
-  return code.split('\n').map(line => {
-    // Comment line
-    if (/^\s*#/.test(line)) return span('tok-cmt', line)
-
-    let out = ''
-    let i = 0
-    while (i < line.length) {
-      // Inline comment
-      if (line[i] === '#') {
-        out += span('tok-cmt', line.slice(i))
-        break
-      }
-      // String
-      if (line[i] === '"' || line[i] === "'") {
-        const q = line[i]
-        let tok = q
-        i++
-        while (i < line.length && line[i] !== q) tok += line[i++]
-        tok += line[i] === q ? line[i++] : ''
-        out += span('tok-str', tok)
-        continue
-      }
-      // Flag/option
-      if (line[i] === '-' && /\w/.test(line[i + 1] || '')) {
-        let tok = '-'
-        i++
-        while (i < line.length && /[-\w]/.test(line[i])) tok += line[i++]
-        out += span('tok-op', tok)
-        continue
-      }
-      out += esc(line[i++])
-    }
-    return out
-  }).join('\n')
-}
-
-// ---------------------------------------------------------------------------
-// HTML tokeniser (minimal)
-// ---------------------------------------------------------------------------
-
-function highlightHtmlTag(tag) {
-  // Single-pass tag highlighter — avoids the chained .replace() trap where a
-  // later pass re-processes class="tok-fn" strings already injected by an
-  // earlier pass, producing broken HTML like <span class=<span …>"tok-fn"</span>>.
-  let out = ''
-  let i = 0
-
-  // Opening < or </
-  out += '&lt;'
-  i++ // skip <
-  if (tag[i] === '/') { out += '/'; i++ }
-
-  // Tag name
-  let name = ''
-  while (i < tag.length && /[\w-]/.test(tag[i])) name += tag[i++]
-  if (name) out += span('tok-kw', name)
-
-  // Attributes and remainder up to >
-  while (i < tag.length) {
-    const ch = tag[i]
-    if (ch === '>') { out += '&gt;'; i++; break }
-    if (ch === '/') { out += '/'; i++; continue }
-
-    if (/[\w-]/.test(ch)) {
-      // Attribute name
-      let attr = ''
-      while (i < tag.length && /[\w-]/.test(tag[i])) attr += tag[i++]
-
-      if (tag[i] === '=') {
-        out += span('tok-fn', attr) + esc('=')
-        i++ // skip =
-        // Attribute value
-        const q = tag[i]
-        if (q === '"' || q === "'") {
-          let val = q
-          i++
-          while (i < tag.length && tag[i] !== q) {
-            if (tag[i] === '\\') { val += tag[i] + (tag[i + 1] || ''); i += 2; continue }
-            val += tag[i++]
-          }
-          if (i < tag.length) val += tag[i++] // closing quote
-          out += span('tok-str', val)
-        }
-      } else {
-        out += esc(attr)
-      }
-      continue
-    }
-
-    out += esc(ch)
-    i++
-  }
-
-  return out
-}
-
-function highlightHtml(code) {
-  let out = ''
-  let i = 0
-  const n = code.length
-
-  while (i < n) {
-    // Comment
-    if (code.slice(i, i + 4) === '<!--') {
-      const end = code.indexOf('-->', i + 4)
-      const tok = end === -1 ? code.slice(i) : code.slice(i, end + 3)
-      out += span('tok-cmt', tok)
-      i += tok.length
-      continue
-    }
-
-    // Tag
-    if (code[i] === '<') {
-      const end = code.indexOf('>', i)
-      if (end === -1) { out += esc(code[i++]); continue }
-      out += highlightHtmlTag(code.slice(i, end + 1))
-      i = end + 1
-      continue
-    }
-
-    out += esc(code[i++])
-  }
-
-  return out
-}
+// Re-export from the framework's canonical highlight implementation.
+export { highlight } from '../../../src/md/highlight.js'

package/docs/src/lib/nav.js

@@ -38,6 +38,7 @@ export const NAV = [
     section: 'Server',
     items: [
       { label: 'Server Data',    href: '/server-data'   },
+      { label: 'Markdown',       href: '/markdown'      },
       { label: 'Global Store',   href: '/store'         },
       { label: 'Routing',        href: '/routing'       },
       { label: 'Streaming SSR',  href: '/streaming'     },

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

@@ -42,8 +42,8 @@ export default {
 // CMS rich text field — output directly, fully styled
 prose({ content: server.article.bodyHtml })
 
-// Markdown rendered to HTML
-prose({ content: renderMarkdown(server.post.body) })`,
+// Markdown file via md() helper
+prose({ content: server.post.html })  // see /markdown`,
         { col: true }
       )}
 

package/docs/src/pages/markdown.js

@@ -0,0 +1,155 @@
+import { renderLayout, h1, lead, section, codeBlock, callout, table } from '../lib/layout.js'
+import { prevNext } from '../lib/nav.js'
+import { highlight } from '../lib/highlight.js'
+
+const { prev, next } = prevNext('/markdown')
+
+export default {
+  route: '/markdown',
+  meta: {
+    title: 'Markdown — Pulse Docs',
+    description: 'Render markdown files as pages with syntax-highlighted code blocks, frontmatter, and the prose component.',
+    styles: ['/docs.css'],
+  },
+  view: () => renderLayout({
+    currentHref: '/markdown',
+    prev,
+    next,
+    content: `
+      ${h1('Markdown')}
+      ${lead('Pulse includes a built-in markdown parser. Write content in <code>.md</code> files, load them with the <code>md()</code> helper, and render with the <code>prose</code> component. No external dependencies — zero browser bytes.')}
+
+      ${section('basic', 'Basic usage')}
+      <p>Import <code>md</code> from <code>@invisibleloop/pulse/md</code> and call it with a file path. It returns an async server fetcher — use it in <code>server</code> and optionally in <code>meta</code>:</p>
+      ${codeBlock(highlight(`import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+const page = md('content/about.md')
+
+export default {
+  route:  '/about',
+  server: { page },
+  view:   (state, { page }) => prose({ content: page.html }),
+}`, 'js'))}
+      <p>The fetcher returns <code>{ html, frontmatter }</code>. The <code>html</code> is ready to pass directly to <code>prose()</code>. The <code>frontmatter</code> object contains the parsed key/value pairs from the <code>---</code> block at the top of the file.</p>
+
+      ${section('frontmatter', 'Frontmatter')}
+      <p>Add a <code>---</code> block at the top of any <code>.md</code> file to define metadata. Use the values in <code>meta</code> for SEO:</p>
+      ${codeBlock(highlight(`---
+title: About Us
+description: Learn about our company
+date: 2024-01-15
+---
+
+# About Us
+
+Welcome to our company…`, 'bash'))}
+      ${codeBlock(highlight(`const page = md('content/about.md')
+
+export default {
+  route: '/about',
+  meta: {
+    title:       async (ctx) => (await page(ctx)).frontmatter.title,
+    description: async (ctx) => (await page(ctx)).frontmatter.description,
+  },
+  server: { page },
+  view:   (state, { page }) => prose({ content: page.html }),
+}`, 'js'))}
+      ${callout('tip', 'Calling <code>page(ctx)</code> in both <code>meta</code> and <code>server</code> reads the file only once per request — the result is cached on <code>ctx._mdCache</code> automatically.')}
+
+      ${section('dynamic', 'Dynamic routes')}
+      <p>Use <code>:param</code> placeholders in the path — they are resolved from <code>ctx.params</code> at request time:</p>
+      ${codeBlock(highlight(`import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+const post = md('content/blog/:slug.md')
+
+export default {
+  route: '/blog/:slug',
+  meta: {
+    title:       async (ctx) => (await post(ctx)).frontmatter.title,
+    description: async (ctx) => (await post(ctx)).frontmatter.description,
+  },
+  server: { post },
+  view:   (state, { post }) => \`
+    <main id="main-content">
+      \${prose({ content: post.html })}
+    </main>
+  \`,
+  onViewError: (err) => \`
+    <main id="main-content">
+      <p>Post not found.</p>
+    </main>
+  \`,
+}`, 'js'))}
+      ${callout('note', 'If the file does not exist, the fetcher throws with <code>{ status: 404 }</code>. Define <code>onViewError</code> on dynamic-route pages to render a friendly not-found message instead of a 500.')}
+
+      ${section('parseMd', 'parseMd()')}
+      <p>For cases where you already have a markdown string (from a database, API, or generated content), use <code>parseMd</code> directly instead of the file helper:</p>
+      ${codeBlock(highlight(`import { parseMd } from '@invisibleloop/pulse/md'
+import { prose }   from '@invisibleloop/pulse/ui'
+
+export default {
+  route: '/post/:id',
+  server: {
+    post: async (ctx) => {
+      const record = await db.posts.find(ctx.params.id)
+      const { html, frontmatter } = parseMd(record.body)
+      return { html, title: frontmatter.title ?? record.title }
+    }
+  },
+  view: (state, { post }) => prose({ content: post.html }),
+}`, 'js'))}
+
+      ${section('what-renders', 'What the parser renders')}
+      ${table(
+        ['Markdown', 'Output'],
+        [
+          ['<code># Heading</code> through <code>###### Heading</code>', '<code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code> with auto <code>id</code> anchors'],
+          ['<code>**bold**</code>, <code>*italic*</code>, <code>~~strike~~</code>', '<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;del&gt;</code>'],
+          ['<code>`inline code`</code>', '<code>&lt;code&gt;</code>'],
+          ['Fenced code block with language tag', '<code>&lt;pre&gt;&lt;code class="language-X"&gt;</code> with syntax highlighting'],
+          ['<code>[text](url)</code>, <code>![alt](url)</code>', '<code>&lt;a&gt;</code>, <code>&lt;img&gt;</code>'],
+          ['<code>- item</code>, <code>1. item</code>', '<code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> (nested lists supported)'],
+          ['<code>&gt; quote</code>', '<code>&lt;blockquote&gt;</code>'],
+          ['GFM table (<code>| col | col |</code>)', '<code>&lt;table&gt;</code> with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code>'],
+          ['<code>---</code> (three or more)', '<code>&lt;hr&gt;</code>'],
+        ]
+      )}
+
+      ${section('syntax-highlighting', 'Syntax highlighting')}
+      <p>Fenced code blocks with a language tag are syntax-highlighted automatically — no client JS required. The highlighting runs on the server and emits <code>&lt;span class="tok-*"&gt;</code> elements. The colour tokens are defined in <code>pulse-ui.css</code> and respect the active theme.</p>
+      ${codeBlock(highlight(`\`\`\`js
+const greeting = 'Hello, world'
+console.log(greeting)
+\`\`\``, 'bash'))}
+      <p>Supported languages:</p>
+      ${table(
+        ['Tag(s)', 'Highlighter'],
+        [
+          ['<code>js</code>, <code>javascript</code>, <code>ts</code>, <code>typescript</code>, <code>jsx</code>, <code>tsx</code>', 'JavaScript / TypeScript'],
+          ['<code>html</code>, <code>xml</code>, <code>svg</code>, <code>vue</code>, <code>svelte</code>', 'HTML / XML'],
+          ['<code>css</code>, <code>scss</code>, <code>less</code>', 'CSS'],
+          ['<code>bash</code>, <code>sh</code>, <code>shell</code>, <code>zsh</code>', 'Bash / Shell'],
+          ['<code>json</code>, <code>jsonc</code>', 'JSON'],
+          ['Any other tag', 'Plain text (escaped, no colour tokens)'],
+        ]
+      )}
+
+      ${section('prose', 'The prose component')}
+      <p>The <code>prose</code> component is designed specifically for markdown output. It applies typographic styles to all descendant elements — headings, paragraphs, lists, blockquotes, code blocks, tables, images — without requiring any classes on the elements themselves:</p>
+      ${codeBlock(highlight(`import { prose } from '@invisibleloop/pulse/ui'
+
+// Wrap the html from parseMd or md()
+prose({ content: page.html })
+
+// Optional size modifier
+prose({ content: page.html, size: 'lg' })  // 'sm' | 'base' | 'lg'`, 'js'))}
+      ${callout('note', 'The <code>content</code> slot is injected as raw HTML — only pass server-side content that you trust. Never pass user-submitted HTML directly; sanitise it first.')}
+
+      ${section('url-paths', 'Using URL paths')}
+      <p>Pass a <code>URL</code> object to resolve paths relative to the spec file rather than the process working directory:</p>
+      ${codeBlock(highlight(`const page = md(new URL('./content/about.md', import.meta.url))`, 'js'))}
+    `,
+  }),
+}

package/docs/src/pages/server-data.js

@@ -179,6 +179,24 @@ view: (state, server) => server.notFound
     featured: async () => fetch('https://api.example.com/featured').then(r => r.json()),
   },
 }`, 'js'))}
+
+      ${section('markdown', 'Markdown files')}
+      <p>Use the built-in <code>md()</code> helper to load and parse <code>.md</code> files as server data. The result (<code>{ html, frontmatter }</code>) is ready to pass to the <code>prose</code> component — no external dependencies, no client JS. See <a href="/markdown">Markdown</a> for the full reference.</p>
+      ${codeBlock(highlight(`import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+const post = md('content/blog/:slug.md')
+
+export default {
+  route: '/blog/:slug',
+  meta: {
+    title:       async (ctx) => (await post(ctx)).frontmatter.title,
+    description: async (ctx) => (await post(ctx)).frontmatter.description,
+  },
+  server: { post },
+  view: (state, { post }) => prose({ content: post.html }),
+  onViewError: () => \`<p>Post not found.</p>\`,
+}`, 'js'))}
     `,
   }),
 }

package/docs/src/pages/spec.js

@@ -34,7 +34,7 @@ export default {
           ['<code>validation</code>', '<code>object</code>', 'No', 'Declarative validation rules keyed by dot-path state keys.'],
           ['<code>constraints</code>', '<code>object</code>', 'No', 'Min/max bounds enforced after every mutation.'],
           ['<code>persist</code>', '<code>string[]</code>', 'No', 'State keys to save in <code>localStorage</code>.'],
-          ['<code>server</code>', '<code>object</code>', 'No', 'Server-side data fetcher. Result passed to <code>view</code> as second arg.'],
+          ['<code>server</code>', '<code>object</code>', 'No', 'Server-side data fetchers. Result passed to <code>view</code> as second arg. Use the <a href="/markdown"><code>md()</code> helper</a> to load <code>.md</code> files.'],
           ['<code>guard</code>', '<code>function</code>', 'No', 'Async pre-render hook. Return <code>{ redirect }</code> or <code>{ status, json }</code> to short-circuit. See <a href="/guard">Guard</a>.'],
           ['<code>store</code>', '<code>string[]</code>', 'No', 'Global store keys this page subscribes to. See <a href="/store">Global Store</a>.'],
           ['<code>methods</code>', '<code>string[]</code>', 'No', 'HTTP methods this page accepts. Default <code>[\'GET\', \'HEAD\']</code>. Add <code>\'POST\'</code> etc. to opt in.'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",
@@ -48,6 +48,10 @@
     "./testing": {
       "types": "./types/testing.d.ts",
       "default": "./src/testing/index.js"
+    },
+    "./md": {
+      "types": "./types/md.d.ts",
+      "default": "./src/md/index.js"
     }
   },
   "scripts": {

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.5.1
+0.6.1