@invisibleloop/pulse 0.20.10 → 0.20.19

package/examples/swish.css

@@ -1,394 +0,0 @@
-/*
- * swish.css — Swish editorial fashion example
- *
- * Palette: warm off-white paper, deep ink, oxblood accent.
- * Font:    Playfair Display (display headings), system-ui (body)
- *
- * 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-display so --ui-font-display cascades to Playfair Display */
-:root {
-  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
-}
-
-[data-theme="light"] {
-  --ui-bg:           #f5f1ea;
-  --ui-surface:      #faf7f1;
-  --ui-surface-2:    #ede7dc;
-  --ui-border:       #d8cfc0;
-  --ui-text:         #14110d;
-  --ui-muted:        #6b6357;
-  --ui-accent:       #6b1d1d;
-  --ui-accent-hover: #4a1212;
-  --ui-accent-dim:   rgba(107, 29, 29, 0.10);
-  --ui-accent-text:  #faf7f1;
-
-  /* Swish-specific tokens */
-  --swish-paper:         #faf7f1;
-  --swish-ink:           #14110d;
-  --swish-hero-veil:     rgba(20, 17, 13, 0.55);
-  --swish-hero-veil-top: rgba(20, 17, 13, 0.05);
-  --swish-label-bg:      rgba(20, 17, 13, 0.55);
-}
-
-/* Primary button on light theme — needs paper text, not default */
-[data-theme="light"] .ui-btn--primary {
-  color: var(--swish-paper);
-}
-
-/* Frosted nav over editorial imagery */
-[data-theme="light"] .ui-nav {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  background: rgba(245, 241, 234, 0.78);
-}
-
-[data-theme="light"] .ui-nav-mobile .ui-nav-link,
-[data-theme="light"] .ui-nav-mobile .ui-nav-mega-item-label,
-[data-theme="light"] .ui-nav-mobile-section {
-  color: var(--ui-text);
-}
-
-/* ==========================================================================
-   2. Component styles (var() only — no hex values below this line)
-   ========================================================================== */
-
-/* --------------------------------------------------------------------------
-   Skip link
-   -------------------------------------------------------------------------- */
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  background: var(--ui-text);
-  color: var(--ui-bg);
-  padding: var(--ui-space-2) var(--ui-space-4);
-  z-index: 100;
-}
-
-.skip-link:focus {
-  left: var(--ui-space-4);
-  top: var(--ui-space-4);
-}
-
-/* --------------------------------------------------------------------------
-   Brand wordmark
-   -------------------------------------------------------------------------- */
-.swish-mark {
-  font-family: var(--ui-font-display);
-  font-weight: 400;
-  font-size: var(--ui-text-2xl);
-  letter-spacing: 0.32em;
-  text-transform: uppercase;
-}
-
-/* --------------------------------------------------------------------------
-   Full-bleed hero
-   -------------------------------------------------------------------------- */
-.swish-hero {
-  position: relative;
-  min-height: 88vh;
-  display: flex;
-  align-items: center;
-  background-image:
-    linear-gradient(180deg, var(--swish-hero-veil-top) 0%, var(--swish-hero-veil) 100%),
-    url('/images/swish/1490481651871-ab68de25d43d.jpg');
-  background-size: cover;
-  background-position: center;
-  color: var(--swish-paper);
-  padding: var(--ui-space-12) var(--ui-space-6) var(--ui-space-16);
-}
-
-.swish-hero__inner {
-  max-width: 880px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.swish-hero__eyebrow {
-  display: inline-block;
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--swish-ink);
-  background: var(--swish-paper);
-  padding: var(--ui-space-1) var(--ui-space-3);
-  margin-bottom: var(--ui-space-5);
-}
-
-.swish-hero__title {
-  font-family: var(--ui-font-display);
-  font-weight: 400;
-  font-size: clamp(3rem, 9vw, 7rem);
-  line-height: 0.95;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--ui-space-6);
-}
-
-.swish-hero__deck {
-  font-size: var(--ui-text-lg);
-  line-height: 1.6;
-  max-width: 36rem;
-  margin-bottom: var(--ui-space-8);
-  opacity: 0.92;
-}
-
-/* Ghost button inside the hero — force white so it's visible over the dark veil */
-.swish-hero .ui-btn--ghost {
-  color: #fff;
-  border-color: rgba(255,255,255,0.6);
-}
-.swish-hero .ui-btn--ghost:hover {
-  background: rgba(255,255,255,0.12);
-  border-color: #fff;
-}
-
-/* Quote section — reduce bottom padding to match visual weight of top */
-.swish-quote-section { padding-bottom: var(--ui-space-16); }
-
-/* --------------------------------------------------------------------------
-   Section eyebrow / issue marker
-   -------------------------------------------------------------------------- */
-.swish-issue {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-4);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-  margin-bottom: var(--ui-space-6);
-}
-
-.swish-issue::before,
-.swish-issue::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--ui-border);
-}
-
-.swish-issue--left::after {
-  display: none;
-}
-
-/* --------------------------------------------------------------------------
-   Featured looks (product cards)
-   -------------------------------------------------------------------------- */
-.swish-look {
-  display: block;
-  text-decoration: none;
-  color: var(--ui-text);
-}
-
-.swish-look__frame {
-  aspect-ratio: 3 / 4;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-  margin-bottom: var(--ui-space-4);
-}
-
-.swish-look__frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: transform 600ms ease;
-}
-
-.swish-look:hover .swish-look__frame img {
-  transform: scale(1.04);
-}
-
-.swish-look__name {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-lg);
-  font-weight: 400;
-  margin-bottom: var(--ui-space-1);
-}
-
-.swish-look__meta {
-  font-size: var(--ui-text-sm);
-  color: var(--ui-muted);
-  letter-spacing: 0.04em;
-}
-
-/* --------------------------------------------------------------------------
-   Atelier split layout
-   -------------------------------------------------------------------------- */
-.swish-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ui-space-12);
-  align-items: center;
-}
-
-.swish-split__media {
-  aspect-ratio: 4 / 5;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-split__media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-split__title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 400;
-  line-height: 1.05;
-  letter-spacing: -0.015em;
-  margin-bottom: var(--ui-space-5);
-}
-
-.swish-split__body p {
-  font-size: var(--ui-text-lg);
-  line-height: 1.75;
-  color: var(--ui-text);
-  margin-bottom: var(--ui-space-4);
-}
-
-@media (max-width: 720px) {
-  .swish-split {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-8);
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Lookbook strip
-   -------------------------------------------------------------------------- */
-.swish-strip {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-4);
-}
-
-.swish-strip__cell {
-  position: relative;
-  aspect-ratio: 4 / 5;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-strip__cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-strip__label {
-  position: absolute;
-  left: var(--ui-space-4);
-  bottom: var(--ui-space-4);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--swish-paper);
-  background: var(--swish-label-bg);
-  padding: var(--ui-space-2) var(--ui-space-3);
-}
-
-@media (max-width: 720px) {
-  .swish-strip {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Journal cards
-   -------------------------------------------------------------------------- */
-.swish-journal-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-3);
-}
-
-.swish-journal-card__frame {
-  aspect-ratio: 16 / 10;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-journal-card__frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-journal-card__category {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--ui-accent);
-}
-
-.swish-journal-card__title {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-xl);
-  font-weight: 400;
-  line-height: 1.25;
-}
-
-.swish-journal-card__deck {
-  font-size: var(--ui-text-base);
-  color: var(--ui-muted);
-  line-height: 1.6;
-}
-
-.swish-journal-card__byline {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-}
-
-/* --------------------------------------------------------------------------
-   Newsletter section
-   -------------------------------------------------------------------------- */
-.swish-newsletter {
-  text-align: center;
-}
-
-.swish-newsletter__title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2rem, 4vw, 2.75rem);
-  font-weight: 400;
-  letter-spacing: -0.01em;
-  margin-bottom: var(--ui-space-4);
-}
-
-.swish-newsletter__deck {
-  max-width: 32rem;
-  margin: 0 auto var(--ui-space-8);
-  color: var(--ui-muted);
-  line-height: 1.6;
-}
-
-.swish-newsletter__form {
-  max-width: 32rem;
-  margin: 0 auto;
-  display: flex;
-  gap: var(--ui-space-3);
-  align-items: flex-end;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-/* Safe area padding for mobile devices (home indicator bar) */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
-  footer { padding-bottom: max(var(--ui-space-6), env(safe-area-inset-bottom)); }
-}

