capture-flow 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,138 @@
+/**
+ * Panorama Waves: one ocean across the whole listing. A deep-blue to
+ * lagoon gradient with rolling wave lines runs from the first screenshot to
+ * the last; swell rings and a low sun sit on the seams so they continue
+ * from one slide into the next. Story: a surf and tide forecast app.
+ *
+ * Like every panorama template it designs each canvas shape: adapting a
+ * layout cannot keep pieces on the seams and keep them clear of the copy.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, canvas, circle, copyAt, device, glow, linear, onStrip, pattern, r5, ring, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const SUN = '#ffd86b';
+
+const t = typeset({
+  heading: F.sora,
+  body: F.manrope,
+  ink: '#ffffff',
+  soft: '#ffffff',
+  accent: SUN,
+  head: { weight: 700, size: 0.088, lineHeight: 1.12, letterSpacing: -0.03 },
+  sub: { weight: 500, size: 0.04 },
+});
+
+const SHADOW = { color: '#020b2480', blur: 0.07, x: 0, y: 0.03 };
+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 });
+
+/**
+ * The sea per canvas shape: decoration scale, and the heights (fractions of
+ * the canvas) of the swell rings, the sun and the two rows of waves. Smaller
+ * canvases get a smaller sea, so the pieces on the seams stay clear of the copy.
+ */
+const SEA: Record<Cls, { k: number; rings: number; sun: number; swell: number; crest: number }> = {
+  tall: { k: 1, rings: 0.66, sun: 0.6, swell: 1.05, crest: 1.11 },
+  tablet: { k: 0.72, rings: 0.68, sun: 0.66, swell: 1.04, crest: 1.09 },
+  wide: { k: 0.5, rings: 0.7, sun: 0.66, swell: 1.03, crest: 1.08 },
+};
+
+/** Everything that flows across slides, as seen from slide `i`. */
+function sea(cls: Cls, i: number): SlideElement[] {
+  const { wu } = canvas(cls);
+  const { k, rings, sun, swell, crest } = SEA[cls];
+  const size = (v: number) => r5(v * k);
+  /** Half the width of a decoration `v` u wide, in slide widths. */
+  const reach = (v: number) => (v * k) / 2 / wu;
+  // Rolling swells along the bottom: one row centred on the seams, one between them.
+  const swells = [0, 1, 2, 3, 4, 5].flatMap((X) => onStrip(i, X, reach(1.2), (x) => [circle({ name: 'Swell', x, y: swell, size: size(1.2), color: '#1b7fae', opacity: 0.5 })]));
+  const crests = [0.5, 1.5, 2.5, 3.5, 4.5].flatMap((X) => onStrip(i, X, reach(1.2), (x) => [circle({ name: 'Crest', x, y: crest, size: size(1.2), color: '#43bfd6', opacity: 0.4 })]));
+  const swellRings = (X: number, y: number) =>
+    onStrip(i, X, reach(1.48), (x) => [
+      ring({ name: 'Swell ring', x, y, size: size(1.44), stroke: 0.006, color: '#ffffff', opacity: 0.34 }),
+      ring({ name: 'Swell ring', x, y, size: size(1.12), stroke: 0.004, color: '#ffffff', opacity: 0.24 }),
+    ]);
+  return [
+    ...swellRings(1.0, rings),
+    ...swellRings(4.0, r5(rings + 0.02)),
+    // The sun going down on the seam between slides 3 | 4.
+    ...onStrip(i, 3.0, reach(0.9), (x) => [glow({ name: 'Sun glow', x, y: sun, size: size(0.82), color: '#ffb36b', opacity: 0.55 }), circle({ name: 'Sun', x, y: sun, size: size(0.5), fill: linear(180, '#fff1b0', SUN, '#ff9f5a') })]),
+    ...swells,
+    ...crests,
+  ];
+}
+
+function shot(i: number, o: DeviceOptions = {}) {
+  return (cls: Cls): SlideElement[] => {
+    if (cls === 'wide') {
+      // Copy on top and the laptop below, centred: the seams at the slide edges stay free for the sea.
+      return [...sea(cls, i), ...copyAt(t, { cls, seam: 0.2, width: 1.0, subWidth: 0.9, head: { size: 0.066 }, sub: { size: 0.03 } }), laptop({ width: 0.96, top: 0.35 })];
+    }
+    if (cls === 'tablet') {
+      return [...sea(cls, i), ...copyAt(t, { cls, seam: 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } }), pad({ width: 0.66, top: 0.3, rotation: (o.rotation ?? 0) / 2 })];
+    }
+    return [...sea(cls, i), ...copyAt(t, { seam: 0.15 }), phone({ width: 0.7, top: 0.268, ...o })];
+  };
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const panoramaWaves = template({
+  id: 'panorama-waves',
+  name: 'Panorama Waves',
+  description: 'One ocean across the whole listing: a deep-blue to lagoon gradient with rolling wave lines, swell rings and a low sun that continue from one screenshot into the next.',
+  category: 'panorama',
+  tags: ['panorama', 'ocean', 'blue', 'waves', 'continuous'],
+  apps: ['travel', 'calendar', 'social', 'fitness', 'chat', 'music', 'shop'],
+  theme: theme({
+    background: background(linear(90, '#061a44', '#0a3a7d', '#0b5a93', '#0a6585'), pattern('waves', '#ffffff', 0.08, 0.07)),
+    heading: F.sora,
+    body: F.manrope,
+    palette: ['#1aa3c7', SUN, '#ff8a5b', '#7ce0d3', '#ffffff', '#061a44'],
+    mockDark: false,
+    panorama: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Catch the *perfect* wave', subtitle: 'Hour-by-hour swell, wind and tide forecasts.' },
+        ar: { headline: 'اصطد *الموجة* المثالية', subtitle: 'توقعات الأمواج والرياح والمدّ والجزر ساعة بساعة.' },
+      },
+      shot(0),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Know *before* you go', subtitle: 'Live cams and reports from 8,000 surf spots.' },
+        ar: { headline: 'اعرف *قبل* أن تنطلق', subtitle: 'كاميرات مباشرة وتقارير من 8000 موقع لركوب الأمواج.' },
+      },
+      shot(1, { rotation: -4 }),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Your spots, *your* way', subtitle: 'Favorites, alerts and conditions at a glance.' },
+        ar: { headline: 'مواقعك *المفضّلة* دائمًا', subtitle: 'المفضّلة والتنبيهات وأحوال البحر بنظرة واحدة.' },
+      },
+      shot(2),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Chase the *sun*', subtitle: 'Sunrise sessions planned around the best light.' },
+        ar: { headline: 'طارد *الشمس*', subtitle: 'جلسات الفجر مخطّطة حول أجمل ضوء في اليوم.' },
+      },
+      shot(3, { rotation: 4 }),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Ride *together*', subtitle: 'Meet your crew at the next big swell.' },
+        ar: { headline: 'اركبوا الموج *معًا*', subtitle: 'التقِ بأصدقائك عند الموجة الكبيرة القادمة.' },
+      },
+      shot(4),
+      o,
+    ),
+  ],
+});

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

