@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/styles/tokens.css

@@ -0,0 +1,245 @@
+/* ElevenLabs design system tokens, extracted from the app (elevenlabs.io/app) and the
+   landing (elevenlabs.io) on 2026-10-13. Two layers:
+
+   1. --el-*   the raw value, as ElevenLabs publishes it (their names and numbers);
+   2. the rest the names the studio's partials use (--bg, --text, …),
+               pointing at layer 1.
+
+   Changing the studio's look means changing the layer 2 map. The font is our only
+   decision: Schibsted Grotesk instead of Inter (app) and Waldenburg
+   (landing). Docs in design-system.md. */
+
+:root {
+  color-scheme: light;
+
+  /* --- layer 1: raw --------------------------------------------------------------- */
+
+  /* app neutrals: pure HSL gray scale (no hue) and the alpha scale over white */
+  --el-gray-50: #fafafa;
+  --el-gray-75: #ededed;
+  --el-gray-100: #e3e3e3;
+  --el-gray-150: #d9d9d9;
+  --el-gray-200: #cfcfcf;
+  --el-gray-250: #c2c2c2;
+  --el-gray-300: #b8b8b8;
+  --el-gray-350: #adadad;
+  --el-gray-400: #a3a3a3;
+  --el-gray-450: #969696;
+  --el-gray-500: #8c8c8c;
+  --el-gray-550: #808080;
+  --el-gray-600: #757575;
+  --el-gray-650: #696969;
+  --el-gray-700: #5c5c5c;
+  --el-gray-750: #525252;
+  --el-gray-800: #454545;
+  --el-gray-850: #3b3b3b;
+  --el-gray-900: #2e2e2e;
+  --el-gray-925: #212121;
+  --el-gray-950: #171717;
+
+  --el-alpha-50: #00000005;
+  --el-alpha-75: #00000008;
+  --el-alpha-100: #0000000b;
+  --el-alpha-150: #00000013;
+  --el-alpha-200: #0000001a;
+  --el-alpha-250: #00000022;
+  --el-alpha-300: #00000029;
+  --el-alpha-350: #00000041;
+  --el-alpha-400: #00000059;
+  --el-alpha-450: #00000070;
+  --el-alpha-500: #00000087;
+  --el-alpha-550: #00000095;
+  --el-alpha-600: #000000a4;
+  --el-alpha-700: #000000b6;
+  --el-alpha-800: #000000cd;
+  --el-alpha-900: #000000db;
+
+  /* app semantics (light theme) */
+  --el-background: #ffffff; /* hsl(0 0% 100%) */
+  --el-background-alt: #fcfcfc; /* hsl(0 0% 99%) */
+  --el-foreground: #0f0f10; /* hsl(240 3% 6%) — also the primary button background */
+  --el-primary: #2e2e2e; /* hsl(0 0% 18%) */
+  --el-secondary: var(--el-alpha-500); /* secondary text: black 53% */
+  --el-subtle: var(--el-alpha-450); /* tertiary text: black 44% */
+  --el-muted: var(--el-alpha-100); /* soft background: black 4.3% */
+  --el-accent: #e3e3e3; /* hsl(0 0% 89%) */
+  --el-border: var(--el-alpha-150); /* default line: black 7.5% */
+  --el-border-control: var(--el-alpha-200); /* button and chip outline: black 10% */
+  --el-input: #e5e7eb; /* hsl(220 13% 91%) */
+  --el-ring: #030712; /* hsl(224 71% 4%) */
+  --el-destructive: #ef4444; /* hsl(0 84% 60%) */
+  --el-card: #ffffff;
+  --el-popover: #ffffff;
+
+  --el-sidebar-bg: #fafafa; /* hsl(0 0% 98%) */
+  --el-sidebar-fg: #3f3f46; /* hsl(240 5% 26%) */
+  --el-sidebar-accent: #f4f4f5; /* hsl(240 5% 96%) */
+  --el-sidebar-border: #e5e7eb; /* hsl(220 13% 91%) */
+  --el-nav-active-bg: rgb(0 0 0 / 0.043);
+  --el-nav-active-text: #171717;
+
+  /* data color (charts): used here as state */
+  --el-chart-success: #00cc44; /* hsl(140 100% 40%) */
+  --el-chart-primary: #0548ff; /* hsl(224 100% 51%) */
+  --el-marker-input: rgb(231 110 0); /* flows: input marker */
+  --el-marker-output: rgb(130 158 0); /* flows: output marker */
+  --el-audio-tag: hsl(293 53% 52%); /* audio tag, v3 model */
+  --el-audio-tag-v4: hsl(6.7 95.3% 66.9%);
+
+  /* toast: always dark, in both themes */
+  --el-toast-surface: hsl(0 0% 13% / 0.85);
+  --el-toast-title: hsl(0 0% 98%);
+  --el-toast-description: #ffffffb6;
+  --el-toast-divider: #ffffff22;
+
+  /* landing (elevenlabs.io): warm, lighter, pill buttons */
+  --el-land-bg: #fdfcfc;
+  --el-land-surface: #f5f3f1;
+  --el-land-surface-2: #ebe8e4;
+  --el-land-text: #000000;
+  --el-land-text-2: #44403b;
+  --el-land-border: #e5e5e5;
+  --el-land-orange: #ff4704;
+  --el-land-blue: #0447ff;
+
+  /* radii (app scale) */
+  --el-radius-sm: 2px;
+  --el-radius: 4px;
+  --el-radius-md: 6px;
+  --el-radius-lg: 8px;
+  --el-radius-xl: 12px;
+  --el-radius-2xl: 16px;
+  --el-radius-3xl: 24px;
+  --el-radius-full: 9999px;
+  --el-radius-nav: 10px; /* sidebar item, tab, small button */
+  --el-radius-control: 12px; /* large button, chip, field, filter */
+
+  /* typography: size/line height, weight. The app's Inter and the landing's Waldenburg
+     become the studio font (--sans). */
+  --el-text-hero: 28px; /* "what do you want to create" title, weight 400, ls −0.21px */
+  --el-text-title: 24px; /* card title, weight 400 */
+  --el-text-section: 16px; /* section header, weight 550 */
+  --el-text-ui: 14px; /* button, menu item, tab, weight 500, line 20px */
+  --el-text-small: 13px; /* small button, weight 500 */
+  --el-text-caption: 12px; /* table header, label, weight 400, line 16px */
+
+  /* app measures */
+  --el-sidebar-w: 255px; /* the item takes 231px: 12px of space on each side */
+  --el-nav-item-h: 32px;
+  --el-column: 706px; /* the central column of simple pages */
+  --el-button-h: 36px; /* 40px on the page action buttons */
+  --el-table-row-h: 36px;
+  --el-switch: 36px 20px;
+
+  /* --- layer 2: the studio names ------------------------------------------------ */
+  --bg: var(--el-background);
+  --surface: var(--el-card);
+  --surface-2: #f4f4f4; /* black 4.3% over white, solid */
+  --surface-3: #ececec; /* black 7.5% over white, solid */
+  --border: var(--el-border);
+  --border-strong: var(--el-border-control);
+  /* background of borderless pieces: alpha, so muted inside muted darkens one step */
+  --muted: var(--el-muted); /* black 4.3 % */
+  --muted-hover: var(--el-border); /* black 7.5 % */
+  /* background of pieces (cards, rows) over the content, which is muted: same as the sidebar */
+  --block-bg: var(--bg);
+  --text: var(--el-foreground);
+  --text-2: var(--el-secondary);
+  --text-3: var(--el-subtle);
+
+  /* states: the green and the blue come from ElevenLabs' chart colors (same hue);
+     amber does not exist in the app beyond the toast, so it is the toast-warning hue */
+  --ok: #00a336;
+  --emerald: #059669;
+  --warning: #c2610c;
+  --error: var(--el-destructive);
+  /* working (Claude, the queue, a running stage) is black, not blue */
+  --running: var(--el-foreground);
+  --ok-bg: rgb(0 204 68 / 0.1);
+  --warning-bg: rgb(245 158 11 / 0.12);
+  --error-bg: rgb(239 68 68 / 0.1);
+  --running-bg: rgb(0 0 0 / 0.06);
+  /* Claude's window, while it works: orange */
+  --claude: #e8751a;
+  --claude-bg: rgb(232 117 26 / 0.13);
+  /* chart series (chart.tsx, like shadcn's --chart-N): the first is the theme primary
+     (black in light, near white in dark); the others follow the dataviz skill's reference
+     palette: orange, aqua, yellow, magenta (the last three below 3:1 on white: always go
+     with a label or table) */
+  --chart-1: var(--el-primary);
+  --chart-2: #eb6834;
+  --chart-3: #1baf7a;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --log-bg: var(--el-background-alt);
+
+  --action: var(--el-foreground);
+  --action-text: #ffffff;
+  --action-hover: var(--el-primary);
+  --title-muted: var(--el-alpha-450);
+
+  --radius: var(--el-radius-xl); /* panels and cards: 12 */
+  --radius-sm: var(--el-radius-lg); /* inner pieces: 8 */
+  /* the content panel height: the window minus the 8 px margin on both sides */
+  --content-height: calc(100vh - 16px - var(--banner, 0px));
+  --top-offset: 0px; /* no top bar: the sticky and min-height rules using --top-offset start from zero */
+  --menu-width: var(--el-sidebar-w);
+  --column: 1320px;
+
+  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
+  --serif: var(--sans);
+  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
+}
+
+/* Dark theme: the values of the app's `.dark`. ElevenLabs mirrors the alpha scale
+   in white (lighten-N = darken-N), so secondary, tertiary and border keep the
+   same steps. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --el-background: #0f0f10; /* hsl(240 3% 6%) */
+    --el-background-alt: #0b0b0c;
+    --el-foreground: #ffffff;
+    --el-primary: #f9fafb; /* hsl(210 20% 98%) */
+    --el-secondary: #ffffffa4; /* lighten-600 */
+    --el-subtle: #ffffff87; /* lighten-500 */
+    --el-muted: #ffffff0b; /* lighten-100 */
+    --el-accent: #1f2937; /* hsl(215 28% 17%) */
+    --el-border: #ffffff13; /* gray-alpha-150 */
+    --el-border-control: #ffffff1a;
+    --el-input: #1f2937;
+    --el-ring: #d1d5db;
+    --el-destructive: #ff6b6b;
+    --el-card: #0f0f10;
+    --el-popover: #111827; /* --tw-gray-900 (Tailwind scale) */
+    --el-sidebar-bg: #18181b; /* hsl(240 6% 10%) */
+    --el-sidebar-fg: #f4f4f5;
+    --el-sidebar-accent: #27272a; /* hsl(240 4% 16%) */
+    --el-sidebar-border: #27272a;
+    --el-nav-active-bg: #ffffff1a;
+    --el-nav-active-text: #ffffff;
+
+    --surface-2: #18181b;
+    --surface-3: #27272a;
+    --ok: #3ddc6b;
+    --emerald: #34d399;
+    --warning: #fda05e;
+    --running: #f4f4f5;
+    --ok-bg: rgb(0 204 68 / 0.16);
+    --warning-bg: rgb(252 122 55 / 0.15);
+    --error-bg: rgb(255 107 107 / 0.14);
+    --running-bg: rgb(255 255 255 / 0.12);
+    --claude: #f59a4d;
+    --claude-bg: rgb(245 154 77 / 0.18);
+    /* the dark steps of the same palette, validated on #0f0f10 */
+    --chart-1: var(--el-primary);
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
+    --log-bg: #0b0b0c;
+    --action: #ffffff;
+    --action-text: #0f0f10;
+    --action-hover: #e5e5e5;
+  }
+}

