@praeko/studio-kit 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,9 +1,9 @@
-// src/pecas.tsx
+// src/parts.tsx
 import { Loop, OffthreadVideo, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig, Img, AbsoluteFill } from "remotion";
-import { FPS, pop, ramp, rgba, surge, useTema } from "@praeko/studio-core";
+import { FPS, appear, pop, ramp, rgba, useTheme } from "@praeko/studio-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var PainelD = ({ titulo, dur, children }) => {
-  const { destaque: LAMP, texto: INK, fonte: FONT } = useTema();
+var Panel = ({ title, dur, children }) => {
+  const { accent: LAMP, text: INK, font: FONT } = useTheme();
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const pop3 = spring({ frame, fps, config: { damping: 13, stiffness: 190 } });
@@ -32,68 +32,71 @@ var PainelD = ({ titulo, dur, children }) => {
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 38, letterSpacing: 5, color: LAMP, whiteSpace: "nowrap" }, children: titulo }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 38, letterSpacing: 5, color: LAMP, whiteSpace: "nowrap" }, children: title }),
         /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 40, minHeight: 0 }, children })
       ]
     }
   );
 };
-var Caixa = ({ t, q, cor: cor4, children, mono, size = 48, dim, dash }) => {
-  const { caixa: CAIXA, texto: INK, fonte: FONT, mono: MONO } = useTema();
-  return /* @__PURE__ */ jsx("div", { style: { background: CAIXA, border: `4px ${dash ? "dashed" : "solid"} ${cor4}`, borderRadius: 22, padding: "18px 28px", fontFamily: mono ? MONO : FONT, fontSize: size, textAlign: "center", whiteSpace: "nowrap", color: INK, opacity: surge(t, q) * (dim ? 0.55 : 1), translate: `0px ${(1 - surge(t, q)) * 30}px` }, children });
+var Box = ({ t, q, color: color2, children, mono, size = 48, dim, dash }) => {
+  const { box: BOX, text: INK, font: FONT, mono: MONO } = useTheme();
+  return /* @__PURE__ */ jsx("div", { style: { background: BOX, border: `4px ${dash ? "dashed" : "solid"} ${color2}`, borderRadius: 22, padding: "18px 28px", fontFamily: mono ? MONO : FONT, fontSize: size, textAlign: "center", whiteSpace: "nowrap", color: INK, opacity: appear(t, q) * (dim ? 0.55 : 1), translate: `0px ${(1 - appear(t, q)) * 30}px` }, children });
 };
-var Linha = ({ t, q, cor: cor4, size = 46, children }) => {
-  const { caixa: CAIXA, texto: INK, fonte: FONT, destaque: LAMP } = useTema();
-  return /* @__PURE__ */ jsx("div", { style: { background: CAIXA, border: `4px solid ${cor4 ?? LAMP}`, borderRadius: 24, padding: "22px 30px", fontSize: size, opacity: surge(t, q), translate: `${(1 - surge(t, q)) * 70}px 0px`, whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 22, fontFamily: FONT, color: INK }, children });
+var Line = ({ t, q, color: color2, size = 46, children }) => {
+  const { box: BOX, text: INK, font: FONT, accent: LAMP } = useTheme();
+  return /* @__PURE__ */ jsx("div", { style: { background: BOX, border: `4px solid ${color2 ?? LAMP}`, borderRadius: 24, padding: "22px 30px", fontSize: size, opacity: appear(t, q), translate: `${(1 - appear(t, q)) * 70}px 0px`, whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 22, fontFamily: FONT, color: INK }, children });
 };
-var Big = ({ t, q, cor: cor4, size, mono, children }) => {
-  const { texto: INK, fonte: FONT, mono: MONO } = useTema();
-  return /* @__PURE__ */ jsx("div", { style: { fontFamily: mono ? MONO : FONT, fontSize: size, fontWeight: 900, color: cor4 ?? INK, textAlign: "center", lineHeight: 1.05, opacity: surge(t, q, 0.25), scale: String(pop(t, q)), whiteSpace: "nowrap" }, children });
+var Big = ({ t, q, color: color2, size, mono, children }) => {
+  const { text: INK, font: FONT, mono: MONO } = useTheme();
+  return /* @__PURE__ */ jsx("div", { style: { fontFamily: mono ? MONO : FONT, fontSize: size, fontWeight: 900, color: color2 ?? INK, textAlign: "center", lineHeight: 1.05, opacity: appear(t, q, 0.25), scale: String(pop(t, q)), whiteSpace: "nowrap" }, children });
 };
-var Balao = ({ t, q, cor: cor4, children, autor = "\u2014 um jogador, no chat" }) => {
-  const { caixa: CAIXA, texto: INK, fonte: FONT, mono: MONO, suave: MUTED } = useTema();
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", background: CAIXA, border: `4px solid ${cor4}`, borderRadius: 28, padding: "28px 34px", fontFamily: FONT, fontSize: 46, lineHeight: 1.25, color: INK, textAlign: "center", opacity: surge(t, q), translate: `0px ${(1 - surge(t, q)) * 30}px` }, children: [
-    /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: 24, top: -34, fontSize: 90, color: cor4, lineHeight: 1 }, children: "\u201C" }),
+var Bubble = ({ t, q, color: color2, children, author = "\u2014 someone, in the chat" }) => {
+  const { box: BOX, text: INK, font: FONT, mono: MONO, muted: MUTED } = useTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", background: BOX, border: `4px solid ${color2}`, borderRadius: 28, padding: "28px 34px", fontFamily: FONT, fontSize: 46, lineHeight: 1.25, color: INK, textAlign: "center", opacity: appear(t, q), translate: `0px ${(1 - appear(t, q)) * 30}px` }, children: [
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: 24, top: -34, fontSize: 90, color: color2, lineHeight: 1 }, children: "\u201C" }),
     children,
-    /* @__PURE__ */ jsx("div", { style: { fontFamily: MONO, fontSize: 26, color: MUTED, marginTop: 16 }, children: autor })
+    /* @__PURE__ */ jsx("div", { style: { fontFamily: MONO, fontSize: 26, color: MUTED, marginTop: 16 }, children: author })
   ] });
 };
-var Codigo = ({ t, q, titulo, cor: cor4, linhas }) => {
-  const { caixa: CAIXA, texto: INK, mono: MONO } = useTema();
-  return /* @__PURE__ */ jsxs("div", { style: { background: CAIXA, borderRadius: 24, overflow: "hidden", border: `4px solid ${cor4}`, opacity: surge(t, q), translate: `0px ${(1 - surge(t, q)) * 30}px` }, children: [
-    /* @__PURE__ */ jsx("div", { style: { background: "#1c1830", padding: "12px 26px", fontFamily: MONO, fontSize: 26, color: "#8b86a8", whiteSpace: "nowrap" }, children: titulo }),
-    /* @__PURE__ */ jsx("div", { style: { fontFamily: MONO, fontSize: 30, lineHeight: 1.6, padding: "20px 0" }, children: linhas.map((l, i) => /* @__PURE__ */ jsx("div", { style: { whiteSpace: "pre", padding: "0 26px", color: l.cor || INK, background: l.marca ? `${l.cor}26` : "transparent", borderLeft: `6px solid ${l.marca ? l.cor : "transparent"}` }, children: l.s }, i)) })
+var Code = ({ t, q, title, color: color2, lines }) => {
+  const { box: BOX, text: INK, mono: MONO } = useTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { background: BOX, borderRadius: 24, overflow: "hidden", border: `4px solid ${color2}`, opacity: appear(t, q), translate: `0px ${(1 - appear(t, q)) * 30}px` }, children: [
+    /* @__PURE__ */ jsx("div", { style: { background: "#1c1830", padding: "12px 26px", fontFamily: MONO, fontSize: 26, color: "#8b86a8", whiteSpace: "nowrap" }, children: title }),
+    /* @__PURE__ */ jsx("div", { style: { fontFamily: MONO, fontSize: 30, lineHeight: 1.6, padding: "20px 0" }, children: lines.map((l, i) => /* @__PURE__ */ jsx("div", { style: { whiteSpace: "pre", padding: "0 26px", color: l.color || INK, background: l.mark ? `${l.color}26` : "transparent", borderLeft: `6px solid ${l.mark ? l.color : "transparent"}` }, children: l.s }, i)) })
   ] });
 };
-var Janela = ({ t, q, src, duracao, de, left, top, w, reg = [0, 0, 1920, 1080], tag = "CENA REAL DO JOGO", dur }) => {
-  const { destaque: LAMP, texto: INK, erro: RUIM, mono: MONO } = useTema();
-  const s = w / reg[2], h = w * reg[3] / reg[2], o = surge(t, q, 0.5);
+var Window = ({ t, q, src, clipDuration, from, left, top, w, reg = [0, 0, 1920, 1080], tag = "REAL FOOTAGE", dur }) => {
+  const { accent: LAMP, text: INK, error: BAD, mono: MONO } = useTheme();
+  const s = w / reg[2], h = w * reg[3] / reg[2], o = appear(t, q, 0.5);
   const push = 1 + 0.07 * ramp(t, q, q + dur);
-  const total = duracao - de;
+  const total = clipDuration - from;
   return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left, top, width: w, height: h, borderRadius: 26, overflow: "hidden", border: `4px solid ${LAMP}`, boxShadow: `0 0 70px ${rgba(LAMP, 0.25)}, 0 24px 60px rgba(0,0,0,.6)`, opacity: o, translate: `0px ${(1 - o) * 40}px`, background: "#0b0b10" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, scale: String(push), transformOrigin: "50% 60%" }, children: /* @__PURE__ */ jsx(Loop, { durationInFrames: Math.round(total * FPS), children: /* @__PURE__ */ jsx(OffthreadVideo, { src: staticFile(src), startFrom: Math.round(de * FPS), muted: true, style: { position: "absolute", left: -reg[0] * s, top: -reg[1] * s, width: 1920 * s, height: 1080 * s, imageRendering: "pixelated" } }) }) }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, scale: String(push), transformOrigin: "50% 60%" }, children: /* @__PURE__ */ jsx(Loop, { durationInFrames: Math.round(total * FPS), children: /* @__PURE__ */ jsx(OffthreadVideo, { src: staticFile(src), startFrom: Math.round(from * FPS), muted: true, style: { position: "absolute", left: -reg[0] * s, top: -reg[1] * s, width: 1920 * s, height: 1080 * s, imageRendering: "pixelated" } }) }) }),
     /* @__PURE__ */ jsxs("div", { style: { position: "absolute", left: 14, bottom: 12, background: "rgba(10,8,6,.78)", color: INK, fontFamily: MONO, fontSize: 22, padding: "4px 14px", borderRadius: 10, display: "flex", gap: 10, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx("span", { style: { width: 12, height: 12, borderRadius: 6, background: RUIM, opacity: 0.5 + 0.5 * Math.abs(Math.sin(t * 4)) } }),
+      /* @__PURE__ */ jsx("span", { style: { width: 12, height: 12, borderRadius: 6, background: BAD, opacity: 0.5 + 0.5 * Math.abs(Math.sin(t * 4)) } }),
       tag
     ] })
   ] });
 };
