@praeko/studio-kit 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+Segue [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/) e [SemVer](https://semver.org/lang/pt-BR/).
+
+## [0.1.0] - 2026-11-07
+
+Primeira versão publicada, extraída do projeto de divulgação onde nasceu. Publica `dist/` compilado (ESM + `.d.ts`); `react` e `remotion` são peers.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Marcone Santos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LICENSES.md

@@ -0,0 +1,38 @@
+# Licenças do Praeko Studio / Licenses
+
+Conferido em 07/11/2026 (verified on 2026-11-07). Este arquivo não é aconselhamento jurídico; vale o texto de cada fornecedor.
+
+## O código do Praeko Studio
+Os pacotes `@praeko/studio`, `@praeko/studio-core` e `@praeko/studio-kit` são **MIT** (ver `LICENSE`, Copyright (c) 2026 Marcone Santos), como `@praeko/sdk` e `@praeko/cli`. Os efeitos sonoros (`pop`, `ding`, `thump`, `whoosh`) e o `avatar.png` do modelo de projeto foram criados para o Studio (sons sintetizados por `scripts/gerar-sfx.mjs`, sem amostras de terceiros) e seguem a mesma licença MIT. O pacote não traz fontes, músicas, imagens de banco nem arte de terceiros.
+
+## Aviso que você precisa ver (Remotion NÃO é MIT)
+> **Remotion.** O Remotion é *source-available*, não open source. É **grátis** para pessoas físicas, organizações sem fins lucrativos, avaliação e empresas com **até 3 funcionários** (uso comercial incluído). Empresas com **4 ou mais pessoas** precisam da **Company License** (remotion.pro/license). Quem instala e roda o Remotion é **você**: a licença é sua, não do Praeko. O Remotion também vende planos para quem **automatiza renders por programa ou agente** (Creators, Automators); o FAQ deles não diz expressamente se um agente local que roda `remotion render` entra: **pergunte ao Remotion** antes de usar em escala. O Praeko Studio não copia nem modifica código do Remotion: usa-o como dependência (peer) instalada por você.
+>
+> **Remotion** is source-available, not open source. Free for individuals, non-profits, evaluation and companies of up to 3 employees (commercial use included); companies of 4+ need the Company License (remotion.pro/license). You install and run Remotion, so the license is yours. They also sell plans for programmatic/agent-driven rendering; their FAQ does not say whether a local agent running `remotion render` counts: ask Remotion before using at scale. Praeko Studio does not copy or modify Remotion code; it uses it as a dependency you install.
+
+Este aviso aparece no `README`, na instalação (`praeko studio init`), em `praeko studio doctor` e em `praeko studio licencas` (`--aceitar` registra a leitura em `~/.config/praeko/studio/licencas.json`).
+
+**Capas** são renderizadas com `remotion still`, mesmo com `--motor hyperframes`: hoje não existe projeto 100% livre de Remotion. Uma capa sem Remotion está no roteiro de trabalho (`docs/studio-produto.md`, item 9) e não foi prometida.
+
+**Não prometemos "grátis para sempre":** as condições do Remotion podem mudar (a própria página avisa que a licença muda no Remotion 5.0). Reveja a licença ao subir de versão.
+
+## Dependências de terceiros
+| Componente | Onde | Licença | Fonte |
+|---|---|---|---|
+| `remotion`, `@remotion/cli` (4.0.539) | instalados no **projeto** do usuário (peer de core/kit) | Remotion License (ver acima), não MIT | remotion.pro/license; github.com/remotion-dev/remotion (LICENSE.md) |
+| `react`, `react-dom` (19.2.3) | projeto do usuário (peer) | MIT | package.json de cada pacote |
+| `@praeko/studio-core`, `-kit` | projeto do usuário | MIT | LICENSE |
+| `yaml` (2.9.1) | embutido no bundle de `@praeko/studio` | ISC | package.json |
+| `@elevenlabs/elevenlabs-js` (2.x) | dependência de `@praeko/studio` | MIT | package.json |
+| `hyperframes` (0.9.13, motor opcional) | baixado por `npx` na primeira vez que você usa `--motor hyperframes` | Apache-2.0 | github.com/heygen-com/hyperframes |
+| `typescript`, `esbuild`, `@types/*` | só desenvolvimento/build | Apache-2.0 / MIT | package.json |
+| ffmpeg / ffprobe | você instala | LGPL ou GPL, conforme a compilação | ffmpeg.org/legal.html |
+| Chrome Headless Shell / Chromium | o Remotion baixa no primeiro render | licenças do Chromium/Google | remotion.dev/docs/miscellaneous/chrome-headless-shell |
+
+## Serviços e modelos (você contrata)
+- **ElevenLabs**: seus termos e seu plano (clonagem de voz só com direito sobre a voz). A chave é sua; o Studio nunca a imprime.
+- **VoiceStudio local** (opcional): o modelo OmniVoice é **CC-BY-NC (uso não comercial)**. Não é padrão em nenhuma configuração do Studio e **não deve ser usado em conteúdo monetizado**. Confira a licença de qualquer modelo local que usar.
+- **YouTube, Instagram, TikTok**: termos e regras de conteúdo sintético de cada rede (veja `praeko studio docs publicar`).
+
+## Fontes e mídia
+Nenhuma fonte é distribuída. O modelo de projeto usa fontes do sistema (`Arial Black`, `Menlo`) que o `doctor` confere; troque-as no `marca.json` por fontes abertas (OFL) se quiser que o vídeo saia igual em todos os sistemas. Música, imagens e clipes que você adicionar são responsabilidade sua (direitos e licenças).

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# @praeko/studio-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Peças de cena do Praeko Studio (painel, caixa, linha, balão, código, janela, celular, moldura) e o episódio declarativo do episodio.yaml compilado. Biblioteca para projetos criados com [`@praeko/studio`](https://www.npmjs.com/package/@praeko/studio) (`praeko studio init` já instala e configura).
+
+> **Licenças.** Este pacote é MIT e usa o **Remotion** como dependência (peer) que **você** instala. O Remotion **não é MIT**: grátis para pessoas, organizações sem fins lucrativos e empresas de até 3 funcionários; empresas com 4 ou mais pessoas precisam da Company License ([remotion.pro/license](https://www.remotion.pro/license)). Detalhes em [LICENSES.md](./LICENSES.md).
+>
+> **Licenses.** This package is MIT and uses **Remotion** as a peer dependency that **you** install. Remotion is **not MIT**: free for individuals, non-profits and companies of up to 3 employees; companies of 4+ need the Company License.
+
+## Instalar
+```sh
+# npm
+npm install @praeko/studio-kit remotion react
+# yarn
+yarn add @praeko/studio-kit remotion react
+# pnpm
+pnpm add @praeko/studio-kit remotion react
+# bun
+bun add @praeko/studio-kit remotion react
+```
+Peers: `remotion` ^4.0.539 (todos os pacotes `@remotion/*` na mesma versão) e `react` ^19. Node 22 ou mais novo. Uso: `praeko studio docs episodio-yaml`.

package/dist/capa-longo.d.ts

@@ -0,0 +1,31 @@
+import { Tema } from "@praeko/studio-core";
+export type CapaLongoSpec = {
+    id: string;
+    titulo: [string, string];
+    gato?: string;
+    codigo?: {
+        titulo: string;
+        linhas: {
+            s: string;
+            hl?: boolean;
+        }[];
+    };
+    chips?: {
+        texto: string;
+        cor?: string;
+    }[];
+    cor?: string;
+    glow?: string;
+};
+export declare const CapaLongo16x9: React.FC<{
+    spec: CapaLongoSpec;
+}>;
+/** Vertical (Instagram): título em duas linhas, cartão de código, chips e o gato, dentro da `Moldura` das capas dos Shorts. */
+export declare const CapaLongoVertical: React.FC<{
+    spec: CapaLongoSpec;
+}>;
+/** As duas Stills de uma capa de longo: `<id>` (1280×720) e `<id>Vertical` (1080×1920). */
+export declare const CapasLongo: React.FC<{
+    spec: CapaLongoSpec;
+    tema: Tema;
+}>;

package/dist/declarativo.d.ts

@@ -0,0 +1,65 @@
+import { EpData, Palavra, Tema } from "@praeko/studio-core";
+type Cor = string;
+export type Item = {
+    tipo: string;
+    quando?: string | [string, number];
+    em?: number;
+    pos?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+        w?: number;
+        h?: number;
+    };
+    [k: string]: any;
+};
+export type CenaSpec = {
+    inicio: number;
+    fim?: number;
+    rotulo?: string;
+    sons?: {
+        at: number;
+        f: "pop" | "ding" | "thump" | "whoosh";
+        v?: number;
+    }[];
+    layout?: "painel" | "livre";
+    titulo?: string;
+    itens?: Item[];
+    componente?: string;
+};
+export type EpSpec = {
+    id: string;
+    durS: number;
+    legendaPx?: number;
+    voz: string;
+    fundoLinhas?: string[];
+    golpes?: {
+        at: number;
+        tipo: "shake" | "zoom" | "flash" | "tudo";
+    }[];
+    fechamento: {
+        a: number;
+        cta: string;
+    };
+    cenas: CenaSpec[];
+    capa?: {
+        id: string;
+        componente?: string;
+        titulo?: [string, string, string?];
+        cor?: Cor;
+        glow?: string;
+        tam?: number;
+        itens?: Item[];
+    };
+};
+/** Monta o EpData: cada cena vira um componente (declarativo ou, com `componente`, um TSX do projeto). */
+export declare function epDataDeSpec(spec: EpSpec, palavras: Palavra[], pecas?: Record<string, React.FC<any>>): EpData;
+/** `<EpisodioDecl spec palavras tema pecas />` registra a Composition do episódio e a Still da capa. */
+export declare const EpisodioDecl: React.FC<{
+    spec: EpSpec;
+    palavras: Palavra[];
+    tema: Tema;
+    pecas?: Record<string, React.FC<any>>;
+}>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./pecas";
+export * from "./declarativo";
+export * from "./longo";
+export * from "./longo-decl";
+export * from "./capa-longo";

package/dist/index.js

@@ -0,0 +1,491 @@
+// src/pecas.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PainelD = ({ titulo, dur, children }) => {
+  const { destaque: LAMP, texto: INK, fonte: FONT } = useTema();
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const pop3 = spring({ frame, fps, config: { damping: 13, stiffness: 190 } });
+  const out = interpolate(frame, [dur * FPS - 6, dur * FPS], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 70,
+        right: 70,
+        top: 330,
+        height: 1e3,
+        display: "flex",
+        flexDirection: "column",
+        background: "rgba(20,17,15,.94)",
+        border: `4px solid ${LAMP}`,
+        borderRadius: 36,
+        boxShadow: "0 24px 60px rgba(0,0,0,.6)",
+        padding: "40px 48px",
+        fontFamily: FONT,
+        color: INK,
+        transform: `scale(${0.82 + 0.18 * pop3}) translateY(${(1 - pop3) * 60}px)`,
+        opacity: Math.min(1, pop3 * 1.6) * out,
+        overflow: "hidden",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 38, letterSpacing: 5, color: LAMP, whiteSpace: "nowrap" }, children: titulo }),
+        /* @__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 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 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 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" }),
+    children,
+    /* @__PURE__ */ jsx("div", { style: { fontFamily: MONO, fontSize: 26, color: MUTED, marginTop: 16 }, children: autor })
+  ] });
+};
+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 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);
+  const push = 1 + 0.07 * ramp(t, q, q + dur);
+  const total = duracao - de;
+  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__ */ 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)) } }),
+      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 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();
+  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__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("span", { style: { color: cor4 }, children: titulo[1] }),
+      titulo[2] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        titulo[2]
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 130, display: "flex", flexDirection: "column", alignItems: "center", width: 1e3, transform: "scale(1.16)", transformOrigin: "top center" }, children }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 400, fontSize: 52, color: LAMP, letterSpacing: 2 }, children: handle })
+  ] });
+};
+
+// src/declarativo.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 { 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 = {}) => {
+  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");
+  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.pop ? { scale: String(pop2(t, q)) } : {},
+    ...it.semQuebra ? { whiteSpace: "nowrap" } : {}
+  };
+  return /* @__PURE__ */ jsx2("div", { style: estilo(it, base), children: linhas.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
+    l,
+    i < linhas.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) => {
+    const [n, ...r] = String(c).split(" ");
+    return [cor(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 })
+    ] }, 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 });
+    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
+      ] }, i)) });
+    }
+    default:
+      return /* @__PURE__ */ jsxs2("div", { style: { color: "#f00", fontSize: 30 }, children: [
+        "tipo desconhecido: ",
+        it.tipo
+      ] });
+  }
+};
+var CenaDecl = ({ spec, painelDur, 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 });
+};
+var resolver = (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.itens) o.itens = it.itens.map((f) => resolver(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);
+  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))) };
+      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 })
+      };
+    })
+  };
+}
+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 EpisodioDecl = ({ spec, palavras, tema, pecas = {} }) => {
+  const d = epDataDeSpec(spec, palavras, pecas);
+  const CapaC = spec.capa?.componente ? pecas[spec.capa.componente] : 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
+  ] });
+};
+
+// src/longo.tsx
+import { useTema as useTema3 } 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 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);
+});
+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 }),
+    /* @__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);
+    }) })
+  ] });
+};
+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 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 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 });
+};
+
+// src/longo-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 { interpolate as interpolate3, Easing } from "remotion";
+
+// src/capa-longo.tsx
+import { Still as Still2 } from "remotion";
+import { TemaProvider as TemaProvider2, rgba as rgba2, useTema as useTema4 } 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 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 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],
+      /* @__PURE__ */ jsx4("br", {}),
+      /* @__PURE__ */ jsx4("span", { style: { color: cor2(T, spec.cor) ?? T.destaque }, children: spec.titulo[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 })
+  ] });
+};
+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 }),
+    /* @__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 })
+    ] })
+  ] }) });
+};
+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 })
+] });
+
+// src/longo-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 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,
+    /* @__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
+    ] })
+  ] });
+};
+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 ?? "",
+    s,
+    it.sufixo ?? ""
+  ] });
+};
+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);
+  const Item = ({ it, t }) => {
+    const p = it.pos ?? {};
+    switch (it.tipo) {
+      case "codigo":
+        return /* @__PURE__ */ jsx5(
+          CodigoL,
+          {
+            titulo: it.titulo,
+            t,
+            q: q(it.quando),
+            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 } : {} }))
+          }
+        );
+      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 "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 }) });
+      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
+          ] }, i);
+        }) });
+      }
+      default:
+        return /* @__PURE__ */ jsxs5("div", { style: { color: "#f00", fontSize: 30 }, children: [
+          "tipo desconhecido: ",
+          it.tipo
+        ] });
+    }
+  };
+  const S = spec.cenas.map((c) => c.inicio);
+  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) => ({
+      n: c.n ?? String(i + 1),
+      titulo: c.titulo,
+      a: c.inicio,
+      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)) })
+    }))
+  };
+}
+var LongoDecl = ({ spec, palavras, tema, pecas }) => {
+  const d = longoDeSpec(spec, palavras, tema, pecas);
+  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
+  ] });
+};
+export {
+  Balao,
+  Big,
+  Caixa,
+  CapaLongo16x9,
+  CapaLongoVertical,
+  CapasLongo,
+  CartaoL,
+  Celular,
+  ChipL,
+  Codigo,
+  CodigoL,
+  EpisodioDecl,
+  Gato,
+  Janela,
+  Linha,
+  LongoDecl,
+  Moldura,
+  PainelD,
+  TxtL,
+  colorize,
+  epDataDeSpec,
+  longoDeSpec,
+  surgeL
+};

