capture-flow 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,149 @@
+/**
+ * Noir Gold: a boutique after closing time. Warm black with a pool of
+ * light, Playfair Display in ivory with gold highlights, a spaced gold
+ * eyebrow, hairline rings and gold devices on every canvas. Story: a
+ * luxury watch and jewellery boutique.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, copyAt, device, r5, radial, rect, ring, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const GOLD = '#d6b46a';
+const t = typeset({
+  heading: F.playfair,
+  body: F.dmSans,
+  ink: '#f6f0e4',
+  soft: '#c9c0ae',
+  accent: GOLD,
+  head: { weight: 600, size: 0.094, lineHeight: 1.14, letterSpacing: -0.01 },
+  sub: { weight: 400, size: 0.039, lineHeight: 1.45 },
+  eyebrow: { size: 0.026, letterSpacing: 0.32, weight: 600 },
+});
+
+const SHADOW = { color: '#000000b3', blur: 0.08, x: 0, y: 0.035 };
+const phone = (o: DeviceOptions) => device({ color: METAL.gold, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.gold, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.gold, shadow: SHADOW, ...o });
+
+/** Eyebrow, a short gold rule and the headline / subtitle pair. */
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') {
+    const x = 0.235;
+    return [
+      t.eyebrow({ x, y: 0.22, width: 0.5, align: 'start' }),
+      rect({ name: 'Gold rule', x: 0.0975, y: 0.272, width: 0.08, height: 0.003, radius: 0, color: GOLD }),
+      ...copyAt(t, { cls, seam: seam ?? 0.57, x: 0.229, width: 0.5, align: 'start', head: { size: 0.076, maxLines: 3 }, sub: { size: 0.032, maxLines: 3 } }),
+    ];
+  }
+  const tablet = cls === 'tablet';
+  return [
+    t.eyebrow({ y: tablet ? 0.05 : 0.048 }),
+    rect({ name: 'Gold rule', x: 0.5, y: tablet ? 0.089 : 0.071, width: 0.08, height: 0.003, radius: 0, color: GOLD }),
+    ...copyAt(t, tablet ? { cls, seam: seam ?? 0.2, width: 0.8, subWidth: 0.62, head: { size: 0.07 }, sub: { size: 0.031 } } : { seam: seam ?? 0.185 }),
+  ];
+}
+
+const halo = (x: number, y: number, s = 1): SlideElement[] => [
+  ring({ name: 'Gold ring', x, y, size: 1.2 * s, stroke: 0.0022, color: GOLD, opacity: 0.35 }),
+  ring({ name: 'Gold ring', x, y, size: 1.04 * s, stroke: 0.0022, color: GOLD, opacity: 0.22 }),
+];
+
+function hero(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...halo(0.705, 0.52, 0.8), ...copy(cls), laptop({ width: 0.88, x: 0.705, y: 0.53 })];
+  if (cls === 'tablet') return [...halo(0.5, 0.78, 1.05), ...copy(cls), pad({ width: 0.74, top: 0.32 })];
+  return [...halo(0.5, 0.64), ...copy(cls), phone({ width: 0.76, top: 0.282 })];
+}
+
+function crafted(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    // Mirrored: the laptop on the left, the copy in the right column.
+    const x = 0.77;
+    const left = x * 1.6 - 0.24;
+    return [
+      ...halo(0.3, 0.52, 0.85),
+      t.eyebrow({ x, y: 0.22, width: 0.48, align: 'start' }),
+      rect({ name: 'Gold rule', x: r5((left + 0.04) / 1.6), y: 0.272, width: 0.08, height: 0.003, radius: 0, color: GOLD }),
+      ...copyAt(t, { cls, seam: 0.57, x, width: 0.48, align: 'start', head: { size: 0.076, maxLines: 3 }, sub: { size: 0.032, maxLines: 3 } }),
+      laptop({ width: 0.86, x: 0.31, y: 0.53 }),
+    ];
+  }
+  if (cls !== 'tall') return hero(cls);
+  return [...halo(0.46, 0.62, 0.92), ...copy(cls), phone({ width: 0.76, top: 0.286, x: 0.53, rotation: -6 })];
+}
+
+function salon(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [...halo(0.72, 0.52, 0.78), ...copy(cls), laptop({ width: 0.78, x: 0.73, y: 0.6, slot: 'second' }), device({ cls, frame: 'none', width: 0.46, x: 0.57, y: 0.4, cornerRadius: 0.025, shadow: SHADOW })];
+  if (cls === 'tablet') return [...halo(0.5, 0.8, 1.05), ...copy(cls), pad({ width: 0.58, top: 0.38, x: 0.66, slot: 'second' }), pad({ width: 0.58, top: 0.33, x: 0.36 })];
+  return [...halo(0.5, 0.66), ...copy(cls), phone({ width: 0.58, top: 0.33, x: 0.7, rotation: 5, slot: 'second' }), phone({ width: 0.62, top: 0.29, x: 0.33, rotation: -4 })];
+}
+
+function delivered(cls: Cls): SlideElement[] {
+  if (cls !== 'tall') return hero(cls);
+  return [...halo(0.5, 0.36), phone({ width: 0.78, bottom: 0.655 }), t.eyebrow({ y: 0.698 }), ...copyAt(t, { seam: 0.845 })];
+}
+
+function circle(cls: Cls): SlideElement[] {
+  // Wide and tablet canvases have no room for a larger halo beside or under the copy: the second pair sits inside the first.
+  if (cls === 'wide') return [...halo(0.705, 0.52, 0.6), ...hero(cls)];
+  if (cls === 'tablet') return [...halo(0.5, 0.78, 0.84), ...hero(cls)];
+  return [...halo(0.5, 0.64, 1.25), ...hero(cls)];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const noirGold = template({
+  id: 'noir-gold',
+  name: 'Noir Gold',
+  description: 'A boutique after closing time: warm black with a pool of light, Playfair Display in ivory with gold highlights, a spaced gold eyebrow, hairline rings and gold devices on every canvas.',
+  category: 'elegant',
+  tags: ['luxury', 'serif', 'gold', 'black', 'fashion'],
+  apps: ['shop', 'travel', 'calendar', 'social', 'chat', 'finance'],
+  theme: theme({
+    background: background(radial(0.5, 0.45, 0.78, ['#25201a', 0], ['#141210', 0.6], ['#0a0908', 1])),
+    heading: F.playfair,
+    body: F.dmSans,
+    palette: [GOLD, '#b88a4a', '#8e6f3e', '#f6f0e4', '#0a0908'],
+    mockDark: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { eyebrow: 'The collection', headline: 'Timeless, *curated*', subtitle: 'Rare watches and fine jewelry from the great houses.' },
+        ar: { eyebrow: 'المجموعة', headline: 'فخامة *خالدة*', subtitle: 'ساعات نادرة ومجوهرات فاخرة من أعرق الدور العالمية.' },
+      },
+      hero,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: 'Authenticity', headline: 'Crafted to *last*', subtitle: 'Every piece inspected and certified by our experts.' },
+        ar: { eyebrow: 'الأصالة', headline: 'صُنعت *لتدوم*', subtitle: 'كل قطعة يفحصها خبراؤنا ويوثّقون أصالتها.' },
+      },
+      crafted,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: 'Private salon', headline: 'Your personal *stylist*', subtitle: 'Book a private appointment at home or in store.' },
+        ar: { eyebrow: 'الصالون الخاص', headline: 'مستشار أناقة *خاص* بك', subtitle: 'احجز موعدًا خاصًا في منزلك أو في المتجر.' },
+      },
+      salon,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: 'White glove', headline: 'Delivered with *care*', subtitle: 'Insured, hand-delivered to your door.' },
+        ar: { eyebrow: 'خدمة راقية', headline: 'توصيل *بعناية*', subtitle: 'توصيل مؤمَّن يدًا بيد حتى باب منزلك.' },
+      },
+      delivered,
+      o,
+    ),
+    slide(
+      {
+        en: { eyebrow: 'Members', headline: 'Join the *circle*', subtitle: 'Early access to limited editions and private events.' },
+        ar: { eyebrow: 'العضوية', headline: 'انضم إلى *النخبة*', subtitle: 'وصول مبكر إلى الإصدارات المحدودة والفعاليات الخاصة.' },
+      },
+      circle,
+      o,
+    ),
+  ],
+});

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

