capture-flow 0.0.0-stage → 0.1.0

package/vendor/wajha/templates/builtin/glassPrism.ts

@@ -0,0 +1,139 @@
+/**
+ * Glass Prism: light through frosted glass. An iridescent pastel mesh,
+ * translucent glass cards floating behind white phones, crisp Plus Jakarta
+ * Sans headlines with violet highlights. Story: a calendar and planner.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, copyAt, device, glow, linear, mesh, pattern, rect, ring, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const t = typeset({
+  heading: F.jakarta,
+  body: F.jakarta,
+  ink: '#15122b',
+  soft: '#4a4766',
+  accent: '#6a4dff',
+  head: { weight: 800, size: 0.088, lineHeight: 1.12, letterSpacing: -0.03 },
+  sub: { weight: 500, size: 0.04 },
+});
+
+const SHADOW = { color: '#3b2f8a38', blur: 0.08, x: 0, y: 0.035 };
+const phone = (o: DeviceOptions) => device({ color: METAL.white, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.white, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.silver, shadow: SHADOW, ...o });
+
+/** A frosted glass card. */
+const card = (x: number, y: number, w: number, h: number, rotation: number) =>
+  rect({ name: 'Glass card', x, y, width: w, height: h, rotation, radius: 0.16, fill: linear(150, '#ffffffd9', '#ffffff4d'), opacity: 0.9 });
+
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: seam ?? 0.215, width: 1.2, subWidth: 0.95, head: { size: 0.066 }, sub: { size: 0.03 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: seam ?? 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.066 }, sub: { size: 0.031 } });
+  return copyAt(t, { seam: seam ?? 0.15 });
+}
+
+function hero(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [card(0.17, 0.64, 0.42, 0.38, -8), card(0.84, 0.72, 0.36, 0.34, 7), ...copy(cls), laptop({ width: 1.04, top: 0.35 })];
+  if (cls === 'tablet') return [card(0.16, 0.62, 0.4, 0.5, -9), card(0.86, 0.78, 0.36, 0.44, 8), ...copy(cls), pad({ width: 0.74, top: 0.29 })];
+  return [card(0.17, 0.5, 0.44, 0.62, -10), card(0.85, 0.68, 0.4, 0.5, 8), ...copy(cls), phone({ width: 0.8, top: 0.25 })];
+}
+
+function pair(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    return [
+      card(0.2, 0.7, 0.4, 0.34, -6),
+      ...copy(cls),
+      laptop({ width: 0.92, top: 0.37, x: 0.43, slot: 'second' }),
+      device({ cls, frame: 'none', width: 0.5, x: 0.76, y: 0.68, cornerRadius: 0.03, shadow: SHADOW }),
+    ];
+  }
+  if (cls === 'tablet') return [card(0.5, 0.7, 0.8, 0.5, -4), ...copy(cls), pad({ width: 0.58, top: 0.36, x: 0.66, slot: 'second' }), pad({ width: 0.58, top: 0.3, x: 0.36 })];
+  return [card(0.5, 0.62, 0.86, 0.56, -5), ...copy(cls), phone({ width: 0.6, top: 0.3, x: 0.7, slot: 'second' }), phone({ width: 0.62, top: 0.26, x: 0.33 })];
+}
+
+function upside(cls: Cls): SlideElement[] {
+  if (cls !== 'tall') return hero(cls);
+  return [card(0.82, 0.3, 0.42, 0.56, 9), card(0.16, 0.5, 0.36, 0.46, -8), phone({ width: 0.82, bottom: 0.69 }), ...copy(cls, 0.81)];
+}
+
+function side(cls: Cls): SlideElement[] {
+  if (cls !== 'tall') return hero(cls);
+  return [
+    ring({ x: 0.2, y: 0.5, size: 0.5, stroke: 0.006, color: '#ffffff', opacity: 0.9 }),
+    card(0.22, 0.66, 0.4, 0.5, -10),
+    ...copy(cls),
+    phone({ width: 0.76, top: 0.27, x: 0.55, rotation: 6 }),
+  ];
+}
+
+function halo(cls: Cls): SlideElement[] {
+  const rings = (x: number, y: number, s: number) => [
+    glow({ x, y, size: 0.9 * s, color: '#ffffff', opacity: 0.7, blur: 0.1 }),
+    ring({ x, y, size: 1.04 * s, stroke: 0.006, color: '#ffffff', opacity: 0.85 }),
+  ];
+  // Low behind the laptop: the halo stays clear of the subtitle, also on the feature graphic where the copy grows.
+  if (cls === 'wide') return [...rings(0.5, 0.78, 0.76), ...copy(cls), laptop({ width: 1.04, top: 0.35 })];
+  if (cls === 'tablet') return [...rings(0.5, 0.72, 1.05), ...copy(cls), pad({ width: 0.74, top: 0.29 })];
+  return [...rings(0.5, 0.6, 1.05), ...copy(cls), phone({ width: 0.78, top: 0.255 })];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const glassPrism = template({
+  id: 'glass-prism',
+  name: 'Glass Prism',
+  description: 'Light through frosted glass: an iridescent pastel mesh, translucent glass cards floating behind white phones and crisp headlines with violet highlights.',
+  category: 'gradient',
+  tags: ['pastel', 'glass', 'light', 'productivity', 'iridescent'],
+  apps: ['calendar', 'tasks', 'chat', 'meditation', 'finance', 'fitness', 'social', 'travel'],
+  theme: theme({
+    background: background(
+      mesh('#f3f0ff', [0.08, 0.06, '#d4c4ff', 0.55], [0.96, 0.28, '#bcdcff', 0.5], [0.1, 0.84, '#ffd3e6', 0.5], [0.92, 0.94, '#c4f1e2', 0.46]),
+      pattern('noise', '#4b3fb3', 0.03, 0.05),
+    ),
+    heading: F.jakarta,
+    body: F.jakarta,
+    palette: ['#6a4dff', '#ff7eb6', '#4cc9f0', '#2ec4a6', '#ffffff', '#15122b'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Your week, *beautifully* planned', subtitle: 'Calendar, tasks and notes in one calm, colorful space.' },
+        ar: { headline: 'أسبوعك *منظّم* بأناقة', subtitle: 'التقويم والمهام والملاحظات في مساحة واحدة هادئة وملوّنة.' },
+      },
+      hero,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Time blocks that *flow*', subtitle: 'Drag tasks into your day and watch the plan come together.' },
+        ar: { headline: 'جدول يومك *بسلاسة*', subtitle: 'اسحب مهامك إلى يومك وشاهد خطتك تكتمل أمامك.' },
+      },
+      pair,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Focus on what *matters*', subtitle: 'Smart priorities surface the next right thing to do.' },
+        ar: { headline: 'ركّز على *الأهم*', subtitle: 'أولويات ذكية تُبرز لك الخطوة التالية الصحيحة.' },
+      },
+      upside,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Plan *together*', subtitle: 'Shared calendars keep the whole team in sync.' },
+        ar: { headline: 'خطّطوا *معًا*', subtitle: 'تقاويم مشتركة تُبقي الفريق بأكمله على تواصل.' },
+      },
+      side,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Always *in sync*', subtitle: 'iPhone, iPad and Mac, updated the moment plans change.' },
+        ar: { headline: 'متزامن *دائمًا*', subtitle: 'على آيفون وآيباد وماك، تتحدّث خطتك فور تعديلها.' },
+      },
+      halo,
+      o,
+    ),
+  ],
+});

