@invisibleloop/pulse 0.14.2 → 0.15.1

package/.claude/commands/verify.md

@@ -32,15 +32,21 @@ Use `mcp__chrome-devtools__navigate_page` to load the page route, then `mcp__chr
 
 ### 6. Lighthouse — desktop
 
-Run `mcp__chrome-devtools__lighthouse_audit` on the route with `{ "strategy": "desktop" }`.
+**Pre-flight (required before every Lighthouse run):**
+1. Call `pulse_build` to produce a production build and start the production server on port 3001.
+2. Call `navigate_page` with `url: "http://localhost:3001/"` so the browser is on the production server.
 
-**Pass bar: Performance, Accessibility, Best Practices, and SEO must all be 100.** Report the actual scores. If any score is below 100, identify the failing audit(s), fix the issue, and restart from step 3.
+Then run `mcp__chrome-devtools__lighthouse_audit` with `{ "device": "desktop" }`.
+
+**Pass bar: Accessibility, Best Practices, and SEO must all be 100.** Performance is measured and reported but is not a hard requirement (it varies with machine load). Report the actual scores. If Accessibility, Best Practices, or SEO is below 100, identify the failing audit(s), fix the issue, and restart from step 3.
 
 ### 7. Lighthouse — mobile
 
-Run `mcp__chrome-devtools__lighthouse_audit` on the same route with `{ "strategy": "mobile" }`.
+The browser should still be on `http://localhost:3001/` from step 6. Run `mcp__chrome-devtools__lighthouse_audit` with `{ "device": "mobile" }`.
+
+**Same pass bar: Accessibility, Best Practices, and SEO must all be 100.** Fix any failures and restart from step 3.
 
-**Same pass bar: all four categories must be 100.** Report the actual scores. If any score is below 100, fix and restart from step 3.
+After both Lighthouse runs pass, call `pulse_restart_server` to return to the dev server.
 
 ### 8. Performance
 

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

@@ -36,13 +36,15 @@ Before finishing any spec, verify every point below. Fix anything that fails.
   - Navigation → `nav({ logo, links, actions })`
   - Footers → `footer({ logo, links, columns, legal, ... })`
 
-- **Creative override — raw HTML throughout is permitted** when the design intent genuinely calls for it: a highly custom visual identity, an asymmetric or typographically-driven layout, a brutalist/editorial/retro/neon/paper vibe where components would constrain the expression. This is a deliberate design decision, not a shortcut. When taking this path:
-  - State it explicitly in the build brief: *"Building component-free — raw HTML throughout for creative control."*
+- **Creative override — raw HTML throughout is permitted** when the design intent genuinely calls for it: a highly custom visual identity, an asymmetric or typographically-driven layout, a brutalist/editorial/retro/neon/paper vibe where components would constrain the expression, or a layout that requires features a component simply doesn't support (e.g. full-viewport height, custom gradient glows, clamp-scaled display type). This is a deliberate design decision, not a shortcut. When taking this path:
+  - **Declare it in a comment at the top of the spec** so the reviewer recognises it: `// component-free — creative override: <reason>`. This is the signal the review tool reads.
   - Functional atoms (`button`, `input`, `badge`, `modal`) should still come from components unless there is a specific design reason not to.
   - `/pulse-ui.css` is always required — it provides the token system your custom CSS will use.
   - The quality gate replaces the component checklist: **100/100/100/100 Lighthouse on both desktop and mobile is the pass bar.** A component-free page that passes every audit is correct. A component-heavy page that fails accessibility is not.
 
-- When reviewing a spec built under creative override, do not flag raw section HTML as a violation — check the Lighthouse results instead.
+- **When reviewing**: before flagging a class name like `.hero` as a violation, first ask whether the `hero()` component could actually reproduce the layout. If the answer is no, it is a creative override — check Lighthouse instead of refactoring. Do not flatten a good custom layout into a generic component just to clear a pattern-match.
+
+- **The review tool auto-detects creative override** from the spec comment. When detected, component pattern checks are shown as advisory (`⚡`) not as failures, and the Lighthouse gate is the stated pass bar.
 
 - **Never write App Store or Google Play download buttons by hand.** Always use `appBadge({ store: 'apple', href })` and `appBadge({ store: 'google', href })`. Raw `<a>` tags with badge images are incorrect — `appBadge` renders the correct accessible, styled badge for each store.
 

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

@@ -1 +1 @@
-0.14.1
+0.14.2

package/docs/public/docs.css

@@ -1406,6 +1406,242 @@ a:hover {
   flex-shrink: 0;
 }
 
+/* ─── Sidebar search ─────────────────────────────────────────────────────────── */
+.sidebar-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.sidebar-search-icon {
+  color: var(--muted-2);
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.sidebar-search {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: var(--font);
+  font-size: 0.82rem;
+  color: var(--text);
+  padding: 0;
+  line-height: 1.4;
+}
+
+.sidebar-search::placeholder {
+  color: var(--muted-2);
+}
+
+.sidebar-search::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.sidebar-search-full {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--muted-2);
+  cursor: pointer;
+  transition: color 0.1s, background 0.1s;
+}
+
+.sidebar-search-full:hover {
+  color: var(--text);
+  background: var(--border);
+}
+
+.sidebar-no-results {
+  padding: 0.75rem 1.25rem;
+  font-size: 0.8rem;
+  color: var(--muted-2);
+}
+
+/* ─── Search overlay ─────────────────────────────────────────────────────────── */
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+}
+
+.search-overlay[hidden] {
+  display: none;
+}
+
+.search-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(3px);
+}
+
+.search-overlay-panel {
+  position: relative;
+  width: min(640px, calc(100vw - 2rem));
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 70vh;
+}
+
+.search-overlay-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.search-overlay-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex: 1;
+  color: var(--muted-2);
+}
+
+.search-overlay-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: var(--font);
+  font-size: 1rem;
+  color: var(--text);
+  padding: 0;
+  line-height: 1.4;
+}
+
+.search-overlay-input::placeholder {
+  color: var(--muted-2);
+}
+
+.search-overlay-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.search-overlay-close {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  color: var(--muted-2);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.search-overlay-results {
+  overflow-y: auto;
+  flex: 1;
+  padding: 0.5rem;
+}
+
+.search-result {
+  display: block;
+  padding: 0.65rem 0.75rem;
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--text);
+  transition: background 0.1s;
+}
+
+.search-result:hover,
+.search-result--selected {
+  background: var(--surface-2);
+}
+
+.search-result-meta {
+  margin-bottom: 0.15rem;
+}
+
+.search-result-section {
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+}
+
+.search-result-title {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.4;
+}
+
+.search-result-title mark,
+.search-result-snip mark {
+  background: rgba(201, 184, 0, 0.3);
+  color: inherit;
+  border-radius: 2px;
+}
+
+.search-result-snip {
+  font-size: 0.78rem;
+  color: var(--muted-2);
+  margin-top: 0.25rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.search-overlay-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--muted-2);
+  font-size: 0.9rem;
+}
+
+.search-overlay-footer {
+  display: flex;
+  gap: 1.25rem;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  color: var(--muted-2);
+}
+
+.search-overlay-footer kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0.1rem 0.35rem;
+  color: var(--muted-2);
+  margin-right: 0.2rem;
+}
+
 .logo-link {
   display: flex;
   align-items: center;