@@ -0,0 +1,107 @@
+/**
+ * Noor (نور, "light"): designed Arabic first. Deep emerald with a fine
+ * diagonal lattice, gold eight-point stars and rings in the spirit of
+ * Islamic geometric ornament, Cairo headlines and Noto Sans Arabic text.
+ * Story: an Arabic books and audiobooks app.
+ */
+import type { SlideElement } from '../../model/types';
+import { F, METAL, background, copyAt, device, glow, pattern, radial, rect, ring, slide, template, theme, typeset } from '../kit';
+
+const GOLD = '#e9c98b';
+
+const t = typeset({
+  heading: F.cairo,
+  body: F.notoArabic,
+  ink: '#fbf5e6',
+  soft: '#d3e2da',
+  accent: GOLD,
+  head: { weight: 800, size: 0.088, lineHeight: 1.22, letterSpacing: -0.01 },
+  sub: { weight: 500, size: 0.04, lineHeight: 1.45 },
+});
+
+const phone = (o: Parameters<typeof device>[0]) => device({ color: METAL.black, shadow: { color: '#000000a6', blur: 0.08, x: 0, y: 0.035 }, ...o });
+
+/** An eight-point star (two squares, one turned 45 degrees). */
+const star = (x: number, y: number, size: number, opacity = 1, color = GOLD): SlideElement[] => [
+  rect({ name: 'Star', x, y, size, radius: 0, color, opacity }),
+  rect({ name: 'Star', x, y, size, radius: 0, rotation: 45, color, opacity }),
+];
+
+/** Ornament behind a device: a faint star and two gold rings. */
+const rosette = (x: number, y: number, s = 1): SlideElement[] => [
+  ...star(x, y, 0.78 * s, 0.07),
+  ring({ name: 'Gold ring', x, y, size: 1.16 * s, stroke: 0.003, color: GOLD, opacity: 0.4 }),
+  ring({ name: 'Gold ring', x, y, size: 1.06 * s, stroke: 0.0015, color: GOLD, opacity: 0.32 }),
+];
+
+const top = () => copyAt(t, { seam: 0.16 });
+const emblem = () => star(0.5, 0.042, 0.04);
+
+const hero = (): SlideElement[] => [glow({ x: 0.5, y: 0.62, size: 0.9, color: '#1f8a72', opacity: 0.4 }), ...rosette(0.5, 0.62), ...emblem(), ...top(), phone({ width: 0.8, top: 0.27 })];
+
+const tilted = (): SlideElement[] => [...rosette(0.56, 0.6, 0.9), ...emblem(), ...top(), phone({ width: 0.78, top: 0.275, x: 0.54, rotation: -7 })];
+
+const pair = (): SlideElement[] => [
+  glow({ x: 0.5, y: 0.66, size: 1.0, color: '#1f8a72', opacity: 0.35 }),
+  ...emblem(),
+  ...top(),
+  phone({ width: 0.6, top: 0.32, x: 0.7, rotation: 6, slot: 'second' }),
+  phone({ width: 0.63, top: 0.275, x: 0.33, rotation: -5 }),
+];
+
+const hanging = (): SlideElement[] => [...rosette(0.5, 0.36, 0.95), phone({ width: 0.8, bottom: 0.67 }), ...star(0.5, 0.715, 0.034), ...copyAt(t, { seam: 0.82 })];
+
+const calm = (): SlideElement[] => [...rosette(0.5, 0.64, 1.08), ...emblem(), ...top(), phone({ width: 0.76, top: 0.28 })];
+
+export const noor = template({
+  id: 'noor',
+  name: 'Noor',
+  description: 'Designed Arabic first: deep emerald with a fine lattice, gold eight-point stars and rings inspired by Islamic geometric ornament, Cairo headlines and Noto Sans Arabic text.',
+  category: 'dark',
+  tags: ['arabic', 'emerald', 'gold', 'geometric', 'books'],
+  apps: ['music', 'calendar', 'social', 'chat', 'meditation', 'tasks', 'shop'],
+  theme: theme({
+    background: background(radial(0.5, 0.32, 0.92, ['#14493f', 0], ['#0a2c27', 0.55], ['#061a17', 1]), pattern('diagonal', GOLD, 0.05, 0.055)),
+    heading: F.cairo,
+    body: F.notoArabic,
+    palette: [GOLD, '#2bb39a', '#f4a261', '#fbf5e6', '#061a17'],
+    mockDark: true,
+  }),
+  slides: [
+    slide(
+      {
+        ar: { headline: 'اقرأ *واستمع* بالعربية', subtitle: 'آلاف الكتب والكتب الصوتية بين يديك.' },
+        en: { headline: 'Read and *listen* in Arabic', subtitle: 'Thousands of books and audiobooks in your pocket.' },
+      },
+      hero,
+    ),
+    slide(
+      {
+        ar: { headline: 'مكتبتك *ترافقك* أينما كنت', subtitle: 'تابع القراءة من حيث توقفت على كل أجهزتك.' },
+        en: { headline: 'Your library, *everywhere*', subtitle: 'Pick up where you left off, on every device.' },
+      },
+      tilted,
+    ),
+    slide(
+      {
+        ar: { headline: 'أصوات *تأسرك*', subtitle: 'روايات وكتب يرويها نخبة من أجمل الأصوات العربية.' },
+        en: { headline: 'Voices that *captivate*', subtitle: 'Novels and nonfiction, narrated by the finest voices.' },
+      },
+      pair,
+    ),
+    slide(
+      {
+        ar: { headline: 'اقرأ *أكثر* كل يوم', subtitle: 'أهداف قراءة يومية وسلاسل إنجاز تحفّزك.' },
+        en: { headline: 'Read *more* every day', subtitle: 'Daily goals and streaks that keep you going.' },
+      },
+      hanging,
+    ),
+    slide(
+      {
+        ar: { headline: 'شارك *ما يُلهمك*', subtitle: 'اقتبس أجمل العبارات وشاركها مع أصدقائك.' },
+        en: { headline: 'Share what *inspires* you', subtitle: 'Quote your favorite passages and share them with friends.' },
+      },
+      calm,
+    ),
+  ],
+});

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

