@invisibleloop/pulse 0.20.10 → 0.20.19

package/docs/src/pages/templates/sparkys.js

@@ -1,264 +0,0 @@
-/**
- * Template: Sparkys — Local Trades Business
- *
- * A sharp, trustworthy landing page for a local electrical contractor.
- * Navy + amber palette. Hero with split stats panel, services grid,
- * trust signals, testimonial, and contact strip.
- *
- * Vibe: corporate  Theme: light  Palette: navy / amber
- *
- * component-free — creative override: the top utility strip, trust list, and
- * contact strip are small raw-HTML sections (icon+label pairs / a two-column
- * bar) that replaced the now-removed topStrip/trustList/contactRow components.
- * Services use the kept card() component instead of the removed serviceCard().
- */
-
-import {
-  nav, button, footer, card, grid,
-  iconZap, iconShield, iconCheck, iconPhone, iconMail, iconHome, iconClock, iconSettings, iconAlertTriangle, iconStar,
-} from '../../../../src/ui/index.js'
-import { asset } from '../../lib/layout.js'
-
-const PHONE      = '01623 555 014'
-const PHONE_HREF = 'tel:+441623555014'
-const EMAIL      = 'hello@sparkys-electrical.co.uk'
-
-const services = [
-  {
-    icon:  iconHome({ size: 22 }),
-    title: 'Domestic rewiring & repairs',
-    body:  'Full or partial rewires, consumer unit upgrades, sockets, lighting, fault finding — done cleanly and on time.',
-  },
-  {
-    icon:  iconZap({ size: 22 }),
-    title: 'EV charger installation',
-    body:  'OZEV-approved installers for home and workplace chargers. We handle the survey, install and DNO paperwork.',
-  },
-  {
-    icon:  iconSettings({ size: 22 }),
-    title: 'Commercial fit-outs',
-    body:  'Offices, retail and light industrial — design, installation and certification under one roof.',
-  },
-  {
-    icon:  iconShield({ size: 22 }),
-    title: 'EICR & landlord certificates',
-    body:  'Mandatory five-year electrical inspections for rental properties. Same-day digital report.',
-  },
-  {
-    icon:  iconAlertTriangle({ size: 22 }),
-    title: 'Emergency 24/7 call-out',
-    body:  'Power down? Burning smell? Tripping breakers? An engineer on the road within 60 minutes, day or night.',
-  },
-  {
-    icon:  iconCheck({ size: 22 }),
-    title: 'Inspections & testing',
-    body:  'Periodic testing, PAT testing, and remedial works to bring older installations up to current regulations.',
-  },
-]
-
-const why = [
-  {
-    title: 'Part P registered',
-    body:  'NICEIC Approved Contractor. Every job notified to building control — paperwork sorted on your behalf.',
-  },
-  {
-    title: 'Fixed, transparent pricing',
-    body:  'Written quotes before we start. No "while we\'re here" surprises and no callout fee on quoted work.',
-  },
-  {
-    title: '£10m public liability',
-    body:  'Fully insured for domestic and commercial work, with a 12-month workmanship guarantee on every job.',
-  },
-]
-
-const service = (s) => card({
-  content: `
-    <div class="ui-service-card-icon" aria-hidden="true">${s.icon}</div>
-    <h3 class="ui-service-card-title">${s.title}</h3>
-    <p class="ui-service-card-desc">${s.body}</p>
-  `,
-  class: 'service-card',
-})
-
-const whyItem = (w) => `
-  <div class="why__item">
-    <h3 class="why__title">${w.title}</h3>
-    <p class="why__body">${w.body}</p>
-  </div>
-`
-
-export default {
-  route: '/templates/sparkys',
-
-  meta: {
-    title:       'Sparkys — Trusted Electricians in Ashfield',
-    description: 'Sparkys are Part P registered electricians serving homes, landlords and businesses across Ashfield. Rewiring, EV chargers, EICRs and 24/7 emergency call-out.',
-    theme:       'light',
-    styles:      ['/pulse-ui.css', '/sparkys.css'],
-    schema: {
-      '@context': 'https://schema.org',
-      '@type':    'Electrician',
-      name:       'Sparkys',
-      telephone:  '+44 1623 555014',
-      email:      EMAIL,
-      areaServed: 'Ashfield, Nottinghamshire',
-      address: {
-        '@type':         'PostalAddress',
-        streetAddress:   '14 Forge Lane',
-        addressLocality: 'Sutton-in-Ashfield',
-        postalCode:      'NG17 4FX',
-        addressCountry:  'GB',
-      },
-    },
-  },
-
-  view: () => `
-    <div class="top-strip">
-      <div class="top-strip__left">Mon–Sat 7am–7pm · 24/7 emergency line</div>
-      <div class="top-strip__right"><a href="${PHONE_HREF}">Call ${PHONE}</a></div>
-    </div>
-
-    ${nav({
-      logo:     '<strong class="brand-mark">Sparkys</strong>',
-      logoHref: '/',
-      links: [
-        { label: 'Services',    href: '#services' },
-        { label: 'Why Sparkys', href: '#why' },
-        { label: 'Reviews',     href: '#reviews' },
-        { label: 'Contact',     href: '#contact' },
-      ],
-      action: button({
-        label:   'Get a free quote',
-        href:    '#contact',
-        variant: 'primary',
-        size:    'sm',
-      }),
-      sticky: true,
-    })}
-
-    <main id="main-content">
-      <section class="hero-split" aria-labelledby="hero-title">
-        <div class="hero-split__text">
-          <p class="hero-split__eyebrow">Ashfield · Mansfield · Kirkby</p>
-          <h1 id="hero-title" class="hero-split__title">Ashfield's trusted electricians, since 2008.</h1>
-          <p class="hero-split__subtitle">From a dodgy socket to a full commercial fit-out — Sparkys are the local team homeowners, landlords and businesses call when the job has to be done properly.</p>
-          <div class="hero-split__actions">
-            ${button({
-              label:   'Get a free quote',
-              href:    '#contact',
-              variant: 'primary',
-              size:    'lg',
-            })}
-            ${button({
-              label:   `Call ${PHONE}`,
-              href:    PHONE_HREF,
-              variant: 'secondary',
-              size:    'lg',
-              icon:    iconPhone({ size: 16 }),
-            })}
-          </div>
-          <div class="hero-split__trust">
-            <ul class="trust-inline">
-              ${['Part P registered', 'NICEIC approved', '£10m insured'].map(t => `
-                <li class="trust-inline__item">
-                  <span class="trust-inline__icon" aria-hidden="true">${iconCheck({ size: 14 })}</span>
-                  <span>${t}</span>
-                </li>
-              `).join('')}
-            </ul>
-          </div>
-        </div>
-        <aside class="hero-split__panel" aria-label="Sparkys at a glance">
-          <p class="hero-split__panel-title">Sparkys at a glance</p>
-          <dl class="hero-stats">
-            <div>
-              <dd class="hero-stat__value">24/7</dd>
-              <dt class="hero-stat__label">Emergency call-out</dt>
-            </div>
-            <div>
-              <dd class="hero-stat__value">1,200+</dd>
-              <dt class="hero-stat__label">Jobs completed</dt>
-            </div>
-            <div>
-              <dd class="hero-stat__value"><span class="hero-stat__rating">4.9${iconStar({ size: 22 })}</span></dd>
-              <dt class="hero-stat__label">Average review</dt>
-            </div>
-            <div>
-              <dd class="hero-stat__value">16 yrs</dd>
-              <dt class="hero-stat__label">Serving Ashfield</dt>
-            </div>
-          </dl>
-        </aside>
-      </section>
-
-      <section id="services" class="section">
-        <div class="section__inner">
-          <header class="section__head">
-            <p class="section__eyebrow">What we do</p>
-            <h2 class="section__title">Domestic, commercial and everything in between.</h2>
-            <p class="section__subtitle">One local team, certified for every job — so you don't end up juggling three different trades.</p>
-          </header>
-          ${grid({ cols: 3, gap: 'md', content: services.map(service).join(''), class: 'services' })}
-        </div>
-      </section>
-
-      <section id="why" class="section section--alt">
-        <div class="section__inner">
-          <header class="section__head">
-            <p class="section__eyebrow">Why Sparkys</p>
-            <h2 class="section__title">Certified, insured, and on time.</h2>
-            <p class="section__subtitle">The boring stuff that actually matters when an electrician is in your home or business.</p>
-          </header>
-          <div class="why">
-            ${why.map(whyItem).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section id="reviews" class="section">
-        <div class="section__inner">
-          <figure class="quote">
-            <div class="quote__mark" aria-hidden="true">"</div>
-            <blockquote class="quote__text">Sparkys rewired our 1930s house top to bottom in five days, on the price they quoted, and tidied up after themselves every evening. Genuinely couldn't fault them.</blockquote>
-            <figcaption class="quote__cite">Helen M. · Sutton-in-Ashfield</figcaption>
-          </figure>
-        </div>
-      </section>
-
-      <section id="contact" class="contact-strip" aria-labelledby="contact-title">
-        <div class="contact-strip__inner">
-          <div>
-            <h2 id="contact-title" class="contact-strip__title">Need a sparky? Let's talk.</h2>
-            <p class="contact-strip__lead">Free, no-obligation quotes for homes and businesses across Ashfield, Mansfield and the wider NG postcodes.</p>
-          </div>
-          <div class="contact-strip__details">
-            <ul class="contact-inline">
-              ${[
-                { icon: iconPhone({ size: 18 }), label: PHONE,    href: PHONE_HREF },
-                { icon: iconMail({ size: 18 }),  label: EMAIL,    href: `mailto:${EMAIL}` },
-                { icon: iconClock({ size: 18 }), label: 'Mon–Sat 7am–7pm · 24/7 emergencies' },
-              ].map(({ icon, label, href }) => `
-                <li class="contact-inline__item">
-                  <span class="contact-inline__icon" aria-hidden="true">${icon}</span>
-                  ${href ? `<a href="${href}">${label}</a>` : `<span>${label}</span>`}
-                </li>
-              `).join('')}
-            </ul>
-          </div>
-        </div>
-      </section>
-    </main>
-
-    ${footer({
-      logo:     '<span class="site-footer__brand">Sparkys</span>',
-      logoHref: '/',
-      links: [
-        { label: 'Services', href: '#services' },
-        { label: 'Reviews',  href: '#reviews' },
-        { label: 'Contact',  href: '#contact' },
-      ],
-      legal: '© 2026 Sparkys Electrical Ltd · NICEIC 60123456 · Reg. in England 09876543',
-    })}
-    <script src="${asset('/pulse-ui.js')}" defer></script>
-  `,
-}

