@legenki/studio-core 0.3.0 → 0.4.0

package/README.md

@@ -104,6 +104,42 @@ back to a user row.
 
 The modal expects `.paywall-*` styles from the host app's stylesheet.
 
+#### Showcase layout (0.4+)
+
+Pass `studios` to replace the feature list with previews. Opened from a locked
+studio, the paywall leads with that studio and lists the rest as included;
+opened from anywhere else (or with an id it does not know), it shows a gallery
+of all of them. Apps that pass no `studios` keep the original layout and
+markup, so they need no restyle to upgrade.
+
+```js
+configurePaywall({
+  appName: 'Grafema',
+  headline: 'Letters that *move*, *scatter* and *stamp*.', // *word* → <em>
+  subtitle: 'Four more studios for your type — plus MP4 video and SVG export.',
+  extras: 'MP4 and SVG export', // context view: "…and three more studios, with MP4 and SVG export."
+  studios: [
+    {
+      id: 'textura', // matched against openPaywall({ studio })
+      name: 'TEXTURA',
+      tagline: 'Kinetic type patterns',
+      blurb: 'Turn text into moving patterns and export the loop.',
+      image: texturaUrl, // gallery tile and thumbnail (landscape)
+      heroImage: texturaHeroUrl, // context view (portrait); falls back to image
+    },
+  ],
+  monthly: '$8',
+  yearly: '$40',
+});
+
+openPaywall({ studio: 'textura' }); // context view
+openPaywall(); // gallery
+```
+
+Both views render `.paywall-box--context` / `.paywall-box--gallery`; Grafema's
+`src/css/modules/auth.css` has a complete stylesheet for them. The modal closes
+on Escape and returns focus to where it was opened from.
+
 ## Supabase keepalive
 
 `.github/workflows/supabase-keepalive.yml` queries the shared Supabase project

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legenki/studio-core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Shared auth, paywall and utilities for the Legenki browser studios (Grafema, Ritmo, Divix, Lumen).",
   "type": "module",
   "license": "ISC",

package/src/paywall.js

@@ -2,8 +2,16 @@
  * Subscription paywall modal.
  *
  * Ported from Ritmo, where the copy was hardcoded. Every app-specific string is
- * now passed in via configure(), so Grafema and Ritmo share one implementation
- * and one set of styles while advertising their own studios and prices.
+ * now passed in via configure(), so the studios share one implementation while
+ * advertising their own products and prices.
+ *
+ * Two layouts:
+ * - legacy: title, feature bullets, two plan cards. Used when the app passes
+ *   no `studios`, so apps that have not restyled keep working unchanged.
+ * - showcase: used when the app passes `studios`. `openPaywall({ studio })`
+ *   from a locked studio shows that studio large with the rest as "also
+ *   included"; any other entry point (or an unknown id) shows the gallery of
+ *   all of them.
  *
  * The plan prices shown here must match the app's landing page on legenki.com
  * (src/content/apps/<app>.md) — they are the same offer described twice.
@@ -17,12 +25,29 @@ const STRIPE_YEARLY_URL = import.meta.env.VITE_STRIPE_YEARLY_URL;
 /** @type {HTMLElement|null} */
 let _modalEl = null;
 let _selectedPlan = 'yearly';