@@ -0,0 +1,137 @@
+/**
+ * Obsidian: a pro tool after hours. Near-black slate with a cold light from
+ * above and fine grain, Manrope headlines with periwinkle highlights,
+ * deep-blue titanium phones, tablets and a graphite MacBook on every canvas.
+ * Story: a project workspace for makers and engineers.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, copyAt, device, glow, pattern, radial, ring, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const BLUE = '#8fb0ff';
+const t = typeset({
+  heading: F.manrope,
+  body: F.inter,
+  ink: '#f4f6fb',
+  soft: '#aab4c7',
+  accent: BLUE,
+  head: { weight: 800, size: 0.088, lineHeight: 1.1, letterSpacing: -0.035 },
+  sub: { weight: 450, size: 0.04 },
+});
+
+const SHADOW = { color: '#000000b3', blur: 0.08, x: 0, y: 0.035 };
+const phone = (o: DeviceOptions) => device({ color: METAL.deepBlue, shadow: SHADOW, ...o });
+const pad = (o: DeviceOptions) => device({ cls: 'tablet', frame: 'ipad', color: METAL.deepBlue, shadow: SHADOW, ...o });
+const laptop = (o: DeviceOptions) => device({ cls: 'wide', frame: 'macbook', color: METAL.graphite, shadow: SHADOW, ...o });
+
+function copy(cls: Cls, seam?: number): SlideElement[] {
+  if (cls === 'wide') return copyAt(t, { cls, seam: seam ?? 0.5, x: 0.22, width: 0.46, align: 'start', head: { size: 0.072, maxLines: 3 }, sub: { size: 0.032, maxLines: 3 } });
+  if (cls === 'tablet') return copyAt(t, { cls, seam: seam ?? 0.165, width: 0.8, subWidth: 0.62, head: { size: 0.066 }, sub: { size: 0.031 } });
+  return copyAt(t, { seam: seam ?? 0.15 });
+}
+
+/** The cold light the devices sit in. */
+const light = (cls: Cls) => (cls === 'wide' ? glow({ x: 0.68, y: 0.3, size: 0.9, color: '#4c6fff', opacity: 0.3 }) : glow({ x: 0.5, y: cls === 'tablet' ? 0.42 : 0.36, size: 1.0, color: '#4c6fff', opacity: 0.3 }));
+
+function hero(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [light(cls), ...copy(cls), laptop({ width: 0.92, x: 0.685, y: 0.53 })];
+  if (cls === 'tablet') return [light(cls), ...copy(cls), pad({ width: 0.78, top: 0.285 })];
+  return [light(cls), ...copy(cls), phone({ width: 0.82, top: 0.24 })];
+}
+
+function projects(cls: Cls): SlideElement[] {
+  if (cls === 'wide') return [light(cls), ...copy(cls), laptop({ width: 0.8, x: 0.72, y: 0.6, slot: 'second' }), device({ cls, frame: 'none', width: 0.48, x: 0.56, y: 0.38, cornerRadius: 0.025, shadow: SHADOW })];
+  if (cls === 'tablet') return [light(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 [light(cls), ...copy(cls), phone({ width: 0.6, top: 0.3, x: 0.7, slot: 'second' }), phone({ width: 0.64, top: 0.255, x: 0.34 })];
+}
+
+function shortcuts(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    // Copy on top, the laptop below it: a second arrangement for the wide canvas.
+    return [glow({ x: 0.5, y: 0.6, size: 1.0, color: '#4c6fff', opacity: 0.28 }), ...copyAt(t, { cls, seam: 0.215, width: 1.2, subWidth: 0.95, head: { size: 0.066 }, sub: { size: 0.03 } }), laptop({ width: 1.02, top: 0.35 })];
+  }
+  if (cls === 'tablet') return hero(cls);
+  return [glow({ x: 0.5, y: 0.34, size: 1.0, color: '#4c6fff', opacity: 0.3 }), phone({ width: 0.82, bottom: 0.69 }), ...copy(cls, 0.81)];
+}
+
+function teams(cls: Cls): SlideElement[] {
+  if (cls === 'wide') {
+    // Mirrored: the laptop on the left, the copy in the right column.
+    return [
+      glow({ x: 0.32, y: 0.3, size: 0.9, color: '#4c6fff', opacity: 0.3 }),
+      ...copyAt(t, { cls, seam: 0.5, x: 0.77, width: 0.48, align: 'start', head: { size: 0.074, maxLines: 3 }, sub: { size: 0.033, maxLines: 3 } }),
+      laptop({ width: 0.86, x: 0.31, y: 0.53 }),
+    ];
+  }
+  if (cls !== 'tall') return projects(cls);
+  return [light(cls), ...copy(cls), phone({ width: 0.78, top: 0.262, x: 0.53, rotation: -7 })];
+}
+
+function orbit(cls: Cls): SlideElement[] {
+  const rings = (x: number, y: number, s: number) => [
+    ring({ name: 'Orbit', x, y, size: 1.24 * s, stroke: 0.0025, color: BLUE, opacity: 0.22 }),
+    ring({ name: 'Orbit', x, y, size: 1.0 * s, stroke: 0.0025, color: BLUE, opacity: 0.38 }),
+  ];
+  if (cls === 'wide') return [...rings(0.685, 0.53, 0.78), ...hero(cls)];
+  if (cls === 'tablet') return [...rings(0.5, 0.76, 1.06), ...hero(cls)];
+  return [...rings(0.5, 0.6, 1.02), ...hero(cls)];
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const obsidian = template({
+  id: 'obsidian',
+  name: 'Obsidian',
+  description: 'A pro tool after hours: near-black slate with a cold light from above and fine grain, Manrope headlines with periwinkle highlights, and deep-blue devices on every canvas.',
+  category: 'dark',
+  tags: ['dark', 'pro', 'mac', 'productivity', 'minimal'],
+  apps: ['tasks', 'calendar', 'chat', 'finance', 'music', 'meditation', 'fitness'],
+  theme: theme({
+    background: background(radial(0.5, -0.05, 0.95, ['#2a3654', 0], ['#141925', 0.55], ['#0c0e13', 1]), pattern('noise', '#ffffff', 0.04, 0.05)),
+    heading: F.manrope,
+    body: F.inter,
+    palette: ['#6d8dff', '#3ddc97', '#ffb547', '#ff6b81', '#f4f6fb', '#0c0e13'],
+    mockDark: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Deep work, *on demand*', subtitle: 'A focused workspace for projects, notes and code.' },
+        ar: { headline: 'عمل عميق *متى شئت*', subtitle: 'مساحة عمل مركّزة للمشاريع والملاحظات والبرمجة.' },
+      },
+      hero,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Every project, *one* place', subtitle: 'Boards, docs and timelines that stay in sync.' },
+        ar: { headline: 'كل مشاريعك في *مكان* واحد', subtitle: 'لوحات ومستندات وجداول زمنية متزامنة دائمًا.' },
+      },
+      projects,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Shortcuts for *everything*', subtitle: 'Fly through your day without touching the mouse.' },
+        ar: { headline: 'اختصارات *لكل شيء*', subtitle: 'أنجز يومك بسرعة دون أن تلمس الفأرة.' },
+      },
+      shortcuts,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Built for *teams*', subtitle: 'Comments, mentions and reviews in real time.' },
+        ar: { headline: 'مصمّم *للفرق*', subtitle: 'تعليقات وإشارات ومراجعات لحظة بلحظة.' },
+      },
+      teams,
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Dark by *default*', subtitle: 'Easy on the eyes, from first coffee to last commit.' },
+        ar: { headline: 'داكن *افتراضيًا*', subtitle: 'مريح للعين من أول فنجان قهوة حتى آخر سطر برمجي.' },
+      },
+      orbit,
+      o,
+    ),
+  ],
+});

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

