capture-flow 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,163 @@
+/**
+ * Aurora: northern lights over a midnight sky. A violet / teal / rose mesh
+ * with film grain, Sora display type, mint highlights and graphite devices
+ * floating in soft glows. Story: a sleep and meditation app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, circle, copyAt, device, glow, mesh, pattern, ring, template, theme, typeset, type Cls, type DeviceOptions, type SlideSpec } from '../kit';
+
+const t = typeset({
+  heading: F.sora,
+  body: F.inter,
+  ink: '#ffffff',
+  soft: '#ebe8ff',
+  accent: '#7cf5d6',
+  head: { weight: 700, size: 0.09, lineHeight: 1.12, letterSpacing: -0.03 },
+  sub: { weight: 450, size: 0.041 },
+});
+
+const SHADOW = { color: '#05031aa6', blur: 0.08, x: 0, y: 0.035 };
+const phone = (o: DeviceOptions) => device({ color: METAL.graphite, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.graphite, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.graphite, shadow: SHADOW, ...o });
+
+/** Copy at the top (tall, tablet) or in the left column (wide). */
+function copy(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: 0.5, x: 0.22, width: 0.46, align: 'start', head: { size: 0.072, maxLines: 3 }, sub: { size: 0.033, maxLines: 3 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: 0.165, width: 0.8, subWidth: 0.62, head: { size: 0.068 }, sub: { size: 0.032 } });
+  return copyAt(t, { seam: 0.15 });
+}
+
+/** A few stars in the night sky, clear of the copy and the devices. */
+function stars(cls: Cls): SlideElement[] {
+  const spots: Record<Cls, [number, number, number][]> = {
+    tall: [[0.05, 0.05, 0.012], [0.95, 0.034, 0.009], [0.04, 0.2, 0.008], [0.965, 0.165, 0.012]],
+    tablet: [[0.05, 0.05, 0.01], [0.95, 0.04, 0.008], [0.04, 0.2, 0.007], [0.96, 0.17, 0.01]],
+    wide: [[0.03, 0.09, 0.012], [0.42, 0.06, 0.008], [0.97, 0.05, 0.01], [0.05, 0.9, 0.008]],
+  };
+  return spots[cls].map(([x, y, size], i) => circle({ name: 'Star', x, y, size, color: '#ffffff', opacity: i % 2 ? 0.6 : 0.85 }));
+}
+
+/** Two lights behind the devices; `flip` mirrors them. */
+function lights(cls: Cls, flip = false): SlideElement[] {
+  if (cls === 'wide') return [glow({ x: 0.62, y: 0.4, size: 0.75, color: '#7c4dff', opacity: 0.5 }), glow({ x: 0.9, y: 0.82, size: 0.5, color: '#16c8b4', opacity: 0.35 })];
+  const y = cls === 'tablet' ? 0.6 : 0.5;
+  return [
+    glow({ x: flip ? 0.8 : 0.2, y, size: 0.78, color: '#7c4dff', opacity: 0.5 }),
+    glow({ x: flip ? 0.18 : 0.82, y: y + 0.3, size: 0.6, color: '#16c8b4', opacity: 0.32 }),
+  ];
+}
+
+/** The same calm hero on every canvas: copy on top, the device rising from the bottom edge. */
+function hero(cls: Cls, flip = false): SlideElement[] {
+  if (cls === 'wide') return [...stars(cls), ...lights(cls), ...copy(cls), laptop({ width: 0.9, x: 0.68, y: 0.53 })];
+  if (cls === 'tablet') return [...stars(cls), ...lights(cls, flip), ...copy(cls), pad({ width: 0.78, top: 0.285 })];
+  return [...stars(cls), ...lights(cls, flip), ...copy(cls), phone({ width: 0.84, top: 0.235 })];
+}
+
+function tilted(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    // Mirrored: the laptop on the left, the copy in the right column.
+    return [
+      ...stars(cls),
+      glow({ x: 0.3, y: 0.4, size: 0.75, color: '#7c4dff', opacity: 0.5 }),
+      glow({ x: 0.1, y: 0.82, size: 0.5, color: '#16c8b4', opacity: 0.35 }),
+      ...copyAt(t, { cls, seam: 0.5, x: 0.77, width: 0.48, align: 'start', head: { size: 0.074, maxLines: 3 }, sub: { size: 0.034, maxLines: 3 } }),
+      laptop({ width: 0.86, x: 0.31, y: 0.53 }),
+    ];
+  }
+  return cls === 'tall' ? [...lights(cls, true), ...copy(cls), phone({ width: 0.8, top: 0.255, x: 0.53, rotation: -8 })] : hero(cls, true);
+}
+
+function pair(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    return [
+      ...lights(cls),
+      ...copy(cls),
+      laptop({ width: 0.78, x: 0.72, y: 0.6, slot: 'second', opacity: 1 }),
+      device({ cls, frame: 'none', width: 0.5, x: 0.55, y: 0.42, cornerRadius: 0.025, shadow: SHADOW }),
+    ];
+  }
+  if (cls === 'tablet') {
+    return [...lights(cls), ...copy(cls), pad({ width: 0.6, top: 0.36, x: 0.66, slot: 'second' }), pad({ width: 0.6, top: 0.3, x: 0.36 })];
+  }
+  return [
+    ...lights(cls),
+    ...copy(cls),
+    phone({ width: 0.6, top: 0.3, x: 0.7, rotation: 6, slot: 'second' }),
+    phone({ width: 0.64, top: 0.255, x: 0.34, rotation: -4 }),
+  ];
+}
+
+function upside(cls: Cls): SlideElement[] {
+  if (cls !== 'tall') return hero(cls);
+  return [
+    glow({ x: 0.28, y: 0.3, size: 0.85, color: '#7c4dff', opacity: 0.5 }),
+    glow({ x: 0.86, y: 0.6, size: 0.55, color: '#ff5fb8', opacity: 0.28 }),
+    phone({ width: 0.84, bottom: 0.69 }),
+    ...copyAt(t, { seam: 0.81 }),
+  ];
+}
+
+function halo(cls: Cls): SlideElement[] {
+  const rings = (y: number, s: number) => [
+    ring({ name: 'Halo', x: 0.5, y, size: 1.2 * s, stroke: 0.003, color: '#ffffff', opacity: 0.16 }),
+    ring({ name: 'Halo', x: 0.5, y, size: 0.98 * s, stroke: 0.004, color: '#7cf5d6', opacity: 0.3 }),
+  ];
+  if (cls === 'wide') return [...lights(cls), ...rings(0.53, 0.8).map((r) => ({ ...r, x: 0.68 })), ...copy(cls), laptop({ width: 0.9, x: 0.68, y: 0.53 })];
+  if (cls === 'tablet') return [...lights(cls), ...rings(0.72, 1.05), ...copy(cls), pad({ width: 0.74, top: 0.3 })];
+  return [...lights(cls), ...rings(0.62, 1), ...copy(cls), phone({ width: 0.78, top: 0.255 })];
+}
+
+const slide = (build: (cls: Cls) => SlideElement[], copyText: SlideSpec['copy']): SlideSpec => ({
+  copy: copyText,
+  tall: build('tall'),
+  tablet: build('tablet'),
+  wide: build('wide'),
+});
+
+export const aurora = template({
+  id: 'aurora',
+  name: 'Aurora',
+  description: 'Northern lights over a midnight sky: a violet and teal mesh with film grain, Sora headlines in white and mint, and graphite devices floating in soft glows.',
+  category: 'gradient',
+  tags: ['mesh', 'dark', 'glow', 'calm', 'wellness'],
+  apps: ['meditation', 'music', 'calendar', 'fitness', 'tasks', 'chat'],
+  theme: theme({
+    background: background(
+      mesh('#0a0820', [0.16, 0.06, '#4b23d6', 0.55], [0.04, 0.78, '#a3237f', 0.5], [0.98, 0.52, '#0e9e93', 0.4], [0.86, 1, '#1f3bd6', 0.48]),
+      pattern('noise', '#ffffff', 0.06, 0.05),
+    ),
+    heading: F.sora,
+    body: F.inter,
+    palette: ['#7c5cff', '#2ee6c5', '#ff5fb8', '#ffffff', '#0a0820'],
+    mockDark: true,
+  }),
+  slides: [
+    slide(hero, {
+      en: { headline: 'Sleep *deeper* tonight', subtitle: 'Soundscapes and stories that help you drift off in minutes.' },
+      ar: { headline: 'نومٌ *أعمق* كل ليلة', subtitle: 'أصوات هادئة وقصص تساعدك على الاسترخاء والنوم في دقائق.' },
+      de: { headline: 'Heute Nacht *tiefer* schlafen', subtitle: 'Klangwelten und Geschichten, mit denen du in Minuten einschläfst.' },
+    }),
+    slide(tilted, {
+      en: { headline: 'Breathe in *calm*', subtitle: 'Guided sessions for stress, focus and slower mornings.' },
+      ar: { headline: 'تنفّس *بهدوء*', subtitle: 'جلسات موجّهة تخفف التوتر وتعزز تركيزك كل صباح.' },
+      de: { headline: 'Atme *Ruhe* ein', subtitle: 'Geführte Übungen gegen Stress, für Fokus und entspannte Morgen.' },
+    }),
+    slide(pair, {
+      en: { headline: 'See your *progress*', subtitle: 'Streaks, moods and sleep scores in one calm view.' },
+      ar: { headline: 'تابع *تقدّمك* بوضوح', subtitle: 'سلاسل الإنجاز ومزاجك وجودة نومك في مكان واحد.' },
+      de: { headline: 'Sieh deinen *Fortschritt*', subtitle: 'Serien, Stimmungen und Schlafwerte auf einen Blick.' },
+    }),
+    slide(upside, {
+      en: { headline: 'A story for *every* night', subtitle: 'Hundreds of bedtime stories, read by soothing voices.' },
+      ar: { headline: 'قصة *لكل* ليلة', subtitle: 'مئات القصص الهادئة بأصوات تبعث على السكينة.' },
+      de: { headline: 'Für *jede* Nacht eine Geschichte', subtitle: 'Hunderte Gutenachtgeschichten, gelesen von ruhigen Stimmen.' },
+    }),
+    slide(halo, {
+      en: { headline: 'Wake up *refreshed*', subtitle: 'A smart alarm that follows your natural rhythm.' },
+      ar: { headline: 'استيقظ *بنشاط*', subtitle: 'منبّه ذكي يوقظك في اللحظة المناسبة من دورة نومك.' },
+      de: { headline: 'Erholt *aufwachen*', subtitle: 'Ein smarter Wecker, der deinem natürlichen Rhythmus folgt.' },
+    }),
+  ],
+});

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

