@invisibleloop/pulse 0.20.5 → 0.20.7

package/docs/src/pages/home.js

@@ -1,10 +1,25 @@
-// component-free — creative override: brutalist design intent; asymmetric typography-driven layout with exposed grid structure, raw borders, and oversized type that component patterns cannot express
+// component-free — creative override: asymmetric typography-driven layout (wide headline column + narrower supporting column), a solid gold mark treatment on "page.", and a light/dark section rhythm that component patterns cannot express
 import { highlight }                                        from '../lib/highlight.js'
 import { iconZap, iconShield, iconSettings }               from '../../../src/ui/icons.js'
 import { metricsStore }  from '../lib/metrics-store.js'
-import { codeWindow }    from '../../../src/ui/code-window.js'
 import pkg from '../../../package.json' with { type: 'json' }
 
+// macOS-style code window chrome — raw HTML (creative override), replacing
+// the removed codeWindow() component. Reuses the same .ui-code-window*
+// CSS classes still defined in pulse-ui.css.
+const codeWindow = ({ content = '', filename = '', lang = '' }) => `
+  <div class="ui-code-window" role="region"${filename ? ` aria-label="${filename}"` : ''}>
+    <div class="ui-code-window-chrome" aria-hidden="true">
+      <span class="ui-code-window-dot"></span>
+      <span class="ui-code-window-dot"></span>
+      <span class="ui-code-window-dot"></span>
+      ${filename ? `<span class="ui-code-window-filename">${filename}</span>` : ''}
+      ${lang     ? `<span class="ui-code-window-lang">${lang}</span>` : ''}
+    </div>
+    <pre class="ui-code-window-pre"><code class="ui-code-window-code">${content}</code></pre>
+  </div>
+`
+
 const { version } = pkg
 
 const exampleSpec = highlight(`export default {
@@ -40,6 +55,7 @@ export default {
   meta: {
     title: 'Pulse — The spec-first web framework',
     description: 'Pulse is a server-first Node.js framework with zero runtime dependencies. One spec object per page: server data, state, mutations, and view in plain JS. Streaming SSR, security headers, and production caching are enforced by the architecture.',
+    theme: 'light',
     styles: ['https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap', '/pulse-ui.css', '/theme.css', '/docs.css', '/home-brut.css'],
     schema: {
       '@context': 'https://schema.org',
@@ -64,7 +80,7 @@ export default {
       <nav class="brut-nav" aria-label="Site navigation">
         <a href="/" class="brut-nav-logo" aria-label="Pulse home">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <path d="M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z" fill="#f0e642" stroke="#f0e642" stroke-width="1" stroke-linejoin="round"/>
+            <path d="M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
           </svg>
           <span>PULSE</span>
         </a>
@@ -81,20 +97,13 @@ export default {
           <div class="brut-hero-tag">v${version} — EARLY ACCESS</div>
           <h1 class="brut-hero-h1">
             <span class="brut-hero-kicker">with Pulse</span>
-            <span class="brut-hero-line1">YOU CAN'T</span>
-            <span class="brut-hero-line2" role="img" aria-label="SHIP">
-              <svg class="brut-hero-svg" aria-hidden="true">
-                <text class="brut-hero-svg-text" y="0.82em" dominant-baseline="auto"
-                  font-family="Inter, system-ui, sans-serif" font-weight="900"
-                  fill="var(--brut-yellow)" stroke="var(--brut-ink)" stroke-width="0.055em" paint-order="stroke fill">SHIP</text>
-              </svg>
-            </span>
-            <span class="brut-hero-line3">A BAD PAGE.</span>
+            <span class="brut-hero-line1">The spec is</span>
+            <span class="brut-hero-line2">the <span class="brut-hero-mark">page.</span></span>
           </h1>
           <div class="brut-hero-aside">
             <p class="brut-hero-tag-inline">ONE SPEC. ONE WAY TO BUILD.</p>
-            <p class="brut-hero-desc">A server-first Node.js framework. Streaming SSR, security headers, and production caching are enforced by the architecture, not left to configuration.</p>
-            <p class="brut-hero-sub"><strong>So constrained that doing it wrong isn't an option. Whether you write it or an AI does.</strong></p>
+            <p class="brut-hero-desc">One plain JS object — server data, state, mutations, and view. No split files, no hidden conventions.</p>
+            <p class="brut-hero-sub"><strong>So constrained that doing it wrong isn't an option.<br>Whether you write it or an AI&nbsp;does.</strong></p>
             <div class="brut-hero-ctas">
               <a href="/getting-started" class="brut-btn-primary">Get Started</a>
               <a href="/spec" class="brut-btn-ghost">Read the Spec</a>
@@ -192,7 +201,7 @@ export default {
                   <th></th>
                   <th class="brut-th-pulse">
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true" style="vertical-align:middle;margin-right:.3rem">
-                      <path d="M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z" fill="#f0e642" stroke="#f0e642" stroke-width="1" stroke-linejoin="round"/>
+                      <path d="M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
                     </svg>PULSE
                   </th>
                   <th>Next.js / Remix</th>

package/docs/src/pages/how-it-works.js

@@ -1,74 +1,81 @@
 import { renderLayout, h1, lead, section, callout } from '../lib/layout.js'
 import { prevNext } from '../lib/nav.js'
-import { timeline, card } from '../../../src/ui/index.js'
+import { card } from '../../../src/ui/index.js'
 
 const { prev, next } = prevNext('/how-it-works')
 
-const agentFlow = timeline({
-  items: [
+// Numbered vertical flow diagram — raw HTML (creative override), replacing
+// the removed timeline()/timelineItem() components. Styled via .hiw-flow*
+// classes in docs.css.
+const flowStep = ({ dot, label, content }) => `
+  <li class="hiw-flow-item">
+    <div class="hiw-flow-side">
+      <div class="hiw-flow-connector hiw-flow-connector--before"></div>
+      <div class="hiw-flow-dot" aria-hidden="true">${dot}</div>
+      <div class="hiw-flow-connector hiw-flow-connector--after"></div>
+    </div>
+    <div class="hiw-flow-main">
+      <span class="hiw-flow-label">${label}</span>
+      <div class="hiw-flow-body">${content}</div>
+    </div>
+  </li>
+`
+
+const agentFlow = `<ol class="hiw-flow">${[
     {
       dot: '1',
-      dotColor: 'accent',
       label: 'Understand',
       content: card({ content: `<strong style="color:var(--ui-text)">Read the guide and inspect the project</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent fetches <code>pulse://workflow</code> and the relevant <code>pulse://guide/*</code> sections, then calls <code>pulse_list_structure</code> to see every existing page, component, and store. Ambiguities are surfaced before any files are touched.</p>` }),
     },
     {
       dot: '2',
-      dotColor: 'accent',
       label: 'Plan',
       content: card({ content: `<strong style="color:var(--ui-text)">Present a plan — wait for confirmation</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Before writing anything the agent describes what it intends to build: the route, state shape, server data, interactions, and any components or integrations it will use. The task does not proceed until you confirm.</p>` }),
     },
     {
       dot: '3',
-      dotColor: 'accent',
       label: 'Build',
       content: card({ content: `<strong style="color:var(--ui-text)">Write the spec and any supporting files</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The spec is written as a plain JS object: route, state, server data, mutations, actions, view. The guide constrains every decision — where state lives, how validation is wired, how the view is structured.</p>` }),
     },
     {
       dot: '4',
-      dotColor: 'accent',
       label: 'Validate',
       content: card({ content: `<strong style="color:var(--ui-text)">Call <code>pulse_validate</code> — fix all errors and warnings</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The spec is checked against the Pulse schema. Every error and warning is resolved before moving on — missing hydrate, heading order violations, missing escaping, structural mistakes. A clean output is the gate to the next phase.</p>` }),
     },
     {
       dot: '5',
-      dotColor: 'accent',
       label: 'Browser',
       content: card({ content: `<strong style="color:var(--ui-text)">Screenshot + Lighthouse — desktop and mobile</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent navigates to the route, takes a screenshot to confirm the rendered output, then runs Lighthouse on both desktop and mobile. Accessibility, Best Practices, and SEO must all be 100. Any failure is fixed and re-verified before continuing.</p>` }),
     },
     {
       dot: '6',
-      dotColor: 'accent',
       label: 'Tests',
       content: card({ content: `<strong style="color:var(--ui-text)">Write tests, run them, fix failures</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Unit tests cover any pure logic extracted from the spec. View tests use <code>renderSync</code> / <code>render</code> to assert HTML output. All tests must pass. When fixing a bug, a failing test is written first to pin the behaviour.</p>` }),
     },
     {
       dot: '7',
-      dotColor: 'accent',
       label: 'Review',
       content: card({ content: `<strong style="color:var(--ui-text)">Call <code>pulse_review</code> — only after phases 4–6 all pass</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">The agent switches into reviewer mode — reading the source and rendered output against the full spec checklist. Accessibility, empty states, error handling, component usage, and security are all checked. The review agent is always last.</p>` }),
     },
     {
       dot: '8',
-      dotColor: 'accent',
       label: 'Fix and re-verify',
       content: card({ content: `<strong style="color:var(--ui-text)">Fix every review issue — re-run affected gates</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Every issue raised in review is resolved. Validate, Lighthouse, and tests are re-run to confirm all gates still pass. The task is complete only when every phase clears cleanly.</p>` }),
     },
     {
       dot: '✓',
-      dotColor: 'success',
       label: 'Done',
       content: card({ content: `<strong style="color:var(--ui-text)">The spec is the source of truth</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Validate clean. Lighthouse 100. Tests passing. Review clear. When all four gates pass, the page is done.</p>` }),
     },
-  ],
-})
+  ].map(flowStep).join('')}</ol>`
 
 export default {
   route: '/how-it-works',
   meta: {
+    theme:       'light',
     title: 'How It Works — Pulse Docs',
     description: 'How the Pulse MCP server gives an AI agent the knowledge and tools to build Pulse apps correctly.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/how-it-works',

package/docs/src/pages/hydration.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/hydration')
 export default {
   route: '/hydration',
   meta: {
+    theme:       'light',
     title: 'Hydration — Pulse Docs',
     description: 'How Pulse hydrates server-rendered HTML on the client — automatic hydration, mount(), and production bundles.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/images.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/images')
 export default {
   route: '/images',
   meta: {
+    theme:       'light',
     title: 'Images — Pulse Docs',
     description: 'The img() and picture() helpers for optimised, CLS-free image markup.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/images',

package/docs/src/pages/markdown.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/markdown')
 export default {
   route: '/markdown',
   meta: {
+    theme:       'light',
     title: 'Markdown — Pulse Docs',
     description: 'Render markdown files as pages with syntax-highlighted code blocks, frontmatter, and the prose component.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/markdown',

package/docs/src/pages/meta.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/meta')
 export default {
   route: '/meta',
   meta: {
+    theme:       'light',
     title: 'Metadata & SEO — Pulse Docs',
     description: 'How to configure page metadata, Open Graph tags, and structured data in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/meta',

package/docs/src/pages/mutations.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/mutations')
 export default {
   route: '/mutations',
   meta: {
+    theme:       'light',
     title: 'Mutations — Pulse Docs',
     description: 'Synchronous state changes in Pulse — how to declare and trigger mutations.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/navigation.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/navigation')
 export default {
   route: '/navigation',
   meta: {
+    theme:       'light',
     title: 'Navigation — Pulse Docs',
     description: 'Client-side navigation in Pulse — how link interception, JSON responses, and spec re-mounting work.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/navigation',

package/docs/src/pages/performance.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/performance')
 export default {
   route: '/performance',
   meta: {
+    theme:       'light',
     title: 'Performance — Pulse Docs',
     description: 'Performance targets, techniques, and built-in optimisations in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/performance',

package/docs/src/pages/persist.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/persist')
 export default {
   route: '/persist',
   meta: {
+    theme:       'light',
     title: 'Persist — Pulse Docs',
     description: 'Persist client state across page refreshes using localStorage.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/project-structure.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/project-structure')
 export default {
   route: '/project-structure',
   meta: {
+    theme:       'light',
     title: 'Project Structure — Pulse Docs',
     description: 'Recommended directory layout for a Pulse application.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/project-structure',

package/docs/src/pages/prompt-examples.js

@@ -25,9 +25,10 @@ function promptGroup(title, cards) {
 export default {
   route: '/prompt-examples',
   meta: {
+    theme:       'light',
     title: 'Prompt Examples — Pulse Docs',
     description: 'Real prompts for building Pulse pages with your AI agent — from creating pages to authentication, performance audits, and integrations.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/prompt-examples',

package/docs/src/pages/raw-responses.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/raw-responses')
 export default {
   route: '/raw-responses',
   meta: {
+    theme:       'light',
     title: 'Raw Responses — Pulse Docs',
     description: 'Return non-HTML responses from Pulse specs — RSS, XML, JSON, and other content types.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/raw-responses',

package/docs/src/pages/routing.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/routing')
 export default {
   route: '/routing',
   meta: {
+    theme:       'light',
     title: 'Routing — Pulse Docs',
     description: 'How Pulse routes requests to page specs — static and dynamic routes, params, and conventions.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/routing',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/server-api')
 export default {
   route: '/server-api',
   meta: {
+    theme:       'light',
     title: 'Server API — Pulse Docs',
     description: 'Complete reference for createServer — all options, hooks, and response behaviour.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/server-api',

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

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/server-data')
 export default {
   route: '/server-data',
   meta: {
+    theme:       'light',
     title: 'Server Data — Pulse Docs',
     description: 'Fetch, transform, and combine data on the server before rendering — external APIs, multiple fetchers, parallel requests.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/server-data',

package/docs/src/pages/slash-commands.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/slash-commands')
 export default {
   route: '/slash-commands',
   meta: {
+    theme:       'light',
     title: 'Slash Commands — Pulse Docs',
     description: 'The built-in slash commands available in the Pulse AI agent session.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/slash-commands',

package/docs/src/pages/spec.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/spec')
 export default {
   route: '/spec',
   meta: {
+    theme:       'light',
     title: 'Spec Reference — Pulse Docs',
     description: 'Complete reference for every field in a Pulse page spec.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/state.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/state')
 export default {
   route: '/state',
   meta: {
+    theme:       'light',
     title: 'State — Pulse Docs',
     description: 'How client state is declared, initialised, and used in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/store.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/store')
 export default {
   route: '/store',
   meta: {
+    theme:       'light',
     title: 'Global Store — Pulse Docs',
     description: 'Share server-fetched data across pages with a global store in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/streaming.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/streaming')
 export default {
   route: '/streaming',
   meta: {
+    theme:       'light',
     title: 'Streaming SSR — Pulse Docs',
     description: 'How streaming server-side rendering works in Pulse — shell, deferred segments, and when to use it.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/streaming',

package/docs/src/pages/stripe.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/stripe')
 export default {
   route: '/stripe',
   meta: {
+    theme:       'light',
     title: 'Payments (Stripe) — Pulse Docs',
     description: 'Integrating Stripe Checkout and webhooks with Pulse using actions, raw response specs, and server data fetchers.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/supabase.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/supabase')
 export default {
   route: '/supabase',
   meta: {
+    theme:       'light',
     title: 'Supabase — Pulse Docs',
     description: 'Integrate Supabase database queries, authentication, and file storage with Pulse server fetchers, actions, and guard.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({