package/vendor/wajha/templates/builtin/launchpad.ts

@@ -0,0 +1,140 @@
+/**
+ * Launchpad: a clean product page for web apps. Cool paper grey with a dot
+ * grid, Space Grotesk headlines with electric-blue highlights, light
+ * browser windows (a phone beside them where it helps). Story: a privacy
+ * friendly web analytics tool.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, copyAt, device, glow, pattern, ring, slide, solid, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const BLUE = '#2563eb';
+const t = typeset({
+  heading: F.spaceGrotesk,
+  body: F.inter,
+  ink: '#0b1220',
+  soft: '#475266',
+  accent: BLUE,
+  head: { weight: 700, size: 0.088, lineHeight: 1.1, letterSpacing: -0.035 },
+  sub: { weight: 450, size: 0.039, lineHeight: 1.38 },
+});
+
+const SHADOW = { color: '#0f172a33', blur: 0.07, x: 0, y: 0.03 };
+const browser = (o: DeviceOptions) => device({ frame: 'browser', color: '#ffffff', finish: 'matte', shadow: SHADOW, ...o });
+const phone = (o: DeviceOptions) => device({ color: METAL.silver, shadow: SHADOW, ...o });
+
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: seam ?? 0.5, x: 0.21, width: 0.46, align: 'start', head: { size: 0.068, maxLines: 3 }, sub: { size: 0.031, maxLines: 3 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: seam ?? 0.165, width: 0.82, subWidth: 0.66, head: { size: 0.066 }, sub: { size: 0.031 } });
+  return copyAt(t, { seam: seam ?? 0.15 });
+}
+
+/** A faint blue light under the windows: depth on a flat page. */
+const halo = (x: number, y: number, size: number) => glow({ x, y, size, color: BLUE, opacity: 0.16, blur: 0.16 });
+
+function hero(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [halo(0.69, 0.55, 0.8), ...copy(cls), browser({ cls, width: 0.96, x: 0.69, y: 0.5 })];
+  if (cls === 'tablet') return [halo(0.5, 0.75, 0.9), ...copy(cls), browser({ cls, width: 0.84, top: 0.29 })];
+  return [halo(0.5, 0.62, 0.95), ...copy(cls), browser({ width: 0.8, top: 0.24 })];
+}
+
+function stacked(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    return [halo(0.7, 0.55, 0.8), ...copy(cls), browser({ cls, width: 0.74, x: 0.74, y: 0.58, slot: 'second' }), browser({ cls, width: 0.74, x: 0.635, y: 0.43 })];
+  }
+  if (cls === 'tablet') return [halo(0.5, 0.75, 0.9), ...copy(cls), browser({ cls, width: 0.66, top: 0.36, x: 0.62, slot: 'second' }), browser({ cls, width: 0.66, top: 0.3, x: 0.4 })];
+  return [halo(0.5, 0.62, 0.95), ...copy(cls), browser({ width: 0.62, top: 0.3, x: 0.66, slot: 'second' }), browser({ width: 0.64, top: 0.255, x: 0.36 })];
+}
+
+function upside(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    // Mirrored: the browser on the left, the copy in the right column.
+    return [
+      halo(0.31, 0.55, 0.8),
+      ...copyAt(t, { cls, seam: 0.5, x: 0.775, width: 0.46, align: 'start', head: { size: 0.07, maxLines: 3 }, sub: { size: 0.032, maxLines: 3 } }),
+      browser({ cls, width: 0.9, x: 0.31, y: 0.5 }),
+    ];
+  }
+  if (cls !== 'tall') return hero(cls);
+  return [halo(0.5, 0.36, 0.95), browser({ width: 0.82, bottom: 0.69 }), ...copy(cls, 0.81)];
+}
+
+/** Desktop and phone side by side: the same app on every screen. */
+function everywhere(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [halo(0.66, 0.55, 0.8), ...copy(cls), browser({ cls, width: 0.88, x: 0.66, y: 0.47 }), device({ cls, frame: 'none', width: 0.36, x: 0.88, y: 0.72, cornerRadius: 0.04, shadow: SHADOW, slot: 'second' })];
+  if (cls === 'tablet') return [halo(0.5, 0.75, 0.9), ...copy(cls), browser({ cls, width: 0.8, top: 0.29, x: 0.44 }), device({ cls, frame: 'ipad', color: METAL.silver, width: 0.36, top: 0.52, x: 0.8, slot: 'second', shadow: SHADOW })];
+  return [halo(0.5, 0.62, 0.95), ...copy(cls), browser({ width: 0.76, top: 0.255, x: 0.42 }), phone({ width: 0.42, top: 0.48, x: 0.76, slot: 'second' })];
+}
+
+function orbit(cls: Cls): SlideElement[] {
+  const rings = (x: number, y: number, s: number) => [
+    ring({ name: 'Orbit', x, y, size: 1.1 * s, stroke: 0.003, color: BLUE, opacity: 0.22 }),
+    ring({ name: 'Orbit', x, y, size: 0.82 * s, stroke: 0.003, color: BLUE, opacity: 0.3 }),
+  ];
+  if (cls === 'wide') return [...rings(0.69, 0.5, 0.95), ...hero(cls)];
+  if (cls === 'tablet') return [...rings(0.5, 0.7, 1.1), ...hero(cls)];
+  return [...rings(0.5, 0.6, 1.05), ...hero(cls)];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const launchpad = template({
+  id: 'launchpad',
+  name: 'Launchpad',
+  description: 'A clean product page for web apps: cool grey paper with a dot grid, Space Grotesk headlines with electric-blue highlights, and light browser windows that work on every canvas.',
+  category: 'minimal',
+  tags: ['web app', 'browser', 'saas', 'light', 'clean'],
+  apps: ['finance', 'fitness', 'tasks', 'calendar', 'chat', 'shop', 'social'],
+  theme: theme({
+    background: background(solid('#f5f6f8'), pattern('dots', '#0f172a', 0.09, 0.045)),
+    heading: F.spaceGrotesk,
+    body: F.inter,
+    palette: [BLUE, '#14b8a6', '#f59e0b', '#ef4444', '#ffffff', '#0b1220'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Analytics, *simplified*', subtitle: 'Understand your traffic in seconds, without cookies.' },
+        ar: { headline: 'تحليلات *أبسط*', subtitle: 'افهم زيارات موقعك في ثوانٍ، دون ملفات تعريف الارتباط.' },
+        de: { headline: 'Analytics, *vereinfacht*', subtitle: 'Verstehe deinen Traffic in Sekunden, ganz ohne Cookies.' },
+      },
+      hero,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Real-time, *really*', subtitle: 'Watch visitors arrive the moment you launch.' },
+        ar: { headline: 'لحظةً *بلحظة*', subtitle: 'شاهد الزوّار يصلون فور إطلاق موقعك.' },
+        de: { headline: 'Echtzeit, *wirklich*', subtitle: 'Sieh deine Besucher, sobald du live gehst.' },
+      },
+      stacked,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Goals that *convert*', subtitle: 'Track sign-ups, sales and funnels with zero setup.' },
+        ar: { headline: 'أهداف *تحقق* النتائج', subtitle: 'تتبّع التسجيلات والمبيعات ومسارات التحويل دون أي إعداد.' },
+        de: { headline: 'Ziele, die *konvertieren*', subtitle: 'Verfolge Anmeldungen, Verkäufe und Funnels ohne Einrichtung.' },
+      },
+      upside,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Reports your team *loves*', subtitle: 'Live dashboards on every screen, shared with one link.' },
+        ar: { headline: 'تقارير *يحبها* فريقك', subtitle: 'لوحات بيانات مباشرة على كل شاشة، تشاركها برابط واحد.' },
+        de: { headline: 'Berichte, die dein Team *liebt*', subtitle: 'Live-Dashboards auf jedem Bildschirm, geteilt per Link.' },
+      },
+      everywhere,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Privacy *first*', subtitle: 'No cookies, no tracking, fully GDPR compliant.' },
+        ar: { headline: 'خصوصية *بلا تنازلات*', subtitle: 'بلا ملفات تعريف ارتباط ولا تتبّع، ومتوافق مع اللائحة الأوروبية.' },
+        de: { headline: 'Datenschutz *zuerst*', subtitle: 'Keine Cookies, kein Tracking, voll DSGVO-konform.' },
+      },
+      orbit,
+      o,
+    ),
+  ],
+});