@@ -0,0 +1,98 @@
+/**
+ * Paper & Ink: a well-made notebook. Warm cotton paper with grain, Fraunces
+ * set like a book title in ink navy with terracotta highlights, fine ruled
+ * circles and a small wax-seal dot, white phones. Story: a journaling app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, circle, copyAt, device, pattern, ring, slide, solid, template, theme, typeset } from '../kit';
+
+const INK = '#1f2433';
+const TERRACOTTA = '#b5502a';
+
+const t = typeset({
+  heading: F.fraunces,
+  body: F.manrope,
+  ink: INK,
+  soft: '#4a4e5b',
+  accent: TERRACOTTA,
+  head: { weight: 600, size: 0.096, lineHeight: 1.1, letterSpacing: -0.02 },
+  sub: { weight: 500, size: 0.039, lineHeight: 1.42 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: METAL.white, shadow: { color: '#5a46303d', blur: 0.07, x: 0, y: 0.03 }, ...o });
+
+/** Fine ruled circles, like a compass drawing on the page. */
+const ruled = (x: number, y: number, s = 1): SlideElement[] => [
+  ring({ name: 'Ruled circle', x, y, size: 1.16 * s, stroke: 0.0022, color: INK, opacity: 0.18 }),
+  ring({ name: 'Ruled circle', x, y, size: 0.98 * s, stroke: 0.0022, color: INK, opacity: 0.12 }),
+];
+const seal = (x: number, y: number) => circle({ name: 'Seal', x, y, size: 0.07, color: TERRACOTTA });
+
+const top = () => copyAt(t, { seam: 0.152 });
+
+const hero = (): SlideElement[] => [...ruled(0.5, 0.62), seal(0.86, 0.33), ...top(), phone({ width: 0.78, top: 0.262 })];
+
+const gentle = (): SlideElement[] => [...ruled(0.44, 0.6, 0.9), ...top(), phone({ width: 0.78, top: 0.266, x: 0.54, rotation: -5 }), seal(0.14, 0.86)];
+
+const pages = (): SlideElement[] => [
+  ...ruled(0.5, 0.66, 1.05),
+  ...top(),
+  phone({ width: 0.6, top: 0.31, x: 0.7, rotation: 5, slot: 'second' }),
+  phone({ width: 0.62, top: 0.262, x: 0.33, rotation: -4 }),
+];
+
+const hanging = (): SlideElement[] => [...ruled(0.5, 0.36), seal(0.88, 0.62), phone({ width: 0.8, bottom: 0.675 }), ...copyAt(t, { seam: 0.82 })];
+
+const locked = (): SlideElement[] => [...ruled(0.5, 0.62, 1.1), seal(0.16, 0.34), ...top(), phone({ width: 0.76, top: 0.266 })];
+
+export const paperAndInk = template({
+  id: 'paper-and-ink',
+  name: 'Paper & Ink',
+  description: 'A well-made notebook: warm cotton paper with grain, Fraunces set like a book title in ink navy with terracotta highlights, fine ruled circles and a wax-seal dot.',
+  category: 'elegant',
+  tags: ['serif', 'paper', 'warm', 'journal', 'editorial'],
+  apps: ['tasks', 'calendar', 'social', 'chat', 'meditation', 'music'],
+  theme: theme({
+    background: background(solid('#f4eee3'), pattern('noise', '#5a4630', 0.07, 0.05)),
+    heading: F.fraunces,
+    body: F.manrope,
+    palette: [TERRACOTTA, '#3d6b8c', '#c99a3b', INK, '#f4eee3'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Write the *story* of your days', subtitle: 'A beautiful journal that grows with you.' },
+        ar: { headline: 'اكتب *حكاية* أيامك', subtitle: 'دفتر يوميات أنيق ينمو معك.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        en: { headline: 'A page a day, *gently*', subtitle: 'Thoughtful prompts for when words come slowly.' },
+        ar: { headline: 'صفحة كل يوم *بهدوء*', subtitle: 'أسئلة ملهمة حين تتأخر الكلمات في المجيء.' },
+      },
+      gentle,
+    ),
+    slide(
+      {
+        en: { headline: 'Moments worth *keeping*', subtitle: 'Add photos, places and moods to every entry.' },
+        ar: { headline: 'لحظات تستحق *الحفظ*', subtitle: 'أضف الصور والأماكن والمشاعر إلى كل تدوينة.' },
+      },
+      pages,
+    ),
+    slide(
+      {
+        en: { headline: 'Look *back*, grow forward', subtitle: 'On this day: memories from years past.' },
+        ar: { headline: 'تأمّل *الماضي* وانطلق', subtitle: 'في مثل هذا اليوم: ذكريات من أعوام مضت.' },
+      },
+      hanging,
+    ),
+    slide(
+      {
+        en: { headline: 'Yours *alone*', subtitle: 'Locked with Face ID and encrypted on your device.' },
+        ar: { headline: 'لك *وحدك*', subtitle: 'مقفل ببصمة الوجه ومشفّر على جهازك.' },
+      },
+      locked,
+    ),
+  ],
+});

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

@@ -0,0 +1,94 @@
+/**
+ * Sage: quiet and unhurried. Soft sage paper, a tonal disc that holds each
+ * phone, generous space, Manrope in deep green with a leafy highlight and a
+ * natural titanium phone. Story: a habit tracker.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, circle, copyAt, device, ring, slide, solid, template, theme, typeset } from '../kit';
+
+const DISC = '#d5ddcc';
+const t = typeset({
+  heading: F.manrope,
+  body: F.manrope,
+  ink: '#1e2a1f',
+  soft: '#475448',
+  accent: '#467446',
+  head: { weight: 700, size: 0.088, lineHeight: 1.12, letterSpacing: -0.03 },
+  sub: { weight: 500, size: 0.04, lineHeight: 1.38 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: METAL.titanium, shadow: { color: '#2d3a2a33', blur: 0.07, x: 0, y: 0.03 }, ...o });
+
+const top = () => copyAt(t, { seam: 0.155 });
+
+const hero = (): SlideElement[] => [circle({ name: 'Disc', x: 0.5, y: 0.66, size: 1.12, color: DISC }), ...top(), phone({ width: 0.74, top: 0.27 })];
+
+const offset = (): SlideElement[] => [circle({ name: 'Disc', x: 0.62, y: 0.64, size: 1.0, color: DISC }), ...top(), phone({ width: 0.72, top: 0.272, x: 0.56 })];
+
+const pair = (): SlideElement[] => [
+  circle({ name: 'Disc', x: 0.5, y: 0.7, size: 1.2, color: DISC }),
+  ...top(),
+  phone({ width: 0.56, top: 0.32, x: 0.69, slot: 'second' }),
+  phone({ width: 0.6, top: 0.275, x: 0.34 }),
+];
+
+const hanging = (): SlideElement[] => [circle({ name: 'Disc', x: 0.5, y: 0.3, size: 1.12, color: DISC }), phone({ width: 0.76, bottom: 0.655 }), ...copyAt(t, { seam: 0.815 })];
+
+const steady = (): SlideElement[] => [
+  circle({ name: 'Disc', x: 0.5, y: 0.66, size: 1.0, color: DISC }),
+  ring({ x: 0.5, y: 0.66, size: 1.22, stroke: 0.003, color: '#467446', opacity: 0.35 }),
+  ...top(),
+  phone({ width: 0.72, top: 0.275 }),
+];
+
+export const sage = template({
+  id: 'sage',
+  name: 'Sage',
+  description: 'Quiet and unhurried: soft sage paper, a tonal disc that holds each phone, generous space, Manrope in deep green with a leafy highlight and a natural titanium phone.',
+  category: 'minimal',
+  tags: ['calm', 'green', 'minimal', 'habits', 'soft'],
+  apps: ['tasks', 'fitness', 'meditation', 'calendar', 'chat', 'social'],
+  theme: theme({
+    background: background(solid('#e4e9de')),
+    heading: F.manrope,
+    body: F.manrope,
+    palette: ['#3d9a50', '#e2a54a', '#7b9cc4', '#1e2a1f', '#e4e9de'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Small habits, *big* change', subtitle: 'Build routines that actually stick.' },
+        ar: { headline: 'عادات صغيرة، *أثر* كبير', subtitle: 'ابنِ روتينًا يدوم فعلًا.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        en: { headline: 'One day at a *time*', subtitle: 'Gentle reminders, never guilt trips.' },
+        ar: { headline: 'يومًا *بيوم*', subtitle: 'تذكيرات لطيفة دون أي شعور بالذنب.' },
+      },
+      offset,
+    ),
+    slide(
+      {
+        en: { headline: 'See your *streaks*', subtitle: 'Progress you can feel, week after week.' },
+        ar: { headline: 'تابع *إنجازاتك*', subtitle: 'تقدّم تلمسه أسبوعًا بعد أسبوع.' },
+      },
+      pair,
+    ),
+    slide(
+      {
+        en: { headline: 'Mindful *mornings*', subtitle: 'Start each day with breath, water and intention.' },
+        ar: { headline: 'صباحات *واعية*', subtitle: 'ابدأ يومك بالتنفّس والماء ونيّة واضحة.' },
+      },
+      hanging,
+    ),
+    slide(
+      {
+        en: { headline: 'Quietly *motivating*', subtitle: 'No badges, no noise, just steady progress.' },
+        ar: { headline: 'تحفيز *هادئ*', subtitle: 'بلا شارات ولا ضجيج، تقدّم ثابت فقط.' },
+      },
+      steady,
+    ),
+  ],
+});

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

@@ -0,0 +1,129 @@
+/**
+ * Split Tone: two colours, one bold diagonal. Deep navy above, a slab of
+ * tangerine, cream or sky below, the phone straddling the cut. DM Sans set
+ * heavy and tight. Story: a personal finance app.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, canvas, copyAt, device, r5, rect, slide, solid, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const NAVY = '#0f1a3d';
+const TANGERINE = '#ff6b2c';
+const CREAM = '#f4efe6';
+const SKY = '#8ec5ff';
+
+const t = typeset({
+  heading: F.dmSans,
+  body: F.dmSans,
+  ink: '#ffffff',
+  soft: '#c9d2ee',
+  accent: '#ff9a5c',
+  head: { weight: 800, size: 0.094, lineHeight: 1.08, letterSpacing: -0.04 },
+  sub: { weight: 500, size: 0.04 },
+});
+
+const SHADOW = { color: '#050b2280', blur: 0.07, x: 0, y: 0.03 };
+const phone = (o: DeviceOptions) => device({ color: METAL.silver, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.silver, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.silver, shadow: SHADOW, ...o });
+
+/** Where the cut crosses the middle of each canvas, fraction of its height. */
+const EDGE: Record<Cls, number> = { tall: 0.52, tablet: 0.6, wide: 0.66 };
+
+/**
+ * The slab of colour beyond the cut: a huge rotated rectangle whose edge is
+ * the diagonal, crossing the middle of the canvas at `edge`; `above` puts
+ * the slab on the upper side of the cut.
+ */
+function slab(cls: Cls, color: string, angle: number, edge = EDGE[cls], above = false) {
+  const { wu, hu } = canvas(cls);
+  const height = 1.8 * hu;
+  const y = above ? edge - height / 2 / hu : edge + height / 2 / hu;
+  return rect({ name: 'Color slab', x: 0.5, y: r5(y), width: r5(2.8 * wu), height: r5(height), rotation: angle, radius: 0, color });
+}
+
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: seam ?? 0.2, width: 1.2, subWidth: 0.95, head: { size: 0.068 }, sub: { size: 0.03 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: seam ?? 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } });
+  return copyAt(t, { seam: seam ?? 0.15 });
+}
+
+/** One device straddling the cut. */
+function single(color: string, angle: number, o: { x?: number; rotation?: number } = {}) {
+  return (cls: Cls): SlideElement[] => {
+    if (cls === 'wide') return [slab(cls, color, angle / 2), ...copy(cls), laptop({ width: 0.98, top: 0.35 })];
+    if (cls === 'tablet') return [slab(cls, color, angle * 0.7), ...copy(cls), pad({ width: 0.72, top: 0.3, x: 0.5 + ((o.x ?? 0.5) - 0.5) / 2, rotation: (o.rotation ?? 0) / 2 })];
+    return [slab(cls, color, angle), ...copy(cls), phone({ width: 0.8, top: 0.255, x: o.x ?? 0.5, rotation: o.rotation ?? 0 })];
+  };
+}
+
+function duo(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [slab(cls, SKY, -4), ...copy(cls), laptop({ width: 0.86, top: 0.38, x: 0.42, slot: 'second' }), device({ cls, frame: 'none', width: 0.46, x: 0.74, y: 0.7, cornerRadius: 0.03, shadow: SHADOW })];
+  if (cls === 'tablet') return [slab(cls, SKY, -6), ...copy(cls), pad({ width: 0.56, top: 0.36, x: 0.68, rotation: 4, slot: 'second' }), pad({ width: 0.58, top: 0.3, x: 0.34, rotation: -3 })];
+  return [slab(cls, SKY, -8, 0.56), ...copy(cls), phone({ width: 0.6, top: 0.31, x: 0.7, rotation: 6, slot: 'second' }), phone({ width: 0.62, top: 0.26, x: 0.33, rotation: -5 })];
+}
+
+/** The cut runs high and the copy sits below it, on navy again. */
+function flipped(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [slab(cls, TANGERINE, -4, 0.42, true), laptop({ width: 0.9, top: 0.07 }), ...copy(cls, 0.83)];
+  if (cls === 'tablet') return [slab(cls, TANGERINE, -6, 0.36, true), pad({ width: 0.74, bottom: 0.68 }), ...copy(cls, 0.83)];
+  return [slab(cls, TANGERINE, -9, 0.3, true), phone({ width: 0.8, bottom: 0.68 }), ...copyAt(t, { seam: 0.81 })];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const splitTone = template({
+  id: 'split-tone',
+  name: 'Split Tone',
+  description: 'Two colours, one bold diagonal: deep navy above, a slab of tangerine, cream or sky below, and the phone straddling the cut. Heavy, tight DM Sans headlines.',
+  category: 'bold',
+  tags: ['bold', 'two-tone', 'diagonal', 'finance', 'navy'],
+  apps: ['finance', 'shop', 'chat', 'calendar', 'tasks', 'travel', 'social'],
+  theme: theme({
+    background: background(solid(NAVY)),
+    heading: F.dmSans,
+    body: F.dmSans,
+    palette: [TANGERINE, SKY, '#22c55e', CREAM, '#ffffff', NAVY],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Know where your *money* goes', subtitle: 'Every card and account, sorted automatically.' },
+        ar: { headline: 'اعرف أين تذهب *أموالك*', subtitle: 'كل بطاقاتك وحساباتك مصنّفة تلقائيًا.' },
+      },
+      single(TANGERINE, -10),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Budgets that *bend*', subtitle: 'Flexible limits that adjust to real life.' },
+        ar: { headline: 'ميزانية *مرنة*', subtitle: 'حدود إنفاق تتكيّف مع تفاصيل حياتك اليومية.' },
+      },
+      single(CREAM, 9, { x: 0.45, rotation: 7 }),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Split bills in *seconds*', subtitle: 'Settle up with friends without the awkward math.' },
+        ar: { headline: 'قسّم الفواتير في *ثوانٍ*', subtitle: 'سدّد حصتك مع الأصدقاء دون حسابات محرجة.' },
+      },
+      duo,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Save on *autopilot*', subtitle: 'Round-ups and smart rules grow your savings.' },
+        ar: { headline: 'ادّخر *تلقائيًا*', subtitle: 'تقريب المشتريات وقواعد ذكية تنمّي مدّخراتك.' },
+      },
+      flipped,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Bank-grade *security*', subtitle: 'Face ID, encryption and alerts for every payment.' },
+        ar: { headline: 'أمان *بمستوى البنوك*', subtitle: 'بصمة الوجه والتشفير وتنبيه فوري لكل عملية دفع.' },
+      },
+      single(TANGERINE, 10),
+      o,
+    ),
+  ],
+});

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