+/** Focus to hand back on close, so keyboard users land where they were. */
+let _returnFocus = null;
+
+/**
+ * @typedef {Object} PaywallStudio
+ * @property {string} id       Matched against openPaywall({ studio }).
+ * @property {string} name     e.g. "TEXTURA".
+ * @property {string} tagline  A few words, e.g. "Kinetic type patterns".
+ * @property {string} [blurb]  One sentence under the tagline in the context view.
+ * @property {string} [image]  Preview URL for the gallery tile and thumbnail.
+ * @property {string} [heroImage] Portrait preview for the context view; falls
+ *   back to `image`.
+ */
 
 /**
  * @typedef {Object} PaywallConfig
  * @property {string}   appName   e.g. "Grafema" — titles the modal.
  * @property {string}   [subtitle] One-line summary of what Pro unlocks.
- * @property {string[]} [features] Bullet list shown in the modal.
+ * @property {string[]} [features] Bullet list (legacy layout only).
+ * @property {PaywallStudio[]} [studios] Enables the showcase layout.
+ * @property {string}   [headline] Gallery headline; `*word*` is emphasised.
+ * @property {string}   [extras]   What Pro adds besides the studios, e.g.
+ *   "MP4 and SVG export" — worked into the context view's copy.
  * @property {string}   [monthly]  Display price, e.g. "$8".
  * @property {string}   [yearly]   Display price, e.g. "$40".
  * @property {string}   [yearlyPerMonth] Override; derived from `yearly` if unset.
@@ -34,6 +59,9 @@ const config = {
   appName: 'Pro',
   subtitle: '',
   features: [],
+  studios: [],
+  headline: '',
+  extras: '',
   monthly: '$8',
   yearly: '$40',
   // Left unset by default: both are derived from the prices below, so a price
@@ -43,26 +71,39 @@ const config = {
   yearlyNote: '',
 };
 
+const amount = (price) => Number(String(price).replace(/[^0-9.]/g, ''));
+
+/** Percentage saved by paying yearly, or 0 when it saves nothing. */
+function yearlySavings() {
+  const m = amount(config.monthly);
+  const y = amount(config.yearly);
+  if (!m || !y) return 0;
+  return Math.max(0, Math.round(((m * 12 - y) / (m * 12)) * 100));
+}
+
 /**
  * Yearly savings, derived from the two prices rather than hardcoded.
  * Falls back to the caller's override when one was supplied.
  */
 function yearlyNote() {
   if (config.yearlyNote) return config.yearlyNote;
-  const m = Number(String(config.monthly).replace(/[^0-9.]/g, ''));
-  const y = Number(String(config.yearly).replace(/[^0-9.]/g, ''));
-  if (!m || !y) return 'Yearly';
-  const percent = Math.round(((m * 12 - y) / (m * 12)) * 100);
+  const percent = yearlySavings();
   return percent > 0 ? `Yearly · save ${percent}%` : 'Yearly';
 }
 
