@praeko/studio-kit 0.1.0 → 0.2.0

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/{longo.d.ts → long-parts.d.ts}

@@ -1,22 +1,22 @@
-/** 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). */
+/** 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: {
-    texto: string;
-    suave: string;
+    text: string;
+    muted: string;
     ok: string;
-    destaque: string;
+    accent: string;
     info: string;
 }) => (import("react/jsx-runtime").JSX.Element | null)[];
-export type LinhaCodigo = {
+export type CodeLine = {
     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[];
+/** 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;
@@ -24,14 +24,14 @@ export declare const CodigoL: React.FC<{
     left: number;
     top: number;
 }>;
-export declare const CartaoL: React.FC<{
+export declare const CardL: React.FC<{
     t: number;
     q: number;
     left: number;
     top: number;
     w: number;
     h?: number;
-    cor?: string;
+    color?: string;
     children: React.ReactNode;
 }>;
 export declare const ChipL: React.FC<{
@@ -39,18 +39,18 @@ export declare const ChipL: React.FC<{
     q: number;
     left: number;
     top: number;
-    cor?: string;
+    color?: string;
     size?: number;
     children: React.ReactNode;
 }>;
-export declare const TxtL: React.FC<{
+export declare const TextL: React.FC<{
     t: number;
     q: number;
     left: number;
     top: number;
     w?: number;
     size?: number;
-    cor?: string;
+    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,8 +1,8 @@
 {
   "name": "@praeko/studio-kit",
-  "version": "0.1.0",
+  "version": "0.2.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`.",
+  "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",
@@ -44,10 +44,11 @@
   "scripts": {
     "build": "node ../../../scripts/build-studio.mjs kit",
     "prepack": "npm run build",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node --test test/*.test.ts"
   },
   "peerDependencies": {
-    "@praeko/studio-core": "^0.1.0",
+    "@praeko/studio-core": "^0.2.0",
     "react": "^19.0.0",
     "remotion": "^4.0.539"
   },

package/dist/capa-longo.d.ts

@@ -1,31 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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/longo-decl.d.ts

@@ -1,61 +0,0 @@
-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/pecas.d.ts

@@ -1,89 +0,0 @@
-/** 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;
-}>;