@@ -0,0 +1,132 @@
+/**
+ * Bubblegum: pure fun. Candy pink with a white dot screen, confetti, a
+ * jelly blob behind white phones at jaunty angles, round Rubik headlines
+ * with sunny marker highlights. Story: a social app for friend groups.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, background, blob, circle, copyAt, device, linear, pattern, ring, slide, template, theme, typeset, type Cls } from '../kit';
+
+const t = typeset({
+  heading: F.rubik,
+  body: F.rubik,
+  ink: '#2b0b3f',
+  soft: '#4a1a5c',
+  accent: '#fff36b',
+  mode: 'marker',
+  head: { weight: 800, size: 0.096, lineHeight: 1.12, letterSpacing: -0.02 },
+  sub: { weight: 500, size: 0.041 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: '#ffffff', finish: 'matte', shadow: { color: '#7a1f5c4d', blur: 0.06, x: 0, y: 0.03 }, ...o });
+
+/** Confetti: a handful of small dots in party colours. */
+const confetti = (spots: [number, number, number, string][]): SlideElement[] => spots.map(([x, y, size, color]) => circle({ name: 'Confetti', x, y, size, color }));
+
+const top = () => copyAt(t, { seam: 0.152 });
+
+const hero = (): SlideElement[] => [
+  blob({ x: 0.56, y: 0.6, width: 1.0, height: 0.86, seed: 3, color: '#a98bff' }),
+  ...confetti([[0.1, 0.33, 0.06, '#fff36b'], [0.9, 0.44, 0.08, '#ffffff'], [0.14, 0.86, 0.05, '#6ee7c8']]),
+  ...top(),
+  phone({ width: 0.78, top: 0.264, x: 0.56, rotation: -10 }),
+];
+
+const pair = (): SlideElement[] => [
+  blob({ x: 0.5, y: 0.7, width: 1.15, height: 0.8, seed: 8, color: '#6ee7c8' }),
+  ...confetti([[0.08, 0.4, 0.07, '#fff36b'], [0.93, 0.33, 0.05, '#a98bff']]),
+  ...top(),
+  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 }),
+];
+
+const tipped = (): SlideElement[] => [
+  blob({ x: 0.42, y: 0.62, width: 0.95, height: 0.85, seed: 13, color: '#fff36b' }),
+  ...confetti([[0.9, 0.36, 0.07, '#a98bff'], [0.86, 0.84, 0.05, '#ffffff']]),
+  ...top(),
+  phone({ width: 0.78, top: 0.264, x: 0.47, rotation: 10 }),
+];
+
+const hanging = (): SlideElement[] => [
+  blob({ x: 0.5, y: 0.32, width: 1.1, height: 0.9, seed: 17, color: '#a98bff' }),
+  ...confetti([[0.12, 0.7, 0.06, '#fff36b'], [0.9, 0.66, 0.07, '#6ee7c8']]),
+  phone({ width: 0.8, bottom: 0.665, x: 0.5, rotation: 6 }),
+  ...copyAt(t, { seam: 0.81 }),
+];
+
+const sticker = (): SlideElement[] => [
+  ring({ x: 0.5, y: 0.6, size: 1.05, stroke: 0.03, color: '#ffffff', opacity: 0.85 }),
+  ...confetti([[0.1, 0.36, 0.07, '#fff36b'], [0.92, 0.5, 0.06, '#a98bff'], [0.08, 0.78, 0.05, '#6ee7c8']]),
+  ...top(),
+  phone({ width: 0.78, top: 0.258 }),
+];
+
+/** Mac: copy in the left column, the laptop on a jelly blob on the right. */
+function wide(variant: number): SlideElement[] {
+  const blobs = ['#a98bff', '#6ee7c8', '#fff36b', '#a98bff', '#ffffff'];
+  return [
+    blob({ x: 0.7, y: 0.56, width: 0.95, height: 0.8, seed: 3 + variant * 5, color: blobs[variant % blobs.length], opacity: variant === 4 ? 0.7 : 1 }),
+    ...confetti([[0.52, 0.14, 0.05, '#fff36b'], [0.96, 0.2, 0.06, '#ffffff'], [0.93, 0.88, 0.045, '#6ee7c8']]),
+    ...copyAt(t, { cls: 'wide', seam: 0.5, x: 0.235, width: 0.5, align: 'start', head: { size: 0.076, maxLines: 3 }, sub: { size: 0.034, maxLines: 3 } }),
+    device({ cls: 'wide', frame: 'macbook', color: '#e4e4e7', width: 0.84, x: 0.7, y: 0.5, rotation: variant % 2 ? 3 : -3, shadow: { color: '#7a1f5c4d', blur: 0.06, x: 0, y: 0.03 } }),
+  ];
+}
+
+const both = (tall: () => SlideElement[], variant: number) => (cls: Cls) => (cls === 'wide' ? wide(variant) : tall());
+const WIDE = { classes: ['tall', 'wide'] as Cls[] };
+
+export const bubblegum = template({
+  id: 'bubblegum',
+  name: 'Bubblegum',
+  description: 'Pure fun: candy pink with a white dot screen, confetti and jelly blobs behind white phones at jaunty angles, round Rubik headlines with sunny marker highlights.',
+  category: 'playful',
+  tags: ['pink', 'fun', 'social', 'marker', 'confetti'],
+  apps: ['social', 'chat', 'music', 'shop', 'calendar', 'travel'],
+  theme: theme({
+    background: background(linear(165, '#ffb8dd', '#ff8ec9'), pattern('dots', '#ffffff', 0.32, 0.06)),
+    heading: F.rubik,
+    body: F.rubik,
+    palette: ['#8b5cf6', '#fff36b', '#2ed3a8', '#ff4fa3', '#ffffff', '#2b0b3f'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Hang out *more*', subtitle: 'Find a time that works for everyone, instantly.' },
+        ar: { headline: 'التقوا *أكثر*', subtitle: 'اعثروا على وقت يناسب الجميع في لحظة.' },
+      },
+      both(hero, 0),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Chat in *color*', subtitle: 'Stickers, voice notes and reactions that pop.' },
+        ar: { headline: 'دردشة *ملوّنة*', subtitle: 'ملصقات ورسائل صوتية وتفاعلات مبهجة.' },
+      },
+      both(pair, 1),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Share the *moment*', subtitle: 'Photo dumps your friends will actually see.' },
+        ar: { headline: 'شارك *اللحظة*', subtitle: 'صور يراها أصدقاؤك فعلًا، أولًا بأول.' },
+      },
+      both(tipped, 2),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Polls for *everything*', subtitle: 'Pizza or tacos? Let the group decide.' },
+        ar: { headline: 'تصويت على *كل شيء*', subtitle: 'بيتزا أم برغر؟ دع المجموعة تقرّر.' },
+      },
+      both(hanging, 3),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Your people, *close*', subtitle: 'Private circles for besties, family and teams.' },
+        ar: { headline: 'أحبّتك *بقربك*', subtitle: 'دوائر خاصة للأصدقاء المقرّبين والعائلة والفرق.' },
+      },
+      both(sticker, 4),
+      WIDE,
+    ),
+  ],
+});

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

