@praeko/studio-kit 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+Follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and [SemVer](https://semver.org/).
+
+## [0.2.0] - unreleased
+
+Breaking: the whole public API is English, and the declarative components read the English `episode.spec.json` only. There are no deprecated aliases; regenerate the spec with `praeko studio compile` (or run `praeko studio migrate`). Published types are generated by `tsc`, and their relative specifiers end in `.js`.
+
+- Parts: `PainelD` -> `Panel` (`titulo` -> `title`), `Caixa` -> `Box` (`cor` -> `color`), `Linha` -> `Line`, `Big` (`cor` -> `color`), `Balao` -> `Bubble` (`autor` -> `author`), `Codigo` -> `Code` (`titulo` -> `title`, `linhas` -> `lines`, `cor` -> `color`, `marca` -> `mark`), `Janela` -> `Window` (`duracao` -> `clipDuration`, `de` -> `from`), `Celular` -> `Phone`, `Gato` -> `Mascot` (`nome` -> `name`, `tam` -> `size`; the image path comes from the theme `mascotPath`), `Moldura` -> `Frame` (`titulo` -> `title`, `cor` -> `color`, `tam` -> `size`).
+- Declarative: `EpisodioDecl` -> `EpisodeDecl` (props `spec`, `words`, `theme`, `components`; were `spec`, `palavras`, `tema`, `pecas`), `EpSpec` -> `EpisodeSpec`, `CenaSpec` -> `SceneSpec`, `epDataDeSpec` -> `episodeDataFromSpec`, `LongoDecl` -> `LongDecl`, `LongoSpec` -> `LongSpec`, `CenaLSpec` -> `LongSceneSpec`, `longoDeSpec` -> `longDataFromSpec`, `CapaLongoSpec` -> `LongCoverSpec`, `CapasLongo` -> `LongCovers`, `CapaLongo16x9` -> `LongCover16x9`, `CapaLongoVertical` -> `LongCoverVertical`.
+- Long parts: `CodigoL` -> `CodeL`, `CartaoL` -> `CardL`, `TxtL` -> `TextL`, `surgeL` -> `appearL`, `LinhaCodigo` -> `CodeLine`; props `titulo` -> `title`, `cor` -> `color`.
+- Spec shape: see `docs/studio-ingles.md` (4.3, 4.4, 4.7) in the repository; new `resolveColor` helper.
+- Defaults: the `Mascot` card no longer defaults to a game-specific path, and the `Bubble` default author is `— someone, in the chat`. Peer dependency: `@praeko/studio-core` ^0.2.0.
+
+## [0.1.0] - 2026-11-07
+
+First published version, extracted from the project where it was born. Publishes compiled `dist/` (ESM + `.d.ts`); `react` and `remotion` are 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,36 @@
+# Praeko Studio licenses
+
+Verified on 2026-11-07. This file is not legal advice; each vendor's own text prevails.
+
+## Praeko Studio's code
+The packages `@praeko/studio`, `@praeko/studio-core` and `@praeko/studio-kit` are **MIT** (see `LICENSE`, Copyright (c) 2026 Marcone Santos), like `@praeko/sdk` and `@praeko/cli`. The sound effects (`pop`, `ding`, `thump`, `whoosh`) and the `avatar.png` of the project template were created for Studio (sounds synthesized by `scripts/generate-sfx.mjs`, with no third-party samples) and follow the same MIT license. The package ships no fonts, music, stock images or third-party art.
+
+## Notice you need to see (Remotion is NOT MIT)
+> **Remotion.** Remotion is *source-available*, not open source. It is **free** for individuals, non-profits, evaluation and companies with **up to 3 employees** (commercial use included). Companies with **4 or more people** need the **Company License** (remotion.pro/license). You install and run Remotion, so the license is **yours**, not Praeko's. Remotion also sells plans for those who **automate renders by program or agent** (Creators, Automators); their FAQ does not expressly 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 (peer) that you install.
+
+This notice appears in the `README`, at install time (`praeko studio init`), in `praeko studio doctor` and in `praeko studio licenses` (`--accept` records that you read it in `~/.config/praeko/studio/licenses.json`).
+
+**Engines.** Remotion is the default engine for videos **and** covers. With `--engine hyperframes` (or `"engine": "hyperframes"` in `brand.json`) the video **and** the cover are rendered by HyperFrames and nothing from Remotion is used, so a project that only uses HyperFrames does not need a Remotion license. Scenes or covers written as TSX (`component:`) only exist in Remotion.
+
+**We do not promise "free forever":** Remotion's conditions may change (their own page warns that the license changes in Remotion 5.0). Review the license when you upgrade.
+
+## Third-party dependencies
+| Component | Where | License | Source |
+|---|---|---|---|
+| `remotion`, `@remotion/cli` (4.0.539) | installed in the user's **project** (peer of core/kit) | Remotion License (see above), not MIT | remotion.pro/license; github.com/remotion-dev/remotion (LICENSE.md) |
+| `react`, `react-dom` (19.2.3) | user's project (peer) | MIT | each package's package.json |
+| `@praeko/studio-core`, `-kit` | user's project | MIT | LICENSE |
+| `yaml` (2.9.1) | embedded in the `@praeko/studio` bundle | ISC | package.json |
+| `@elevenlabs/elevenlabs-js` (2.x) | dependency of `@praeko/studio` | MIT | package.json |
+| `hyperframes` (0.9.13, optional engine) | downloaded by `npx` the first time you use `--engine hyperframes` | Apache-2.0 | github.com/heygen-com/hyperframes |
+| `typescript`, `esbuild`, `@types/*` | development/build only | Apache-2.0 / MIT | package.json |
+| ffmpeg / ffprobe | you install | LGPL or GPL, depending on the build | ffmpeg.org/legal.html |
+| Chrome Headless Shell / Chromium | Remotion downloads it on the first render | Chromium/Google licenses | remotion.dev/docs/miscellaneous/chrome-headless-shell |
+
+## Services and models (you sign up)
+- **ElevenLabs**: its terms and your plan (voice cloning only with rights over the voice). The key is yours; Studio never prints it.
+- **Local VoiceStudio** (optional): the OmniVoice model is **CC-BY-NC (non-commercial use)**. It is not the default in any Studio configuration and **must not be used in monetized content**. Check the license of any local model you use.
+- **YouTube, Instagram, TikTok**: each network's terms and synthetic-content rules (see `praeko studio docs publish`).
+
+## Fonts and media
+No font is distributed. The project template uses system fonts (`Arial Black`, `Menlo`) that `doctor` checks; swap them in `brand.json` for open fonts (OFL) if you want the video to look the same on every system. Music, images and clips you add are your responsibility (rights and licenses).

package/README.md

@@ -1,3 +1,18 @@
-# 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.
+Praeko Studio scene parts (panel, box, line, bubble, code, window, phone, frame) and the declarative episode built from the compiled `episode.yaml`. A library for projects created with [`@praeko/studio`](https://www.npmjs.com/package/@praeko/studio) (`praeko studio init` installs and configures it).
+
+> **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 or more people need the Company License ([remotion.pro/license](https://www.remotion.pro/license)). Details in [LICENSES.md](./LICENSES.md).
+
+## Install
+```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 (all `@remotion/*` packages on the same version) and `react` ^19. Node 22 or newer. Usage: `praeko studio docs episode-yaml`.

package/dist/color.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from "@praeko/studio-core";
+/** Resolves a theme color name (`accent`, `muted`, ...) or a `#hex` value to a CSS color; unknown names are returned as they are. */
+export declare const resolveColor: (theme: Theme, name?: string) => string | undefined;

package/dist/declarative.d.ts

@@ -0,0 +1,67 @@
+import type { EpisodeData, Theme, Word } from "@praeko/studio-core";
+type Color = string;
+export type Item = {
+    type: string;
+    when?: string | [string, number];
+    at?: number;
+    offset?: number;
+    pos?: {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+        w?: number;
+        h?: number;
+    };
+    [k: string]: any;
+};
+export type SceneSpec = {
+    start: number;
+    end?: number;
+    label?: string;
+    sounds?: {
+        at: number;
+        sound: "pop" | "ding" | "thump" | "whoosh";
+        v?: number;
+    }[];
+    layout?: "panel" | "free";
+    title?: string;
+    items?: Item[];
+    component?: string;
+};
+export type EpisodeSpec = {
+    id: string;
+    durS: number;
+    captionPx?: number;
+    voice: string;
+    backgroundLines?: string[];
+    engine?: string;
+    hits?: {
+        at: number;
+        type: "shake" | "zoom" | "flash" | "all";
+    }[];
+    outro: {
+        a: number;
+        cta: string;
+    };
+    scenes: SceneSpec[];
+    cover?: {
+        id: string;
+        component?: string;
+        title?: [string, string, string?];
+        color?: Color;
+        glow?: string;
+        size?: number;
+        items?: Item[];
+    };
+};
+/** Builds the EpisodeData: each scene becomes a component (declarative or, with `component`, a TSX of the project). */
+export declare function episodeDataFromSpec(spec: EpisodeSpec, words: Word[], components?: Record<string, React.FC<any>>): EpisodeData;
+/** `<EpisodeDecl spec words theme components />` registers the episode Composition and the cover Still. */
+export declare const EpisodeDecl: React.FC<{
+    spec: EpisodeSpec;
+    words: Word[];
+    theme: Theme;
+    components?: Record<string, React.FC<any>>;
+}>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./parts.js";
+export * from "./declarative.js";
+export * from "./long-parts.js";
+export * from "./long-decl.js";
+export * from "./long-cover.js";
+export * from "./color.js";

package/dist/index.js

@@ -0,0 +1,503 @@
+// src/parts.tsx
+import { Loop, OffthreadVideo, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig, Img, AbsoluteFill } from "remotion";
+import { FPS, appear, pop, ramp, rgba, useTheme } from "@praeko/studio-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 } });
+  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: title }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 40, minHeight: 0 }, 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 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, 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 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: author })
+  ] });
+};
+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 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 = 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(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: BAD, opacity: 0.5 + 0.5 * Math.abs(Math.sin(t * 4)) } }),
+      tag
+    ] })
+  ] });
+};
+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 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: 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: color2 }, children: title[1] }),
+      title[2] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        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 }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 400, fontSize: 52, color: LAMP, letterSpacing: 2 }, children: handle })
+  ] });
+};
+
+// src/declarative.tsx
+import { Composition, Still, useCurrentFrame as useCurrentFrame2 } from "remotion";
+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 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 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.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.noWrap ? { whiteSpace: "nowrap" } : {}
+  };
+  return /* @__PURE__ */ jsx2("div", { style: style(it, base), children: lines.map((l, i) => /* @__PURE__ */ jsxs2("span", { children: [
+    l,
+    i < lines.length - 1 ? /* @__PURE__ */ jsx2("br", {}) : null
+  ] }, i)) });
+};
+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 [resolveColor(T, n), ...r].join(" ");
+  });
+  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 = 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: 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: [
+        "unknown type: ",
+        it.type
+      ] });
+  }
+};
+var SceneDecl = ({ spec, panelDur, dur }) => {
+  const t = useCurrentFrame2() / FPS2;
+  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 resolve = (it, at) => {
+  const o = { ...it };
+  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.items) o.items = it.items.map((f) => resolve(f, at));
+  return o;
+};
+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,
+    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.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 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 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(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/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 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 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 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.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 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, 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 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/long-decl.tsx
+import { Composition as Composition2 } from "remotion";
+import { FPS as FPS3, Long, ThemeProvider as ThemeProvider3, makeAtGlobal, useTheme as useTheme5 } from "@praeko/studio-core";
+import { interpolate as interpolate3, Easing } from "remotion";
+
+// src/long-cover.tsx
+import { Still as Still2 } from "remotion";
+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 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, 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 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: color(T, spec.color) ?? T.accent }, children: spec.title[1] })
+    ] }),
+    /* @__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 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.mascot ? /* @__PURE__ */ jsx4(Mascot, { name: spec.mascot, size: 210 }) : null,
+      /* @__PURE__ */ jsx4(Chips, { spec, scale: 0.7, column: true })
+    ] })
+  ] }) });
+};
+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/long-decl.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+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 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.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 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.suffix ?? ""
+  ] });
+};
+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.type) {
+      case "code":
+        return /* @__PURE__ */ jsx5(
+          CodeL,
+          {
+            title: it.title,
+            t,
+            q: q(it.when),
+            w: p.w,
+            left: p.left,
+            top: p.top,
+            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 "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.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(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: [
+          "unknown type: ",
+          it.type
+        ] });
+    }
+  };
+  const S = spec.scenes.map((c) => c.start);
+  return {
+    id: spec.id,
+    durS: spec.durS,
+    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),
+      title: c.title,
+      a: c.start,
+      b: i + 1 < S.length ? S[i + 1] : spec.durS,
+      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 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(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 {
+  Big,
+  Box,
+  Bubble,
+  CardL,
+  ChipL,
+  Code,
+  CodeL,
+  EpisodeDecl,
+  Frame,
+  Line,
+  LongCover16x9,
+  LongCoverVertical,
+  LongCovers,
+  LongDecl,
+  Mascot,
+  Panel,
+  Phone,
+  TextL,
+  Window,
+  appearL,
+  colorize,
+  episodeDataFromSpec,
+  longDataFromSpec,
+  resolveColor
+};

package/dist/long-cover.d.ts

@@ -0,0 +1,31 @@
+import type { Theme } from "@praeko/studio-core";
+export type LongCoverSpec = {
+    id: string;
+    title: [string, string];
+    mascot?: string;
+    code?: {
+        title: string;
+        lines: {
+            s: string;
+            hl?: boolean;
+        }[];
+    };
+    chips?: {
+        text: string;
+        color?: string;
+    }[];
+    color?: string;
+    glow?: string;
+};
+export declare const LongCover16x9: React.FC<{
+    spec: LongCoverSpec;
+}>;
+/** Vertical (Instagram): two-line title, code card, chips and the mascot, inside the Shorts cover `Frame`. */
+export declare const LongCoverVertical: React.FC<{
+    spec: LongCoverSpec;
+}>;
+/** The two Stills of a long-video cover: `<id>` (1280x720) and `<id>Vertical` (1080x1920). */
+export declare const LongCovers: React.FC<{
+    spec: LongCoverSpec;
+    theme: Theme;
+}>;

package/dist/long-decl.d.ts

@@ -0,0 +1,67 @@
+import type { LongData, Theme, Word } from "@praeko/studio-core";
+import type { LongCoverSpec } from "./long-cover.js";
+export type Time = number | string | {
+    when: string;
+    nth?: number;
+    after?: number;
+    plus?: number;
+};
+type Pos = {
+    left?: number;
+    top?: number;
+    w?: number;
+    h?: number;
+};
+export type ItemL = {
+    type: string;
+    when?: Time;
+    pos?: Pos;
+    color?: string;
+    size?: number;
+    text?: string;
+    parts?: {
+        text: string;
+        color?: string;
+        mono?: boolean;
+    }[];
+    [k: string]: any;
+};
+export type LongSceneSpec = {
+    n?: string;
+    title: string;
+    start: number;
+    items?: ItemL[];
+    component?: string;
+};
+export type LongSpec = {
+    id: string;
+    durS: number;
+    voice: string;
+    engine?: string;
+    scenes: LongSceneSpec[];
+    cover?: LongCoverSpec;
+    endcard?: {
+        start: number;
+        text?: string;
+        link?: string;
+        image?: string;
+    };
+    mascot?: {
+        when: Time;
+        name: string;
+        plus?: number;
+    }[];
+};
+export declare function longDataFromSpec(spec: LongSpec, words: Word[], T: Theme, components?: Record<string, React.FC<{
+    t: number;
+}>>): LongData;
+/** Registers the long video Composition (1920x1080). */
+export declare const LongDecl: React.FC<{
+    spec: LongSpec;
+    words: Word[];
+    theme: Theme;
+    components?: Record<string, React.FC<{
+        t: number;
+    }>>;
+}>;
+export {};

package/dist/long-parts.d.ts

@@ -0,0 +1,57 @@
+/** 0 -> 1 from `q` (linear, d = 0.3 s), as in long videos. */
+export declare const appearL: (t: number, q: number, d?: number) => number;
+/** Colors a line of code/SQL (keywords, functions, numbers, strings, comments). */
+export declare const colorize: (s: string, c: {
+    text: string;
+    muted: string;
+    ok: string;
+    accent: string;
+    info: string;
+}) => (import("react/jsx-runtime").JSX.Element | null)[];
+export type CodeLine = {
+    s: string;
+    hl?: [number, number];
+    red?: boolean;
+};
+/** Code block whose lines light up between `hl[0]` and `hl[1]` (global s). */
+export declare const CodeL: React.FC<{
+    title: string;
+    lines: CodeLine[];
+    t: number;
+    q: number;
+    w: number;
+    size?: number;
+    left: number;
+    top: number;
+}>;
+export declare const CardL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    w: number;
+    h?: number;
+    color?: string;
+    children: React.ReactNode;
+}>;
+export declare const ChipL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    color?: string;
+    size?: number;
+    children: React.ReactNode;
+}>;
+export declare const TextL: React.FC<{
+    t: number;
+    q: number;
+    left: number;
+    top: number;
+    w?: number;
+    size?: number;
+    color?: string;
+    align?: "left" | "center";
+    mono?: boolean;
+    children: React.ReactNode;
+}>;