package/studio/web/types/api.ts

@@ -0,0 +1,2 @@
+/* Response types of the studio API, kept in shared/types (the server produces them too). */
+export type * from "../../shared/types/api";

package/studio/web/types/assets.d.ts

@@ -0,0 +1,9 @@
+/* image files imported through Bun's bundler: the value is the file URL */
+declare module "*.svg" {
+  const url: string;
+  export default url;
+}
+declare module "*.png" {
+  const url: string;
+  export default url;
+}

package/templates/brief.md

@@ -0,0 +1,27 @@
+# Brief · <slug>
+
+## Pedido
+
+> Cole aqui o pedido do usuário, palavra por palavra.
+
+## Material
+
+- `source/…` — o que é, de onde veio
+- fontes externas consultadas: `source/sources.md`
+
+## Parâmetros
+
+| | valor | de onde veio |
+|---|---|---|
+| entregas | vídeo · carrossel · os dois | padrão (vídeo) / pedido |
+| formato | 9:16 · 1080×1920 · 30 fps | padrão / pedido |
+| duração alvo | 35–60 s | padrão / pedido |
+| voz | perfil "Pedro" | config |
+| público | dev e criador que usa IA no trabalho | padrão / pedido |
+| tese | uma frase: o que quem assiste leva | |
+| CTA | seguir o canal | padrão / pedido |
+
+## Restrições
+
+O que não pode aparecer, o que não pode ser dito, dados que precisam de
+confirmação.