-var Celular = ({ t, q, src, duracao, de, left, top, w, dur }) => {
-  const { destaque: LAMP } = useTema();
-  const h = w * 1920 / 1080, o = surge(t, q, 0.5);
-  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", left, top, width: w, height: h, borderRadius: 46, border: "10px solid #0b0b10", outline: `3px solid ${LAMP}`, overflow: "hidden", boxShadow: `0 0 70px ${rgba(LAMP, 0.22)}, 0 24px 60px rgba(0,0,0,.6)`, opacity: o, translate: `0px ${(1 - o) * 50}px`, background: "#0b0b10", scale: String(0.96 + 0.04 * ramp(t, q, q + dur)) }, children: /* @__PURE__ */ jsx(Loop, { durationInFrames: Math.round((duracao - de) * FPS), children: /* @__PURE__ */ jsx(OffthreadVideo, { src: staticFile(src), startFrom: Math.round(de * FPS), muted: true, style: { width: "100%", height: "100%", objectFit: "cover" } }) }) });
+var Phone = ({ t, q, src, clipDuration, from, left, top, w, dur }) => {
+  const { accent: LAMP } = useTheme();
+  const h = w * 1920 / 1080, o = appear(t, q, 0.5);
+  return /* @__PURE__ */ jsx("div", { style: { position: "absolute", left, top, width: w, height: h, borderRadius: 46, border: "10px solid #0b0b10", outline: `3px solid ${LAMP}`, overflow: "hidden", boxShadow: `0 0 70px ${rgba(LAMP, 0.22)}, 0 24px 60px rgba(0,0,0,.6)`, opacity: o, translate: `0px ${(1 - o) * 50}px`, background: "#0b0b10", scale: String(0.96 + 0.04 * ramp(t, q, q + dur)) }, children: /* @__PURE__ */ jsx(Loop, { durationInFrames: Math.round((clipDuration - from) * FPS), children: /* @__PURE__ */ jsx(OffthreadVideo, { src: staticFile(src), startFrom: Math.round(from * FPS), muted: true, style: { width: "100%", height: "100%", objectFit: "cover" } }) }) });
 };
-var Gato = ({ nome, tam = 220 }) => /* @__PURE__ */ jsx("div", { style: { background: "#1c1830", border: "6px solid #3a3358", borderRadius: 30, padding: 12 }, children: /* @__PURE__ */ jsx(Img, { src: staticFile(`gatos/gato-${nome}.png`), style: { width: tam, height: tam, imageRendering: "pixelated" } }) });
-var Moldura = ({ glow, titulo, cor: cor4, children, tam = 130 }) => {
-  const { fundoCapa: BG, texto: INK, destaque: LAMP, fonte: FONT, handle } = useTema();
+var Mascot = ({ name, size = 220, path }) => {
+  const { mascotPath } = useTheme();
+  return /* @__PURE__ */ jsx("div", { style: { background: "#1c1830", border: "6px solid #3a3358", borderRadius: 30, padding: 12 }, children: /* @__PURE__ */ jsx(Img, { src: staticFile(path ?? (mascotPath ?? "mascots/{name}.png").replace("{name}", name)), style: { width: size, height: size, imageRendering: "pixelated" } }) });
+};
+var Frame = ({ glow, title, color: color2, children, size = 130 }) => {
+  const { coverBackground: BG, text: INK, accent: LAMP, font: FONT, handle } = useTheme();
   return /* @__PURE__ */ jsxs(AbsoluteFill, { style: { background: `radial-gradient(ellipse at 50% 44%, ${glow} 0%, rgba(0,0,0,0) 56%), ${BG}`, alignItems: "center", fontFamily: FONT, textAlign: "center" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { marginTop: 350, fontSize: tam, fontWeight: 900, color: INK, lineHeight: 1.02, textShadow: "0 8px 0 #000", whiteSpace: "nowrap" }, children: [
-      titulo[0],
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 350, fontSize: size, fontWeight: 900, color: INK, lineHeight: 1.02, textShadow: "0 8px 0 #000", whiteSpace: "nowrap" }, children: [
+      title[0],
       /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("span", { style: { color: cor4 }, children: titulo[1] }),
-      titulo[2] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { style: { color: color2 }, children: title[1] }),
+      title[2] ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("br", {}),
-        titulo[2]
+        title[2]
       ] }) : null
     ] }),
     /* @__PURE__ */ jsx("div", { style: { marginTop: 130, display: "flex", flexDirection: "column", alignItems: "center", width: 1e3, transform: "scale(1.16)", transformOrigin: "top center" }, children }),
@@ -101,391 +104,400 @@ var Moldura = ({ glow, titulo, cor: cor4, children, tam = 130 }) => {
   ] });
 };
 
-// src/declarativo.tsx
+// src/declarative.tsx
 import { Composition, Still, useCurrentFrame as useCurrentFrame2 } from "remotion";
-import { Episodio, FPS as FPS2, TemaProvider, mkAt, pop as pop2, ramp as ramp2, surge as surge2, useTema as useTema2 } from "@praeko/studio-core";
+import { Episode, FPS as FPS2, ThemeProvider, makeAt, pop as pop2, ramp as ramp2, appear as appear2, useTheme as useTheme2 } from "@praeko/studio-core";
+
+// src/color.ts
+var resolveColor = (theme, name) => {
+  if (!name) return void 0;
+  if (name.startsWith("#")) return name;
+  const value = theme[name];
+  return value ?? name;
+};
+
+// src/declarative.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var cor = (T, c) => c ? T[c] && !c.startsWith("#") ? T[c] : c : void 0;
-var estilo = (it, base = {}) => {
+var style = (it, base = {}) => {
   const p = it.pos;
   return p ? { position: "absolute", left: p.left, right: p.right, top: p.top, bottom: p.bottom, width: p.w, height: p.h, ...base } : base;
 };
-var alinhar = { centro: "center", inicio: "flex-start", fim: "flex-end", esticar: "stretch" };
-var Texto = ({ it, t }) => {
-  const T = useTema2();
-  const q = it.em ?? 0.3, linhas = String(it.texto).split("\n");
+var alignMap = { center: "center", start: "flex-start", end: "flex-end", stretch: "stretch" };
+var TextItem = ({ it, t }) => {
+  const T = useTheme2();
+  const q = it.at ?? 0.3, lines = String(it.text).split("\n");
   const base = {
-    ...it.fonte ? { fontFamily: it.fonte === "mono" ? T.mono : T.fonte } : {},
-    fontSize: it.tamanho ?? 40,
-    color: cor(T, it.cor) ?? T.texto,
-    ...it.alinhar === "esquerda" ? { textAlign: "left" } : { textAlign: "center" },
-    ...it.semFade ? {} : { opacity: surge2(t, q) },
-    ...it.altura ? { lineHeight: it.altura } : {},
-    ...it.peso ? { fontWeight: it.peso } : {},
+    ...it.font ? { fontFamily: it.font === "mono" ? T.mono : T.font } : {},
+    fontSize: it.size ?? 40,
+    color: resolveColor(T, it.color) ?? T.text,
+    ...it.align === "left" ? { textAlign: "left" } : { textAlign: "center" },
+    ...it.noFade ? {} : { opacity: appear2(t, q) },
+    ...it.lineHeight ? { lineHeight: it.lineHeight } : {},
+    ...it.weight ? { fontWeight: it.weight } : {},
     ...it.pop ? { scale: String(pop2(t, q)) } : {},
-    ...it.semQuebra ? { whiteSpace: "nowrap" } : {}
+    ...it.noWrap ? { whiteSpace: "nowrap" } : {}
   };
-  return /* @__PURE__ */ jsx2("div", { style: estilo(it, base), children: linhas.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
+  return /* @__PURE__ */ jsx2("div", { style: style(it, base), children: lines.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
     l,
-    i < linhas.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
+    i < lines.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
   ] }, i)) });
 };