@@ -0,0 +1,124 @@
+/**
+ * Citrus Pop: fresh and loud. Lemon yellow with a dot screen, heavy black
+ * Plus Jakarta Sans with orange marker highlights, citrus-slice discs and
+ * a leaf, white phones tipped at playful angles. Story: a recipe and meal
+ * kit app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, background, blob, circle, copyAt, device, pattern, ring, slide, solid, template, theme, typeset, type Cls } from '../kit';
+
+const LEMON = '#ffd43b';
+const ORANGE = '#ff7a1a';
+
+const t = typeset({
+  heading: F.jakarta,
+  body: F.jakarta,
+  ink: '#161616',
+  soft: '#3d3519',
+  accent: '#ff5a1f',
+  mode: 'marker',
+  head: { weight: 800, size: 0.096, lineHeight: 1.1, letterSpacing: -0.04 },
+  sub: { weight: 600, size: 0.04 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: '#fafafa', finish: 'matte', shadow: { color: '#6b4a0059', blur: 0.06, x: 0, y: 0.03 }, ...o });
+
+/** An orange slice: the fruit and the pale ring of its rind. */
+const slice = (x: number, y: number, size: number): SlideElement[] => [
+  circle({ name: 'Orange slice', x, y, size, color: ORANGE }),
+  ring({ name: 'Rind', x, y, size: size * 0.84, stroke: size * 0.035, color: '#ffe3b0' }),
+];
+const leaf = (x: number, y: number, size: number, rotation: number) => blob({ name: 'Leaf', x, y, width: size, height: size * 0.56, rotation, seed: 5, color: '#2fb36a' });
+
+const top = () => copyAt(t, { seam: 0.152 });
+
+const hero = (): SlideElement[] => [...slice(0.88, 0.42, 0.52), leaf(0.1, 0.36, 0.26, -30), ...top(), phone({ width: 0.78, top: 0.262, x: 0.54, rotation: -9 })];
+
+const classic = (): SlideElement[] => [...slice(0.1, 0.84, 0.6), ...slice(0.92, 0.5, 0.3), ...top(), phone({ width: 0.8, top: 0.255 })];
+
+const duo = (): SlideElement[] => [
+  ...slice(0.5, 0.68, 0.9),
+  ...top(),
+  phone({ width: 0.6, top: 0.3, x: 0.71, rotation: 9, slot: 'second' }),
+  phone({ width: 0.62, top: 0.26, x: 0.32, rotation: -7 }),
+];
+
+const hanging = (): SlideElement[] => [...slice(0.86, 0.56, 0.4), leaf(0.14, 0.6, 0.3, 24), phone({ width: 0.8, bottom: 0.67, x: 0.48, rotation: 5 }), ...copyAt(t, { seam: 0.81 })];
+
+const tipped = (): SlideElement[] => [...slice(0.12, 0.46, 0.46), leaf(0.9, 0.38, 0.24, 40), ...top(), phone({ width: 0.78, top: 0.262, x: 0.46, rotation: 9 })];
+
+/** Mac: copy in the left column, the laptop on the right with the fruit around it. */
+function wide(variant: number): SlideElement[] {
+  const fruit: SlideElement[][] = [
+    [...slice(0.93, 0.18, 0.34), leaf(0.6, 0.88, 0.2, -20)],
+    [...slice(0.6, 0.86, 0.36), ...slice(0.96, 0.3, 0.2)],
+    [...slice(0.9, 0.86, 0.42), leaf(0.97, 0.16, 0.2, 30)],
+    [...slice(0.94, 0.62, 0.3), leaf(0.6, 0.14, 0.2, 24)],
+    [...slice(0.6, 0.16, 0.3), leaf(0.95, 0.84, 0.22, 40)],
+  ];
+  return [
+    ...fruit[variant % fruit.length],
+    ...copyAt(t, { cls: 'wide', seam: 0.5, x: 0.235, width: 0.5, align: 'start', head: { size: 0.076, maxLines: 3 }, sub: { size: 0.034, maxLines: 3 } }),
+    device({ cls: 'wide', frame: 'macbook', color: '#e4e4e7', width: 0.86, x: 0.69, y: 0.5, shadow: { color: '#6b4a0059', blur: 0.06, x: 0, y: 0.03 } }),
+  ];
+}
+
+const both = (tall: () => SlideElement[], variant: number) => (cls: Cls) => (cls === 'wide' ? wide(variant) : tall());
+const WIDE = { classes: ['tall', 'wide'] as Cls[] };
+
+export const citrusPop = template({
+  id: 'citrus-pop',
+  name: 'Citrus Pop',
+  description: 'Fresh and loud: lemon yellow with a dot screen, heavy black headlines with orange marker highlights, citrus slices and white phones tipped at playful angles.',
+  category: 'bold',
+  tags: ['yellow', 'food', 'marker', 'playful', 'bright'],
+  apps: ['shop', 'calendar', 'tasks', 'chat', 'social', 'travel', 'music'],
+  theme: theme({
+    background: background(solid(LEMON), pattern('dots', '#1a1a1a', 0.08, 0.05)),
+    heading: F.jakarta,
+    body: F.jakarta,
+    palette: ['#ff5a1f', '#2fb36a', '#161616', LEMON, '#ffffff'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Dinner, *done* in 20', subtitle: 'Fresh recipes with every ingredient, delivered.' },
+        ar: { headline: 'عشاؤك *جاهز* في 20 دقيقة', subtitle: 'وصفات طازجة مع كل مكوّناتها حتى باب منزلك.' },
+      },
+      both(hero, 0),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Cook like a *pro*', subtitle: 'Step-by-step videos make every dish foolproof.' },
+        ar: { headline: 'اطبخ *كالمحترفين*', subtitle: 'فيديوهات خطوة بخطوة تضمن نجاح كل طبق.' },
+      },
+      both(classic, 1),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Plan your *week*', subtitle: 'Pick meals on Sunday, enjoy them all week.' },
+        ar: { headline: 'خطّط *لأسبوعك*', subtitle: 'اختر وجباتك يوم الأحد واستمتع بها طوال الأسبوع.' },
+      },
+      both(duo, 2),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Fresh, *local*, seasonal', subtitle: 'Ingredients from farms near you, at their peak.' },
+        ar: { headline: 'طازج *ومحلي* وموسمي', subtitle: 'مكوّنات من مزارع قريبة منك في أفضل مواسمها.' },
+      },
+      both(hanging, 3),
+      WIDE,
+    ),
+    slide(
+      {
+        en: { headline: 'Share the *flavor*', subtitle: 'Save favorites and cook together with friends.' },
+        ar: { headline: 'شارك *النكهة*', subtitle: 'احفظ وصفاتك المفضّلة واطبخ مع أصدقائك.' },
+      },
+      both(tipped, 4),
+      WIDE,
+    ),
+  ],
+});

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