@@ -0,0 +1,145 @@
+/**
+ * Panorama Peaks: dawn over a mountain range that spans the whole listing.
+ * Two ridges of peaks (squares turned 45 degrees) roll across every seam
+ * under a violet-to-apricot sky, with the sun rising between slides 2 and
+ * 3. Fraunces headlines. Story: a hiking and trail app.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, canvas, circle, copyAt, device, glow, linear, onStrip, rect, r5, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const t = typeset({
+  heading: F.fraunces,
+  body: F.manrope,
+  ink: '#fff8ee',
+  soft: '#ece2f7',
+  accent: '#ffc387',
+  head: { weight: 650, size: 0.092, lineHeight: 1.1, letterSpacing: -0.02 },
+  sub: { weight: 500, size: 0.04 },
+});
+
+const SHADOW = { color: '#12082a8c', blur: 0.07, x: 0, y: 0.03 };
+
+/** Peak sizes per canvas: the ridges keep their silhouette on every shape of canvas. */
+const SCALE: Record<Cls, number> = { tall: 1, tablet: 0.72, wide: 0.5 };
+
+/** A peak whose summit sits at `apex` (fraction of the canvas height): a square turned 45 degrees, mostly below the edge. */
+function peak(cls: Cls, i: number, X: number, apex: number, side: number, color: string): SlideElement[] {
+  const { wu, hu } = canvas(cls);
+  const size = side * SCALE[cls];
+  const half = (size * Math.SQRT2) / 2;
+  return onStrip(i, X, half / wu, (x) => [rect({ name: 'Peak', x, y: r5(apex + half / hu), size: r5(size), rotation: 45, radius: 0.02, color })]);
+}
+
+const FAR: [number, number, number][] = [
+  [0.48, 0.64, 1.0],
+  [1.24, 0.6, 1.15],
+  [1.98, 0.67, 0.95],
+  [2.74, 0.61, 1.1],
+  [3.5, 0.66, 1.0],
+  [4.26, 0.6, 1.15],
+  [5.0, 0.65, 1.0],
+];
+const NEAR: [number, number, number][] = [
+  [0.12, 0.8, 1.05],
+  [0.86, 0.76, 1.2],
+  [1.6, 0.81, 1.05],
+  [2.36, 0.77, 1.2],
+  [3.12, 0.8, 1.1],
+  [3.88, 0.76, 1.2],
+  [4.64, 0.8, 1.1],
+];
+
+/** The sky and far ridge behind the device, as seen from slide `i`. */
+function behind(cls: Cls, i: number): SlideElement[] {
+  const k = SCALE[cls];
+  return [
+    ...onStrip(i, 2.0, 0.6, (x) => [glow({ name: 'Sun glow', x, y: 0.62, size: r5(1.0 * k), color: '#ffb085', opacity: 0.6 }), circle({ name: 'Sun', x, y: 0.62, size: r5(0.46 * k), fill: linear(180, '#fff3d6', '#ffc58f') })]),
+    ...FAR.flatMap(([X, apex, side]) => peak(cls, i, X, apex, side, '#6b4b95')),
+  ];
+}
+
+/** The near ridge, drawn over the lower part of the device so it rises out of the range. */
+const front = (cls: Cls, i: number): SlideElement[] => NEAR.flatMap(([X, apex, side]) => peak(cls, i, X, apex, side, '#2b1e4e'));
+
+function shot(i: number, o: DeviceOptions = {}) {
+  return (cls: Cls): SlideElement[] => {
+    if (cls === 'wide') {
+      // Side by side: the laptop stands in front of the far ridge, clear of the near one.
+      return [
+        ...behind(cls, i),
+        ...copyAt(t, { cls, seam: 0.36, x: 0.235, width: 0.5, align: 'start', head: { size: 0.074, maxLines: 3 }, sub: { size: 0.033, maxLines: 3 } }),
+        device({ cls, frame: 'macbook', color: METAL.graphite, shadow: SHADOW, width: 0.86, x: 0.68, y: 0.41 }),
+        ...front(cls, i),
+      ];
+    }
+    if (cls === 'tablet') {
+      return [
+        ...behind(cls, i),
+        ...copyAt(t, { cls, seam: 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } }),
+        device({ cls, frame: 'ipad', color: METAL.graphite, shadow: SHADOW, width: 0.62, top: 0.29, rotation: (o.rotation ?? 0) / 2 }),
+        ...front(cls, i),
+      ];
+    }
+    return [...behind(cls, i), ...copyAt(t, { seam: 0.15 }), device({ color: METAL.graphite, shadow: SHADOW, width: 0.66, top: 0.255, ...o }), ...front(cls, i)];
+  };
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const panoramaPeaks = template({
+  id: 'panorama-peaks',
+  name: 'Panorama Peaks',
+  description: 'Dawn over a mountain range that spans the whole listing: two ridges roll across every seam under a violet-to-apricot sky, the sun rising between slides two and three.',
+  category: 'panorama',
+  tags: ['panorama', 'mountains', 'sunrise', 'outdoors', 'serif'],
+  apps: ['travel', 'fitness', 'calendar', 'social', 'music', 'chat', 'shop'],
+  theme: theme({
+    background: background(linear(180, ['#171a45', 0], ['#3d2a72', 0.42], ['#b5577a', 0.68], ['#f39b6d', 0.84], ['#ffd29d', 1])),
+    heading: F.fraunces,
+    body: F.manrope,
+    palette: ['#f2785c', '#ffc387', '#7c5cff', '#2b1e4e', '#fff8ee'],
+    panorama: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Find your next *summit*', subtitle: '40,000 trails with offline maps and elevation.' },
+        ar: { headline: 'اكتشف *قمّتك* القادمة', subtitle: '40 ألف مسار مع خرائط تعمل دون إنترنت وبيانات الارتفاع.' },
+      },
+      shot(0),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Every step, *tracked*', subtitle: 'Distance, pace and climb, even without signal.' },
+        ar: { headline: 'كل خطوة *محسوبة*', subtitle: 'المسافة والسرعة والصعود حتى دون تغطية.' },
+      },
+      shot(1),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Start at *sunrise*', subtitle: 'Golden-hour alerts for views worth waking up for.' },
+        ar: { headline: 'ابدأ مع *الشروق*', subtitle: 'تنبيهات للحظات الذهبية التي تستحق الاستيقاظ مبكرًا.' },
+      },
+      shot(2),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Hike *safer*', subtitle: 'Share your live route with people you trust.' },
+        ar: { headline: 'تنزّه *بأمان*', subtitle: 'شارك مسارك المباشر مع من تثق بهم.' },
+      },
+      shot(3),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Collect the *peaks*', subtitle: 'Badges and stats for every mountain you climb.' },
+        ar: { headline: 'اجمع *القمم*', subtitle: 'أوسمة وإحصاءات لكل جبل تتسلّقه.' },
+      },
+      shot(4),
+      o,
+    ),
+  ],
+});

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