-var Barra = ({ it, t }) => {
-  const T = useTema2();
-  const q = it.em ?? 0.3, pr = it.preenche ?? {}, de = pr.de ?? 0, ate = pr.ate ?? 1;
-  const p = pr.duracao ? de + (ate - de) * ramp2(t, pr.inicio ?? q, (pr.inicio ?? q) + pr.duracao) : ate;
-  const g = (it.gradiente ?? [T.erro, T.erro]).map((c) => {
+var BarItem = ({ it, t }) => {
+  const T = useTheme2();
+  const q = it.at ?? 0.3, pr = it.fill ?? {}, from = pr.from ?? 0, to = pr.to ?? 1;
+  const p = pr.duration ? from + (to - from) * ramp2(t, pr.start ?? q, (pr.start ?? q) + pr.duration) : to;
+  const g = (it.gradient ?? [T.error, T.error]).map((c) => {
     const [n, ...r] = String(c).split(" ");
-    return [cor(T, n), ...r].join(" ");
+    return [resolveColor(T, n), ...r].join(" ");
   });
-  const fim = it.brilhoAoFim && p > 0.98;
-  const dentro = { width: `${p * 100}%`, height: "100%", background: it.gradienteAngulo === false ? g[0] : `linear-gradient(90deg, ${g.join(", ")})` };
-  return /* @__PURE__ */ jsx2("div", { style: estilo(it, { height: it.altura ?? 40, borderRadius: it.raio ?? 14, background: it.fundo ?? "#1d1812", ...it.borda === false ? {} : { border: `${it.borda ?? 3}px solid #3a2f22` }, overflow: "hidden", ...it.semFade ? {} : { opacity: surge2(t, q) }, ...fim ? { boxShadow: `0 0 40px ${cor(T, it.brilhoAoFim)}` } : {} }), children: /* @__PURE__ */ jsx2("div", { style: dentro }) });
-};
-var Barras = ({ it, t }) => {
-  const T = useTema2();
-  const q0 = it.em ?? 0.3;
-  return /* @__PURE__ */ jsx2("div", { style: estilo(it, { display: "flex", flexDirection: "column", gap: it.gap ?? 16 }), children: it.linhas.map((l, i) => {
-    const q = q0 + i * (it.passo ?? 0.5);
-    return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 18, opacity: surge2(t, q) }, children: [
-      /* @__PURE__ */ jsx2("div", { style: { width: it.larguraRotulo ?? 190, fontFamily: T.mono, fontSize: 30, color: T.suave, whiteSpace: "nowrap" }, children: l.rotulo }),
-      /* @__PURE__ */ jsx2("div", { style: { height: 34, width: (it.larguraMax ?? 640) * (l.valor / it.max) * ramp2(t, q, q + 0.9), borderRadius: 10, background: `linear-gradient(90deg, #b9453a, ${cor(T, it.cor) ?? T.erro})` } }),
-      /* @__PURE__ */ jsx2("div", { style: { fontFamily: T.mono, fontSize: 30, color: cor(T, it.cor) ?? T.erro, fontWeight: 900 }, children: l.texto })
+  const end = it.glowAtEnd && p > 0.98;
+  const inner = { width: `${p * 100}%`, height: "100%", background: it.gradientAngle === false ? g[0] : `linear-gradient(90deg, ${g.join(", ")})` };
+  return /* @__PURE__ */ jsx2("div", { style: style(it, { height: it.height ?? 40, borderRadius: it.radius ?? 14, background: it.background ?? "#1d1812", ...it.border === false ? {} : { border: `${it.border ?? 3}px solid #3a2f22` }, overflow: "hidden", ...it.noFade ? {} : { opacity: appear2(t, q) }, ...end ? { boxShadow: `0 0 40px ${resolveColor(T, it.glowAtEnd)}` } : {} }), children: /* @__PURE__ */ jsx2("div", { style: inner }) });
+};
+var BarsItem = ({ it, t }) => {
+  const T = useTheme2();
+  const q0 = it.at ?? 0.3;
+  return /* @__PURE__ */ jsx2("div", { style: style(it, { display: "flex", flexDirection: "column", gap: it.gap ?? 16 }), children: it.lines.map((l, i) => {
+    const q = q0 + i * (it.step ?? 0.5);
+    return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 18, opacity: appear2(t, q) }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { width: it.labelWidth ?? 190, fontFamily: T.mono, fontSize: 30, color: T.muted, whiteSpace: "nowrap" }, children: l.label }),
+      /* @__PURE__ */ jsx2("div", { style: { height: 34, width: (it.maxWidth ?? 640) * (l.value / it.max) * ramp2(t, q, q + 0.9), borderRadius: 10, background: `linear-gradient(90deg, #b9453a, ${resolveColor(T, it.color) ?? T.error})` } }),
+      /* @__PURE__ */ jsx2("div", { style: { fontFamily: T.mono, fontSize: 30, color: resolveColor(T, it.color) ?? T.error, fontWeight: 900 }, children: l.text })
     ] }, i);
   }) });
 };
 var Render = ({ it, t, dur }) => {
-  const T = useTema2();
-  const q = it.em ?? 0.3;
-  const filhos = it.itens?.map((f, i) => /* @__PURE__ */ jsx2(Render, { it: f, t, dur }, i));
-  switch (it.tipo) {
-    case "texto":
-      return /* @__PURE__ */ jsx2(Texto, { it, t });
+  const T = useTheme2();
+  const q = it.at ?? 0.3;
+  const children = it.items?.map((f, i) => /* @__PURE__ */ jsx2(Render, { it: f, t, dur }, i));
+  switch (it.type) {
+    case "text":
+      return /* @__PURE__ */ jsx2(TextItem, { it, t });
     case "big":
-      return /* @__PURE__ */ jsx2("div", { style: estilo(it, it.pos ? { display: "flex", justifyContent: "center" } : {}), children: /* @__PURE__ */ jsx2(Big, { t, q, cor: cor(T, it.cor), size: it.tamanho, mono: it.mono, children: it.texto }) });
-    case "caixa":
-      return /* @__PURE__ */ jsx2(Caixa, { t, q, cor: cor(T, it.cor) ?? T.destaque, size: it.tamanho, mono: it.mono, dim: it.apagada, dash: it.tracejada, children: it.texto });
-    case "linha":
-      return /* @__PURE__ */ jsx2(Linha, { t, q, cor: cor(T, it.cor), size: it.tamanho, children: it.partes.map((p, i) => /* @__PURE__ */ jsx2("span", { style: { ...p.mono ? { fontFamily: T.mono } : {}, ...p.cor ? { color: cor(T, p.cor) } : {}, ...p.peso ? { fontWeight: p.peso } : {} }, children: p.texto }, i)) });
-    case "balao":
-      return /* @__PURE__ */ jsx2(Balao, { t, q, cor: cor(T, it.cor) ?? T.info, autor: it.autor, children: it.texto });
-    case "codigo":
-      return /* @__PURE__ */ jsx2(Codigo, { t, q, titulo: it.titulo, cor: cor(T, it.cor) ?? T.erro, linhas: it.linhas.map((l) => ({ ...l, cor: cor(T, l.cor) })) });
-    case "janela":
-      return /* @__PURE__ */ jsx2(Janela, { t, q, src: it.src, duracao: it.duracaoClipe, de: it.de ?? 0, left: it.pos.left, top: it.pos.top, w: it.pos.w, reg: it.reg, tag: it.tag, dur });
-    case "celular":
-      return /* @__PURE__ */ jsx2(Celular, { t, q, src: it.src, duracao: it.duracaoClipe, de: it.de ?? 0, left: it.pos.left, top: it.pos.top, w: it.pos.w, dur });
-    case "barra":
-      return /* @__PURE__ */ jsx2(Barra, { it, t });
-    case "barras":
-      return /* @__PURE__ */ jsx2(Barras, { it, t });
-    case "pilha":
-      return /* @__PURE__ */ jsx2("div", { style: estilo(it, { display: "flex", flexDirection: "column", gap: it.gap ?? 20, alignItems: alinhar[it.alinhar ?? "esticar"] }), children: filhos });
-    case "fila":
-      return /* @__PURE__ */ jsx2("div", { style: estilo(it, it.espalhar ? { display: "flex", justifyContent: "space-between" } : it.centrar === false ? { display: "flex", gap: it.gap ?? 20 } : { display: "flex", justifyContent: "center", alignItems: "center", gap: it.gap ?? 20, whiteSpace: "nowrap" }), children: filhos });
-    case "cartao": {
-      const o = surge2(t, q);
-      return /* @__PURE__ */ jsx2("div", { style: estilo(it, { background: T.caixa, border: `4px solid ${cor(T, it.cor) ?? T.destaque}`, borderRadius: 24, padding: "20px 24px", fontFamily: T.mono, fontSize: it.tamanho ?? 40, color: T.texto, opacity: o, translate: `${(1 - o) * 60}px 0px` }), children: it.linhas.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
-        l.map((p, k) => /* @__PURE__ */ jsx2("span", { style: { ...p.cor ? { color: cor(T, p.cor) } : {}, ...p.peso ? { fontWeight: p.peso } : {} }, children: p.texto }, k)),
-        i < it.linhas.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
+      return /* @__PURE__ */ jsx2("div", { style: style(it, it.pos ? { display: "flex", justifyContent: "center" } : {}), children: /* @__PURE__ */ jsx2(Big, { t, q, color: resolveColor(T, it.color), size: it.size, mono: it.mono, children: it.text }) });
+    case "box":
+      return /* @__PURE__ */ jsx2(Box, { t, q, color: resolveColor(T, it.color) ?? T.accent, size: it.size, mono: it.mono, dim: it.dim, dash: it.dashed, children: it.text });
+    case "line":
+      return /* @__PURE__ */ jsx2(Line, { t, q, color: resolveColor(T, it.color), size: it.size, children: it.parts.map((p, i) => /* @__PURE__ */ jsx2("span", { style: { ...p.mono ? { fontFamily: T.mono } : {}, ...p.color ? { color: resolveColor(T, p.color) } : {}, ...p.weight ? { fontWeight: p.weight } : {} }, children: p.text }, i)) });
+    case "bubble":
+      return /* @__PURE__ */ jsx2(Bubble, { t, q, color: resolveColor(T, it.color) ?? T.info, author: it.author, children: it.text });
+    case "code":
+      return /* @__PURE__ */ jsx2(Code, { t, q, title: it.title, color: resolveColor(T, it.color) ?? T.error, lines: it.lines.map((l) => ({ ...l, color: resolveColor(T, l.color) })) });
+    case "window":
+      return /* @__PURE__ */ jsx2(Window, { t, q, src: it.src, clipDuration: it.clipDuration, from: it.from ?? 0, left: it.pos.left, top: it.pos.top, w: it.pos.w, reg: it.reg, tag: it.tag, dur });
+    case "phone":
+      return /* @__PURE__ */ jsx2(Phone, { t, q, src: it.src, clipDuration: it.clipDuration, from: it.from ?? 0, left: it.pos.left, top: it.pos.top, w: it.pos.w, dur });
+    case "bar":
+      return /* @__PURE__ */ jsx2(BarItem, { it, t });
+    case "bars":
+      return /* @__PURE__ */ jsx2(BarsItem, { it, t });
+    case "stack":
+      return /* @__PURE__ */ jsx2("div", { style: style(it, { display: "flex", flexDirection: "column", gap: it.gap ?? 20, alignItems: alignMap[it.align ?? "stretch"] }), children });
+    case "row":
+      return /* @__PURE__ */ jsx2("div", { style: style(it, it.spread ? { display: "flex", justifyContent: "space-between" } : it.center === false ? { display: "flex", gap: it.gap ?? 20 } : { display: "flex", justifyContent: "center", alignItems: "center", gap: it.gap ?? 20, whiteSpace: "nowrap" }), children });
+    case "card": {
+      const o = appear2(t, q);
+      return /* @__PURE__ */ jsx2("div", { style: style(it, { background: T.box, border: `4px solid ${resolveColor(T, it.color) ?? T.accent}`, borderRadius: 24, padding: "20px 24px", fontFamily: T.mono, fontSize: it.size ?? 40, color: T.text, opacity: o, translate: `${(1 - o) * 60}px 0px` }), children: it.lines.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
+        l.map((p, k) => /* @__PURE__ */ jsx2("span", { style: { ...p.color ? { color: resolveColor(T, p.color) } : {}, ...p.weight ? { fontWeight: p.weight } : {} }, children: p.text }, k)),
+        i < it.lines.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
       ] }, i)) });
     }
     default:
       return /* @__PURE__ */ jsxs2("div", { style: { color: "#f00", fontSize: 30 }, children: [
-        "tipo desconhecido: ",
-        it.tipo
+        "unknown type: ",
+        it.type
       ] });
   }
 };
-var CenaDecl = ({ spec, painelDur, dur }) => {
+var SceneDecl = ({ spec, panelDur, dur }) => {
   const t = useCurrentFrame2() / FPS2;
-  const itens = (spec.itens ?? []).map((it, i) => /* @__PURE__ */ jsx2(Render, { it, t, dur }, i));
-  if ((spec.layout ?? "painel") === "livre") return /* @__PURE__ */ jsx2(Fragment2, { children: itens });
-  return /* @__PURE__ */ jsx2(PainelD, { titulo: spec.titulo ?? "", dur: painelDur, children: itens });
+  const items = (spec.items ?? []).map((it, i) => /* @__PURE__ */ jsx2(Render, { it, t, dur }, i));
+  if ((spec.layout ?? "panel") === "free") return /* @__PURE__ */ jsx2(Fragment2, { children: items });
+  return /* @__PURE__ */ jsx2(Panel, { title: spec.title ?? "", dur: panelDur, children: items });
 };
-var resolver = (it, at) => {
+var resolve = (it, at) => {
   const o = { ...it };
-  if (it.quando !== void 0) {
-    const [f, n] = Array.isArray(it.quando) ? it.quando : [it.quando, 0];
-    o.em = at(f, n) + (it.deslocar ?? 0);
-    delete o.quando;
+  if (it.when !== void 0) {
+    const [f, n] = Array.isArray(it.when) ? it.when : [it.when, 0];
+    o.at = at(f, n) + (it.offset ?? 0);
+    delete o.when;
   }
-  if (it.itens) o.itens = it.itens.map((f) => resolver(f, at));
+  if (it.items) o.items = it.items.map((f) => resolve(f, at));
   return o;
 };
-function epDataDeSpec(spec, palavras, pecas = {}) {
-  const S = spec.cenas.map((c) => c.inicio);
-  const fimDe = (i) => spec.cenas[i].fim ?? (i + 1 < S.length ? S[i + 1] : spec.fechamento.a);
-  const A = mkAt(palavras, S);
+function episodeDataFromSpec(spec, words, components = {}) {
+  const S = spec.scenes.map((c) => c.start);
+  const endOf = (i) => spec.scenes[i].end ?? (i + 1 < S.length ? S[i + 1] : spec.outro.a);
+  const A = makeAt(words, S);
   return {
     id: spec.id,
     durS: spec.durS,
-    legendaPx: spec.legendaPx,
-    voz: spec.voz,
-    palavras,
-    fundoLinhas: spec.fundoLinhas,
-    golpes: spec.golpes,
-    fechamento: spec.fechamento,
-    cenas: spec.cenas.map((c, i) => {
-      const painelDur = fimDe(i) - c.inicio;
-      const rs = { ...c, itens: c.itens?.map((it) => resolver(it, (f, n) => A(i)(f, n))) };
+    captionPx: spec.captionPx,
+    voice: spec.voice,
+    words,
+    backgroundLines: spec.backgroundLines,
+    hits: spec.hits,
+    outro: spec.outro,
+    scenes: spec.scenes.map((c, i) => {
+      const panelDur = endOf(i) - c.start;
+      const resolved = { ...c, items: c.items?.map((it) => resolve(it, (f, n) => A(i)(f, n))) };
       return {
-        a: c.inicio,
-        b: i + 1 < S.length ? S[i + 1] - 0.1 : fimDe(i) - 0.1,
-        rotulo: c.rotulo,
-        sons: c.sons,
-        C: c.componente ? pecas[c.componente] ?? (() => /* @__PURE__ */ jsxs2("div", { style: { color: "#f00", fontSize: 40 }, children: [
-          'componente "',
-          c.componente,
-          '" n\xE3o registrado'
-        ] })) : ({ dur }) => /* @__PURE__ */ jsx2(CenaDecl, { spec: rs, painelDur, dur })
+        a: c.start,
+        b: i + 1 < S.length ? S[i + 1] - 0.1 : endOf(i) - 0.1,
+        label: c.label,
+        sounds: c.sounds,
+        C: c.component ? components[c.component] ?? (() => /* @__PURE__ */ jsxs2("div", { style: { color: "#f00", fontSize: 40 }, children: [
+          'component "',
+          c.component,
+          '" is not registered'
+        ] })) : ({ dur }) => /* @__PURE__ */ jsx2(SceneDecl, { spec: resolved, panelDur, dur })
       };
     })
   };
 }
-var CapaDecl = ({ spec }) => {
-  const T = useTema2();
-  return /* @__PURE__ */ jsx2(Moldura, { glow: spec.glow ?? "rgba(244,185,66,.16)", titulo: spec.titulo ?? ["", "", ""], cor: cor(T, spec.cor) ?? T.destaque, tam: spec.tam, children: (spec.itens ?? []).map((it, i) => /* @__PURE__ */ jsx2(Render, { it, t: 99, dur: 99 }, i)) });
+var CoverDecl = ({ spec }) => {
+  const T = useTheme2();
+  return /* @__PURE__ */ jsx2(Frame, { glow: spec.glow ?? "rgba(244,185,66,.16)", title: spec.title ?? ["", "", ""], color: resolveColor(T, spec.color) ?? T.accent, size: spec.size, children: (spec.items ?? []).map((it, i) => /* @__PURE__ */ jsx2(Render, { it, t: 99, dur: 99 }, i)) });
 };
-var EpisodioDecl = ({ spec, palavras, tema, pecas = {} }) => {
-  const d = epDataDeSpec(spec, palavras, pecas);
-  const CapaC = spec.capa?.componente ? pecas[spec.capa.componente] : void 0;
+var EpisodeDecl = ({ spec, words, theme, components = {} }) => {
+  const d = episodeDataFromSpec(spec, words, components);
+  const CoverC = spec.cover?.component ? components[spec.cover.component] : void 0;
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(Composition, { id: spec.id, component: () => /* @__PURE__ */ jsx2(TemaProvider, { tema, children: /* @__PURE__ */ jsx2(Episodio, { d }) }), durationInFrames: Math.round(spec.durS * FPS2), fps: FPS2, width: 1080, height: 1920 }),
-    spec.capa ? /* @__PURE__ */ jsx2(Still, { id: spec.capa.id, component: () => /* @__PURE__ */ jsx2(TemaProvider, { tema, children: CapaC ? /* @__PURE__ */ jsx2(CapaC, {}) : /* @__PURE__ */ jsx2(CapaDecl, { spec: spec.capa, palavras }) }), width: 1080, height: 1920 }) : null
+    /* @__PURE__ */ jsx2(Composition, { id: spec.id, component: () => /* @__PURE__ */ jsx2(ThemeProvider, { theme, children: /* @__PURE__ */ jsx2(Episode, { d }) }), durationInFrames: Math.round(spec.durS * FPS2), fps: FPS2, width: 1080, height: 1920 }),
+    spec.cover ? /* @__PURE__ */ jsx2(Still, { id: spec.cover.id, component: () => /* @__PURE__ */ jsx2(ThemeProvider, { theme, children: CoverC ? /* @__PURE__ */ jsx2(CoverC, {}) : /* @__PURE__ */ jsx2(CoverDecl, { spec: spec.cover }) }), width: 1080, height: 1920 }) : null
   ] });
 };
 
-// src/longo.tsx
-import { useTema as useTema3 } from "@praeko/studio-core";
+// src/long-parts.tsx
+import { useTheme as useTheme3 } from "@praeko/studio-core";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var surgeL = (t, q, d = 0.3) => interpolate2(t, [q, q + d], [0, 1], clamp);
+var appearL = (t, q, d = 0.3) => interpolate2(t, [q, q + d], [0, 1], clamp);
 var KW = /^(UPDATE|SET|WHERE|AND|INSERT|INTO|SELECT|FROM|CASE|WHEN|THEN|END|AS|VALUES|IS|NOT|NULL|const|await|if)$/;
 var FN = /^(changes|abs|json_set|json_remove|json_extract)$/;
 var colorize = (s, c) => s.split(/(--.*$|\/\/.*$|'[^']*'|\b\w+\b)/).map((p, i) => {
   if (!p) return null;
-  let cor4 = c.texto;
-  if (/^(--|\/\/)/.test(p)) cor4 = c.suave;
-  else if (/^'/.test(p)) cor4 = c.ok;
-  else if (KW.test(p)) cor4 = c.destaque;
-  else if (/^\d+$/.test(p)) cor4 = "#7fb4ff";
-  else if (FN.test(p)) cor4 = c.info;
-  return /* @__PURE__ */ jsx3("span", { style: { color: cor4 }, children: p }, i);
+  let color2 = c.text;
+  if (/^(--|\/\/)/.test(p)) color2 = c.muted;
+  else if (/^'/.test(p)) color2 = c.ok;
+  else if (KW.test(p)) color2 = c.accent;
+  else if (/^\d+$/.test(p)) color2 = "#7fb4ff";
+  else if (FN.test(p)) color2 = c.info;
+  return /* @__PURE__ */ jsx3("span", { style: { color: color2 }, children: p }, i);
 });
-var CodigoL = ({ titulo, lines, t, q, w, size = 32, left, top }) => {
-  const T = useTema3();
-  const o = surgeL(t, q);
-  return /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", left, top, width: w, background: T.codigo, border: `3px solid #3a2f22`, borderRadius: 22, overflow: "hidden", opacity: o, transform: `translateY(${(1 - o) * 24}px)` }, children: [
-    /* @__PURE__ */ jsx3("div", { style: { background: "#262034", padding: "10px 26px", fontFamily: T.mono, fontSize: 26, color: "#9a95b8", whiteSpace: "nowrap" }, children: titulo }),
+var CodeL = ({ title, lines, t, q, w, size = 32, left, top }) => {
+  const T = useTheme3();
+  const o = appearL(t, q);
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", left, top, width: w, background: T.code, border: `3px solid #3a2f22`, borderRadius: 22, overflow: "hidden", opacity: o, transform: `translateY(${(1 - o) * 24}px)` }, children: [
+    /* @__PURE__ */ jsx3("div", { style: { background: "#262034", padding: "10px 26px", fontFamily: T.mono, fontSize: 26, color: "#9a95b8", whiteSpace: "nowrap" }, children: title }),
     /* @__PURE__ */ jsx3("div", { style: { padding: "18px 0", fontFamily: T.mono, fontSize: size, lineHeight: 1.5 }, children: lines.map((l, i) => {
       const on = l.hl ? t >= l.hl[0] && t < l.hl[1] : false;
-      return /* @__PURE__ */ jsx3("div", { style: { whiteSpace: "pre", padding: "0 26px", borderLeft: `6px solid ${on ? l.red ? T.erro : T.destaque : "transparent"}`, background: on ? l.red ? "rgba(255,107,94,.16)" : "rgba(244,185,66,.16)" : "transparent" }, children: colorize(l.s, T) || " " }, i);
+      return /* @__PURE__ */ jsx3("div", { style: { whiteSpace: "pre", padding: "0 26px", borderLeft: `6px solid ${on ? l.red ? T.error : T.accent : "transparent"}`, background: on ? l.red ? "rgba(255,107,94,.16)" : "rgba(244,185,66,.16)" : "transparent" }, children: colorize(l.s, T) || " " }, i);
     }) })
   ] });
 };
-var CartaoL = ({ t, q, left, top, w, h, cor: cor4, children }) => {
-  const T = useTema3();
-  const o = surgeL(t, q);
-  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, width: w, height: h, boxSizing: "border-box", background: T.caixaLongo ?? T.caixa, border: `4px solid ${cor4 ?? T.destaque}`, borderRadius: 24, padding: "20px 28px", fontFamily: T.fonte, color: T.texto, opacity: o, transform: `translateY(${(1 - o) * 26}px)`, display: "flex", flexDirection: "column", justifyContent: "center", gap: 8 }, children });
+var CardL = ({ t, q, left, top, w, h, color: color2, children }) => {
+  const T = useTheme3();
+  const o = appearL(t, q);
+  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, width: w, height: h, boxSizing: "border-box", background: T.longBox ?? T.box, border: `4px solid ${color2 ?? T.accent}`, borderRadius: 24, padding: "20px 28px", fontFamily: T.font, color: T.text, opacity: o, transform: `translateY(${(1 - o) * 26}px)`, display: "flex", flexDirection: "column", justifyContent: "center", gap: 8 }, children });
 };
