@invisibleloop/pulse 0.20.11 → 0.20.19

package/examples/journey.css

@@ -1,528 +0,0 @@
-/*
- * journey.css — Journey example
- *
- * Token definitions (hex values) + layout styles (var() only).
- * Deep-night dark palette with gold accent.
- */
-
-/* ─── Token definitions ──────────────────────────────────────── */
-
-:root {
-  --journey-bg:          #0A0A0F;
-  --journey-surface:     #12121A;
-  --journey-border:      #2A2A38;
-  --journey-text:        #F0EDE8;
-  --journey-muted:       #8A8A9C;
-  --journey-gold:        #C9A96E;
-  --journey-gold-dim:    #8A6F42;
-
-  /* Translucent shells — used once each; defined as tokens for hex-free app styles */
-  --journey-nav-bg:      rgba(10, 10, 15, 0.7);
-  --journey-nav-border:  rgba(42, 42, 56, 0.6);
-
-  /* Pulse-ui token overrides — bare tokens cascade into --ui-* */
-  --bg:      #0A0A0F;
-  --surface: #1A1A26;
-  --text:    #F0EDE8;
-  --muted:   #8A8A9C;
-  --border:  #2A2A38;
-  --accent:  #C9A96E;
-}
-
-/* ─── Base ───────────────────────────────────────────────────── */
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  background: var(--journey-bg);
-  color: var(--journey-text);
-  font-family: var(--ui-font, system-ui, sans-serif);
-  line-height: 1.6;
-}
-
-/* ─── Skip link ──────────────────────────────────────────────── */
-
-.j-skip-link {
-  position: absolute;
-  left: -9999px;
-  top: var(--ui-space-2);
-  z-index: 999;
-  padding: var(--ui-space-2) var(--ui-space-4);
-  background: var(--journey-gold);
-  color: var(--journey-bg);
-  font-size: var(--ui-text-sm);
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.j-skip-link:focus {
-  left: var(--ui-space-4);
-}
-
-.j-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* ─── Nav ────────────────────────────────────────────────────── */
-
-.j-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--ui-space-8);
-  background: var(--journey-nav-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--journey-nav-border);
-}
-
-.j-nav-wordmark {
-  font-size: var(--ui-text-sm);
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--journey-text);
-  text-decoration: none;
-}
-
-/* ─── Hero + Timeline split ──────────────────────────────────── */
-
-.j-hero-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  min-height: 100svh;
-}
-
-/* ─── Hero ───────────────────────────────────────────────────── */
-
-.j-hero {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 128px var(--ui-space-8) var(--ui-space-16);
-  position: relative;
-  overflow: hidden;
-  border-right: 1px solid var(--journey-border);
-}
-
-.j-hero-eyebrow {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--journey-gold);
-  margin-bottom: var(--ui-space-6);
-}
-
-.j-hero-title {
-  font-size: clamp(3.5rem, 11vw, 9.5rem);
-  font-weight: 800;
-  line-height: 0.92;
-  letter-spacing: -0.04em;
-  color: var(--journey-text);
-  max-width: 14ch;
-}
-
-.j-hero-title em {
-  font-style: normal;
-  color: var(--journey-gold);
-}
-
-.j-hero-sub {
-  margin-top: var(--ui-space-8);
-  font-size: var(--ui-text-lg);
-  color: var(--journey-muted);
-  max-width: 42ch;
-  line-height: 1.5;
-}
-
-.j-hero-cta {
-  margin-top: var(--ui-space-10);
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-6);
-}
-
-.j-btn-primary {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  background: var(--journey-gold);
-  color: var(--journey-bg);
-  font-weight: 700;
-  font-size: var(--ui-text-sm);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  text-decoration: none;
-  padding: var(--ui-space-4) var(--ui-space-8);
-  white-space: nowrap;
-  transition: opacity 0.2s;
-}
-
-.j-btn-primary:hover {
-  opacity: 0.85;
-}
-
-.j-btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  color: var(--journey-muted);
-  font-size: var(--ui-text-sm);
-  letter-spacing: 0.05em;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: color 0.2s;
-}
-
-.j-btn-ghost:hover {
-  color: var(--journey-text);
-}
-
-.j-hero-scroll {
-  position: absolute;
-  bottom: var(--ui-space-8);
-  left: var(--ui-space-8);
-  display: none;
-  align-items: center;
-  gap: var(--ui-space-3);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  color: var(--journey-muted);
-}
-
-.j-hero-line {
-  width: 2rem;
-  height: 1px;
-  background: var(--journey-border);
-}
-
-/* ─── Timeline section ───────────────────────────────────────── */
-
-.j-timeline-section {
-  padding: 128px var(--ui-space-8) var(--ui-space-16);
-  position: sticky;
-  top: 0;
-  height: 100svh;
-  overflow-y: auto;
-  scrollbar-width: none;
-}
-
-.j-timeline-section::-webkit-scrollbar {
-  display: none;
-}
-
-.j-section-label {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--journey-gold);
-  margin-bottom: var(--ui-space-16);
-}
-
-.j-timeline {
-  position: relative;
-}
-
-/* Centre thread */
-.j-timeline::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: linear-gradient(
-    to bottom,
-    transparent,
-    var(--journey-gold-dim) 5%,
-    var(--journey-gold-dim) 95%,
-    transparent
-  );
-  transform: translateX(-50%);
-}
-
-.j-tl-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: var(--ui-space-10);
-  position: relative;
-}
-
-/* Dot on centre thread */
-.j-tl-item::before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 1.25rem;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--journey-gold);
-  border: 2px solid var(--journey-bg);
-  transform: translateX(-50%);
-  box-shadow: 0 0 0 1px var(--journey-gold);
-  z-index: 1;
-}
-
-/* Odd: card on left half */
-.j-tl-item:nth-child(odd) {
-  justify-content: flex-start;
-}
-.j-tl-item:nth-child(odd) .j-tl-card {
-  width: calc(50% - var(--ui-space-8));
-  margin-right: var(--ui-space-8);
-}
-
-/* Even: card on right half */
-.j-tl-item:nth-child(even) {
-  justify-content: flex-end;
-}
-.j-tl-item:nth-child(even) .j-tl-card {
-  width: calc(50% - var(--ui-space-8));
-  margin-left: var(--ui-space-8);
-}
-
-.j-tl-card {
-  background: var(--journey-surface);
-  border: 1px solid var(--journey-border);
-  overflow: hidden;
-  transition: border-color 0.2s;
-}
-
-.j-tl-card:not(.j-tl-card--image) {
-  padding: var(--ui-space-5);
-}
-
-.j-tl-card:hover {
-  border-color: var(--journey-gold-dim);
-}
-
-.j-tl-image {
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  object-fit: cover;
-}
-
-.j-tl-content {
-  padding: var(--ui-space-5);
-}
-
-.j-tl-year {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  color: var(--journey-gold);
-  margin-bottom: var(--ui-space-2);
-}
-
-.j-tl-title {
-  font-size: var(--ui-text-lg);
-  font-weight: 700;
-  color: var(--journey-text);
-  letter-spacing: -0.02em;
-  margin-bottom: var(--ui-space-2);
-}
-
-.j-tl-body {
-  font-size: var(--ui-text-sm);
-  color: var(--journey-muted);
-  line-height: 1.6;
-}
-
-.j-tl-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  margin-top: var(--ui-space-3);
-  font-size: 0.65rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--journey-gold-dim);
-  border: 1px solid var(--journey-border);
-  padding: 2px var(--ui-space-2);
-}
-
-/* ─── Features strip ─────────────────────────────────────────── */
-
-.j-features {
-  border-top: 1px solid var(--journey-border);
-  border-bottom: 1px solid var(--journey-border);
-  padding: var(--ui-space-12) var(--ui-space-8);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-8);
-}
-
-.j-feature-label {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  color: var(--journey-gold);
-  margin-bottom: var(--ui-space-2);
-}
-
-.j-feature-body {
-  font-size: var(--ui-text-sm);
-  color: var(--journey-muted);
-  line-height: 1.5;
-}
-
-/* ─── CTA section ────────────────────────────────────────────── */
-
-.j-cta {
-  padding: var(--ui-space-16) var(--ui-space-8);
-  text-align: center;
-  background: var(--journey-surface);
-  border-top: 1px solid var(--journey-border);
-}
-
-.j-cta-eyebrow {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--journey-muted);
-  margin-bottom: var(--ui-space-6);
-}
-
-.j-cta-title {
-  font-size: clamp(2rem, 5vw, 4rem);
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  line-height: 1.05;
-  color: var(--journey-text);
-  margin-bottom: var(--ui-space-8);
-}
-
-.j-cta-title em {
-  font-style: normal;
-  color: var(--journey-gold);
-}
-
-.j-cta-badges {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-4);
-}
-
-/* ─── Footer ─────────────────────────────────────────────────── */
-
-.j-footer {
-  padding: var(--ui-space-8);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid var(--journey-border);
-}
-
-.j-footer-word {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--journey-muted);
-}
-
-.j-footer-links {
-  display: flex;
-  gap: var(--ui-space-6);
-}
-
-.j-footer-links a {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--journey-muted);
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.j-footer-links a:hover {
-  color: var(--journey-text);
-}
-
-/* ─── Responsive ─────────────────────────────────────────────── */
-
-@media (max-width: 768px) {
-  .j-hero-split {
-    grid-template-columns: 1fr;
-  }
-
-  .j-hero {
-    min-height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--journey-border);
-    padding: 104px var(--ui-space-6) var(--ui-space-8);
-  }
-
-  .j-timeline-section {
-    position: static;
-    height: auto;
-    overflow-y: visible;
-    padding: var(--ui-space-10) var(--ui-space-6);
-  }
-
-  .j-hero-scroll {
-    display: flex;
-    position: static;
-    margin-top: var(--ui-space-8);
-  }
-
-  .j-timeline::before {
-    left: 0;
-    transform: none;
-  }
-
-  .j-tl-item::before {
-    left: 0;
-    transform: translateX(-50%);
-  }
-
-  .j-tl-item:nth-child(odd),
-  .j-tl-item:nth-child(even) {
-    justify-content: flex-start;
-  }
-
-  .j-tl-item:nth-child(odd) .j-tl-card,
-  .j-tl-item:nth-child(even) .j-tl-card {
-    width: 100%;
-    margin-left: var(--ui-space-6);
-    margin-right: 0;
-  }
-
-  .j-features {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-6);
-  }
-
-  .j-footer {
-    flex-direction: column;
-    gap: var(--ui-space-4);
-    text-align: center;
-  }
-
-  .j-nav {
-    padding: 0 var(--ui-space-6);
-  }
-}