package/vendor/wajha/templates/builtin/loudAndClear.ts

@@ -0,0 +1,109 @@
+/**
+ * Loud & Clear: poster energy. Cobalt and paper white slides in turn,
+ * oversized Outfit Black set in capitals, neon lime accents, compact black
+ * phones. Story: a training app.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, background, circle, copyAt, device, slide, solid, template, theme, typeset, type Cls } from '../kit';
+
+const COBALT = '#2340ff';
+const LIME = '#d7ff3a';
+const PAPER = '#f3f3ee';
+
+const head = { weight: 900, size: 0.16, lineHeight: 1.0, letterSpacing: -0.01, transform: 'uppercase' as const, maxLines: 3, width: 0.92 };
+const sub = { weight: 500, size: 0.04, lineHeight: 1.32 };
+
+const blue = typeset({ heading: F.outfit, body: F.outfit, ink: '#ffffff', soft: '#e3e8ff', accent: LIME, head, sub });
+const paper = typeset({ heading: F.outfit, body: F.outfit, ink: COBALT, soft: '#363b57', accent: LIME, mode: 'marker', head, sub });
+
+const SHADOW = { color: '#0a0f4d59', blur: 0.06, x: 0, y: 0.03 };
+const phone = (o: Parameters<typeof device>[0]) => device({ color: '#1b1b1d', finish: 'matte', width: 0.66, top: 0.4, shadow: SHADOW, ...o });
+
+/** Big headline over a compact device, with one bold disc behind it. */
+function poster(onPaper: boolean, o: { disc?: [number, number, number]; rotation?: number; x?: number } = {}) {
+  return (cls: Cls): SlideElement[] => {
+    const t = onPaper ? paper : blue;
+    const [dx, dy, ds] = o.disc ?? [0.84, 0.8, 0.72];
+    const disc = (x: number, y: number, size: number) => circle({ name: 'Disc', x, y, size, color: onPaper ? COBALT : LIME, opacity: onPaper ? 1 : 0.95 });
+    if (cls === 'wide') {
+      return [
+        disc(0.8, 0.84, 0.8),
+        ...copyAt(t, { cls, seam: 0.56, x: 0.26, width: 0.66, head: { size: 0.12 }, sub: { size: 0.032, width: 0.6 } }),
+        device({ cls, frame: 'macbook', color: '#2b2c31', width: 0.74, x: 0.745, y: 0.5, rotation: (o.rotation ?? 0) / 2, shadow: SHADOW }),
+      ];
+    }
+    if (cls === 'tablet') {
+      return [
+        disc(dx, dy, ds * 0.9),
+        ...copyAt(t, { cls, seam: 0.25, head: { size: 0.12 }, sub: { size: 0.032, width: 0.7 } }),
+        device({ cls, frame: 'ipad', color: '#1b1b1d', finish: 'matte', width: 0.68, top: 0.375, x: o.x ?? 0.5, rotation: (o.rotation ?? 0) / 2, shadow: SHADOW }),
+      ];
+    }
+    return [disc(dx, dy, ds), ...copyAt(t, { seam: 0.305 }), phone({ rotation: o.rotation ?? 0, x: o.x ?? 0.5 })];
+  };
+}
+
+const o3 = { classes: ALL_CLASSES };
+const PAPER_BG = background(solid(PAPER));
+
+export const loudAndClear = template({
+  id: 'loud-and-clear',
+  name: 'Loud & Clear',
+  description: 'Poster energy: cobalt and paper-white slides in turn, oversized Outfit Black capitals, neon lime accents and compact black phones.',
+  category: 'bold',
+  tags: ['bold', 'uppercase', 'poster', 'fitness', 'high contrast'],
+  apps: ['fitness', 'travel', 'music', 'calendar', 'social', 'chat', 'meditation', 'tasks'],
+  theme: theme({
+    background: background(solid(COBALT)),
+    heading: F.outfit,
+    body: F.outfit,
+    palette: [COBALT, LIME, '#ff4d2e', '#111111', PAPER],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Train *harder*', subtitle: 'Workouts that adapt to you, every single day.' },
+        ar: { headline: 'تمرّن *بقوة*', subtitle: 'تمارين تتكيّف معك يومًا بعد يوم.' },
+        de: { headline: 'Trainiere *härter*', subtitle: 'Workouts, die sich jeden Tag an dich anpassen.' },
+      },
+      poster(false),
+      o3,
+    ),
+    slide(
+      {
+        en: { headline: 'Lift. Run. *Repeat.*', subtitle: '500+ guided sessions for strength, cardio and mobility.' },
+        ar: { headline: 'ارفع. اركض. *كرّر.*', subtitle: 'أكثر من 500 جلسة موجّهة للقوة واللياقة والمرونة.' },
+        de: { headline: 'Heben. Laufen. *Wiederholen.*', subtitle: 'Über 500 geführte Einheiten für Kraft, Ausdauer und Mobilität.' },
+      },
+      poster(true, { disc: [0.14, 0.86, 0.62], rotation: -6, x: 0.53 }),
+      { ...o3, background: PAPER_BG },
+    ),
+    slide(
+      {
+        en: { headline: 'Every rep *counts*', subtitle: 'Live stats and form tips while you move.' },
+        ar: { headline: 'كل تكرار *يُحسب*', subtitle: 'إحصاءات مباشرة ونصائح للأداء الصحيح أثناء التمرين.' },
+        de: { headline: 'Jede Wiederholung *zählt*', subtitle: 'Live-Werte und Techniktipps, während du trainierst.' },
+      },
+      poster(false, { disc: [0.5, 0.92, 1.1] }),
+      o3,
+    ),
+    slide(
+      {
+        en: { headline: 'Beat your *best*', subtitle: 'Personal records, streaks and weekly goals.' },
+        ar: { headline: 'حطّم *أرقامك*', subtitle: 'أرقامك القياسية وسلاسل إنجازك وأهدافك الأسبوعية.' },
+        de: { headline: 'Schlag deine *Bestzeit*', subtitle: 'Persönliche Rekorde, Serien und Wochenziele.' },
+      },
+      poster(true, { disc: [0.86, 0.78, 0.7], rotation: 6, x: 0.47 }),
+      { ...o3, background: PAPER_BG },
+    ),
+    slide(
+      {
+        en: { headline: 'Join the *crew*', subtitle: 'Challenges with friends keep you coming back.' },
+        ar: { headline: 'انضم إلى *الفريق*', subtitle: 'تحديات مع الأصدقاء تُبقي حماسك متّقدًا.' },
+        de: { headline: 'Werde Teil der *Crew*', subtitle: 'Challenges mit Freunden halten dich motiviert.' },
+      },
+      poster(false, { disc: [0.18, 0.78, 0.64] }),
+      o3,
+    ),
+  ],
+});