package/dist/longo-decl.d.ts

@@ -0,0 +1,61 @@
+import { LongoData, Palavra, Tema } from "@praeko/studio-core";
+import { CapaLongoSpec } from "./capa-longo";
+export type Tempo = number | string | {
+    quando: string;
+    nth?: number;
+    depois?: number;
+    mais?: number;
+};
+type Pos = {
+    left?: number;
+    top?: number;
+    w?: number;
+    h?: number;
+};
+export type ItemL = {
+    tipo: string;
+    quando?: Tempo;
+    pos?: Pos;
+    cor?: string;
+    tamanho?: number;
+    texto?: string;
+    partes?: {
+        texto: string;
+        cor?: string;
+        mono?: boolean;
+    }[];
+    [k: string]: any;
+};
+export type CenaLSpec = {
+    n?: string;
+    titulo: string;
+    inicio: number;
+    itens?: ItemL[];
+    componente?: string;
+};
+export type LongoSpec = {
+    id: string;
+    durS: number;
+    voz: string;
+    cenas: CenaLSpec[];
+    capa?: CapaLongoSpec;
+    fecho?: {
+        inicio: number;
+        texto?: string;
+        link?: string;
+        imagem?: string;
+    };
+};
+export declare function longoDeSpec(spec: LongoSpec, palavras: Palavra[], T: Tema, pecas?: Record<string, React.FC<{
+    t: number;
+}>>): LongoData;
+/** Registra a Composition do longo (1920×1080). */
+export declare const LongoDecl: React.FC<{
+    spec: LongoSpec;
+    palavras: Palavra[];
+    tema: Tema;
+    pecas?: Record<string, React.FC<{
+        t: number;
+    }>>;
+}>;
+export {};