@@ -0,0 +1,114 @@
+/**
+ * Clay Garden: soft, hand-made, happy. Warm cream with pastel blobs, clay
+ * phones in sage, peach, lilac, butter and sky with matching bezels,
+ * friendly Outfit headlines with terracotta highlights. Story: a plant
+ * care app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, background, blob, circle, copyAt, device, radial, slide, template, theme, typeset } from '../kit';
+
+const CLAY = { sage: '#a8cdb1', peach: '#f4bea3', lilac: '#c9b8f0', butter: '#f2d98f', sky: '#acd0ee' } as const;
+const SOFT = { sage: '#d3e8d6', peach: '#fbdccb', lilac: '#e6dcfa', butter: '#f8eabd', sky: '#d4e7f7' } as const;
+
+const t = typeset({
+  heading: F.outfit,
+  body: F.dmSans,
+  ink: '#24382b',
+  soft: '#4b5a50',
+  accent: '#d45d38',
+  head: { weight: 700, size: 0.094, lineHeight: 1.1, letterSpacing: -0.025 },
+  sub: { weight: 500, size: 0.041 },
+});
+
+const clay = (color: string, o: Parameters<typeof device>[0]) => device({ color, finish: 'clay', bezel: 'match', shadow: { color: '#5a4a3240', blur: 0.06, x: 0, y: 0.028 }, ...o });
+
+const top = () => copyAt(t, { seam: 0.152 });
+
+const hero = (): SlideElement[] => [
+  blob({ x: 0.5, y: 0.62, width: 1.1, height: 1.0, seed: 11, color: SOFT.sage }),
+  circle({ x: 0.9, y: 0.36, size: 0.18, color: SOFT.peach }),
+  circle({ x: 0.08, y: 0.05, size: 0.07, color: SOFT.butter }),
+  ...top(),
+  clay(CLAY.sage, { width: 0.78, top: 0.258 }),
+];
+
+const pair = (): SlideElement[] => [
+  blob({ x: 0.72, y: 0.6, width: 0.8, height: 0.74, seed: 4, color: SOFT.peach }),
+  blob({ x: 0.26, y: 0.78, width: 0.8, height: 0.7, seed: 9, color: SOFT.lilac }),
+  ...top(),
+  clay(CLAY.peach, { width: 0.6, top: 0.31, x: 0.7, rotation: 6, slot: 'second' }),
+  clay(CLAY.lilac, { width: 0.62, top: 0.262, x: 0.33, rotation: -5 }),
+];
+
+const tilted = (): SlideElement[] => [
+  blob({ x: 0.36, y: 0.58, width: 1.0, height: 0.9, seed: 21, color: SOFT.butter }),
+  circle({ x: 0.12, y: 0.4, size: 0.14, color: SOFT.sky }),
+  ...top(),
+  clay(CLAY.butter, { width: 0.78, top: 0.266, x: 0.53, rotation: -8 }),
+];
+
+const hanging = (): SlideElement[] => [
+  blob({ x: 0.5, y: 0.34, width: 1.1, height: 0.95, seed: 15, color: SOFT.sky }),
+  circle({ x: 0.86, y: 0.7, size: 0.16, color: SOFT.sage }),
+  clay(CLAY.sky, { width: 0.8, bottom: 0.67 }),
+  ...copyAt(t, { seam: 0.81 }),
+];
+
+const bloom = (): SlideElement[] => [
+  blob({ x: 0.2, y: 0.5, width: 0.62, height: 0.56, seed: 2, color: SOFT.peach }),
+  blob({ x: 0.82, y: 0.74, width: 0.7, height: 0.62, seed: 31, color: SOFT.sage }),
+  ...top(),
+  clay(CLAY.lilac, { width: 0.78, top: 0.258 }),
+];
+
+export const clayGarden = template({
+  id: 'clay-garden',
+  name: 'Clay Garden',
+  description: 'Soft, hand-made and happy: warm cream with pastel blobs, clay phones in sage, peach, lilac, butter and sky with matching bezels, and friendly headlines with terracotta highlights.',
+  category: 'playful',
+  tags: ['clay', 'pastel', 'friendly', 'plants', 'soft'],
+  apps: ['calendar', 'tasks', 'social', 'shop', 'chat', 'meditation', 'fitness'],
+  theme: theme({
+    background: background(radial(0.5, 0.28, 0.95, '#fcf7ef', '#f1e8da')),
+    heading: F.outfit,
+    body: F.dmSans,
+    palette: ['#5aa36f', '#d45d38', '#9b7fe0', '#e8b63c', '#fcf7ef', '#24382b'],
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Happy plants, *happy* home', subtitle: 'Care reminders tailored to every plant you own.' },
+        ar: { headline: 'نباتات سعيدة، *بيت* سعيد', subtitle: 'تذكيرات عناية مصمّمة لكل نبتة في بيتك.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        en: { headline: 'Never miss a *watering*', subtitle: 'Smart schedules adapt to light, season and pot size.' },
+        ar: { headline: 'لا تفوّت *موعد* السقاية', subtitle: 'جداول ذكية تتكيّف مع الضوء والموسم وحجم الأصيص.' },
+      },
+      pair,
+    ),
+    slide(
+      {
+        en: { headline: 'Snap to *identify*', subtitle: 'Point your camera at any leaf to learn its name.' },
+        ar: { headline: 'صوّر *لتتعرّف*', subtitle: 'وجّه الكاميرا نحو أي ورقة لتعرف اسم النبتة.' },
+      },
+      tilted,
+    ),
+    slide(
+      {
+        en: { headline: 'Grow *together*', subtitle: 'Swap cuttings and tips with plant lovers nearby.' },
+        ar: { headline: 'ازرعوا *معًا*', subtitle: 'تبادلوا الشتلات والنصائح مع محبي النباتات من حولكم.' },
+      },
+      hanging,
+    ),
+    slide(
+      {
+        en: { headline: 'Watch them *thrive*', subtitle: 'Growth journals with photos, week after week.' },
+        ar: { headline: 'شاهدها *تزدهر*', subtitle: 'مذكّرات نمو مصوّرة أسبوعًا بعد أسبوع.' },
+      },
+      bloom,
+    ),
+  ],
+});

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

@@ -0,0 +1,97 @@
+/**
+ * Desert Dune (كثيب): designed Arabic first. A sand-to-terracotta sky with
+ * a fine pattern of concentric rings, a pale sun, dunes that the desert
+ * titanium phone rises out of, Readex Pro type in deep earth tones. Story:
+ * a desert camps and experiences app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, circle, copyAt, device, glow, linear, pattern, slide, template, theme, typeset } from '../kit';
+
+const t = typeset({
+  heading: F.readex,
+  body: F.readex,
+  ink: '#3a1d0e',
+  soft: '#5c3a26',
+  accent: '#a8431c',
+  head: { weight: 700, size: 0.088, lineHeight: 1.24, letterSpacing: -0.015 },
+  sub: { weight: 400, size: 0.04, lineHeight: 1.45 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: METAL.desert, shadow: { color: '#5a2a1066', blur: 0.07, x: 0, y: 0.03 }, ...o });
+
+/** Two dunes: one behind the phone, one in front of its lower edge. */
+const farDune = (x: number) => circle({ name: 'Far dune', x, y: 1.0, width: 2.3, height: 0.66, color: '#d58e58' });
+const nearDune = (x: number) => circle({ name: 'Near dune', x, y: 1.05, width: 2.1, height: 0.5, color: '#b8693b' });
+const sun = (x: number, y: number, size: number): SlideElement[] => [glow({ name: 'Sun glow', x, y, size: size * 1.4, color: '#fff3d6', opacity: 0.6 }), circle({ name: 'Sun', x, y, size, color: '#fff1d2', opacity: 0.9 })];
+
+const top = () => copyAt(t, { seam: 0.165 });
+
+const hero = (): SlideElement[] => [...sun(0.78, 0.44, 0.36), farDune(0.15), ...top(), phone({ width: 0.78, top: 0.275 }), nearDune(0.9)];
+
+const tilted = (): SlideElement[] => [...sun(0.2, 0.42, 0.3), farDune(0.85), ...top(), phone({ width: 0.76, top: 0.283, x: 0.53, rotation: -6 }), nearDune(0.12)];
+
+const pair = (): SlideElement[] => [
+  ...sun(0.5, 0.42, 0.32),
+  farDune(0.5),
+  ...top(),
+  phone({ width: 0.58, top: 0.33, x: 0.7, rotation: 5, slot: 'second' }),
+  phone({ width: 0.62, top: 0.285, x: 0.33, rotation: -4 }),
+  nearDune(0.6),
+];
+
+/** Night in the camp: the copy sits low on the warm sand, the phone hangs from a starry top. */
+const night = (): SlideElement[] => [...sun(0.5, 0.12, 0.5), phone({ width: 0.8, bottom: 0.65 }), ...copyAt(t, { seam: 0.81 })];
+
+const share = (): SlideElement[] => [...sun(0.5, 0.5, 0.95), farDune(0.8), ...top(), phone({ width: 0.76, top: 0.28 }), nearDune(0.2)];
+
+export const desertDune = template({
+  id: 'desert-dune',
+  name: 'Desert Dune',
+  description: 'Designed Arabic first: a sand-to-terracotta sky with a fine pattern of concentric rings, a pale sun and soft dunes the desert-titanium phone rises out of, in deep earth tones.',
+  category: 'elegant',
+  tags: ['arabic', 'desert', 'warm', 'travel', 'geometric'],
+  apps: ['travel', 'shop', 'calendar', 'social', 'chat', 'music'],
+  theme: theme({
+    background: background(linear(180, ['#f8ead3', 0], ['#efcfa1', 0.55], ['#dd9c69', 1]), pattern('rings', '#8a4b2a', 0.08, 0.075)),
+    heading: F.readex,
+    body: F.readex,
+    palette: ['#c4622d', '#2f7a78', '#e3a04f', '#3a1d0e', '#f8ead3'],
+  }),
+  slides: [
+    slide(
+      {
+        ar: { headline: 'اكتشف *سحر* الصحراء', subtitle: 'تخييم وسفاري وتجارب لا تُنسى تحت سماء مرصّعة بالنجوم.' },
+        en: { headline: 'Discover the desert’s *magic*', subtitle: 'Camping, safaris and nights under a sky full of stars.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        ar: { headline: 'احجز *مغامرتك* في دقائق', subtitle: 'مرشدون محليون موثوقون وأسعار واضحة دون مفاجآت.' },
+        en: { headline: 'Book your *adventure* in minutes', subtitle: 'Trusted local guides and clear prices, no surprises.' },
+      },
+      tilted,
+    ),
+    slide(
+      {
+        ar: { headline: 'تراثٌ *حيّ*', subtitle: 'تذوّق القهوة العربية واستمع إلى حكايات البادية.' },
+        en: { headline: 'Living *heritage*', subtitle: 'Taste Arabic coffee and hear the stories of the Bedouin.' },
+      },
+      pair,
+    ),
+    slide(
+      {
+        ar: { headline: 'ليالٍ *تحت النجوم*', subtitle: 'مخيّمات فاخرة بعيدًا عن صخب المدينة.' },
+        en: { headline: 'Nights *under the stars*', subtitle: 'Luxury camps far from the noise of the city.' },
+      },
+      night,
+    ),
+    slide(
+      {
+        ar: { headline: 'شارك *رحلتك*', subtitle: 'صور ومسارات وذكريات تتشاركها مع من تحب.' },
+        en: { headline: 'Share your *journey*', subtitle: 'Photos, routes and memories to share with loved ones.' },
+      },
+      share,
+    ),
+  ],
+});