package/vendor/wajha/templates/builtin/midnightNeon.ts

@@ -0,0 +1,108 @@
+/**
+ * Midnight Neon: after dark. A violet night fading to black over a cyan
+ * synthwave grid, neon tube rings in magenta and cyan, Space Grotesk set in
+ * capitals, black phones. Story: a nightlife and live music app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, copyAt, device, glow, pattern, radial, ring, slide, template, theme, typeset } from '../kit';
+
+const PINK = '#ff2bd6';
+const CYAN = '#00e5ff';
+
+const t = typeset({
+  heading: F.spaceGrotesk,
+  body: F.spaceGrotesk,
+  ink: '#ffffff',
+  soft: '#d8d1f4',
+  accent: '#ff5ddc',
+  head: { weight: 700, size: 0.084, lineHeight: 1.12, letterSpacing: 0.005, transform: 'uppercase' },
+  sub: { weight: 400, size: 0.04 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: METAL.black, shadow: { color: '#000000b3', blur: 0.08, x: 0, y: 0.035 }, ...o });
+
+/** A neon tube: a coloured glow with a hot white core. */
+const neon = (x: number, y: number, size: number, color: string): SlideElement[] => [
+  ring({ name: 'Neon tube', x, y, size, stroke: 0.014, color, blur: 0.035, opacity: 0.95 }),
+  ring({ name: 'Neon core', x, y, size: size - 0.009, stroke: 0.004, color: '#fff4fd', opacity: 0.95 }),
+];
+
+const lights = (flip = false): SlideElement[] => [
+  glow({ x: flip ? 0.86 : 0.14, y: 0.5, size: 0.7, color: PINK, opacity: 0.4 }),
+  glow({ x: flip ? 0.16 : 0.86, y: 0.78, size: 0.62, color: CYAN, opacity: 0.32 }),
+];
+
+const top = () => copyAt(t, { seam: 0.15 });
+
+const hero = (): SlideElement[] => [...lights(), ...neon(0.5, 0.6, 1.02, PINK), ...top(), phone({ width: 0.78, top: 0.255 })];
+
+const tilted = (): SlideElement[] => [glow({ x: 0.1, y: 0.04, size: 0.34, color: PINK, opacity: 0.34 }), ...neon(0.84, 0.36, 0.42, CYAN), ...top(), phone({ width: 0.78, top: 0.265, x: 0.47, rotation: 8 })];
+
+const crowd = (): SlideElement[] => [
+  ...lights(),
+  ...top(),
+  phone({ width: 0.6, top: 0.31, x: 0.7, rotation: 7, slot: 'second' }),
+  phone({ width: 0.63, top: 0.26, x: 0.33, rotation: -6 }),
+];
+
+const hanging = (): SlideElement[] => [
+  glow({ x: 0.5, y: 0.34, size: 0.9, color: PINK, opacity: 0.36 }),
+  ...neon(0.5, 0.33, 1.0, CYAN),
+  phone({ width: 0.8, bottom: 0.68 }),
+  ...copyAt(t, { seam: 0.81 }),
+];
+
+const pair = (): SlideElement[] => [...neon(0.36, 0.56, 0.9, PINK), ...neon(0.66, 0.68, 0.9, CYAN), ...top(), phone({ width: 0.76, top: 0.26 })];
+
+export const midnightNeon = template({
+  id: 'midnight-neon',
+  name: 'Midnight Neon',
+  description: 'After dark: a violet night fading to black over a cyan synthwave grid, neon tube rings in magenta and cyan, capital Space Grotesk headlines and black phones.',
+  category: 'dark',
+  tags: ['neon', 'night', 'music', 'synthwave', 'glow'],
+  apps: ['music', 'social', 'chat', 'calendar', 'shop', 'travel', 'finance'],
+  theme: theme({
+    background: background(radial(0.5, 0, 1.05, ['#3a0f63', 0], ['#14072b', 0.5], ['#07050d', 1]), pattern('grid', CYAN, 0.07, 0.1)),
+    heading: F.spaceGrotesk,
+    body: F.spaceGrotesk,
+    palette: ['#ff4fd8', CYAN, '#7c4dff', '#ffd23f', '#ffffff', '#07050d'],
+    mockDark: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Find your *night*', subtitle: 'The best gigs, clubs and DJ sets in your city.' },
+        ar: { headline: 'اعثر على *سهرتك*', subtitle: 'أفضل الحفلات والعروض الموسيقية في مدينتك.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        en: { headline: 'Tickets in *one tap*', subtitle: 'Skip the line with passes that live in your wallet.' },
+        ar: { headline: 'تذكرتك *بلمسة*', subtitle: 'تجاوز الطوابير بتذاكر محفوظة في محفظتك الرقمية.' },
+      },
+      tilted,
+    ),
+    slide(
+      {
+        en: { headline: 'Go *together*', subtitle: 'See where friends are heading and join the plan.' },
+        ar: { headline: 'اذهبوا *معًا*', subtitle: 'اعرف وجهة أصدقائك وانضم إلى خطتهم.' },
+      },
+      crowd,
+    ),
+    slide(
+      {
+        en: { headline: 'Never miss a *drop*', subtitle: 'Alerts the moment your favorite artists announce.' },
+        ar: { headline: 'لا تفوّت أي *حفلة*', subtitle: 'تنبيهات فورية حين يعلن فنانوك المفضّلون عن عروضهم.' },
+      },
+      hanging,
+    ),
+    slide(
+      {
+        en: { headline: 'Relive the *set*', subtitle: 'Playlists from every show you go to.' },
+        ar: { headline: 'عِش *اللحظة* من جديد', subtitle: 'قوائم تشغيل من كل حفلة تحضرها.' },
+      },
+      pair,
+    ),
+  ],
+});