package/docs/src/pages/templates/suzukibento.js

@@ -1,200 +0,0 @@
-/**
- * Pulse — Susuki Bento artist portfolio example
- *
- * Demonstrates:
- *   - Dark-by-default brutalist gallery palette (near-black, bone, vermilion)
- *   - Zero-radius design language (--radius: 0px overrides Pulse defaults)
- *   - Asymmetric CSS grid works gallery (12-col with mixed span sizes)
- *   - Pure vanilla HTML throughout — no Pulse UI components used.
- *     Shows that Pulse views are just template literals; you can write
- *     raw HTML for fully custom layouts without any component overhead.
- *   - Custom sticky nav and simple footer hand-rolled in the view
- *   - HTML-escaped data with a utility function (safe pattern for user data)
- *   - Hover effect with CSS filter: grayscale + scale on artwork images
- *   - Exhibition table using CSS grid (year / title / venue / tag columns)
- *   - Press list with CSS ::before dot separator
- *   - Two-column contact grid
- *   - System font stack only (Inter → system-ui fallback) — no HTTP requests
- *   - picsum.photos for artwork images (placeholder seeded by id)
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/suzukibento
- */
-
-// ---------------------------------------------------------------------------
-// Static data
-// ---------------------------------------------------------------------------
-
-const works = [
-  { id: 1043, cls: 'sb-work--a', title: 'Erosion (Shibuya)',     year: '2025', medium: 'Oil, ash, dust on canvas — 220×180cm' },
-  { id: 1025, cls: 'sb-work--b', title: 'Fragments No. 14',     year: '2024', medium: 'Mixed media — 140×140cm' },
-  { id: 1015, cls: 'sb-work--c', title: 'Displaced',            year: '2024', medium: 'Acrylic, collage — 160×120cm' },
-  { id: 1059, cls: 'sb-work--d', title: 'Residue',              year: '2023', medium: 'Oil on linen — 100×100cm' },
-  { id: 1062, cls: 'sb-work--e', title: 'Mother Tongue',        year: '2023', medium: 'Oil, gold leaf — 180×140cm' },
-  { id: 1084, cls: 'sb-work--f', title: 'Untitled (Berlin VI)', year: '2025', medium: 'Concrete, pigment — 300×200cm' },
-]
-
-const exhibitions = [
-  { year: '2026', title: 'Soft Architectures',      venue: 'Kunsthalle Basel, CH',      tag: 'Solo',  solo: true  },
-  { year: '2025', title: 'The Weight of Surface',   venue: 'KW Institute, Berlin',      tag: 'Solo',  solo: true  },
-  { year: '2025', title: 'Asia Now',                venue: 'Monnaie de Paris',           tag: 'Group', solo: false },
-  { year: '2024', title: 'Memory as Material',      venue: 'Hauser & Wirth, Hong Kong', tag: 'Solo',  solo: true  },
-  { year: '2024', title: 'Berlin Biennale 13',      venue: 'Hamburger Bahnhof',         tag: 'Group', solo: false },
-  { year: '2023', title: 'Quiet Geographies',       venue: 'Mori Art Museum, Tokyo',    tag: 'Solo',  solo: true  },
-  { year: '2022', title: 'New Painting / New Asia',  venue: 'Tate St Ives',              tag: 'Group', solo: false },
-]
-
-const press = [
-  'Frieze', 'Artforum', 'ArtReview', 'S\u00fcddeutsche Zeitung',
-  'The Japan Times', 'Mousse', 'e-flux',
-]
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const esc = (s) => String(s).replace(/[&<>"']/g, (c) => (
-  { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
-))
-
-const work = (w) => `
-  <figure class="sb-work ${w.cls}">
-    <img src="/images/suzukibento/${w.id}.jpg" alt="${esc(w.title)}, ${esc(w.year)}" loading="lazy" width="1200" height="900">
-    <figcaption class="sb-work__caption">${esc(w.title)} <span>${esc(w.year)}</span></figcaption>
-  </figure>
-`
-
-const exhibition = (e) => `
-  <li class="sb-exhibition">
-    <span class="sb-exhibition__year">${esc(e.year)}</span>
-    <span class="sb-exhibition__title">${esc(e.title)}</span>
-    <span class="sb-exhibition__venue">${esc(e.venue)}</span>
-    <span class="sb-exhibition__tag${e.solo ? ' sb-exhibition__tag--solo' : ''}">${esc(e.tag)}</span>
-  </li>
-`
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/templates/suzukibento',
-
-  meta: {
-    title:       'Susuki Bento \u2014 Painter',
-    description: 'Tokyo-born, Berlin-based mixed-media artist exploring memory, displacement, and urban erosion through large-scale painting.',
-    theme:       'dark',
-    styles:      ['/pulse-ui.css', '/suzukibento.css'],
-  },
-
-  view: () => `
-    <a href="#main-content" class="skip-link">Skip to main content</a>
-
-    <header class="sb-nav">
-      <a href="/suzukibento" class="sb-nav__brand" aria-label="Susuki Bento — home">Susuki Bento<span class="sb-nav__dot" aria-hidden="true"></span></a>
-      <input type="checkbox" id="sb-menu-toggle" class="sb-nav__toggle-input" aria-hidden="true">
-      <label for="sb-menu-toggle" class="sb-nav__burger" aria-label="Toggle menu">
-        <span></span><span></span><span></span>
-      </label>
-      <nav aria-label="Primary">
-        <ul class="sb-nav__links">
-          <li><a href="#works">Works</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="#exhibitions">Exhibitions</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
-    </header>
-
-    <main id="main-content">
-      <section class="sb-hero">
-        <span class="sb-hero__eyebrow">ペインタ \u2014 b. Tokyo, 1984 \u00b7 lives Berlin</span>
-        <h1 class="sb-hero__title">Susuki<br>Bento<em>.</em></h1>
-        <div class="sb-hero__meta">
-          <div>
-            <span class="sb-hero__meta-label">Now showing</span>
-            <strong>The Weight of Surface \u2014 KW Institute, Berlin</strong>
-          </div>
-          <div>
-            <span class="sb-hero__meta-label">Closing</span>
-            <strong>14 September 2026</strong>
-          </div>
-          <div>
-            <span class="sb-hero__meta-label">Represented by</span>
-            <strong>Hauser &amp; Wirth</strong>
-          </div>
-        </div>
-      </section>
-
-      <section id="works" class="sb-section">
-        <div class="sb-section__head">
-          <span class="sb-section__label">01 \u2014 Selected works</span>
-          <h2 class="sb-section__title">Recent paintings, 2023\u20132025</h2>
-        </div>
-        <div class="sb-works">
-          ${works.map(work).join('')}
-        </div>
-      </section>
-
-      <section id="about" class="sb-section">
-        <div class="sb-section__head">
-          <span class="sb-section__label">02 \u2014 Statement</span>
-          <h2 class="sb-section__title">On surface, memory, dust</h2>
-        </div>
-        <div class="sb-statement">
-          <dl class="sb-statement__bio">
-            <dt>Born</dt><dd>Tokyo, 1984</dd>
-            <dt>Lives</dt><dd>Berlin-Wedding</dd>
-            <dt>Education</dt><dd>Tokyo University of the Arts, MFA<br>St\u00e4delschule, Frankfurt</dd>
-            <dt>Studio</dt><dd>Soldiner Stra\u00dfe 31, 13359 Berlin</dd>
-          </dl>
-          <div>
-            <p>The work begins with surface. I scrape, layer, bury and uncover until the paint behaves like architecture &mdash; weight, weather, decay. Each canvas is a record of what a place could not hold onto.</p>
-            <p>For two decades I have moved between Tokyo and Berlin, two cities defined by the things they have erased. My paintings collect this erasure: dust from demolition sites, charcoal from cleared lots, the colour of a wall before it was repainted. They are quiet objects made from loud absences.</p>
-          </div>
-        </div>
-      </section>
-
-      <section id="exhibitions" class="sb-section">
-        <div class="sb-section__head">
-          <span class="sb-section__label">03 \u2014 Exhibition history</span>
-          <h2 class="sb-section__title">Selected solo &amp; group, 2022\u20132026</h2>
-        </div>
-        <ul class="sb-exhibitions">
-          ${exhibitions.map(exhibition).join('')}
-        </ul>
-      </section>
-
-      <section class="sb-section">
-        <div class="sb-section__head">
-          <span class="sb-section__label">04 \u2014 Press</span>
-          <h2 class="sb-section__title">In print</h2>
-        </div>
-        <p class="sb-press">${press.map((p) => `<span>${esc(p)}</span>`).join('')}</p>
-      </section>
-
-      <section id="contact" class="sb-section">
-        <div class="sb-section__head">
-          <span class="sb-section__label">05 \u2014 Contact</span>
-          <h2 class="sb-section__title">Studio &amp; representation</h2>
-        </div>
-        <div class="sb-contact">
-          <div>
-            <h3>Studio enquiries</h3>
-            <a href="mailto:studio@susukibento.art">studio@susukibento.art</a>
-            <p>Soldiner Stra\u00dfe 31<br>13359 Berlin</p>
-          </div>
-          <div>
-            <h3>Gallery representation</h3>
-            <a href="mailto:bento@hauserwirth.com">bento@hauserwirth.com</a>
-            <p>Hauser &amp; Wirth<br>Z\u00fcrich \u00b7 London \u00b7 Hong Kong</p>
-          </div>
-        </div>
-      </section>
-    </main>
-
-    <footer class="sb-foot">
-      <span>&copy; Susuki Bento Studio 2026</span>
-      <span>Site by <a href="https://invisibleloop.com" class="sb-foot__link" target="_blank" rel="noopener">invisibleloop</a></span>
-    </footer>
-  `,
-}