package/dist/parts.d.ts

@@ -0,0 +1,90 @@
+/** Central panel of a Short: always the same size and place (70 px margin, clear of the label and the captions). */
+export declare const Panel: React.FC<{
+    title: string;
+    dur: number;
+    children: React.ReactNode;
+}>;
+export declare const Box: React.FC<{
+    t: number;
+    q: number;
+    color: string;
+    children: React.ReactNode;
+    mono?: boolean;
+    size?: number;
+    dim?: boolean;
+    dash?: boolean;
+}>;
+export declare const Line: React.FC<{
+    t: number;
+    q: number;
+    color?: string;
+    size?: number;
+    children: React.ReactNode;
+}>;
+export declare const Big: React.FC<{
+    t: number;
+    q: number;
+    color?: string;
+    size: number;
+    mono?: boolean;
+    children: React.ReactNode;
+}>;
+export declare const Bubble: React.FC<{
+    t: number;
+    q: number;
+    color: string;
+    children: React.ReactNode;
+    author?: string;
+}>;
+/** Code block with marked lines (the marked line color comes in `color`). */
+export declare const Code: React.FC<{
+    t: number;
+    q: number;
+    title: string;
+    color: string;
+    lines: {
+        s: string;
+        color?: string;
+        mark?: boolean;
+    }[];
+}>;
+/** Real footage (of the game, or any recorded app) in a framed window, with optional crop and a slow camera push. */
+export declare const Window: React.FC<{
+    t: number;
+    q: number;
+    src: string;
+    clipDuration: number;
+    from: number;
+    left: number;
+    top: number;
+    w: number;
+    reg?: [number, number, number, number];
+    tag?: string;
+    dur: number;
+}>;
+/** Vertical recording (phone) in a device frame. */
+export declare const Phone: React.FC<{
+    t: number;
+    q: number;
+    src: string;
+    clipDuration: number;
+    from: number;
+    left: number;
+    top: number;
+    w: number;
+    dur: number;
+}>;
+/** Pixel-art mascot on a card. The image path comes from the theme (`mascotPath`, default `mascots/{name}.png`); `path` overrides it. */
+export declare const Mascot: React.FC<{
+    name: string;
+    size?: number;
+    path?: string;
+}>;
+/** Frame of the vertical covers (content between y=260 and y=1660, the 3:4 crop of the Instagram grid). */
+export declare const Frame: React.FC<{
+    glow: string;
+    title: [string, string, string?];
+    color: string;
+    children: React.ReactNode;
+    size?: number;
+}>;

package/package.json

@@ -1,6 +1,65 @@
 {
   "name": "@praeko/studio-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Praeko Studio scene parts (panel, box, line, bubble, code, window, phone, frame) and the declarative episode that reads the compiled episode.yaml. A library for projects created with `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",
+    "test": "node --test test/*.test.ts"
+  },
+  "peerDependencies": {
+    "@praeko/studio-core": "^0.2.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"
+  }
+}