@invisibleloop/pulse 0.20.58 → 0.20.59

package/package.json

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

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.20.58
+0.20.59

package/public/pulse-ui.css

@@ -3026,3 +3026,9 @@ fieldset[disabled] .ui-rating-stars .ui-rating-star:hover ~ .ui-rating-star { co
   line-height: 0;
 }
 
+/* ─── Framework skip link ───────────────────────────────────────────────────
+ * Injected by the server's buffered render path (404s, POST re-renders, stream: false).
+ * Hidden until keyboard focus, like the one in pulse.css — pages that load only
+ * pulse-ui.css must not see it as a plain link at the top of the page. */
+.pulse-skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
+.pulse-skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff;font-size:1rem;font-weight:600;border-radius:4px;text-decoration:none;z-index:9999;outline:3px solid #fff;outline-offset:2px}

package/scripts/css-purge.js

@@ -9,8 +9,13 @@
 // CSS class extractor
 // ---------------------------------------------------------------------------
 
+// Classes the framework itself writes into the document (src/runtime/ssr.js wrapDocument),
+// outside any page's view, so nothing the build scans ever contains them. Always kept:
+// without this a built app loses the rules that hide the injected skip link (#161).
+export const FRAMEWORK_INJECTED_CLASSES = ['pulse-skip-link']
+
 export function extractUsedClasses(htmlContents, jsContents, safelist = []) {
-  const used = new Set()
+  const used = new Set(FRAMEWORK_INJECTED_CLASSES)
 
   // Extract from class="..." in rendered HTML (no template expressions to worry about)
   for (const content of htmlContents) {

package/src/cli/scaffold.archive.js

@@ -605,7 +605,7 @@ Rules:
 Every page must be fully navigable by keyboard alone.
 
 **Structure**
-- Wrap page content in \`<main id="main-content">\` — the skip link injected by the framework targets this id
+- Wrap page content in \`<main id="main-content">\` — a skip link targets this id (add your own to the layout; the framework only injects a fallback on 404s and form re-renders)
 - Use semantic elements: \`<nav>\`, \`<main>\`, \`<header>\`, \`<footer>\`, \`<section>\`, \`<article>\`, \`<aside>\`
 - One \`<h1>\` per page — the primary heading that describes the current page
 
@@ -896,7 +896,7 @@ Threshold merge order: **global config → environment override → per-route ov
 - **Redirect loops** — if \`/dashboard\` guards redirect to \`/login\`, and \`/login\` guards redirect authenticated users to \`/dashboard\`, test both directions to confirm there is no loop.
 
 ### Performance & Lighthouse
-- **Missing \`<main id="main-content">\`** — the framework injects a skip link targeting \`#main-content\` on every page. A missing element breaks the skip link and fails Lighthouse Accessibility.
+- **Missing \`<main id="main-content">\`** — skip links target \`#main-content\`. A missing element breaks the skip link and fails Lighthouse Accessibility.
 - **Multiple \`<h1>\` elements** — one \`<h1>\` per page. Multiple at the same level fail Lighthouse Accessibility.
 - **Images without \`width\` and \`height\`** — omitting dimensions prevents the browser from reserving space, causing layout shift and a non-zero CLS. Always provide both.
 - **Colour contrast** — \`#888\` on \`#111\` is the practical minimum for muted text that passes WCAG AA. Lighter greys will fail. Check new colour tokens before committing.
@@ -909,7 +909,7 @@ Threshold merge order: **global config → environment override → per-route ov
 ## Rules the agent must follow
 
 - **Never set \`hydrate\`** — the framework sets it automatically.
-- **Always wrap page content in \`<main id="main-content">\`** — the framework injects a skip link targeting this id on every page.
+- **Always wrap page content in \`<main id="main-content">\`** — skip links target this id.
 - **Never use \`data-event\` on text inputs** to mirror value into state. It destroys focus on every keystroke. Use uncontrolled inputs and read values from \`FormData\` in \`action.onStart\` instead. For client-side filtering/search, render all items in the HTML and use an inline \`<script>\` to show/hide elements — no state or re-render needed.
 - **Never add \`<script>\` tags manually** — hydration is handled by the framework.
 - **Never add external npm packages** for client-side behaviour — express it in the spec.

package/src/runtime/ssr.js

@@ -343,6 +343,10 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
   const meta  = spec.meta  || {}
   const title = meta.title || 'Pulse'
 
+  // The fallback skip link is only for pages that have none: a page (or its layout) that
+  // already links to #main-content supplies its own, and two would be a redundant tab stop.
+  const ownSkipLink = /href=["']#main-content["']/.test(content)
+
   const bodyAttr = [
     meta.theme ? `data-theme="${esc(meta.theme)}"` : '',
     meta.vibe  ? `data-vibe="${esc(meta.vibe)}"` : '',
@@ -419,7 +423,7 @@ export function wrapDocument({ content, spec = {}, serverState = {}, storeState
   ${schemaScript}
 </head>
 <body${bodyAttr}>
-  <a href="#main-content" class="pulse-skip-link">Skip to main content</a>
+  ${ownSkipLink ? '' : '<a href="#main-content" class="pulse-skip-link">Skip to main content</a>'}
   <div id="pulse-root">
     ${content}
   </div>