@@ -0,0 +1,138 @@
+/**
+ * Panorama Ribbon: bright ribbons of colour loop through the whole listing.
+ * A pastel paper strip drifting from peach to lilac to mint, thick gradient
+ * rings centred on the seams so every loop continues into the next slide,
+ * Bricolage Grotesque headlines with hot pink highlights. Story: a photo
+ * editing app.
+ */
+import type { SlideElement } from '../../model/types';
+import { ALL_CLASSES, F, METAL, background, canvas, copyAt, device, linear, onStrip, ring, slide, template, theme, typeset, type Cls, type DeviceOptions } from '../kit';
+
+const PINK = '#ff3d7f';
+
+const t = typeset({
+  heading: F.bricolage,
+  body: F.jakarta,
+  ink: '#1a1424',
+  soft: '#4b4458',
+  accent: PINK,
+  head: { weight: 750, size: 0.092, lineHeight: 1.1, letterSpacing: -0.03 },
+  sub: { weight: 500, size: 0.04 },
+});
+
+const SHADOW = { color: '#3a1f4d40', blur: 0.07, x: 0, y: 0.03 };
+
+type Loop = [X: number, y: number, size: number, stroke: number, from: string, to: string, angle: number];
+
+/** The loops per canvas shape, kept below the copy so highlights stay readable. */
+const LOOPS: Record<Cls, Loop[]> = {
+  tall: [
+    [-0.02, 0.47, 0.7, 0.08, '#ffb347', '#ff5f8f', 90],
+    [1.0, 0.69, 1.5, 0.11, '#ff5f8f', '#ffb347', 120],
+    [2.0, 0.94, 1.22, 0.09, '#2ec4b6', '#7c5cff', 30],
+    [3.0, 0.65, 1.36, 0.11, '#7c5cff', '#ff5f8f', 60],
+    [4.06, 0.92, 1.0, 0.09, '#ffb347', '#2ec4b6', 150],
+    [5.02, 0.5, 0.8, 0.08, '#2ec4b6', '#7c5cff', 90],
+  ],
+  tablet: [
+    [-0.02, 0.52, 0.5, 0.06, '#ffb347', '#ff5f8f', 90],
+    [1.0, 0.74, 1.04, 0.08, '#ff5f8f', '#ffb347', 120],
+    [2.0, 1.0, 0.9, 0.065, '#2ec4b6', '#7c5cff', 30],
+    [3.0, 0.7, 0.96, 0.08, '#7c5cff', '#ff5f8f', 60],
+    [4.06, 0.98, 0.72, 0.065, '#ffb347', '#2ec4b6', 150],
+    [5.02, 0.52, 0.58, 0.06, '#2ec4b6', '#7c5cff', 90],
+  ],
+  wide: [
+    [-0.02, 0.56, 0.44, 0.05, '#ffb347', '#ff5f8f', 90],
+    [1.0, 0.66, 0.84, 0.065, '#ff5f8f', '#ffb347', 120],
+    [2.0, 0.96, 0.7, 0.055, '#2ec4b6', '#7c5cff', 30],
+    [3.0, 0.62, 0.78, 0.065, '#7c5cff', '#ff5f8f', 60],
+    [4.04, 0.94, 0.6, 0.055, '#ffb347', '#2ec4b6', 150],
+    [5.02, 0.56, 0.5, 0.05, '#2ec4b6', '#7c5cff', 90],
+  ],
+};
+
+function ribbons(cls: Cls, i: number): SlideElement[] {
+  const { wu } = canvas(cls);
+  return LOOPS[cls].flatMap(([X, y, size, stroke, from, to, angle]) => onStrip(i, X, size / 2 / wu, (x) => [ring({ name: 'Ribbon', x, y, size, stroke, fill: linear(angle, from, to) })]));
+}
+
+function shot(i: number, o: DeviceOptions = {}) {
+  return (cls: Cls): SlideElement[] => {
+    if (cls === 'wide') {
+      return [
+        ...ribbons(cls, i),
+        ...copyAt(t, { cls, seam: 0.2, width: 1.2, subWidth: 0.95, head: { size: 0.068 }, sub: { size: 0.03 } }),
+        device({ cls, frame: 'macbook', color: METAL.silver, shadow: SHADOW, width: 0.98, top: 0.35 }),
+      ];
+    }
+    if (cls === 'tablet') {
+      return [
+        ...ribbons(cls, i),
+        ...copyAt(t, { cls, seam: 0.165, width: 0.8, subWidth: 0.64, head: { size: 0.068 }, sub: { size: 0.032 } }),
+        device({ cls, frame: 'ipad', color: METAL.silver, shadow: SHADOW, width: 0.68, top: 0.3, rotation: (o.rotation ?? 0) / 2 }),
+      ];
+    }
+    return [...ribbons(cls, i), ...copyAt(t, { seam: 0.15 }), device({ color: METAL.silver, shadow: SHADOW, width: 0.74, top: 0.262, ...o })];
+  };
+}
+
+const o = { classes: ALL_CLASSES };
+
+export const panoramaRibbon = template({
+  id: 'panorama-ribbon',
+  name: 'Panorama Ribbon',
+  description: 'Bright ribbons loop through the whole listing: a pastel paper strip drifting from peach to lilac to mint, with thick gradient rings centred on the seams so every loop continues into the next slide.',
+  category: 'panorama',
+  tags: ['panorama', 'light', 'colorful', 'creative', 'continuous'],
+  apps: ['social', 'shop', 'music', 'chat', 'calendar', 'travel'],
+  theme: theme({
+    background: background(linear(90, '#fff2e8', '#f6efff', '#edf4ff', '#effaf4')),
+    heading: F.bricolage,
+    body: F.jakarta,
+    palette: [PINK, '#ffb347', '#7c5cff', '#2ec4b6', '#ffffff', '#1a1424'],
+    panorama: true,
+  }),
+  slides: [
+    slide(
+      {
+        en: { headline: 'Color that *flows*', subtitle: 'Pro-grade photo editing in a single swipe.' },
+        ar: { headline: 'ألوان *تنساب* بسلاسة', subtitle: 'تحرير صور احترافي بلمسة واحدة.' },
+      },
+      shot(0),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Presets with *soul*', subtitle: 'Film-inspired looks crafted by real photographers.' },
+        ar: { headline: 'فلاتر *بروح* فنية', subtitle: 'لمسات مستوحاة من الأفلام صمّمها مصوّرون محترفون.' },
+      },
+      shot(1, { rotation: -4 }),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Edit *anywhere*', subtitle: 'Your edits sync across phone, tablet and desktop.' },
+        ar: { headline: 'حرّر صورك *أينما* كنت', subtitle: 'تعديلاتك متزامنة بين الهاتف والجهاز اللوحي والحاسوب.' },
+      },
+      shot(2),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Share in *style*', subtitle: 'Perfect crops for every feed, story and post.' },
+        ar: { headline: 'شارك *بأناقة*', subtitle: 'مقاسات مثالية لكل منشور وقصة.' },
+      },
+      shot(3, { rotation: 4 }),
+      o,
+    ),
+    slide(
+      {
+        en: { headline: 'Made for *makers*', subtitle: 'Layers, masks and curves when you want more control.' },
+        ar: { headline: 'صُمّم *للمبدعين*', subtitle: 'طبقات وأقنعة ومنحنيات حين تريد تحكّمًا أكبر.' },
+      },
+      shot(4),
+      o,
+    ),
+  ],
+});