@@ -0,0 +1,127 @@
+/**
+ * Sunset Boulevard: dusk over the coast road. A violet-to-peach sky with
+ * faint waves, a setting sun behind tilted silver devices, Bricolage
+ * Grotesque headlines with butter-yellow marker highlights. Story: a
+ * road-trip planner.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, circle, copyAt, device, glow, linear, pattern, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const t = typeset({
+  heading: F.bricolage,
+  body: F.dmSans,
+  ink: '#ffffff',
+  soft: '#fbe8ff',
+  accent: '#ffd166',
+  mode: 'marker',
+  head: { weight: 760, size: 0.094, lineHeight: 1.12, letterSpacing: -0.025 },
+  sub: { weight: 500, size: 0.041 },
+});
+
+const SHADOW = { color: '#3b0a3d73', blur: 0.07, x: 0, y: 0.032 };
+const phone = (o: DeviceOptions) => device({ color: METAL.silver, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.silver, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.silver, shadow: SHADOW, ...o });
+
+/** The setting sun: a warm disc with a soft halo. */
+const sun = (x: number, y: number, size: number): SlideElement[] => [
+  glow({ name: 'Sun glow', x, y, size: size * 1.08, color: '#ff9a6b', opacity: 0.55, blur: 0.12 }),
+  circle({ name: 'Sun', x, y, size, fill: linear(180, '#ffe9a6', '#ffb37a', '#ff7e86') }),
+];
+
+/** Copy at the top, where the sky is darkest (wide canvases stack copy over the laptop). */
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: seam ?? 0.2, width: 1.2, subWidth: 0.95, head: { size: 0.068 }, sub: { size: 0.03 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: seam ?? 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } });
+  return copyAt(t, { seam: seam ?? 0.152 });
+}
+
+/** A tilted device rising from the bottom edge in front of the sun. */
+function tilted(sunAt: [number, number, number], rotation: number, x: number) {
+  return (cls: Cls): SlideElement[] => {
+    if (cls === 'wide') return [...sun(sunAt[0] * 0.6 + 0.2, 0.84, 0.9), ...copy(cls), laptop({ width: 0.98, top: 0.35, x: 0.5 })];
+    if (cls === 'tablet') return [...sun(sunAt[0], 0.74, sunAt[2] * 0.85), ...copy(cls), pad({ width: 0.72, top: 0.3, x: 0.5 + (x - 0.5) / 2, rotation: rotation / 2 })];
+    return [...sun(...sunAt), ...copy(cls), phone({ width: 0.78, top: 0.262, x, rotation })];
+  };
+}
+
+function duo(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    return [...sun(0.5, 0.86, 0.8), ...copy(cls), laptop({ width: 0.86, top: 0.38, x: 0.42, slot: 'second' }), device({ cls, frame: 'none', width: 0.46, x: 0.74, y: 0.7, cornerRadius: 0.03, shadow: SHADOW })];
+  }
+  if (cls === 'tablet') return [...sun(0.5, 0.72, 0.6), ...copy(cls), pad({ width: 0.56, top: 0.36, x: 0.68, rotation: 5, slot: 'second' }), pad({ width: 0.58, top: 0.3, x: 0.34, rotation: -4 })];
+  return [...sun(0.5, 0.5, 0.7), ...copy(cls), phone({ width: 0.6, top: 0.31, x: 0.71, rotation: 10, slot: 'second' }), phone({ width: 0.62, top: 0.262, x: 0.32, rotation: -8 })];
+}
+
+/** The sky turned upside down so copy at the bottom sits on dusk violet. */
+const DUSK_UP = background(linear(0, ['#24104f', 0], ['#6b2a8c', 0.34], ['#d4567c', 0.68], ['#ffb27a', 1]), pattern('waves', '#ffffff', 0.07, 0.06));
+
+function hanging(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...sun(0.5, 0.06, 0.7), laptop({ width: 0.9, top: 0.07 }), ...copyAt(t, { cls, seam: 0.83, width: 1.2, subWidth: 0.95, head: { size: 0.066 }, sub: { size: 0.03 } })];
+  if (cls === 'tablet') return [...sun(0.5, 0.08, 0.7), pad({ width: 0.74, bottom: 0.66, rotation: -3 }), ...copyAt(t, { cls, seam: 0.83, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } })];
+  return [...sun(0.5, 0.1, 0.9), phone({ width: 0.8, bottom: 0.655, x: 0.53, rotation: -6 }), ...copyAt(t, { seam: 0.8 })];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const sunsetBoulevard = template({
+  id: 'sunset-boulevard',
+  name: 'Sunset Boulevard',
+  description: 'Dusk over the coast road: a violet-to-peach sky with faint waves, a setting sun behind tilted silver phones and bold headlines with butter-yellow marker highlights.',
+  category: 'gradient',
+  tags: ['sunset', 'warm', 'tilted', 'marker', 'travel'],
+  apps: ['travel', 'calendar', 'music', 'tasks', 'social', 'chat', 'shop', 'finance'],
+  theme: theme({
+    background: background(linear(180, ['#24104f', 0], ['#6b2a8c', 0.36], ['#d4567c', 0.7], ['#ffb27a', 1]), pattern('waves', '#ffffff', 0.07, 0.06)),
+    heading: F.bricolage,
+    body: F.dmSans,
+    palette: ['#ff6b8a', '#ffd166', '#8b5cf6', '#ffb27a', '#ffffff', '#24104f'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Plan the *perfect* road trip', subtitle: 'Routes, stops and stays, organized on one beautiful map.' },
+        ar: { headline: 'خطّط لرحلتك *المثالية*', subtitle: 'المسارات والمحطات وأماكن الإقامة على خريطة واحدة أنيقة.' },
+        de: { headline: 'Plane den *perfekten* Roadtrip', subtitle: 'Routen, Stopps und Unterkünfte übersichtlich auf einer Karte.' },
+      },
+      tilted([0.5, 0.55, 0.92], 8, 0.46),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Travel with *friends*', subtitle: 'Share plans, split costs and vote on the next stop.' },
+        ar: { headline: 'سافر مع *أصدقائك*', subtitle: 'شاركوا الخطط وقسّموا التكاليف واختاروا المحطة التالية معًا.' },
+        de: { headline: 'Reise mit *Freunden*', subtitle: 'Teilt Pläne und Kosten und stimmt über den nächsten Halt ab.' },
+      },
+      duo,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Every stop, *one* tap', subtitle: 'Save cafés, viewpoints and hidden gems along the way.' },
+        ar: { headline: 'كل محطة *بلمسة* واحدة', subtitle: 'احفظ المقاهي والإطلالات والأماكن المميزة على طول الطريق.' },
+        de: { headline: 'Jeder Stopp mit *einem* Tipp', subtitle: 'Speichere Cafés, Aussichtspunkte und Geheimtipps unterwegs.' },
+      },
+      hanging,
+      { ...o, background: DUSK_UP },
+    ),
+    slide(
+      {
+        en: { headline: 'Golden hour, *guaranteed*', subtitle: 'Sunset times and scenic detours for every route.' },
+        ar: { headline: 'لحظة الغروب *مضمونة*', subtitle: 'مواعيد الغروب وطرق بديلة خلابة لكل مسار.' },
+        de: { headline: 'Goldene Stunde *garantiert*', subtitle: 'Sonnenuntergangszeiten und Panoramaumwege für jede Route.' },
+      },
+      tilted([0.22, 0.47, 0.62], -8, 0.55),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Offline, *anywhere*', subtitle: 'Maps and tickets that keep working far beyond the signal.' },
+        ar: { headline: 'خرائطك تعمل *دائمًا*', subtitle: 'خرائط وتذاكر متاحة حتى في أبعد الأماكن عن التغطية.' },
+        de: { headline: 'Offline, *überall*', subtitle: 'Karten und Tickets, die auch ohne Empfang funktionieren.' },
+      },
+      tilted([0.5, 0.6, 1.16], 0, 0.5),
+      o,
+    ),
+  ],
+});