-var ChipL = ({ t, q, left, top, cor: cor4, size = 34, children }) => {
-  const T = useTema3();
-  const o = surgeL(t, q);
-  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, opacity: o, transform: `scale(${1.15 - 0.15 * o})`, transformOrigin: "left center", fontFamily: T.fonte, fontSize: size, color: T.fundo, background: cor4 ?? T.destaque, borderRadius: 16, padding: "10px 26px", whiteSpace: "nowrap" }, children });
+var ChipL = ({ t, q, left, top, color: color2, size = 34, children }) => {
+  const T = useTheme3();
+  const o = appearL(t, q);
+  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, opacity: o, transform: `scale(${1.15 - 0.15 * o})`, transformOrigin: "left center", fontFamily: T.font, fontSize: size, color: T.background, background: color2 ?? T.accent, borderRadius: 16, padding: "10px 26px", whiteSpace: "nowrap" }, children });
 };
-var TxtL = ({ t, q, left, top, w, size = 44, cor: cor4, align = "left", mono, children }) => {
-  const T = useTema3();
-  const o = surgeL(t, q);
-  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, width: w, opacity: o, transform: `translateY(${(1 - o) * 18}px)`, fontFamily: mono ? T.mono : T.fonte, fontSize: size, color: cor4 ?? T.texto, textAlign: align, lineHeight: 1.2 }, children });
+var TextL = ({ t, q, left, top, w, size = 44, color: color2, align = "left", mono, children }) => {
+  const T = useTheme3();
+  const o = appearL(t, q);
+  return /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left, top, width: w, opacity: o, transform: `translateY(${(1 - o) * 18}px)`, fontFamily: mono ? T.mono : T.font, fontSize: size, color: color2 ?? T.text, textAlign: align, lineHeight: 1.2 }, children });
 };
 