package/vendor/wajha/templates/builtin/monoSwiss.ts

@@ -0,0 +1,149 @@
+/**
+ * Mono Swiss: International Typographic Style. Warm paper white on a
+ * six-column hairline grid, flush-left Inter set tight and large, a single
+ * signal red, bare screenshots placed on the grid. Story: a notes app.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, background, canvas, copyAt, device, pattern, rect, r5, slide, solid, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const RED = '#cc2a18';
+const t = typeset({
+  heading: F.inter,
+  body: F.inter,
+  ink: '#0e0e0e',
+  soft: '#3a3a3a',
+  accent: RED,
+  align: 'start',
+  head: { weight: 800, size: 0.108, lineHeight: 1.06, letterSpacing: -0.045, maxLines: 3 },
+  sub: { weight: 450, size: 0.038, lineHeight: 1.4 },
+  eyebrow: { color: '#0e0e0e', highlight: RED, size: 0.028, letterSpacing: 0.12, weight: 700 },
+});
+
+/** The grid: 0.168u modules with 0.084u margins (the background pattern draws the same lines). */
+const M = 0.168;
+const edge = (k: number) => 0.084 + M * k;
+
+/** Element centre x (canvas fraction) of a box spanning grid lines a..b. */
+const spanX = (cls: Cls, a: number, b: number) => r5((edge(a) + edge(b)) / 2 / canvas(cls).wu);
+const spanW = (a: number, b: number) => r5(edge(b) - edge(a));
+/** A grid line as a fraction of the canvas height. */
+const row = (cls: Cls, k: number) => r5(edge(k) / canvas(cls).hu);
+
+const SHADOW = { color: '#0000002e', blur: 0.035, x: 0, y: 0.018 };
+const shot = (cls: Cls, a: number, b: number, topRow: number, o: DeviceOptions = {}) =>
+  device({ cls, frame: 'none', cornerRadius: 0.07, shadow: SHADOW, x: spanX(cls, a, b), width: spanW(a, b), top: row(cls, topRow), ...o });
+
+/** A solid red module, the one loud element on the page. */
+const block = (cls: Cls, col: number, rowK: number, size = 1) =>
+  rect({ name: 'Red block', x: spanX(cls, col, col + size), y: r5((edge(rowK) + (M * size) / 2) / canvas(cls).hu), size: M * size, radius: 0, color: RED });
+
+/** Eyebrow on the top margin, headline + subtitle meeting at a grid line. */
+function copy(cls: Cls, seamRow: number, o: { head?: number; subTo?: number } = {}): SlideElement[] {
+  const wide = cls === 'wide';
+  const to = wide ? 4 : 5;
+  return [
+    t.eyebrow({ x: spanX(cls, 0, to), width: spanW(0, to), y: row(cls, 0) }),
+    ...copyAt(t, {
+      cls,
+      seam: row(cls, seamRow),
+      x: spanX(cls, 0, to),
+      width: spanW(0, to),
+      head: { size: o.head ?? (cls === 'tall' ? 0.108 : 0.084) },
+      sub: { x: spanX(cls, 0, o.subTo ?? (wide ? 4 : 4)), width: spanW(0, o.subTo ?? 4), size: cls === 'tall' ? 0.038 : 0.03 },
+    }),
+  ];
+}
+
+function think(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...copy(cls, 3, { head: 0.1 }), shot(cls, 5, 9, 1), block(cls, 0, 4.5)];
+  if (cls === 'tablet') return [...copy(cls, 2.5, { head: 0.11 }), shot(cls, 2, 5, 3.6), block(cls, 0, 6)];
+  return [...copy(cls, 3.5, { head: 0.135 }), shot(cls, 2, 5, 5.5), block(cls, 0, 11)];
+}
+
+function focus(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...copy(cls, 3), shot(cls, 4.5, 9, 0.8)];
+  if (cls === 'tablet') return [...copy(cls, 2.5), shot(cls, 1, 5, 3.6)];
+  return [...copy(cls, 3), shot(cls, 1, 5, 4.4)];
+}
+
+function organize(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...copy(cls, 3), shot(cls, 6, 9, 2, { slot: 'second' }), shot(cls, 4.5, 7.5, 0.8)];
+  if (cls === 'tablet') return [...copy(cls, 2.5), shot(cls, 2.5, 5, 4.4, { slot: 'second' }), shot(cls, 0, 2.5, 3.6)];
+  return [...copy(cls, 3), shot(cls, 2.5, 5, 5.4, { slot: 'second' }), shot(cls, 0, 2.5, 4.4)];
+}
+
+function search(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...copy(cls, 3), shot(cls, 4.5, 9, 0.8), block(cls, 0, 4.5)];
+  if (cls === 'tablet') return [...copy(cls, 2.5), shot(cls, 0, 4, 3.6), block(cls, 4, 6)];
+  return [...copy(cls, 3), shot(cls, 0, 4, 4.4), block(cls, 4, 11)];
+}
+
+function secure(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...copy(cls, 3), shot(cls, 4.5, 9, 0.8)];
+  if (cls === 'tablet') return [...copy(cls, 2.5), shot(cls, 1, 5, 3.6)];
+  return [...copy(cls, 3), shot(cls, 1, 5, 4.4)];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const monoSwiss = template({
+  id: 'mono-swiss',
+  name: 'Mono Swiss',
+  description: 'International Typographic Style: paper white on a hairline grid, flush-left Inter set tight and large, one signal red, and bare screenshots placed on the grid.',
+  category: 'minimal',
+  tags: ['swiss', 'grid', 'typography', 'monochrome', 'notes'],
+  apps: ['tasks', 'calendar', 'chat', 'finance', 'meditation', 'social', 'shop'],
+  theme: theme({
+    background: background(solid('#f1f0eb'), pattern('grid', '#111111', 0.06, M)),
+    heading: F.inter,
+    body: F.inter,
+    palette: [RED, '#111111', '#7a7a7a', '#d9d7d0', '#f1f0eb'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { eyebrow: '*01* — Capture', headline: 'Think *clearly.*', subtitle: 'Plain-text notes that stay out of your way.' },
+        ar: { eyebrow: '*01* — التدوين', headline: 'فكّر *بوضوح.*', subtitle: 'ملاحظات نصية بسيطة لا تشتّت انتباهك.' },
+        de: { eyebrow: '*01* — Notieren', headline: 'Denk *klar.*', subtitle: 'Schlichte Notizen, die dir nicht im Weg stehen.' },
+      },
+      think,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: '*02* — Focus', headline: 'Write without *noise*', subtitle: 'A distraction-free editor with nothing but your words.' },
+        ar: { eyebrow: '*02* — التركيز', headline: 'اكتب *بلا ضجيج*', subtitle: 'محرّر خالٍ من المشتّتات، لا شيء فيه سوى كلماتك.' },
+        de: { eyebrow: '*02* — Fokus', headline: 'Schreiben ohne *Lärm*', subtitle: 'Ein ablenkungsfreier Editor, nur du und deine Worte.' },
+      },
+      focus,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: '*03* — Organize', headline: 'Everything in its *place*', subtitle: 'Tags, folders and links that connect your ideas.' },
+        ar: { eyebrow: '*03* — التنظيم', headline: 'كل شيء في *مكانه*', subtitle: 'وسوم ومجلدات وروابط تصل أفكارك ببعضها.' },
+        de: { eyebrow: '*03* — Ordnen', headline: 'Alles an seinem *Platz*', subtitle: 'Tags, Ordner und Links, die deine Ideen verbinden.' },
+      },
+      organize,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: '*04* — Search', headline: 'Find *anything* in seconds', subtitle: 'Instant search across every note you have ever written.' },
+        ar: { eyebrow: '*04* — البحث', headline: 'اعثر على *أي شيء* في ثوانٍ', subtitle: 'بحث فوري في كل ملاحظة كتبتها يومًا.' },
+        de: { eyebrow: '*04* — Suchen', headline: 'Finde *alles* in Sekunden', subtitle: 'Sofortsuche in jeder Notiz, die du je geschrieben hast.' },
+      },
+      search,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: '*05* — Sync', headline: 'Private by *design*', subtitle: 'End-to-end encrypted and synced across your devices.' },
+        ar: { eyebrow: '*05* — المزامنة', headline: 'الخصوصية *أولًا*', subtitle: 'تشفير تام بين الطرفين ومزامنة على جميع أجهزتك.' },
+        de: { eyebrow: '*05* — Sync', headline: 'Privat aus *Prinzip*', subtitle: 'Ende-zu-Ende-verschlüsselt und auf allen Geräten synchron.' },
+      },
+      secure,
+      o,
+    ),
+  ],
+});