package/templates/captions.html

@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+<meta charset="utf-8">
+<title>captions</title>
+<!-- ============================================================
+     omnivideo CAPTION LAYER. Filled in by tools/captions.mjs: it replaces
+     the data marker (captions, position, safe areas) and pastes the video's
+     motion/src/_captions.css, if any, at the end of the <style>.
+
+     Transparent background: render.mjs grabs one frame per caption (--frames
+     --alpha) and assemble.mjs overlays each one at its time. The frame at t
+     depends only on t: the caption with start <= t < end shows.
+
+     Position (tools/captions.mjs): an anchor of the 3×3 grid pinned to the
+     platform's safe area (with the video's `safe` adjustments on top), plus
+     x/y in frame px; video → scene → caption. The caption goes wherever x/y
+     says, even outside the safe area (only the frame itself limits it); when
+     it crosses, it gets data-outside and the preview says by how much and on
+     which side.
+
+     Color, outline and shadow (color, background, outline*, shadow_*): the
+     same three levels as position. Only what was adjusted becomes an inline
+     style; the rest keeps the style's CSS (and the video's _captions.css).
+
+     Style (reference/captions.md): Schibsted Grotesk Bold, one line, dark
+     text on a translucent white pill ("pill") or white with a shadow
+     ("shadow").
+
+     ?t=2.4        freezes at that instant
+     ?preview=1    shows the safe area and accepts postMessage({ position }) from the studio
+     ============================================================ -->
+<style>
+:root{
+  --t:0s;
+  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
+  --body-size:4.4vw;                   /* 47 px at 1080 wide: 28 characters fit every safe area */
+  --ink:#111;
+  --pill:rgba(255,255,255,0.9);
+  --pill-shadow:0 0.4vw 2.4vw rgba(0,0,0,0.18);
+}
+:root[data-format="16:9"]{ --body-size:2.4vw; }
+
+html,body{ margin:0; width:100vw; height:100vh; overflow:hidden; background:transparent; }
+
+.caption{
+  position:absolute; left:0; top:0;
+  display:none;
+  box-sizing:border-box;
+  font:700 var(--body-size)/1.18 var(--sans);
+  letter-spacing:-0.01em;
+  text-align:center;
+  white-space:nowrap;
+}
+.caption.active{ display:block; }
+.preview .caption.hidden{ opacity:0.3; }
+.caption.wrap{ white-space:normal; text-wrap:balance; }
+
+[data-style="pill"] .caption{
+  color:var(--ink); background:var(--pill); box-shadow:var(--pill-shadow);
+  padding:0.32em 0.7em 0.36em; border-radius:0.62em;
+}
+[data-style="shadow"] .caption{
+  color:#fff;
+  text-shadow:0 0.04em 0.12em rgba(0,0,0,0.55), 0 0 0.6em rgba(0,0,0,0.35);
+}
+
+/* studio preview only: what falls outside the safe area */
+.safe{ position:absolute; display:none; pointer-events:none; box-shadow:0 0 0 100vmax rgba(220,40,40,0.16); outline:0.25vw dashed rgba(220,40,40,0.8); }
+.preview .safe{ display:block; }
+.preview .caption[data-outside]{ outline:0.3vw solid #e5601e; outline-offset:0.4vw; }
+/*omnivideo:video-style*/
+</style>
+</head>
+<body>
+<div class="safe" id="safe"></div>
+
+<script>
+const DATA = /*omnivideo:data*/{ "w": 1080, "h": 1920,
+  "safes": { "all": { "top": 0.15, "bottom": 0.35, "left": 0.111, "right": 0.178 } },
+  "position": { "platform": "all", "anchor": "bottom-center", "x": 0, "y": 0 },
+  "keys": ["anchor", "x", "y", "color", "background", "background_opacity", "outline", "outline_color", "shadow_color", "shadow_opacity", "shadow_blur", "shadow_x", "shadow_y"],
+  "defaults": { "pill": { "color": "#111111", "background": "#ffffff", "background_opacity": 0.9, "outline": 0, "outline_color": "#000000", "shadow_color": "#000000", "shadow_opacity": 0.18, "shadow_blur": 26, "shadow_x": 0, "shadow_y": 4 } },
+  "captions": [{ "id": "f01.1", "scene": "c01", "s": 0, "e": 9, "text": "Uma legenda de exemplo" }] };
+
+const q = new URLSearchParams(location.search);
+const preview = q.has("preview");
+if (preview) document.body.classList.add("preview");
+
+const nodes = DATA.captions.map(c => {
+  const el = document.createElement("div");
+  /* "legenda" = legacy class, so a per-video _captions.css written before the rename still matches */
+  el.className = "caption legenda";
+  el.textContent = c.text;
+  el.dataset.id = c.id;
+  document.body.appendChild(el);
+  return el;
+});
+
+/* frame px → page px (the renderer opens the page at frame size; the preview, smaller) */
+const scale = () => window.innerWidth / DATA.w;
+
+/* the platform's safe area, with the sides the video adjusted (`position.safe`) on top */
+function safeFraction() {
+  const p = DATA.position;
+  const base = DATA.safes[p.platform] ?? Object.values(DATA.safes)[0] ?? { top: 0, bottom: 0, left: 0, right: 0 };
+  const adj = Object.fromEntries(["top", "bottom", "left", "right"].filter(k => Number.isFinite(p.safe?.[k])).map(k => [k, p.safe[k]]));
+  return { ...base, ...adj };
+}
+
+function safeRect() {
+  const s = safeFraction();
+  const W = window.innerWidth, H = window.innerHeight;
+  return { l: s.left * W, r: W - s.right * W, t: s.top * H, b: H - s.bottom * H };
+}
+
+/* video → scene → caption */
+function config(c) {
+  const p = DATA.position;
+  const pick = o => Object.fromEntries(DATA.keys.filter(k => o?.[k] != null).map(k => [k, o[k]]));
+  return { anchor: "bottom-center", x: 0, y: 0, ...pick(p), ...pick(p.scenes?.[c.scene]), ...pick(p.individual?.[c.id]) };
+}
+
+const rgba = (hex, a) => { const n = parseInt(String(hex).slice(1), 16) || 0; return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`; };
+
+/* color, outline and shadow: only what the video adjusted becomes an inline style */
+function applyStyle(el, c) {
+  const style = document.documentElement.dataset.style || "pill";
+  const d = DATA.defaults?.[style] ?? {};
+  const k = scale();
+  const has = (...ks) => ks.some(x => c[x] != null);
+  const v = x => c[x] ?? d[x];
+  const s = el.style;
+  s.color = c.color ?? "";
+  s.background = style === "pill" && has("background", "background_opacity") ? rgba(v("background"), v("background_opacity")) : "";
+  /* the stroke grows to both sides of the edge; painted before the fill, only the outer half shows */
+  const stroke = has("outline", "outline_color") && v("outline") > 0;
+  s.webkitTextStroke = stroke ? `${v("outline") * 2 * k}px ${v("outline_color")}` : "";
+  s.paintOrder = stroke ? "stroke fill" : "";
+  const shadow = has("shadow_color", "shadow_opacity", "shadow_blur", "shadow_x", "shadow_y")
+    ? `${v("shadow_x") * k}px ${v("shadow_y") * k}px ${v("shadow_blur") * k}px ${rgba(v("shadow_color"), v("shadow_opacity"))}` : "";
+  s.boxShadow = style === "pill" ? shadow : "";
+  s.textShadow = style === "shadow" ? shadow : "";
+}
+
+function place(el, c) {
+  const cfg = config(c);
+  applyStyle(el, cfg);
+  const [row, col] = String(cfg.anchor).split("-");
+  const s = safeRect();
+  el.classList.remove("wrap");
+  el.style.maxWidth = "";
+  if (el.offsetWidth > s.r - s.l) { el.classList.add("wrap"); el.style.maxWidth = `${s.r - s.l}px`; }
+  const w = el.offsetWidth, h = el.offsetHeight, k = scale();
+  let x = col === "left" ? s.l : col === "right" ? s.r - w : (s.l + s.r) / 2 - w / 2;
+  let y = row === "top" ? s.t : row === "middle" ? (s.t + s.b) / 2 - h / 2 : s.b - h;
+  x += (+cfg.x || 0) * k;
+  y += (+cfg.y || 0) * k;
+  /* only the frame limits: the caption goes where x/y sent it, inside or outside the safe area */
+  const W = window.innerWidth, H = window.innerHeight;
+  const cx = Math.min(Math.max(x, 0), Math.max(W - w, 0)), cy = Math.min(Math.max(y, 0), Math.max(H - h, 0));
+  const over = { top: s.t - cy, bottom: cy + h - s.b, left: s.l - cx, right: cx + w - s.r };
+  const sides = Object.entries(over).filter(([, v]) => v > 0.5).map(([side, v]) => ({ side, px: Math.round(v / k) }));
+  const outside = sides.length > 0;
+  el.toggleAttribute("data-outside", outside);
+  el.style.transform = `translate(${cx}px, ${cy}px)`;
+  return { id: c.id, outside, sides, x: Math.round(cx / k), y: Math.round(cy / k), w: Math.round(w / k), h: Math.round(h / k) };
+}
+
+const readT = () => parseFloat(document.documentElement.style.getPropertyValue("--t")) || 0;
+function show() {
+  const t = readT();
+  const i = DATA.captions.findIndex(c => t >= c.s && t < c.e);
+  /* turned off (`individual.<id>.hidden`): the render skips it; the preview shows it faded, so it can still be seen and turned on */
+  const off = c => !!DATA.position.individual?.[c.id]?.hidden;
+  nodes.forEach((el, k) => {
+    el.classList.toggle("active", k === i && (preview || !off(DATA.captions[k])));
+    el.classList.toggle("hidden", preview && off(DATA.captions[k]));
+  });
+  const s = safeRect();
+  Object.assign(document.getElementById("safe").style, { left: `${s.l}px`, top: `${s.t}px`, width: `${s.r - s.l}px`, height: `${s.b - s.t}px` });
+  const box = i >= 0 ? place(nodes[i], DATA.captions[i]) : null;
+  if (preview && window.parent !== window) window.parent.postMessage({ type: "caption", box }, "*");
+}
+new MutationObserver(show).observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
+
+/* preview: the studio sends the position being edited and the instant, without reloading */
+if (preview) {
+  window.addEventListener("message", e => {
+    if (e.source !== window.parent || !e.data) return;
+    if (e.data.position) DATA.position = e.data.position;
+    if (e.data.style) document.documentElement.dataset.style = e.data.style;
+    /* the same --t doesn't fire the observer: place again anyway */
+    if (e.data.t != null) document.documentElement.style.setProperty("--t", e.data.t + "s");
+    show();
+  });
+  window.addEventListener("resize", show);
+}
+
+if (q.has("t")) document.documentElement.style.setProperty("--t", q.get("t") + "s");
+document.fonts.ready.then(() => { show(); window.__ready = true; });
+</script>
+</body>
+</html>

package/templates/carousel-composition.md

@@ -0,0 +1,47 @@
+# Composição do carrossel · <título>
+
+Formato: 4:5, 1080×1350 (todos os slides).
+Slide "salvável": `sNN`, <o slide que a pessoa volta para ver: a lista, a tabela, o passo a passo>.
+
+## Estilo visual
+
+Um estilo visual da biblioteca, `referencias/<pasta>` (veja `node tools/reference.mjs list`),
+ou o estilo do vídeo da pasta (`motion.md`) quando o carrossel nasce dele. O que vem
+dele é princípio, não asset.
+
+| | |
+|---|---|
+| por que este | o que ele tem que este carrossel precisa |
+| vale levar | os itens do guia que entram aqui, cada um como regra |
+| traduzido | o que é movimento no estilo visual e vira parado aqui (ex.: "monta em degraus" → as células apagadas visíveis em volta das acesas) |
+| não copiar | marca, dados, layout literal |
+
+## Estilo do carrossel
+
+Vale para todos os slides e mora em `carousel/src/_common.html` (tokens,
+fundo, moldura).
+
+| | escolha |
+|---|---|
+| fundo | cor ou textura; se for panorama, o que atravessa a emenda e onde |
+| paleta | 2 a 3 cores, com papel de cada uma |
+| tipografia | Schibsted Grotesk; corpos em px para 1080 de largura: título, corpo, rótulo (corpo ≥ 34 px, nada abaixo de 26 px) |
+| moldura | o que se repete em todo slide: contador `03/08`, marca do canal, deixa de arrasto (→) |
+| margens | laterais ≥ 88 px, topo e base ≥ 104 px; texto nunca a menos de 64 px da borda |
+| objetos | um desenho para cada coisa que aparece mais de uma vez |
+
+## Slides
+
+| slide | papel | herói | o que está na tela |
+|---|---|---|---|
+| s01 | capa | | |
+| s02 | conteúdo | | |
+| sNN | cta | | |
+
+---
+
+## s01 · <título>
+
+**Herói:** o único elemento em destaque total.
+**Apoio:** o que cede o palco.
+**Composição:** onde fica cada coisa.

package/templates/carousel-script.md

@@ -0,0 +1,60 @@
+# Roteiro do carrossel · <título>
+
+| formato | slides | palavras (sem a capa) | origem |
+|---|---|---|---|
+| 4:5 · 1080×1350 | 8 | 0 | roteiro · material · vídeo `scenes.json` |
+
+**Tese:** uma frase.
+
+## Estratégia
+
+| | |
+|---|---|
+| pilar | um dos pilares do `channel/playbook.md` |
+| objetivo | salvamento · compartilhamento · seguidor · lead (um só) |
+| métrica que julga | salvos · compartilhamentos · seguidores · comentários e DMs do omnichat |
+| para quem | quem para de rolar o feed, numa linha |
+| promessa | o que a pessoa leva se arrastar até o fim |
+| pergunta que segura | o que a capa abre e só o penúltimo slide responde |
+| CTA | o que o objetivo pede, no último slide e na legenda |
+
+## Capas
+
+| | título (3 a 8 palavras) | visual da capa | tipo |
+|---|---|---|---|
+| **A · escolhida** | | o herói da capa, legível na miniatura do feed | risco · resultado · contradição · número · lista · pergunta concreta |
+| B | | | |
+| C | | | |
+
+**Por que a A:** uma frase, com o que o playbook e as métricas mostram.
+
+---
+
+## s01 · Capa
+
+**Ideia:** a capa A.
+**Na tela:** título · subtítulo (opcional, até 8 palavras) · deixa de arrasto.
+
+## s02 · <ideia>
+
+**Ideia:** uma linha; termina puxando o próximo slide.
+**Na tela:**
+
+> Título do slide (até 8 palavras).
+>
+> Corpo: até 30 palavras, uma ideia.
+
+**Fonte:** `source/…` (todo fato com número, nome ou data)
+
+## sNN · CTA
+
+**Ideia:** o CTA do objetivo.
+**Na tela:** o pedido, numa frase, e o que a pessoa ganha fazendo.
+
+---
+
+## Legenda do post
+
+O texto que sobe com o carrossel (vai para `caption` no `carousel.json`): a
+primeira linha repete a promessa da capa com outras palavras, duas ou três
+linhas de contexto, o CTA. Hashtags fixas vêm de `publish.text` da config.