package/examples/journey.js

@@ -1,186 +0,0 @@
-/**
- * Pulse — Journey example
- *
- * Demonstrates:
- *   - Mode B creative override — raw HTML throughout, no structural components
- *   - Split-screen layout: sticky hero left / scrollable timeline right (100svh grid)
- *   - appBadge component from @invisibleloop/pulse/ui
- *   - Deep-night palette (#0A0A0F) with gold (#C9A96E) accent
- *   - Alternating left/right timeline cards with centred thread + connector dots
- *   - calc(50% - var(--ui-space-8)) pattern for half-width timeline cards
- *   - Sticky positioned timeline column with overflow-y: auto + scrollbar-width: none
- *   - Frosted glass nav: rgba translucency + backdrop-filter blur
- *   - Skip link, visually-hidden headings, section aria-labelledby — full a11y
- *   - Mobile responsive: stacks vertically, thread moves left, full-width cards
- *   - iconTag, iconPlus, iconSend, iconArrowDown, iconFeather from icons.js
- *   - picsum.photos/id/* for stable prototype images
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/journey
- */
-
-import { appBadge } from '../src/ui/index.js'
-import { iconTag, iconPlus, iconSend, iconArrowDown, iconFeather } from '../src/ui/icons.js'
-
-// ---------------------------------------------------------------------------
-// Timeline data
-// ---------------------------------------------------------------------------
-
-const timelineEvents = [
-  {
-    year:  '2019',
-    title: 'First Day in the City',
-    body:  'Packed everything into one suitcase. The apartment was smaller than expected. The feeling was not.',
-    tag:   'Milestone',
-    image: { src: '/images/journey/29.jpg', alt: 'City street view' },
-  },
-  {
-    year:  '2020',
-    title: 'Learning to Stay Still',
-    body:  'The world paused. Finished three books. Started painting. Discovered what quiet actually sounds like.',
-    tag:   'Reflection',
-  },
-  {
-    year:  '2021',
-    title: 'The Road Trip',
-    body:  '4,200 miles across eleven states. Every diner looks the same after midnight. Every sunrise does not.',
-    tag:   'Adventure',
-    image: { src: '/images/journey/178.jpg', alt: 'Open road through a landscape' },
-  },
-  {
-    year:  '2022',
-    title: 'Said Yes',
-    body:  'On a Tuesday. In the kitchen. No ring yet, just the question and the answer and the rest of our lives.',
-    tag:   'Love',
-  },
-  {
-    year:  '2024',
-    title: 'This Is Home Now',
-    body:  'The boxes are gone. The walls have pictures. The cat has a name. The journey continues.',
-    tag:   'Present',
-  },
-]
-
-// ---------------------------------------------------------------------------
-// Timeline card helper
-// ---------------------------------------------------------------------------
-
-const tlCard = ({ year, title, body, tag, image }) => `
-  <div class="j-tl-card${image ? ' j-tl-card--image' : ''}">
-    ${image ? `<img class="j-tl-image" src="${image.src}" alt="${image.alt}" width="600" height="340" loading="lazy" decoding="async">` : ''}
-    <div class="j-tl-content">
-      <p class="j-tl-year">${year}</p>
-      <h3 class="j-tl-title">${title}</h3>
-      <p class="j-tl-body">${body}</p>
-      <span class="j-tl-tag">${iconTag({ size: 10 })}${tag}</span>
-    </div>
-  </div>
-`
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/journey',
-
-  meta: {
-    title:       'Journey \u2014 Your story, in order',
-    description: 'Plot your life\u2019s journey. Map events, milestones, and memories on a beautiful timeline.',
-    styles:      ['/pulse-ui.css', '/examples/journey.css'],
-    theme:       'dark',
-  },
-
-  view: () => `
-    <a href="#main-content" class="j-skip-link">Skip to main content</a>
-
-    <header role="banner">
-      <nav class="j-nav" aria-label="Site navigation">
-        <a href="/journey" class="j-nav-wordmark" aria-label="Journey \u2014 home">Journey</a>
-        ${appBadge({ store: 'apple', href: '#download' })}
-      </nav>
-    </header>
-
-    <main id="main-content">
-
-      <!-- Hero + Timeline split -->
-      <div class="j-hero-split">
-
-        <!-- Hero -->
-        <section class="j-hero" aria-labelledby="journey-hero-title">
-          <p class="j-hero-eyebrow" aria-hidden="true">Your story \u00b7 In order</p>
-          <h1 class="j-hero-title" id="journey-hero-title">
-            Every<br>moment<br><em>matters.</em>
-          </h1>
-          <p class="j-hero-sub">
-            Journey is a beautiful timeline for your life. Plot events, mark milestones,
-            and explore the story only you can tell.
-          </p>
-          <div class="j-hero-cta">
-            <a href="#download" class="j-btn-primary">
-              Download free
-            </a>
-            <a href="#journey-timeline" class="j-btn-ghost">
-              See how it works ${iconArrowDown({ size: 14 })}
-            </a>
-          </div>
-          <div class="j-hero-scroll" aria-hidden="true">
-            <span class="j-hero-line"></span>
-            <span>Scroll to explore</span>
-          </div>
-        </section>
-
-        <!-- Timeline demo -->
-        <section class="j-timeline-section" id="journey-timeline" aria-labelledby="journey-timeline-heading">
-          <p class="j-section-label" aria-hidden="true">01 \u2014 Your timeline</p>
-          <h2 class="j-visually-hidden" id="journey-timeline-heading">Example journey timeline</h2>
-          <div class="j-timeline" role="list">
-            ${timelineEvents.map(ev => `
-              <div class="j-tl-item" role="listitem">
-                ${tlCard(ev)}
-              </div>
-            `).join('')}
-          </div>
-        </section>
-
-      </div><!-- end j-hero-split -->
-
-      <!-- Features -->
-      <section class="j-features" aria-labelledby="journey-features-heading">
-        <h2 class="j-visually-hidden" id="journey-features-heading">Features</h2>
-        <div>
-          <p class="j-feature-label">${iconPlus({ size: 12 })}Plot your path</p>
-          <p class="j-feature-body">Add any event \u2014 big or small \u2014 and watch your story take shape along a living timeline.</p>
-        </div>
-        <div>
-          <p class="j-feature-label">${iconTag({ size: 12 })}Tag &amp; explore</p>
-          <p class="j-feature-body">Organise moments by theme, mood, or chapter. Filter your timeline to find any memory instantly.</p>
-        </div>
-        <div>
-          <p class="j-feature-label">${iconSend({ size: 12 })}Share your journey</p>
-          <p class="j-feature-body">Export a beautiful visual timeline to share with the people who made it worth living.</p>
-        </div>
-      </section>
-
-      <!-- CTA / Download -->
-      <section class="j-cta" id="download" aria-labelledby="journey-cta-heading">
-        <p class="j-cta-eyebrow">Available now \u00b7 iOS</p>
-        <h2 class="j-cta-title" id="journey-cta-heading">
-          Begin your<br><em>journey</em> today.
-        </h2>
-        <div class="j-cta-badges">
-          ${appBadge({ store: 'apple', href: '#' })}
-        </div>
-      </section>
-
-    </main>
-
-    <footer class="j-footer" role="contentinfo">
-      <span class="j-footer-word">${iconFeather({ size: 12 })} Journey &copy; 2025</span>
-      <nav class="j-footer-links" aria-label="Footer navigation">
-        <a href="#privacy">Privacy</a>
-        <a href="#terms">Terms</a>
-        <a href="#contact">Contact</a>
-      </nav>
-    </footer>
-  `,
-}