@invisibleloop/pulse 0.20.11 → 0.20.19

package/examples/andypixel.js

@@ -1,258 +0,0 @@
-/**
- * Pulse — Andy Pixel example
- *
- * Demonstrates:
- *   - Blog article layout — editorial light-theme, prose-width reading column
- *   - Composing nav, badge, avatar, prose, input, button, footer
- *   - Custom code block component (dark pre with labelled header)
- *   - Blockquote / pullquote styling
- *   - Async newsletter subscribe action with success/error state
- *   - Author bio strip below article content
- *   - iconCode, iconCheck from icons.js
- *   - Orange accent palette with WCAG contrast fixes for badge + inline code
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/andypixel
- */
-
-import {
-  nav,
-  footer,
-  badge,
-  button,
-  avatar,
-  prose,
-  input,
-} from '../src/ui/index.js'
-
-import { iconCode, iconCheck } from '../src/ui/icons.js'
-
-// ---------------------------------------------------------------------------
-// Code block helper
-// ---------------------------------------------------------------------------
-
-function codeBlock({ filename, code }) {
-  return `
-    <div class="ap-code-block" role="figure" aria-label="Code example: ${filename}">
-      <div class="ap-code-block__header">
-        ${iconCode({ size: 14 })}
-        <span>${filename}</span>
-      </div>
-      <pre class="ap-code-block__pre"><code class="ap-code-block__code">${code}</code></pre>
-    </div>
-  `
-}
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/andypixel',
-
-  meta: {
-    title:       'JavaScript Proxies: The Hidden Superpower \u2014 Andy Pixel',
-    description: 'Discover how JavaScript Proxies let you intercept and redefine fundamental operations on objects.',
-    styles:      ['/pulse-ui.css', '/examples/andypixel.css'],
-    theme:       'light',
-  },
-
-  state: {
-    status: 'idle',
-  },
-
-  view: (state) => `
-    <main id="main-content">
-
-      ${nav({
-        logo:  'Andy Pixel',
-        links: [
-          { label: 'Blog',     href: '#blog'     },
-          { label: 'Projects', href: '#projects' },
-          { label: 'About',    href: '#about'    },
-        ],
-      })}
-
-      <article>
-
-        <header class="ap-article-header">
-          <div class="ap-reading-col">
-
-            <div class="ap-article-meta">
-              ${badge({ label: 'JavaScript' })}
-              ${badge({ label: 'Advanced' })}
-              <span class="u-text-muted u-text-sm">\u00b7 May 28, 2026 \u00b7 8 min read</span>
-            </div>
-
-            <h1 class="ap-article-title">
-              JavaScript Proxies: The Hidden Superpower You\u2019re Not Using
-            </h1>
-
-            <p class="ap-article-subtitle">
-              Intercept, transform, and observe objects at a fundamental level \u2014
-              without touching the source.
-            </p>
-
-            <div class="ap-article-author-strip">
-              ${avatar({ name: 'Andy Pixel', size: 'sm' })}
-              <div>
-                <p class="u-text-sm u-font-bold">Andy Pixel</p>
-                <p class="u-text-sm u-text-muted">Frontend Engineer</p>
-              </div>
-            </div>
-
-          </div>
-        </header>
-
-        <div class="ap-article-body ap-reading-col">
-
-          ${prose({ content: `
-            <p class="ap-article-lead">If you\u2019ve ever wanted to validate object properties automatically,
-            track changes reactively, or build a mock API client that feels real \u2014 the
-            <code>Proxy</code> object is your tool. Yet somehow it flies under the radar
-            for most developers.</p>
-
-            <p>Introduced in ES2015, <code>Proxy</code> wraps an object and lets you intercept
-            fundamental operations \u2014 property reads, writes, deletions, and more \u2014 via
-            \u201ctraps\u201d defined on a handler object.</p>
-
-            <h2>The anatomy of a Proxy</h2>
-
-            <p>A Proxy takes two arguments: the <strong>target</strong> (the object being wrapped)
-            and the <strong>handler</strong> (an object defining which operations to intercept).
-            Every interceptable operation has a corresponding trap method on the handler.</p>
-          ` })}
-
-          ${codeBlock({
-            filename: 'proxy-basics.js',
-            code: `const handler = {
-  get(target, key) {
-    return key in target
-      ? target[key]
-      : \`Property "\${key}" doesn\u2019t exist\`
-  },
-  set(target, key, value) {
-    if (typeof value !== 'number') {
-      throw new TypeError('Only numbers allowed')
-    }
-    target[key] = value
-    return true
-  }
-}
-
-const proxy = new Proxy({}, handler)
-proxy.score = 42        // \u2713 works
-proxy.score = 'oops'   // \u2717 TypeError`,
-          })}
-
-          ${prose({ content: `
-            <p>The <code>get</code> trap runs on every property access. The <code>set</code> trap
-            intercepts every assignment. Return <code>true</code> from <code>set</code> to signal
-            success \u2014 otherwise you\u2019ll get a <code>TypeError</code> in strict mode.</p>
-
-            <h2>Real-world use cases</h2>
-
-            <p>The real power isn\u2019t abstract. Proxy unlocks patterns that are otherwise
-            painful or impossible.</p>
-          ` })}
-
-          <blockquote class="ap-pullquote">
-            <p>\u201cA Proxy doesn\u2019t change what your object <em>is</em> \u2014 it changes what your
-            object <em>does</em> when the runtime touches it.\u201d</p>
-          </blockquote>
-
-          ${prose({ content: `
-            <h3>Reactive state</h3>
-            <p>Vue 3\u2019s reactivity system is built entirely on Proxy. When you access a reactive
-            property, Vue\u2019s <code>get</code> trap tracks the dependency. When you mutate it,
-            the <code>set</code> trap schedules re-renders. No syntax overhead. Just assignment.</p>
-
-            <h3>Input validation</h3>
-            <p>Instead of scattering guard clauses through your codebase, centralise validation
-            in a Proxy handler. The contract lives in one place. Every consumer benefits
-            automatically.</p>
-
-            <h3>API mocking</h3>
-            <p>Wrap a plain object in a Proxy that intercepts property access and returns async
-            functions. You get a fully-typed mock client that mirrors your real API surface \u2014
-            without any code generation.</p>
-
-            <h2>Performance considerations</h2>
-
-            <p>Proxies are not free. Every trap fires a function call. In tight loops over large
-            collections, this adds up. Benchmark before you commit. For most use cases \u2014 form
-            state, reactive stores, config validation \u2014 the overhead is completely negligible.</p>
-
-            <p>The V8 team has steadily optimised Proxy performance since ES2015. Don\u2019t avoid
-            Proxy out of dated fear \u2014 measure it first.</p>
-          ` })}
-
-        </div>
-
-      </article>
-
-      <div class="ap-author-bio-wrap">
-        <div class="ap-reading-col">
-          <div class="ap-author-bio">
-            ${avatar({ name: 'Andy Pixel', size: 'lg' })}
-            <div class="ap-author-bio__text">
-              <p class="ap-author-bio__name">Andy Pixel</p>
-              <p class="u-text-muted u-text-sm">
-                Frontend engineer obsessed with the web platform. Writing about JavaScript,
-                CSS, and creative code. Building things at the edge of what browsers can do.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      ${ state.status === 'success'
-        ? `<div class="ap-newsletter-success">
-            <p class="u-font-bold u-text-lg">${iconCheck({ size: 20, class: 'u-inline' })} You\u2019re in!</p>
-            <p class="u-text-muted u-mt-2">Next article lands in your inbox.</p>
-          </div>`
-        : `<div class="ap-newsletter-section">
-            <p class="ap-newsletter-eyebrow">Stay in the loop</p>
-            <h2 class="ap-newsletter-title">More like this, in your inbox.</h2>
-            <p class="u-text-muted">
-              Deep-dives on JavaScript, the web platform, and frontend engineering \u2014
-              whenever I publish. No noise.
-            </p>
-            ${ state.status === 'error'
-              ? `<p class="ap-newsletter-error u-mt-3">Something went wrong. Please try again.</p>`
-              : '' }
-            <form class="ap-newsletter-form" data-action="subscribe">
-              ${input({ type: 'email', name: 'email', placeholder: 'you@example.com', label: 'Email address', attrs: { autocomplete: 'email' } })}
-              ${button({ label: 'Subscribe', variant: 'primary', attrs: { type: 'submit' } })}
-            </form>
-          </div>`
-      }
-
-      ${footer({
-        logo:  'Andy Pixel',
-        links: [
-          { label: 'Blog',     href: '#blog'     },
-          { label: 'Projects', href: '#projects' },
-          { label: 'About',    href: '#about'    },
-          { label: 'RSS',      href: '#feed'     },
-        ],
-      })}
-
-    </main>
-  `,
-
-  actions: {
-    subscribe: {
-      onStart: (state, formData) => ({
-        status: 'loading',
-      }),
-      run: async (state, serverState, formData) => {
-        // Newsletter subscription would call an API here
-      },
-      onSuccess: (state) => ({ status: 'success' }),
-      onError:   (state, err) => ({
-        status: 'error',
-        errors: err?.validation ?? [{ message: err.message }],
-      }),
-    },
-  },
-}

package/examples/bookworms.css

@@ -1,422 +0,0 @@
-/*
- * bookworms.css — BookWorms independent bookshop example
- *
- * Palette: warm off-white, deep ink, oxblood accent.
- * Font:    Fraunces (display headings, loaded via Google Fonts in meta.styles)
- *
- * Split into two logical sections:
- *   1. Token overrides — hex values, palette definitions ([data-theme="light"])
- *   2. Component styles — layout, typography, custom elements (var() only)
- */
-
-/* ==========================================================================
-   1. Token overrides (hex values live here)
-   ========================================================================== */
-
-/*
- * Override --font and --font-display so --ui-font / --ui-font-display
- * cascade to Fraunces throughout components and custom elements.
- */
-:root {
-  --font:         'Fraunces', Georgia, 'Times New Roman', serif;
-  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
-}
-
-[data-theme="light"] {
-  --ui-bg:           #f6f2ec;
-  --ui-surface:      #ffffff;
-  --ui-surface-2:    #efe9df;
-  --ui-border:       #d8cfc1;
-  --ui-text:         #1a1a1a;
-  --ui-muted:        #5a5043;
-  --ui-accent:       #6b2a2a;
-  --ui-accent-hover: #4f1d1d;
-  --ui-accent-dim:   #f0e3e3;
-  --ui-accent-text:  #ffffff;
-
-  /* BookWorms-specific token */
-  --bw-bg-alt:       #efe9df;
-}
-
-/* ==========================================================================
-   2. Component styles (var() only — no hex values below this line)
-   ========================================================================== */
-
-body { line-height: 1.6; }
-
-/* --------------------------------------------------------------------------
-   Shell (centred max-width wrapper)
-   -------------------------------------------------------------------------- */
-.bw-shell {
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 0 var(--ui-space-6);
-}
-
-/* --------------------------------------------------------------------------
-   Hero
-   -------------------------------------------------------------------------- */
-.bw-hero {
-  padding: var(--ui-space-20) 0 var(--ui-space-16);
-  border-bottom: 1px solid var(--ui-border);
-  overflow: hidden;
-}
-
-.bw-hero__inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ui-space-12);
-  align-items: center;
-}
-
-.bw-hero__content {
-  min-width: 0;
-}
-
-.bw-hero__image {
-  position: relative;
-  border-radius: var(--ui-radius-lg);
-  overflow: hidden;
-  aspect-ratio: 3 / 4;
-}
-
-.bw-hero__image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-@media (max-width: 700px) {
-  .bw-hero__inner {
-    grid-template-columns: 1fr;
-  }
-  .bw-hero__image {
-    aspect-ratio: 4 / 3;
-    order: -1;
-  }
-}
-
-.bw-eyebrow {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-  margin-bottom: var(--ui-space-6);
-}
-
-.bw-hero-title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2.5rem, 7vw, 5.5rem);
-  font-weight: 500;
-  line-height: 1.02;
-  letter-spacing: -0.025em;
-  color: var(--ui-text);
-  margin-bottom: var(--ui-space-8);
-  max-width: 18ch;
-}
-
-.bw-hero-lede {
-  font-size: var(--ui-text-xl);
-  line-height: 1.55;
-  color: var(--ui-muted);
-  max-width: 60ch;
-  margin-bottom: var(--ui-space-8);
-}
-
-/* --------------------------------------------------------------------------
-   Section template
-   -------------------------------------------------------------------------- */
-.bw-section {
-  padding: var(--ui-space-16) 0;
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.bw-section-label {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-  margin-bottom: var(--ui-space-8);
-}
-
-.bw-section-title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
-  font-weight: 500;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-  color: var(--ui-text);
-  margin-bottom: var(--ui-space-10);
-  max-width: 24ch;
-}
-
-/* --------------------------------------------------------------------------
-   Staff picks grid
-   -------------------------------------------------------------------------- */
-.bw-picks {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-10);
-}
-
-@media (max-width: 800px) {
-  .bw-picks {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-8);
-  }
-}
-
-.bw-pick-cover-wrap {
-  position: relative;
-  overflow: hidden;
-  margin-bottom: var(--ui-space-6);
-  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
-}
-
-.bw-pick-cover {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 2 / 3;
-  object-fit: cover;
-  background: var(--bw-bg-alt);
-}
-
-.bw-pick-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  padding: var(--ui-space-6);
-  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
-}
-
-/* First book only — text at top */
-.bw-picks article:first-child .bw-pick-overlay {
-  justify-content: flex-start;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
-}
-
-.bw-picks article:first-child .bw-pick-overlay-title {
-  font-family: Arial, sans-serif;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-/* Second book — solid semi-transparent block behind text */
-.bw-picks article:nth-child(2) .bw-pick-overlay {
-  inset: auto 0 0 0;
-  background: rgba(0, 0, 0, 0.55);
-  padding: var(--ui-space-5) var(--ui-space-6);
-}
-
-/* Third book — Arial, no italic on author */
-.bw-picks article:nth-child(3) .bw-pick-overlay-title {
-  font-family: Arial, sans-serif;
-  font-size: 3.75rem;
-}
-
-.bw-picks article:nth-child(3) .bw-pick-overlay-author {
-  font-family: Arial, sans-serif;
-  font-style: normal;
-}
-
-.bw-pick-overlay-tag {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.7);
-  margin-bottom: var(--ui-space-2);
-}
-
-.bw-pick-overlay-title {
-  font-family: var(--ui-font);
-  font-size: var(--ui-text-2xl);
-  font-weight: 600;
-  line-height: 1.15;
-  color: #fff;
-  margin-bottom: var(--ui-space-1);
-}
-
-.bw-pick-overlay-author {
-  font-style: italic;
-  font-family: var(--ui-font);
-  font-size: var(--ui-text-sm);
-  color: rgba(255,255,255,0.7);
-}
-
-.bw-pick-meta {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ui-accent);
-  margin-bottom: var(--ui-space-3);
-}
-
-.bw-pick-title {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-2xl);
-  font-weight: 500;
-  line-height: 1.2;
-  margin-bottom: var(--ui-space-2);
-  color: var(--ui-text);
-}
-
-.bw-pick-author {
-  font-style: italic;
-  color: var(--ui-muted);
-  margin-bottom: var(--ui-space-4);
-}
-
-.bw-pick-note {
-  font-size: var(--ui-text-base);
-  line-height: 1.6;
-  color: var(--ui-text);
-}
-
-/* --------------------------------------------------------------------------
-   Pull-quote
-   -------------------------------------------------------------------------- */
-.bw-pull {
-  padding: var(--ui-space-20) 0;
-  text-align: center;
-  border-bottom: 1px solid var(--ui-border);
-}
-
-.bw-pull-quote {
-  font-family: var(--ui-font-display);
-  font-size: clamp(1.75rem, 4vw, 2.75rem);
-  font-weight: 400;
-  font-style: italic;
-  line-height: 1.25;
-  letter-spacing: -0.015em;
-  color: var(--ui-text);
-  max-width: 32ch;
-  margin: 0 auto var(--ui-space-6);
-}
-
-.bw-pull-cite {
-  font-size: var(--ui-text-sm);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-}
-
-/* --------------------------------------------------------------------------
-   Feature grid (what we do)
-   -------------------------------------------------------------------------- */
-.bw-features {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ui-space-12) var(--ui-space-16);
-}
-
-@media (max-width: 800px) {
-  .bw-features {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-10);
-  }
-}
-
-.bw-feature-title {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-xl);
-  font-weight: 500;
-  margin-bottom: var(--ui-space-2);
-  color: var(--ui-text);
-}
-
-.bw-feature-body {
-  color: var(--ui-muted);
-  line-height: 1.6;
-}
-
-/* --------------------------------------------------------------------------
-   Events list
-   -------------------------------------------------------------------------- */
-.bw-events {
-  display: flex;
-  flex-direction: column;
-}
-
-.bw-event {
-  display: grid;
-  grid-template-columns: 140px 1fr auto;
-  align-items: baseline;
-  gap: var(--ui-space-8);
-  padding: var(--ui-space-6) 0;
-  border-top: 1px solid var(--ui-border);
-}
-
-.bw-event:last-child {
-  border-bottom: 1px solid var(--ui-border);
-}
-
-@media (max-width: 700px) {
-  .bw-event {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-2);
-  }
-}
-
-.bw-event-date {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-lg);
-  color: var(--ui-accent);
-  letter-spacing: 0.02em;
-}
-
-.bw-event-title {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-xl);
-  font-weight: 500;
-  color: var(--ui-text);
-}
-
-.bw-event-host {
-  color: var(--ui-muted);
-  font-style: italic;
-}
-
-/* --------------------------------------------------------------------------
-   CTA section
-   -------------------------------------------------------------------------- */
-.bw-cta {
-  padding: var(--ui-space-24) 0;
-  text-align: center;
-}
-
-.bw-cta-title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2rem, 5vw, 3.5rem);
-  font-weight: 500;
-  line-height: 1.05;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--ui-space-6);
-  color: var(--ui-text);
-  max-width: 20ch;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.bw-cta-sub {
-  color: var(--ui-muted);
-  font-size: var(--ui-text-lg);
-  margin-bottom: var(--ui-space-8);
-  max-width: 50ch;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.bw-cta-actions {
-  display: flex;
-  gap: var(--ui-space-4);
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.bw-cta-actions--start {
-  justify-content: flex-start;
-}