package/dist/longo.d.ts

@@ -0,0 +1,57 @@
+/** 0 → 1 a partir de `q` (linear, d = 0,3 s), como nos longos. */
+export declare const surgeL: (t: number, q: number, d?: number) => number;
+/** Colore uma linha de código/SQL (palavras-chave, funções, números, strings, comentários). */
+export declare const colorize: (s: string, c: {
+    texto: string;
+    suave: string;
+    ok: string;
+    destaque: string;
+    info: string;
+}) => (import("react/jsx-runtime").JSX.Element | null)[];
+export type LinhaCodigo = {
+    s: string;
+    hl?: [number, number];
+    red?: boolean;
+};
+/** Bloco de código com linhas que acendem entre `hl[0]` e `hl[1]` (s globais). */
+export declare const CodigoL: React.FC<{
+    titulo: string;
+    lines: LinhaCodigo[];
+    t: number;
+    q: number;
+    w: number;
+    size?: number;
+    left: number;
+    top: number;
+}>;
+export declare const CartaoL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    w: number;
+    h?: number;
+    cor?: string;
+    children: React.ReactNode;
+}>;
+export declare const ChipL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    cor?: string;
+    size?: number;
+    children: React.ReactNode;
+}>;
+export declare const TxtL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    w?: number;
+    size?: number;
+    cor?: string;
+    align?: "left" | "center";
+    mono?: boolean;
+    children: React.ReactNode;
+}>;