-// src/longo-decl.tsx
+// src/long-decl.tsx
 import { Composition as Composition2 } from "remotion";
-import { FPS as FPS3, Longo, TemaProvider as TemaProvider3, mkAtG, useTema as useTemaLocal } from "@praeko/studio-core";
+import { FPS as FPS3, Long, ThemeProvider as ThemeProvider3, makeAtGlobal, useTheme as useTheme5 } from "@praeko/studio-core";
 import { interpolate as interpolate3, Easing } from "remotion";
 
-// src/capa-longo.tsx
+// src/long-cover.tsx
 import { Still as Still2 } from "remotion";
-import { TemaProvider as TemaProvider2, rgba as rgba2, useTema as useTema4 } from "@praeko/studio-core";
+import { ThemeProvider as ThemeProvider2, rgba as rgba2, useTheme as useTheme4 } from "@praeko/studio-core";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var cor2 = (T, c) => c && !c.startsWith("#") && T[c] ? T[c] : c;
-var Cartao = ({ spec, w, escala = 1 }) => {
-  const T = useTema4();
-  if (!spec.codigo) return null;
-  const px = (n) => n * escala;
-  return /* @__PURE__ */ jsxs4("div", { style: { width: w, background: T.codigo, border: `${px(5)}px solid ${T.destaque}`, borderRadius: px(24), overflow: "hidden", textAlign: "left" }, children: [
-    /* @__PURE__ */ jsx4("div", { style: { background: "#262034", padding: `${px(8)}px ${px(22)}px`, fontFamily: T.mono, fontSize: px(24), color: "#9a95b8" }, children: spec.codigo.titulo }),
-    /* @__PURE__ */ jsx4("div", { style: { padding: `${px(18)}px ${px(24)}px`, fontFamily: T.mono, fontSize: px(30), lineHeight: 1.5, whiteSpace: "pre" }, children: spec.codigo.linhas.map((l, i) => l.hl ? /* @__PURE__ */ jsx4("div", { style: { background: rgba2(T.destaque, 0.2), borderLeft: `${px(6)}px solid ${T.destaque}`, marginLeft: -px(24), paddingLeft: px(18) }, children: colorize(l.s, T) }, i) : /* @__PURE__ */ jsx4("div", { children: colorize(l.s, T) }, i)) })
+var color = resolveColor;
+var CodeCard = ({ spec, w, scale = 1 }) => {
+  const T = useTheme4();
+  if (!spec.code) return null;
+  const px = (n) => n * scale;
+  return /* @__PURE__ */ jsxs4("div", { style: { width: w, background: T.code, border: `${px(5)}px solid ${T.accent}`, borderRadius: px(24), overflow: "hidden", textAlign: "left" }, children: [
+    /* @__PURE__ */ jsx4("div", { style: { background: "#262034", padding: `${px(8)}px ${px(22)}px`, fontFamily: T.mono, fontSize: px(24), color: "#9a95b8" }, children: spec.code.title }),
+    /* @__PURE__ */ jsx4("div", { style: { padding: `${px(18)}px ${px(24)}px`, fontFamily: T.mono, fontSize: px(30), lineHeight: 1.5, whiteSpace: "pre" }, children: spec.code.lines.map((l, i) => l.hl ? /* @__PURE__ */ jsx4("div", { style: { background: rgba2(T.accent, 0.2), borderLeft: `${px(6)}px solid ${T.accent}`, marginLeft: -px(24), paddingLeft: px(18) }, children: colorize(l.s, T) }, i) : /* @__PURE__ */ jsx4("div", { children: colorize(l.s, T) }, i)) })
   ] });
 };
-var Chips = ({ spec, escala = 1, coluna }) => {
-  const T = useTema4();
-  return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: coluna ? "column" : "row", alignItems: coluna ? "flex-start" : void 0, gap: 24 * escala }, children: (spec.chips ?? []).map((c, i) => /* @__PURE__ */ jsx4("div", { style: { background: cor2(T, c.cor) ?? T.destaque, color: T.fundo, fontSize: 48 * escala, padding: `${10 * escala}px ${34 * escala}px`, borderRadius: 18 * escala }, children: c.texto }, i)) });
+var Chips = ({ spec, scale = 1, column }) => {
+  const T = useTheme4();
+  return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: column ? "column" : "row", alignItems: column ? "flex-start" : void 0, gap: 24 * scale }, children: (spec.chips ?? []).map((c, i) => /* @__PURE__ */ jsx4("div", { style: { background: color(T, c.color) ?? T.accent, color: T.background, fontSize: 48 * scale, padding: `${10 * scale}px ${34 * scale}px`, borderRadius: 18 * scale }, children: c.text }, i)) });
 };