package/vendor/wajha/templates/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Built-in templates shipped with the app. Owned by the templates work package.
+ * Each template lives in its own module under ./builtin/ (authored with the
+ * builders in ./kit.ts) and is listed here in the order the template picker
+ * shows them: alternating light and dark, calm and loud, so any row of the
+ * grid looks varied. The first one is the default (`?demo`).
+ */
+import type { Template } from '../model/types';
+import { aurora } from './builtin/aurora';
+import { bubblegum } from './builtin/bubblegum';
+import { citrusPop } from './builtin/citrusPop';
+import { clayGarden } from './builtin/clayGarden';
+import { desertDune } from './builtin/desertDune';
+import { glassPrism } from './builtin/glassPrism';
+import { launchpad } from './builtin/launchpad';
+import { loudAndClear } from './builtin/loudAndClear';
+import { midnightNeon } from './builtin/midnightNeon';
+import { monoSwiss } from './builtin/monoSwiss';
+import { noirGold } from './builtin/noirGold';
+import { noor } from './builtin/noor';
+import { obsidian } from './builtin/obsidian';
+import { panoramaPeaks } from './builtin/panoramaPeaks';
+import { panoramaRibbon } from './builtin/panoramaRibbon';
+import { panoramaWaves } from './builtin/panoramaWaves';
+import { paperAndInk } from './builtin/paperAndInk';
+import { sage } from './builtin/sage';
+import { splitTone } from './builtin/splitTone';
+import { sunsetBoulevard } from './builtin/sunsetBoulevard';
+
+export const BUILTIN_TEMPLATES: Template[] = [
+  aurora,
+  sunsetBoulevard,
+  monoSwiss,
+  midnightNeon,
+  clayGarden,
+  loudAndClear,
+  panoramaWaves,
+  paperAndInk,
+  glassPrism,
+  obsidian,
+  citrusPop,
+  noor,
+  panoramaPeaks,
+  bubblegum,
+  launchpad,
+  noirGold,
+  splitTone,
+  desertDune,
+  panoramaRibbon,
+  sage,
+];
+
+export function builtinTemplate(id: string): Template | undefined {
+  return BUILTIN_TEMPLATES.find((t) => t.id === id);
+}