package/dist/pecas.d.ts

@@ -0,0 +1,89 @@
+/** Painel central de um Short: mesmo tamanho e lugar sempre (margem de 70 px, longe do rótulo e da legenda). */
+export declare const PainelD: React.FC<{
+    titulo: string;
+    dur: number;
+    children: React.ReactNode;
+}>;
+export declare const Caixa: React.FC<{
+    t: number;
+    q: number;
+    cor: string;
+    children: React.ReactNode;
+    mono?: boolean;
+    size?: number;
+    dim?: boolean;
+    dash?: boolean;
+}>;
+export declare const Linha: React.FC<{
+    t: number;
+    q: number;
+    cor?: string;
+    size?: number;
+    children: React.ReactNode;
+}>;
+export declare const Big: React.FC<{
+    t: number;
+    q: number;
+    cor?: string;
+    size: number;
+    mono?: boolean;
+    children: React.ReactNode;
+}>;
+export declare const Balao: React.FC<{
+    t: number;
+    q: number;
+    cor: string;
+    children: React.ReactNode;
+    autor?: string;
+}>;
+/** Bloco de código com linhas marcadas (a cor da linha marcada vem em `cor`). */
+export declare const Codigo: React.FC<{
+    t: number;
+    q: number;
+    titulo: string;
+    cor: string;
+    linhas: {
+        s: string;
+        cor?: string;
+        marca?: boolean;
+    }[];
+}>;
+/** Cena real do jogo (ou de qualquer app gravado) numa janela com moldura, recorte opcional e empurrão lento de câmera. */
+export declare const Janela: React.FC<{
+    t: number;
+    q: number;
+    src: string;
+    duracao: number;
+    de: number;
+    left: number;
+    top: number;
+    w: number;
+    reg?: [number, number, number, number];
+    tag?: string;
+    dur: number;
+}>;
+/** Gravação vertical (celular) com moldura de aparelho. */
+export declare const Celular: React.FC<{
+    t: number;
+    q: number;
+    src: string;
+    duracao: number;
+    de: number;
+    left: number;
+    top: number;
+    w: number;
+    dur: number;
+}>;
+/** Mascote em pixel art num cartão (arquivo `gatos/gato-<nome>.png`; troque o prefixo no projeto se o mascote for outro). */
+export declare const Gato: React.FC<{
+    nome: string;
+    tam?: number;
+}>;
+/** Moldura das capas verticais (conteúdo entre y=260 e y=1660, recorte 3:4 da grade do Instagram). */
+export declare const Moldura: React.FC<{
+    glow: string;
+    titulo: [string, string, string?];
+    cor: string;
+    children: React.ReactNode;
+    tam?: number;
+}>;

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@praeko/studio-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Peças de cena do Praeko Studio (painel, caixa, linha, balão, código, janela, celular, moldura) e o episódio declarativo que lê o episodio.yaml compilado. Biblioteca para projetos criados com `praeko studio init`.",
+  "license": "MIT",
+  "keywords": [
+    "praeko",
+    "video",
+    "shorts",
+    "remotion",
+    "captions",
+    "kit"
+  ],
+  "homepage": "https://praeko.app/docs",
+  "bugs": {
+    "url": "https://praeko.app/docs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Praeko/praeko-js.git",
+    "directory": "studio/packages/kit"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "LICENSES.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../../scripts/build-studio.mjs kit",
+    "prepack": "npm run build",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@praeko/studio-core": "^0.1.0",
+    "react": "^19.0.0",
+    "remotion": "^4.0.539"
+  },
+  "devDependencies": {
+    "@praeko/studio-core": "*",
+    "@types/react": "19.2.7",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remotion": "4.0.539"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}