@invisibleloop/pulse 0.12.3 → 0.14.1

package/examples/journey.css

@@ -0,0 +1,528 @@
+/*
+ * 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

@@ -0,0 +1,186 @@
+/**
+ * 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>
+  `,
+}

package/examples/pricing.js

@@ -134,6 +134,7 @@ export default {
     title:       'Pricing — Pulse',
     description: 'Simple, transparent pricing for every stage. Starter is free forever. Pro and Team plans include a 14-day trial.',
     styles:      ['/pulse-ui.css', '/examples/pricing.css'],
+    theme:       'dark',
   },
 
   state: {