package/examples/swish.js

@@ -1,311 +0,0 @@
-/**
- * Pulse — Swish example
- *
- * Demonstrates:
- *   - Editorial light-theme branding (fashion / luxury ecommerce)
- *   - Composing nav, section, container, grid, pullquote, button, footer, input
- *   - Custom component helpers (look card, strip cell, journal card)
- *   - Google Fonts integration via meta.styles
- *   - Full-bleed hero with CSS background image + gradient overlay
- *   - Responsive grid, lookbook strip, image-led journal cards
- *   - Newsletter sign-up form using the input() component
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/swish
- */
-
-import {
-  nav,
-  section,
-  container,
-  grid,
-  pullquote,
-  button,
-  footer,
-  input,
-} from '../src/ui/index.js'
-
-// ---------------------------------------------------------------------------
-// Card / cell helpers
-// ---------------------------------------------------------------------------
-
-const look = ({ name, season, price, src }) => `
-  <a class="swish-look" href="/collections/${encodeURIComponent(name.toLowerCase().replace(/\s+/g, '-'))}">
-    <div class="swish-look__frame">
-      <img src="${src}" alt="${name} — ${season}" loading="lazy" />
-    </div>
-    <div class="swish-look__name">${name}</div>
-    <div class="swish-look__meta">${season} · ${price}</div>
-  </a>
-`
-
-const stripCell = ({ src, alt, label }) => `
-  <figure class="swish-strip__cell">
-    <img src="${src}" alt="${alt}" loading="lazy" />
-    <figcaption class="swish-strip__label">${label}</figcaption>
-  </figure>
-`
-
-const journalCard = ({ category, title, deck, byline, src }) => `
-  <article class="swish-journal-card">
-    <div class="swish-journal-card__frame">
-      <img src="${src}" alt="" loading="lazy" />
-    </div>
-    <div class="swish-journal-card__category">${category}</div>
-    <h3 class="swish-journal-card__title">${title}</h3>
-    <p class="swish-journal-card__deck">${deck}</p>
-    <div class="swish-journal-card__byline">${byline}</div>
-  </article>
-`
-
-// ---------------------------------------------------------------------------
-// Static data
-// ---------------------------------------------------------------------------
-
-const featured = [
-  {
-    name:   'The Marlene Coat',
-    season: 'AW26',
-    price:  '£1,290',
-    src:    '/images/swish/1539109136881-3be0616acf4b.jpg',
-  },
-  {
-    name:   'Atelier Knit',
-    season: 'AW26',
-    price:  '£480',
-    src:    '/images/swish/1485518882345-15568b007407.jpg',
-  },
-  {
-    name:   'Bias Slip Dress',
-    season: 'AW26',
-    price:  '£695',
-    src:    '/images/swish/1572804013309-59a88b7e92f1.jpg',
-  },
-  {
-    name:   'Wide-Leg Trouser',
-    season: 'AW26',
-    price:  '£420',
-    src:    '/images/swish/1551803091-e20673f15770.jpg',
-  },
-]
-
-const lookbook = [
-  {
-    src:   '/images/swish/1483985988355-763728e1935b.jpg',
-    alt:   'Tailored editorial look in muted neutrals',
-    label: 'Tailoring',
-  },
-  {
-    src:   '/images/swish/1469334031218-e382a71b716b.jpg',
-    alt:   'Soft knitwear styled with wide trousers',
-    label: 'Knitwear',
-  },
-  {
-    src:   '/images/swish/1502716119720-b23a93e5fe1b.jpg',
-    alt:   'Evening dress under low light',
-    label: 'Evening',
-  },
-]
-
-const journal = [
-  {
-    category: 'Atelier',
-    title:    'Inside the Florence workshop',
-    deck:     'Where every Marlene coat is cut, basted and finished by hand over twenty-three days.',
-    byline:   'Words by Inez Vasquez',
-    src:      '/images/swish/1558769132-cb1aea458c5e.jpg',
-  },
-  {
-    category: 'Conversation',
-    title:    'A new vocabulary for womenswear',
-    deck:     'Creative director Lila Chen on quiet power, ease, and clothes that outlive a season.',
-    byline:   'Interview by The Editors',
-    src:      '/images/swish/1496747611176-843222e1e57c.jpg',
-  },
-  {
-    category: 'Care',
-    title:    'On keeping wool well',
-    deck:     'A short guide to brushing, airing and storing the pieces meant to be with you for years.',
-    byline:   'Words by Marta Engel',
-    src:      '/images/swish/1490481651871-ab68de25d43d.jpg',
-  },
-]
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/swish',
-
-  meta: {
-    title:       'Swish — Considered womenswear, season by season',
-    description: 'Swish is a ready-to-wear house designing collection-led womenswear, handfinished in Florence and Porto. Demonstrates editorial branding with Pulse.',
-    theme:       'light',
-    styles:      [
-      'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap',
-      '/pulse-ui.css',
-      '/examples/swish.css',
-    ],
-    ogTitle:     'Swish — Autumn/Winter 2026',
-    ogImage:     '/images/swish/1490481651871-ab68de25d43d.jpg',
-  },
-
-  view: () => `
-    <a href="#main-content" class="skip-link">Skip to main content</a>
-
-    ${nav({
-      sticky:   true,
-      logo:     `<span class="swish-mark">Swish</span>`,
-      logoHref: '/swish',
-      links: [
-        { label: 'Collections', href: '/collections' },
-        { label: 'Lookbook',    href: '/lookbook'    },
-        { label: 'Atelier',     href: '/atelier'     },
-        { label: 'Journal',     href: '/journal'     },
-        { label: 'Stores',      href: '/stores'      },
-      ],
-      action: button({ label: 'Bag (0)', href: '/bag', variant: 'ghost', size: 'sm' }),
-    })}
-
-    <main id="main-content">
-      <section class="swish-hero" aria-label="Autumn Winter 2026 collection">
-        <div class="swish-hero__inner">
-          <div class="swish-hero__eyebrow">AW26 · Issue Nº07</div>
-          <h1 class="swish-hero__title">Quiet power, cut to last.</h1>
-          <p class="swish-hero__deck">The Autumn/Winter collection — a study in tailoring, weight and restraint. Forty-two pieces, made in small runs across Florence and Porto.</p>
-          <div class="u-flex u-gap-3 u-flex-wrap">
-            ${button({ label: 'Shop the collection', href: '/collections/aw26', variant: 'primary', size: 'lg' })}
-            ${button({ label: 'View lookbook',       href: '/lookbook',         variant: 'ghost',   size: 'lg' })}
-          </div>
-        </div>
-      </section>
-
-      ${section({
-        padding: 'lg',
-        class: 'swish-quote-section',
-        content: container({
-          size: 'md',
-          content: pullquote({
-            quote: 'A new vocabulary for modern womenswear — disciplined, quietly luxurious, refreshingly unfussy.',
-            cite:  'British Vogue',
-            size:  'lg',
-          }),
-        }),
-      })}
-
-      ${section({
-        padding: 'lg',
-        content: container({
-          content: `
-            <div class="swish-issue">Featured pieces · AW26</div>
-            ${grid({
-              cols:    4,
-              gap:     'lg',
-              content: featured.map(look).join(''),
-            })}
-          `,
-        }),
-      })}
-
-      ${section({
-        variant: 'alt',
-        padding: 'lg',
-        content: container({
-          content: `
-            <div class="swish-split">
-              <div class="swish-split__media">
-                <img
-                  src="/images/swish/1558769132-cb1aea458c5e.jpg"
-                  alt="A tailor working at the Florence atelier" />
-              </div>
-              <div class="swish-split__body">
-                <div class="swish-issue swish-issue--left">The Atelier</div>
-                <h2 class="swish-split__title">Made slowly, in two small houses.</h2>
-                <p>Tailoring is cut and finished in a converted convent in Oltrarno, Florence. Knitwear is shaped by a family-run mill outside Porto that has been spinning yarn for four generations.</p>
-                <p>Each collection is produced in runs of fewer than three hundred pieces — quiet, deliberate, and intended to be lived in for years.</p>
-                ${button({ label: 'Visit the atelier', href: '/atelier', variant: 'secondary' })}
-              </div>
-            </div>
-          `,
-        }),
-      })}
-
-      ${section({
-        padding: 'lg',
-        content: container({
-          content: `
-            <div class="swish-issue">Lookbook</div>
-            <div class="swish-strip">${lookbook.map(stripCell).join('')}</div>
-          `,
-        }),
-      })}
-
-      ${section({
-        variant: 'alt',
-        padding: 'lg',
-        content: container({
-          content: `
-            <div class="swish-issue">From the journal</div>
-            ${grid({
-              cols:    3,
-              gap:     'lg',
-              content: journal.map(journalCard).join(''),
-            })}
-          `,
-        }),
-      })}
-
-      ${section({
-        padding: 'lg',
-        content: container({
-          size: 'md',
-          content: `
-            <div class="swish-newsletter">
-              <h2 class="swish-newsletter__title">Letters from Swish</h2>
-              <p class="swish-newsletter__deck">Collection previews, atelier notes and private sale invitations — sent six times a year, never more.</p>
-              <form class="swish-newsletter__form" action="/subscribe" method="post" novalidate>
-                ${input({ name: 'email', label: 'Email address', type: 'email', placeholder: 'your@email.com', required: true, attrs: { autocomplete: 'email' } })}
-                ${button({ label: 'Subscribe', type: 'submit', variant: 'primary' })}
-              </form>
-            </div>
-          `,
-        }),
-      })}
-    </main>
-
-    ${footer({
-      logo:     `<span class="swish-mark">Swish</span>`,
-      logoHref: '/swish',
-      columns: [
-        {
-          title: 'Shop',
-          links: [
-            { label: 'AW26 Collection', href: '/collections/aw26' },
-            { label: 'Tailoring',       href: '/collections/tailoring' },
-            { label: 'Knitwear',        href: '/collections/knitwear' },
-            { label: 'Evening',         href: '/collections/evening' },
-          ],
-        },
-        {
-          title: 'House',
-          links: [
-            { label: 'Atelier', href: '/atelier' },
-            { label: 'Journal', href: '/journal' },
-            { label: 'Stores',  href: '/stores'  },
-            { label: 'Careers', href: '/careers' },
-          ],
-        },
-        {
-          title: 'Help',
-          links: [
-            { label: 'Contact',  href: '/contact'  },
-            { label: 'Shipping', href: '/shipping' },
-            { label: 'Returns',  href: '/returns'  },
-            { label: 'Care',     href: '/care'     },
-          ],
-        },
-      ],
-      legal: '© 2026 Swish Maison. All rights reserved.',
-    })}
-  `,
-}