-/** Effective monthly cost of the yearly plan, e.g. "$3.33 / month". */
-function yearlyPerMonth() {
-  if (config.yearlyPerMonth) return config.yearlyPerMonth;
-  const y = Number(String(config.yearly).replace(/[^0-9.]/g, ''));
+/** Effective monthly cost of the yearly plan, e.g. "$3.33". */
+function yearlyMonthlyAmount() {
+  const y = amount(config.yearly);
   if (!y) return '';
   const symbol = String(config.yearly).replace(/[0-9.,\s]/g, '') || '$';
-  return `${symbol}${(y / 12).toFixed(2)} / month`;
+  return `${symbol}${(y / 12).toFixed(2)}`;
+}
+
+/** e.g. "$3.33 / month". */
+function yearlyPerMonth() {
+  if (config.yearlyPerMonth) return config.yearlyPerMonth;
+  const per = yearlyMonthlyAmount();
+  return per ? `${per} / month` : '';
 }
 
 /**
@@ -72,7 +113,11 @@ function yearlyPerMonth() {
  */
 export function configurePaywall(options = {}) {
   Object.assign(config, options);
+  // New copy starts from the default plan. The choice is otherwise kept
+  // across opens within a session.
+  _selectedPlan = 'yearly';
   if (_modalEl) {
+    closePaywall();
     _modalEl.remove();
     _modalEl = null;
   }
@@ -85,96 +130,293 @@ function escapeHtml(value) {
   );
 }
 
+/** Escapes, then turns `*word*` into <em>word</em>. */
+function emphasis(text) {
+  return escapeHtml(text).replace(/\*([^*]+)\*/g, '<em>$1</em>');
+}
+
+const NUMBER_WORDS = ['no', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+
 function ctaLabel() {
+  const verb = config.studios.length ? 'Unlock Pro' : 'Subscribe';
   return _selectedPlan === 'yearly'
-    ? `Subscribe — ${config.yearly} / year →`
-    : `Subscribe — ${config.monthly} / month →`;
+    ? `${verb} — ${config.yearly} / year →`
+    : `${verb} — ${config.monthly} / month →`;
 }
 
-function getModal() {
-  if (_modalEl) return _modalEl;
+const CLOSE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
+const LOCK_ICON = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>`;
 
-  _modalEl = document.createElement('div');
-  _modalEl.id = 'paywall-modal';
-  _modalEl.setAttribute('role', 'dialog');
-  _modalEl.setAttribute('aria-modal', 'true');
-  _modalEl.setAttribute('aria-label', `${config.appName} Pro`);
-  _modalEl.style.display = 'none';
-  _modalEl.innerHTML = `
-    <div class="paywall-backdrop"></div>
-    <div class="paywall-box">
-      <button class="paywall-close" aria-label="Close">✕</button>
-      <div class="paywall-eyebrow">${escapeHtml(config.appName)} Pro</div>
-      <div class="paywall-title">Unlock everything</div>
-      <div class="paywall-sub">${escapeHtml(config.subtitle)}</div>
-      <ul class="paywall-features">
-        ${config.features.map((f) => `<li>${escapeHtml(f)}</li>`).join('')}
-      </ul>
-      <div class="paywall-pricing">
-        <div class="paywall-plan" data-plan="monthly">
-          <div class="paywall-plan-label">Monthly</div>
-          <div class="paywall-plan-amount">${escapeHtml(config.monthly)}</div>
-          <div class="paywall-plan-period">per month</div>
-        </div>
-        <div class="paywall-plan selected" data-plan="yearly">
-          <div class="paywall-plan-label">${escapeHtml(yearlyNote())}</div>
-          <div class="paywall-plan-amount">${escapeHtml(config.yearly)}</div>
-          <div class="paywall-plan-period">${escapeHtml(yearlyPerMonth())}</div>
+function footerHtml() {
+  return `
+    <div class="paywall-footer">
+      ${LOCK_ICON}
+      <span>Secure checkout by Stripe · Cancel anytime · Already subscribed?</span>
+      <button type="button" class="paywall-signin-link">Sign in</button>
+    </div>`;
+}
+
+function studioImage(url, className) {
+  return url ? `<img class="${className}" src="${escapeHtml(url)}" alt="" decoding="async">` : '';
+}
+
+// ---- Legacy layout ---------------------------------------------------------
+
+function legacyHtml() {
+  return `
+    <button type="button" class="paywall-close" aria-label="Close">✕</button>
+    <div class="paywall-eyebrow">${escapeHtml(config.appName)} Pro</div>
+    <div class="paywall-title">Unlock everything</div>
+    <div class="paywall-sub">${escapeHtml(config.subtitle)}</div>
+    <ul class="paywall-features">
+      ${config.features.map((f) => `<li>${escapeHtml(f)}</li>`).join('')}
+    </ul>
+    <div class="paywall-pricing">
+      <div class="paywall-plan" data-plan="monthly">
+        <div class="paywall-plan-label">Monthly</div>
+        <div class="paywall-plan-amount">${escapeHtml(config.monthly)}</div>
+        <div class="paywall-plan-period">per month</div>
+      </div>
+      <div class="paywall-plan" data-plan="yearly">
+        <div class="paywall-plan-label">${escapeHtml(yearlyNote())}</div>
+        <div class="paywall-plan-amount">${escapeHtml(config.yearly)}</div>
+        <div class="paywall-plan-period">${escapeHtml(yearlyPerMonth())}</div>
+      </div>
+    </div>
+    <button type="button" class="paywall-cta btn btn-accent"></button>
+    <div class="paywall-footer">
+      Cancel anytime · Powered by Stripe ·
+      Already subscribed? <a class="paywall-signin-link">Sign in</a>
+    </div>`;
+}
+
+// ---- Showcase: gallery (no context) ----------------------------------------
+
+function galleryHtml() {
+  const savings = yearlySavings();
+  const tiles = config.studios
+    .map(
+      (s) => `
+      <div class="paywall-tile">
+        ${studioImage(s.image, 'paywall-tile-art')}
+        <div class="paywall-tile-label">
+          <span class="paywall-tile-name">${escapeHtml(s.name)}</span>
+          <span class="paywall-tile-tagline">${escapeHtml(s.tagline)}</span>
         </div>
+      </div>`
+    )
+    .join('');
+  return `
+    <div class="paywall-head">
+      <div class="paywall-eyebrow">${escapeHtml(config.appName)} Pro</div>
+      <button type="button" class="paywall-close" aria-label="Close">${CLOSE_ICON}</button>
+    </div>
+    <h2 class="paywall-headline" id="paywall-heading">${emphasis(config.headline || 'Unlock everything')}</h2>
+    ${config.subtitle ? `<p class="paywall-sub">${escapeHtml(config.subtitle)}</p>` : ''}
+    <div class="paywall-tiles">${tiles}</div>
+    <div class="paywall-buybar">
+      <div class="paywall-segmented" role="group" aria-label="Billing period">
+        <button type="button" class="paywall-plan" data-plan="yearly">Yearly${
+          savings > 0 ? ` <span class="paywall-save">−${savings}%</span>` : ''
+        }</button>
+        <button type="button" class="paywall-plan" data-plan="monthly">Monthly</button>
       </div>
-      <button class="paywall-cta btn btn-accent">${escapeHtml(ctaLabel())}</button>
-      <div class="paywall-footer">
-        Cancel anytime · Powered by Stripe ·
-        Already subscribed? <a class="paywall-signin-link">Sign in</a>
+      <div class="paywall-price">
+        <span class="paywall-price-amount"></span>
+        <span class="paywall-price-note"></span>
       </div>
+      <button type="button" class="paywall-cta"></button>
     </div>
-  `;
+    ${footerHtml()}`;
+}
 
-  document.body.appendChild(_modalEl);
+// ---- Showcase: context (opened from a locked studio) -----------------------
 
-  _modalEl.querySelector('.paywall-backdrop').addEventListener('click', closePaywall);
-  _modalEl.querySelector('.paywall-close').addEventListener('click', closePaywall);
-  _modalEl.querySelector('.paywall-signin-link').addEventListener('click', () => {
-    closePaywall();
-    signIn();
-  });
+function contextHtml(studio) {
+  const others = config.studios.filter((s) => s !== studio);
+  const count = NUMBER_WORDS[others.length] ?? String(others.length);
+  const noun = others.length === 1 ? 'studio' : 'studios';
+  const extras = config.extras ? `, with ${escapeHtml(config.extras)}` : '';
+  const savings = yearlySavings();
+  const thumbs = others
+    .map(
+      (s) => `
+      <div class="paywall-thumb">
+        <div class="paywall-thumb-frame">${studioImage(s.image, 'paywall-thumb-art')}</div>
+        <span class="paywall-thumb-name">${escapeHtml(s.name)}</span>
+      </div>`
+    )
+    .join('');
+  return `
+    <div class="paywall-hero">
+      ${studioImage(studio.heroImage || studio.image, 'paywall-hero-art')}
+      <div class="paywall-hero-chip">${escapeHtml(studio.name)}</div>
+      <div class="paywall-hero-caption">
+        <span class="paywall-hero-tagline">${escapeHtml(studio.tagline)}</span>
+        ${studio.blurb ? `<span class="paywall-hero-blurb">${escapeHtml(studio.blurb)}</span>` : ''}
+      </div>
+    </div>
+    <div class="paywall-main">
+      <div class="paywall-head">
+        <div class="paywall-eyebrow">You opened a Pro studio</div>
+        <button type="button" class="paywall-close" aria-label="Close">${CLOSE_ICON}</button>
+      </div>
+      <h2 class="paywall-headline" id="paywall-heading">${escapeHtml(studio.name)} is part of <em>Pro</em>.</h2>
+      <p class="paywall-sub">One subscription opens it — and ${count} more ${noun}${extras}.</p>
+      ${
+        others.length
+          ? `<div class="paywall-also">
+               <div class="paywall-also-label">Also included</div>
+               <div class="paywall-thumbs">${thumbs}</div>
+             </div>`
+          : ''
+      }
+      <div class="paywall-plans" role="group" aria-label="Billing period">
+        <button type="button" class="paywall-plan paywall-plan-row" data-plan="yearly">
+          <span class="paywall-radio" aria-hidden="true"></span>
+          <span class="paywall-plan-name">Yearly <span class="paywall-plan-per">${escapeHtml(yearlyPerMonth())}</span></span>
+          ${savings > 0 ? `<span class="paywall-badge">Save ${savings}%</span>` : ''}
+          <span class="paywall-plan-total">${escapeHtml(config.yearly)}</span>
+        </button>
+        <button type="button" class="paywall-plan paywall-plan-row" data-plan="monthly">
+          <span class="paywall-radio" aria-hidden="true"></span>
+          <span class="paywall-plan-name">Monthly</span>
+          <span class="paywall-plan-total">${escapeHtml(config.monthly)}</span>
+        </button>
+      </div>
+      <button type="button" class="paywall-cta"></button>
+      ${footerHtml()}
+    </div>`;
+}
+
+// ---- Shared behaviour ------------------------------------------------------
 
+/** Reflects the selected plan in every place it shows. */
+function paintPlan() {
+  if (!_modalEl) return;
   _modalEl.querySelectorAll('.paywall-plan').forEach((el) => {
-    el.addEventListener('click', () => {
-      _selectedPlan = el.dataset.plan;
-      _modalEl.querySelectorAll('.paywall-plan').forEach((p) => p.classList.remove('selected'));
-      el.classList.add('selected');
-      _modalEl.querySelector('.paywall-cta').textContent = ctaLabel();
-    });
+    const on = el.dataset.plan === _selectedPlan;
+    el.classList.toggle('selected', on);
+    if (el.tagName === 'BUTTON') el.setAttribute('aria-pressed', String(on));
   });
+  const cta = _modalEl.querySelector('.paywall-cta');
+  // The gallery prints the price right beside its button, so the button
+  // keeps to the action; the other layouts carry the price on the button.
+  const gallery = _modalEl.querySelector('.paywall-box--gallery');
+  if (cta) cta.textContent = gallery ? 'Unlock Pro →' : ctaLabel();
+  const priceAmount = _modalEl.querySelector('.paywall-price-amount');
+  const priceNote = _modalEl.querySelector('.paywall-price-note');
+  if (priceAmount && priceNote) {
+    const yearly = _selectedPlan === 'yearly';
+    priceAmount.textContent = yearly ? yearlyMonthlyAmount() : config.monthly;
+    priceNote.textContent = yearly
+      ? `/ month · ${config.yearly} billed yearly`
+      : '/ month · billed monthly';
+  }
+}
+
+function onKeydown(e) {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    closePaywall();
+  }
+}
 
-  _modalEl.querySelector('.paywall-cta').addEventListener('click', async () => {
-    const base = _selectedPlan === 'yearly' ? STRIPE_YEARLY_URL : STRIPE_MONTHLY_URL;
-    if (!base) {
-      console.warn('[paywall] Stripe payment link not configured.');
+async function checkout() {
+  const base = _selectedPlan === 'yearly' ? STRIPE_YEARLY_URL : STRIPE_MONTHLY_URL;
+  if (!base) {
+    console.warn('[paywall] Stripe payment link not configured.');
+    return;
+  }
+  // client_reference_id is how the Stripe webhook maps the completed checkout
+  // back to a Supabase user row (see supabase/functions/stripe-webhook).
+  const session = await getSession();
+  window.location.href = session?.user
+    ? `${base}?client_reference_id=${encodeURIComponent(session.user.id)}`
+    : base;
+}
+
+function getModal() {
+  if (_modalEl) return _modalEl;
+
+  _modalEl = document.createElement('div');
+  _modalEl.id = 'paywall-modal';
+  _modalEl.style.display = 'none';
+  _modalEl.innerHTML = `
+    <div class="paywall-backdrop"></div>
+    <div class="paywall-box" role="dialog" aria-modal="true"></div>`;
+  document.body.appendChild(_modalEl);
+
+  _modalEl.querySelector('.paywall-backdrop').addEventListener('click', closePaywall);
+  // One delegated handler: the box is re-rendered per open (the context view
+  // depends on which studio was clicked), so per-element listeners would have
+  // to be re-bound every time.
+  _modalEl.querySelector('.paywall-box').addEventListener('click', (e) => {
+    const target = /** @type {Element} */ (e.target);
+    if (target.closest('.paywall-close')) return closePaywall();
+    if (target.closest('.paywall-signin-link')) {
+      closePaywall();
+      signIn();
+      return;
+    }
+    const plan = target.closest('.paywall-plan');
+    if (plan) {
+      _selectedPlan = /** @type {HTMLElement} */ (plan).dataset.plan;
+      paintPlan();
       return;
     }
-    // client_reference_id is how the Stripe webhook maps the completed checkout
-    // back to a Supabase user row (see supabase/functions/stripe-webhook).
-    const session = await getSession();
-    window.location.href = session?.user
-      ? `${base}?client_reference_id=${encodeURIComponent(session.user.id)}`
-      : base;
+    if (target.closest('.paywall-cta')) checkout();
   });
 
   return _modalEl;
 }
 
-export function openPaywall() {
+/** Fills the box for this open; returns whether it is the context view. */
+function render(studioId) {
+  const box = _modalEl.querySelector('.paywall-box');
+  const studio = studioId ? config.studios.find((s) => s.id === studioId) : null;
+  let mode = 'legacy';
+  if (config.studios.length) mode = studio ? 'context' : 'gallery';
+
+  box.className = `paywall-box paywall-box--${mode}`;
+  box.innerHTML =
+    mode === 'context' ? contextHtml(studio) : mode === 'gallery' ? galleryHtml() : legacyHtml();
+  if (mode === 'legacy') {
+    box.removeAttribute('aria-labelledby');
+    box.setAttribute('aria-label', `${config.appName} Pro`);
+  } else {
+    box.removeAttribute('aria-label');
+    box.setAttribute('aria-labelledby', 'paywall-heading');
+  }
+  paintPlan();
+}
+
+/**
+ * @param {{ studio?: string }} [options] Pass the id of the locked studio the
+ *   user tried to open to show it front and centre. Without it (or with an id
+ *   not in `studios`) the gallery of every studio is shown.
+ */
+export function openPaywall(options = {}) {
   const modal = getModal();
+  render(options.studio);
+  if (modal.style.display !== 'flex') {
+    _returnFocus = /** @type {HTMLElement|null} */ (document.activeElement);
+    document.addEventListener('keydown', onKeydown);
+  }
   modal.style.display = 'flex';
   document.body.style.overflow = 'hidden';
+  /** @type {HTMLElement|null} */ (modal.querySelector('.paywall-cta'))?.focus({
+    preventScroll: true,
+  });
 }
 
 export function closePaywall() {
-  if (!_modalEl) return;
+  if (!_modalEl || _modalEl.style.display === 'none') return;
   _modalEl.style.display = 'none';
   document.body.style.overflow = '';
+  document.removeEventListener('keydown', onKeydown);
+  _returnFocus?.focus?.({ preventScroll: true });
+  _returnFocus = null;
 }
 
 /**
@@ -193,6 +435,7 @@ export function handleCheckoutSuccess(refreshFn) {
 function showToast(message) {
   const toast = document.createElement('div');
   toast.className = 'paywall-toast';
+  toast.setAttribute('role', 'status');
   toast.textContent = message;
   document.body.appendChild(toast);
   setTimeout(() => toast.classList.add('visible'), 10);