-var CapaLongo16x9 = ({ spec }) => {
-  const T = useTema4();
-  return /* @__PURE__ */ jsxs4("div", { style: { width: 1280, height: 720, background: `radial-gradient(900px 500px at 75% 30%, ${rgba2(T.destaque, 0.16)}, ${T.fundo} 70%)`, position: "relative", fontFamily: T.fonte, color: T.texto, overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsxs4("div", { style: { position: "absolute", left: 70, top: 70, fontSize: 92, lineHeight: 1.05, color: T.texto }, children: [
-      spec.titulo[0],
+var LongCover16x9 = ({ spec }) => {
+  const T = useTheme4();
+  return /* @__PURE__ */ jsxs4("div", { style: { width: 1280, height: 720, background: `radial-gradient(900px 500px at 75% 30%, ${rgba2(T.accent, 0.16)}, ${T.background} 70%)`, position: "relative", fontFamily: T.font, color: T.text, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { position: "absolute", left: 70, top: 70, fontSize: 92, lineHeight: 1.05, color: T.text }, children: [
+      spec.title[0],
       /* @__PURE__ */ jsx4("br", {}),
-      /* @__PURE__ */ jsx4("span", { style: { color: cor2(T, spec.cor) ?? T.destaque }, children: spec.titulo[1] })
+      /* @__PURE__ */ jsx4("span", { style: { color: color(T, spec.color) ?? T.accent }, children: spec.title[1] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", left: 70, top: 310 }, children: /* @__PURE__ */ jsx4(Cartao, { spec, w: 700 }) }),
-    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", left: 70, top: 560 }, children: /* @__PURE__ */ jsx4(Chips, { spec, escala: 0.9 }) }),
-    spec.gato ? /* @__PURE__ */ jsx4("div", { style: { position: "absolute", right: 70, top: 150 }, children: /* @__PURE__ */ jsx4(Gato, { nome: spec.gato, tam: 380 }) }) : null,
-    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", right: 70, bottom: 50, fontSize: 34, color: T.destaque, letterSpacing: 2 }, children: T.handle })
+    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", left: 70, top: 310 }, children: /* @__PURE__ */ jsx4(CodeCard, { spec, w: 700 }) }),
+    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", left: 70, top: 560 }, children: /* @__PURE__ */ jsx4(Chips, { spec, scale: 0.9 }) }),
+    spec.mascot ? /* @__PURE__ */ jsx4("div", { style: { position: "absolute", right: 70, top: 150 }, children: /* @__PURE__ */ jsx4(Mascot, { name: spec.mascot, size: 380 }) }) : null,
+    /* @__PURE__ */ jsx4("div", { style: { position: "absolute", right: 70, bottom: 50, fontSize: 34, color: T.accent, letterSpacing: 2 }, children: T.handle })
   ] });
 };
-var CapaLongoVertical = ({ spec }) => {
-  const T = useTema4();
-  return /* @__PURE__ */ jsx4(Moldura, { glow: spec.glow ?? rgba2(T.destaque, 0.16), titulo: [spec.titulo[0], spec.titulo[1]], cor: cor2(T, spec.cor) ?? T.destaque, tam: spec.titulo.some((l) => l.length > 11) ? 104 : 130, children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 34 }, children: [
-    /* @__PURE__ */ jsx4(Cartao, { spec, w: 780, escala: 1 }),
+var LongCoverVertical = ({ spec }) => {
+  const T = useTheme4();
+  return /* @__PURE__ */ jsx4(Frame, { glow: spec.glow ?? rgba2(T.accent, 0.16), title: [spec.title[0], spec.title[1]], color: color(T, spec.color) ?? T.accent, size: spec.title.some((l) => l.length > 11) ? 104 : 130, children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 34 }, children: [
+    /* @__PURE__ */ jsx4(CodeCard, { spec, w: 780, scale: 1 }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 30 }, children: [
-      spec.gato ? /* @__PURE__ */ jsx4(Gato, { nome: spec.gato, tam: 210 }) : null,
-      /* @__PURE__ */ jsx4(Chips, { spec, escala: 0.7, coluna: true })
+      spec.mascot ? /* @__PURE__ */ jsx4(Mascot, { name: spec.mascot, size: 210 }) : null,
+      /* @__PURE__ */ jsx4(Chips, { spec, scale: 0.7, column: true })
     ] })
   ] }) });
 };
-var CapasLongo = ({ spec, tema }) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
-  /* @__PURE__ */ jsx4(Still2, { id: spec.id, component: () => /* @__PURE__ */ jsx4(TemaProvider2, { tema, children: /* @__PURE__ */ jsx4(CapaLongo16x9, { spec }) }), width: 1280, height: 720 }),
-  /* @__PURE__ */ jsx4(Still2, { id: `${spec.id}Vertical`, component: () => /* @__PURE__ */ jsx4(TemaProvider2, { tema, children: /* @__PURE__ */ jsx4(CapaLongoVertical, { spec }) }), width: 1080, height: 1920 })
+var LongCovers = ({ spec, theme }) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  /* @__PURE__ */ jsx4(Still2, { id: spec.id, component: () => /* @__PURE__ */ jsx4(ThemeProvider2, { theme, children: /* @__PURE__ */ jsx4(LongCover16x9, { spec }) }), width: 1280, height: 720 }),
+  /* @__PURE__ */ jsx4(Still2, { id: `${spec.id}Vertical`, component: () => /* @__PURE__ */ jsx4(ThemeProvider2, { theme, children: /* @__PURE__ */ jsx4(LongCoverVertical, { spec }) }), width: 1080, height: 1920 })
 ] });
 
-// src/longo-decl.tsx
+// src/long-decl.tsx
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var cor3 = (T, c) => c && !c.startsWith("#") && T[c] ? T[c] : c;
-var Partes = ({ it }) => {
-  const T = useTemaLocal();
-  if (!it.partes) return /* @__PURE__ */ jsx5(Fragment4, { children: it.texto });
-  return /* @__PURE__ */ jsx5(Fragment4, { children: it.partes.map((p, i) => /* @__PURE__ */ jsx5("span", { style: { ...p.cor ? { color: cor3(T, p.cor) } : {}, ...p.mono ? { fontFamily: T.mono } : {} }, children: p.texto }, i)) });
+var TextParts = ({ it }) => {
+  const T = useTheme5();
+  if (!it.parts) return /* @__PURE__ */ jsx5(Fragment4, { children: it.text });
+  return /* @__PURE__ */ jsx5(Fragment4, { children: it.parts.map((p, i) => /* @__PURE__ */ jsx5("span", { style: { ...p.color ? { color: resolveColor(T, p.color) } : {}, ...p.mono ? { fontFamily: T.mono } : {} }, children: p.text }, i)) });
 };
 var clampL = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var BarraL = ({ it, t, q, T }) => {
-  const p = it.pos ?? {}, dur = it.duracao ?? 1.4, v = it.valor ?? 1, h = it.altura ?? 46;
-  const o = surgeL(t, q), f = interpolate3(t, [q, q + dur], [0, v], { ...clampL, easing: Easing.out(Easing.cubic) });
-  const c = cor3(T, it.cor) ?? T.destaque;
-  return /* @__PURE__ */ jsxs5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, opacity: o, fontFamily: T.fonte }, children: [
-    it.rotulo ? /* @__PURE__ */ jsx5("div", { style: { fontSize: it.tamanho ?? 30, color: T.suave, marginBottom: 8 }, children: it.rotulo }) : null,
+var BarL = ({ it, t, q, T }) => {
+  const p = it.pos ?? {}, dur = it.duration ?? 1.4, v = it.value ?? 1, h = it.height ?? 46;
+  const o = appearL(t, q), f = interpolate3(t, [q, q + dur], [0, v], { ...clampL, easing: Easing.out(Easing.cubic) });
+  const c = resolveColor(T, it.color) ?? T.accent;
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, opacity: o, fontFamily: T.font }, children: [
+    it.label ? /* @__PURE__ */ jsx5("div", { style: { fontSize: it.size ?? 30, color: T.muted, marginBottom: 8 }, children: it.label }) : null,
     /* @__PURE__ */ jsxs5("div", { style: { position: "relative", height: h, borderRadius: h / 2, background: "rgba(255,255,255,.07)", border: `3px solid ${c}`, overflow: "hidden" }, children: [
       /* @__PURE__ */ jsx5("div", { style: { position: "absolute", left: 0, top: 0, bottom: 0, width: `${f * 100}%`, background: `linear-gradient(90deg, ${c}88, ${c})` } }),
-      it.texto ? /* @__PURE__ */ jsx5("div", { style: { position: "absolute", right: 22, top: 0, bottom: 0, display: "flex", alignItems: "center", fontSize: Math.round(h * 0.55), color: T.texto, fontWeight: 900, textShadow: "0 2px 8px rgba(0,0,0,.8)" }, children: it.texto }) : null
+      it.text ? /* @__PURE__ */ jsx5("div", { style: { position: "absolute", right: 22, top: 0, bottom: 0, display: "flex", alignItems: "center", fontSize: Math.round(h * 0.55), color: T.text, fontWeight: 900, textShadow: "0 2px 8px rgba(0,0,0,.8)" }, children: it.text }) : null
     ] })
   ] });
 };
-var ContadorL = ({ it, t, q, T }) => {
-  const p = it.pos ?? {}, dur = it.duracao ?? 1.6, a = it.de ?? 0, b = it.ate ?? 0, casas = it.casas ?? 0;
-  const o = surgeL(t, q), n = interpolate3(t, [q, q + dur], [a, b], { ...clampL, easing: Easing.out(Easing.cubic) });
-  const s = n.toLocaleString("pt-BR", { minimumFractionDigits: casas, maximumFractionDigits: casas });
-  return /* @__PURE__ */ jsxs5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, opacity: o, fontFamily: it.mono ? T.mono : T.fonte, fontSize: it.tamanho ?? 96, fontWeight: 900, color: cor3(T, it.cor) ?? T.destaque, lineHeight: 1.1, textAlign: it.alinhar === "centro" ? "center" : "left" }, children: [
-    it.prefixo ?? "",
+var CounterL = ({ it, t, q, T }) => {
+  const p = it.pos ?? {}, dur = it.duration ?? 1.6, a = it.from ?? 0, b = it.to ?? 0, decimals = it.decimals ?? 0;
+  const o = appearL(t, q), n = interpolate3(t, [q, q + dur], [a, b], { ...clampL, easing: Easing.out(Easing.cubic) });
+  const s = n.toLocaleString("pt-BR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, opacity: o, fontFamily: it.mono ? T.mono : T.font, fontSize: it.size ?? 96, fontWeight: 900, color: resolveColor(T, it.color) ?? T.accent, lineHeight: 1.1, textAlign: it.align === "center" ? "center" : "left" }, children: [
+    it.prefix ?? "",
     s,
-    it.sufixo ?? ""
+    it.suffix ?? ""
   ] });
 };
-function longoDeSpec(spec, palavras, T, pecas = {}) {
-  const at = mkAtG(palavras);
-  const q = (x) => typeof x === "number" ? x : typeof x === "string" ? at(x) : at(x.quando, x.nth ?? 0, x.depois ?? 0) + (x.mais ?? 0);
+function longDataFromSpec(spec, words, T, components = {}) {
+  const at = makeAtGlobal(words);
+  const q = (x) => typeof x === "number" ? x : typeof x === "string" ? at(x) : at(x.when, x.nth ?? 0, x.after ?? 0) + (x.plus ?? 0);
   const Item = ({ it, t }) => {
     const p = it.pos ?? {};
-    switch (it.tipo) {
-      case "codigo":
+    switch (it.type) {
+      case "code":
         return /* @__PURE__ */ jsx5(
-          CodigoL,
+          CodeL,
           {
-            titulo: it.titulo,
+            title: it.title,
             t,
-            q: q(it.quando),
+            q: q(it.when),
             w: p.w,
             left: p.left,
             top: p.top,
-            size: it.tamanho,
-            lines: it.linhas.map((l) => ({ s: l.s, ...l.hl ? { hl: [q(l.hl[0]), q(l.hl[1])] } : {}, ...l.vermelho ? { red: true } : {} }))
+            size: it.size,
+            lines: it.lines.map((l) => ({ s: l.s, ...l.hl ? { hl: [q(l.hl[0]), q(l.hl[1])] } : {}, ...l.red ? { red: true } : {} }))
           }
         );
-      case "cartao":
-        return /* @__PURE__ */ jsx5(CartaoL, { t, q: q(it.quando), left: p.left, top: p.top, w: p.w, h: p.h, cor: cor3(T, it.cor), children: it.itens.map((f, i) => /* @__PURE__ */ jsx5(Item, { it: f, t }, i)) });
-      case "texto":
-        return /* @__PURE__ */ jsx5("div", { style: { fontSize: it.tamanho, color: cor3(T, it.cor), ...it.espacar ? { letterSpacing: it.espacar } : {}, ...it.quando !== void 0 ? { opacity: surgeL(t, q(it.quando)) } : {} }, children: /* @__PURE__ */ jsx5(Partes, { it }) });
+      case "card":
+        return /* @__PURE__ */ jsx5(CardL, { t, q: q(it.when), left: p.left, top: p.top, w: p.w, h: p.h, color: resolveColor(T, it.color), children: it.items.map((f, i) => /* @__PURE__ */ jsx5(Item, { it: f, t }, i)) });
+      case "text":
+        return /* @__PURE__ */ jsx5("div", { style: { fontSize: it.size, color: resolveColor(T, it.color), ...it.spacing ? { letterSpacing: it.spacing } : {}, ...it.when !== void 0 ? { opacity: appearL(t, q(it.when)) } : {} }, children: /* @__PURE__ */ jsx5(TextParts, { it }) });
       case "chip":
-        return /* @__PURE__ */ jsx5(ChipL, { t, q: q(it.quando), left: p.left, top: p.top, cor: cor3(T, it.cor), size: it.tamanho, children: it.texto });
-      case "txt":
-        return /* @__PURE__ */ jsx5(TxtL, { t, q: q(it.quando), left: p.left, top: p.top, w: p.w, size: it.tamanho, cor: cor3(T, it.cor), align: it.alinhar === "centro" ? "center" : "left", mono: it.mono, children: /* @__PURE__ */ jsx5(Partes, { it }) });
+        return /* @__PURE__ */ jsx5(ChipL, { t, q: q(it.when), left: p.left, top: p.top, color: resolveColor(T, it.color), size: it.size, children: it.text });
+      case "freetext":
+        return /* @__PURE__ */ jsx5(TextL, { t, q: q(it.when), left: p.left, top: p.top, w: p.w, size: it.size, color: resolveColor(T, it.color), align: it.align === "center" ? "center" : "left", mono: it.mono, children: /* @__PURE__ */ jsx5(TextParts, { it }) });
       case "video":
-        return /* @__PURE__ */ jsx5(Janela, { t, q: q(it.quando), src: it.src, duracao: it.duracaoClipe, de: it.de ?? 0, left: p.left, top: p.top, w: p.w, reg: it.reg ?? [0, 0, 1920, 1080], tag: it.tag ?? "jogo", dur: it.dur ?? 20 });
-      case "celular":
-        return /* @__PURE__ */ jsx5(Celular, { t, q: q(it.quando), src: it.src, duracao: it.duracaoClipe, de: it.de ?? 0, left: p.left, top: p.top, w: p.w, dur: it.dur ?? 20 });
-      case "barra":
-        return /* @__PURE__ */ jsx5(BarraL, { it, t, q: q(it.quando), T });
-      case "contador":
-        return /* @__PURE__ */ jsx5(ContadorL, { it, t, q: q(it.quando), T });
-      case "fluxo": {
-        const nos = it.nos ?? [], tam = it.tamanho ?? 34, c0 = cor3(T, it.cor) ?? T.destaque;
-        return /* @__PURE__ */ jsx5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, display: "flex", alignItems: "center", justifyContent: "space-between", fontFamily: T.fonte }, children: nos.map((n, i) => {
-          const o = surgeL(t, q(n.quando)), c = cor3(T, n.cor) ?? c0;
-          return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", flex: i < nos.length - 1 ? 1 : void 0 }, children: [
-            /* @__PURE__ */ jsx5("div", { style: { opacity: o, transform: `scale(${0.85 + 0.15 * o})`, background: T.caixaLongo ?? T.caixa, border: `4px solid ${c}`, borderRadius: 22, padding: "16px 26px", fontSize: tam, color: T.texto, textAlign: "center", lineHeight: 1.2, whiteSpace: "pre-line" }, children: n.texto }),
-            i < nos.length - 1 ? /* @__PURE__ */ jsx5("div", { style: { flex: 1, textAlign: "center", fontSize: tam * 1.2, color: T.suave, opacity: surgeL(t, q(nos[i + 1].quando)) }, children: "\u2192" }) : null
+        return /* @__PURE__ */ jsx5(Window, { t, q: q(it.when), src: it.src, clipDuration: it.clipDuration, from: it.from ?? 0, left: p.left, top: p.top, w: p.w, reg: it.reg ?? [0, 0, 1920, 1080], tag: it.tag ?? "footage", dur: it.motionDuration ?? 20 });
+      case "phone":
+        return /* @__PURE__ */ jsx5(Phone, { t, q: q(it.when), src: it.src, clipDuration: it.clipDuration, from: it.from ?? 0, left: p.left, top: p.top, w: p.w, dur: it.motionDuration ?? 20 });
+      case "bar":
+        return /* @__PURE__ */ jsx5(BarL, { it, t, q: q(it.when), T });
+      case "counter":
+        return /* @__PURE__ */ jsx5(CounterL, { it, t, q: q(it.when), T });
+      case "flow": {
+        const nodes = it.nodes ?? [], size = it.size ?? 34, c0 = resolveColor(T, it.color) ?? T.accent;
+        return /* @__PURE__ */ jsx5("div", { style: { position: "absolute", left: p.left, top: p.top, width: p.w, display: "flex", alignItems: "center", justifyContent: "space-between", fontFamily: T.font }, children: nodes.map((n, i) => {
+          const o = appearL(t, q(n.when)), c = resolveColor(T, n.color) ?? c0;
+          return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", flex: i < nodes.length - 1 ? 1 : void 0 }, children: [
+            /* @__PURE__ */ jsx5("div", { style: { opacity: o, transform: `scale(${0.85 + 0.15 * o})`, background: T.longBox ?? T.box, border: `4px solid ${c}`, borderRadius: 22, padding: "16px 26px", fontSize: size, color: T.text, textAlign: "center", lineHeight: 1.2, whiteSpace: "pre-line" }, children: n.text }),
+            i < nodes.length - 1 ? /* @__PURE__ */ jsx5("div", { style: { flex: 1, textAlign: "center", fontSize: size * 1.2, color: T.muted, opacity: appearL(t, q(nodes[i + 1].when)) }, children: "\u2192" }) : null
           ] }, i);
         }) });
       }
       default:
         return /* @__PURE__ */ jsxs5("div", { style: { color: "#f00", fontSize: 30 }, children: [
-          "tipo desconhecido: ",
-          it.tipo
+          "unknown type: ",
+          it.type
         ] });
     }
   };
-  const S = spec.cenas.map((c) => c.inicio);
+  const S = spec.scenes.map((c) => c.start);
   return {
     id: spec.id,
     durS: spec.durS,
-    voz: spec.voz,
-    palavras,
-    ...spec.fecho ? { fecho: { a: spec.fecho.inicio, texto: spec.fecho.texto, link: spec.fecho.link, imagem: spec.fecho.imagem } } : {},
-    cenas: spec.cenas.map((c, i) => ({
+    voice: spec.voice,
+    words,
+    ...spec.endcard ? { endcard: { a: spec.endcard.start, text: spec.endcard.text, link: spec.endcard.link, image: spec.endcard.image } } : {},
+    scenes: spec.scenes.map((c, i) => ({
       n: c.n ?? String(i + 1),
-      titulo: c.titulo,
-      a: c.inicio,
+      title: c.title,
+      a: c.start,
       b: i + 1 < S.length ? S[i + 1] : spec.durS,
-      C: c.componente ? pecas[c.componente] ?? (() => /* @__PURE__ */ jsxs5("div", { style: { color: "#f00", fontSize: 40 }, children: [
-        'componente "',
-        c.componente,
-        '" n\xE3o registrado'
-      ] })) : ({ t }) => /* @__PURE__ */ jsx5(Fragment4, { children: (c.itens ?? []).map((it, k) => /* @__PURE__ */ jsx5(Item, { it, t }, k)) })
+      C: c.component ? components[c.component] ?? (() => /* @__PURE__ */ jsxs5("div", { style: { color: "#f00", fontSize: 40 }, children: [
+        'component "',
+        c.component,
+        '" is not registered'
+      ] })) : ({ t }) => /* @__PURE__ */ jsx5(Fragment4, { children: (c.items ?? []).map((it, k) => /* @__PURE__ */ jsx5(Item, { it, t }, k)) })
     }))
   };
 }
-var LongoDecl = ({ spec, palavras, tema, pecas }) => {
-  const d = longoDeSpec(spec, palavras, tema, pecas);
+var LongDecl = ({ spec, words, theme, components }) => {
+  const d = longDataFromSpec(spec, words, theme, components);
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(Composition2, { id: spec.id, component: () => /* @__PURE__ */ jsx5(TemaProvider3, { tema, children: /* @__PURE__ */ jsx5(Longo, { d }) }), durationInFrames: Math.round(spec.durS * FPS3), fps: FPS3, width: d.largura ?? 1920, height: d.altura ?? 1080 }),
-    spec.capa ? /* @__PURE__ */ jsx5(CapasLongo, { spec: spec.capa, tema }) : null
+    /* @__PURE__ */ jsx5(Composition2, { id: spec.id, component: () => /* @__PURE__ */ jsx5(ThemeProvider3, { theme, children: /* @__PURE__ */ jsx5(Long, { d }) }), durationInFrames: Math.round(spec.durS * FPS3), fps: FPS3, width: d.width ?? 1920, height: d.height ?? 1080 }),
+    spec.cover ? /* @__PURE__ */ jsx5(LongCovers, { spec: spec.cover, theme }) : null
   ] });
 };
 export {
-  Balao,
   Big,
-  Caixa,
-  CapaLongo16x9,
-  CapaLongoVertical,
-  CapasLongo,
-  CartaoL,
-  Celular,
+  Box,
+  Bubble,
+  CardL,
   ChipL,
-  Codigo,
-  CodigoL,
-  EpisodioDecl,
-  Gato,
-  Janela,
-  Linha,
-  LongoDecl,
-  Moldura,
-  PainelD,
-  TxtL,
+  Code,
+  CodeL,
+  EpisodeDecl,
+  Frame,
+  Line,
+  LongCover16x9,
+  LongCoverVertical,
+  LongCovers,
+  LongDecl,
+  Mascot,
+  Panel,
+  Phone,
+  TextL,
+  Window,
+  appearL,
   colorize,
-  epDataDeSpec,
-  longoDeSpec,
-  surgeL
+  episodeDataFromSpec,
+  longDataFromSpec,
+  resolveColor
 };